/* ==========================================================================
   Advanced motion layer — preloader, cursor, variable-font proximity,
   pinned horizontal scroll, clip reveals, giant wordmark.
   Shares the cascade layers declared in styles.css.
   ========================================================================== */

@layer sections {
  /* ---------- switches: view (Full / Simple) and language (EN / PT) ---------- */
  /* One button per switch: a click anywhere flips it; the thumb slides to the active side. */
  .toggles { display: flex; gap: 8px; margin-left: 4px; }
  .switch {
    position: relative; isolation: isolate;
    display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center;
    padding: 3px; border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--void) 50%, transparent);
    backdrop-filter: blur(8px);
    font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
    transition: border-color .3s;
    &:hover { border-color: var(--mineral); }
  }
  .switch__opt {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    min-width: 38px; height: 28px; padding-inline: 10px; border-radius: 999px;
    color: var(--text-2); white-space: nowrap;
    transition: color .45s var(--ease-out);
  }
  .switch[aria-checked="false"] .switch__opt:first-child,
  .switch[aria-checked="true"] .switch__opt:nth-child(2) { color: var(--void); }
  .switch__thumb {
    position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px;
    width: calc(50% - 3px); border-radius: 999px;
    background: var(--chrome); background-size: 200% 100%;
    box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--mineral) 50%, transparent);
    transition: translate .55s var(--ease-out), background-position .55s var(--ease-out);
  }
  .switch[aria-checked="true"] .switch__thumb { translate: 100% 0; background-position: 100% 50%; }
  .switch:active .switch__thumb { scale: .94 .88; }

  @media (width < 900px) {
    .site-header .toggles { margin-left: auto; }
    .site-header .menu-btn { margin-left: 2px; }
  }
  @media (width < 480px) {
    .site-header { gap: 10px; }
    .site-header .lockup__word { display: none; }
    .switch__opt { min-width: 0; padding-inline: 8px; font-size: .6rem; }
  }

  /* ---------- preloader ---------- */
  .loader {
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center;
    background: var(--void);
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.1s var(--ease-io);
    /* safety net: never trap the page if JS fails */
    animation: loader-failsafe .6s 5s forwards;
  }
  html[data-loaded] .loader { clip-path: inset(0 0 100% 0); pointer-events: none; }
  @keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
  .loader__mark { width: clamp(72px, 10vw, 120px); overflow: visible; }
  .loader__path {
    fill: none; stroke: var(--mineral); stroke-width: 19;
    stroke-dasharray: 260; stroke-dashoffset: 260;
    animation: draw-mark 1.1s var(--ease-io) .1s forwards;
  }
  .loader__dot { fill: var(--mineral); scale: 0; transform-origin: 21px 15px; transform-box: view-box; animation: pop .6s var(--ease-out) .9s forwards; }
  @keyframes draw-mark { to { stroke-dashoffset: 0; } }
  @keyframes pop { to { scale: 1; } }
  .loader__meta {
    position: absolute; left: var(--gutter); right: var(--gutter); bottom: 40px;
    display: flex; justify-content: space-between; align-items: end;
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2);
  }
  .loader__count {
    font-family: var(--f-display); font-stretch: 62%; font-weight: 200; letter-spacing: -.02em;
    font-size: clamp(3rem, 8vw, 7rem); line-height: .8; color: var(--text); font-variant-numeric: tabular-nums;
  }
  .loader__bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
    span { display: block; height: 100%; background: var(--mineral); transform-origin: left; scale: 0 1; }
  }

  /* ---------- Lenis smooth scroll (official base styles) ----------
     Native smooth scrolling must be off while Lenis drives the scroll,
     otherwise the browser eases every Lenis step and the wheel stalls. */
  html.lenis, html.lenis body { height: auto; }
  html.lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  html.lenis.lenis-stopped { overflow: clip; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

  /* ---------- reading progress ---------- */
  .progress {
    position: fixed; inset: 0 0 auto; height: 2px; z-index: 60;
    background: var(--chrome); transform-origin: left; scale: 0 1;
  }
  @supports (animation-timeline: scroll()) {
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
  }
  @keyframes grow { to { scale: 1 1; } }

  /* ---------- custom cursor ---------- */
  .cursor { display: none; }
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor .cursor {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none;
    width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: var(--mineral); mix-blend-mode: difference;
    translate: var(--cx, -100px) var(--cy, -100px);
    transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background .3s, scale .2s;
    will-change: translate;
  }
  html.has-cursor .cursor[data-hover] { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  html.has-cursor .cursor[data-label] {
    width: 96px; height: 96px; margin: -48px 0 0 -48px; mix-blend-mode: normal;
    background: color-mix(in srgb, var(--mineral) 94%, transparent);
  }
  html.has-cursor .cursor[data-down] { scale: .82; }
  html.has-cursor .cursor[data-off] { scale: 0; }
  .cursor__label {
    font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--void); opacity: 0; transition: opacity .25s;
  }
  .cursor[data-label] .cursor__label { opacity: 1; }

  /* ---------- variable-font proximity (hero) ---------- */
  [data-proximity] .ch {
    font-variation-settings: "wght" var(--w, 700), "wdth" var(--s, 82);
    transition: font-variation-settings .4s var(--ease-out);
  }
  [data-proximity] .chrome-text:has(.ch) { background: none; animation: none; color: inherit; }
  [data-proximity] .chrome-text .ch {
    background: var(--chrome); background-size: 1200% 100%;
    background-position: calc(var(--i) * 8%) 50%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* ---------- pinned horizontal capabilities ---------- */
  .hscroll__hint, .hscroll__progress { display: none; }
  @supports (animation-timeline: view()) {
    @media (width >= 900px) and (prefers-reduced-motion: no-preference) {
      .hscroll {
        view-timeline: --caps block;
        height: 300vh;
        margin-inline: calc(50% - 50vw);
      }
      .hscroll__sticky {
        position: sticky; top: 0; height: 100vh; overflow: clip;
        display: grid; align-content: center; gap: 36px;
        perspective: 1400px;
      }
      .hscroll .caps {
        display: flex; width: max-content; gap: 20px;
        padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
        animation: caps-slide linear both;
        animation-timeline: --caps;
        animation-range: contain 0% contain 100%;
      }
      .hscroll .cap {
        width: clamp(320px, 30vw, 440px); min-height: 54vh; padding: 40px 36px;
        display: flex; flex-direction: column; gap: 14px;
      }
      .hscroll .cap .ico--lg { width: 44px; height: 44px; margin-bottom: auto; }
      .hscroll .cap h3 { font-size: clamp(1.6rem, 1rem + 1.3vw, 2.3rem); font-stretch: 90%; }
      .hscroll__hint, .hscroll__progress {
        display: block;
        margin-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
      }
      .hscroll__hint {
        font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3);
        span { display: inline-block; animation: nudge 1.6s var(--ease-io) infinite; }
      }
      .hscroll__progress {
        height: 1px; background: var(--line);
        span {
          display: block; height: 100%; background: var(--mineral); transform-origin: left;
          animation: grow linear both; animation-timeline: --caps; animation-range: contain 0% contain 100%;
        }
      }
    }
  }
  @keyframes caps-slide { to { translate: calc(-100% + 100vw) 0; } }
  @keyframes nudge { 50% { translate: 6px 0; } }

  /* ---------- giant footer wordmark ---------- */
  .megamark {
    overflow: clip; padding-top: clamp(40px, 8vw, 120px);
    view-timeline: --mega block;
  }
  .megamark__word {
    display: flex; justify-content: space-between; gap: .1em;
    padding-inline: var(--gutter);
    font-family: var(--f-display); text-transform: uppercase; line-height: .78;
    font-size: 12.2vw; letter-spacing: -.05em; white-space: nowrap;
    background: var(--chrome); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    translate: 0 12%;
    span:first-child { font-weight: 800; font-stretch: 112%; }
    span:last-child { font-weight: 200; font-stretch: 112%; }
  }
  @supports (animation-timeline: view()) {
    .megamark__word { animation: mega linear both; animation-timeline: --mega; animation-range: entry 0% entry 100%; }
  }
  @keyframes mega {
    from { translate: 0 70%; background-position: 100% 50%; opacity: 0; filter: blur(10px); }
    to { translate: 0 12%; background-position: 0% 50%; opacity: 1; filter: blur(0); }
  }
}

@layer motion {
  /* hero entrance waits for the preloader */
  html:not([data-loaded]) :is(.hero__title .line > span, .hero__lede, .hero__actions, .hero .overline, .brand-context, .status-pill) {
    animation-play-state: paused;
  }

  /* language / view swap: content blurs out and back in through a view transition */
  html::view-transition { pointer-events: none; } /* clicks keep reaching the page mid-transition */
  html.vt-swap::view-transition-old(root) { animation: lang-out .2s var(--ease-io) both; }
  html.vt-swap::view-transition-new(root) { animation: lang-in .35s var(--ease-out) both; }
  @keyframes lang-out { to { opacity: 0; filter: blur(8px); } }
  @keyframes lang-in { from { opacity: 0; filter: blur(8px); } }

  /* clip reveal on product frames */
  @supports (animation-timeline: view()) {
    .browser.reveal-scale { animation-name: clip-in; }
  }
  @keyframes clip-in {
    from { clip-path: inset(16% 10% 16% 10% round 48px); scale: .94; opacity: .35; }
    to { clip-path: inset(0 0 0 0 round 18px); scale: 1; opacity: 1; }
  }

  /* cards turn in 3D as they cross the pinned viewport (overrides .reveal) */
  @supports (animation-timeline: view()) {
    @media (width >= 900px) and (prefers-reduced-motion: no-preference) {
      .hscroll .cap {
        animation: none;
        rotate: y calc(var(--tilt, 0) * -24deg);
        scale: calc(1 - var(--tilt-abs, 0) * .1);
        opacity: calc(1 - var(--tilt-abs, 0) * .65);
      }
    }
  }

  /* stagger grid children */
  .metrics .metric:nth-child(2) { animation-range: entry 6% entry 61%; }
  .metrics .metric:nth-child(3) { animation-range: entry 12% entry 67%; }
  .metrics .metric:nth-child(4) { animation-range: entry 18% entry 73%; }
  .case__grid .case__block:nth-child(2) { animation-range: entry 8% entry 63%; }
  .case__grid .case__block:nth-child(3) { animation-range: entry 16% entry 71%; }

  @media (prefers-reduced-motion: reduce) {
    .loader { display: none; }
    .megamark__word { animation: none; }
    html:not([data-loaded]) * { animation-play-state: running !important; }
  }
}