/* ==========================================================================
   Home page: the header's featured stage and the Shop by category bento.
   Loaded after shop.css by shop/home.php only.

   Motion rules (CLAUDE.md): only transform and opacity animate; loops rest
   while off screen (.is-live) or in a hidden tab (.is-asleep); nothing moves
   under prefers-reduced-motion. home-hero.js only swaps classes and data-pos.
   ========================================================================== */

:root {
  /* Shades derived from the brand tokens for these two dark sections. */
  --home-red-tint:  #ff7a7d;   /* --c-brand lifted for small text on black */
  --home-card-top:  #242424;
  --home-card-tint: #2a0d0e;   /* --c-brand at ~12% over --c-black */
}

/* ---------- Hero: two columns when there is a stage ---------- */
@media (min-width: 992px) {
  .hero--stage .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-6); }
  .hero--stage { padding-block: var(--sp-7) var(--sp-7); }
}

/* ---------- Featured stage ---------- */
.hf { position: relative; min-width: 0; }
.hero .hf-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-3); padding: .3rem .75rem .3rem .6rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-on-black); background: rgba(255, 255, 255, .06); max-width: none;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-full);
}
.hf-live { position: relative; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-brand); }
.hf-live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-brand);
  animation: hfPing 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes hfPing { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.hf-stage { position: relative; }

/* Without JS: a plain swipeable row. */
.hf-track {
  list-style: none; margin: 0; padding: 0 0 var(--sp-2);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 72%); gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hf-track::-webkit-scrollbar { display: none; }
.hf-card { scroll-snap-align: center; }

.hf-link {
  position: relative; display: flex; flex-direction: column; height: 100%;
  color: var(--c-on-black); text-decoration: none; border-radius: 18px; overflow: hidden;
  /* Solid, so the cards behind never show through the one in front. */
  background: linear-gradient(160deg, var(--home-card-top), var(--c-black-2) 55%, var(--home-card-tint));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.hf-link:hover, .hf-link:focus-visible { color: var(--c-on-black); text-decoration: none; }
.hf-link:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }

.hf-media {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1 / .82; margin: var(--sp-3) var(--sp-3) 0; border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, var(--c-surface) 0%, var(--c-surface-2) 62%, var(--c-surface-3) 100%);
}
.hf-media img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.hf-sheen {
  position: absolute; inset: -20% auto -20% -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0;
}

.hf-price {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2;
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .35rem .7rem; border-radius: var(--r-full);
  font-weight: 800; font-size: var(--fs-md); color: var(--c-on-black); background: var(--c-brand);
  box-shadow: 0 8px 22px -6px rgba(228, 28, 33, .75);
}
.hf-price s { font-weight: 600; font-size: var(--fs-xs); opacity: .8; }

.hf-info { display: grid; gap: .2rem; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.hf-cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--home-red-tint); }
.hf-name {
  font-size: var(--fs-md); font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hf-go { margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: 650; color: var(--c-on-black-2); }
.hf-go span { display: inline-block; transition: transform var(--transition); }
.hf-link:hover .hf-go span { transform: translateX(4px); }

/* ---- Enhanced: the turning stage ---------------------------------------- */
.hf.is-enhanced .hf-stage {
  height: clamp(22rem, 38vw, 29rem);
  perspective: 1400px; perspective-origin: 50% 40%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.hf.is-enhanced .hf-track {
  position: absolute; inset: 0; display: block; overflow: visible; padding: 0;
  transform-style: preserve-3d;
}
.hf.is-enhanced .hf-card {
  position: absolute; top: 0; left: 50%; width: min(19rem, 64%); height: 100%;
  margin-left: calc(min(19rem, 64%) / -2);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, visibility 0s linear .8s;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate3d(0, 20px, -320px) scale(.55);
}
.hf.is-enhanced .hf-card .hf-link { height: auto; }
.hf.is-enhanced .hf-card[data-pos] { visibility: visible; transition-delay: 0s; }
.hf.is-enhanced .hf-card[data-pos="0"] {
  opacity: 1; pointer-events: auto; z-index: 5;
  transform: translate3d(0, 0, 0) rotateY(0) scale(1);
}
.hf.is-enhanced .hf-card[data-pos="1"],
.hf.is-enhanced .hf-card[data-pos="-1"] { opacity: .6; pointer-events: auto; z-index: 4; cursor: pointer; }
.hf.is-enhanced .hf-card[data-pos="1"]  { transform: translate3d(62%, 14px, -180px) rotateY(-32deg) scale(.84); }
.hf.is-enhanced .hf-card[data-pos="-1"] { transform: translate3d(-62%, 14px, -180px) rotateY(32deg) scale(.84); }
.hf.is-enhanced .hf-card[data-pos="2"],
.hf.is-enhanced .hf-card[data-pos="-2"] { opacity: .22; z-index: 3; }
.hf.is-enhanced .hf-card[data-pos="2"]  { transform: translate3d(104%, 26px, -360px) rotateY(-44deg) scale(.7); }
.hf.is-enhanced .hf-card[data-pos="-2"] { transform: translate3d(-104%, 26px, -360px) rotateY(44deg) scale(.7); }
/* Side cards read as scenery: no hover lift, darker. */
.hf.is-enhanced .hf-card:not([data-pos="0"]) .hf-link { box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9); }

/* The active card: the photo floats, a sheen sweeps it, the price pops. */
.hf.is-enhanced .hf-card[data-pos="0"] .hf-media img { animation: hfFloat 5s ease-in-out infinite; }
.hf.is-enhanced .hf-card[data-pos="0"] .hf-sheen { animation: hfSheen 1.3s .35s cubic-bezier(.4, 0, .2, 1) both; }
.hf.is-enhanced .hf-card[data-pos="0"] .hf-price { animation: hfPop .6s .25s cubic-bezier(.34, 1.56, .64, 1) both; }
.hf.is-enhanced .hf-card[data-pos="0"] .hf-info > * { animation: hfRise .55s cubic-bezier(.2, .8, .2, 1) both; }
.hf.is-enhanced .hf-card[data-pos="0"] .hf-info > :nth-child(2) { animation-delay: .08s; }
.hf.is-enhanced .hf-card[data-pos="0"] .hf-info > :nth-child(3) { animation-delay: .16s; }
@keyframes hfFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); } 50% { transform: translate3d(0, -10px, 0) rotate(1.5deg); } }
@keyframes hfSheen { from { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 1; } to { transform: translate3d(420%, 0, 0) skewX(-18deg); opacity: 1; } }
@keyframes hfPop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hfRise { from { transform: translate3d(0, 12px, 0); opacity: 0; } to { transform: none; opacity: 1; } }

/* Orbits and a glowing floor under the stage. */
.hf-orbit, .hf-floor { display: none; }
.hf.is-enhanced .hf-orbit {
  display: block; position: absolute; left: 50%; top: 44%; pointer-events: none;
  border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .16);
  transform: translate3d(-50%, -50%, 0) rotateX(72deg) rotate(0deg);
  animation: hfOrbit 28s linear infinite;
}
.hf.is-enhanced .hf-orbit--a { width: 118%; aspect-ratio: 1; }
.hf.is-enhanced .hf-orbit--b {
  width: 86%; aspect-ratio: 1; border: 2px solid transparent;
  border-top-color: rgba(228, 28, 33, .7); border-right-color: rgba(228, 28, 33, .15);
  animation-duration: 9s; animation-direction: reverse;
}
@keyframes hfOrbit {
  from { transform: translate3d(-50%, -50%, 0) rotateX(72deg) rotate(0deg); }
  to   { transform: translate3d(-50%, -50%, 0) rotateX(72deg) rotate(360deg); }
}
.hf.is-enhanced .hf-floor {
  display: block; position: absolute; left: 50%; bottom: -6%; width: 80%; height: 22%;
  transform: translate3d(-50%, 0, 0); pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(228, 28, 33, .55), rgba(228, 28, 33, .12) 60%, transparent);
  filter: blur(14px); animation: hfBreathe 5s ease-in-out infinite;
}
@keyframes hfBreathe { 0%, 100% { opacity: .65; transform: translate3d(-50%, 0, 0) scale(1); } 50% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1.08); } }

/* ---- Bar: counter, progress dots, controls ------------------------------ */
.hf-bar { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.hf-bar[hidden] { display: none; }
.hf-count { font-size: var(--fs-xl); font-weight: 800; color: var(--c-on-black); letter-spacing: -.02em; flex: none; }
.hf-count-of { font-size: var(--fs-sm); color: var(--c-on-black-2); margin-left: .3rem; font-weight: 600; }
.hf-dots { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.hf-dot {
  position: relative; flex: 1 1 0; min-width: 10px; max-width: 44px; height: 24px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.hf-dot::before, .hf-dot-fill {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px;
}
.hf-dot::before { background: rgba(255, 255, 255, .22); }
.hf-dot-fill { background: var(--c-brand); transform-origin: left center; transform: scaleX(0); }
.hf-dot.is-done .hf-dot-fill { transform: scaleX(1); background: rgba(255, 255, 255, .7); }
/* The active dot fills over one interval; its animationend advances the stage,
   so pausing the animation pauses the carousel — no timers to drift. */
.hf-dot.is-active .hf-dot-fill { animation: hfFill var(--hf-interval, 5s) linear forwards; }
@keyframes hfFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hf.is-paused .hf-dot.is-active .hf-dot-fill,
.hf.is-asleep .hf-dot.is-active .hf-dot-fill,
.hf.is-hover .hf-dot.is-active .hf-dot-fill { animation-play-state: paused; }
.hf-dot:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; }

.hf-controls { display: flex; gap: 6px; flex: none; }
.hf-btn {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  color: var(--c-on-black); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.hf-btn:hover { background: var(--c-brand); border-color: var(--c-brand); transform: scale(1.06); }
.hf-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.hf-btn svg { width: 1.1rem; height: 1.1rem; }
.hf-icon-play { display: none; }
.hf.is-paused .hf-icon-play { display: block; }
.hf.is-paused .hf-icon-pause { display: none; }

/* Loops rest while the hero is off screen or the tab is hidden. */
.hf.is-asleep .hf-orbit, .hf.is-asleep .hf-floor, .hf.is-asleep .hf-live::after,
.hf.is-asleep .hf-card[data-pos="0"] .hf-media img { animation-play-state: paused; }

/* ---- Hero stage on tablets and phones ----------------------------------- */
@media (max-width: 991.98px) {
  .hf { margin-top: var(--sp-2); }
  .hf.is-enhanced .hf-stage { height: 23.5rem; }
  .hf.is-enhanced .hf-card { width: min(17rem, 62%); margin-left: calc(min(17rem, 62%) / -2); }
}
@media (max-width: 575.98px) {
  .hero .hf-kicker { margin-bottom: var(--sp-2); }
  /* The card is 66% of the stage wide: its photo plus the name block, and a little floor. */
  .hf.is-enhanced .hf-stage { height: calc((100vw - 2rem) * .56 + 7rem); perspective: 900px; }
  .hf.is-enhanced .hf-card { width: 66%; margin-left: -33%; }
  .hf.is-enhanced .hf-card[data-pos="1"]  { transform: translate3d(52%, 18px, -200px) rotateY(-30deg) scale(.8); }
  .hf.is-enhanced .hf-card[data-pos="-1"] { transform: translate3d(-52%, 18px, -200px) rotateY(30deg) scale(.8); }
  .hf.is-enhanced .hf-card[data-pos="2"],
  .hf.is-enhanced .hf-card[data-pos="-2"] { opacity: 0; }
  .hf-media { margin: var(--sp-2) var(--sp-2) 0; }
  .hf-info { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .hf-name { font-size: var(--fs-sm); }
  .hf-go { display: none; }
  .hf-price { top: var(--sp-3); right: var(--sp-3); font-size: var(--fs-sm); }
  .hf-count { font-size: var(--fs-lg); }
  .hf-btn { width: 2.25rem; height: 2.25rem; }
  .hf-controls [data-hf-prev], .hf-controls [data-hf-next] { display: none; } /* swipe instead */
}

/* ==========================================================================
   Shop by category — a dark bento band
   ========================================================================== */
.cat-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--sp-8); color: var(--c-on-black); background: var(--c-black);
}
/* A faint grid drifting under a slow red bloom. */
.cat-band::before {
  content: ""; position: absolute; inset: -44px 0 0; z-index: -2; pointer-events: none; opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, var(--c-black), transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 0%, var(--c-black), transparent 70%);
  animation: catGrid 6s linear infinite;
}
@keyframes catGrid { to { transform: translate3d(0, 44px, 0); } }
.cat-band-glow {
  position: absolute; z-index: -1; top: -35%; right: -10%; pointer-events: none;
  width: min(80vw, 820px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,28,33,.34), rgba(228,28,33,.08) 45%, transparent 68%);
  filter: blur(30px); animation: heroGlow 20s ease-in-out infinite;
}

.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.cat-kicker {
  margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--home-red-tint);
}
.cat-head h2 { margin: 0; font-size: clamp(1.75rem, 4.2vw, 3rem); letter-spacing: -.035em; line-height: 1.05; }
.cat-title-accent { position: relative; display: inline-block; color: var(--c-brand); }
.cat-title-accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .12em; border-radius: 1em;
  background: var(--c-brand); transform-origin: left; transform: scaleX(1);
}
.cat-all {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem;
  font-weight: 650; font-size: var(--fs-sm); color: var(--c-on-black); border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, .28); transition: background var(--transition), border-color var(--transition);
}
.cat-all span { display: inline-block; transition: transform var(--transition); }
.cat-all:hover { color: var(--c-on-black); text-decoration: none; background: var(--c-brand); border-color: var(--c-brand); }
.cat-all:hover span { transform: translateX(4px); }

.cat-bento {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3); grid-auto-flow: dense;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(12.5rem, auto);
}
.cat-cell--big  { grid-column: span 2; grid-row: span 2; }
.cat-cell--wide { grid-column: span 2; }

.cat-card {
  position: relative; display: block; height: 100%; padding: 1px; border-radius: 20px;
  color: var(--c-on-black); overflow: hidden; isolation: isolate;
  background: rgba(255, 255, 255, .12);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.cat-card:hover, .cat-card:focus-visible { color: var(--c-on-black); text-decoration: none; }
.cat-card:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.cat-card.is-tilting { transition-duration: .12s; }

/* A spinning conic light that shows as a glowing border round the tile. */
.cat-ring {
  position: absolute; z-index: -1; left: 50%; top: 50%; width: 200%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(228,28,33,.9) 82%, var(--c-on-black) 88%, transparent 92%);
  transform: translate3d(-50%, -50%, 0) rotate(0deg); opacity: 0;
  transition: opacity .4s ease;
  animation: catSpin 4.5s linear infinite; animation-play-state: paused;
}
@keyframes catSpin { to { transform: translate3d(-50%, -50%, 0) rotate(360deg); } }
.cat-card:hover .cat-ring, .cat-card:focus-visible .cat-ring { opacity: 1; animation-play-state: running; }

.cat-inner {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-height: 12.5rem; padding: var(--sp-4) var(--sp-5); border-radius: 19px; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, var(--home-card-tint) 0%, var(--c-black-2) 55%, var(--c-black) 100%);
}
.cat-inner::after { /* spotlight that follows the pointer (moved by transform) */
  content: ""; position: absolute; z-index: 0; left: 0; top: 0; width: 18rem; height: 18rem; margin: -9rem 0 0 -9rem;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .12), transparent);
  transform: translate3d(var(--mx, 50%), var(--my, 50%), 0); transition: opacity .3s ease;
}
.cat-card.is-tilting .cat-inner::after { opacity: 1; }

.cat-index {
  position: absolute; top: var(--sp-3); left: var(--sp-4); z-index: 1;
  font-size: var(--fs-sm); font-weight: 700; color: rgba(255, 255, 255, .4); letter-spacing: .08em;
}

/* Product photos fanned like cards in a hand; they spread on hover. */
.cat-fan {
  position: absolute; z-index: 1; top: 14%; right: 9%; height: 58%; max-width: 44%; aspect-ratio: 1;
  pointer-events: none;
}
/* Keeps the name legible where a photo swings under it. */
.cat-inner::before {
  content: ""; position: absolute; z-index: 2; inset: auto 0 0 0; height: 60%; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35) 55%, transparent);
}
.cat-shot {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  border-radius: 14px; background: var(--c-surface); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .8);
  transform-origin: 50% 110%;
  transition: transform .6s cubic-bezier(.34, 1.4, .64, 1);
}
.cat-shot img { width: 86%; height: 86%; object-fit: contain; }
.cat-shot--icon { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: var(--home-red-tint); }
.cat-shot--icon svg { width: 48%; height: 48%; }
.cat-shot[data-k="0"] { z-index: 3; transform: rotate(4deg); }
.cat-shot[data-k="1"] { z-index: 2; transform: rotate(-8deg) translate3d(-10%, 2%, 0) scale(.94); }
.cat-shot[data-k="2"] { z-index: 1; transform: rotate(14deg) translate3d(10%, 4%, 0) scale(.9); }
.cat-card:hover .cat-shot[data-k="0"], .cat-card:focus-visible .cat-shot[data-k="0"] { transform: rotate(0deg) translate3d(0, -8%, 0) scale(1.06); }
.cat-card:hover .cat-shot[data-k="1"], .cat-card:focus-visible .cat-shot[data-k="1"] { transform: rotate(-20deg) translate3d(-34%, 4%, 0) scale(.92); }
.cat-card:hover .cat-shot[data-k="2"], .cat-card:focus-visible .cat-shot[data-k="2"] { transform: rotate(22deg) translate3d(34%, 6%, 0) scale(.88); }
.cat-fan[data-count="1"] .cat-shot { transform: rotate(4deg); }

.cat-text { position: relative; z-index: 3; display: grid; gap: .15rem; max-width: 55%; }
.cat-name { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.cat-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-on-black-2); }
.cat-go {
  position: absolute; z-index: 3; right: var(--sp-4); bottom: var(--sp-4);
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background var(--transition), border-color var(--transition);
}
.cat-go svg { width: 1.1rem; height: 1.1rem; }
.cat-card:hover .cat-go, .cat-card:focus-visible .cat-go { background: var(--c-brand); border-color: var(--c-brand); transform: rotate(-45deg) scale(1.1); }

/* The big tile: bigger type, a bigger fan, the index as a watermark. */
.cat-cell--big .cat-inner { padding: var(--sp-6); }
.cat-cell--big .cat-fan { top: 12%; right: 12%; height: 62%; max-width: 50%; }
.cat-cell--big .cat-name { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.cat-cell--big .cat-count { font-size: var(--fs-sm); }
.cat-cell--big .cat-index { font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: rgba(255, 255, 255, .07); top: var(--sp-4); left: var(--sp-5); }
.cat-cell--wide .cat-fan { right: 18%; top: 12%; height: 64%; }

/* ---- Rise-in: armed by home-hero.js only when the band starts off screen. */
.cat-bento.is-armed .cat-cell { opacity: 0; transform: translate3d(0, 36px, 0) scale(.96); }
.cat-bento.is-armed .cat-cell.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.cat-bento.is-armed .cat-cell .cat-shot { transform: translate3d(0, 30%, 0) scale(.6) rotate(0deg); }
.cat-bento.is-armed .cat-cell.is-in .cat-shot { transition-delay: calc(var(--i, 0) * 70ms + 250ms + var(--k-delay, 0ms)); }
.cat-bento.is-armed .cat-cell.is-in .cat-shot[data-k="1"] { --k-delay: 90ms; }
.cat-bento.is-armed .cat-cell.is-in .cat-shot[data-k="2"] { --k-delay: 180ms; }
/* Once in, the fan returns to its resting pose (the rules above), so it animates there. */
.cat-bento.is-armed .cat-cell.is-in .cat-shot[data-k="0"] { transform: rotate(4deg); }
.cat-bento.is-armed .cat-cell.is-in .cat-shot[data-k="1"] { transform: rotate(-8deg) translate3d(-10%, 2%, 0) scale(.94); }
.cat-bento.is-armed .cat-cell.is-in .cat-shot[data-k="2"] { transform: rotate(14deg) translate3d(10%, 4%, 0) scale(.9); }
.cat-bento.is-armed .cat-cell.is-in .cat-card:hover .cat-shot { transition-delay: 0s; }
.cat-bento.is-armed .cat-cell.is-in .cat-card:hover .cat-shot[data-k="0"] { transform: rotate(0deg) translate3d(0, -8%, 0) scale(1.06); }
.cat-bento.is-armed .cat-cell.is-in .cat-card:hover .cat-shot[data-k="1"] { transform: rotate(-20deg) translate3d(-34%, 4%, 0) scale(.92); }
.cat-bento.is-armed .cat-cell.is-in .cat-card:hover .cat-shot[data-k="2"] { transform: rotate(22deg) translate3d(34%, 6%, 0) scale(.88); }

/* Touch screens have no hover: tiles on screen breathe their fan and ring instead. */
@media (hover: none) {
  .cat-band.is-live .cat-shot[data-k="1"] { animation: catSwayL 4.5s ease-in-out infinite; }
  .cat-band.is-live .cat-shot[data-k="2"] { animation: catSwayR 4.5s ease-in-out infinite; }
  .cat-band.is-live .cat-cell--big .cat-ring { opacity: .8; animation-play-state: running; }
  .cat-card:active { transform: scale(.97); transition-duration: .1s; }
}
@keyframes catSwayL { 0%, 100% { transform: rotate(-8deg) translate3d(-10%, 2%, 0) scale(.94); } 50% { transform: rotate(-15deg) translate3d(-22%, 3%, 0) scale(.94); } }
@keyframes catSwayR { 0%, 100% { transform: rotate(14deg) translate3d(10%, 4%, 0) scale(.9); } 50% { transform: rotate(20deg) translate3d(22%, 5%, 0) scale(.9); } }

.cat-band.is-asleep::before, .cat-band.is-asleep .cat-band-glow,
.cat-band:not(.is-live)::before, .cat-band:not(.is-live) .cat-band-glow { animation-play-state: paused; }

/* ---- Category band: tablet and phone ------------------------------------ */
@media (max-width: 991.98px) {
  .cat-band { padding-block: var(--sp-7); }
  .cat-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(11rem, auto); }
  .cat-cell--big { grid-row: span 1; }
  .cat-cell--big .cat-inner { min-height: 15rem; }
}
@media (max-width: 575.98px) {
  .cat-band { padding-block: var(--sp-6); }
  .cat-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .cat-bento { gap: var(--sp-2); grid-auto-rows: minmax(10rem, auto); }
  .cat-cell--wide { grid-column: span 1; }
  .cat-cell--big { grid-column: span 2; }
  .cat-card { border-radius: 16px; }
  .cat-inner { min-height: 10rem; padding: var(--sp-3); border-radius: 15px; }
  .cat-cell--big .cat-inner { min-height: 13rem; padding: var(--sp-4); }
  .cat-fan { top: 16%; right: 14%; height: 48%; max-width: 56%; }
  .cat-cell--big .cat-fan { top: 12%; right: 12%; height: 60%; }
  .cat-text { max-width: 100%; }
  .cat-name { font-size: var(--fs-base); }
  .cat-count { font-size: .6875rem; }
  .cat-go { width: 2rem; height: 2rem; right: var(--sp-3); bottom: var(--sp-3); }
  .cat-cell:not(.cat-cell--big) .cat-go { display: none; }
  .cat-index { left: var(--sp-3); top: var(--sp-2); font-size: var(--fs-xs); }
}

/* Motion is decoration: honour the OS setting and drop all of it. */
@media (prefers-reduced-motion: reduce) {
  .hf-live::after, .hf-orbit, .hf-floor,
  .hf.is-enhanced .hf-card .hf-media img, .hf.is-enhanced .hf-card .hf-sheen,
  .hf.is-enhanced .hf-card .hf-price, .hf.is-enhanced .hf-card .hf-info > * { animation: none !important; }
  .hf.is-enhanced .hf-card { transition: opacity .2s ease, visibility 0s; }
  .hf-dot.is-active .hf-dot-fill { animation: none; transform: scaleX(1); }
  .cat-band::before, .cat-band-glow, .cat-ring, .cat-shot { animation: none !important; }
  .cat-card, .cat-shot, .cat-go { transition: none; transform: none !important; }
  .cat-shot[data-k="1"] { transform: rotate(-8deg) translate3d(-10%, 2%, 0) scale(.94) !important; }
  .cat-shot[data-k="2"] { transform: rotate(14deg) translate3d(10%, 4%, 0) scale(.9) !important; }
}