/* ═══════════════════════════════════════════════════════════════════
   texas-home-scroll.css · TX-HOME-MOTION v5 "CSS-NATIVE" · 2026-08-18
   Replaces the JS engine entirely. Scroll choreography via native CSS
   view() timelines (2026 universal support): every element tracks its
   OWN viewport position, progress is glued to the wheel, runs on the
   compositor — zero main-thread work, zero JS, zero conflicts.
   Old browsers: @supports gate → untouched page. Reduced motion: off.
   Scope: orphan sections only (map 17/08) — never hero/txfx/AOS nodes.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────── scroll choreography (modern browsers only) ─────────── */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* THE IGNITION KEYS (18/08 forensic + CC audit /root/main-overflow-audit.md):
     two timeline traps sit between the cells and the real scroller -
     (1) div.main{overflow:hidden} and (2) html,body{overflow-x:hidden
     !important} (forest-global:548) which makes body itself a formal
     scroll container. overflow:clip clips identically but is NOT a
     scroll container, so view() falls through to the viewport.
     HOMEPAGE-SCOPED ONLY (body.cms-index-index): the PDP sticky gallery
     anchors to .main-as-scroll-container today - we must not change it.
     Inside @supports+reduced-motion gates: old browsers see nothing. */
  body.cms-index-index div.main{overflow:clip !important;}
  body.cms-index-index{overflow-x:clip !important;}

  /* — best sellers: each cell rises, straightens and solidifies as IT
       enters; diagonal wave from per-column range offsets — */
  section.tx-hp .tx-hp-cell{
    animation: txcs-cell linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
  section.tx-hp .tx-hp-cell:nth-child(4n+2){animation-range: entry 4% cover 26%;}
  section.tx-hp .tx-hp-cell:nth-child(4n+3){animation-range: entry 8% cover 30%;}
  section.tx-hp .tx-hp-cell:nth-child(4n)  {animation-range: entry 12% cover 34%;}
  @keyframes txcs-cell{
    from{opacity:.25; transform:translateY(84px) scale(.9) rotate(1.8deg);}
    to  {opacity:1;   transform:translateY(0)    scale(1)  rotate(0);}
  }

  /* — category cards: cinematic 3D lift — */
  section.txf-feat .txf-card{
    animation: txcs-card linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
    transform-origin: 50% 100%;
  }
  @keyframes txcs-card{
    from{opacity:.25; transform:perspective(900px) translateY(110px) rotateX(14deg) scale(.94);}
    to  {opacity:1;   transform:perspective(900px) translateY(0)     rotateX(0)     scale(1);}
  }
  /* the image inside un-zooms in sync with the scroll */
  section.txf-feat .txf-card__media{overflow:hidden;}
  section.txf-feat .txf-card__media img{
    animation: txcs-img linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes txcs-img{
    from{transform:scale(1.22);}
    to  {transform:scale(1.05);}
  }

  /* — client logos strip — */
  section.tx-brands{
    animation: txcs-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }
  @keyframes txcs-rise{
    from{opacity:0; transform:translateY(44px);}
    to  {opacity:1; transform:translateY(0);}
  }

  /* — section title: rises, gold kicker draws itself with the scroll — */
  h2.tx-hp__title{
    animation: txcs-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  h2.tx-hp__title::after{
    content:""; display:block; width:64px; height:3px; border-radius:2px;
    background:#F1D651; margin-top:10px; transform-origin:right center;
    animation: txcs-kick linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 45%;
  }
  @keyframes txcs-kick{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

  /* ───────── mobile theme (own sections) ───────── */
  @media (max-width: 991px){
    .tx-mhome-banners .tx-mhome-banner{
      animation: txcs-card linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 36%;
      transform-origin: 50% 100%;
      overflow:hidden;
    }
    .tx-mhome-banner img{
      animation: txcs-img linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 52%;
    }
    .home-section.prod-section{
      animation: txcs-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    h3.top-products__header::after{
      content:""; display:block; width:56px; height:3px; border-radius:2px;
      background:#F1D651; margin:8px auto 0; transform-origin:center;
      animation: txcs-kick linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 50%;
    }
  }

} /* reduced-motion gate */
} /* @supports gate */

/* ─────────── hover layer (mouse devices, all browsers) ───────────
   No cursor tracking, no JS: pure :hover. Product card lifts on a
   forest shadow with a light sweep; category media breathes. */
@media (hover: hover) and (pointer: fine){

  .tx-hp-cell{
    transition: transform .45s cubic-bezier(.16,.8,.24,1),
                box-shadow .45s cubic-bezier(.16,.8,.24,1);
    position: relative;
  }
  .tx-hp-cell:hover{
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 26px 54px -20px rgba(0,61,41,.45);
    z-index: 5;
  }
  /* diagonal light sweep across the card */
  .tx-hp-cell::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
    background:linear-gradient(115deg,
      transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
    background-size:240% 100%; background-position:135% 0;
    transition:background-position .9s cubic-bezier(.16,.8,.24,1);
  }
  .tx-hp-cell:hover::after{ background-position:-35% 0; }

  section.txf-feat .txf-card__media{
    transition: transform .6s cubic-bezier(.16,.8,.24,1);
  }
  section.txf-feat .txf-card:hover .txf-card__media{ transform: scale(1.045); }
}