/* SEOmise public website: motion effects for the "Clear Signal" theme. Loaded after public.css on every public page;
   the behaviour is in public/js/effects.js (its header lists the markup). Uses the public.css tokens.

   USAGE (classes and attributes; everything here degrades to a static, readable page)
     [data-parallax]         drift on scroll (effects.js)              .kb / .kb-slide      Ken Burns slides
     [data-tilt]             3D tilt + glare toward the pointer        [data-spotlight]     light that follows the pointer
     .flip[data-flip]        flip box; data-flip="click" = no hover    [data-carousel-cards] big-card carousel
     .ba[data-ba]            before / after slider                     [data-magnetic]      buttons that lean to the pointer
     [data-marquee]          endless ticker                            .glass, .glass-light translucent cards
     .band-parallax          full-width band with a drifting background (.band-parallax-bg) and content on top;
                             .band-parallax-light keeps dark text on a pale background
     [data-reveal="right|fade|blur|rise"]  extra entrance styles for site.js's reveal (up, left and zoom are in public.css)
     .kb-ui, .kb-btn, .kb-dots  ready-made slideshow controls (pause, previous, next, dots) for dark backgrounds
   Under prefers-reduced-motion nothing moves: no zoom, drift, tilt, pull or auto-advance; controls keep working. */

/* ---------- Parallax ---------- */
.band-parallax-bg, [data-parallax] { backface-visibility: hidden; }

/* ---------- Ken Burns ---------- */
.kb { position: relative; overflow: hidden; background: var(--night, #0b1526); }
.kb-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.kb-slide:first-child { opacity: 1; }
.fx .kb-slide { opacity: 0; z-index: 0; }
.fx .kb-slide.is-on { opacity: 1; z-index: 1; }
.fx .kb-slide.is-off { opacity: 0; z-index: 0; }
.kb-slide picture { display: block; width: 100%; height: 100%; }
.kb-slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--kb-pos, 50% 50%);
  transform-origin: var(--kb-pos, 50% 50%); transform: scale(1.04); backface-visibility: hidden; will-change: transform; }
.kb-slide:first-child img, .kb-slide.is-on img, .kb-slide.is-off img { animation: kb-in var(--kb-dur, 9s) linear both; }
.fx .kb-slide:first-child:not(.is-on):not(.is-off) img { animation: none; }
.kb-slide[data-kb-pan="out"] img { animation-name: kb-out; }
.kb-slide[data-kb-pan="left"] img { animation-name: kb-left; }
.kb-slide[data-kb-pan="right"] img { animation-name: kb-right; }
.kb-slide[data-kb-pan="up"] img { animation-name: kb-up; }
.kb-slide[data-kb-pan="down"] img { animation-name: kb-down; }
.kb.is-frozen .kb-slide img, .is-paused .kb .kb-slide img { animation-play-state: paused; }
@keyframes kb-in { from { transform: scale(1.04); } to { transform: scale(1.16); } }
@keyframes kb-out { from { transform: scale(1.18); } to { transform: scale(1.05); } }
@keyframes kb-left { from { transform: scale(1.14) translate3d(3%, 0, 0); } to { transform: scale(1.14) translate3d(-3%, 0, 0); } }
@keyframes kb-right { from { transform: scale(1.14) translate3d(-3%, 0, 0); } to { transform: scale(1.14) translate3d(3%, 0, 0); } }
@keyframes kb-up { from { transform: scale(1.14) translate3d(0, 3%, 0); } to { transform: scale(1.14) translate3d(0, -3%, 0); } }
@keyframes kb-down { from { transform: scale(1.14) translate3d(0, -3%, 0); } to { transform: scale(1.14) translate3d(0, 3%, 0); } }

/* Slideshow controls for dark or photo backgrounds */
.kb-ui { display: flex; align-items: center; gap: 12px; }
.kb-dots { display: flex; gap: 8px; align-items: center; }
.kb-dots button { all: unset; cursor: pointer; width: 9px; height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .45); transition: width .4s var(--ease), background .3s; }
.kb-dots button[aria-current="true"] { width: 28px; background: #fff; }
.kb-dots button:hover { background: rgba(255, 255, 255, .8); }
.kb-dots button:focus-visible, .kb-btn:focus-visible { outline: 2.5px solid #fff; outline-offset: 3px; }
.kb-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(11, 21, 38, .35); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.kb-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); transform: scale(1.05); }
.kb-btn[hidden] { display: none; }
.kb-btn .ms { font-size: 20px; }
.no-js .kb-ui { display: none; }

/* ---------- Tilt and glare ---------- */
:where([data-tilt], [data-spotlight]) { position: relative; }
[data-tilt] { transition: transform .7s var(--ease), box-shadow .35s var(--ease); }
[data-tilt].is-tilting { transition: transform .12s linear, box-shadow .35s var(--ease); box-shadow: var(--sh-3); }
.fx-glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);
  background: radial-gradient(70% 60% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%); }
.is-tilting > .fx-glare { opacity: 1; }

/* ---------- Spotlight ---------- */
.fx-spot { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), rgba(25, 195, 125, .13), transparent 62%); }
[data-spotlight="light"] > .fx-spot { background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .11), transparent 62%); }
.is-lit > .fx-spot { opacity: 1; }

/* ---------- Flip boxes (the base .flip styles are in public.css) ---------- */
@media (hover: hover) and (pointer: fine) {
  .flip[data-flip="click"]:not(.is-flipped):hover .flip-inner { transform: none; }
  .flip[data-flip="click"] .flip-face { cursor: pointer; }
}

/* ---------- Big-card carousel ---------- */
[data-carousel-cards] .car-track { --gap: 22px; grid-auto-columns: min(80%, 780px); padding: 10px 2px 26px; }
[data-carousel-cards] .car-track > * { transition: transform .6s var(--ease), opacity .6s var(--ease), box-shadow .4s; transform-origin: center left; }
.fx [data-carousel-cards] .car-track > *:not(.is-active) { transform: scale(.94); opacity: .6; }
[data-carousel-cards] .car-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; -webkit-user-select: none; }
[data-carousel-cards] .car-track.is-dragging * { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { [data-carousel-cards] .car-track { cursor: grab; } }
@media (max-width: 640px) { [data-carousel-cards] .car-track { grid-auto-columns: 88%; --gap: 14px; } }

/* ---------- Before / after ---------- */
.ba { --ba: 50%; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: var(--bg-2); user-select: none; -webkit-user-select: none; }
.ba > .ba-before { display: block; width: 100%; height: auto; }
.ba > .ba-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--ba)); }
.ba > img { max-width: none; }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; z-index: 2; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 38, .12), 0 0 18px rgba(11, 21, 38, .3); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: var(--ba); z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: var(--sh-3); pointer-events: none;
  transition: transform .2s var(--ease); }
.ba-knob::before, .ba-knob::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.ba-knob::before { left: 7px; border-right-color: var(--ink); } .ba-knob::after { right: 7px; border-left-color: var(--ink); }
.ba-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: none; }
.ba-range:focus-visible + .ba-knob, .ba:has(.ba-range:focus-visible) .ba-knob { outline: 2.5px solid var(--brand); outline-offset: 3px; }
.ba:hover .ba-knob { transform: scale(1.08); }
.ba-label { position: absolute; top: 14px; z-index: 2; padding: 5px 11px; border-radius: 99px; font: 600 12.5px/1 var(--sans); letter-spacing: .04em; color: #fff; background: rgba(11, 21, 38, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.ba-label-before { left: 14px; } .ba-label-after { right: 14px; background: rgba(11, 138, 91, .85); }
.no-js .ba { display: grid; gap: 12px; background: none; }
.no-js .ba > .ba-after { position: static; clip-path: none; height: auto; }
.no-js .ba::after, .no-js .ba-label { display: none; }

/* ---------- Magnetic ---------- */
[data-magnetic] { transition: translate .45s var(--ease), transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; }
[data-magnetic].is-pulled { transition: translate .12s linear, transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; }

/* ---------- Marquee (track styles in public.css) ---------- */
.marquee-track { animation-duration: var(--marquee-dur, 48s); }
.marquee-reverse .marquee-track { animation-direction: reverse; }
.marquee.is-off .marquee-track { animation-play-state: paused; }
.no-js [data-marquee] .marquee-track, .no-js [data-marquee] > ul { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }

/* ---------- Glass ---------- */
.glass { position: relative; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-lg); color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
.glass h2, .glass h3, .glass b { color: #fff; }
.glass p, .glass small, .glass li { color: rgba(230, 237, 247, .86); }
.glass-light { position: relative; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-lg); color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: var(--sh-2); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(11, 21, 38, .82); }
  .glass-light { background: rgba(255, 255, 255, .94); }
}

/* ---------- Band with a parallax background ---------- */
.band-parallax { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 10vw, 140px) 0; background: var(--night); color: var(--on-night); }
.band-parallax-bg { position: absolute; left: 0; right: 0; top: -22%; bottom: -22%; z-index: -2; background-size: cover; background-position: center; pointer-events: none; }
.band-parallax-bg img, .band-parallax-bg picture { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.band-parallax::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 21, 38, .78), rgba(11, 21, 38, .6) 50%, rgba(11, 21, 38, .84)); }
.band-parallax .h-sec, .band-parallax h2, .band-parallax h3 { color: #fff; }
.band-parallax .h-sec em { color: var(--brand-bright); }
.band-parallax .lede, .band-parallax p { color: var(--on-night-2); }
.band-parallax .kicker { color: var(--brand-bright); }
.band-parallax-light { background: var(--bg-2); color: var(--ink); }
.band-parallax-light::before { background: linear-gradient(180deg, rgba(246, 248, 251, .5), rgba(246, 248, 251, .2) 50%, rgba(246, 248, 251, .6)); }
.band-parallax-light .h-sec, .band-parallax-light h2, .band-parallax-light h3 { color: var(--ink); }
.band-parallax-light .lede, .band-parallax-light p { color: var(--ink-2); }
.band-parallax-light .kicker { color: var(--brand-ink); }
.band-parallax-light .h-sec em { color: var(--brand); }

/* ---------- Extra entrance styles for [data-reveal] (site.js adds .is-in) ---------- */
.js [data-reveal="right"] { transform: translateX(24px); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="rise"] { transform: translateY(48px) scale(.98); }
.js [data-reveal="blur"] { transform: translateY(14px); filter: blur(10px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { transform: none; filter: none; }

/* ---------- Reduced motion: nothing drifts, zooms, tilts or pulls ---------- */
@media (prefers-reduced-motion: reduce) {
  .kb-slide img { animation: none !important; transform: none !important; }
  [data-parallax], .band-parallax-bg, [data-magnetic] { translate: none !important; }
  .band-parallax-bg { transform: none !important; }
  [data-tilt] { transform: none !important; }
  .fx-glare, .fx-spot { display: none; }
  .fx [data-carousel-cards] .car-track > * { transform: none !important; opacity: 1 !important; }
  .js [data-reveal="blur"] { filter: none; }
  .ba-knob { transition: none; }
}