/* Flakk motion system (06.11.2026): ONE token set + presets for the flat page and the 3D tour page. See motion-README.md.
   Rules: only transform-like props (translate / scale / rotate) and opacity animate; box-shadow only on hover/press; reduced motion = simple fades. */
:root {
  --m-fast: 120ms; --m-base: 240ms; --m-slow: 420ms; --m-spring-dur: 520ms; --m-enter: 700ms; --m-theme: 1500ms;
  --m-out: cubic-bezier(.2, .7, .2, 1); --m-inout: cubic-bezier(.65, 0, .35, 1);
  --m-spring: cubic-bezier(.34, 1.56, .64, 1);          /* fallback: one overshoot */
  --m-bounce: cubic-bezier(.3, 1.9, .6, 1);
  --m-press: .94; --m-lift: -2px; --m-amber: 242, 167, 65;
  --m-glow: 0 10px 28px -8px rgba(var(--m-amber), .55), 0 0 0 1px rgba(var(--m-amber), .38);
  --m-press-shadow: 0 2px 6px -2px rgba(0, 0, 0, .45);
}
@supports (transition-timing-function: linear(0, 1)) { :root {   /* real damped springs, sampled (zeta .55 / .32) */
  --m-spring: linear(0, 0.083, 0.275, 0.504, 0.721, 0.897, 1.02, 1.093, 1.123, 1.123, 1.104, 1.076, 1.047, 1.023, 1.004, 0.992, 0.986, 0.984, 0.986, 0.989, 0.992, 0.996, 0.999, 1, 1.002, 1.002, 1.002, 1.002, 1.001, 1.001, 1, 1, 1, 1, 1, 1, 1);
  --m-bounce: linear(0, 0.099, 0.343, 0.647, 0.938, 1.166, 1.302, 1.346, 1.313, 1.23, 1.125, 1.023, 0.944, 0.896, 0.88, 0.891, 0.92, 0.956, 0.991, 1.019, 1.036, 1.041, 1.038, 1.028, 1.015, 1.003, 0.994, 0.988, 0.986, 0.987, 0.99, 0.995, 0.999, 1.002, 1.004, 1.005, 1); } }

/* ---- press / hover / release for every pressable thing ---- */
.btn, .appbtn, .lang-trig, .m-press { translate: var(--mx, 0px) calc(var(--my, 0px) + var(--ly, 0px)); scale: var(--ps, 1);
  transition: translate var(--m-spring-dur) var(--m-spring), scale var(--m-spring-dur) var(--m-spring), box-shadow var(--m-base) var(--m-out), background-color var(--m-base) ease, color var(--m-base) ease; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .btn:hover, .appbtn:hover, .lang-trig:hover, .m-press:hover { --ly: var(--m-lift); box-shadow: var(--m-glow); } }
.btn:active, .appbtn:active, .lang-trig:active, .m-press:active, .m-down { --ps: var(--m-press); --ly: 0px; box-shadow: var(--m-press-shadow) !important; transition-duration: 90ms, 90ms, 90ms, var(--m-base), var(--m-base); transition-timing-function: var(--m-out); }
.m-track { transition-duration: 160ms, var(--m-spring-dur), var(--m-base), var(--m-base), var(--m-base); transition-timing-function: var(--m-out), var(--m-spring), var(--m-out), ease, ease; }
.m-rel { animation: m-release var(--m-spring-dur) ease-in-out; }
@keyframes m-release { 0% { scale: var(--m-press); } 32% { scale: 1.06; } 60% { scale: .98; } 82% { scale: 1.012; } 100% { scale: 1; } }
.btn:focus-visible, .appbtn:focus-visible, .lang-trig:focus-visible, .m-press:focus-visible { outline: 2px solid rgb(var(--m-amber)); outline-offset: 3px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---- small presets ---- */
.lang-trig svg, .m-spin { transition: rotate var(--m-slow) var(--m-spring); }
@media (hover: hover) { .lang-trig:hover svg, .m-spin:hover { rotate: 28deg; } }
.arr { display: inline-block; width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--m-spring-dur) var(--m-spring); } [dir=rtl] .arr { scale: -1 1; }
.btn:hover .arr, .appbtn:hover .arr { translate: 4px 0; } [dir=rtl] .btn:hover .arr, [dir=rtl] .appbtn:hover .arr { translate: -4px 0; }
.m-pop { animation: m-pop var(--m-spring-dur) var(--m-spring) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes m-pop { from { opacity: 0; scale: .86; translate: 0 10px; } }
.m-fade-up { animation: m-fade-up var(--m-slow) var(--m-out) both; } @keyframes m-fade-up { from { opacity: 0; translate: 0 10px; } }
.m-lift { transition: translate var(--m-spring-dur) var(--m-spring), border-color var(--m-base), box-shadow var(--m-base); }
@media (hover: hover) { .m-lift:hover { translate: 0 -3px; } }
/* sliding indicator (tabs, segmented controls, the theme switch knob): move it with translate; the spring gives the overshoot */
.m-ind { transition: translate var(--m-spring-dur) var(--m-spring), width var(--m-spring-dur) var(--m-spring); }
/* the spring for any sheet or panel that opens from a trigger */
.m-open { animation: m-open var(--m-spring-dur) var(--m-spring) both; transform-origin: var(--m-ox, 100% 0); } @keyframes m-open { from { opacity: 0; scale: .82; translate: 0 -8px; } }

/* ---- reduced motion: simple fades only ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --m-spring: ease-out; --m-bounce: ease-out; --m-spring-dur: 160ms; }
  .btn, .appbtn, .lang-trig, .m-press { translate: none !important; scale: none !important; transition: background-color var(--m-fast), color var(--m-fast), opacity var(--m-fast), box-shadow var(--m-fast); }
  .m-rel { animation: none; } .m-pop, .m-fade-up, .m-open { animation: m-rm var(--m-fast) ease both; } @keyframes m-rm { from { opacity: 0; } }
  .lang-trig:hover svg, .m-spin:hover { rotate: none; } .btn:hover .arr { translate: none; } .m-lift:hover { translate: none; }
}

/* ---- time-lapse layer (theme switch) and the sound toast ---- */
.tl-sky { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; contain: layout paint; }
.tl-sky > i { position: absolute; inset: 0; opacity: 0; }
.tl-a { background: linear-gradient(180deg, #071322 0%, #1b2c58 48%, #e87c5c 100%); }
.tl-sky.to-night .tl-a { background: linear-gradient(180deg, #6fa8e6 0%, #f5c58d 60%, #ffe0b0 100%); }
.tl-m { background: radial-gradient(120% 70% at 50% 100%, rgba(255, 150, 90, .85), rgba(240, 120, 150, .45) 45%, transparent 75%); }
.tl-b { background: linear-gradient(180deg, #7fb7ef 0%, #f6c78e 70%, #ffd9a0 100%); }
.tl-sky.to-night .tl-b { background: linear-gradient(180deg, #050d1a 0%, #0b1d3a 60%, #162a54 100%); }
.tl-orb { position: absolute; left: -45px; top: -45px; width: 90px; height: 90px; border-radius: 50%; opacity: 0; will-change: translate, scale;
  background: radial-gradient(circle at 40% 38%, #fff6d8, #ffd27a 45%, #f2a741 75%); box-shadow: 0 0 60px 24px rgba(255, 190, 90, .55), 0 0 160px 60px rgba(255, 150, 70, .25); }
.tl-sky.to-night .tl-orb { background: radial-gradient(circle at 36% 36%, #ffffff, #dfe8fb 55%, #aebfe3); box-shadow: 0 0 50px 16px rgba(170, 195, 255, .45), 0 0 140px 50px rgba(120, 150, 230, .2); }
.tl-st { height: 2px !important; inset: auto auto auto 0 !important; width: 36vw; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); will-change: translate, opacity; }
.tl-st.s1 { top: 22%; } .tl-st.s2 { top: 41%; width: 28vw; } .tl-st.s3 { top: 58%; width: 44vw; } .tl-st.s4 { top: 76%; width: 24vw; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(tl-sky) { animation: none; } ::view-transition-old(tl-sky) { display: none; } ::view-transition-new(tl-sky) { animation: none; }
html.tl-anim body, html.tl-anim .nav, html.tl-anim .card, html.tl-anim .band, html.tl-anim .frame, html.tl-anim .btn, html.tl-anim .ag, html.tl-anim .tile, html.tl-anim .sh, html.tl-anim .vs-r, html.tl-anim .n3 { transition: background-color .9s ease, color .9s ease, border-color .9s ease, box-shadow .9s ease; }
html.tl-quick body, html.tl-quick .nav, html.tl-quick .card, html.tl-quick .band, html.tl-quick .frame, html.tl-quick .btn { transition-duration: .2s !important; }
.m-toast { position: fixed; z-index: 130; inset-inline-end: 16px; inset-block-end: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 26, 44, .88); color: #F5F1E8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 14px 30px -12px rgba(0, 0, 0, .6); opacity: 0; scale: .8; pointer-events: none; transition: opacity var(--m-base), scale var(--m-spring-dur) var(--m-spring); }
.m-toast.on { opacity: 1; scale: 1; } .m-toast svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl-cover { background: linear-gradient(180deg, #bfdcf7 0%, #f7ead2 55%, #fbf8f2 100%); will-change: clip-path, opacity; opacity: 1 !important; }
.tl-sky.to-night .tl-cover { background: linear-gradient(180deg, #050d1a 0%, #0a1b2f 60%, #071322 100%); }
.tl-fade { position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: 0; background: #FBF8F2; } .tl-fade.to-night { background: #071322; }