/* ===========================================================================
   eyecandy — coming soon
   Summer sky + drifting clouds. Palette from the Eyecandy-Branding Figma.
   =========================================================================== */

:root {
  /* brand palette */
  --coral:  #fd5b47;
  --blue:   #058cd6;
  --green:  #009a5e;
  --orange: #f59506;
  --lime:   #d2eb09;
  --ink:    #013d5e;   /* deep navy — text + logo */

  --cream:  #f8f5df;   /* matches the intro video */

  --font: "Funnel Display", system-ui, -apple-system, sans-serif;
  --font-display: "snaga-unicase-display", "Funnel Display", sans-serif;  /* brand display face */
}

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

body {
  background: #6ec1ea; /* soft sky-blue — fills any safe-area margin without clashing */
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow: hidden;
}

/* ===========================================================================
   Sky — real photograph, full-bleed, with a slow drift so it feels alive
   =========================================================================== */
.sky {
  position: fixed;
  inset: -4%;            /* slight overscan so the drift never shows an edge */
  z-index: -4;
  background: #0084bb url("assets/sky.jpg?v=2") center 38% / cover no-repeat;
  will-change: transform;
  animation: sky-drift 60s ease-in-out infinite alternate;
}
@keyframes sky-drift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-2%, -1.5%); }
}

/* moving clouds — a second, larger copy of the sky drifting sideways and
   blended over the base so the clouds visibly travel (parallax) */
.sky-drift {
  position: fixed;
  inset: -8%;
  z-index: -3;
  pointer-events: none;
  background: url("assets/sky.jpg?v=2") center 30% / cover no-repeat;
  mix-blend-mode: lighten;
  opacity: 0.4;
  transform: scale(1.3);
  will-change: transform;
  animation: clouds-pan 90s linear infinite alternate;
}
@keyframes clouds-pan {
  from { transform: scale(1.3) translate3d(-6%, 0, 0); }
  to   { transform: scale(1.3) translate3d(6%, -2%, 0); }
}

/* brand-colour washes around the edges — soft-light keeps it photographic */
.sky-tint {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(72% 58% at 8% 4%,  rgba(245, 149, 6, 0.85) 0%, transparent 55%),   /* orange sun, top-left */
    radial-gradient(64% 54% at 94% 12%, rgba(253, 91, 71, 0.7) 0%, transparent 55%),    /* coral, top-right */
    radial-gradient(85% 66% at 86% 104%, rgba(210, 235, 9, 0.7) 0%, transparent 55%),   /* lime, bottom-right */
    radial-gradient(78% 66% at 0% 100%,  rgba(5, 140, 214, 0.6) 0%, transparent 55%);   /* blue, bottom-left */
  animation: tint-breathe 26s ease-in-out infinite alternate;
}
@keyframes tint-breathe {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}

/* soft scrim: lifts legibility of the navy text over the busy photo and adds
   a gentle premium vignette */
.sky-scrim {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 50% 46%, rgba(246, 248, 252, 0.42) 0%, transparent 64%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(1, 40, 66, 0.22) 100%);
}

/* faint film grain for a premium finish */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- the plane + contrail ------------------------------------------------ */
.flight {
  position: fixed;
  inset: 0;
  z-index: -1;            /* in the sky, behind the content */
  pointer-events: none;
  overflow: hidden;
}
.plane {
  position: absolute;
  top: 55%;
  left: 0;
  width: 13px;                 /* a tiny speck — way, way up */
  will-change: transform, opacity;
  animation: fly 240s linear infinite;   /* even slower drift */
  animation-delay: -126s;                /* start already up in the top-right quadrant */
}
.jet {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(45deg);    /* normalise the asset so it points along travel */
  filter: drop-shadow(0 2px 4px rgba(1, 61, 94, 0.18));
}
/* twin contrails — long, elegant streaks that fade out far behind the speck */
.trail {
  position: absolute;
  right: 9px;
  width: 32vw;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.28) 35%, rgba(255, 255, 255, 0) 100%);
  filter: blur(0.6px);
}
.trail--top    { top: 32%; }
.trail--bottom { top: 68%; }

/* climbs from lower-left to upper-right; rotate(-28deg) tilts the whole rig so
   the plane points along its path and the trails stream behind it */
@keyframes fly {
  0%   { transform: translate(-12vw, 30vw) rotate(-28deg);  opacity: 0; }
  3%   { opacity: 1; }
  72%  { opacity: 1; }
  78%  { transform: translate(112vw, -39vw) rotate(-28deg); opacity: 0; }
  100% { transform: translate(112vw, -39vw) rotate(-28deg); opacity: 0; }
}

/* phones are portrait, so the plane keeps to the open sky up top, well above
   the centred content */
@keyframes fly-m {
  0%   { transform: translate(-20vw, 18vw) rotate(-18deg);  opacity: 0; }
  4%   { opacity: 1; }
  72%  { opacity: 1; }
  78%  { transform: translate(120vw, -22vw) rotate(-18deg); opacity: 0; }
  100% { transform: translate(120vw, -22vw) rotate(-18deg); opacity: 0; }
}

/* ===========================================================================
   Textured fog overlay — covers the page during the intro, then clears.
   Hidden by default; shown while `body.fog-in`; clears on `body.revealed`.
   =========================================================================== */
.fog {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}
body.fog-in .fog { opacity: 1; }

/* Two textured halves cover the screen, feathered toward the centre seam so
   the middle is already a touch thinner. On clear they sweep apart L/R. */
.fog-half {
  position: absolute;
  inset: -14% -14%;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-color: rgba(248, 245, 223, 0.14);
  will-change: transform, opacity;
}
.fog-half--left {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='f1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0042 0.0055' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.6' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f1)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='f3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0028 0.0038' numOctaves='2' seed='21' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f3)'/%3E%3C/svg%3E");
  background-position: left center, 18% center;
  -webkit-mask-image: linear-gradient(to right, #000 50%, rgba(0,0,0,0.55) 74%, transparent 95%);
          mask-image: linear-gradient(to right, #000 50%, rgba(0,0,0,0.55) 74%, transparent 95%);
}
.fog-half--right {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E%3Cfilter id='f2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.3' intercept='-0.72'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f2)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='f1b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0042 0.0055' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.6' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f1b)'/%3E%3C/svg%3E");
  background-position: right center, 82% center;
  -webkit-mask-image: linear-gradient(to left, #000 50%, rgba(0,0,0,0.55) 74%, transparent 95%);
          mask-image: linear-gradient(to left, #000 50%, rgba(0,0,0,0.55) 74%, transparent 95%);
}

/* a soft cream haze plugging the centre seam so it reads as full cover at rest */
.fog-center {
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 70% at 50% 50%, rgba(248,245,223,0.5) 0%, rgba(248,245,223,0.2) 45%, transparent 72%);
  will-change: transform, opacity;
}

/* gentle breathing while the fog sits */
body.fog-in .fog-half--left  { animation: fog-breathe-l 16s ease-in-out infinite; }
body.fog-in .fog-half--right { animation: fog-breathe-r 19s ease-in-out infinite; }
@keyframes fog-breathe-l { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-1.5%, 1%) scale(1.03); } }
@keyframes fog-breathe-r { 0%,100% { transform: translate(0,0) scale(1.02); } 50% { transform: translate(1.5%, -1%) scale(1.05); } }

/* THE CLEAR — curtains part to the sides slowly, centre opens first */
body.fog-in.revealed .fog-half--left  { animation: fog-part-l 3.4s cubic-bezier(0.42, 0, 0.2, 1) forwards; }
body.fog-in.revealed .fog-half--right { animation: fog-part-r 3.4s cubic-bezier(0.42, 0, 0.2, 1) forwards; }
body.fog-in.revealed .fog-center      { animation: fog-center-out 1.6s ease-out forwards; }
@keyframes fog-part-l {
  0%   { transform: translateX(0) scale(1);        opacity: 1; }
  100% { transform: translateX(-118%) scale(1.14); opacity: 0; }
}
@keyframes fog-part-r {
  0%   { transform: translateX(0) scale(1);        opacity: 1; }
  100% { transform: translateX(118%) scale(1.14);  opacity: 0; }
}
@keyframes fog-center-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ===========================================================================
   Content
   =========================================================================== */
.stage {
  position: relative;
  /* No z-index / opacity / transform here on purpose: those would create a
     stacking context and isolate the wordmark video's multiply blend from the
     sky. The fog parting IS the reveal. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(20px, 3.4vh, 34px);
  padding: 8vh 24px;
  max-width: 600px;
  margin-inline: auto;
}

.eyebrow {
  margin: 0;
  font-family: var(--font-display);   /* Snaga Unicase Display */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(1, 61, 94, 0.62);
}

.wordmark {
  position: relative;   /* anchor for the frozen-frame canvas overlay */
  margin: 0;
  line-height: 0;
  color: var(--ink);
}
/* the wordmark is now the animated clip; its white bg multiplies away over the
   sky, leaving the blue mark. Slightly wider to match the static logo's weight. */
.wordmark-video {
  display: block;
  width: clamp(330px, 66vw, 600px);  /* full-width clip, so size up to keep the mark legible */
  height: auto;
  mix-blend-mode: multiply;
}
/* the captured final frame, laid exactly over the video's box (which stays as a
   visibility:hidden anchor) so the swap never shifts or flashes */
.wordmark-frozen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
/* shown only if the video can't play (set by JS / reduced motion) */
.wordmark-fallback {
  display: none;
  width: clamp(230px, 44vw, 380px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(1, 61, 94, 0.18));
}

.tagline {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(15px, 2.1vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(1, 61, 94, 0.82);
}

/* ---- signup (white glass pill) ------------------------------------------ */
.signup { width: 100%; max-width: 400px; margin-top: 4px; }

.field { position: relative; display: flex; align-items: center; }

.field input {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 16px 60px 16px 24px;
  outline: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(1, 61, 94, 0.1);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder { color: rgba(1, 61, 94, 0.45); }
.field input:focus {
  background: rgba(255, 255, 255, 0.82);
  border-color: #fff;
  box-shadow: 0 10px 34px rgba(1, 61, 94, 0.16);
}
.field input.invalid {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(253, 91, 71, 0.22);
}

.field button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.field button:hover { transform: translateY(-50%) scale(1.06); background: #024f78; }
.field button:active { transform: translateY(-50%) scale(0.96); }
.field button:disabled { opacity: 0.6; cursor: default; }
.field .icon { width: 17px; height: 17px; display: block; }
.field .arrow { font-size: 20px; line-height: 1; }

.form-msg {
  min-height: 18px;
  margin: 14px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(1, 61, 94, 0.9);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.form-msg.show { opacity: 1; }
.form-msg.error { color: #d83b29; }

/* ---- join us ------------------------------------------------------------- */
.joinus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(1, 61, 94, 0.72);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.joinus:hover { color: var(--ink); border-color: rgba(1, 61, 94, 0.45); }
.joinus span { transition: transform 0.2s ease; }
.joinus:hover span { transform: translate(2px, -2px); }

/* ---- footer -------------------------------------------------------------- */
.foot {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(1, 61, 94, 0.55);
}

.socials {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.socials a {
  display: inline-flex;
  color: rgba(1, 61, 94, 0.62);
  transition: color 0.2s ease, transform 0.15s ease;
}
.socials a:hover { color: var(--ink); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; display: block; }


/* fallback shown only if the video can't play */
.loader-fallback { display: none; gap: 10px; }
.loader-fallback span {
  width: 12px; height: 12px; border-radius: 50%;
  animation: pulse 1.1s ease-in-out infinite;
}
.loader-fallback span:nth-child(1) { background: var(--coral); animation-delay: 0s; }
.loader-fallback span:nth-child(2) { background: var(--blue);  animation-delay: 0.18s; }
.loader-fallback span:nth-child(3) { background: var(--lime);  animation-delay: 0.36s; }
@keyframes pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%      { transform: scale(1);   opacity: 1; }
}

/* ===========================================================================
   Sound toggle — quiet, bottom-left, static speaker icon
   =========================================================================== */
.sound {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(1, 61, 94, 0.45);
  cursor: pointer;
  transition: color 0.2s ease;
}
.sound:hover { color: var(--ink); }
.sound .ic { width: 20px; height: 20px; display: block; }
.sound .ic-off { display: none; }
.sound:not(.on) .ic-on { display: none; }
.sound:not(.on) .ic-off { display: block; }

/* ===========================================================================
   Intro gating — when the clouds open, only the wordmark animation plays.
   Everything else fades in once the animation has finished (body.intro-done).
   =========================================================================== */
.eyebrow,
.tagline,
.signup,
.joinus,
.foot,
.sound {
  opacity: 0;
  transition: opacity 1.8s ease;
}
body.intro-done .eyebrow,
body.intro-done .tagline,
body.intro-done .signup,
body.intro-done .joinus,
body.intro-done .foot,
body.intro-done .sound { opacity: 1; }

/* ===========================================================================
   Responsive + reduced motion
   =========================================================================== */
@media (max-width: 600px) {
  /* drop the parallax cloud layer on phones — it's a second decode of the heavy
     sky image and the base .sky already drifts, so the bg paints faster */
  .sky-drift { display: none; }

  /* keep the plane up in the open sky, away from the centred content */
  .plane {
    top: 9%;
    width: 11px;
    animation: fly-m 200s linear infinite;
    animation-delay: -97s;
  }
  .trail { width: 42vw; }
  /* wordmark sized to the narrow screen so it never crowds the edges */
  .wordmark-video,
  .wordmark-fallback { width: 82vw; }

  /* larger, more legible type on phones (in line with most landing pages) */
  .eyebrow      { font-size: 13.5px; letter-spacing: 0.3em; }
  .tagline      { font-size: 18px; line-height: 1.5; }
  .field input  { font-size: 17px; padding: 18px 60px 18px 22px; }
  .field input::placeholder { font-size: 17px; }
  .joinus       { font-size: 16px; }
  .foot         { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .sky { animation: none !important; transform: scale(1.04); }
  .sky-drift, .sky-tint { animation: none !important; }
  .flight { display: none; }
  .stage { transition: opacity 0.4s ease; transform: none; }
}