/* Concept preview: the selected minimal dinosaur with mitten paws. */
.reel-dino { width: 120%; left: -10%; top: -62%; }
.reel-dino-back { width: 86%; left: 7%; top: -53%; }
.reel-face { position: absolute; z-index: 0; width: 86%; height: auto; left: 7%; top: -53%; overflow: visible; pointer-events: none; }
.reel-face-eye { transform-box: fill-box; transform-origin: center; transition: transform 85ms ease-out; }
.reel-face-lids { opacity: 0; }
.reel-face.is-blinking .reel-face-eye { transform: scaleY(.08); }
.reel-face.is-blinking .reel-face-lids { opacity: 1; }
.reel-hand { position: absolute; z-index: 2; width: 9%; height: auto; top: 30%; pointer-events: none; user-select: none; }
.reel-hand-left { left: -3%; }
.reel-hand-right { right: -3%; transform: scaleX(-1); }

.brand-chase { position: relative; display: block; flex: 0 0 84px; width: 84px; height: 58px; overflow: hidden; pointer-events: none; }
.wordmark { --step-duration: 720ms; --chase-duration: calc(var(--step-duration) * 8); gap: 8px; }
.wordmark-letters { display: inline-flex; white-space: nowrap; }
.wordmark-letters > span { --hop: -2.6px; --side: -1px; --rock: -1.5deg; display: inline-block; transform-origin: 50% 90%; animation: footfall-letter calc(var(--step-duration) * 2) linear infinite; }
.wordmark-letters > span:nth-child(1) { --hop: -3px; --side: -1.5px; }
.wordmark-letters > span:nth-child(2) { --side: 1px; --rock: 1.5deg; animation-delay: 8ms; }
.wordmark-letters > span:nth-child(3) { --hop: -2px; --side: -.6px; animation-delay: 16ms; }
.wordmark-letters > span:nth-child(4) { --side: 1.4px; --rock: 2deg; animation-delay: 24ms; }
.wordmark-letters > span:nth-child(5) { --hop: -2.2px; animation-delay: 32ms; }
.wordmark-letters > span:nth-child(6) { --hop: -1.7px; --side: .7px; --rock: 1deg; animation-delay: 40ms; }
.wordmark-letters > span:nth-child(7) { --hop: -3.2px; --side: 1.3px; --rock: 0deg; animation-delay: 48ms; }
.brand-chase .brand-mascot { width: 52px; height: 52px; }
.mascot-dino-track { position: absolute; left: 0; bottom: 3px; width: 54px; height: 54px; }
.mascot-dino, .mascot-chicken { display: block; width: 100%; height: 100%; overflow: visible; }
.dino-body, .dino-arm { fill: #824bc6; }
.dino-leg { fill: none; stroke: #824bc6; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.dino-leg-back { stroke: #7743b8; transform-origin: 75px 105px; }
.dino-leg-front { transform-origin: 90px 106px; }
.dino-arm-front { transform-origin: 89px 83px; }
.dino-face { fill: #302039; }
.dino-tooth { fill: #fff9e7; }
.dino-smile { fill: none; stroke: #302039; stroke-width: 2.2; stroke-linecap: round; }
.dino-gait { transform-origin: 77px 107px; }
.mascot-chicken-track { position: absolute; left: 52px; bottom: 3px; width: 25px; height: 25px; }
.chicken-flight { display: block; width: 100%; height: 100%; transform-origin: 50% 85%; animation: chicken-flight var(--chase-duration) linear infinite; }
.chicken-feather { position: absolute; width: 5px; height: 8px; left: 4px; bottom: 12px; fill: #fff8e9; stroke: #9c8ca7; stroke-width: 1; opacity: 0; animation: feather-drift var(--chase-duration) linear infinite; }
.feather-shaft { fill: none; }
.feather-1 { --feather-x: -13px; --feather-y: -17px; --feather-turn: -65deg; }
.feather-2 { --feather-x: -3px; --feather-y: -24px; --feather-turn: 45deg; animation-delay: 60ms; }
.feather-3 { --feather-x: 10px; --feather-y: -18px; --feather-turn: 120deg; animation-delay: 110ms; }
.chicken-body { fill: #fff8e9; stroke: #51425f; stroke-width: 1.6; stroke-linejoin: round; }
.chicken-comb { fill: #de645c; }
.chicken-beak { fill: #dca052; }
.chicken-eye { fill: #302039; }
.chicken-wing { fill: none; stroke: #9c8ca7; stroke-width: 1.7; stroke-linecap: round; transform-origin: 14px 28px; }
.chicken-leg { fill: none; stroke: #bc8844; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.chicken-leg-back { transform-origin: 23px 32px; }
.chicken-leg-front { transform-origin: 30px 32px; }
.mascot-dino-track { animation: chase-distance var(--chase-duration) ease-in-out infinite; }
.brand-chase .dino-gait { animation: dino-hop var(--step-duration) linear infinite; }
.brand-chase .dino-leg-front { animation: dino-stride calc(var(--step-duration) * 2) ease-in-out infinite; }
.brand-chase .dino-leg-back { animation: dino-stride calc(var(--step-duration) * 2) ease-in-out infinite; animation-delay: calc(var(--step-duration) * -1); }
.brand-chase .dino-arm-front { animation: arm-swing calc(var(--step-duration) * 2) ease-in-out infinite; }
.chicken-gait { animation: chicken-bounce calc(var(--step-duration) / 2) ease-in-out infinite; }
.chicken-leg-front { animation: chicken-stride calc(var(--step-duration) / 2) ease-in-out infinite alternate; }
.chicken-leg-back { animation: chicken-stride calc(var(--step-duration) / 2) ease-in-out infinite alternate-reverse; }
.chicken-wing { animation: wing-flap calc(var(--step-duration) / 2) ease-in-out infinite alternate; }
/* Create every animation in the same style update, including the injected rig. */
.wordmark:not(.is-chasing) * { animation-name: none; }

@keyframes chase-distance { 0%, 100% { transform: translateX(0); } 60%, 70% { transform: translateX(4px); } 88% { transform: translateX(1px); } }
@keyframes chicken-flight {
  0%, 62%, 88%, 100% { transform: translate(0, 0) rotate(0); }
  62% { animation-timing-function: ease-out; }
  72% { transform: translate(4px, -15px) rotate(-12deg); animation-timing-function: ease-in; }
  88% { animation-timing-function: linear; }
}
@keyframes feather-drift {
  0%, 64%, 94%, 100% { opacity: 0; }
  0%, 64% { transform: translate(0, -2px) rotate(0); }
  68% { opacity: .95; }
  80% { opacity: .8; transform: translate(var(--feather-x), var(--feather-y)) rotate(var(--feather-turn)); }
  94%, 100% { transform: translate(calc(var(--feather-x) - 5px), -5px) rotate(calc(var(--feather-turn) + 50deg)); }
}
/* Touchdown is the start of each beat; the second half is the next little jump. */
@keyframes dino-hop {
  0%, 100% { transform: translateY(0) rotate(16deg) scale(1.03, .96); }
  10% { transform: translateY(1px) rotate(18deg) scale(1.04, .94); }
  28% { transform: translateY(-5px) rotate(16deg) scale(1, 1); }
  52% { transform: translateY(-15px) rotate(12deg) scale(1, 1); }
  70% { transform: translateY(-12px) rotate(13deg) scale(1, 1); }
  90% { transform: translateY(-4px) rotate(15deg) scale(1, 1); }
}
@keyframes dino-stride {
  0%, 100% { transform: rotate(22deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(-38deg); }
  75% { transform: rotate(3deg); }
}
@keyframes arm-swing { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(22deg); } }
/* One soft arc per two steps, then over a second at rest. No shake or overshoot. */
@keyframes footfall-letter {
  0%, 2%, 28%, 100% { transform: translate(0, 0) rotate(0); }
  2% { animation-timing-function: cubic-bezier(.15, .65, .35, 1); }
  14% { transform: translate(var(--side), var(--hop)) rotate(var(--rock)); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
}
@keyframes chicken-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes chicken-stride { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
@keyframes wing-flap { from { transform: rotate(-12deg); } to { transform: rotate(18deg); } }

.experience-gaming { position: relative; width: min(100%, 460px); aspect-ratio: 460 / 214; margin: 30px auto 0; pointer-events: none; user-select: none; color: #51445e; }
.game-cable { position: absolute; inset: 0; width: 100%; height: 100%; }
.game-cable path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.game-tv { position: absolute; left: 1%; top: 14%; width: 47%; height: 66%; display: grid; grid-template-columns: 1fr 10px; gap: 9px; padding: 11px 10px 13px; border: 2px solid currentColor; border-radius: 13px; background: #dce1ed; transform: rotate(-2deg); }
.game-tv::before, .game-tv::after { content: ''; position: absolute; top: 100%; width: 2px; height: 11%; background: currentColor; transform-origin: top; }
.game-tv::before { left: 15%; transform: rotate(18deg); }
.game-tv::after { right: 15%; transform: rotate(-18deg); }
.game-screen { display: flex; align-items: center; overflow: hidden; border: 1px solid #a4abba; border-radius: 7px; background: #f5f7fb; }
.game-screen canvas { display: block; width: 100%; height: auto; aspect-ratio: 2; image-rendering: pixelated; }
.game-tv-controls { display: flex; align-items: center; flex-direction: column; gap: 7px; padding-top: 8px; }
.game-tv-controls span { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; }
.game-tv-controls i { width: 3px; height: 3px; border-radius: 50%; background: #824bc6; margin-top: auto; }
.game-console { position: absolute; left: 17%; top: 85%; width: 15%; height: 7%; border: 1.5px solid currentColor; border-radius: 3px; background: #dce1ed; }
.game-console span { position: absolute; left: 12%; right: 32%; top: 35%; height: 2px; background: #a4abba; }
.game-console i { position: absolute; right: 12%; top: 35%; width: 3px; height: 3px; border-radius: 50%; background: #824bc6; }
.game-player { position: absolute; right: -1%; bottom: 1%; width: 45%; aspect-ratio: 1; transform-origin: 55% 88%; }
.game-player img { display: block; width: 100%; height: 100%; object-fit: contain; }
.controller-press { position: absolute; left: 36.2%; top: 59.1%; width: 1.7%; height: .7%; transform: translate(-50%, -50%) rotate(9deg); border-radius: 50%; background: #f0e6ff; opacity: 0; }
.experience-gaming.is-pressing .controller-press { opacity: .9; }
@media (max-width: 760px) {
  .brand-chase { width: 74px; flex-basis: 74px; height: 49px; }
  .mascot-dino-track { width: 46px; height: 46px; }
  .mascot-chicken-track { left: 44px; width: 23px; height: 23px; }
  .experience-gaming { margin-top: 24px; }
  .game-tv { padding: 7px 6px 9px; gap: 5px; border-width: 1.5px; border-radius: 9px; grid-template-columns: 1fr 7px; }
  .game-tv-controls { gap: 5px; padding-top: 5px; }
  .game-tv-controls span { width: 6px; height: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark * { animation: none !important; transform: none !important; }
  .game-player { transform: none !important; }
  .controller-press { display: none; }
  .reel-face * { animation: none !important; transition: none !important; }
}