:root{
  --maxW: 1200px;
  --copyW: 440px;
  --pad: 24px;

  /* VisualViewport vars (JS sets these on iOS Safari) */
  --vvTopInset: 0px;
  --vvBottomInset: 0px;
  --vvHeight: 100vh;
  --vvWidth: 100vw;
}

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

body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  overflow-x:hidden;
  background:#000;
  color: rgba(255,255,255,0.92);
}

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

.stage{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* dark ambience layer (desktop look) */
.bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 700px at 60% 40%, rgba(0,0,0,0.15), rgba(0,0,0,0.75)),
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.65));
  opacity: 1;
  pointer-events:none;
  z-index: 5;
}

.product{
  position:absolute;
  inset:0;
  z-index: 10;
}

#productCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* ===============================
   LOGO (DESKTOP)
   =============================== */

.brand{
  position:absolute;
  left: 0;
  top: 0;
  width: calc(100vw / 3);
  height: 100vh;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  padding-right: 40px;
  opacity: 0.95;
  z-index: 20;
}

.brand img{
  width: 340px;
  height: auto;
}

/* ===============================
   COPY (DESKTOP)
   =============================== */

.copy{
  position:absolute;
  inset:0;
  z-index: 30;
}

.copy-block{
  position:absolute;
  top: 50%;
  right: var(--pad);
  width: min(var(--copyW), calc(100vw - var(--pad) * 2));
  transform: translate3d(120vw, -50%, 0);
  will-change: transform;

  padding: 0;
  background: transparent;
}

.copy-block h2{
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.03em;
  margin: 0 0 8px 0;
}

.copy-block p{
  margin: 0 0 10px 0;
  line-height: 1.55;
  font-size: 15px;
  color: rgba(255,255,255,0.88);
}

.copy-block p strong{
  font-weight: 500;
  color: rgba(255,255,255,0.95);
}

/* ===============================
   SOUND BUTTON
   =============================== */

.sound-toggle{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;

  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);

  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;

  font-size: 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ===============================
   SCROLL TIMELINE
   =============================== */

.timeline{
  position: relative;
  z-index: 1;
}

.beat .spacer,
.pause .spacer{
  height: 140vh;
}

.pause--long .spacer{
  height: 200vh;
}

/* ===============================
   LIQUID GLASS KNOBS (TWEAK THESE)
   =============================== */

/* General glass controls */
:root{
  --glassBlur: 12px;           /* 12–30px (higher = softer) */
  --glassSat: 160%;            /* 120–220% (higher = more “iOS”) */
  --glassRadius: 22px;         /* corner rounding */

  /* Dark tint base (main darkness knob) */
  --glassDarkBase: rgba(0,0,0,0.30);   /* increase alpha for darker */

  /* Border / shine */
  --glassDarkBorder: rgba(255,255,255,0.16);  /* stronger border */
  --glassDarkTopShine: rgba(255,255,255,0.12);/* top inner highlight */
  --glassDarkBottomShade: rgba(0,0,0,0.40);   /* bottom inner shade */

  /* Outer shadow depth */
  --glassDarkShadow: rgba(0,0,0,0.55);        /* stronger shadow = more depth */

  /* “Liquid” sheen intensity */
  --glassSheenOpacity: 0.70;   /* 0–0.8 (higher = shinier) */
  --glassSheenMix: screen;     /* screen | overlay (screen is softer) */

  /* CTA-specific knobs (black tinted CTA) */
  --ctaGlassBase: var(--glassDarkBase);
  --ctaGlassBorder: var(--glassDarkBorder);
  --ctaGlassShadow: var(--glassDarkShadow);
  --ctaTextOpacity: 0.92;      /* 0.75–1 */
  --ctaSubTextOpacity: 0.82;   /* 0.65–0.9 */
}

/* ===============================
   END / CTA (NOW BLACK TINT LIQUID GLASS)
   =============================== */

.end{
  min-height: 110vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 80px 16px;
  background: transparent;
  color: rgba(255,255,255,var(--ctaTextOpacity));
}

.end-inner{
  width: min(700px, 92vw);
  text-align: center;

  /* Dark liquid glass layers */
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 55%),
    radial-gradient(120% 120% at 85% 0%, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.32)),
    var(--ctaGlassBase);

  border: 1px solid var(--ctaGlassBorder);
  border-radius: var(--glassRadius);
  padding: 26px 18px;

  backdrop-filter: blur(var(--glassBlur)) saturate(var(--glassSat));
  -webkit-backdrop-filter: blur(var(--glassBlur)) saturate(var(--glassSat));

  box-shadow:
    0 22px 70px var(--ctaGlassShadow),
    inset 0 1px 0 var(--glassDarkTopShine),
    inset 0 -1px 0 var(--glassDarkBottomShade);

  position: relative;
  overflow: hidden;
}

/* Liquid sheen overlay */
.end-inner::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
    radial-gradient(closest-side at 70% 55%, rgba(255,255,255,0.08), rgba(255,255,255,0) 62%);
  transform: rotate(-12deg);
  pointer-events:none;
  mix-blend-mode: var(--glassSheenMix);
  opacity: var(--glassSheenOpacity);
}

.end-inner h2{
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 34px;
  margin: 0 0 10px 0;
  position: relative;
  z-index: 1;
}

.end-inner p{
  margin: 0 0 20px 0;
  color: rgba(255,255,255,var(--ctaSubTextOpacity));
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.btn{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  text-decoration:none;

  background:
    radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,0.12), rgba(255,255,255,0.04) 55%),
    rgba(255,255,255,0.06);

  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.btn--primary{
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0.08) 55%),
    rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.30);
}

/* ===============================
   MOBILE ONLY
   =============================== */

:root{
  --mobileSafePadX: 16px;

  /* Logo bar */
  --logoBarHeight: 72px;
  --logoBarTopPad: 12px;
  --logoBarBottomPad: 12px;
  --logoMobileWidth: 120px;

  /* Text area */
  --copyAreaHeight: 340px;
  --copyBottomOffset: 10px;
  --copySafeBottomExtra: 18px;
}

@media (max-width: 900px){

  /* Lock stage/canvas height to VisualViewport */
  .stage{ height: var(--vvHeight) !important; }
  .product{
    position: fixed !important;
    inset: 0 !important;
    height: var(--vvHeight) !important;
  }
  #productCanvas{ height: var(--vvHeight) !important; }

  /* Remove any dark overlay feel on mobile */
  .bg{
    opacity: 0 !important;
    background: transparent !important;
  }
  .stage::before,
  .stage::after,
  .product::before,
  .product::after{
    content: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  /* TOP LOGO BAR — liquid glass, black tinted */
  .brand{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    height: var(--logoBarHeight) !important;

    padding-left: var(--mobileSafePadX) !important;
    padding-right: var(--mobileSafePadX) !important;

    padding-top: calc(env(safe-area-inset-top, 0px) + var(--vvTopInset) + var(--logoBarTopPad)) !important;
    padding-bottom: var(--logoBarBottomPad) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
      radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 55%),
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.32)),
      var(--glassDarkBase) !important;

    border-bottom: 1px solid var(--glassDarkBorder) !important;

    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);

    box-shadow:
      0 12px 40px var(--glassDarkShadow),
      inset 0 1px 0 var(--glassDarkTopShine),
      inset 0 -1px 0 var(--glassDarkBottomShade);

    z-index: 50 !important;
    position: fixed !important;
    overflow: hidden;
  }

  .brand::before{
    content:"";
    position:absolute;
    inset:-40% -30%;
    background:
      radial-gradient(closest-side at 30% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
      radial-gradient(closest-side at 70% 55%, rgba(255,255,255,0.08), rgba(255,255,255,0) 62%);
    transform: rotate(-10deg);
    pointer-events:none;
    mix-blend-mode: var(--glassSheenMix);
    opacity: calc(var(--glassSheenOpacity) * 0.85);
  }

  .brand img{
    width: var(--logoMobileWidth) !important;
    max-width: 220px !important;
    height: auto !important;
    display: block !important;
    position: relative;
    z-index: 1;
  }

  /* COPY AREA pinned to visible bottom */
  .copy{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;

    bottom: calc(var(--vvBottomInset) + env(safe-area-inset-bottom, 0px) + var(--copyBottomOffset)) !important;
    top: auto !important;

    height: var(--copyAreaHeight) !important;

    z-index: 30 !important;

    direction: ltr !important;
    text-align: center !important;

    padding-left: var(--mobileSafePadX) !important;
    padding-right: var(--mobileSafePadX) !important;
    padding-top: 18px !important;
    padding-bottom: var(--copySafeBottomExtra) !important;

    overflow: hidden !important;
  }

  .copy-block{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;

    margin: 0 auto !important;
    width: 100% !important;
    max-width: 680px !important;

    padding: 14px 12px !important;
    border-radius: 14px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    background: rgba(0,0,0,0.0) !important;
    will-change: transform;
  }

  .copy-block h2,
  .copy-block p{
    text-align: center !important;
  }

  /* CTA remains dark glass on mobile too (same as desktop now) */
  .end{ background: transparent !important; }
}