/* Kept motion layer styles. Only active when <html data-motion="on"> (see js/motion-init.js). */
.motion-sw { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 999px; padding: 6px 12px 6px 8px; font: 600 13px/1 var(--body); cursor: pointer; white-space: nowrap; }
.motion-sw .knob { width: 26px; height: 16px; border-radius: 999px; background: var(--line); position: relative; transition: background .3s; flex: none; }
.motion-sw .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.motion-sw[aria-checked="true"] .knob { background: var(--accent); }
.motion-sw[aria-checked="true"] .knob::after { transform: translateX(10px); }
.motion-note { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; display: flex; gap: 12px; align-items: center; background: var(--accent-deep, #2B1B0E); color: #fff; padding: 10px 12px 10px 18px; border-radius: 16px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); max-width: calc(100% - 24px); font-size: 14px; }
.motion-note .btn { white-space: nowrap; }
.motion-note .x { background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; padding: 0 6px; }
@media (max-width: 640px) { .motion-note { flex-wrap: wrap; } }

:root.mo .mprog { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 70; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); pointer-events: none; transition: background .6s; }

/* floating depth layers */
:root.mo section.s, :root.mo .final { overflow: clip; }
:root.mo .fx-holder { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
:root.mo section.s > .wrap, :root.mo .final > .wrap { position: relative; z-index: 1; }
:root.mo .fx { position: absolute; left: var(--x); top: var(--y); width: var(--sz); height: var(--sz); color: var(--accent); opacity: .16; will-change: transform; transform: translate3d(0, var(--ty, 0px), 0) rotate(calc(var(--r, 0deg) + var(--rot, 0deg))); transition: color .8s; }
:root.mo .fx-ring { border: 3px solid currentColor; border-radius: 50%; background: none; }
:root[data-side="barber"].mo .fx-ring { border-radius: 0; transform: translate3d(0, var(--ty, 0px), 0) rotate(calc(45deg + var(--rot, 0deg))); }
:root[data-side="jr"].mo .fx-ring { background: currentColor; opacity: .1; }
:root.mo section.s::before { content: ""; position: absolute; width: min(60vw, 640px); aspect-ratio: 1; right: -14vw; top: calc(var(--sp, 0) * -220px + 8%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 66%); pointer-events: none; z-index: 0; transition: background .8s; }
:root.mo section.s:nth-of-type(even)::before { right: auto; left: -16vw; top: calc(var(--sp, 0) * 200px + 20%); }

/* word-by-word headings */
:root.mo .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
:root.mo .split .w > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(4deg); opacity: 0; transition: transform calc(var(--dur) + .2s) var(--ease), opacity .6s var(--ease); transition-delay: calc(var(--i) * 70ms); }
:root.mo .split.in .w > span { transform: none; opacity: 1; }

/* ticker */
.ticker { overflow: hidden; padding: clamp(18px, 3vw, 34px) 0; background: var(--hero); color: var(--hero-ink); border-block: 1px solid color-mix(in srgb, var(--hero-ink) 18%, transparent); display: grid; gap: 4px; transition: background .8s; }
.ticker { --tk-ink: var(--hero-ink); }
.ticker.rev { --tk-ink: var(--bg); background: var(--fg); color: var(--bg); }
.tk-row { display: flex; gap: 28px; align-items: center; width: max-content; font: 800 clamp(36px, 7vw, 92px)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; will-change: transform; white-space: nowrap; }
.tk-row:nth-child(2) { margin-left: -2600px; }
.tk-row:nth-child(2) span { color: transparent; -webkit-text-stroke: 2px var(--tk-ink); }
.tk-row b { font-size: .4em; opacity: .7; }

/* chapter dots */
.chapters { position: fixed; right: 18px; top: 50%; transform: translate(40px, -50%); z-index: 55; display: none; flex-direction: column; gap: 4px; opacity: 0; transition: opacity .4s, transform .5s var(--ease); }
.chapters.show { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 1100px) { .chapters { display: flex; } }
.chapters a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 22px; text-decoration: none; color: var(--fg); font: 700 12px/1 var(--body); }
.chapters a span { opacity: 0; transform: translateX(8px); transition: all .3s var(--ease); background: var(--fg); color: var(--bg); padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.chapters a::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); background: transparent; transition: all .3s var(--ease); flex: none; }
.chapters a.on::after { background: var(--accent); transform: scale(1.5); }
.chapters a:hover span, .chapters a:focus-visible span { opacity: 1; transform: none; }

/* pointer effects */
:root.mo .hero .prop { translate: calc((var(--mx, .5) - .5) * var(--d, 1) * -60px) calc((var(--my, .5) - .5) * var(--d, 1) * -60px); }
:root.mo .hero-mark { translate: calc((var(--mx, .5) - .5) * 24px) calc((var(--my, .5) - .5) * 16px); }
:root.mo .hero-stage.spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%), rgba(255, 255, 255, .22), transparent 60%); mix-blend-mode: soft-light; z-index: 3; }
:root.mo .card:not(form), :root.mo .pay-card, :root.mo .level, :root.mo .offer, :root.mo .city-list li { transition: translate .4s var(--ease), box-shadow .4s, background .6s; position: relative; }
:root.mo .lift { translate: 0 -6px; box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--accent-deep, #000) 55%, transparent); }
:root.mo .lift::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); }
:root.mo .btn { transition: translate .25s var(--ease), transform .25s var(--ease), background .3s, box-shadow .3s; }

@media (max-width: 640px) { .tk-row { font-size: clamp(30px, 11vw, 54px); } :root.mo .fx { opacity: .1; } }