/*
  Anubis motion layer.
  Everything below only applies under html.motion, which the <head> script sets unless the
  visitor prefers reduced motion. Without it the page renders fully static and complete.
  Rules: animate transform / translate / rotate / scale / opacity only, keep mascot aspect ratios.
*/
@property --spread { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --holo   { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ---------- scroll progress (visible for everyone, driven by JS) ---------- */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

html.motion .bar { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
html.motion .bar.tuck { transform: translateY(-100%); }

/* ---------- hero: gold dust ---------- */
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero .wrap { z-index: 1; }

/* ---------- hero: intro ---------- */
html.motion .hero .eyebrow,
html.motion .hero h1,
html.motion .hero .lede,
html.motion .hero .cta,
html.motion .hero .hero-facts { animation: heroRise 1s cubic-bezier(.2, .8, .2, 1) both paused; }
html.motion .hero .eyebrow { animation-delay: .45s; }
html.motion .hero h1 { animation-name: heroTitle; animation-duration: 1.1s; animation-delay: .55s; }
html.motion .hero .lede { animation-delay: .75s; }
html.motion .hero .cta { animation-delay: .87s; }
html.motion .hero .hero-facts { animation-delay: .99s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } }
@keyframes heroTitle { from { opacity: 0; transform: translateY(.4em) skewY(3deg); filter: blur(10px); } }

html.motion .hero .halo { animation: haloIn 1.2s cubic-bezier(.2, .9, .3, 1.15) .1s both paused; }
@keyframes haloIn { from { opacity: 0; scale: .35; } 60% { opacity: 1; } }

html.motion .hero .nubi-hero {
  transform-origin: 50% 100%;
  animation: nubiDrop 1s cubic-bezier(.3, 1.4, .5, 1) .95s both paused; /* the video supplies the idle motion */
}
@keyframes nubiDrop {
  from { opacity: 0; transform: translateY(-40%) scale(.9); }
  55% { opacity: 1; transform: translateY(3%) scale(1.06, .92); }
  78% { transform: translateY(-2%) scale(.97, 1.03); }
  to { opacity: 1; transform: none; }
}

html.motion .hero .sparkle { animation: sparkPop .7s cubic-bezier(.3, 1.6, .5, 1) both paused, twinkle 3s ease-in-out infinite paused; }
html.motion .hero .sparkle:nth-of-type(1) { animation-delay: 1.3s, 2s; }
html.motion .hero .sparkle:nth-of-type(2) { animation-delay: 1.45s, 3s; }
html.motion .hero .sparkle:nth-of-type(3) { animation-delay: 1.6s, 4s; }
@keyframes sparkPop { from { opacity: 0; scale: 0; rotate: -90deg; } }

html.motion .hero.play .eyebrow, html.motion .hero.play h1, html.motion .hero.play .lede,
html.motion .hero.play .cta, html.motion .hero.play .hero-facts, html.motion .hero.play .halo,
html.motion .hero.play .nubi-hero, html.motion .hero.play .sparkle { animation-play-state: running; }

/* cards are dealt by JS; hidden until then */
html.motion .hero:not(.dealt) .card { opacity: 0; }

/* ---------- hero: the fan spreads on hover and as you scroll away ---------- */
html.motion .stage { --spread: calc(1 + var(--hp, 0) * .32); translate: 0 calc(var(--hp, 0) * 14%); }
html.motion .stage:hover { --spread: calc(1.3 + var(--hp, 0) * .32); }
html.motion .stage .card,
html.motion .stage:hover .card:nth-child(n) { transform: rotate(calc(var(--rot) * var(--spread))) translateY(var(--lift, 0px)); }
html.motion .hero .halo { transform: translateY(calc(var(--hp, 0) * 50px)) scale(calc(1 + var(--hp, 0) * .18)); }
html.motion .hero-copy { translate: 0 calc(var(--hp, 0) * -60px); opacity: calc(1 - var(--hp, 0) * .7); }
html.motion .stage-inner { transition: none; }

/* holographic foil on the hero cards */
html.motion .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--hx, 50%) var(--hy, 30%), rgb(255 255 255 / .35), transparent 45%),
    linear-gradient(115deg, transparent 22%, rgb(255 110 199 / .30) 36%, rgb(110 214 255 / .30) 50%, rgb(255 226 120 / .30) 64%, transparent 78%);
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, var(--hx, 50%) var(--hy, 50%);
  mix-blend-mode: screen; opacity: var(--holo, 0); transition: opacity .4s;
}
@media (hover: none), (pointer: coarse) {
  html.motion .card::after { --holo: .55; animation: foilSweep 5s ease-in-out infinite; }
  html.motion .card:nth-child(2)::after { animation-delay: -1s; }
  html.motion .card:nth-child(3)::after { animation-delay: -2s; }
  html.motion .card:nth-child(4)::after { animation-delay: -3s; }
  html.motion .card:nth-child(5)::after { animation-delay: -4s; }
}
@keyframes foilSweep { 0%, 100% { background-position: 0 0, 0% 0%; } 50% { background-position: 0 0, 100% 100%; } }

/* rotating game name in the English headline */
.rot { display: grid; justify-items: start; font-style: normal; }
.rot .rot-word { grid-area: 1 / 1; white-space: nowrap; }
html.motion .rot .rot-word { opacity: 0; }
html.motion .rot .rot-word.on { opacity: 1; }

/* ---------- ticker reacts to scroll speed ---------- */
.ticker-track span { display: block; transform: skewX(var(--skew, 0deg)); }

/* ---------- section headings ---------- */
html.motion .sec-head.reveal { opacity: 1; translate: none; }
html.motion .sec-head .sec-num { clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
html.motion .sec-head h2 {
  opacity: 0; transform: translateY(.45em) rotate(1.5deg); transform-origin: 0 100%; filter: blur(8px);
  transition: opacity .9s .15s, transform 1s .15s cubic-bezier(.2, .8, .2, 1), filter .9s .15s;
}
html.motion .sec-head h2::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 18px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s .55s cubic-bezier(.7, 0, .2, 1);
}
html.motion .sec-head > p { opacity: 0; translate: 0 16px; transition: opacity .8s .35s, translate .8s .35s cubic-bezier(.2, .8, .2, 1); }
html.motion .sec-head.in .sec-num { clip-path: inset(0 0 0 0); }
html.motion .sec-head.in h2 { opacity: 1; transform: none; filter: none; }
html.motion .sec-head.in h2::after { transform: scaleX(1); }
html.motion .sec-head.in > p { opacity: 1; translate: 0 0; }

/* ---------- staggered groups (games, gallery, community) ---------- */
html.motion .stagger.reveal { opacity: 1; translate: none; }
html.motion .stagger > * {
  opacity: 0; translate: 0 56px; rotate: var(--deal, 0deg);
  transition: opacity .6s ease calc(var(--i, 0) * 90ms), translate 1s cubic-bezier(.2, .8, .2, 1.05) calc(var(--i, 0) * 90ms), rotate 1s cubic-bezier(.2, .8, .2, 1.05) calc(var(--i, 0) * 90ms);
}
html.motion .stagger.in > * { opacity: 1; translate: 0 0; rotate: 0deg; }

/* game cards: dealt in, then tilt with a foil glare under the cursor */
html.motion .games > .game {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(var(--gy, 0px));
  transition: opacity .6s ease calc(var(--i, 0) * 90ms), translate 1s cubic-bezier(.2, .8, .2, 1.05) calc(var(--i, 0) * 90ms),
              rotate 1s cubic-bezier(.2, .8, .2, 1.05) calc(var(--i, 0) * 90ms), transform .45s cubic-bezier(.2, .8, .2, 1);
}
html.motion .games > .game:hover { --gy: -8px; }
html.motion .games > .game.tilting { transition-duration: .6s, 1s, 1s, .12s; }
html.motion .game::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--hx, 50%) var(--hy, 0%), rgb(255 255 255 / .16), transparent 45%),
    linear-gradient(115deg, transparent 25%, rgb(255 110 199 / .14) 38%, rgb(110 214 255 / .14) 50%, rgb(255 226 120 / .14) 62%, transparent 75%);
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, var(--hx, 50%) var(--hy, 50%);
  mix-blend-mode: screen; opacity: var(--holo, 0); transition: opacity .35s;
}
html.motion .game:hover { --holo: 1; }

/* gallery: tiles wipe open, photos drift slower than the page */
html.motion .gallery > figure {
  clip-path: inset(100% 0 0 0 round 18px);
  transition: opacity .6s ease calc(var(--i, 0) * 110ms), translate 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 110ms),
              clip-path 1.1s cubic-bezier(.7, 0, .2, 1) calc(var(--i, 0) * 110ms);
}
html.motion .gallery.in > figure { clip-path: inset(0 0 0 0 round 18px); }
html.motion .gallery > figure:not(.g-nubi) img { height: 116%; translate: 0 var(--py, -8%); }
html.motion .gallery .g-nubi .nubi-anim { transform: translateX(45%) rotate(10deg); transition: transform 1.1s cubic-bezier(.3, 1.3, .5, 1) .9s; }
html.motion .gallery.in .g-nubi .nubi-anim { transform: none; }

html.motion .comm > a {
  transition: opacity .6s ease calc(var(--i, 0) * 90ms), translate .9s cubic-bezier(.2, .8, .2, 1.1) calc(var(--i, 0) * 90ms),
              rotate .9s cubic-bezier(.2, .8, .2, 1.1) calc(var(--i, 0) * 90ms), transform .2s, box-shadow .2s;
}

/* ---------- big events: the feature card flips over like a pulled card ---------- */
html.motion .majors.reveal { opacity: 1; translate: none; }
.major-feature .m-img { position: relative; }
html.motion .major-feature .m-img { perspective: 1600px; overflow: visible; }
.flipper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
html.motion .flipper { transform: rotateY(180deg); transition: transform 1.3s cubic-bezier(.3, 1.25, .4, 1) .25s; }
html.motion .flipped .flipper { transform: rotateY(0deg); }
html.motion .flipped.instant .flipper { transition: none; }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.flip-face img { width: 100%; height: 100%; object-fit: cover; }
.flip-back {
  transform: rotateY(180deg); display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--c) 40%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgb(245 166 35 / .06) 0 10px, transparent 10px 20px),
    var(--black);
  box-shadow: inset 0 0 0 10px var(--black), inset 0 0 0 12px var(--gold), inset 0 0 0 22px var(--black), inset 0 0 0 23px rgb(245 166 35 / .4);
}
.flip-back svg { width: 34%; aspect-ratio: 1; color: var(--gold); }
html:not(.motion) .flip-back { display: none; }

html.motion .majors > .major-side { opacity: 0; translate: 60px 0; transition: opacity .7s, translate 1s cubic-bezier(.2, .8, .2, 1); }
html.motion .majors > .major-side:nth-child(2) { transition-delay: .5s; }
html.motion .majors > .major-side:nth-child(3) { transition-delay: .65s; }
html.motion .majors.lit > .major-side { opacity: 1; translate: 0 0; }
html.motion .majors.lit.instant > .major-side { transition: none; }

/* countdown digits flip over when they change */
.countdown div { perspective: 400px; }
.countdown b.flip { animation: digitFlip .5s cubic-bezier(.2, .8, .2, 1.2); }
@keyframes digitFlip { from { opacity: 0; transform: translateY(-45%) rotateX(85deg); } }

/* ---------- calendar ---------- */
html.motion .day.today { animation: todayGlow 2.8s ease-in-out infinite; }
@keyframes todayGlow { 50% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 30px rgb(245 166 35 / .3); } }

/* ---------- event pop-up ---------- */
html.motion dialog[open] { animation: dlgIn .55s cubic-bezier(.2, .9, .3, 1.15); }
html.motion dialog[open]::backdrop { animation: fadeIn .3s ease; }
html.motion dialog[open] .dlg-img img { animation: dlgImg .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(40px) scale(.92) rotateX(10deg); } }
@keyframes dlgImg { from { transform: scale(1.12); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- buttons: magnetic, with a shine sweep ---------- */
html.motion .btn { transition: translate .4s cubic-bezier(.2, .8, .2, 1), transform .15s, background .2s, border-color .2s, color .2s; }
html.motion .btn-gold { position: relative; overflow: hidden; isolation: isolate; }
html.motion .btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .5) 50%, transparent 70%);
  transform: translateX(-130%);
}
html.motion .btn-gold:hover::after { transform: translateX(130%); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
html.motion .hero .cta .btn-gold::after { animation: shine 6s ease-in-out 2.4s infinite; }
@keyframes shine { 0%, 80% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* ---------- Nubi cameos ---------- */
html.motion .newbie-art.reveal { opacity: 1; translate: none; }
html.motion .newbie-art .disc { transform: scale(.2); opacity: 0; transition: transform 1s cubic-bezier(.3, 1.5, .5, 1), opacity .5s; }
html.motion .newbie-art .nubi-anim { opacity: 0; transform: translateY(35%) scale(.85); transform-origin: 50% 100%; transition: opacity .4s .35s, transform 1s cubic-bezier(.3, 1.5, .5, 1) .35s; }
html.motion .newbie-art.in .disc { transform: none; opacity: 1; }
html.motion .newbie-art.in .nubi-anim { opacity: 1; transform: none; }

html.motion .contact .nubi-peek { transform: translateY(75%); transform-origin: 60% 100%; transition: transform 1s cubic-bezier(.3, 1.4, .5, 1) .5s; }
html.motion .contact.in .nubi-peek { transform: none; }



/* ---------- map: route draws itself, pin drops, Nubi walks you there ---------- */
html.motion .map:not(.drawn) .route { stroke-dasharray: 0 100000; animation: none; }
html.motion .map .pin { transform-box: fill-box; transform-origin: 50% 100%; }
html.motion .map:not(.drawn) .pin { opacity: 0; transform: translateY(-80px); }
html.motion .map.drawn .pin { transition: opacity .3s 1.3s, transform .8s cubic-bezier(.3, 1.7, .5, 1) 1.3s; }
.map .walker { pointer-events: none; }

/* ---------- footer: the logo sting fades in once you reach the bottom ---------- */
html.motion .foot-logo .sting { opacity: 0; transition: opacity .4s; }
html.motion .foot-logo.sting-on .sting { opacity: 1; }

/* ---------- bottom bar jumps: the card deal curtain ---------- */
.deal { position: fixed; inset: 0; z-index: 65; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; overflow: hidden; }
.deal i { display: block; margin-inline: -1px; background: linear-gradient(180deg, #1F1F1F, #0F0F0F); border-top: 5px solid var(--c); box-shadow: inset 1px 0 0 rgb(245 239 224 / .06), 0 -18px 40px rgb(0 0 0 / .5); transform: translateY(105%); will-change: transform; }
.deal b { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--gold); font: 800 34px/1 var(--display); letter-spacing: .01em; opacity: 0; }
.deal b svg { width: 84px; height: 84px; fill: currentColor; }