/* style.css */

/* =========================
   ROOT + BASE
========================= */

:root{
  --bg:#07090d;
  --text:#e9edf5;
  --muted:rgba(233,237,245,.72);
  --muted2:rgba(233,237,245,.55);
  --line:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.06);
  --radius:18px;

  /* ✅ Arc controls (responsive + always centred) */
  --arc-w: clamp(1050px, 155vw, 1800px);
  --arc-h: clamp(220px, 28vw, 360px);

  /* vertical placement of the arc within the horizon band */
  --arc-y: 50%;
}

*{box-sizing:border-box}
html,body{height:100%}

html, body{
  overflow-x: clip; /* better than hidden for modern browsers */
}

@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}

body{
  margin:0;
  min-height:100vh;   /* fallback */
  min-height:100svh;  /* stable viewport height on mobile */
  color:var(--text);
  background:var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;

  /* ✅ sticky footer layout */
  display:flex;
  flex-direction:column;
}

a{color:rgba(233,237,245,.75); text-decoration:none}
a:hover{color:rgba(233,237,245,.95)}

/* =========================
   BACKGROUND
========================= */

.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:linear-gradient(#06070a, #07090d 60%, #06070a);
}

.vignette{
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 50% 35%, transparent 0 40%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.78) 100%);
  z-index:-1;
}

.grain{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* =========================
   HEADER
========================= */

.top{
  padding:32px 24px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.orbMark{
  width:300px;
  height:300px;
  border-radius:999px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 22px rgba(120,170,255,.40));
}

.orbMark img{
  width:300px;
  height:300px;
  border-radius:999px;
  object-fit:cover;
}

.brand{
  font-size:25px;
  letter-spacing:.62em;
  margin-left:.58em; /* balances the extra space */
  font-weight:500;
  text-transform:uppercase;
  opacity:.94;
  color:rgba(233,237,245,.92);
  text-shadow:
    0 0 18px rgba(255,255,255,.06),
    0 0 40px rgba(255,255,255,.03);
}

/* =========================
   LAYOUT
========================= */

.wrap{
  width:min(1120px, 92vw);
  margin:0 auto;
  padding:20px 0 20px;
}

.hero{
  text-align:center;
  padding:10px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

h1{
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  font-size:clamp(42px, 3.7vw, 62px);
  line-height:1.14;
  letter-spacing:.03em;
  white-space:nowrap;
  text-wrap:nowrap;
  max-width:1100px;
  margin:22px auto 10px;
  text-rendering:optimizeLegibility;
}

.subhead{
  margin:0;
  font-size:clamp(16px, 2vw, 22px);
  color:var(--muted);
  font-weight:300;
}

.bodycopy{
  margin:0;
  width:min(900px, 92vw);
  font-size:clamp(16px, 1.6vw, 20px);
  color:rgba(233,237,245,.88);
}

/* =========================
   CURVED HORIZON (ALWAYS CENTERED + RESPONSIVE)
========================= */

.horizonWrap{
  position:relative;
  width:100%;
  height:clamp(96px, 14vw, 150px);
  margin:clamp(18px, 5vw, 55px) 0 clamp(18px, 3vw, 22px);
  pointer-events:none;
  overflow:visible;
}

.horizonWrap .arcGlow,
.horizonWrap .arcLine{
  position:absolute;
  left:50%;
  top:var(--arc-y);

  width:var(--arc-w);
  height:var(--arc-h);

  transform:translate(-50%, -50%);

  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  pointer-events:none;
}

/* glow image */
.horizonWrap .arcGlow{
  opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 320' overflow='visible'%3E%3Cdefs%3E%3Cfilter id='b' x='-120%25' y='-220%25' width='340%25' height='560%25'%3E%3CfeGaussianBlur stdDeviation='18'/%3E%3C/filter%3E%3Cfilter id='b2' x='-120%25' y='-220%25' width='340%25' height='560%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cfilter id='msoft' x='-120%25' y='-220%25' width='340%25' height='560%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3CradialGradient id='halo' cx='50%25' cy='46%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='rgba(200,245,255,0.14)'/%3E%3Cstop offset='60%25' stop-color='rgba(200,245,255,0.06)'/%3E%3Cstop offset='100%25' stop-color='rgba(200,245,255,0)'/%3E%3C/radialGradient%3E%3CradialGradient id='core' cx='50%25' cy='42%25' r='65%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0.90)'/%3E%3Cstop offset='22%25' stop-color='rgba(235,250,255,0.48)'/%3E%3Cstop offset='58%25' stop-color='rgba(190,235,255,0.10)'/%3E%3Cstop offset='100%25' stop-color='rgba(190,235,255,0)'/%3E%3C/radialGradient%3E%3Cmask id='aboveArc'%3E%3Crect width='1600' height='320' fill='black'/%3E%3Cg filter='url(%23msoft)'%3E%3Cpath d='M0 220 Q800 40 1600 220 L1600 -260 L0 -260 Z' fill='white'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23aboveArc)'%3E%3Cellipse cx='800' cy='198' rx='300' ry='92' fill='url(%23halo)' filter='url(%23b)'/%3E%3Cellipse cx='800' cy='194' rx='120' ry='40' fill='url(%23core)' filter='url(%23b2)'/%3E%3Cellipse cx='800' cy='182' rx='84' ry='12' fill='rgba(255,255,255,0.22)' filter='url(%23b2)'/%3E%3C/g%3E%3C/svg%3E");
}

/* rim line */
.horizonWrap .arcLine{
  opacity:.75;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.10))
    drop-shadow(0 0 22px rgba(180,220,255,.04));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 320'%3E%3Cdefs%3E%3ClinearGradient id='rim' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0)'/%3E%3Cstop offset='30%25' stop-color='rgba(210,235,255,0.05)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.72)'/%3E%3Cstop offset='70%25' stop-color='rgba(210,235,255,0.05)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 220 Q800 40 1600 220' fill='none' stroke='url(%23rim)' stroke-width='2.1'/%3E%3C/svg%3E");
}

/* =========================
   AUDIO CARD
========================= */

.audioCard{
  margin:18px auto 46px;
  width:min(780px, 94vw);
  padding:14px 16px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  backdrop-filter:blur(12px);
  box-shadow:
    0 28px 90px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  overflow:hidden;
}

.audioCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 80% at 50% 0%,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.02) 28%,
    rgba(255,255,255,0) 60%);
  pointer-events:none;
  opacity:.9;
}

.playBtn{
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(140,190,255,.18);
  background:radial-gradient(circle at 35% 30%,
    rgba(140,190,255,.22),
    rgba(255,255,255,.04) 55%,
    rgba(255,255,255,.02));
  color:rgba(233,237,245,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:
    0 0 0 7px rgba(140,190,255,.06),
    0 0 34px rgba(140,190,255,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .15s ease, filter .15s ease;
}

.playBtn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.playBtn:active{ transform:translateY(0px); }

.playIcon{
  font-size:16px;
  transform:translateX(1px);
  opacity:.95;
}

.waveWrap{
  flex:1;
  min-width:0;
  position:relative;
  z-index:1;
}

.bars{
  height:28px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:5px;
  align-items:end;
  padding:1px 6px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  position:relative;
  overflow:hidden;
}

.bars span{
  display:block;
  width:100%;
  height:12px;
  border-radius:3px;
  background:linear-gradient(180deg, rgba(233,237,245,.46), rgba(233,237,245,.16));
  opacity:.74;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.015),
    0 10px 22px rgba(0,0,0,.22);
}

.bars span:nth-child(5n){  height:20px; opacity:.78; }
.bars span:nth-child(7n){  height:16px; opacity:.70; }
.bars span:nth-child(9n){  height:24px; opacity:.82; }
.bars span:nth-child(11n){ height:13px; opacity:.66; }
.bars span:nth-child(13n){ height:22px; opacity:.78; }
.bars span:nth-child(17n){ height:10px; opacity:.62; }
.bars span:nth-child(19n){ height:26px; opacity:.86; }

.bars::before,
.bars::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:40px;
  pointer-events:none;
}

.bars::before{
  left:0;
  background:linear-gradient(90deg, rgba(7,9,13,.78), rgba(7,9,13,0));
}
.bars::after{
  right:0;
  background:linear-gradient(270deg, rgba(7,9,13,.78), rgba(7,9,13,0));
}

.timeline{
  margin-top:8px;
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  gap:10px;
}

.time{
  font-size:12px;
  color:rgba(233,237,245,.48);
  font-variant-numeric:tabular-nums;
}

input[type="range"]{
  width:100%;
  appearance:none;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  outline:none;
}

input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:12px;
  height:12px;
  border-radius:999px;
  background:rgba(233,237,245,.90);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 5px rgba(140,190,255,.05),
    0 0 18px rgba(140,190,255,.12);
  cursor:pointer;
}

input[type="range"]::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:999px;
  background:rgba(233,237,245,.90);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 5px rgba(140,190,255,.05),
    0 0 18px rgba(140,190,255,.12);
  cursor:pointer;
}

/* ✅ Mobile: make waveform bars feel fuller */
@media (max-width:520px){
  .audioCard{
    padding:16px 14px;
    border-radius:26px;
  }

  .bars{
    height:34px;           /* was 28px */
    gap:4px;               /* was 5px */
    padding:2px 6px;       /* was 1px 6px */
  }

  .bars span{
    height:14px;           /* was 12px */
    border-radius:4px;     /* was 3px */
    opacity:.82;           /* was .74 */
  }

  .bars span:nth-child(5n){  height:24px; opacity:.86; }
  .bars span:nth-child(7n){  height:18px; opacity:.78; }
  .bars span:nth-child(9n){  height:28px; opacity:.90; }
  .bars span:nth-child(11n){ height:16px; opacity:.74; }
  .bars span:nth-child(13n){ height:26px; opacity:.86; }
  .bars span:nth-child(17n){ height:12px; opacity:.70; }
  .bars span:nth-child(19n){ height:30px; opacity:.92; }

  .bars::before,
  .bars::after{
    width:48px;            /* was 40px */
  }

  .timeline{
    margin-top:10px;       /* was 8px */
    grid-template-columns:42px 1fr 42px; /* was 46px */
    gap:8px;               /* was 10px */
  }

  .time{ font-size:11px; }
}

/* =========================
   WAITLIST
========================= */

.waitlistBlock h2{
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  font-size:clamp(28px, 3.2vw, 44px);
  margin:0 0 8px;
}

.muted{
  margin:0 0 18px;
  color:rgba(233,237,245,.55);
  font-weight:300;
}

.waitlistForm{
  width:min(720px, 94vw);
  margin:0 auto;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  align-items:center;
}

/* input */
.email{
  flex:1;
  min-width:260px;
  padding:16px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.05);
  color:rgba(233,237,245,.9);
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.email::placeholder{color:rgba(233,237,245,.35)}

/* CTA */
.cta{
  padding:16px 18px;
  border-radius:14px;
  min-width:180px;
  cursor:pointer;
  color:rgba(233,237,245,.92);
  border:1px solid rgba(140,190,255,.16);
  background:radial-gradient(circle at 35% 30%,
      rgba(140,190,255,.16),
      rgba(255,255,255,.05) 55%,
      rgba(255,255,255,.02)),
    linear-gradient(180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02));
  box-shadow:
    0 0 0 6px rgba(140,190,255,.038),
    0 0 32px rgba(140,190,255,.11),
    0 18px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  min-height:54px;
}
.cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:
    0 0 0 6px rgba(140,190,255,.052),
    0 0 38px rgba(140,190,255,.15),
    0 18px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.cta:active{
  transform:translateY(0px);
  filter:brightness(1.02);
}

/* =========================
   FOOTER (page-bottom only)
========================= */

.foot{
  margin-top:auto;               /* pushes footer to bottom if page is short */
  padding:28px 12px 34px;        /* spacing so it feels like a footer */
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  font-size:13px;
  color:rgba(233,237,245,.42);
  opacity:.7;
  width:100%;
  max-width:calc(100% - 24px);
  margin-left:auto;
  margin-right:auto;

  /* optional: a subtle fade edge so it reads clean */
  background:linear-gradient(180deg, rgba(7,9,13,0), rgba(7,9,13,.55) 55%, rgba(7,9,13,.85));
}

.dot{opacity:.55}
.domain{opacity:.65}


/* =========================
   RESPONSIVE
========================= */

@media (max-width:740px){
  h1{
    white-space:normal;
    text-wrap:balance;
    font-size:clamp(40px, 7vw, 56px);
  }
}

@media (max-width:520px){
  .top{padding-top:24px}
  .orbMark,
  .orbMark img{
    width:260px;
    height:260px;
  }
  .brand{letter-spacing:.52em;}

  /* ✅ Waitlist converts better on phones */
  .waitlistForm{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .email,
  .cta{
    width:100%;
    min-width:0;
  }
  .cta{ min-width:0; }
}

/* =========================
   WAITLIST SUBMIT FADE + THANK YOU
   (mobile-safe: removes blur filter to stop iOS ghosting)
========================= */

.honeypot{ display:none !important; }

/* smoother fades (no blur filter) */
.waitlistForm,
#waitlistFineprint{
  transition:
    opacity .55s cubic-bezier(.2,.9,.2,1),
    transform .55s cubic-bezier(.2,.9,.2,1),
    max-height .65s cubic-bezier(.2,.9,.2,1),
    margin .65s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform, max-height;
  max-height: 260px;

  /* Safari/iOS paint stability */
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* keep CTA glow */
.waitlistForm{ overflow: visible; }
.waitlistForm.is-hidden{ overflow: hidden; }

.waitlistForm.is-hidden,
#waitlistFineprint.is-hidden{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  max-height:0;
  margin:0 !important;
}

/* confirm row (no blur filter) */
.confirmRow{
  width:min(720px, 94vw);
  margin:12px auto 0;
  padding:12px 12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);

  opacity:0;
  transform:translateZ(0) translateY(10px);
  pointer-events:none;

  transition:
    opacity .45s cubic-bezier(.2,.9,.2,1),
    transform .45s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;

  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

.confirmRow.is-visible{
  opacity:1;
  transform:translateZ(0) translateY(0);
  pointer-events:auto;
}

.confirmText{
  color:rgba(233,237,245,.80);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.confirmText strong{
  color:rgba(233,237,245,.95);
  font-weight:500;
}

.confirmBtn{
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid rgba(140,190,255,.16);
  color:rgba(233,237,245,.92);
  background:rgba(255,255,255,.04);
  transition:transform .15s ease, filter .15s ease;
}
.confirmBtn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.confirmBtn:active{ transform:translateY(0px); }
.confirmBtn.secondary{
  border-color: rgba(255,255,255,.10);
  opacity:.85;
}

/* thanks (no blur filter) */
.waitlistThanks{
  margin-top:6px;
  opacity:0;
  transform:translateZ(0) translateY(14px);
  max-height:0;
  overflow:hidden;
  pointer-events:none;

  transition:
    opacity .75s cubic-bezier(.2,.9,.2,1),
    transform .75s cubic-bezier(.2,.9,.2,1),
    max-height .85s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform, max-height;

  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

.waitlistThanks.is-visible{
  opacity:1;
  transform:translateZ(0) translateY(0);
  max-height:260px;
  pointer-events:auto;
}

.waitlistThanks .thanksTitle{
  font-family:"Cormorant Garamond", serif;
  font-size:28px;
  line-height:1.1;
  margin-bottom:6px;
}

.waitlistThanks .thanksBody{
  opacity:.78;
  line-height:1.4; /* small-screen safety */
}

.waitlistForm .cta.is-loading{ opacity:.85; }