/* ============================================================
   WTFITNESS — animated poster hero
   Text layers rebuilt as HTML over the clean plate.
   All motion: transforms + opacity only.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Permanent+Marker&family=Caveat:wght@600;700&display=swap');

/* Suppress the banner's dark top fade over the animated hero —
   its top text sits on a light wall and must stay legible */
.project-poster-banner:has(.wtf-hero)::before { display: none; }

.wtf-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: #0a0606;
  container-type: inline-size;
  user-select: none;
}

/* ---------- background photo (ken burns) ---------- */
.wtf-bg {
  position: absolute; inset: 0;
  transform: translate(calc(var(--px, 0) * -3px), calc(var(--py, 0) * -2px));
}
.wtf-bg-zoom {
  position: absolute; inset: 0;
  transform: scale(1.05);
}
.wtf-bg-zoom img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* entrance zoom on inner, idle drift on img */
.wtf-hero.play .wtf-bg-zoom {
  animation: wtf-bg-in 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wtf-hero.play .wtf-bg-zoom img {
  animation: wtf-bg-drift 24s ease-in-out 3.5s infinite;
}
@keyframes wtf-bg-in {
  from { opacity: 0; transform: scale(1.05); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1.0); }
}
@keyframes wtf-bg-drift {
  0%   { transform: scale(1.0)  translate(0, 0); }
  50%  { transform: scale(1.025) translate(-0.6%, -0.4%); }
  100% { transform: scale(1.0)  translate(0, 0); }
}

/* ---------- cast cut-out (above sign, below text) ---------- */
.wtf-cast {
  position: absolute; inset: 0;
  transform: translate(calc(var(--px, 0) * 1.5px), calc(var(--py, 0) * 1px));
  pointer-events: none;
}
.wtf-cast img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.wtf-hero.play .wtf-cast img {
  animation: wtf-cast-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.0s both;
}
@keyframes wtf-cast-rise {
  from { opacity: 0; transform: translateY(20px) scale(1.01); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- shared: text layer container ---------- */
.wtf-layers {
  position: absolute; inset: 0;
  transform: translate(calc(var(--px, 0) * 3px), calc(var(--py, 0) * 2px));
}

/* ---------- 1. top banner ---------- */
.wtf-topline {
  position: absolute; top: 2.6%; left: 0; right: 0;
  text-align: center;
  font-family: 'Anton', var(--font-body);
  font-size: 2.5cqw;
  letter-spacing: 0.42em;
  color: #171215;
  text-transform: uppercase;
}
.wtf-hero.play .wtf-topline {
  animation: wtf-topline-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
@keyframes wtf-topline-in {
  from { opacity: 0; letter-spacing: 0.16em; }
  to   { opacity: 1; letter-spacing: 0.42em; }
}

/* ---------- 2. metal WTF sign ---------- */
.wtf-sign {
  position: absolute;
  left: 28%; width: 43%;
  top: 6.5%; height: 29%;
  background:
    linear-gradient(115deg, #b9bcc0 0%, #dfe2e6 22%, #aeb2b8 48%, #d3d6da 72%, #9fa3a9 100%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    0 1.2cqw 3cqw rgba(0,0,0,0.45),
    inset 0 0 2cqw rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wtf-hero.play .wtf-sign {
  animation: wtf-sign-drop 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.8s both;
}
@keyframes wtf-sign-drop {
  0%   { opacity: 0; transform: translateY(-130%); }
  55%  { opacity: 1; transform: translateY(3.5%); }
  75%  { transform: translateY(-1.4%); }
  100% { opacity: 1; transform: translateY(0); }
}
.wtf-sign .bolt {
  position: absolute;
  width: 1.4cqw; height: 1.4cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eceef0, #8a8e94 60%, #55585d);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.wtf-sign .bolt:nth-child(1) { top: 6%; left: 2.5%; }
.wtf-sign .bolt:nth-child(2) { top: 6%; right: 2.5%; }
.wtf-sign .bolt:nth-child(3) { bottom: 6%; left: 2.5%; }
.wtf-sign .bolt:nth-child(4) { bottom: 6%; right: 2.5%; }
.wtf-sign-word {
  font-family: 'Anton', var(--font-body);
  font-size: 15.5cqw;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow:
    0.18cqw 0.18cqw 0 #c42b1c,
    0.5cqw 0.6cqw 1.4cqw rgba(0,0,0,0.55);
}
.wtf-sign-fitness {
  font-family: 'Anton', var(--font-body);
  font-size: 1.55cqw;
  letter-spacing: 0.3em;
  color: #3a3d42;
  writing-mode: vertical-rl;
  margin-left: 0.6cqw;
  align-self: center;
}
/* light sheen sweep — first pass right after landing, repeats ~9s */
.wtf-sign::after {
  content: '';
  position: absolute; inset: -20%;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.wtf-hero.play .wtf-sign::after {
  animation: wtf-sheen 9s linear 1.45s infinite;
}
@keyframes wtf-sheen {
  0%   { transform: translateX(-120%); }
  9%   { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ---------- 3. round badge ---------- */
.wtf-badge {
  position: absolute;
  left: 73.2%; top: 11.5%;
  width: 12.6cqw; height: 12.6cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #2a2c31, #131417 70%);
  border: 0.42cqw solid #c42b1c;
  box-shadow: 0 0.8cqw 2.4cqw rgba(0,0,0,0.5), inset 0 0 1.6cqw rgba(0,0,0,0.8);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.3cqw;
}
.wtf-hero.play .wtf-badge {
  animation: wtf-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
}
@keyframes wtf-badge-pop {
  from { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}
.wtf-badge .b1 {
  font-family: 'Anton', var(--font-body);
  font-size: 3.6cqw; line-height: 1; color: #fff;
  text-shadow: 0.1cqw 0.1cqw 0 #c42b1c;
}
.wtf-badge .b2 {
  font-family: 'Anton', var(--font-body);
  font-size: 1.05cqw; letter-spacing: 0.34em; color: #d9dbdf;
}

/* ---------- 4. NO PAIN / NO GAIN / NO IDEA ---------- */
.wtf-nopain {
  position: absolute; left: 2.2%; top: 11.5%;
  font-family: 'Anton', var(--font-body);
  font-size: 3.5cqw; line-height: 1.24;
  color: #23191a;
  text-transform: uppercase;
}
.wtf-nopain span { display: block; }
.wtf-nopain .idea { color: #c42b1c; }
.wtf-hero.play .wtf-nopain .stamp1 { animation: wtf-stamp 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) 1.8s both; }
.wtf-hero.play .wtf-nopain .stamp2 { animation: wtf-stamp 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) 2.05s both; }
.wtf-hero.play .wtf-nopain .idea   { animation: wtf-stamp-late 0.32s cubic-bezier(0.34, 1.3, 0.64, 1) 2.65s both; }
@keyframes wtf-stamp {
  from { opacity: 0; transform: scale(1.7); }
  60%  { opacity: 1; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wtf-stamp-late {
  from { opacity: 0; transform: scale(1.9) rotate(0.5deg); }
  55%  { opacity: 1; transform: scale(0.95) rotate(-2.4deg); }
  to   { opacity: 1; transform: scale(1) rotate(-1.6deg); }
}
.wtf-nopain .idea { transform: rotate(-1.6deg); }

/* ---------- 5. FITNESS HAS NEVER BEEN THIS UNFIT ---------- */
.wtf-punchline {
  position: absolute; left: 2.4%; bottom: 8.5%;
  font-family: 'Permanent Marker', var(--font-body);
  font-size: 3.3cqw; line-height: 1.28;
  color: #f4f1ec;
  text-shadow: 0 0.3cqw 1.2cqw rgba(0,0,0,0.7);
  transform: rotate(-1.2deg);
}
.wtf-punchline span { display: block; }
.wtf-punchline .l1, .wtf-punchline .l2 { }
.wtf-punchline .unfit { color: #c42b1c; text-shadow: 0 0.3cqw 1cqw rgba(0,0,0,0.8); }
.wtf-hero.play .wtf-punchline .l1    { animation: wtf-write 0.4s ease-out 2.4s both; }
.wtf-hero.play .wtf-punchline .l2    { animation: wtf-write 0.4s ease-out 2.55s both; }
.wtf-hero.play .wtf-punchline .unfit { animation: wtf-stamp-late 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) 2.85s both; }
@keyframes wtf-write {
  from { opacity: 0; transform: translateX(-1.2cqw); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- 6. SAME GYM. ZERO CLUE. badge ---------- */
.wtf-zeroclue {
  position: absolute; right: 1.6%; bottom: 5.5%;
  background: linear-gradient(120deg, #a01313, #c42b1c);
  padding: 1.2cqw 2cqw;
  transform: rotate(-2deg) skewX(-6deg);
  box-shadow: 0 0.8cqw 2.4cqw rgba(0,0,0,0.55);
  font-family: 'Anton', var(--font-body);
  font-size: 2.5cqw; line-height: 1.3;
  color: #fff; text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.wtf-zeroclue span { display: block; transform: skewX(6deg); }
.wtf-hero.play .wtf-zeroclue {
  animation: wtf-slide-in 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) 2.9s both;
}
@keyframes wtf-slide-in {
  from { opacity: 0; transform: translateX(120%) rotate(-2deg) skewX(-6deg); }
  70%  { opacity: 1; transform: translateX(-3%) rotate(-2deg) skewX(-6deg); }
  to   { opacity: 1; transform: translateX(0) rotate(-2deg) skewX(-6deg); }
}

/* ---------- 7. chalkboard ---------- */
.wtf-board {
  position: absolute;
  left: 87.9%; top: 13%;
  width: 9.8%; height: 24%;
  padding: 1cqw 0.55cqw;
  display: flex; flex-direction: column; justify-content: space-between;
}
.wtf-board-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.2cqw;
  letter-spacing: 0.06em;
  color: #f0ede6;
  text-align: center;
  border-bottom: 1px solid rgba(240,237,230,0.4);
  padding-bottom: 0.3cqw;
}
.wtf-board-line {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.02cqw;
  line-height: 1.2;
  color: #e8e4da;
  white-space: nowrap;
  overflow: hidden;
  display: flex; gap: 0.4cqw;
}
.wtf-board-line .t { color: #c4695c; }
.wtf-hero.play .wtf-board-title           { animation: wtf-type 0.3s steps(10) 3.0s both; }
.wtf-hero.play .wtf-board-line:nth-child(2) { animation: wtf-type 0.24s steps(10) 3.1s both; }
.wtf-hero.play .wtf-board-line:nth-child(3) { animation: wtf-type 0.24s steps(10) 3.2s both; }
.wtf-hero.play .wtf-board-line:nth-child(4) { animation: wtf-type 0.24s steps(10) 3.3s both; }
.wtf-hero.play .wtf-board-line:nth-child(5) { animation: wtf-type 0.24s steps(10) 3.4s both; }
.wtf-hero.play .wtf-board-line:nth-child(6) { animation: wtf-type 0.24s steps(10) 3.5s both; }
.wtf-hero.play .wtf-board-line:nth-child(7) { animation: wtf-type 0.24s steps(10) 3.62s both; }
@keyframes wtf-type {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  1%   { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* idle: dodgy fluoro flicker on the whole board */
.wtf-hero.play .wtf-board {
  animation: wtf-flicker 7s linear 4.5s infinite;
}
@keyframes wtf-flicker {
  0%, 100% { opacity: 1; }
  61% { opacity: 1; } 61.5% { opacity: 0.55; }
  62% { opacity: 1; } 63% { opacity: 0.75; }
  63.5% { opacity: 1; }
}

/* ---------- 8. lightbox heart glow (idle) ---------- */
.wtf-heart {
  position: absolute;
  left: 93.2%; top: 52.5%;
  width: 3.2cqw; height: 3.2cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,40,40,0.5), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.wtf-hero.play .wtf-heart {
  animation: wtf-heart-pulse 3.2s ease-in-out 4s infinite;
}
@keyframes wtf-heart-pulse {
  0%, 100% { opacity: 0; transform: scale(0.9); }
  50%      { opacity: 0.8; transform: scale(1.15); }
}

/* ---------- pre-play: hide animated layers (motion users only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wtf-hero:not(.play) .wtf-bg-zoom,
  .wtf-hero:not(.play) .wtf-cast img,
  .wtf-hero:not(.play) .wtf-topline,
  .wtf-hero:not(.play) .wtf-sign,
  .wtf-hero:not(.play) .wtf-badge,
  .wtf-hero:not(.play) .wtf-nopain span,
  .wtf-hero:not(.play) .wtf-punchline span,
  .wtf-hero:not(.play) .wtf-zeroclue,
  .wtf-hero:not(.play) .wtf-board-title,
  .wtf-hero:not(.play) .wtf-board-line,
  .wtf-hero:not(.play) .wtf-heart { opacity: 0; }
}

/* ---------- reduced motion: static finished composition ---------- */
@media (prefers-reduced-motion: reduce) {
  .wtf-hero .wtf-bg-zoom { transform: scale(1); opacity: 1; }
  .wtf-hero *, .wtf-hero *::after {
    animation: none !important;
  }
}

/* ---------- mobile: shorter entrance (~2s), same punchline order ---------- */
@media (max-width: 640px) {
  .wtf-hero.play .wtf-bg-zoom  { animation-duration: 2s; }
  .wtf-hero.play .wtf-topline  { animation-delay: 0.2s; }
  .wtf-hero.play .wtf-sign     { animation-delay: 0.4s; }
  .wtf-hero.play .wtf-sign::after { animation-delay: 0.85s; }
  .wtf-hero.play .wtf-badge    { animation-delay: 0.75s; }
  .wtf-hero.play .wtf-nopain .stamp1 { animation-delay: 1.0s; }
  .wtf-hero.play .wtf-nopain .stamp2 { animation-delay: 1.15s; }
  .wtf-hero.play .wtf-nopain .idea   { animation-delay: 1.5s; }
  .wtf-hero.play .wtf-punchline .l1    { animation-delay: 1.35s; }
  .wtf-hero.play .wtf-punchline .l2    { animation-delay: 1.45s; }
  .wtf-hero.play .wtf-punchline .unfit { animation-delay: 1.65s; }
  .wtf-hero.play .wtf-zeroclue  { animation-delay: 1.7s; }
  .wtf-hero.play .wtf-board-title           { animation-delay: 1.75s; }
  .wtf-hero.play .wtf-board-line:nth-child(2) { animation-delay: 1.82s; }
  .wtf-hero.play .wtf-board-line:nth-child(3) { animation-delay: 1.89s; }
  .wtf-hero.play .wtf-board-line:nth-child(4) { animation-delay: 1.96s; }
  .wtf-hero.play .wtf-board-line:nth-child(5) { animation-delay: 2.03s; }
  .wtf-hero.play .wtf-board-line:nth-child(6) { animation-delay: 2.1s; }
  .wtf-hero.play .wtf-board-line:nth-child(7) { animation-delay: 2.17s; }
  .wtf-hero.play .wtf-board { animation-delay: 3s; }
  .wtf-hero.play .wtf-heart { animation-delay: 2.5s; }
}