/* ══════════════════════════════════════════════════════
   Amanets — Coming Soon
   ══════════════════════════════════════════════════════ */

:root{
  --bg:            #141118;
  --bg-deep:       #0d0b10;
  --ink:           #f4eef2;
  --ink-soft:      #b6aab4;
  --ink-faint:     #7d7280;

  --rose:          #ef8296;
  --rose-hot:      #ff9aa8;
  --peach:         #ffd2a8;

  --line:          rgba(255,255,255,.09);
  --card:          rgba(255,255,255,.045);

  --stage:         min(74vmin, 640px);
  --ease:          cubic-bezier(.22,.68,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; overflow-x:hidden; }

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  background:var(--bg-deep);
  color:var(--ink);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* ── Backdrop layers ──────────────────────────────── */
/* Painted as a fixed layer rather than `background-attachment:fixed`,
   which stutters badly on iOS Safari while the address bar collapses. */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%,  rgba(239,130,150,.10), transparent 60%),
    radial-gradient(90%  70% at 50% 108%, rgba(120,60,90,.22),  transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

#starfield{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
}

.grain{
  position:fixed; inset:-50%;
  z-index:2; pointer-events:none; opacity:.15;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

/* ── Page shell ───────────────────────────────────── */
.page{
  position:relative; z-index:3;
  min-height:100vh;
  min-height:100svh;
  display:grid; grid-template-rows:auto 1fr auto;
  gap:16px;
  padding:
    calc(clamp(18px,3.2vw,34px) + env(safe-area-inset-top))
    calc(clamp(18px,4.5vw,54px) + env(safe-area-inset-right))
    calc(clamp(18px,3.2vw,34px) + env(safe-area-inset-bottom))
    calc(clamp(18px,4.5vw,54px) + env(safe-area-inset-left));
}

/* ── Header ───────────────────────────────────────── */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

.logo{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--ink);
}
.logo-mark{ width:34px; height:34px; display:block; filter:drop-shadow(0 0 12px rgba(239,130,150,.5)); }
.logo-mark svg{ width:100%; height:100%; display:block; animation:markSpin 22s linear infinite; }
@keyframes markSpin{ to{ transform:rotate(360deg); } }

.logo-type{
  font-weight:700; font-size:1.02rem; letter-spacing:.16em; text-transform:uppercase;
}
.logo-type i{ color:var(--rose); font-style:normal; }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--card);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--rose);
  animation:ping 2.2s var(--ease) infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(239,130,150,.55); }
  70%{ box-shadow:0 0 0 9px rgba(239,130,150,0); }
  100%{ box-shadow:0 0 0 0 rgba(239,130,150,0); }
}

/* ── Stage / eclipse ──────────────────────────────── */
.stage{
  position:relative;
  display:grid; place-items:center;
  padding:clamp(20px,5vh,60px) 0;
}

.eclipse{
  position:absolute; top:50%; left:50%;
  width:var(--stage); aspect-ratio:1;
  transform:translate(-50%,-50%) translate3d(var(--px,0px),var(--py,0px),0);
  transition:transform .9s var(--ease);
  pointer-events:none;
}

/* soft outer bloom */
.corona{
  position:absolute; inset:-16%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 40%,
      rgba(255,154,168,.42) 52%,
      rgba(180,80,110,.20) 62%,
      transparent 76%);
  filter:blur(26px);
  animation:breathe 7s ease-in-out infinite;
}
.corona--2{
  inset:-30%;
  background:radial-gradient(circle at 50% 46%, transparent 42%, rgba(255,190,150,.20) 54%, transparent 72%);
  filter:blur(52px);
  animation:breathe 9s ease-in-out infinite reverse;
}
@keyframes breathe{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%    { transform:scale(1.045); opacity:1; }
}

/* crisp rim of light */
.ring{
  position:absolute; inset:0;
  border-radius:50%;
  box-shadow:
    0 0 0 1.5px rgba(255,205,190,.55),
    0 0 26px 2px rgba(255,150,165,.45),
    inset 0 0 40px rgba(255,150,165,.10);
  animation:ringPulse 7s ease-in-out infinite;
}
@keyframes ringPulse{
  0%,100%{ opacity:.75; }
  50%    { opacity:1; }
}

/* travelling hot-spots */
.orbit{
  position:absolute; inset:0;
  animation:spin 16s linear infinite;
}
.orbit--slow{ animation-duration:27s; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.flare{
  position:absolute; top:-6%; left:64%;
  width:26%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--peach) 26%, rgba(255,140,160,.55) 55%, transparent 72%);
  filter:blur(14px);
  animation:flicker 3.6s ease-in-out infinite;
}
.flare--sm{ top:auto; bottom:2%; left:12%; width:15%; opacity:.55; }
@keyframes flicker{
  0%,100%{ opacity:.95; transform:scale(1); }
  50%    { opacity:.65; transform:scale(.9); }
}

/* the dark body eclipsing the light */
.disc{
  position:absolute; inset:0;
  border-radius:50%;
  background:
    radial-gradient(120% 120% at 32% 78%, #241d27 0%, #191420 42%, #120f16 100%);
  box-shadow:inset 0 -30px 80px rgba(0,0,0,.6), inset 0 20px 60px rgba(255,180,180,.05);
}

/* ── Content ──────────────────────────────────────── */
.content{
  position:relative; z-index:3;
  width:min(560px,100%);
  text-align:center;
  display:grid; justify-items:center; gap:20px;
}

.title{
  margin:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 .48em;
  font-size:clamp(2rem,7.4vw,3.5rem);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  line-height:1.05; text-indent:.01em;
}
.title .word{ display:inline-flex; }
.title span span{
  display:inline-block;
  opacity:0;
  transform:translateY(18px) scale(.94);
  filter:blur(8px);
  animation:letterIn .85s var(--ease) forwards;
  text-shadow:0 0 26px rgba(255,170,180,.32);
}
@keyframes letterIn{
  to{ opacity:1; transform:none; filter:blur(0); }
}

/* progress */
.progress{ width:min(320px,78%); display:grid; gap:9px; margin-top:6px; }
.bar{
  position:relative; height:10px; border-radius:999px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
}
.fill{
  position:absolute; inset:0 auto 0 0; width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#c8637f,var(--rose) 55%,var(--rose-hot));
  box-shadow:0 0 18px rgba(239,130,150,.7);
  animation:fillUp 2.4s var(--ease) 1.4s forwards;
}
.fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-100%);
  animation:sheen 2.6s ease-in-out 3.6s infinite;
}
@keyframes fillUp{ to{ width:68%; } }
@keyframes sheen{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(220%)} }

.progress-meta{
  display:flex; justify-content:space-between;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}
.pct{ color:var(--rose); font-variant-numeric:tabular-nums; }

/* two lengths of the same line — the long one reads well across a wide
   disc, the short one keeps phones down to a single line */
.lede-short{ display:none; }

.lede{
  margin:4px 0 0; max-width:44ch;
  font-size:clamp(.88rem,2.1vw,.98rem); line-height:1.7; color:var(--ink-soft);
}

/* ── Signup ───────────────────────────────────────── */
.signup{
  position:relative;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  width:min(430px,100%);
}
.field{
  position:relative; flex:1 1 210px; min-width:0;
  display:flex; align-items:center;
}
.field .i{
  position:absolute; left:14px; width:17px; height:17px;
  fill:none; stroke:var(--ink-faint); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .25s var(--ease);
}
.field:focus-within .i{ stroke:var(--rose); }

#email{
  width:100%; padding:13px 16px 13px 40px;
  border-radius:12px;
  border:1px solid var(--line); background:var(--card);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--ink); font:inherit; font-size:.9rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
#email::placeholder{ color:var(--ink-faint); }
#email:focus{
  outline:none;
  border-color:rgba(239,130,150,.55);
  box-shadow:0 0 0 4px rgba(239,130,150,.12);
  background:rgba(255,255,255,.07);
}

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border:0; border-radius:12px;
  background:linear-gradient(135deg,var(--rose-hot),#d4607e);
  color:#2a1119; font:inherit; font-weight:700; font-size:.85rem;
  letter-spacing:.06em; cursor:pointer;
  box-shadow:0 8px 26px rgba(239,130,150,.3);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.btn .i{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);
}
/* hover effects only where a real pointer exists — on touch these
   would latch on after a tap and stay stuck */
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(239,130,150,.42); filter:brightness(1.05); }
  .btn:hover .i{ transform:translateX(3px); }
  .btn:hover::before{ transform:translateX(120%); transition:transform .75s var(--ease); }
}
.btn:active{ transform:translateY(0) scale(.985); }
.btn:focus-visible{ outline:2px solid var(--peach); outline-offset:3px; }
.btn[disabled]{ opacity:.7; cursor:default; transform:none; }

.note{
  flex:1 0 100%; margin:0; min-height:1.1em;
  font-size:.74rem; letter-spacing:.04em; color:var(--ink-faint);
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.note.show{ opacity:1; transform:none; }
.note.ok{ color:#8fe0b4; }
.note.err{ color:var(--rose-hot); }

/* ── Footer ───────────────────────────────────────── */
.bottombar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.copy{ margin:0; font-size:.72rem; letter-spacing:.1em; color:var(--ink-faint); }

.socials{ display:flex; gap:9px; }
.socials a{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:11px;
  border:1px solid var(--line); background:var(--card);
  color:var(--ink-soft); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.socials svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine){
  .socials a:hover{
    transform:translateY(-3px);
    color:var(--peach);
    border-color:rgba(239,130,150,.45);
    box-shadow:0 8px 22px rgba(239,130,150,.22);
  }
}
.socials a:active{ color:var(--peach); border-color:rgba(239,130,150,.45); }
.socials a:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }

/* ── Entrance ─────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(14px);
  animation:reveal .9s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
@keyframes reveal{ to{ opacity:1; transform:none; } }

/* ══════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════ */

/* ── Tablet ───────────────────────────────────────── */
@media (max-width:900px){
  :root{ --stage:min(80vmin,520px); }
  .stage{ padding:clamp(16px,4vh,44px) 0; }
}

/* ── Large phone / small tablet ───────────────────── */
@media (max-width:640px){
  /* the disc grows to nearly full width, and the copy column shrinks —
     together they keep the whole stack inside the rim instead of letting
     the button cross it */
  :root{ --stage:min(96vw,440px); }

  .page{ gap:12px; }
  .stage{ padding:clamp(14px,3.5vh,32px) 0; }

  .badge{ display:none; }
  .logo-mark{ width:30px; height:30px; }
  .logo-type{ font-size:.92rem; letter-spacing:.14em; }

  .content{ gap:16px; width:min(280px,80vw); }

  .progress{ width:100%; margin-top:2px; }
  .progress-meta{ font-size:.58rem; letter-spacing:.16em; }

  /* short line only — the long version ran to three lines here */
  .lede-long{ display:none; }
  .lede-short{ display:inline; }
  .lede{ font-size:.83rem; line-height:1.6; max-width:none; margin-top:0; }

  /* stack the form — a side-by-side input + button squeezes
     both below a usable width on a phone */
  .signup{ flex-direction:column; width:100%; max-width:none; gap:9px; }
  .field{ flex:1 1 auto; width:100%; }
  .btn{ width:100%; justify-content:center; padding:14px 22px; }
  .note{ text-align:center; }

  .bottombar{ flex-direction:column-reverse; justify-content:center; gap:14px; }
  .copy-long{ display:none; }
}

/* ── Small phone ──────────────────────────────────── */
@media (max-width:400px){
  :root{ --stage:98vw; }
  .content{ width:min(250px,78vw); gap:14px; }
  .lede{ font-size:.79rem; }
  .copy{ font-size:.66rem; }
}

/* ── Landscape phone (short viewport) ─────────────── */
@media (max-height:560px) and (orientation:landscape){
  :root{ --stage:min(82vh,330px); }

  .page{ gap:8px; }
  .stage{ padding:8px 0; }
  .content{ gap:12px; width:min(480px,100%); }

  .title{ font-size:clamp(1.5rem,5vw,2.2rem); }
  .lede{ display:none; }          /* keeps the fold usable when height is scarce */
  .progress{ width:min(260px,70%); margin-top:0; }
  .signup{ flex-direction:row; max-width:420px; }
  .field{ flex:1 1 200px; width:auto; }
  .btn{ width:auto; }
  .bottombar{ flex-direction:row; }
}

/* ── Short portrait (e.g. iPhone SE) ──────────────── */
@media (max-height:700px) and (max-width:640px){
  .content{ gap:14px; }
  .stage{ padding:8px 0; }
  .lede{ font-size:.8rem; max-width:32ch; }
}

/* ── Touch devices ────────────────────────────────── */
@media (hover:none){
  /* iOS zooms the whole page when a focused input is under 16px */
  #email{ font-size:16px; padding:14px 16px 14px 42px; }

  /* comfortable tap targets */
  .socials a{ width:44px; height:44px; border-radius:13px; }
  .socials{ gap:11px; }
  .btn{ min-height:48px; }

  /* the grain overlay is the most expensive layer to composite —
     lighten it where GPUs are weakest */
  .grain{ opacity:.09; }
}

/* ── Motion & contrast prefs ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.title span span{ opacity:1; transform:none; filter:none; }
  .fill{ width:68%; }
  .grain{ display:none; }
}