/*
 * Combatwear Factory 3.8.0 — motion + modern presentation layer.
 *
 * Everything visual in this file is scoped under html.cf-motion. That class is
 * only added by JavaScript (see inc-motion.php) and is removed again by a
 * failsafe timer if motion.js never loads, so a visitor with JavaScript off —
 * or a broken asset — always sees the plain, fully visible 3.7.0 design.
 *
 * Nothing here changes layout, copy or markup. It adds:
 *   1. page-to-page transitions
 *   2. on-scroll reveal for content blocks
 *   3. lazy-image fade-in
 *   4. hover / focus micro-interactions
 *   5. header scroll state, reading progress and back-to-top
 */

:root{
  --cf-ease:cubic-bezier(.22,.61,.36,1);
  --cf-ease-out:cubic-bezier(.16,1,.3,1);
  --cf-reveal-dur:.66s;
}

/* ============================================================
   1. PAGE TO PAGE TRANSITIONS
   ============================================================ */

/* Native cross-document View Transitions (Chrome / Edge / Opera).
   The browser cross-fades the outgoing and incoming document itself, so the
   navigation never flashes white. */
@view-transition{navigation:auto}

@keyframes cfVtOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
@keyframes cfVtIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

::view-transition-old(root){animation:cfVtOut .26s var(--cf-ease) both}
::view-transition-new(root){animation:cfVtIn .44s var(--cf-ease-out) both}

/* The masthead and footer stay put instead of sliding with the body. */
html.cf-motion .site-header{view-transition-name:cf-header}
html.cf-motion .site-footer{view-transition-name:cf-footer}
::view-transition-old(cf-header),::view-transition-new(cf-header),
::view-transition-old(cf-footer),::view-transition-new(cf-footer){animation:none;mix-blend-mode:normal}

/* Fallback for browsers without cross-document view transitions (Safari,
   Firefox): motion.js adds .cf-fade-nav and handles the click itself. */
@keyframes cfPageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
html.cf-motion.cf-fade-nav #main-content{animation:cfPageIn .55s var(--cf-ease-out) both}
html.cf-motion.cf-fade-nav body{transition:opacity .22s ease}
html.cf-motion.cf-fade-nav.cf-leaving body{opacity:0}

/* ============================================================
   2. ON-SCROLL REVEAL
   ============================================================ */

html.cf-motion :is(
  .section-head,
  .card,
  .gtile,
  .rail-card,
  .contact-card,
  .answer-block,
  .keyword-intro,
  .related-links,
  .notice,
  .split>.checklist,
  .spec-table,
  .table-scroll,
  .faq details,
  .cta,
  .cf-inquiry-intro,
  .cf-inquiry-form,
  .map-wrap,
  .fullbleed,
  .cf-proof-strip li,
  .prose>h2,
  .footer-grid>div
){
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--cf-reveal-dur) var(--cf-ease-out),transform var(--cf-reveal-dur) var(--cf-ease-out);
  transition-delay:calc(var(--cf-i,0) * 75ms);
}

html.cf-motion :is(
  .section-head,.card,.gtile,.rail-card,.contact-card,.answer-block,.keyword-intro,
  .related-links,.notice,.split>.checklist,.spec-table,.table-scroll,.faq details,
  .cta,.cf-inquiry-intro,.cf-inquiry-form,.map-wrap,.fullbleed,.cf-proof-strip li,
  .prose>h2,.footer-grid>div
).cf-in{opacity:1;transform:translateY(0)}

/* The hero and the banner slider run their own entrance, and the slider must
   never have its track transformed by anything else. */
html.cf-motion .hero :is(.card,.gtile,.section-head,.cf-proof-strip li),
html.cf-motion .cf-slider :is(.card,.gtile,.section-head){opacity:1;transform:none;transition:none}

/* Checklist rows tick in one after another. */
html.cf-motion .checklist li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--cf-ease-out),transform .5s var(--cf-ease-out);transition-delay:calc(var(--cf-i,0) * 55ms)}
html.cf-motion .checklist.cf-in li,html.cf-motion .checklist li.cf-in{opacity:1;transform:none}
html.cf-motion .checklist li:before{transition:transform .35s var(--cf-ease-out);transition-delay:calc(var(--cf-i,0) * 55ms + 120ms)}
html.cf-motion .checklist li:not(.cf-in):before{transform:scale(0)}

/* ============================================================
   3. LAZY IMAGE FADE-IN
   ============================================================ */

html.cf-motion img.cf-img{opacity:0;transition:opacity .55s ease}
html.cf-motion img.cf-img.cf-loaded{opacity:1}

/* ============================================================
   4. HERO
   ============================================================ */

@keyframes cfHeroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes cfGlow{0%{opacity:.55;transform:translate3d(0,0,0) scale(1)}100%{opacity:.9;transform:translate3d(-3%,4%,0) scale(1.12)}}

html.cf-motion .hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#15191c 0%,#1a2025 52%,#2b1417 100%);
}
html.cf-motion .hero:before{
  content:"";
  position:absolute;
  top:-30%;right:-10%;
  width:70%;height:150%;
  background:radial-gradient(circle at 60% 40%,rgba(188,32,44,.30),rgba(188,32,44,0) 62%);
  animation:cfGlow 14s ease-in-out infinite alternate;
  pointer-events:none;
}
/* A faint diagonal weave, echoing gi fabric, behind the copy. */
html.cf-motion .hero:after{
  content:"";
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 1px,transparent 1px 9px);
  pointer-events:none;
}
html.cf-motion .hero>*{position:relative;z-index:1}

html.cf-motion .hero .hero-grid>*:not(.hero-card)>*,
html.cf-motion .hero .hero-grid>.hero-card{animation:cfHeroIn .8s var(--cf-ease-out) both}
html.cf-motion .hero .hero-grid>*:not(.hero-card)>*:nth-child(1){animation-delay:.05s}
html.cf-motion .hero .hero-grid>*:not(.hero-card)>*:nth-child(2){animation-delay:.13s}
html.cf-motion .hero .hero-grid>*:not(.hero-card)>*:nth-child(3){animation-delay:.21s}
html.cf-motion .hero .hero-grid>*:not(.hero-card)>*:nth-child(4){animation-delay:.29s}
html.cf-motion .hero .hero-grid>*:not(.hero-card)>*:nth-child(n+5){animation-delay:.36s}
html.cf-motion .hero .hero-grid>.hero-card{animation-delay:.22s}

html.cf-motion .hero .eyebrow:before{transform-origin:left;animation:cfLineGrow .7s var(--cf-ease-out) .35s both}
@keyframes cfLineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Hero image sits on a soft shadow and lifts a touch on hover. */
html.cf-motion .hero-media{transition:transform .5s var(--cf-ease-out),box-shadow .5s var(--cf-ease-out)}
@media(hover:hover){html.cf-motion .hero-media:hover{transform:translateY(-4px);box-shadow:0 26px 52px rgba(0,0,0,.32)}}

/* ============================================================
   5. HEADER: scroll state + reading progress
   ============================================================ */

html.cf-motion .site-header{transition:box-shadow .3s ease,background-color .3s ease}
html.cf-motion .header-inner{transition:min-height .3s var(--cf-ease)}
html.cf-motion.cf-scrolled .site-header{box-shadow:0 8px 28px rgba(15,20,23,.10);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px)}
html.cf-motion.cf-scrolled .header-inner{min-height:74px}
@media(max-width:1140px){html.cf-motion.cf-scrolled .header-inner{min-height:70px}}
@media(max-width:620px){html.cf-motion.cf-scrolled .header-inner{min-height:64px}}

/* Reading progress, drawn on the header's own bottom edge. */
html.cf-motion .site-header:after{
  content:"";
  position:absolute;left:0;bottom:-1px;height:2px;
  width:var(--cf-progress,0%);
  background:linear-gradient(90deg,var(--accent),#e8555f);
  transition:width .1s linear;
  pointer-events:none;
}

/* Navigation: a growing accent underline instead of a flat colour swap. */
html.cf-motion .nav>a:not(.btn),html.cf-motion .nav summary,html.cf-motion .cf-menu>li>a{position:relative}
html.cf-motion :is(.nav>a:not(.btn),.nav summary,.cf-menu>li>a):before{
  content:"";
  position:absolute;left:10px;right:10px;bottom:5px;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--cf-ease-out);
}
html.cf-motion :is(.nav>a:not(.btn),.nav summary,.cf-menu>li>a):hover:before,
html.cf-motion .nav details[open]>summary:before,
html.cf-motion .nav a[aria-current="page"]:not(.btn):before{transform:scaleX(1)}
@media(max-width:1140px){html.cf-motion :is(.nav>a:not(.btn),.nav summary,.cf-menu>li>a):before{display:none}}

/* Dropdown panels fade down rather than snapping open. */
@keyframes cfDropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1141px){
  html.cf-motion .nav details[open]>div,
  html.cf-motion .cf-menu li:hover>.sub-menu,
  html.cf-motion .cf-menu li:focus-within>.sub-menu{animation:cfDropIn .22s var(--cf-ease-out) both}
}

/* Mobile menu slides in, its rows staggering behind it. */
@keyframes cfMenuIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1140px){
  html.cf-motion .nav.open{animation:cfMenuIn .26s var(--cf-ease-out) both}
  html.cf-motion .nav.open>*{animation:cfMenuIn .3s var(--cf-ease-out) both}
  html.cf-motion .nav.open>*:nth-child(1){animation-delay:.03s}
  html.cf-motion .nav.open>*:nth-child(2){animation-delay:.06s}
  html.cf-motion .nav.open>*:nth-child(3){animation-delay:.09s}
  html.cf-motion .nav.open>*:nth-child(4){animation-delay:.12s}
  html.cf-motion .nav.open>*:nth-child(5){animation-delay:.15s}
  html.cf-motion .nav.open>*:nth-child(n+6){animation-delay:.18s}
  html.cf-motion .menu-toggle{transition:background .2s ease,color .2s ease,border-color .2s ease}
}

/* ============================================================
   6. BUTTONS
   ============================================================ */

html.cf-motion .btn{position:relative;overflow:hidden;isolation:isolate}
html.cf-motion .btn:after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.30) 50%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .75s var(--cf-ease-out);
  pointer-events:none;
}
@media(hover:hover){
  html.cf-motion .btn:hover:after{transform:translateX(130%)}
  html.cf-motion .btn:hover{transform:translateY(-2px)}
}
html.cf-motion .btn:active{transform:translateY(0)}
html.cf-motion .btn-primary:hover{box-shadow:0 10px 24px rgba(188,32,44,.28)}
html.cf-motion .btn-wa:hover{box-shadow:0 10px 24px rgba(23,109,67,.26)}

/* Arrow links nudge forward. */
html.cf-motion .card a:not(.btn),html.cf-motion .contact-link{transition:color .2s ease,transform .25s var(--cf-ease-out);display:inline-block}
@media(hover:hover){
  html.cf-motion .card:hover a:not(.btn),html.cf-motion .contact-card:hover .contact-link{transform:translateX(4px)}
}

/* ============================================================
   7. CARDS, TILES AND GALLERIES
   ============================================================ */

/* The reveal rules above set transform on .card, so the hover lift is restated
   here at a higher specificity instead of being overwritten. */
@media(hover:hover){
  html.cf-motion .card.cf-in:hover{transform:translateY(-5px);border-color:#c8ccca;box-shadow:0 18px 40px rgba(19,25,29,.11)}
  html.cf-motion .contact-card.cf-in:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(19,25,29,.11)}
  html.cf-motion .gtile.cf-in:hover{transform:translateY(-4px)}
  html.cf-motion .rail-card.cf-in:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(19,25,29,.09)}
}

/* An accent rule draws itself across the top of a card on hover. */
html.cf-motion .card{position:relative}
html.cf-motion .card:before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--cf-ease-out);
  border-radius:var(--cf-radius) var(--cf-radius) 0 0;
  z-index:2;
}
@media(hover:hover){html.cf-motion .card:hover:before{transform:scaleX(1)}}

/* Product photography inside a media card is already clipped by the card, so
   it can zoom safely. */
html.cf-motion .card-with-media img.card-media{transition:transform .6s var(--cf-ease-out)}
@media(hover:hover){html.cf-motion .card-with-media:hover img.card-media{transform:scale(1.05)}}

html.cf-motion .gtile img{transition:box-shadow .35s ease,transform .45s var(--cf-ease-out)}
@media(hover:hover){html.cf-motion .gtile:hover img{box-shadow:0 16px 34px rgba(19,25,29,.14)}}

/* Zoomable photographs advertise themselves on hover. */
html.cf-motion .zoom img{cursor:zoom-in}
@media(hover:hover){html.cf-motion .zoom:hover img{transform:scale(1.02)}}

/* ============================================================
   8. FAQ, TABLES AND FORMS
   ============================================================ */

@keyframes cfFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
html.cf-motion .faq details[open]>*:not(summary){animation:cfFaqIn .32s var(--cf-ease-out) both}
html.cf-motion .faq summary{transition:color .2s ease}
html.cf-motion .faq summary:after{transition:color .2s ease}
@media(hover:hover){html.cf-motion .faq summary:hover{color:var(--accent)}}

html.cf-motion .spec-table tbody tr{transition:background-color .2s ease}
@media(hover:hover){html.cf-motion .spec-table tbody tr:hover{background-color:#faf7f6}}

html.cf-motion :is(.field input,.field select,.field textarea){transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
html.cf-motion :is(.field input,.field select,.field textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(188,32,44,.13);outline-offset:2px}

html.cf-motion .cf-inquiry-form{transition:opacity var(--cf-reveal-dur) var(--cf-ease-out),transform var(--cf-reveal-dur) var(--cf-ease-out),box-shadow .35s ease}
@media(hover:hover){html.cf-motion .cf-inquiry-form.cf-in:focus-within{box-shadow:0 18px 44px rgba(19,25,29,.10)}}

/* ============================================================
   9. FLOATING CONTROLS
   ============================================================ */

/* WhatsApp button breathes in once, then reacts to hover only. */
@keyframes cfFloatIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
html.cf-motion .cf-wa-float{animation:cfFloatIn .5s var(--cf-ease-out) 1.1s both;transition:transform .25s var(--cf-ease-out),background-color .2s ease,box-shadow .25s ease}
@media(hover:hover){html.cf-motion .cf-wa-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 34px rgba(23,109,67,.36)}}

/* Back to top — bottom left, so it never collides with WhatsApp. */
html.cf-motion .cf-top{
  position:fixed;
  left:max(18px,env(safe-area-inset-left));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:880;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #3c4348;
  border-radius:50%;
  background:rgba(21,25,28,.88);
  color:#fff;
  cursor:pointer;
  padding:0;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;
  transform:translateY(14px);
  transition:opacity .3s ease,transform .3s var(--cf-ease-out),visibility .3s,background-color .2s ease;
}
html.cf-motion .cf-top svg{width:18px;height:18px;display:block}
html.cf-motion.cf-show-top .cf-top{opacity:1;visibility:visible;transform:translateY(0)}
@media(hover:hover){html.cf-motion .cf-top:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}}
@media(max-width:620px){html.cf-motion .cf-top{width:42px;height:42px}}

/* Lightbox opens with a short zoom instead of appearing instantly. */
@keyframes cfBoxIn{from{opacity:0}to{opacity:1}}
@keyframes cfBoxImgIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
html.cf-motion .cf-lightbox.open{animation:cfBoxIn .22s ease both}
html.cf-motion .cf-lightbox.open img{animation:cfBoxImgIn .34s var(--cf-ease-out) both}

/* Slider dots and arrows respond a little more visibly. */
html.cf-motion .cf-arrow,html.cf-motion .cf-pause{transition:background-color .2s ease,border-color .2s ease,transform .2s var(--cf-ease-out)}
@media(hover:hover){html.cf-motion .cf-arrow:hover,html.cf-motion .cf-pause:hover{transform:scale(1.06);border-color:var(--accent)}}

/* Footer links slide slightly on hover. */
html.cf-motion .site-footer a{transition:color .2s ease,padding-left .2s var(--cf-ease-out)}
@media(hover:hover){html.cf-motion .footer-grid a:hover{padding-left:4px}}

/* Skip link keeps its instant behaviour — no motion on an accessibility affordance. */
html.cf-motion .skip-link{transition:none}

/* ============================================================
   10. REDUCED MOTION — everything visible, nothing moves.
   ============================================================ */

@media(prefers-reduced-motion:reduce){
  html.cf-motion *,html.cf-motion *:before,html.cf-motion *:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html.cf-motion :is(.section-head,.card,.gtile,.rail-card,.contact-card,.answer-block,
    .keyword-intro,.related-links,.notice,.split>.checklist,.spec-table,.table-scroll,
    .faq details,.cta,.cf-inquiry-intro,.cf-inquiry-form,.map-wrap,.fullbleed,
    .cf-proof-strip li,.prose>h2,.footer-grid>div,.checklist li){opacity:1!important;transform:none!important}
  html.cf-motion .checklist li:before{transform:none!important}
  html.cf-motion img.cf-img{opacity:1!important}
  html.cf-motion .hero:before{animation:none!important}
  @view-transition{navigation:none}
}

/* Printing keeps the plain document. */
@media print{
  html.cf-motion *{opacity:1!important;transform:none!important;animation:none!important}
  html.cf-motion .cf-top,html.cf-motion .cf-wa-float{display:none!important}
}