/* ============================================
   Home hero: kinetic LOOP wordmark + fanned work cards
   ============================================ */

/* The hero is exactly one screen tall on every device. Sizes below use
   svh (screen height) as well as vw, and the card fan takes whatever
   height is left, cropped at the bottom edge. */
.hero {
  --word: max(3.4rem, min(21vw, 19vh, 17rem));
  position: relative;
  overflow: hidden;
  height: 100vh; height: 100svh;
  min-height: 560px;
  display: flex; flex-direction: column;
  padding-top: calc(66px + 2vh);
}
.hero > .container { width: 100%; /* flex column would otherwise shrink-wrap and centre it */
  isolation: isolate;
}
.hero-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 45% at 50% 34%, rgba(232,40,63,.22), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(110,15,31,.35), transparent 70%),
    linear-gradient(180deg, #0a0a0a 0%, #110a0c 55%, #0a0a0a 100%);
}

/* ---------- Registration marks ---------- */
.hero-marks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-marks i {
  position: absolute; width: 14px; height: 14px; opacity: 0;
  transform: translate(-50%, -50%);
}
.hero-marks i::before, .hero-marks i::after {
  content: ''; position: absolute; background: var(--grey-line);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.hero-marks i::before { width: 14px; height: 1px; }
.hero-marks i::after  { width: 1px; height: 14px; }
.hero-marks b {
  position: absolute; top: 33%; width: 0; height: 0; opacity: 0;
  border-block: 7px solid transparent;
}
.hero-marks b.l { left: 2.5%;  border-left: 9px solid var(--off-white); }
.hero-marks b.r { right: 2.5%; border-right: 9px solid var(--off-white); }
body.is-ready .hero-marks i,
body.is-ready .hero-marks b { animation: mark-in .6s var(--ease) forwards; }
body.is-ready .hero-marks i:nth-child(n+5) { animation-delay: .2s; }
@keyframes mark-in { to { opacity: 1; } }

/* ---------- Top row ---------- */
.hero-top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.hero-welcome {
  margin: 0; color: var(--off-white);
  font-family: 'Unbounded', var(--font-display); font-weight: 700;
  font-size: clamp(.8rem, 1.3vw, 1rem); line-height: 1.15; letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0; transform: translateY(10px);
}
.hero-seal {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--grey-line); display: grid; place-items: center;
  opacity: 0;
}
.hero-seal img { width: 28px; }
body.is-ready .hero-welcome { animation: fade-up .8s var(--ease) .2s forwards; }
body.is-ready .hero-seal { animation: seal-in 1s var(--ease) .4s forwards, seal-spin 14s linear 1.4s infinite; }
@keyframes seal-in { from { opacity: 0; transform: rotate(-120deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* ---------- Wordmark stage ---------- */
.hero-stage {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  margin-top: clamp(-10px, -1vw, 0px);
  height: calc(var(--word) * 1.02);
  flex: none;
  direction: ltr;
}
.hero-slab {
  position: absolute; top: -8%; bottom: -8%; left: 50%;
  width: calc(var(--word) * .72);
  margin-left: calc(var(--word) * -.36 + 3%);
  background: linear-gradient(180deg, var(--red-bright), var(--red) 55%, var(--red-deep));
  transform: scaleY(0); transform-origin: bottom;
  box-shadow: 0 30px 80px -20px rgba(232,40,63,.5);
}
body.is-ready .hero-slab { animation: slab-up 1.1s var(--ease) .1s forwards; }
@keyframes slab-up { to { transform: scaleY(1); } }

.hero-word {
  --r: .4em; /* half the drum face height */
  position: relative; display: flex; justify-content: center;
  font-family: 'Unbounded', 'Cairo', sans-serif; font-weight: 900;
  font-size: var(--word); line-height: .8; letter-spacing: -.02em;
  perspective: 14em;
  user-select: none;
  opacity: 0; transform: translateY(14%);
}
body.is-ready .hero-word { animation: word-in 1s var(--ease) .45s forwards; }
@keyframes word-in { to { opacity: 1; transform: none; } }

/* Each letter is a four-sided drum (solid / outline / solid / outline) that
   turns over a quarter at a time. Letters are phase-shifted, so a twist
   travels across the word, as in the reference. */
.hero-word .lt { position: relative; display: block; }
.hero-word .sz { visibility: hidden; display: block; }
.hero-word .drum {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1));
  animation: drum-turn 6s infinite;
  animation-delay: calc(var(--i) * -.55s);
}
.hero-word .f {
  position: absolute; inset: 0; display: block; font-style: normal;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.hero-word .f1 { transform: rotateX(0deg)   translateZ(var(--r)); }
.hero-word .f2 { transform: rotateX(90deg)  translateZ(var(--r)); }
.hero-word .f3 { transform: rotateX(180deg) translateZ(var(--r)); }
.hero-word .f4 { transform: rotateX(270deg) translateZ(var(--r)); }
.hero-word .f1, .hero-word .f3 { color: var(--off-white); }
/* outline faces: filled glyphs turned into a clean outline by the #hero-outline SVG filter */
.hero-word .f2, .hero-word .f4 { color: var(--off-white); filter: url(#hero-outline); }

@keyframes drum-turn {
  0%, 6%    { transform: translateZ(calc(var(--r) * -1)) rotateX(0deg);    animation-timing-function: cubic-bezier(.75,0,.25,1); }
  25%, 31%  { transform: translateZ(calc(var(--r) * -1)) rotateX(-90deg);  animation-timing-function: cubic-bezier(.75,0,.25,1); }
  50%, 56%  { transform: translateZ(calc(var(--r) * -1)) rotateX(-180deg); animation-timing-function: cubic-bezier(.75,0,.25,1); }
  75%, 81%  { transform: translateZ(calc(var(--r) * -1)) rotateX(-270deg); animation-timing-function: cubic-bezier(.75,0,.25,1); }
  100%      { transform: translateZ(calc(var(--r) * -1)) rotateX(-360deg); }
}

/* ---------- Meta labels under the word ---------- */
.hero-meta {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 1.4vh;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey);
  opacity: 0;
}
body.is-ready .hero-meta { animation: fade-up .8s var(--ease) 1.1s forwards; }

/* ---------- Copy + actions ---------- */
.hero-copy {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 4vw, 60px);
  align-items: end;
  margin-top: 2.4vh;
}
.hero-copy > * { min-width: 0; }
.hero-copy h1 {
  font-size: clamp(1.35rem, min(3.6vw, 4.6vh), 3rem); line-height: 1.15;
  text-wrap: balance;
  opacity: 0; transform: translateY(16px);
}
.hero-copy h1 .accent { color: var(--red-bright); }
.hero-copy p.lead {
  margin-top: 1.2vh; max-width: 52ch;
  font-size: clamp(.9rem, min(1.35vw, 2.2vh), 1.2rem);
  opacity: 0; transform: translateY(16px);
}
.hero-side { display: grid; gap: 1.8vh; justify-items: end; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end;
  opacity: 0; transform: translateY(16px);
}
body.is-ready .hero-copy h1      { animation: fade-up .9s var(--ease) 1.15s forwards; }
body.is-ready .hero-copy p.lead  { animation: fade-up .9s var(--ease) 1.3s forwards; }
body.is-ready .hero-actions      { animation: fade-up .9s var(--ease) 1.4s forwards; }

.hero-proof {
  display: flex; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(16px);
}
body.is-ready .hero-proof { animation: fade-up .9s var(--ease) 1.55s forwards; }
.hero-proof .faces { display: flex; }
.hero-proof .faces img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--black); margin-inline-start: -10px;
}
.hero-proof .faces img:first-child { margin-inline-start: 0; }
.hero-proof p { font-size: .9rem; color: var(--grey); }
.hero-proof p strong { color: var(--off-white); }

@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

/* ---------- Fan of work cards ---------- */
.hero-fan {
  --cw: clamp(92px, min(15vw, 26vh), 228px);
  --ch: calc(var(--cw) * 1.28);
  --spread: 0deg;
  --tilt: 0deg;
  position: relative; z-index: 1;
  flex: 1 1 auto; min-height: 90px;
  margin-top: 3vh;
  direction: ltr;
}
.hero-fan.is-dealt { --spread: 12deg; }
@media (max-width: 900px) { .hero-fan.is-dealt { --spread: 13deg; } }

.hero-ring {
  position: absolute; left: 50%; top: calc(var(--ch) * .55);
  width: calc(var(--cw) * 3.4); aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none; opacity: 0;
}
body.is-ready .hero-ring { animation: mark-in 1s var(--ease) 1.6s forwards; }
.hero-ring svg { width: 100%; height: 100%; overflow: visible; animation: ring-spin 40s linear infinite; }
.hero-ring circle { fill: none; stroke: var(--grey-line); stroke-width: 1.2; stroke-dasharray: 4 6; }
.hero-ring text {
  fill: var(--grey); font-family: 'Unbounded', var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: 4px;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
.hero-ring .marker {
  position: absolute; left: 50%; top: -2px; transform: translate(-50%, -100%);
  display: grid; justify-items: center; gap: 2px;
  font-family: 'Unbounded', var(--font-display); font-weight: 800; font-size: .8rem;
  color: var(--off-white); letter-spacing: .06em; white-space: nowrap;
}
.hero-ring .marker::before {
  content: ''; border-inline: 6px solid transparent; border-bottom: 8px solid var(--red-bright);
}

.fan-wheel {
  position: absolute; left: 50%; top: 0;
  width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 260%;
}
.hero-fan.is-live .fan-wheel { animation: wheel-swing 9s infinite; }
/* holds on each step, then swings to the next card, like the reference carousel */
@keyframes wheel-swing {
  0%, 14%   { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.7,0,.25,1); }
  22%, 36%  { transform: rotate(-12deg); animation-timing-function: cubic-bezier(.7,0,.25,1); }
  44%, 58%  { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.7,0,.25,1); }
  66%, 80%  { transform: rotate(12deg);  animation-timing-function: cubic-bezier(.7,0,.25,1); }
  88%, 100% { transform: rotate(0deg); }
}
.hero-fan:hover .fan-wheel { animation-play-state: paused; }

.fcard {
  position: absolute; left: 0; top: 0;
  width: var(--cw); height: var(--ch);
  border-radius: 16px; overflow: hidden;
  background: var(--black-card);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 50px -18px rgba(0,0,0,.85);
  transform-origin: 50% 260%;
  transform: rotate(calc(var(--i) * var(--spread) + var(--tilt))) translateY(var(--lift, 0px));
  transition: transform 1.2s var(--ease) calc(.9s + var(--d, 0s)), box-shadow .4s var(--ease);
  z-index: var(--z, 1);
}
.hero-fan.is-live .fcard { transition: transform .7s var(--ease), box-shadow .4s var(--ease); }
.fcard img { width: 100%; height: 100%; object-fit: cover; }
.fcard:hover, .fcard:focus-visible { --lift: -26px; box-shadow: 0 40px 60px -16px rgba(232,40,63,.45); }

.fcard.is-brand {
  background: linear-gradient(160deg, var(--red-bright), var(--red-deep));
  display: grid; place-items: center;
}
.fcard.is-brand img { width: 58%; height: auto; object-fit: contain; }
.fcard.is-brand::before, .fcard.is-brand::after {
  content: ''; position: absolute; width: 0; height: 0;
  border-inline: 6px solid transparent;
}
.fcard.is-brand::before { top: 12px; left: 50%; transform: translateX(-50%); border-bottom: 8px solid rgba(10,10,10,.6); }
.fcard.is-brand::after  { bottom: 12px; left: 50%; transform: translateX(-50%); border-top: 8px solid rgba(10,10,10,.6); }

.fcard.is-sloth { background: radial-gradient(120% 90% at 50% 20%, #2a1418, #0d0a0b); }
.fcard.is-sloth img { object-fit: contain; object-position: center bottom; padding-top: 10%; }
.fcard .fc-tag {
  position: absolute; top: 10px; inset-inline-end: 12px; z-index: 1;
  font-family: 'Unbounded', var(--font-display); font-size: .58rem; font-weight: 700;
  line-height: 1.1; text-align: end; color: var(--off-white); letter-spacing: .06em;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-copy { grid-template-columns: 1fr; text-align: center; }
  .hero-copy p.lead { margin-inline: auto; }
  .hero-side { justify-items: center; }
  .hero-actions { justify-content: center; }
  .hero-meta { justify-content: center; }
  .hero-meta span:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .hero { --word: max(3.4rem, min(22vw, 13vh)); }
  .hero-marks b { display: none; }
  .hero-fan { --cw: clamp(92px, min(34vw, 20vh), 150px); }
  .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-actions .btn { padding: 12px 18px; font-size: .9rem; }
  .hero-fan.is-dealt { --spread: 14deg; }
  .fcard { border-radius: 12px; }
}

/* Short screens: drop the secondary lines first so the fan keeps some room */
@media (max-height: 760px) and (max-width: 900px) { .hero-proof { display: none; } }
@media (max-height: 640px) and (max-width: 900px) { .hero-copy p.lead { display: none; } }
@media (max-height: 620px) and (min-width: 901px) { .hero-proof { display: none; } }