/* Motion layer for the creator site, dashboards and admin. Everything here is turned off for people who ask their
   device for reduced motion (see the end of the file). Easing: a soft "spring" for things arriving, a quick ease for
   things leaving. */
:root { --spring: cubic-bezier(.2, 1.25, .35, 1); --glide: cubic-bezier(.22, .9, .24, 1); --out: cubic-bezier(.4, 0, 1, 1); }

/* Smooth page-to-page fades (browsers that support cross-page view transitions). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s var(--out) both; }
::view-transition-new(root) { animation: vt-in .38s var(--glide) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
html { scroll-behavior: smooth; }

/* Arrivals. [data-m] elements start hidden and animate in when motion.js adds .m-in (with a per-item delay). */
[data-m] { opacity: 0; will-change: transform, opacity; }
[data-m].m-in { animation: m-rise .7s var(--glide) both; animation-delay: var(--d, 0ms); }
[data-m="pop"].m-in { animation-name: m-pop; animation-duration: .65s; animation-timing-function: var(--spring); }
[data-m="left"].m-in { animation-name: m-left; } [data-m="right"].m-in { animation-name: m-right; }
[data-m="blur"].m-in { animation-name: m-blur; animation-duration: .9s; }
[data-m="spring"].m-in { animation-name: m-spring; animation-duration: 1s; animation-timing-function: var(--spring); }
[data-m="fade"].m-in { animation-name: m-fade; }
@keyframes m-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes m-pop { 0% { opacity: 0; transform: scale(.6) rotate(-4deg); } 100% { opacity: 1; transform: none; } }
@keyframes m-left { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes m-right { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes m-blur { from { opacity: 0; filter: blur(12px); transform: translateY(14px) scale(.98); } to { opacity: 1; filter: none; transform: none; } }
@keyframes m-spring { 0% { opacity: 0; transform: translateY(80px) rotate(8deg) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
[data-m].m-done, .m-word.m-done { animation: none !important; opacity: 1; transform: none; filter: none; }
.hl.m-word.m-done { transform: rotate(var(--r, -2deg)); }
.stage .peek.m-done { animation: idle 5s ease-in-out infinite !important; } .stage .sticker.m-done { animation: float 5s ease-in-out infinite !important; }
/* Headline words rise one by one (motion.js wraps them). */
.m-word { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(3deg); }
.m-in .m-word, .m-word.m-in { animation: m-word .7s var(--spring) both; animation-delay: var(--d, 0ms); }
@keyframes m-word { to { opacity: 1; transform: none; } }
.hl.m-in, .m-in .hl { animation: m-hl .8s var(--spring) both; animation-delay: calc(var(--d, 0ms) + 120ms); }
@keyframes m-hl { 0% { transform: scale(.5) rotate(-12deg); } 100% { transform: rotate(var(--r, -2deg)); } }
.hl.p { --r: 1.5deg; }

/* Hover depth: lift, and a gentle 3D tilt that follows the pointer (motion.js sets --rx/--ry). */
.lift { transition: transform .35s var(--glide), box-shadow .35s var(--glide); }
.lift:hover { transform: translateY(-4px); }
[data-tilt], [data-tilt].m-done { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .5s var(--glide); transform-style: preserve-3d; }
[data-tilt]:hover { --ty: -4px; transition: transform .12s linear; }
/* Parallax layers in the hero (motion.js moves them with the pointer). */
[data-depth] { transition: translate .6s var(--glide); translate: var(--px, 0) var(--py, 0); }

/* A shine that sweeps across main buttons on hover. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--glide); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn { transition: filter .15s, transform .25s var(--spring), box-shadow .1s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(5px); transition-duration: .05s; }
.btn[disabled]:hover, .btn.off:hover { transform: none; }
/* A soft breathing glow on the one most important button on a screen. */
.glow-pulse { animation: glow 2.6s ease-in-out infinite; } @keyframes glow { 50% { box-shadow: 0 5px 0 var(--g-lip), 0 0 0 10px rgba(88, 204, 2, .14); } }
.next .btn.white.glow-pulse { animation-name: glow-w; } @keyframes glow-w { 50% { box-shadow: 0 5px 0 #d9c9fb, 0 0 0 10px rgba(255, 255, 255, .18); } }

/* The top bar shrinks and frosts once you scroll. */
.top { transition: box-shadow .3s, background .3s; } .top .wrap { transition: height .35s var(--glide); }
.top.scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); } .top.scrolled .wrap { height: 62px; }
.nav a { position: relative; } .nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--p); transform: scaleX(0); transition: transform .35s var(--spring); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }

/* The dotted path line draws itself as you scroll (motion.js sets --draw from 0 to 1). */
.path::before { transform-origin: top; transform: scaleY(var(--draw, 0)); transition: transform .2s linear; }
.stop .n { transition: transform .5s var(--spring); } .stop.m-in .n { animation: m-pop .7s var(--spring) both; animation-delay: calc(var(--d, 0ms) + 80ms); }
.stop .n:hover { transform: scale(1.08) rotate(-4deg); }

/* League shields shine and lift. */
.league .shield { position: relative; transition: transform .4s var(--spring); } .league:hover .shield { transform: translateY(-8px) rotate(-6deg) scale(1.06); }
.shield::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); transform: translateX(-120%); transition: transform .8s var(--glide); }
.league:hover .shield::after, .lg:hover .shield::after { transform: translateX(120%); }

/* Idle life */
.peek, .next img, .float-idle { animation: idle 5s ease-in-out infinite; } @keyframes idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-2deg); } }

/* Dashboard: page transitions, sliding nav highlight, filling bars and rings. */
.page-out > * { animation: page-out .18s var(--out) both; } @keyframes page-out { to { opacity: 0; transform: translateY(-8px); } }
.navi { position: relative; z-index: 1; transition: color .25s, background .25s, border-color .25s; }
.nav-pill { position: absolute; z-index: 0; left: 14px; right: 14px; border: 2px solid var(--b-ring); border-radius: 14px; background: var(--b-soft); transition: top .45s var(--spring), height .45s var(--spring), opacity .2s; pointer-events: none; }
.side.has-pill .navi.on { background: transparent; border-color: transparent; }
@media (max-width: 720px) { .nav-pill { display: none; } .side.has-pill .navi.on { background: var(--b-soft); border-color: var(--b-ring); } }
.bar > i.m-fill { width: 0 !important; } .bar > i { transition: width 1.1s var(--glide); }
@property --v { syntax: '<number>'; inherits: true; initial-value: 0; }
.ring { transition: --v 1.3s var(--glide); }
.ring.m-ring { --v: 0 !important; }
.card, .item, .vid, .camp { transition: transform .35s var(--glide), box-shadow .35s var(--glide), border-color .25s, background .25s; }
a.card:hover, a.item:hover, .vid:hover, .camp:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -16px rgba(30, 20, 60, .35); }
.wallet .avail { position: relative; overflow: hidden; }
.wallet .avail::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .25) 48%, transparent 66%); transform: translateX(-120%); animation: sheen 4.5s 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.node .disc { transition: transform .35s var(--spring); } .node .disc:hover { transform: scale(1.08); } .node .disc:active { transform: scale(.94); }
.chip, .tag { transition: transform .25s var(--spring); }
.toast { animation: toast-in .5s var(--spring) both; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 24px) scale(.9); } to { transform: translate(-50%, 0); } }

/* Admin (Direction B): calmer, mostly fades and glows. */
.a-main > * { animation: m-blur .6s var(--glide) both; } .a-main > :nth-child(2) { animation-delay: 60ms; } .a-main > :nth-child(3) { animation-delay: 120ms; } .a-main > :nth-child(4) { animation-delay: 180ms; } .a-main > :nth-child(n+5) { animation-delay: 240ms; }
.cards > .box { animation: m-rise .55s var(--glide) both; } .cards > .box:nth-child(2) { animation-delay: 40ms; } .cards > .box:nth-child(3) { animation-delay: 80ms; } .cards > .box:nth-child(4) { animation-delay: 120ms; } .cards > .box:nth-child(5) { animation-delay: 160ms; } .cards > .box:nth-child(n+6) { animation-delay: 200ms; }
a.box { transition: transform .3s var(--glide), border-color .3s, box-shadow .3s; } a.box:hover { box-shadow: 0 0 0 1px rgba(139, 92, 246, .35), 0 16px 40px -20px rgba(139, 92, 246, .55); }
tr.click td { transition: background .2s; }
.palette .pbox { animation: m-pop .35s var(--spring) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; transition: none !important; }
  [data-m], .m-word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .path::before { transform: none; } .bar > i.m-fill { width: auto; } html { scroll-behavior: auto; }
}