/* ============================================================
   Zinzino scroll-world — dark cinematic theme
   Overrides the engine's light defaults. Unlayered rules here
   win over the engine's @layer sw defaults automatically.
   ============================================================ */
:root {
  --zz-ink: #0b1014;
  --zz-cream: #f5efe3;
  --zz-sand: #b8ae9a;
  --zz-gold: #c9a45c;
}

.sw-root {
  --sw-bg: #0b1014;
  --sw-ink: #f5efe3;
  --sw-ink-soft: #b8ae9a;
  --sw-accent: #c9a45c;
  --sw-font-display: "Inter", system-ui, sans-serif;
  --sw-font-body: "Inter", system-ui, sans-serif;
}

html, body { margin: 0; background: #0b1014; color: #f5efe3; overflow-x: hidden; }
body { font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* Slightly heavier display weight + tighter tracking for the headlines */
.sw-copy__title { font-weight: 800; letter-spacing: -0.02em; }
.sw-copy__eyebrow { letter-spacing: 0.22em; }

/* On dark video, warm the copy scrim toward the ink and feather it further right
   so the left-column copy always reads over any footage. */
.sw-copylayer::before {
  width: min(64vw, 860px);
  background: linear-gradient(90deg,
    rgba(11,16,20,0.94) 0%,
    rgba(11,16,20,0.72) 34%,
    rgba(11,16,20,0.32) 64%,
    rgba(11,16,20,0) 100%);
}

/* ---------- animated text: per-word blur+rise cascade ----------
   Unlayered so it beats the engine's @layer-sw defaults. splitWords() (engine)
   wraps each title/eyebrow/body word in .sw-w with its index in --wi; read()
   toggles .is-live on whichever copy is most visible.
   Uses a keyframe ANIMATION (not a class-triggered transition): under the 14-video
   scrub load a transition stalls at its start value and leaves text stuck hidden,
   whereas an animation with fill:forwards always lands (and holds) the end state. */
@keyframes sw-word-in {
  from { opacity: 0; filter: blur(9px); transform: translateY(0.42em); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
.sw-w { display: inline-block; opacity: 0; }
.sw-copy.is-live .sw-w {
  animation: sw-word-in .6s cubic-bezier(.2,.75,.2,1) both;
  animation-delay: calc(var(--wi, 0) * 38ms);
}
.sw-copy__eyebrow.is-live .sw-w,
.sw-copy.is-live .sw-copy__eyebrow .sw-w,
.sw-copy.is-live .sw-copy__body .sw-w { animation-delay: calc(var(--wi, 0) * 18ms); }
@media (prefers-reduced-motion: reduce) {
  .sw-w { opacity: 1 !important; animation: none !important; }
}

/* Engine pills default to a light-theme fill (color-mix with #fff) — re-cast them
   as dark translucent glass so they sit on the footage instead of punching holes. */
.sw-copy__tags li {
  color: var(--sw-accent);
  background: rgba(11,16,20,0.55);
  border: 1px solid color-mix(in srgb, var(--sw-accent) 38%, transparent);
  backdrop-filter: blur(8px);
  font-weight: 500;
}
.sw-route__label {
  color: var(--zz-cream);
  background: rgba(11,16,20,0.72);
  border: 1px solid rgba(245,239,227,0.12);
}
.sw-btn--primary { color: #0b1014; background: var(--zz-gold); }
.sw-btn--ghost { color: var(--zz-cream); border-color: rgba(245,239,227,0.28); }

/* ---------- the real products, floated into the scene ----------
   One .sw-product per section (engine builds it from `product:` in config and
   toggles .is-live on the same visibility signal as the copy). Copy owns the
   left column, the product owns the right, so they never collide.
   The wrapper does the slow float; the <img> does the entrance — two separate
   transform contexts, because one element cannot run both without conflict. */
.sw-productlayer {
  position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden;
}
/* Bound the product to a right-side box capped on BOTH axes. Height alone would
   blow a landscape box/tub up in width until it crossed into the left copy
   column — capping width keeps every product on its own side of the frame. */
.sw-product {
  position: absolute; top: 50%; right: clamp(2vw, 5vw, 110px);
  transform: translateY(-50%);
  width: min(40vw, 500px); height: min(64vh, 560px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .7s ease;
}
.sw-product.is-live {
  opacity: 1;
  animation: sw-prod-float 7s ease-in-out infinite;
  animation-delay: .9s;
}
/* accent halo — lifts the dark BalanceOil+ bottle off the dark footage and
   ties every product to its own packaging colour. */
.sw-product::before {
  content: ""; position: absolute; inset: -12% -14%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--sw-accent) 24%, transparent) 0%,
    transparent 100%);
  filter: blur(20px); z-index: -1;
}
.sw-product__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  opacity: 0;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}
.sw-product.is-live .sw-product__img {
  animation: sw-prod-in .95s cubic-bezier(.2, .75, .2, 1) both;
  animation-delay: calc(var(--pi, 0) * 140ms + 150ms);
}
@keyframes sw-prod-in {
  from { opacity: 0; transform: translateY(46px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes sw-prod-float {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 12px)); }
}

/* the finale: all four real products as a family line-up, sitting on one
   shelf and rising in sequence. Replaces the generic bottles. */
.sw-product--stack {
  right: clamp(1vw, 2vw, 30px); height: min(58vh, 500px); width: min(56vw, 760px);
  align-items: flex-end; justify-content: center;
  gap: clamp(6px, 1.6vw, 26px);
}
.sw-product--stack.is-live { animation: none; }   /* the row stays put; the items rise */
.sw-product--stack .sw-product__img {
  max-height: 34vh; max-width: 22%;   /* even family line-up: bottle tall, boxes wide */
}
.sw-product--stack::before { inset: -8% -4%; }

@media (prefers-reduced-motion: reduce) {
  .sw-product.is-live { animation: none !important; }
  .sw-product__img { opacity: 1 !important; }
  .sw-product.is-live .sw-product__img { animation: none !important; }
}

/* Phones: copy anchors to the bottom, so the product moves up and centres
   instead of fighting it for the right edge. */
@media (max-width: 860px) {
  .sw-product {
    top: 30%; right: 50%; transform: translate(50%, -50%);
    height: min(34vh, 300px);
  }
  .sw-product.is-live { animation: none; }
  .sw-product--stack {
    right: 50%; width: 92vw; gap: 6px;
  }
  .sw-product--stack .sw-product__img { max-height: 20vh; }
}

/* ---------- custom top navbar ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: clamp(14px,2.2vw,24px) clamp(18px,5vw,60px);
  pointer-events: none;
}
.site-nav > * { pointer-events: auto; }
.site-nav__brand {
  font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: 0.16em;
  font-size: 1.02rem; color: var(--zz-cream); text-decoration: none;
  background: none; border: 0; cursor: pointer; text-transform: uppercase;
}
.site-nav__links { display: flex; gap: 6px; padding: 5px;
  background: rgba(245,239,227,0.05); backdrop-filter: blur(10px);
  border: 1px solid rgba(245,239,227,0.10); border-radius: 999px; }
.site-nav__links button {
  font: inherit; font-size: 0.8rem; font-weight: 500; color: var(--zz-sand);
  border: 0; background: transparent; cursor: pointer; padding: 7px 14px;
  border-radius: 999px; transition: color .25s, background .25s; white-space: nowrap;
}
.site-nav__links button:hover { color: var(--zz-cream); background: rgba(245,239,227,0.08); }
.site-nav__cta {
  font: inherit; font-weight: 600; font-size: 0.85rem; color: #0b1014;
  background: var(--zz-gold); border: 0; cursor: pointer; padding: 10px 20px;
  border-radius: 999px; white-space: nowrap; transition: transform .2s, filter .2s;
}
.site-nav__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
@media (max-width: 860px) { .site-nav__links { display: none; } }

/* ---------- footer (fades in near the end of the flight) ---------- */
.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; padding: 14px clamp(18px,5vw,60px);
  background: linear-gradient(0deg, rgba(11,16,20,0.96) 0%, rgba(11,16,20,0) 100%);
  color: var(--zz-sand); font-size: 0.72rem; letter-spacing: 0.02em;
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.site-footer.is-visible { opacity: 1; pointer-events: auto; }
.site-footer a { color: var(--zz-sand); text-decoration: none; }
.site-footer a:hover { color: var(--zz-cream); }
.site-footer__legal { max-width: 62ch; opacity: 0.7; line-height: 1.4; }