/* Lab: scroll-scrub scenes. Tokens come from /style.css. */

.glass-header {
  position: fixed; z-index: 20; top: 12px; left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 28px; border-radius: 999px;
  background: rgba(255, 249, 250, .66); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 8px 30px rgba(81, 53, 66, .12);
}
.glass-header .logo img { height: 60px; width: auto; } /* logo-header.webp is trimmed, so all 60px are logo */
.glass-header nav { display: flex; align-items: center; gap: 24px; font-weight: 600; }
.glass-header .nav-link, .glass-header .lang { text-decoration: none; }
.glass-header .btn { min-height: 52px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 720px) {
  .glass-header { padding-left: 18px; }
  .glass-header .logo img { height: 46px; }
  .glass-header .nav-link, .glass-header .hide-phone { display: none; }
}

/* Scenes */
.scrub { position: relative; background: var(--blush); }
/* Large viewport height: on iOS the scene still fills the screen when Safari's toolbar collapses (100svh left a strip). */
.stage { position: relative; height: 100vh; height: 100lvh; overflow: clip; }
.stage .still, .stage .clip {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--ox, 50%) var(--oy, 50%);
}
.stage .clip { display: none; }

.copy { position: absolute; z-index: 2; max-width: min(34rem, 42vw); }
.copy p { font-size: 1.1875rem; color: var(--plum-deep); }
.copy .display { color: var(--plum-deep); text-shadow: 0 1px 0 var(--cream), 0 0 32px rgba(255, 249, 250, .9), 0 0 80px rgba(255, 249, 250, .75); }
.copy p { text-shadow: 0 0 18px var(--cream), 0 0 8px var(--cream); }
.copy .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.copy .btn-call { background: rgba(255, 249, 250, .8); }
.hero-copy { left: var(--gutter); top: 22vh; }
.hero-copy .display { font-size: clamp(2.75rem, 5.4vw, 5.25rem); }
.steps-copy, .online-copy, .close-copy { left: var(--gutter); top: 20vh; }
.steps-copy .steps { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: s; display: grid; gap: 14px; }
.steps-copy .steps li {
  counter-increment: s; display: flex; gap: 14px; align-items: baseline; font-size: 1.1875rem;
  padding: 14px 18px; background: rgba(255, 249, 250, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.steps-copy .steps li::before { content: counter(s); font: 400 1.75rem/1 var(--serif); color: var(--rose); }
.scene-close .copy .display, .scene-close .copy p { color: var(--cream); text-shadow: 0 2px 18px rgba(61, 39, 49, .65), 0 0 60px rgba(61, 39, 49, .5); }
.scene-close .copy .display em { color: var(--pink); }

/* Pinned version (JS on, motion allowed) */
.scrub-on .scrub { height: calc(var(--len, 250vh) + 70vh); background: none; } /* +70vh = still pause after the animation (HOLD in scrub.js) */
.scrub-on .stage { position: sticky; top: 0; }
/* Scene to scene: real scroll, no overlap. While a scene rolls in or out, its edge dissolves into the
   section colour (JS sizes --mt/--mb), so two scenes never share the screen and there is no hard line. */
.scrub-on .stage {
  --mask: linear-gradient(to bottom, transparent 0, #000 var(--mt, 0px), #000 calc(100% - var(--mb, 0px)), transparent 100%);
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
}
.scrub-on .copy { opacity: var(--cv, 1); }
.scrub-on .scene-hero, .scrub-on .scene-steps { background: var(--blush); }
.scrub-on .scene-online { background: linear-gradient(var(--blush), var(--cream)); }
.scrub-on .scene-close { background: linear-gradient(var(--cream), #2c1d33); }
.scrub-on .stage .clip { display: block; }
.scrub-on .stage .still { display: none; }
.scrub-on [data-at] { opacity: calc(var(--v, 0) * var(--cv, 1)); transform: translateY(calc((1 - var(--v, 0)) * 24px)); }
.scrub-on .steps li[data-at] { opacity: calc(.35 + .65 * var(--v, 0)); transform: none; }


/* Steps: anchor the top so wide screens crop the clouds below, never her head under the header. */
.scene-steps, .scene-online, .scene-close { --oy: 0%; }
.steps-copy { max-width: min(26rem, 28vw); top: 15vh; } /* she starts at ~37% of the width */
.steps-copy .h2 { font-size: clamp(2.1rem, 3.4vw, 3.4rem); }

/* Online: the chat card fills the gap between the copy and the phone and carries the button. */
.online-copy { top: 15vh; max-width: min(46rem, 50vw); }
.online-copy .h2 { max-width: none; }
.online-copy > p { max-width: 30rem; }
.chat {
  width: min(24rem, 30vw); margin: 22px 0 0 clamp(0px, 12vw, 220px); padding: 16px;
  background: rgba(255, 249, 250, .78); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px rgba(81, 53, 66, .16);
}
.chat-head { display: flex; align-items: center; gap: 10px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid rgba(81, 53, 66, .12); }
.chat-head img { width: 40px; height: 40px; object-fit: contain; background: var(--cream); border-radius: 50%; padding: 4px; }
.chat-lang { margin-left: auto; display: inline-flex; border: 1px solid rgba(81, 53, 66, .25); border-radius: 999px; font: 600 .75rem/1 var(--sans); letter-spacing: .04em; }
.chat-lang b { padding: 6px 10px; border-radius: 999px; }
.chat .bubble {
  display: grid; margin: 16px 0 16px auto; width: fit-content; max-width: 88%;
  padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--plum); color: var(--cream);
  font-size: 1rem; line-height: 1.45; text-shadow: none;
}
.bubble > span { grid-area: 1 / 1; }
.bubble .l1::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; opacity: calc(1 - var(--swap, 0)); }
/* At the end of the scene the same message switches to Portuguese. */
.scene-online { --swap: clamp(0, (var(--p, 1) - .8) * 12, 1); }
.bubble .l2 { opacity: var(--swap); }
.bubble .l1 { opacity: calc(1 - var(--swap)); }
.chat-lang .l1 { background: rgba(81, 53, 66, calc(1 - var(--swap))); color: color-mix(in srgb, var(--cream) calc(100% - var(--swap) * 100%), var(--plum)); }
.chat-lang .l2 { background: rgba(81, 53, 66, var(--swap)); color: color-mix(in srgb, var(--cream) calc(var(--swap) * 100%), var(--plum)); }
.chat .btn { width: 100%; }

/* About keeps the current site's layout */
.about { background: var(--cream); }

/* Phone without JS crops: the camera follows Michele across the wide clip. With .m-crops the files are already vertical. */
.m-crops .scrub { --ox: 50% !important; }
@media (max-width: 720px) {
  .scene-hero { --ox: 50%; } /* hero-m.mp4 is already a vertical crop centred on her */
  .scene-online { --ox: 96%; } /* phone sits at x ~84% */
  .scene-close { --ox: 74%; } /* she runs along x ~68% */
  /* The stage is toolbar-collapsed tall; lift the card by the toolbar's height so it stays visible when the toolbar is open. */
  .copy { left: 16px; right: 16px; top: auto; bottom: 20px; bottom: calc(20px + 100lvh - 100dvh); max-width: none; transform: none; padding: 20px; background: rgba(255, 249, 250, .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .copy .display, .copy p { text-shadow: none; }
  .hero-copy .display { font-size: 2.3rem; }
  .copy p { font-size: 1rem; }
  .steps-copy .steps li { padding: 8px 0; background: none; backdrop-filter: none; font-size: 1rem; }
  /* Steps: compact card at the top, only the current step shows, so she stays visible below. */
  .steps-copy { padding: 14px 18px; }
  .steps-copy .display { font-size: 1.75rem; }
  .steps-copy .steps { display: grid; margin-top: 6px; }
  .steps-copy .steps li { grid-area: 1 / 1; }
  .scrub-on .steps li[data-at] { opacity: var(--v, 0); }
  .scene-steps { --ox: calc(41% + 56% * clamp(0, (var(--p, 1) - 0.17) / 0.48, 1)); } /* still for the 2 s hold, then follows her to the top plate (p ~ .65) */
  .scene-close .copy { background: rgba(61, 39, 49, .78); }
  .online-copy { max-width: none; }
  .chat { width: auto; margin: 16px 0 0; padding: 0; background: none; backdrop-filter: none; box-shadow: none; }
  .chat-visual { display: none; }
}

/* Footer: night after the pier sunset; big wordmark with Michele waving goodbye on it. */
.mega-footer {
  position: relative; overflow: clip; color: var(--on-plum-soft);
  background: linear-gradient(180deg, #2c1d33 0%, var(--plum-deep) 38%, #2a1a22 100%);
  padding: clamp(56px, 8vw, 104px) var(--gutter) 0;
}
.mega-footer::before { /* faint stars, the evening keeps going */
  content: ""; position: absolute; inset: 0 0 45% 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 34% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 40%, #fff 50%, transparent 51%);
}
.mf-grid { position: relative; display: grid; grid-template-columns: 1.3fr 1.5fr 1fr 1fr; gap: 40px clamp(24px, 4vw, 64px); align-items: start; }
.mf-brand .logo img { width: 150px; }
.mf-brand p { margin: 18px 0 0; max-width: 26ch; color: var(--on-plum-soft); }
.mf-label { margin: 0 0 14px; font: 600 .8125rem/1.2 var(--sans); letter-spacing: .04em; color: var(--pink); }
.mf-phone { display: block; font: 400 clamp(1.9rem, 2.8vw, 2.6rem)/1.1 var(--serif); color: var(--cream); text-decoration: none; }
.mf-phone:hover { color: var(--pink); }
.mf-contact .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn-light { background: var(--pink); color: var(--plum-deep); }
.btn-light:hover { background: var(--pink-hover); }
.btn-ghost { color: var(--cream); border-color: rgba(255, 249, 250, .35); }
.btn-ghost:hover { border-color: var(--cream); }
.mf-nav { display: grid; gap: 10px; }
.mf-nav a { color: var(--on-plum-soft); text-decoration: none; width: fit-content; }
.mf-nav a:hover { color: var(--cream); text-decoration: underline; }

.mf-stage { position: relative; margin-top: clamp(40px, 6vw, 80px); height: clamp(150px, 19vw, 300px); }
.mf-word {
  position: absolute; left: -.02em; bottom: -.18em; font: italic 400 clamp(7rem, 24vw, 23rem)/.8 var(--serif); letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--pink) 10%, rgba(241, 187, 202, .08) 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mf-stage::after { /* soft pink glow so the black outfit reads on the night background */
  content: ""; position: absolute; right: clamp(-80px, 1vw, 40px); bottom: -10%; width: clamp(320px, 38vw, 620px); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(241, 187, 202, .38), rgba(241, 187, 202, .12) 55%, transparent); pointer-events: none;
}
.mf-word, .mf-mascot { z-index: 1; }
.mf-mascot { position: absolute; right: clamp(0px, 6vw, 120px); bottom: 0; height: clamp(230px, 30vw, 440px); width: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
.mf-bottom {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin: 0 calc(-1 * var(--gutter)); padding: 18px var(--gutter) 24px; border-top: 1px solid rgba(255, 249, 250, .14);
  background: #22151c; font-size: .875rem;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mf-word { animation: mf-word linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .mf-mascot { animation: mf-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
  }
}
@keyframes mf-word { from { transform: translateX(-8%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mf-rise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) { .mf-grid { grid-template-columns: 1fr 1fr; } .mf-contact { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 560px) { .mf-grid { grid-template-columns: 1fr 1fr; } .mf-brand, .mf-contact { grid-column: 1 / -1; } .mf-contact { grid-row: auto; } .mf-stage { height: 210px; } .mf-mascot { right: 0; height: 200px; } }