/* Each section has its own entrance; body copy stays still after the first view. */
.motion-ready [data-enter]:not(.has-entered) { opacity: 0; }
.motion-ready [data-enter].has-entered { animation: copy-enter .65s cubic-bezier(.2,.7,.2,1) both; }
.motion-ready [data-enter="board"].has-entered { animation-name: board-enter; animation-duration: .95s; }
.motion-ready [data-enter="treasure"].has-entered { animation-name: treasure-enter; animation-duration: 1.1s; }
.motion-ready [data-enter="panel"].has-entered { animation-name: panel-enter; animation-duration: .8s; }
.motion-ready [data-enter="footer"].has-entered { animation-name: footer-enter; }

/* A brief ripple invites the first move. The board itself is a stable touch target. */
.motion-ready .demo-board:not(.is-playing):not(.is-complete) .number-tile {
  animation: tile-invitation 7s ease-in-out var(--tile-delay) infinite;
}
.number-tile:nth-child(1) { --tile-delay: .85s; }
.number-tile:nth-child(2) { --tile-delay: 1s; }
.number-tile:nth-child(3) { --tile-delay: 1.15s; }
.number-tile:nth-child(4) { --tile-delay: 1.3s; }
.number-tile:nth-child(5) { --tile-delay: 1.45s; }
.number-tile:nth-child(6) { --tile-delay: 1.6s; }
.number-tile::after {
  content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, #fff9 43%, #fff2 53%, transparent 72%) 150% 0 / 300% 100%;
  opacity: 0;
}
.motion-ready .demo-board:not(.is-playing):not(.is-complete) .number-tile::after {
  animation: tile-reflection 7s ease-in-out var(--tile-delay) infinite;
}
.motion-ready .demo-table:before { animation: board-aura 7s ease-in-out infinite; }
.motion-ready .demo-sticker { animation: sticker-nudge 7s ease-in-out 2s infinite; transform-origin: 20% 50%; }
.demo-table:has(.is-playing) .demo-sticker { animation: none; }
.demo-board.is-playing .number-tile { translate: none; rotate: none; }

/* Treasure motion follows the gold light and the two coins, with a still caption. */
.motion-ready .treasure-stage img {
  animation: treasure-float 6s ease-in-out infinite;
  transform-origin: 50% 65%;
}
.motion-ready .treasure-halo { animation: treasure-glow 5s ease-in-out infinite; }
.treasure-halo::before {
  content: ''; position: absolute; inset: 18% -5% 10%; border-radius: 50%;
  background: conic-gradient(from 10deg, transparent 0deg 50deg, #ffd96a1f 63deg, transparent 82deg 154deg, #ffdc7b12 173deg, transparent 194deg 270deg, #ffda681a 292deg, transparent 315deg);
  filter: blur(8px); opacity: 0;
}
.motion-ready .treasure-halo::before { opacity: 1; animation: treasure-rays 28s linear infinite; }
.motion-ready .coin-one { animation: coin-one-orbit 6s ease-in-out -.8s infinite; }
.motion-ready .coin-two { animation: coin-two-orbit 7s ease-in-out -2.3s infinite; }
.treasure-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.treasure-sparks i {
  position: absolute; left: 17%; top: 27%; width: 14px; aspect-ratio: 1;
  background: #fff3b0; clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
  opacity: 0; --spark-delay: 0s;
}
.treasure-sparks i:nth-child(2) { left: 76%; top: 33%; width: 10px; --spark-delay: -.9s; }
.treasure-sparks i:nth-child(3) { left: 35%; top: 14%; width: 17px; --spark-delay: -2.1s; }
.treasure-sparks i:nth-child(4) { left: 72%; top: 66%; width: 15px; --spark-delay: -3.2s; }
.treasure-sparks i:nth-child(5) { left: 20%; top: 71%; width: 9px; --spark-delay: -4s; }
.motion-ready .treasure-sparks i { animation: treasure-spark 5s ease-in-out var(--spark-delay) infinite; }
.motion-ready .discovery-list .feature-orb { animation: feature-glint 8s ease-in-out infinite; }
.discovery-list article:nth-child(2) .feature-orb { animation-delay: 1.2s; }
.discovery-list article:nth-child(3) .feature-orb { animation-delay: 2.4s; }

/* The form stays still; FREE gets a short bounce followed by a long reading pause. */
.motion-ready .pack-free {
  animation: free-bounce 3.6s cubic-bezier(.35,0,.25,1) .55s infinite;
  transform-origin: 50% 100%;
}
.motion-ready .signup-spark { animation: bonus-star 6s ease-in-out infinite; }
.motion-ready .bonus-copy > img { animation: bonus-icon 7s ease-in-out infinite; }
.motion-ready .bonus-light { animation: bonus-glow 8s ease-in-out infinite; }
/* FAQ content must stay readable independently of scroll and animation state. */
.questions-list details[open] p { opacity: 1; animation: none; }
.questions-list summary:after { transition: color .2s, rotate .25s; }
.questions-list summary:hover:after { color: var(--mint); rotate: 90deg; }
.questions-list details[open] summary:after { rotate: 0deg; }

/* CSS timelines stop offscreen and while the video dialog is open. */
.motion-ready .motion-zone:not(.is-in-view),
.motion-ready .motion-zone:not(.is-in-view) *,
.motion-ready .motion-zone:not(.is-in-view)::before,
.motion-ready .motion-zone:not(.is-in-view) *::before,
.motion-ready .motion-zone:not(.is-in-view) *::after,
.section-motion-paused .motion-zone,
.section-motion-paused .motion-zone *,
.section-motion-paused .motion-zone::before,
.section-motion-paused .motion-zone *::before,
.section-motion-paused .motion-zone *::after { animation-play-state: paused !important; }
.motion-paused [data-enter] { opacity: 1 !important; animation: none !important; }

@keyframes copy-enter { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes board-enter {
  from { opacity: 0; translate: 0 34px; rotate: 4deg; scale: .94; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes treasure-enter {
  from { opacity: 0; translate: 0 30px; scale: .9; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes panel-enter { from { opacity: 0; translate: 0 24px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes footer-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes tile-invitation {
  0%, 18%, 100% { translate: 0 0; rotate: 0deg; }
  6% { translate: 0 -7px; rotate: -1.5deg; }
  11% { translate: 0 -3px; rotate: .8deg; }
}
@keyframes tile-reflection {
  0% { opacity: 0; background-position: 150% 0; }
  4% { opacity: .8; }
  14% { opacity: 0; background-position: -50% 0; }
  100% { opacity: 0; background-position: -50% 0; }
}
@keyframes board-aura { 0%,100% { opacity: .55; scale: .94; } 50% { opacity: 1; scale: 1.05; } }
@keyframes sticker-nudge { 0%,18%,100% { transform: rotate(10deg); } 8% { transform: rotate(6deg) translateY(-3px); } }
@keyframes treasure-float {
  0%,100% { transform: translateY(0) rotate(-9deg); }
  50% { transform: translateY(-15px) rotate(-6deg); }
}
@keyframes treasure-glow { 0%,100% { opacity: .6; scale: .9; } 50% { opacity: 1; scale: 1.12; } }
@keyframes treasure-rays { to { rotate: 360deg; } }
@keyframes coin-one-orbit {
  0%,100% { transform: translateY(0) rotate(20deg) rotateY(-20deg); }
  50% { transform: translateY(-16px) rotate(28deg) rotateY(12deg); }
}
@keyframes coin-two-orbit {
  0%,100% { transform: translateY(0) rotate(-25deg) scale(.65); }
  50% { transform: translateY(12px) rotate(-12deg) scale(.65); }
}
@keyframes treasure-spark {
  0%,65%,100% { opacity: 0; translate: 0 7px; scale: .35; rotate: -15deg; }
  27% { opacity: .95; scale: 1; }
  48% { opacity: 0; translate: 0 -18px; scale: .5; rotate: 30deg; }
}
@keyframes feature-glint { 0%,30%,100% { translate: 0 0; } 12% { translate: 0 -4px; } }
@keyframes free-bounce {
  0%,28%,100% { transform: translateY(0) scale(1); }
  6% { transform: translateY(-14px) scale(.97,1.06); }
  12% { transform: translateY(0) scale(1.07,.92); }
  18% { transform: translateY(-6px) scale(.99,1.03); }
  24% { transform: translateY(0) scale(1.03,.97); }
}
@keyframes bonus-star { 0%,100% { transform: rotate(12deg) scale(1); } 50% { transform: rotate(35deg) scale(1.1); } }
@keyframes bonus-icon { 0%,100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-5px); } }
@keyframes bonus-glow { 0%,100% { translate: 0 0; opacity: .7; } 50% { translate: 75px 30px; opacity: 1; } }

@media (max-width: 800px) {
  @keyframes treasure-float { 0%,100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-9px) rotate(-6deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-enter] { opacity: 1 !important; animation: none !important; }
  .motion-ready .motion-zone *, .motion-ready .motion-zone::before,
  .motion-ready .motion-zone *::before, .motion-ready .motion-zone *::after,
  .bonus-light { animation: none !important; transition: none !important; }
  .treasure-sparks, .treasure-halo::before { display: none; }
}