/* =====================================================================
   StyleHaul motion system
   One set of durations + easings used everywhere. Everything animates
   transform / opacity / translate only (GPU-friendly, no layout shift).
   Reveal states only exist when motion.js has run AND the visitor
   allows motion, so content is never hidden without JavaScript.
   ===================================================================== */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);     /* reveals, lifts */
  --ease-in-out:cubic-bezier(.65,0,.35,1);  /* ambient loops */
  --dur-fast:180ms;                          /* press, small hovers */
  --dur-base:320ms;                          /* hovers, color, shadow */
  --dur-reveal:800ms;                        /* scroll + entrance reveals */
  --lift:-4px;
  --glow-accent:rgba(224,85,90,.35);
}

/* Guard against any sideways overflow from slide-ins (clip keeps sticky nav working) */
html,body{overflow-x:clip}

/* ---------- 1. Reveal primitives (fade-up, fade-in, slide-left, slide-right, scale-in) ---------- */
/* Hidden state (applies instantly, so nothing fades OUT on load). When .is-in is
   added the overrides disappear and the element transitions back to its OWN
   opacity/transform, so elements designed at e.g. 55% opacity stay at 55%. */
html.has-motion [data-reveal]:not(.is-in){opacity:0;transition:none}
html.has-motion [data-reveal="fade-up"]:not(.is-in){transform:translate3d(0,26px,0)}
html.has-motion [data-reveal="slide-left"]:not(.is-in){transform:translate3d(36px,0,0)}   /* enters moving left */
html.has-motion [data-reveal="slide-right"]:not(.is-in){transform:translate3d(-36px,0,0)} /* enters moving right */
html.has-motion [data-reveal="scale-in"]:not(.is-in){transform:scale(.955)}
/* fade-in: opacity only */
html.has-motion [data-reveal].is-in{
  transition:opacity var(--dur-reveal) var(--ease-out) var(--d,0ms),
             transform var(--dur-reveal) var(--ease-out) var(--d,0ms);
}

/* ---------- 2. Navbar: glassier + shadow once the page scrolls ---------- */
.nav{transition:background-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.nav.is-scrolled{
  background:rgba(20,20,22,.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:0 12px 32px -18px rgba(0,0,0,.75);
}
.logo{transition:opacity var(--dur-base) var(--ease-out)}
.logo:hover{opacity:.85}
/* nav link underline that grows from the left */
.nav-links a:not(.btn){position:relative;transition:color var(--dur-base) var(--ease-out)}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
/* mobile menu drops in */
.nav-links.open{animation:menu-in var(--dur-base) var(--ease-out)}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 3. Buttons: lift, glow, shine sweep, press ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 50%,transparent 75%);
  transform:translateX(-130%);
}
.btn-ghost::after{background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.12) 50%,transparent 75%)}
.btn svg{transition:transform var(--dur-base) var(--ease-out)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover::after{transform:translateX(130%);transition:transform 750ms var(--ease-out)}
  .btn:hover svg{transform:translateX(3px)}
  .btn-primary:hover,.btn-deep:hover{box-shadow:0 10px 28px -10px var(--glow-accent),0 0 0 1px rgba(255,255,255,.06) inset}
  .btn-ghost:hover{box-shadow:0 8px 24px -14px rgba(255,255,255,.25)}
}
.btn:active{transform:translateY(0) scale(.97);transition-duration:90ms}
.news-row button{transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.news-row button:not(:disabled):hover{box-shadow:0 8px 22px -10px var(--glow-accent)}
.news-row button:not(:disabled):active{transform:scale(.96)}
.news-row input{transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.news-row input:focus{border-color:#5a5a62;box-shadow:0 0 0 3px rgba(224,85,90,.18);outline:none}

/* ---------- 4. Cards: hover-lift with soft glow ---------- */
.ov-card,.value-card,.yt-cardbox,.brand-grid,.creator-card{
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out);
}
.client-card{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.yt-ico,.yt-check,.ov-num{transition:transform var(--dur-base) var(--ease-out)}
@media (hover:hover){
  .ov-card:hover,.value-card:hover,.yt-cardbox:hover{
    transform:translateY(var(--lift)) scale(1.01);
    border-color:#46464c;background-color:#232326;
    box-shadow:0 22px 44px -24px rgba(0,0,0,.8),0 0 0 1px rgba(224,85,90,.14),0 0 36px -18px var(--glow-accent);
  }
  .yt-cardbox:hover .yt-ico{transform:translateY(-3px) scale(1.06)}
  .ov-card:hover .ov-num{transform:translateX(3px)}
  .yt-cols > div:hover .yt-check{transform:scale(1.08) rotate(-6deg)}
  .client-card:hover{transform:translateY(var(--lift)) scale(1.012);box-shadow:0 20px 40px -22px rgba(0,0,0,.85),0 0 30px -14px var(--glow-accent)}
  .brand-grid:hover{box-shadow:0 44px 90px rgba(0,0,0,.4),0 0 0 1px rgba(224,85,90,.1)}
  .creator-card:hover{transform:translateY(-3px);box-shadow:0 26px 48px rgba(0,0,0,.5)}
}

/* ---------- 5. Images & graphics ---------- */
.showcase-visual img,.yt-art,.match img,.ct-wall-frame img,.founder-frame,.team-photo{transition:transform 600ms var(--ease-out),box-shadow 600ms var(--ease-out)}
@media (hover:hover){
  .showcase-visual:hover img{transform:scale(1.015) rotate(-.4deg)}
  .yt-hero-visual:hover .yt-art{transform:translateY(-6px)}
  .team-member:hover .team-photo{transform:scale(1.04)}
  .ct-wall-frame:hover img{transform:scale(1.012)}
  .founder-photo:hover .founder-frame{transform:translateY(-4px)}
}
.logo-row img,.press-row img{transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@media (hover:hover){ .logo-row img:hover,.press-row img:hover{transform:translateY(-2px)} }

/* Slow ambient float for decorative outlines/graphics (uses `translate`, so it
   stacks with their existing rotate() transforms) */
@keyframes float-y{from{translate:0 0}to{translate:0 -12px}}
@keyframes drift{from{translate:0 0}to{translate:24px 18px}}
.ov-four::before,.ov-steps-sec::before,.yt-diff::after,.story-team::after,.testimonial::after,
.match::before,.founder-photo::before,.cta-box::after{animation:float-y 9s var(--ease-in-out) infinite alternate}
.ov-steps-sec::before,.story-team::after{animation-duration:11s}
.hero::after,.ov-hero::before{animation:drift 14s var(--ease-in-out) infinite alternate}
.match img{animation:float-y 7s var(--ease-in-out) infinite alternate}

/* ---------- 6. Text links: underline that draws in ---------- */
.footer-col a,.footer-bottom nav a,.brands-link,.story-link,.news-consent a,.story-narrow p a{
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.footer-col a:hover,.footer-bottom nav a:hover,.brands-link:hover,.story-link:hover,.story-narrow p a:hover{background-size:100% 1px}
.news-consent a{background-size:100% 1px}

/* ---------- 7. FAQ: smooth answer reveal ---------- */
.faq-item summary,.ov-faq-item summary{transition:color var(--dur-base) var(--ease-out)}
.ov-faq-item summary:hover{color:#fff}
.faq-item[open] p,.ov-faq-item[open] p{animation:answer-in 420ms var(--ease-out)}
@keyframes answer-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ov-step .ov-circle{transition:border-color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@media (hover:hover){ .ov-step:hover .ov-circle{border-color:var(--accent);background-color:rgba(224,85,90,.08);transform:scale(1.06)} }

/* ---------- 8. Section transitions: soft edges instead of hard color cuts ---------- */
.testimonial,.ov-steps-sec,.ov-faq{position:relative}
.testimonial::before,.ov-steps-sec::after,.ov-faq::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(224,85,90,.25),transparent);opacity:.6;
}

/* ---------- 9. Reduced motion: no movement, instant states ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .btn:hover,.btn:active,.client-card:hover,.ov-card:hover,.value-card:hover,.yt-cardbox:hover{transform:none!important}
}