/* Shared structural base — resets + the floating video lightbox.
   Visual theming lives in each direction's own stylesheet. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---- Floating lightbox (shared across all directions) ---- */
.ha-lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.ha-lb.is-open{display:flex;animation:ha-lb-in .22s ease}
@keyframes ha-lb-in{from{opacity:0}to{opacity:1}}
.ha-lb-backdrop{position:absolute;inset:0;background:rgba(8,8,12,.86);backdrop-filter:blur(8px)}
.ha-lb-dialog{position:relative;width:min(1100px,100%);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ha-lb-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.ha-lb-embed,.ha-lb-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ha-lb-close{position:absolute;top:-46px;right:0;width:40px;height:40px;display:grid;place-items:center;color:#fff;border-radius:50%;transition:transform .15s ease,background .15s ease}
[dir="rtl"] .ha-lb-close{right:auto;left:0}
.ha-lb-close:hover{transform:rotate(90deg) scale(1.05)}
.ha-lb-dialog .ha-lb-frame{animation:ha-pop .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes ha-pop{from{transform:scale(.94) translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* lightbox description + stills (shared, neutral; themes may restyle) */
.ha-lb-info{margin-top:16px;color:#f4f2ee;text-align:start}
.ha-lb-info[hidden]{display:none}
.ha-lb-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ha-lb-head h3{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.ha-lb-head span{font-size:.85rem;opacity:.6}
.ha-lb-desc{margin:0;color:rgba(244,242,238,.8);font-size:1rem;line-height:1.65;max-width:70ch}
.ha-lb-stills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.ha-lb-still{width:100%;aspect-ratio:16/9}
@media(max-width:560px){.ha-lb-stills{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   Scroll FX  (shared) — richer reveals, headline splits, parallax
   Tasteful default; everything degrades to "just visible" under
   prefers-reduced-motion.
   ============================================================ */
:root{--fx-ease:cubic-bezier(.16,1,.3,1)}

/* generic block reveal — gentle rise + de-blur */
[data-reveal]{opacity:0;transform:translateY(34px);filter:blur(7px);will-change:transform,opacity,filter;
  transition:opacity .85s ease,transform 1s var(--fx-ease),filter .85s ease}
[data-reveal].is-in{opacity:1;transform:none;filter:none}

/* char-by-char blur+fade */
.fx-chars .fx-char{display:inline-block}
.fx-chars .fx-char-i{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(8px) scale(.94);
  transition:opacity .45s ease,filter .55s ease,transform .45s var(--fx-ease);transition-delay:var(--d,0ms)}
.fx-chars.fx-in .fx-char-i{opacity:1;filter:none;transform:none}
.fx-chars .fx-space{display:inline-block;white-space:pre}
.fx-chars .fx-char-i:nth-child(1){transform-origin:50% 100%}


.fx-lines .fx-line{display:block;overflow:hidden;padding-bottom:.06em}
.fx-lines .fx-line-i{display:block;transform:translateY(112%);opacity:0;
  transition:transform .9s var(--fx-ease),opacity .6s ease;transition-delay:var(--d,0ms)}
.fx-lines.fx-in .fx-line-i{transform:none;opacity:1}

/* headline WORD reveal — words cascade up from a mask */
.fx-words{text-wrap:balance}
.fx-words .fx-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.fx-words .fx-word-i{display:inline-block;transform:translateY(115%);opacity:0;
  transition:transform .7s var(--fx-ease),opacity .5s ease;transition-delay:var(--d,0ms)}
.fx-words.fx-in .fx-word-i{transform:none;opacity:1}
.fx-words .fx-space{display:inline-block;white-space:pre}

/* grid stagger — children rise in sequence when the grid scrolls in */
.fx-grid>*{opacity:0;transform:translateY(30px) scale(.985);filter:blur(5px);
  transition:opacity .7s ease,transform .8s var(--fx-ease),filter .6s ease}
.fx-grid.is-grid-in>*{opacity:1;transform:none;filter:none}
.fx-grid.is-grid-in>*{transition-delay:calc(var(--gi,0)*70ms)}
.fx-grid>*:nth-child(1){--gi:0}.fx-grid>*:nth-child(2){--gi:1}.fx-grid>*:nth-child(3){--gi:2}
.fx-grid>*:nth-child(4){--gi:3}.fx-grid>*:nth-child(5){--gi:4}.fx-grid>*:nth-child(6){--gi:5}
.fx-grid>*:nth-child(7){--gi:6}.fx-grid>*:nth-child(8){--gi:7}.fx-grid>*:nth-child(9){--gi:8}
.fx-grid>*:nth-child(10){--gi:9}.fx-grid>*:nth-child(11){--gi:10}.fx-grid>*:nth-child(12){--gi:11}
.fx-grid>*:nth-child(n+13){--gi:12}

/* scroll progress strip */
.fx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;
  transform:scaleX(var(--sp,0));transform-origin:0 50%}

/* reduced motion: show everything, kill effects */
@media (prefers-reduced-motion:reduce){
  [data-reveal],.fx-grid>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .fx-lines .fx-line-i,.fx-words .fx-word-i{transform:none!important;opacity:1!important;transition:none!important}
  .fx-progress{display:none}
}