/* ==========================================================
   KickUp — POLISH LAYER
   Loaded last on every page. Purely additive: it dresses the
   existing design up without changing how anything works.

   PERFORMANCE CONTRACT (the whole point of this file):
     · every animation touches ONLY transform or opacity
       -> the browser can run them on the compositor thread,
          so the main thread stays free and the page never lags
     · no animated blur, no animated box-shadow, no filters
     · no scroll handler that writes layout properties
     · the one infinite loop (the ticker) is a compositor
       transform animation and it is PAUSED whenever it is
       off-screen
     · .lite / .vlow (weak phones) switch all of it off
     · below-the-fold sections use content-visibility so the
       browser skips painting them until they come close
   ========================================================== */

/* ------------------------------------------------------------
   0. A ZERO CART COUNT IS HIDDEN
   The `hidden` attribute has to beat the .cart-fab__n class, which sets
   display:inline-flex. The same rule exists in shop.css, but the landing
   page does not load shop.css — so it is repeated here, which loads on
   every page.
   ------------------------------------------------------------ */
[data-cart-count][hidden] { display:none !important; }

/* ------------------------------------------------------------
   1. SECTION HEADING — one treatment for every band
   ------------------------------------------------------------ */
.sec { position:relative; padding:56px 0; }
.sec--tight { padding:40px 0; }
.sec-head { text-align:center; margin-bottom:26px; }
.sec-head .eyebrow { margin-bottom:8px; }
.sec-head h2 { font-size:clamp(34px, calc(var(--col) * .115), 78px); }
.sec-head p { margin:10px auto 0; max-width:44ch; font-size:14.5px; line-height:1.6; color:var(--text-soft); }

/* the thin red rule under a section heading */
.sec-head__rule {
  width:54px; height:3px; margin:16px auto 0; border-radius:3px; background:var(--color-red);
  -webkit-transform:scaleX(0); transform:scaleX(0); -webkit-transform-origin:left center; transform-origin:left center;
}
.js .sec-head__rule { transition:transform .6s cubic-bezier(.2,.85,.28,1); }
.js .sec-head.is-in .sec-head__rule { -webkit-transform:scaleX(1); transform:scaleX(1); }
.sec-head--center .sec-head__rule { -webkit-transform-origin:center; transform-origin:center; }

/* the heading itself fades up when it arrives (driven by motion.js) */
.js [data-rise] { opacity:0; -webkit-transform:translateY(18px); transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease; }
.js [data-rise].is-in { opacity:1; -webkit-transform:none; transform:none; }

/* an anchored section must not slide under the fixed header */
.hero, .shoes, .promo, .sec, .cta-band, .footer { scroll-margin-top:92px; }

/* ------------------------------------------------------------
   2. TICKER — a marquee band of brand words
   Compositor-only translateX. Paused off-screen by motion.js.
   ------------------------------------------------------------ */
.ticker {
  position:relative; overflow:hidden; padding:13px 0;
  background:#0A0A0A; color:#FDFDFD;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
:root[data-theme="dark"] .ticker { background:#08080A; color:#F4F4F5; }
.ticker__track { display:flex; width:max-content; will-change:transform; }
.ticker__row { display:flex; align-items:center; gap:26px; padding-right:26px; flex:0 0 auto; }
.ticker__item {
  display:flex; align-items:center; gap:26px; white-space:nowrap;
  font-family:var(--font-heading); font-weight:900; font-style:italic; text-transform:uppercase;
  font-size:19px; letter-spacing:2.4px;
}
.ticker__item i { width:6px; height:6px; border-radius:50%; background:var(--color-red); font-style:normal; }
.ticker__item em { color:var(--color-red); font-style:italic; }
/* the loop itself */
.ticker--run .ticker__track { animation:ku-marquee 30s linear infinite; }
.ticker--run.ticker--paused .ticker__track { animation-play-state:paused; }
@keyframes ku-marquee { from { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }
                       to   { -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce){ .ticker--run .ticker__track { animation:none; } }

/* ------------------------------------------------------------
   3. STATS — a band of numbers that count up when they arrive
   ------------------------------------------------------------ */
.stats { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.stats__cell {
  padding:20px 14px; border-radius:22px; text-align:center;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.stats__cell:hover { transform:translateY(-3px); border-color:rgba(229,9,16,.45); }
.stats__n {
  font-family:var(--font-heading); font-weight:900; font-style:italic; line-height:1;
  font-size:clamp(34px, calc(var(--col) * .12), 62px); color:var(--color-red);
}
.stats__n sup { font-size:.5em; vertical-align:super; }
.stats__l { margin-top:6px; font-size:11.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--mute); }

/* ------------------------------------------------------------
   4. FEATURES — three reasons to buy
   ------------------------------------------------------------ */
.features { display:grid; grid-template-columns:1fr; gap:14px; }
.feature {
  position:relative; overflow:hidden; padding:22px 20px; border-radius:24px;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .24s ease, border-color .24s ease;
}
.feature:hover { transform:translateY(-4px); border-color:rgba(229,9,16,.4); }
.feature__ico {
  width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--color-red); color:#fff; margin-bottom:14px;
}
.feature__ico svg { width:25px; height:25px; }
.feature h3 { font-family:var(--font-heading); font-weight:900; font-style:italic; text-transform:uppercase; font-size:26px; line-height:1; }
.feature p { margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--text-soft); }
/* the accent bar that slides in on hover — transform only */
.feature::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--color-red);
  -webkit-transform:scaleX(0); transform:scaleX(0); -webkit-transform-origin:left center; transform-origin:left center;
  transition:transform .32s cubic-bezier(.2,.85,.28,1);
}
.feature:hover::after { -webkit-transform:scaleX(1); transform:scaleX(1); }

/* ------------------------------------------------------------
   5. QUOTES — what people say
   ------------------------------------------------------------ */
.quotes { display:grid; grid-template-columns:1fr; gap:14px; }
.quote {
  position:relative; padding:22px 20px 20px; border-radius:24px;
  background:var(--surface); border:1px solid var(--line);
}
.quote__stars { display:flex; gap:3px; margin-bottom:12px; }
.quote__stars svg { width:16px; height:16px; color:#F5A623; }
.quote p { font-size:14.5px; line-height:1.65; color:var(--text-soft); }
.quote footer { display:flex; align-items:center; gap:11px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.quote__av {
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-red); color:#fff;
  font-family:var(--font-heading); font-weight:900; font-style:italic; font-size:18px;
}
.quote__who b { display:block; font-size:13.5px; font-weight:700; }
.quote__who span { display:block; font-size:11.5px; color:var(--mute); }

/* ------------------------------------------------------------
   6. CTA BAND — the big red push at the bottom of the page
   ------------------------------------------------------------ */
.cta-band {
  position:relative; overflow:hidden; margin:0 16px 70px; padding:38px 24px; border-radius:32px;
  background:var(--promo-bg); color:#fff; text-align:center;
}
.cta-band__orb { position:absolute; right:-80px; top:-90px; width:230px; height:230px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 35%, #FF3B3F 0, #E50910 55%, #A5050B 100%); }
.cta-band > *:not(.cta-band__orb) { position:relative; z-index:1; }
.cta-band h2 { font-size:clamp(36px, calc(var(--col) * .13), 82px); color:#fff; }
.cta-band h2 em { color:var(--color-red); }
.cta-band p { margin:12px auto 22px; max-width:40ch; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.72); }
.cta-band__row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cta-band .btn--ghost { color:#fff; }
.cta-band .btn--ghost:hover { background:#fff; color:#0A0A0A; border-color:#fff; }
.cta-band .btn { position:relative; overflow:hidden; }

/* ------------------------------------------------------------
   7. BUTTON SHEEN — a highlight that sweeps across on hover.
      The sweep is a translateX on a pseudo-element, so it is
      still compositor-only.
   ------------------------------------------------------------ */
.btn { position:relative; overflow:hidden; isolation:isolate; }
.btn::before {
  content:''; position:absolute; top:-20%; bottom:-20%; left:-60%; width:45%; z-index:-1;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
  -webkit-transform:translateX(-140%) skewX(-18deg); transform:translateX(-140%) skewX(-18deg);
  pointer-events:none;
}
.btn:hover::before, .btn:focus-visible::before { -webkit-transform:translateX(320%) skewX(-18deg); transform:translateX(320%) skewX(-18deg); }
.btn::before { transition:transform .55s cubic-bezier(.22,.9,.28,1); }

/* ------------------------------------------------------------
   8. CARD IMAGE ZOOM + a soft red glow on the tile
   ------------------------------------------------------------ */
.card__img img { transition:transform .4s cubic-bezier(.2,.85,.28,1); }
.card:hover .card__img img { -webkit-transform:scale(1.045); transform:scale(1.045); }
.card { transition:transform .26s ease, border-color .26s ease; }
.card:hover { -webkit-transform:translateY(-5px); transform:translateY(-5px); border-color:rgba(229,9,16,.38); }
.card2__media { overflow:hidden; }
.card2__media img { transition:transform .4s cubic-bezier(.2,.85,.28,1); }
.card2:hover .card2__media img { -webkit-transform:scale(1.05); transform:scale(1.05); }

/* the "NEW" / "SALE" tag gets a little bounce when it appears */
.card__tag { transition:transform .25s cubic-bezier(.2,.85,.28,1); }
.card:hover .card__tag { -webkit-transform:scale(1.06); transform:scale(1.06); }

/* ------------------------------------------------------------
   9. HERO SLIDES — the picture is now a link to the pair
   ------------------------------------------------------------ */
.shoe-slide__link { display:block; -webkit-tap-highlight-color:transparent; }
.shoe-slide__pic { transition:transform .45s cubic-bezier(.2,.85,.28,1); }
.shoe-slide:hover .shoe-slide__pic { -webkit-transform:scale(1.03); transform:scale(1.03); }
/* NOTE: the circle behind the shoe (.shoe-slide__pic::before) is left exactly
   as landing.css draws it — a filled disc with a red arc. Do not mask it
   here: the filled disc is what the shoe sits on. */

/* the big price tag on the hero slide */
.shoe-slide__price { transition:transform .25s cubic-bezier(.2,.85,.28,1); }
.shoe-slide:hover .shoe-slide__price { -webkit-transform:translateX(4px); transform:translateX(4px); }

/* ------------------------------------------------------------
   10. FOOTER — a bit more life
   The red tick beside a heading grows with a transform (not a height
   change), so it never triggers a layout pass.
   ------------------------------------------------------------ */
.footer__heading i {
  -webkit-transform-origin:center top; transform-origin:center top;
  transition:transform .28s cubic-bezier(.2,.85,.28,1);
}
.footer__block:hover .footer__heading i { -webkit-transform:scaleY(1.3); transform:scaleY(1.3); }
.footer__glass { transition:transform .4s cubic-bezier(.2,.85,.28,1); }

/* ------------------------------------------------------------
   11. BACK TO TOP
   ------------------------------------------------------------ */
.to-top {
  position:fixed; z-index:1100; right:14px; right:calc(14px + env(safe-area-inset-right, 0px));
  bottom:150px; bottom:calc(150px + env(safe-area-inset-bottom, 0px));
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--color-black); border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .26s, background-color .2s ease, color .2s ease;
}
.to-top svg { width:20px; height:20px; }
.to-top.is-on { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s; }
.to-top:active { -webkit-transform:scale(.92); transform:scale(.92); }
.to-top:hover { background:var(--color-red); color:#fff; }
@media (min-width:560px) { .to-top { bottom:calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width:900px) and (min-aspect-ratio:5/4) { .to-top { right:28px; bottom:96px; width:52px; height:52px; } }

/* ------------------------------------------------------------
   12. SCROLL PROGRESS BAR (the element, the maths is in motion.js)
   It follows the app column, so on a desktop it does not draw a red
   line across the empty space outside the column.
   ------------------------------------------------------------ */
.ku-progress {
  position:fixed; z-index:1500; top:0; left:0; right:0; margin:0 auto;
  width:var(--col); height:3px; background:var(--color-red);
  -webkit-transform-origin:0 50%; transform-origin:0 50%;
  -webkit-transform:scaleX(0); transform:scaleX(0);
  will-change:transform; pointer-events:none;
}

/* ------------------------------------------------------------
   13. EMPTY-STATE + PANEL hover lift (shop pages)
   ------------------------------------------------------------ */
.panel, .summary { transition:transform .24s ease; }
.empty { transition:transform .24s ease; }
.empty__icon { transition:transform .3s cubic-bezier(.2,.85,.28,1), background-color .25s ease; }
.empty:hover .empty__icon { -webkit-transform:rotate(-8deg) scale(1.06); transform:rotate(-8deg) scale(1.06); }

/* the gallery main photo on a product page */
.gallery__main { transition:border-color .25s ease; }
.gallery__main:hover { border-color:rgba(229,9,16,.35); }
.thumb { transition:border-color .2s ease, transform .2s ease; }
.thumb:hover { -webkit-transform:translateY(-2px); transform:translateY(-2px); }

/* ------------------------------------------------------------
   14. PAINT SKIPPING — the single biggest win for smoothness.
   content-visibility tells the browser to skip laying out and
   painting any section that is far below the fold.

   The intrinsic size MUST match the real height of the section,
   otherwise the scrollbar jumps when the section is first
   reached. Each section sets its own --hold-h below.
   ------------------------------------------------------------ */
.paint-hold {
  content-visibility:auto;
  contain-intrinsic-size:auto var(--hold-h, 600px);
}
@supports not (content-visibility: auto) { .paint-hold { content-visibility:visible; } }

/* the placeholder heights, phone sizes */
.paint-hold.sec--tight   { --hold-h:300px; }   /* the stats band       */
.paint-hold.footer       { --hold-h:760px; }   /* the glass footer     */

/* Only sections that are already readable without JavaScript are safe to
   skip: content inside a skipped subtree does not reliably report its
   position, so anything that waits to be revealed must NOT be in here.
   The stats band qualifies — the numbers are written out in the HTML
   already, they only get a nicer count-up when they arrive. */

/* ------------------------------------------------------------
   15. DESKTOP / WIDE PHONE LAYOUTS
   ------------------------------------------------------------ */

/* ---- 600px and up ----
   There is deliberately NO intermediate breakpoint here. The app stays a
   430px column until 900px, so a 600px-wide screen still shows a 430px
   column — switching to four stat columns at 600px would squeeze them
   into 107px each. The grids change shape only when the column itself
   goes full width, at 900px. */

/* ---- the real desktop layout (same switch the rest of the site uses) ---- */
@media (min-width:900px) and (min-aspect-ratio:5/4) {
  .sec { padding:96px 0; }
  .sec--tight { padding:64px 0; }
  .sec-head { margin-bottom:44px; }
  .sec-head h2 { font-size:clamp(46px, 4.6vw, 76px); }
  .sec-head p { font-size:16.5px; max-width:52ch; }

  .ticker { padding:17px 0; }
  .ticker__item { font-size:25px; gap:34px; }
  .ticker__row { gap:34px; padding-right:34px; }

  .stats { gap:18px; }
  .stats__cell { padding:30px 20px; border-radius:28px; }
  .stats__n { font-size:clamp(44px, 4.2vw, 68px); }
  .stats__l { font-size:13px; }

  .features { gap:26px; }
  .feature { padding:32px 30px; border-radius:30px; }
  .feature h3 { font-size:32px; }
  .feature p { font-size:15px; }

  .quotes { grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
  .quote { padding:28px 26px 24px; border-radius:28px; }
  .quote p { font-size:15px; }

  .cta-band { margin:0 max(48px, calc((100% - 1240px) / 2)) 110px; padding:74px 60px; border-radius:44px; }
  .cta-band h2 { font-size:clamp(54px, 5.4vw, 96px); }
  .cta-band p { font-size:17px; max-width:46ch; }
  .cta-band__row { gap:14px; }
}

/* ------------------------------------------------------------
   16. PERF / REDUCED MOTION — everything here is switched off
   ------------------------------------------------------------ */
.lite .ticker--run .ticker__track,
.vlow .ticker--run .ticker__track { animation:none; }
.lite .sec-head__rule { -webkit-transform:scaleX(1); transform:scaleX(1); }
.lite [data-rise] { opacity:1 !important; -webkit-transform:none !important; transform:none !important; transition:none !important; }
.vlow [data-rise] { opacity:1 !important; -webkit-transform:none !important; transform:none !important; transition:none !important; }
.lite .card, .lite .card2, .lite .feature, .lite .stats__cell, .lite .quote,
.lite .shoe-slide__pic, .lite .shoe-slide__img, .lite .card__img img,
.lite .card2__media img, .lite .btn::before, .lite .to-top {
  transition:none !important;
}
.lite .card:hover, .lite .card2:hover, .lite .feature:hover, .lite .stats__cell:hover { -webkit-transform:none; transform:none; }
.lite .card:hover .card__img img, .lite .card2:hover .card2__media img,
.lite .shoe-slide:hover .shoe-slide__pic { -webkit-transform:none; transform:none; }
.lite .btn::before { display:none; }
.lite .to-top { display:none; }

@media (prefers-reduced-motion: reduce) {
  .ticker--run .ticker__track { animation:none; }
  .sec-head__rule { -webkit-transform:scaleX(1); transform:scaleX(1); }
  [data-rise] { opacity:1 !important; -webkit-transform:none !important; transform:none !important; transition:none !important; }
  .card, .card2, .feature, .stats__cell, .quote, .shoe-slide__pic,
  .shoe-slide__img, .card__img img, .card2__media img, .btn::before, .to-top {
    transition:none !important;
  }
  .card:hover, .card2:hover, .feature:hover, .stats__cell:hover,
  .card:hover .card__img img, .card2:hover .card2__media img,
  .shoe-slide:hover .shoe-slide__pic { -webkit-transform:none; transform:none; }
  .btn::before { display:none; }
}

/* ------------------------------------------------------------
   WHY-TITLE — "Why should you buy from KickUp?"
   Two stacked lines, the brand name set in red on a slanted
   underline bar that draws in when the heading arrives.
   ------------------------------------------------------------ */
.sec-head h2.why-title {
  display:flex; flex-direction:column; align-items:center; gap:.04em;
  font-size:clamp(38px, calc(var(--col) * .13), 92px);
  font-weight:900; line-height:.95; letter-spacing:.8px;
  text-shadow:0 .035em 0 rgba(229,9,16,.16);
}
.why-title__top, .why-title__bottom { display:block; }
.why-title__brand {
  position:relative; isolation:isolate; display:inline-block; padding:0 .12em; margin-left:.04em;
  color:var(--color-red);
}
.why-title__brand::after {
  content:''; position:absolute; left:0; right:0; bottom:-.02em; height:.13em; z-index:-1;
  background:var(--color-red); opacity:.22; border-radius:2px;
  -webkit-transform:skewX(-14deg) scaleX(0); transform:skewX(-14deg) scaleX(0);
  -webkit-transform-origin:left center; transform-origin:left center;
}
.js .why-title__brand::after { transition:transform .7s .25s cubic-bezier(.2,.85,.28,1); }
.js .sec-head.is-in .why-title__brand::after,
.no-js .why-title__brand::after { -webkit-transform:skewX(-14deg) scaleX(1); transform:skewX(-14deg) scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .why-title__brand::after { transition:none; -webkit-transform:skewX(-14deg) scaleX(1); transform:skewX(-14deg) scaleX(1); }
}

/* ------------------------------------------------------------
   FAQ — three quick answers (under "Why KickUp")
   ------------------------------------------------------------ */
.faq { margin-top:34px; display:grid; gap:12px; max-width:760px; margin-left:auto; margin-right:auto; }
.faq__title { font-family:var(--font-heading); font-weight:900; font-style:italic; text-transform:uppercase; font-size:30px; line-height:1; text-align:center; margin-bottom:6px; }
.faq__title em { color:var(--color-red); font-style:italic; }
.faq__item { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:0 20px; transition:border-color .24s ease; }
.faq__item[open] { border-color:rgba(229,9,16,.4); }
.faq__item summary { list-style:none; cursor:pointer; padding:18px 30px 18px 0; position:relative; font-weight:700; font-size:15px; line-height:1.4; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:'+'; position:absolute; right:0; top:50%; margin-top:-14px; font-size:24px; line-height:28px; color:var(--color-red); font-weight:700; }
.faq__item[open] summary::after { content:'\2212'; }
.faq__item p { padding:0 0 18px; font-size:14px; line-height:1.65; color:var(--text-soft); }
.faq__item p b { color:var(--color-black); }
@media (min-width:768px){ .faq__title { font-size:40px; } .faq__item summary { font-size:17px; } .faq__item p { font-size:15px; } }

/* ------------------------------------------------------------
   OUR SHOES — auto-sliding row (4 at a time, 2 on phones)
   Every 2.5s the row moves one shoe to the left; the next one
   slides in from the right. landing.js drives it.
   ------------------------------------------------------------ */
.shoes__grid { display:block; --n:2; --g:12px; overflow:hidden; padding:20px 0 44px; margin-top:-20px; margin-bottom:-44px; }
.shoes__track { display:flex; gap:var(--g); will-change:transform; }
.shoes__track > .card { flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); min-width:0; }
@media (min-width:900px) { .shoes__grid { --n:4; --g:22px; } }
.shoes__grid.is-scroll { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.shoes__grid.is-scroll .card { scroll-snap-align:start; }

/* the shoe row must always glide, even in the light/low animation modes */
.lite .shoes__track, .vlow .shoes__track, .perf .shoes__track { transition-duration:.75s !important; }