/* ============================================================
   PANTHER ATHLETICS — DESIGN ENRICHMENT LAYER
   Motion, depth, texture & micro-interactions (no libraries)
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
.pa-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#CC0000,#ff3333);z-index:500;pointer-events:none;transition:width .1s linear}

/* ---------- Scroll reveal ---------- */
.pa-rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--rvd,0ms)}
.pa-rv.pa-in{opacity:1;transform:translateY(0)}
.pa-rv-left{opacity:0;transform:translateX(-32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--rvd,0ms)}
.pa-rv-left.pa-in{opacity:1;transform:translateX(0)}

/* ---------- Hero kinetic typography ---------- */
.pa-ht-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.pa-ht-in{display:inline-block;transform:translateY(112%);animation:paHtUp 1s cubic-bezier(.16,1,.3,1) forwards}
.pa-ht-line:nth-child(1) .pa-ht-in{animation-delay:.15s}
.pa-ht-line:nth-child(2) .pa-ht-in{animation-delay:.28s}
.pa-ht-line:nth-child(3) .pa-ht-in{animation-delay:.41s}
.pa-ht-line:nth-child(4) .pa-ht-in{animation-delay:.54s}
@keyframes paHtUp{to{transform:translateY(0)}}
.pa-hero-anim .hero-label{animation:paFadeUp .8s cubic-bezier(.16,1,.3,1) .05s backwards}
.pa-hero-anim .hero-sub{animation:paFadeUp .8s cubic-bezier(.16,1,.3,1) .55s backwards}
.pa-hero-anim .hero-badges{animation:paFadeUp .8s cubic-bezier(.16,1,.3,1) .7s backwards}
.pa-hero-anim .hero-ctas{animation:paFadeUp .8s cubic-bezier(.16,1,.3,1) .85s backwards}
.pa-hero-anim .hero-trust{animation:paFadeUp .8s cubic-bezier(.16,1,.3,1) 1s backwards}
@keyframes paFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Hero scroll indicator ---------- */
.pa-scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.55);font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;pointer-events:none;animation:paFadeUp 1s 1.4s backwards}
.pa-scroll-hint::after{content:'';width:1px;height:34px;background:linear-gradient(to bottom,#CC0000,transparent);animation:paDrip 1.8s ease-in-out infinite}
@keyframes paDrip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:768px){.pa-scroll-hint{display:none}}

/* ---------- Marquee strip ---------- */
.pa-marquee{background:#0a0a0a;border-top:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c;overflow:hidden;padding:18px 0;position:relative}
.pa-marquee::before,.pa-marquee::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.pa-marquee::before{left:0;background:linear-gradient(to right,#0a0a0a,transparent)}
.pa-marquee::after{right:0;background:linear-gradient(to left,#0a0a0a,transparent)}
.pa-marquee-track{display:flex;width:max-content;animation:paMarquee 28s linear infinite}
.pa-marquee:hover .pa-marquee-track{animation-play-state:paused}
.pa-marquee-item{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;letter-spacing:3px;text-transform:uppercase;white-space:nowrap;padding:0 28px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45);display:flex;align-items:center;gap:56px}
.pa-marquee-item::after{content:'◆';color:#CC0000;-webkit-text-stroke:0;font-size:9px}
@keyframes paMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Section textures ---------- */
.pa-tex-dark{background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)!important;background-size:44px 44px!important;background-color:#0e0e0e}
.pa-tex-light{background-image:linear-gradient(rgba(0,0,0,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.028) 1px,transparent 1px)!important;background-size:44px 44px!important}

/* ---------- Watermark typography ---------- */
.pa-wm-host{position:relative;overflow:hidden}
.pa-wm{position:absolute;top:6px;right:-10px;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(110px,16vw,230px);line-height:.8;text-transform:uppercase;letter-spacing:-4px;pointer-events:none;user-select:none;z-index:0;color:transparent}
.pa-wm.dark{-webkit-text-stroke:1px rgba(255,255,255,.05)}
.pa-wm.light{-webkit-text-stroke:1px rgba(0,0,0,.055)}
.pa-wm-host>*:not(.pa-wm){position:relative;z-index:1}

/* ---------- Diagonal divider ---------- */
.pa-diag{height:56px;background:#0a0a0a;clip-path:polygon(0 100%,100% 0,100% 100%);position:relative;margin-top:-1px}
.pa-diag.flip{clip-path:polygon(0 0,100% 100%,0 100%)}
.pa-diag.red-edge::after{content:'';position:absolute;inset:0;background:#CC0000;clip-path:polygon(0 100%,100% 78%,100% 100%)}

/* ---------- Button shine ---------- */
.btn-primary,.btn-nav,.video-break-cta,.cat-main-cta,.newsletter-btn,.add-to-cart,.sticky-add-btn{position:relative;overflow:hidden}
.btn-primary::before,.btn-nav::before,.video-break-cta::before,.cat-main-cta::before,.newsletter-btn::before{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn-primary:hover::before,.btn-nav:hover::before,.video-break-cta:hover::before,.cat-main-cta:hover::before,.newsletter-btn:hover::before{left:130%}

/* ---------- Card lift micro-interactions ---------- */
.why-card,.review-card,.resource-card,.brand-card,.science-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background .2s}
.why-card:hover,.review-card:hover,.resource-card:hover,.brand-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.1)}
.science-card{position:relative}
.science-card::after{content:'';position:absolute;left:0;top:0;width:3px;height:0;background:#CC0000;transition:height .4s ease}
.science-card:hover::after{height:100%}
.science-card:hover{transform:none;background:#141414}
.review-card{border-top:3px solid transparent}
.review-card:hover{border-top-color:#CC0000}
.spec-row{transition:padding-left .25s ease,background .25s ease}
.spec-row:hover{padding-left:10px;background:rgba(204,0,0,.05)}
.faq-q{transition:color .2s,padding-left .25s ease}
.faq-item:hover .faq-q{padding-left:8px}
.trust-item svg{transition:transform .3s ease}
.trust-item:hover svg{transform:scale(1.25)}
.fed-badge,.hero-badge,.feature-chip,.cat-main-spec{transition:border-color .25s,color .25s}
.fed-badge:hover,.hero-badge:hover,.feature-chip:hover{border-color:#CC0000;color:#fff}

/* ---------- Stat strip pulse divider ---------- */
.stat-strip{position:relative}
.stat-strip::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#CC0000,transparent);opacity:.7}

/* ---------- Comparison table row reveal ---------- */
.compare-table tbody tr.pa-rv-left{display:table-row}

/* ---------- Image treatments ---------- */
.lifestyle-full img,.video-break-player{will-change:transform}
.resource-card-img{position:relative}
.resource-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(204,0,0,.18),transparent 50%);opacity:0;transition:opacity .35s}
.resource-card:hover .resource-card-img::after{opacity:1}

/* ---------- Newsletter depth ---------- */
.newsletter{position:relative;overflow:hidden}
.newsletter::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(0,0,0,.18),transparent 55%),radial-gradient(circle at 15% 85%,rgba(0,0,0,.14),transparent 50%);pointer-events:none}
.newsletter>*{position:relative;z-index:1}

/* ---------- Footer top accent ---------- */
footer{position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#CC0000 0%,#CC0000 30%,transparent 30.2%)}

/* ---------- Reviews: snap carousel on mobile ---------- */
@media(max-width:768px){
  .reviews-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .reviews-grid .review-card{flex:0 0 84%;scroll-snap-align:center}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .pa-rv,.pa-rv-left{opacity:1!important;transform:none!important;transition:none!important}
  .pa-ht-in{animation:none!important;transform:none!important}
  .pa-hero-anim .hero-label,.pa-hero-anim .hero-sub,.pa-hero-anim .hero-badges,.pa-hero-anim .hero-ctas,.pa-hero-anim .hero-trust{animation:none!important}
  .pa-marquee-track{animation:none!important}
  .pa-scroll-hint{display:none}
}