/* ==========================================================================
   Golateh — coming-soon landing page
   Built from the Golateh design-system export. Token values are copied from
   _ds/tokens/*.css; only the tokens this page actually uses are kept.

   The scene runs two independent loops:
     --cyc      72s  day → night → day (sky, stars, sun/moon, ink, cards, boat)
     --fishcyc  30s  fish leaping out of the water
   ========================================================================== */

/* --- IRANSans (FaNum) --------------------------------------------------- */
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSansWeb-FaNum.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSansWeb-FaNum-Medium.ttf") format("truetype");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IRANSans";
  src:url("../fonts/IRANSansWeb-FaNum-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

/* --- design tokens ------------------------------------------------------ */
:root{
  color-scheme:light;

  --font-family-base:IRANSans, Tahoma, sans-serif;
  --font-family-title:IRANSans, Tahoma, sans-serif;

  --primary:#2196f3;
  --primary-hover:#0c7cd5;
  --secondary:#102C3C;
  --theme-text-color:#fff;

  --title:#2F2F2F;
  --dark:#2f2f2f;
  --body-color:#6A6A6A;
  --danger:#E12344;
  --success-bg:#e4f8ee;
  --input-bg:#F8F8F8;
  --border-color:#E3E3E3;

  --border-radius:12px;
  --radius-input:0px;
  --radius-btn:1px;
  --border-width:1px;
  --box-shadow:0px 2px 8px 0px rgba(99,99,99,.2);

  --dur-base:300ms;
  --dur-slow:500ms;
  --transition-base:all var(--dur-slow) ease;
  --transition-input:all var(--dur-base) ease-in-out;

  /* page-local */
  --boat-w:clamp(190px, min(44vw, 32vh), 480px);  /* boat, rig offset, sky padding */
  --cyc:72s;                                       /* day/night cycle length */
  --fishcyc:30s;                                   /* fish leap cycle length */
}

/* --- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#EAF6FD}
body{
  font-family:var(--font-family-base);
  color:var(--body-color);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{border-style:none;height:auto;max-width:100%;vertical-align:middle}
a{color:var(--primary);text-decoration:none;transition:var(--transition-base)}
a:hover,a:focus{color:var(--primary-hover)}
::selection{color:#fff;background:var(--primary)}

/* --- stage -------------------------------------------------------------- */
.stage{
  position:relative;
  width:100%;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family:var(--font-family-base), sans-serif;
  background:#EAF6FD;
  animation:gPageNight var(--cyc) ease-in-out infinite;
}

/* --- sky ---------------------------------------------------------------- */
.sky{
  position:relative;
  flex:0 0 auto;
  z-index:1;
  overflow:hidden;
  background:linear-gradient(180deg,#C6E5FA 0%,#DCF0FC 58%,#EBF7FE 100%);
  padding-bottom:calc(16px + (var(--boat-w) * 0.32));
}
.cloud{
  position:absolute;
  border-radius:50%;
  background:#fff;
}
.cloud--1{top:4%;left:3%;width:280px;height:74px;opacity:.85;filter:blur(16px);animation:gCloud 46s ease-in-out infinite alternate}
.cloud--2{top:1%;left:15%;width:170px;height:56px;opacity:.9;filter:blur(12px);animation:gCloud 38s ease-in-out infinite alternate-reverse}
.cloud--3{top:22%;left:63%;width:340px;height:82px;opacity:.7;filter:blur(20px);animation:gCloud 62s ease-in-out infinite alternate}
.cloud--4{top:8%;left:76%;width:200px;height:58px;opacity:.85;filter:blur(14px);animation:gCloud 52s ease-in-out infinite alternate-reverse}
.cloud--5{top:52%;left:30%;width:440px;height:78px;opacity:.5;filter:blur(24px);animation:gCloud 70s ease-in-out infinite alternate}
.sky__fade{
  position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 100%);
  pointer-events:none;
}

/* --- night sky ---------------------------------------------------------- */
.sky__night{
  position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#081428 0%,#0E2646 54%,#1B3F66 100%);
  animation:gNight var(--cyc) ease-in-out infinite;
}
.stars{
  position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  animation:gNight var(--cyc) ease-in-out infinite;
}
/* each star sets --s (size), --dur and --delay inline */
.star{
  position:absolute;border-radius:50%;background:#fff;
  width:var(--s);height:var(--s);
  box-shadow:0 0 calc(var(--s) * 1.5) rgba(255,255,255,.75);
  animation:gTwinkle var(--dur) ease-in-out var(--delay) infinite;
}
.sun{
  position:absolute;z-index:1;top:9%;left:7%;pointer-events:none;
  width:clamp(44px,6.4vw,84px);height:clamp(44px,6.4vw,84px);border-radius:50%;
  background:radial-gradient(circle at 40% 36%,#FFFBE8 0%,#FFD86B 56%,#FFB93C 100%);
  box-shadow:0 0 46px rgba(255,192,84,.55),0 0 110px rgba(255,205,110,.32);
  animation:gSun var(--cyc) ease-in-out infinite;
}
.moon{
  position:absolute;z-index:1;top:9%;left:7%;opacity:0;pointer-events:none;
  width:clamp(38px,5.4vw,70px);height:clamp(38px,5.4vw,70px);border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFFFFF 0%,#E4EEF7 62%,#C7D8E8 100%);
  box-shadow:0 0 40px rgba(203,226,248,.5),0 0 96px rgba(160,195,230,.28);
  animation:gMoon var(--cyc) ease-in-out infinite;
}
.moon__crater{position:absolute;border-radius:50%}
.moon__crater--1{left:56%;top:26%;width:16%;height:16%;background:rgba(158,184,210,.32)}
.moon__crater--2{left:27%;top:57%;width:22%;height:22%;background:rgba(158,184,210,.26)}
.moon__crater--3{left:62%;top:67%;width:11%;height:11%;background:rgba(158,184,210,.28)}

/* --- hero --------------------------------------------------------------- */
.hero{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(10px,2.4vh,38px) 20px 0;
  gap:clamp(6px,1.4vh,12px);
}
.hero__mark{position:relative;width:clamp(62px,min(9vw,7.4vh),112px)}
.hero__logo{width:100%;height:auto;display:block}
.hero__logo--night{
  position:absolute;inset:0;opacity:0;
  animation:gLogoSwap var(--cyc) ease-in-out infinite;
}
.hero__title{
  margin:0;
  font-family:var(--font-family-title), sans-serif;
  font-weight:700;
  font-size:clamp(21px,min(3.4vw,3.8vh),40px);
  line-height:1.3;
  color:var(--title);
  text-wrap:pretty;
  animation:gInkTitle var(--cyc) ease-in-out infinite;
}
.hero__lede{
  margin:0;max-width:620px;
  font-size:clamp(12.5px,min(1.3vw,1.9vh),18px);
  line-height:1.65;
  color:var(--body-color);
  text-wrap:pretty;
  animation:gInkBody var(--cyc) ease-in-out infinite;
}

/* --- signup form -------------------------------------------------------- */
.signup{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;width:100%;max-width:470px;margin-top:2px;
}
/* The design-system Input renders a 1px border on three sides only — its React
   style object sets `border` and then removes `borderBottom`. The intent is a
   full border, so that is what ships here; the control stays 50px tall. */
.signup__field{
  flex:1 1 200px;min-width:0;height:50px;
  background:var(--input-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius-input);
  display:flex;align-items:center;
  transition:var(--transition-input);
}
.signup__input{
  flex:1;height:100%;min-width:0;
  border:0;outline:none;background:transparent;
  padding:10px 15px;
  font-size:14px;font-weight:400;
  color:var(--dark);
  font-family:var(--font-family-base);
}
.signup__input::placeholder{color:#8A8A8A;opacity:1}
.signup__field:focus-within{box-shadow:0 0 0 2px rgba(33,150,243,.35)}
.signup__field.is-invalid{box-shadow:0 0 0 2px rgba(225,35,68,.4)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-family-title);
  border-style:solid;border-width:var(--border-width);
  border-radius:var(--radius-btn);
  text-decoration:none;cursor:pointer;
  transition:var(--transition-base);
  padding:12px 25px;
  font-size:1rem;font-weight:500;line-height:24px;
}
.btn--primary{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--theme-text-color);
}
.btn--primary:hover:not([disabled]){background:var(--primary-hover);border-color:var(--primary-hover)}
.btn[disabled]{cursor:not-allowed;opacity:.65}

.signup__error{
  font-size:13px;
  color:var(--danger);
  margin-top:-7px;
}
.signup__ok{
  display:flex;align-items:center;gap:10px;
  background:var(--success-bg);
  color:#1E7A52;
  border-radius:var(--border-radius);
  padding:clamp(10px,1.8vh,15px) 22px;
  font-size:clamp(13px,1.9vh,15px);
  animation:gFadeUp .3s ease-out both;
}
.signup__ok svg{flex:none}

/* --- countdown ---------------------------------------------------------- */
.countdown{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;margin-top:8px;
}
.countdown__row{display:flex;align-items:flex-end;gap:clamp(6px,1vh,8px)}
.cd{
  min-width:clamp(58px,7vh,72px);
  background:#fff;
  border-radius:var(--border-radius);
  box-shadow:var(--box-shadow);
  padding:clamp(5px,0.9vh,9px) clamp(9px,1.4vh,12px);
  animation:gCardNight var(--cyc) ease-in-out infinite;
}
.cd__val{
  font-size:clamp(18px,2.9vh,24px);
  font-weight:700;
  color:var(--title);
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  animation:gInkTitle var(--cyc) ease-in-out infinite;
}
.cd__val--accent{
  color:var(--primary);
  animation:gInkAccent var(--cyc) ease-in-out infinite;
}
.cd__label{
  font-size:12px;color:var(--body-color);margin-top:2px;
  animation:gInkBody var(--cyc) ease-in-out infinite;
}
.countdown__caption{
  font-size:12px;color:var(--body-color);
  animation:gInkBody var(--cyc) ease-in-out infinite;
}

/* --- sea ---------------------------------------------------------------- */
.sea{
  position:relative;
  flex:1 1 auto;
  min-height:max(38vh,180px);
  z-index:2;
}
.sea__bg{
  position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,#A9DBF7 0%,#95D0F3 45%,#82C4EF 100%);
}
.wave{
  position:absolute;left:0;
  animation:gWave 22s linear infinite;
  will-change:transform;
}
.wave--a{--d:1600px;top:0;height:100%;width:calc(100% + 1600px)}
.wave--b{--d:2720px;top:-26px;height:calc(100% + 26px);width:calc(100% + 2720px)}
.wave--c{--d:4200px;top:-58px;height:calc(100% + 58px);width:calc(100% + 4200px)}
.sea__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 24%,rgba(11,74,120,.12) 100%);
}
.sea__crest{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,.85);
}
.sea__night{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,22,42,.76) 0%,rgba(5,15,32,.9) 100%);
  animation:gNight var(--cyc) ease-in-out infinite;
}
/* the moon's reflection on the water, directly under the moon at left:7% */
.sea__moonpath{
  position:absolute;left:7%;top:0;opacity:0;pointer-events:none;
  width:clamp(44px,6.4vw,84px);height:46%;
  background:linear-gradient(180deg,rgba(214,233,250,.55) 0%,rgba(214,233,250,0) 100%);
  filter:blur(9px);
  animation:gNight var(--cyc) ease-in-out infinite;
}

/* --- leaping fish ------------------------------------------------------- */
.fish-layer{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  animation:gAnchorNight var(--cyc) ease-in-out infinite;
}
/* each lane sets --lh (leap height), --fw (fish width) and --delay inline */
.fish-lane{
  position:absolute;top:0;
  --dx:min(calc(var(--lh) * 0.86), 9vw);   /* horizontal travel of the arc */
}
.fish-lane--flip{transform:scaleX(-1)}   /* lanes that leap the other way */
.fish{
  display:block;width:var(--fw);height:auto;overflow:visible;opacity:0;
  animation:gLeap var(--fishcyc) linear var(--delay) infinite;
}
.fish__body{fill:var(--fish-body)}
.fish__belly{fill:var(--fish-belly)}
.fish__eye{fill:#12212E}
.splash{
  position:absolute;top:16px;border-radius:50%;opacity:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 55%,rgba(255,255,255,0) 100%);
}
.splash--up{
  left:0;
  width:calc(var(--fw) * 0.62);height:calc(var(--fw) * 0.22);
  animation:gSplashUp var(--fishcyc) linear var(--delay) infinite;
}
.splash--down{
  left:calc(var(--dx) * -1);
  width:calc(var(--fw) * 0.7);height:calc(var(--fw) * 0.24);
  animation:gSplashDown var(--fishcyc) linear var(--delay) infinite;
}

/* --- anchor rig --------------------------------------------------------- */
.rig{
  position:absolute;top:-12px;bottom:88px;
  left:calc(50% + (var(--boat-w) * 0.355));
  width:0;z-index:3;
  animation:gAnchorNight var(--cyc) ease-in-out infinite;
}
.rig__line{
  position:absolute;top:0;left:0;width:0;height:0;
  border-right:2px dashed rgba(48,82,112,.85);
  animation:gRig 22s linear infinite;
}
.anchor{
  position:absolute;bottom:-30px;right:-15px;
  width:30px;height:36px;
  transform-origin:50% 8%;
  animation:gAnchorSwing 22s linear infinite;
}
.anchor svg{display:block;overflow:visible}
.bub{
  position:absolute;border-radius:50%;
  animation:gBub 22s linear infinite;
}
.bub--1{top:34%;right:14px;width:7px;height:7px;background:rgba(255,255,255,.85)}
.bub--2{top:46%;right:-16px;width:5px;height:5px;background:rgba(255,255,255,.8);animation-delay:-.6s}
.bub--3{top:58%;right:20px;width:9px;height:9px;background:rgba(255,255,255,.7);animation-delay:-1.2s}
.bub--4{top:70%;right:-10px;width:6px;height:6px;background:rgba(255,255,255,.8);animation-delay:-1.8s}

/* --- boat --------------------------------------------------------------- */
.boat{
  position:absolute;top:0;left:50%;
  width:var(--boat-w);
  transform:translate(-50%,-78.6%);
  z-index:4;pointer-events:none;
  animation:gBoatNight var(--cyc) ease-in-out infinite;
}
.boat__bob{animation:gBob 4s ease-in-out infinite}
.boat__rock{transform-origin:50% 78.6%;animation:gRock 5.5s ease-in-out infinite}
.boat svg{display:block;width:100%;height:auto;overflow:visible}
.boat__flag{transform-box:fill-box;transform-origin:100% 50%;animation:gFlag 1.9s ease-in-out infinite}
/* deck lantern, only lit at night */
.boat__lantern{
  position:absolute;left:64%;top:30%;width:26%;height:26%;
  border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,204,118,.95) 0%,rgba(255,178,66,.42) 38%,rgba(255,170,60,0) 72%);
  animation:gNight var(--cyc) ease-in-out infinite;
}

/* --- footer ------------------------------------------------------------- */
.footer{
  position:absolute;left:20px;right:20px;bottom:14px;z-index:5;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:8px;font-size:12px;color:var(--secondary);
  animation:gInkFoot var(--cyc) ease-in-out infinite;
}
.footer__dot{opacity:.6}

/* ==========================================================================
   animation
   ========================================================================== */

/* --- scene (always running) --------------------------------------------- */
@keyframes gWave{
  0%{transform:translate3d(0,0,0);animation-timing-function:linear}
  27.27%{transform:translate3d(calc(var(--d) * -0.7059),0,0);animation-timing-function:cubic-bezier(.25,.46,.45,1)}
  31.82%{transform:translate3d(calc(var(--d) * -0.7647),0,0);animation-timing-function:linear}
  81.82%{transform:translate3d(calc(var(--d) * -0.7647),0,0);animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  100%{transform:translate3d(calc(var(--d) * -1),0,0)}
}
@keyframes gBob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@keyframes gRock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes gFlag{0%,100%{transform:skewY(-5deg) scaleX(1)}50%{transform:skewY(6deg) scaleX(.88)}}
@keyframes gRig{
  0%,31.82%{height:0%;animation-timing-function:cubic-bezier(.55,.02,.78,.15)}
  43%{height:100%;animation-timing-function:cubic-bezier(.25,.46,.45,1)}
  45%{height:95.5%;animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  47%{height:100%;animation-timing-function:linear}
  68.18%{height:100%;animation-timing-function:cubic-bezier(.42,0,.58,1)}
  81.82%{height:0%}
  100%{height:0%}
}
@keyframes gAnchorSwing{
  0%,31.82%{transform:rotate(-9deg)}
  37%{transform:rotate(7deg)}
  43%{transform:rotate(0deg)}
  68.18%{transform:rotate(0deg)}
  76%{transform:rotate(-6deg)}
  81.82%,100%{transform:rotate(-9deg)}
}
@keyframes gBub{
  0%,32%{opacity:0;transform:translateY(0) scale(.5)}
  35%{opacity:.75}
  50%,100%{opacity:0;transform:translateY(-120px) scale(1.1)}
}
@keyframes gCloud{0%{transform:translateX(0)}100%{transform:translateX(48px)}}
@keyframes gFadeUp{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

/* --- fish --------------------------------------------------------------- */
@keyframes gLeap{
  0%,0.5%{opacity:0;transform:translate(0,18px) rotate(-40deg)}
  1.3%{opacity:1;transform:translate(0,12px) rotate(-37deg);animation-timing-function:cubic-bezier(.2,.72,.4,1)}
  6.3%{transform:translate(calc(var(--dx) * -0.49),calc(var(--lh) * -1)) rotate(0deg);animation-timing-function:cubic-bezier(.55,0,.85,.42)}
  11.5%{opacity:1;transform:translate(calc(var(--dx) * -1),12px) rotate(39deg)}
  12.4%,100%{opacity:0;transform:translate(calc(var(--dx) * -1),18px) rotate(42deg)}
}
@keyframes gSplashUp{
  0%,0.7%{opacity:0;transform:scale(.3,.5)}
  1.9%{opacity:.9;transform:scale(1,1)}
  5%,100%{opacity:0;transform:scale(1.8,1.25)}
}
@keyframes gSplashDown{
  0%,11.2%{opacity:0;transform:scale(.3,.5)}
  12.5%{opacity:.9;transform:scale(1,1)}
  16.2%,100%{opacity:0;transform:scale(2.1,1.4)}
}

/* --- day / night -------------------------------------------------------- */
@keyframes gNight{0%,30%{opacity:0}42%,72%{opacity:1}84%,100%{opacity:0}}
@keyframes gPageNight{0%,30%{background-color:#EAF6FD}42%,72%{background-color:#081428}84%,100%{background-color:#EAF6FD}}
@keyframes gSun{0%,26%{opacity:1;transform:translateY(0) scale(1)}41%,72%{opacity:0;transform:translateY(72px) scale(.88)}87%,100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gMoon{0%,31%{opacity:0;transform:translateY(64px) scale(.9)}44%,70%{opacity:1;transform:translateY(0) scale(1)}83%,100%{opacity:0;transform:translateY(64px) scale(.9)}}
@keyframes gTwinkle{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes gLogoSwap{0%,36.9%{opacity:0}37%,77.9%{opacity:1}78%,100%{opacity:0}}
@keyframes gInkTitle{0%,36.9%{color:var(--title)}37%,77.9%{color:#EEF6FC}78%,100%{color:var(--title)}}
@keyframes gInkBody{0%,36.9%{color:var(--body-color)}37%,77.9%{color:#A7C1D8}78%,100%{color:var(--body-color)}}
@keyframes gInkFoot{0%,36.9%{color:var(--secondary)}37%,77.9%{color:#9DBBD5}78%,100%{color:var(--secondary)}}
@keyframes gInkAccent{0%,36.9%{color:var(--primary)}37%,77.9%{color:#6FC0FF}78%,100%{color:var(--primary)}}
@keyframes gCardNight{
  0%,36.9%{background-color:#fff;box-shadow:0 2px 8px rgba(99,99,99,.2)}
  37%,77.9%{background-color:#152740;box-shadow:0 2px 12px rgba(0,0,0,.45)}
  78%,100%{background-color:#fff;box-shadow:0 2px 8px rgba(99,99,99,.2)}
}
@keyframes gBoatNight{0%,30%{filter:brightness(1) saturate(1)}42%,72%{filter:brightness(.64) saturate(.82)}84%,100%{filter:brightness(1) saturate(1)}}
@keyframes gAnchorNight{0%,30%{filter:brightness(1)}42%,72%{filter:brightness(1.85)}84%,100%{filter:brightness(1)}}

/* --- reduced motion ----------------------------------------------------- */
/* Every night layer and every fish is authored at its daytime resting state
   (opacity:0 for night overlays, sun visible, cards white), so switching the
   animations off leaves a static daytime scene rather than a broken one. */
@media (prefers-reduced-motion: reduce){
  .stage,.cloud,.wave,.boat,.boat__bob,.boat__rock,.boat__flag,.anchor,
  .signup__ok,.sky__night,.stars,.star,.sun,.moon,
  .hero__logo--night,.hero__title,.hero__lede,
  .cd,.cd__val,.cd__label,.countdown__caption,.footer,
  .sea__night,.sea__moonpath,.boat__lantern,.fish-layer,.rig{
    animation:none !important;
  }
  .fish,.splash{animation:none !important;opacity:0 !important}
  .rig__line{height:100% !important;animation:none !important}
  .bub{opacity:0 !important;animation:none !important}
}

/* --- utility ------------------------------------------------------------ */
[hidden]{display:none !important}