/* ALBAN motion layer v1 (2026-11-11) — shared by alban-global.com and learn.alban-global.com.
   Rules: content is visible in the initial HTML. Things are hidden only after
   alban-motion.js sets html.motion-ready, and only transform / opacity / clip-path move.
   html.motion-ok is set by a one-line inline script in <head> (motion allowed: no
   reduced-motion, no Save-Data). Tokens can be overridden per site. */
:root {
  --m-ease: cubic-bezier(.2,.7,.2,1);
  --m-gold: #e8b860;
  --m-sheen: rgba(255,255,255,.38);
  --m-glow: rgba(232,184,96,.11);
  --m-rise: 18px;
  --m-dur: .8s;
}

/* a. Page transitions (cross-document View Transitions). Unsupported: nothing happens. */
@view-transition { navigation: auto; }
.site-header, [data-motion="header"] { view-transition-name: m-header; }
main#main, [data-motion="main"] { view-transition-name: m-main; }
::view-transition-group(m-header) { animation: none; }
::view-transition-old(m-header) { display: none; }
::view-transition-new(m-header) { animation: none; }
::view-transition-old(m-main) { animation: m-vt-out .26s var(--m-ease) both; }
::view-transition-new(m-main) { animation: m-vt-in .55s var(--m-ease) .06s both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: none; } }

/* b. Scroll reveal. Hidden state exists only under html.motion-ready. */
html.motion-ready [data-m-reveal] {
  transition: opacity var(--m-dur) var(--m-ease), transform calc(var(--m-dur) + .1s) var(--m-ease);
  transition-delay: var(--m-delay, 0ms);
}
html.motion-ready [data-m-reveal]:not(.m-in) { opacity: 0; transform: translate3d(0,var(--m-rise),0); }

/* c. Hero heading: line-by-line mask, once. CSS-only animation that always ends visible. */
html.motion-ok :is(main h1, [data-motion="hero-title"]) { animation: m-mask .95s var(--m-ease) .12s both; }
html.motion-ok :is(main h1, [data-motion="hero-title"]) > br + :is(em, span) { display: inline-block; animation: m-mask .95s var(--m-ease) .34s both; }
/* The theme's own fade must not run on top of the mask. */
html.motion-ok main h1.reveal { opacity: 1 !important; transition: none; }
@keyframes m-mask {
  from { clip-path: inset(0 0 100% 0); transform: translate3d(0,.32em,0); }
  to { clip-path: inset(-30% -12% -40% -12%); transform: none; }
}

/* d. Parallax on bands — only where view() timelines exist; otherwise still. */
.motion-band { position: relative; overflow: hidden; width: 100%; aspect-ratio: 21 / 9; max-height: min(64vh, 640px); background: var(--bg, #0a0b0d); }
.motion-band > :is(video, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.motion-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--bg, #0a0b0d), transparent 16%, transparent 84%, var(--bg, #0a0b0d)); }
@media (max-width: 760px) { .motion-band { aspect-ratio: 16 / 10; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.motion-ok :is(.motion-band > video, .motion-band > img, [data-motion="parallax"]) {
      animation: m-parallax linear both; animation-timeline: view(); animation-range: cover;
    }
  }
}
@keyframes m-parallax { from { transform: translate3d(0,-5%,0) scale(1.12); } to { transform: translate3d(0,5%,0) scale(1.12); } }

/* e. Buttons: a slow gold sheen, a press, a light magnet (pointer: fine, set from JS). */
html.motion-ready .m-btn {
  background-image: linear-gradient(105deg, transparent 38%, var(--m-btn-sheen, var(--m-sheen)) 50%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 130% 0;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--mlift, 0px)), 0) scale(var(--ms, 1));
  transition: background-position 1.2s var(--m-ease), background-color .3s, color .3s, border-color .3s, transform .45s var(--m-ease);
}
html.motion-ready .m-btn.m-btn--line { --m-btn-sheen: rgba(232,184,96,.28); }
html.motion-ready .m-btn:is(:hover, :focus-visible) {
  background-image: linear-gradient(105deg, transparent 38%, var(--m-btn-sheen, var(--m-sheen)) 50%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: -30% 0; --mlift: -1px;
}
html.motion-ready .m-btn:active { --ms: .97; --mlift: 0px; transition-duration: 1.2s, .3s, .3s, .3s, .12s; }

/* f. Cards: a faint light that follows the cursor (pointer: fine only). */
.m-glow { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--m-ease);
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), var(--m-glow), transparent 62%); }
.m-card:hover > .m-glow { opacity: 1; }

/* g. Thin gold progress line at the top of the screen. */
.m-progress { position: fixed; z-index: 2147483000; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(232,184,96,.35), var(--m-gold)); transform-origin: 0 50%; transform: scaleX(var(--mp, 0)); }
@supports (animation-timeline: scroll()) {
  .m-progress.m-progress--css { transform: scaleX(0); animation: m-progress linear both; animation-timeline: scroll(root); }
}
@keyframes m-progress { to { transform: scaleX(1); } }

/* h. Video: [data-motion-video="overlay"] stays transparent until it really plays,
   so the photo underneath remains the visible fallback. Plain bands show the poster. */
video[data-motion-video="overlay"] { opacity: 0; transition: opacity 1.4s var(--m-ease); }
video[data-motion-video="overlay"].is-playing { opacity: 1; }

/* Print and reduced motion: everything plain and visible. */
@media print { html.motion-ready [data-m-reveal] { opacity: 1 !important; transform: none !important; } .m-progress { display: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html [data-m-reveal], html .m-btn { opacity: 1 !important; transform: none !important; transition: none !important; }
  html :is(main h1, [data-motion="hero-title"]), html :is(main h1, [data-motion="hero-title"]) > * { animation: none !important; clip-path: none !important; }
  .m-glow { display: none; }
  video[data-motion-video="overlay"] { display: none; }
}