/* Quest. — motion layer, loaded after styles.css. Refined from two MotionSites references, translated into the sticker book:
   · "Duolingo Styleguide" → pressable things stand on an ink ledge (hover lifts, press sinks flush), a sliding language
     thumb, progress that fills on arrival, tooltips, tabs and toasts that pop.
   · "Animated Cards"      → tappable cards tilt toward the cursor with inertia, catch a little light and lift off the page;
     the landing collage drifts in layers with the cursor and the scroll.
   Flat surfaces stay flat: only things you can press get a ledge. motion.js drives the per-frame values
   (--rx, --ry, --lift, --gx, --gy on cards; --px, --py, --sy on the hero) and sets .m-motion / .m-fine on <html>. */

:root { --spring:cubic-bezier(.3,1.5,.5,1); --settle:cubic-bezier(.2,.8,.3,1); --ledge:4px; }

/* ================= Press: ink ledge ================= */
/* The bottom edge never moves: hover trades 2px of lift for 2px more ledge, press sinks the face onto the paper. */
.btn,.cat-pill,.round-btn,.icon-btn,.lang-toggle,.pin-pad button:not(.ghost) { box-shadow:0 var(--ledge) 0 var(--ink); transition:transform .2s var(--spring),box-shadow .2s var(--spring),background-color .15s,color .15s,opacity .2s; }
.cat-pill,.round-btn,.icon-btn,.lang-toggle { --ledge:3px; }
.btn:hover:not(:disabled),.cat-pill:hover,.round-btn:hover:not(:disabled),.icon-btn:hover,.pin-pad button:not(.ghost):hover { transform:translateY(-2px); box-shadow:0 calc(var(--ledge) + 2px) 0 var(--ink); }
.btn:active:not(:disabled),.cat-pill:active,.round-btn:active:not(:disabled),.icon-btn:active,.pin-pad button:not(.ghost):active { transform:translateY(var(--ledge)); box-shadow:0 0 0 var(--ink); transition-duration:.06s; }
.cat-pill[aria-pressed="true"] { transform:translateY(var(--ledge)); box-shadow:0 0 0 var(--ink); }   /* a chosen filter stays pressed in */
.btn:disabled,.round-btn:disabled { box-shadow:none; }
.search-go { transition:transform .25s var(--spring); }
.search-go:active { transform:scale(.9); transition-duration:.06s; }

/* Language switch: one ink thumb slides between EN and HU. */
@supports selector(:has(*)) {
  .lang-toggle { position:relative; isolation:isolate; }
  .lang-toggle::before { content:""; position:absolute; z-index:-1; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:var(--r-pill); background:var(--ink); transition:translate .45s var(--spring); }
  .lang-toggle:has([data-language="hu"][aria-pressed="true"])::before { translate:100% 0; }
  .lang-toggle button { flex:1 1 0; transition:color .25s; }
  .lang-toggle button[aria-pressed="true"] { background:transparent; }
}

.rail-tip { scale:.8; transform-origin:left center; transition:opacity .15s,scale .3s var(--spring); }
.rail button:hover .rail-tip,.rail button:focus-visible .rail-tip { scale:1; }

/* ================= Tilt: tappable cards ================= */
/* motion.js adds .is-tilting while a card follows the cursor and removes it once the card has settled flat again,
   so the cards' own hover and reveal styles are untouched the rest of the time. */
#screen :is(.place-card,.quest-card,.float-card,.next-reward,.mystery-card) { position:relative; }
#screen :is(.place-card,.quest-card,.float-card,.next-reward,.mystery-card)::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at calc(var(--gx,50) * 1%) calc(var(--gy,30) * 1%),rgb(255 255 255 / .42),transparent 58%); opacity:var(--lift,0); pointer-events:none; }
#screen .is-tilting { transform:perspective(720px) rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg)) translateY(calc(var(--lift,0) * -4px)); box-shadow:calc(var(--ry,0) * -.4px) calc(var(--lift,0) * 6px) 0 var(--ink); transition:rotate .35s var(--spring),background-color .15s,opacity .5s ease; will-change:transform; }
/* Room for a tilted card's near edge inside the scrolling rail (layout unchanged); moving cards must never give the
   rail a vertical scroll range, or it would swallow the page's wheel and swipe. */
.place-rail { overflow-y:hidden; }
.m-fine .place-rail { margin-block:-10px; padding-block:16px 20px; }
@media (min-width:960px) { .m-fine .place-rail { margin-inline:-12px; padding-inline:12px; scroll-padding-inline:12px; } }

/* ================= Landing collage: layered drift ================= */
/* Back to front: ribbon, wordmark, logo cards, stickers. --px/--py follow the cursor (-1…1), --sy the first screen of
   scroll (0…1); the nearer a layer, the further it travels. */
.hero { --px:0; --py:0; --sy:0; }
.m-motion .wm-stage .ribbon { translate:calc(-50% + var(--px) * -12px) calc(-47% + var(--py) * -8px + var(--sy) * 70px); will-change:translate; }
.m-motion .wordmark-xl { translate:calc(var(--px) * 6px) calc(var(--py) * 4px + var(--sy) * 24px); }
.m-motion .wm-stage .sticker { --z:24; translate:calc(var(--px) * var(--z) * 1px) calc(var(--py) * var(--z) * 1px - var(--sy) * var(--z) * 2px); will-change:translate; }
.m-motion .wm-stage .st-2 { --z:32; } .m-motion .wm-stage .st-3 { --z:28; } .m-motion .wm-stage .st-4 { --z:20; }
.m-motion #screen .float-card { --z:10; translate:calc(var(--px) * var(--z) * 1px) calc(var(--py) * var(--z) * 1px - var(--sy) * var(--z) * 4px); transition:rotate .35s var(--spring); }
.m-motion #screen .float-card:is(.f2,.f5) { --z:15; } .m-motion #screen .float-card:is(.f3,.f6) { --z:7; }

/* "Quest." arrives one letter at a time, slapped down like stickers; on desktop each letter hops under the cursor. */
.wm-letter { display:inline-block; }
.wm-letter:nth-child(even) { --s:-1; }
.m-fine .wm-letter { transition:translate .45s var(--spring),rotate .45s var(--spring); }
.m-fine .wm-letter:hover { translate:0 -.07em; rotate:calc(var(--s,1) * -5deg); }

/* Landing sections toss in as they scroll into view (motion.js adds .m-reveal, then .m-in). Place cards pop in place
   rather than slide, so they stay inside their scrolling rail. */
.place-rail .place-card:nth-child(even) { --s:-1; }
#screen .place-card.m-reveal { transition:opacity .4s ease,scale .7s var(--spring),rotate .7s var(--spring); transition-delay:calc(var(--k,0) * 70ms); }
#screen .place-card.m-reveal:not(.m-in) { opacity:0; scale:.86; rotate:calc(var(--s,1) * 5deg); }
.qr-band.m-reveal { transition:opacity .5s ease,translate .8s var(--settle); }
.qr-band.m-reveal:not(.m-in) { opacity:0; translate:0 36px; }
.qr-band.m-reveal .logo-chip { transition:scale .55s var(--spring),opacity .25s ease; transition-delay:calc(.25s + var(--c,0) * 70ms); }
.qr-band.m-reveal:not(.m-in) .logo-chip { opacity:0; scale:1.8; }
.qr-band-logos .logo-chip:nth-child(2) { --c:1; } .qr-band-logos .logo-chip:nth-child(3) { --c:2; } .qr-band-logos .logo-chip:nth-child(4) { --c:3; }
.qr-band-logos .logo-chip:nth-child(5) { --c:4; } .qr-band-logos .logo-chip:nth-child(6) { --c:5; }

/* ================= Passport: fill, pop, thunk ================= */
.progress span { position:relative; overflow:hidden; }
.progress span::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .55) 50%,transparent 70%); translate:-100% 0; }
.stamp-cell span { position:relative; }
.stamp-cell:nth-child(2) { --n:1; } .stamp-cell:nth-child(3) { --n:2; } .stamp-cell:nth-child(4) { --n:3; } .stamp-cell:nth-child(5) { --n:4; }
.stamp-cell:nth-child(6) { --n:5; } .stamp-cell:nth-child(7) { --n:6; } .stamp-cell:nth-child(8) { --n:7; } .stamp-cell:nth-child(9) { --n:8; } .stamp-cell:nth-child(10) { --n:9; }

/* ================= Motion ================= */
@media (prefers-reduced-motion:no-preference) {
  /* Entrances end exactly where the resting style is, so they need no forwards fill (which would pin transform and
     block the tilt). */
  .enter :is(.rise,.float-card,.quest-card) { animation-fill-mode:backwards; }

  .wm-stage .sticker svg { animation:m-bob 6s ease-in-out infinite; }
  .wm-stage .st-2 svg { animation-duration:7s; animation-delay:-2.4s; } .wm-stage .st-3 svg { animation-duration:5.4s; animation-delay:-1.2s; }
  .wm-stage .st-4 svg { animation-duration:6.6s; animation-delay:-3.6s; }
  @keyframes m-bob { 50% { translate:0 -7px; rotate:5deg; } }

  .enter .wm-letter { animation:m-drop .75s var(--spring) backwards; animation-delay:calc(.12s + var(--k,0) * .07s); }
  @keyframes m-drop { 0% { opacity:0; translate:0 -.45em; rotate:calc(var(--s,1) * -16deg); scale:1.2; } 45% { opacity:1; } }

  .enter .progress span { animation:m-fill 1s var(--settle) .25s backwards; }
  .enter .progress span::after { animation:m-shine 1.1s ease-in-out 1.05s; }
  @keyframes m-fill { from { width:0; } }
  @keyframes m-shine { to { translate:100% 0; } }

  .enter .stamp-cell span { animation:m-pop .5s var(--spring) backwards; animation-delay:calc(.2s + var(--n,0) * .04s); }
  /* A freshly confirmed stamp lands last: a heavy thunk, then an ink ring spreads out from it. */
  .stamp-cell.fresh span { animation:m-thunk .55s var(--spring) .65s backwards; }
  .stamp-cell.fresh span::after { content:""; position:absolute; inset:-1px; border:2px solid var(--ink); border-radius:50%; opacity:0; pointer-events:none; animation:m-ring .7s ease-out .9s; }
  @keyframes m-pop { from { opacity:0; scale:.4; } }
  @keyframes m-thunk { 0% { opacity:0; scale:2.4; rotate:-38deg; } 55% { opacity:1; scale:.88; } }
  @keyframes m-ring { from { opacity:.8; scale:1; } to { opacity:0; scale:2; } }

  :is(.bottom-nav,.rail) button[aria-current="page"] svg { animation:m-pop .45s var(--spring); }
  .menu-sheet { transform-origin:top right; animation:m-sheet .42s var(--spring); }
  @keyframes m-sheet { from { opacity:0; transform:translateY(-10px) scale(.92); } }
  .toast:not([hidden]) { animation:m-toast .45s var(--spring); }
  @keyframes m-toast { from { opacity:0; translate:0 18px; scale:.9; } }
}