:root{
  --bg: #5F6161;
  --white: #ffffff;
  --muted: rgba(255,255,255,0.15);
  --stage-fade: 1.8s; /* 1.5s * 1.2 */
  --logo-intro: 960ms; /* 800ms * 1.2 */
  --logo-scale: 1.08s; /* 900ms * 1.2 ~ 1080ms but kept readable */
  --float-rotate: 14s; /* 12s * 1.2 */
  --floaty: 4.8s; /* 4s * 1.2 */
  --warp: 7.2s; /* 6s * 1.2 */
  --combo: 10.8s; /* 9s * 1.2 */
  --hueshift: 7.2s; /* 6s * 1.2 */
  --shimmer: 12s; /* 10s * 1.2 */
  --logo-loop-fade: 7.2s; /* 6s * 1.2 for fade variant */
  --glow: 3.36s; /* 2.8s * 1.2 */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* main stage fade-in */
.stage{width:100%; height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:4vmin; opacity:0; animation:stageFadeIn var(--stage-fade) ease-out forwards; z-index:2;}
@keyframes stageFadeIn{to{opacity:1;}}

/* floating currency symbols (subtle) */
.symbols{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.symbol{
  position:absolute;
  font-size:6vmin;
  color:var(--muted);
  filter:blur(0.6px);
  user-select:none;
  animation:floatRotate var(--float-rotate) ease-in-out infinite;
  transform-origin:center;
}
@keyframes floatRotate{
  0%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-16px) rotate(180deg);} /* increased visible drift */
  100%{transform:translateY(0) rotate(360deg);}
}

/* staggered delays to make motion organic */
.symbol.s1{left:6%; top:16%; font-size:7vmin; animation-delay:0s;}
.symbol.s2{right:10%; top:9%; font-size:6vmin; animation-delay:1s;}
.symbol.s3{left:14%; bottom:6%; font-size:6.5vmin; animation-delay:2s;}
.symbol.s4{right:12%; bottom:18%; font-size:7vmin; animation-delay:3s;}
.symbol.s5{left:52%; top:4%; font-size:5.5vmin; animation-delay:4s;}
.symbol.s6{right:38%; bottom:10%; font-size:5.5vmin; animation-delay:5s;}

/* hero/logo */
.logo-wrap{
  width:60vmin;
  max-width:420px;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  margin:0 auto;
  opacity:0;
  transform:translateY(12px);
  animation:fadeIn var(--logo-intro) ease-out 0.3s forwards;
  z-index:2;
 max-height:60vmin;}
.logo-wrap img{width:100%;height:100%;object-fit:contain;display:block;}

/* slogan */
.slogan{
  margin-top:1.2vmin;
  font-size:clamp(16px, 2.4vmin, 22px);
  letter-spacing:0.01em;
  color:var(--white);
  z-index:2;
  opacity:0.95;
}

/* minimalist bottom email sign-up (functional markup for later wiring) */
.signup-line{
  position:fixed;
  left:50%;
  bottom:4vmin;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:1vmin;
  z-index:3;
  width:min(720px,92%);
  justify-content:center;
}
.signup-line form{
  display:flex;
  gap:0.8rem;
  align-items:center;
  width:100%;
  justify-content:center;
}
.signup-line input[type="email"]{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,0.35);
  padding:0.6rem 0.6rem;
  color:var(--white);
  font-size:1rem;
  outline:none;
  min-width:220px;
  width:40%;
}
.signup-line input[type="email"]::placeholder{opacity:0.6;color:rgba(255,255,255,0.9)}
.signup-line input[type="email"]:focus{border-bottom-color:rgba(255,255,255,0.9);}

/* flat minimal button */
.signup-line button{
  background:transparent;
  border:1px solid rgba(255,255,255,0.35);
  color:var(--white);
  padding:0.56rem 0.9rem;
  font-size:0.95rem;
  cursor:pointer;
  border-radius:6px;
}
.signup-line button:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:2px;}

/* small utilities */
.h1{display:none;} /* hide old h1 variants */
.tag{display:none}
.footer-note{display:none}

/* animation helpers used per-variant */
@keyframes fadeIn{to{opacity:1; transform:translateY(0);}}
@keyframes shimmerBG{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes hueShift{0%{filter:hue-rotate(0deg) saturate(100%)}50%{filter:hue-rotate(120deg) saturate(130%)}100%{filter:hue-rotate(0deg) saturate(100%)}}

/* VARIANTS */

/* Fade variant: page intro + looping logo fade (only this variant gets the loop) */
.variant-fade .stage{ /* stage fade already global */ }
.variant-fade .stage.fade-in-onload{animation:stageFadeIn var(--stage-fade) ease-out forwards;}
/* looping logo pulse for fade variant */
.variant-fade .logo-wrap img{animation:logoLoop var(--logo-loop-fade) ease-in-out infinite, logoScale var(--logo-scale) ease both;}
@keyframes logoLoop{
  0%{opacity:0.15;filter:brightness(0) invert(1);transform:scale(0.98);}
  50%{opacity:1;filter:brightness(0) invert(1);transform:scale(1.02);}
  100%{opacity:0.15;filter:brightness(0) invert(1);transform:scale(0.98);}
}
@keyframes logoScale{0%{transform:scale(0.92);}100%{transform:scale(1);}}

/* Glow variant */
.variant-glow .logo-wrap img{
  filter: drop-shadow(0 10px 30px rgba(0,212,255,0.14)) drop-shadow(0 0 30px rgba(0,212,255,0.06));
  animation:glowPulse var(--glow) ease-in-out infinite;
}

/* Warp variant */
.variant-warp .logo-wrap{
  animation:fadeIn 840ms ease-out 0.3s forwards, warpRotate var(--warp) linear infinite; /* 700ms -> 840ms */
  transform-origin:center;
}
@keyframes warpRotate{
  0%{transform:translateY(0) rotateY(0) scale(1)}
  25%{transform:translateY(-7.2px) rotate(4deg) scale(1.02)}
  50%{transform:translateY(0) rotate(-3deg) scale(0.99)}
  75%{transform:translateY(-4px) rotate(2deg) scale(1.01)}
  100%{transform:translateY(0) rotateY(0) scale(1)}
}

/* Color shift */
.variant-color_shift{
  background: linear-gradient(90deg, #5F6161 0%, #4a4c4c 35%, #5f6161 100%);
  background-size: 300% 100%;
  animation: shimmerBG var(--shimmer) linear infinite;
}
.variant-color_shift .logo-wrap img{ animation: hueShift var(--hueshift) ease-in-out infinite; transform-origin:center;}

/* Float variant */
.variant-float .logo-wrap{ animation:fadeIn 840ms ease-out 0.3s forwards, floaty var(--floaty) ease-in-out infinite; }
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-16.8px)}100%{transform:translateY(0)}} /* 14px *1.2 */

/* Combo plus */
.variant-combo_plus .logo-wrap{ animation:fadeIn 840ms cubic-bezier(.22,.9,.27,1) 0.3s forwards, comboSpin var(--combo) linear infinite; }
@keyframes comboSpin{ 0%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-14.4px) rotate(180deg)} 100%{transform:translateY(0) rotate(360deg)} }
.variant-combo_plus .logo-wrap img{ animation: hueShift calc(var(--hueshift) * 1.4) linear infinite, glowPulse calc(var(--glow) * 1.04) ease-in-out infinite; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .logo-wrap, .symbol, .stage{animation:none !important; transition:none !important}
  .signup-line input, .signup-line button{transition:none !important}
}

@media (min-width:1200px){.stage{padding:6vmin}}


/* Notify toggle styles (checkbox reveal) */
.bottom-controls{position:fixed;left:50%;bottom:4vmin;transform:translateX(-50%);z-index:4;display:flex;align-items:center;justify-content:center;width:100%;pointer-events:auto;}
.notify-toggle{display:flex;flex-direction:column;align-items:center;gap:0.6rem;}
.notify-toggle label.notify-btn{background:transparent;border:1px solid rgba(255,255,255,0.35);color:var(--white);padding:0.56rem 0.9rem;font-size:0.95rem;cursor:pointer;border-radius:6px;display:inline-block;user-select:none;}
.notify-toggle input[type="checkbox"]{position:absolute;left:-9999px;opacity:0;pointer-events:none;}
.reveal{opacity:0;max-height:0;overflow:hidden;transition:opacity 320ms ease, max-height 320ms ease;width:100%;display:flex;justify-content:center;}
.notify-toggle input[type="checkbox"]:checked + label.notify-btn + .reveal{opacity:1;max-height:80px;}
.reveal form{width:min(720px,92%);display:flex;flex-direction:column;align-items:center;gap:0.6rem;}
.reveal input[type="email"]{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,0.35);padding:0.56rem 0.6rem;color:var(--white);font-size:1rem;outline:none;width:60%;text-align:center;}
.reveal input[type="email"]::placeholder{opacity:0.6;color:rgba(255,255,255,0.9)}
.reveal input[type="email"]:focus{border-bottom-color:rgba(255,255,255,0.9);}
.reveal button[type="submit"]{background:transparent;border:1px solid rgba(255,255,255,0.35);color:var(--white);padding:0.5rem 0.8rem;font-size:0.95rem;cursor:pointer;border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Logo toggle (checkbox) - reveal email input below logo */
.logo-toggle-input{position:absolute;left:-9999px;opacity:0;pointer-events:none;}
.logo-reveal{opacity:0;max-height:0;overflow:hidden;transition:opacity 320ms ease, max-height 320ms ease;margin-top:2vmin;display:flex;justify-content:center;}
.logo-reveal form{width:min(720px,92%);display:flex;flex-direction:column;align-items:center;gap:0.6rem;}
.logo-reveal input[type="email"]{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,0.35);padding:0.56rem 0.6rem;color:var(--white);font-size:1rem;outline:none;width:60%;text-align:center;}
.logo-reveal input[type="email"]:focus{border-bottom-color:rgba(255,255,255,0.9);}
/* when checkbox checked, reveal the email input (input + .logo-wrap + .logo-reveal) */
.logo-toggle-input:checked + .logo-wrap + .logo-reveal{opacity:1;max-height:120px;}
/* make label tight hitbox around image */
.logo-label{display:inline-block;cursor:pointer;line-height:0;border-radius:6px; }


/* layering fix: make logo fade slightly and allow typing in email input */
.logo-wrap { position: relative; z-index: 2; transition: opacity 0.3s ease; }
.logo-toggle-input:checked + .logo-wrap { z-index: 0; opacity: 0.8; }
.logo-reveal { position: relative; z-index: 3; }


/* === v8.8.2 refinements === */

/* correct logo sizing */
.logo-wrap {
  max-width: 60vmin;
  max-height: 60vmin;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

/* wider email field */
.logo-reveal input[type="email"] {
  width: 80%;
}

/* remove button look, show plain white text submit */
.logo-reveal button[type="submit"] {
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.4rem;
}
.logo-reveal button[type="submit"]:hover {
  text-decoration: underline;
}


/* --- precise logo sizing fix for v8.8.3 --- */
.logo-wrap {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wrap img {
  max-width: 60vmin;
  max-height: 60vmin;
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* --- email field visibility fix for v8.8.4 --- */
.logo-reveal form {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.logo-reveal input[type="email"] {
  width: 90%;
  max-width: 600px;
}



/* --- Layered animation fix (v5) --- */
.logo-anim {
  animation: logoLoop var(--logo-loop-fade) ease-in-out infinite,
             logoScale var(--logo-scale) ease both;
  will-change: transform, opacity;

  animation: logoLoop var(--logo-loop-fade) ease-in-out infinite,
             logoScale var(--logo-scale) ease both;
  will-change: transform, opacity;
}

.logo-wrap,
.logo-wrap canvas,
.logo-label {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.logo-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

@keyframes logoLoop {
  0% { opacity: 0.15; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.15; transform: scale(0.98); }
}

@keyframes logoScale {
  0% { transform: scale(0.92); }
  100% { transform: scale(1); }
}



/* --- Fade-sync improvements: show .logo-anim only after canvas draw --- */
.logo-anim {
  animation: logoLoop var(--logo-loop-fade) ease-in-out infinite,
             logoScale var(--logo-scale) ease both;
  will-change: transform, opacity;

  opacity: 0;
  transition: opacity var(--logo-intro, 1.2s) ease-out, transform var(--logo-intro, 1.2s) ease-out;
  will-change: opacity, transform;
}
.logo-anim.drawn {
  opacity: 1;
}

/* also ensure fallback if only .logo-wrap exists */
.logo-wrap {
  /* keep existing behaviors */
}
.logo-wrap.drawn { opacity: 1; transition: opacity var(--logo-intro, 1.2s) ease-out; }