/* Break n Break motion layer, shared by every game site and the studio site (assets/motion.js).
   Everything here is off for people who ask for reduced motion: the pages then look exactly as before. */
@media (prefers-reduced-motion: no-preference) {
  /* In and out: blocks rise into place as they enter, and drift away as they leave (up or down) */
  .motion .m-item { opacity: 0; transform: translate3d(var(--mx, 0px), var(--my, 32px), 0) scale(var(--ms, .97)); filter: blur(var(--mb, 3px));
    transition: opacity .75s ease, transform .95s cubic-bezier(.2,.75,.2,1), filter .75s ease; transition-delay: var(--md, 0s); }
  .motion .m-item.m-above { --my: -32px; }
  .motion .m-item.m-left { --mx: -56px; --my: 0px; }
  .motion .m-item.m-right { --mx: 56px; --my: 0px; }
  .motion .m-item.m-in { opacity: 1; transform: none; filter: none; }

  /* Lists: children follow one after another */
  .motion .m-kid { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .6s ease, transform .75s cubic-bezier(.2,.75,.2,1), background .2s ease; transition-delay: calc(var(--i, 0) * 75ms + .08s); }
  .motion .m-kids-in > .m-kid { opacity: 1; transform: none; }

  /* Section titles: each word slides up from behind a mask */
  .motion .m-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
  .motion .m-word > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform .85s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .motion .m-words-in .m-word > span { transform: none; }

  /* Hero intro on load: the header drops in, the emblem arrives, the wordmark letters fall into place */
  .motion .m-head-in { animation: m-down .8s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--md, 0s); }
  @keyframes m-down { from { opacity: 0; transform: translate3d(0, -18px, 0); } }
  .motion .m-letter { display: inline-block; animation: m-drop .8s cubic-bezier(.2,.9,.25,1.25) both; animation-delay: calc(.25s + var(--i, 0) * 55ms); }
  @keyframes m-drop { from { opacity: 0; transform: translate3d(0, -.55em, 0) rotate(-10deg); } }
  .motion .m-fly { animation: m-fly 1.5s cubic-bezier(.16,.84,.24,1) both; animation-delay: .1s; }
  @keyframes m-fly { 0% { opacity: 0; transform: translate3d(-55vw, 60px, 0) rotate(-16deg) scale(.7); } 60% { opacity: 1; } 100% { transform: none; } }
  .motion .m-rise { animation: m-rise 1.2s cubic-bezier(.2,.85,.25,1.15) both; animation-delay: .15s; }
  @keyframes m-rise { from { opacity: 0; transform: translate3d(0, 50px, 0) scale(.75); } }
  .motion .m-pop { animation: m-pop 1s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--md, .55s); }
  @keyframes m-pop { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.95); filter: blur(6px); } }

  /* Cards tilt toward the pointer, with a soft glare */
  .motion .m-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
  .motion .m-tilt.m-tilting { transition: transform .12s ease-out !important; }
  .motion .m-tilt::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--go, 0); transition: opacity .3s ease;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.38), rgba(255,255,255,0) 55%); mix-blend-mode: soft-light; }

  /* Buttons lean toward the pointer */
  .motion .m-magnet { transition: transform .35s cubic-bezier(.2,.75,.2,1), background .2s ease, color .2s ease, box-shadow .2s ease; }

  /* Sunstone sparks: tap or click the sky, or move across the hero */
  .m-spark { position: fixed; z-index: 80; left: 0; top: 0; width: var(--s, 9px); height: var(--s, 9px); pointer-events: none; transform: translate3d(var(--x), var(--y), 0) rotate(45deg);
    background: linear-gradient(135deg, #fff4cf, #ffd166 55%, #e8a93a); box-shadow: 0 0 10px rgba(255,209,102,.8); animation: m-spark var(--t, .9s) cubic-bezier(.2,.7,.3,1) forwards; }
  @keyframes m-spark { to { opacity: 0; transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0) rotate(225deg) scale(.3); } }
  .m-ring { position: fixed; z-index: 79; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none; border: 1.5px solid rgba(255,233,170,.9); border-radius: 50%;
    transform: translate3d(var(--x), var(--y), 0); animation: m-ring .7s ease-out forwards; }
  @keyframes m-ring { to { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(7); } }
}


/* ---------- Living skies (assets/motion.js adds the clouds, rays, stars, birds and rolling cloud banks) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* The sun breathes and its light pulses */
  .motion .scene-sky .sun { animation: m-breathe 7s ease-in-out infinite; }
  .motion .scene-sky .moon { animation-duration: 11s; }
  .motion .scene-sky .glow { animation: m-glow 7s ease-in-out infinite; }
  @keyframes m-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
  @keyframes m-glow { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
  /* Slow rays */
  .m-rays { position: absolute; left: var(--sx, 72%); top: var(--sy, 30%); width: calc(var(--sun-size, clamp(80px, 10vw, 150px)) * 6); aspect-ratio: 1; transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--sun) 16%, transparent) 0deg 5deg, transparent 5deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 66%); mask-image: radial-gradient(circle, #000 12%, transparent 66%);
    animation: m-turn 140s linear infinite; pointer-events: none; }
  @keyframes m-turn { to { rotate: 1turn; } }
  /* Clouds */
  .m-clouds { position: absolute; inset: 0; overflow: hidden; translate: calc(var(--lx, 0) * -10px) calc(var(--ly, 0) * -6px); }
  .m-cloud { position: absolute; left: 0; width: var(--cw); height: auto; fill: var(--cloud); opacity: var(--co); overflow: visible;
    animation: m-cloud var(--ct) linear infinite, m-cloud-bob var(--cb) ease-in-out infinite; animation-delay: var(--cd), var(--cd); will-change: transform; }
  @keyframes m-cloud { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
  @keyframes m-cloud-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  /* Stars twinkle */
  .motion .wind b { animation: m-twinkle var(--tw, 3s) ease-in-out infinite; animation-delay: var(--twd, 0s); }
  @keyframes m-twinkle { 0%, 100% { opacity: var(--o, .6); scale: 1; } 50% { opacity: .12; scale: .6; } }
  /* A shooting star every so often */
  .m-shoot { position: absolute; width: 140px; height: 2px; background: linear-gradient(90deg, transparent, var(--sun) 70%, #fff); border-radius: 2px; opacity: 0; rotate: -24deg;
    animation: m-shoot 11s ease-in infinite; animation-delay: var(--sd, 0s); }
  @keyframes m-shoot { 0%, 82% { opacity: 0; transform: translateX(0); } 84% { opacity: 1; } 92%, 100% { opacity: 0; transform: translateX(-360px); } }
  /* Birds crossing now and then */
  .m-flock { position: absolute; left: 0; width: 70px; height: 30px; animation: m-flock 46s linear infinite; animation-delay: var(--fd, 0s); }
  .m-flock b { position: absolute; width: 14px; height: 6px; border: 2px solid var(--near); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .55; animation: m-flap .7s ease-in-out infinite alternate; }
  .m-flock b::after { content: ''; position: absolute; left: 100%; top: -2px; width: 12px; height: 6px; border: inherit; border-bottom: 0; border-radius: inherit; }
  .m-flock b:nth-child(1) { left: 0; top: 10px; } .m-flock b:nth-child(2) { left: 24px; top: 0; animation-delay: -.25s; } .m-flock b:nth-child(3) { left: 44px; top: 16px; animation-delay: -.45s; scale: .8; }
  @keyframes m-flap { from { scale: 1 1; } to { scale: 1 .35; } }
  @keyframes m-flock { 0% { transform: translate(-12vw, 0); } 45% { transform: translate(112vw, -40px); } 100% { transform: translate(112vw, -40px); } }
  /* Islands rock a little as they bob */
  .motion .scene-sky .island { rotate: 0deg; animation-name: bob, m-rock; animation-duration: var(--t, 7s), calc(var(--t, 7s) * 1.6); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  @keyframes m-rock { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
  /* Cloud banks and the cloud sea roll by */
  .motion .terrain svg.m-roll { width: 300%; max-width: none; animation: m-roll var(--rt, 200s) linear infinite; }
  .motion .terrain .band.m-roll { --rt: 260s; }
  .motion .terrain .band.b2.m-roll { --rt: 170s; animation-direction: reverse; }
  .motion .terrain .sea.m-roll { --rt: 120s; }
  .m-roll .m-mirror { transform: scaleX(-1); transform-box: view-box; transform-origin: 50% 50%; }
  @keyframes m-roll { from { translate: 0 0; } to { translate: -66.6667% 0; } }
  /* Hills lean with the pointer (site.js moves them with the scroll) */
  .motion .terrain .l1, .motion .terrain .l2, .motion .terrain .l3 { left: -28px; width: calc(100% + 56px); max-width: none; }
  .motion .terrain .l1 { translate: calc(var(--lx, 0) * -6px) 0; }
  .motion .terrain .l2 { translate: calc(var(--lx, 0) * -14px) 0; }
  .motion .terrain .l3 { translate: calc(var(--lx, 0) * -24px) 0; }
  .motion .scene-sky .wind { translate: calc(var(--lx, 0) * -4px) calc(var(--ly, 0) * -3px); }
  /* Skies out of view rest */
  .m-still .scene-sky *, .m-still .scene-sky, .m-still .terrain svg { animation-play-state: paused !important; }
}