/* ============================================================
   AAG HTV Tees — FX LAYER (additive only)
   Loaded AFTER site.css. Never edits base layout, copy, prices,
   the order form or the menu. If this file fails to load, the
   site looks and works exactly as before. Transform/opacity only
   — zero layout shift. No fixed positioning, no 100vw, no
   backdrop-filter, nothing above the header (z-index 100).
   ============================================================ */

/* --- Nav: gold underline draw (not the CTA button) --- */
.main-nav a:not(.nav-cta){position:relative}
.main-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.main-nav a:not(.nav-cta):hover::after,.main-nav a:not(.nav-cta):focus-visible::after{transform:scaleX(1)}

/* --- Buttons: gold fill sweep (translucent, text stays readable) --- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-130%);transition:transform .6s ease;pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(130%)}
.btn.fx-mag-leave{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}

/* --- Cards: image scale + shine sweep + tag lift --- */
.card{position:relative}
.card .imgwrap{overflow:hidden}
.card .imgwrap img{transition:transform .6s ease}
.card:hover .imgwrap img{transform:scale(1.05)}
.card .imgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);transform:translateX(-130%);transition:transform .8s ease;pointer-events:none}
.card:hover .imgwrap::after{transform:translateX(130%)}
.tag{transition:transform .25s ease}
.card:hover .tag{transform:translateY(-2px)}
.view-toggle{z-index:2}

/* --- 3D tilt cards (JS-driven; .fx-leaving gives the spring back) --- */
.fx-tilt{will-change:transform}
.fx-tilt.fx-leaving{transition:transform .55s cubic-bezier(.34,1.4,.64,1)}
.fx-shine{position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 65%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}

/* --- 3D flip views (WAAPI-driven from fx.js; perspective only) --- */
.imgwrap{perspective:1000px}
.imgwrap img.view{backface-visibility:hidden;transform-style:preserve-3d}
.imgwrap.fx-flipping{overflow:hidden}

/* --- Hero: shimmer headline + drawing underline + float --- */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
.hero h1{position:relative}
.hero h1::after{content:"";position:absolute;left:0;bottom:-.55rem;height:3px;width:9rem;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:fx-underline 1s .9s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes fx-underline{to{transform:scaleX(1)}}
.hero h1 .gold{background:linear-gradient(100deg,var(--gold) 20%,#F6E27A 40%,var(--gold) 60%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shimmer 2.4s .2s ease forwards}
@keyframes fx-shimmer{0%{background-position:200% center}100%{background-position:0% center}}
@media(min-width:901px){
  .hero-img img{animation:fx-float 7s ease-in-out infinite}
}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* --- Scroll reveals (only when fx.js adds html.fx-on) --- */
html.fx-on .fx-reveal{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--fx-i,0)*70ms)}
html.fx-on .fx-reveal.fx-in{opacity:1;transform:none}
html.fx-on .fx-reveal.fx-tilt{transition:opacity .7s ease}
html.fx-on .fx-reveal.fx-tilt.fx-leaving{transition:opacity .7s ease,transform .55s cubic-bezier(.34,1.4,.64,1)}

/* --- Section divider: gold line draws when the section enters --- */
.sec h2{position:relative}
.sec h2::after{content:"";position:absolute;left:0;bottom:-.55rem;height:2px;width:64px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s}
.sec.fx-in h2::after{transform:scaleX(1)}

/* --- Marquee (injected by fx.js after .hero; pure CSS motion) --- */
.fx-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#000;padding:.8rem 0}
.fx-marquee-track{display:flex;width:max-content;animation:fx-marquee 26s linear infinite;will-change:transform}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused}
.fx-mi{font-family:Oswald,sans-serif;font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-right:2.5rem;white-space:nowrap}
.fx-mi b{color:var(--mut);font-weight:400}
@keyframes fx-marquee{to{transform:translateX(-50%)}}

/* --- Cursor glow (absolute, scroll-synced by fx.js; never fixed) --- */
.fx-glow{position:absolute;top:0;left:0;width:320px;height:320px;background:radial-gradient(circle,rgba(212,175,55,.14),rgba(212,175,55,.05) 40%,transparent 70%);mix-blend-mode:screen;pointer-events:none;z-index:1}

/* --- Gold dust canvas (hero only) --- */
.fx-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* --- Mobile gates: parallax/tilt/magnetic/glow/dust are JS-gated off;
       shimmer + underline settle to their end states on small screens --- */
@media(max-width:900px){
  .fx-marquee-track{animation-duration:44s}
  .hero h1 .gold{animation:none}
  .hero h1::after{animation:none;transform:scaleX(1)}
}

/* --- Reduced motion: everything settles, nothing hides --- */
@media(prefers-reduced-motion:reduce){
  .fx-marquee-track,.hero-img img,.hero h1 .gold,.hero h1::after{animation:none!important}
  .hero h1::after{transform:scaleX(1)}
  .card .imgwrap img,.btn::after,.card .imgwrap::after,.tag,.sec h2::after{transition:none!important}
}