/* ============================================================
   HAZEM AL-ZUBI · BREATH V1 · 04 Sep 2026
   The page inhales and exhales with the scroll.
   Blocks: scale up to 1 as they reach the centre of the viewport,
   settle back as they leave. Large images rise on the scroll and
   breathe on a slow autonomous cycle (~8 s). Text exhales into focus.
   Transform + opacity + filter only. Off under prefers-reduced-motion.
   ============================================================ */

/* Everything the script tracks */
[data-breath]{
  transform:translate3d(0,var(--by,0px),0) scale(var(--bs,1));
  transform-origin:50% 50%;
  opacity:var(--bo,1);
  will-change:transform,opacity;
  backface-visibility:hidden;
}
[data-breath="image"]{transform-origin:50% 60%}
[data-breath="hero"]{transform-origin:50% 70%}

/* Text exhales into focus: the existing reveals gain a breath of blur */
.js .reveal,.js .r{filter:blur(9px)}
.js .reveal.is-visible,.js .r.in{filter:blur(0)}
.js .reveal{transition:opacity 1.1s var(--ease,cubic-bezier(.16,1,.3,1)),transform 1.1s var(--ease,cubic-bezier(.16,1,.3,1)),filter 1.4s cubic-bezier(.16,1,.3,1)}
.js .r{transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),filter 1.4s cubic-bezier(.16,1,.3,1)}

/* The small things breathe with the page: scroll cue, scene counter, eyebrows' rule */
.scroll-cue,.scene-count{animation:hz-breath-opacity 8s cubic-bezier(.45,0,.55,1) infinite}
.story-progress span{transition:transform .25s linear}
@keyframes hz-breath-opacity{0%,100%{opacity:.55}50%{opacity:1}}

/* The seal in the header takes one slow breath a minute — barely there */
.site-header .brand img,.topbar .tb-logo{animation:hz-breath-seal 60s cubic-bezier(.45,0,.55,1) infinite}
@keyframes hz-breath-seal{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* Hero: the basalt cube's shadow loosens as it inhales */
.hero-picture img{transition:filter 2s cubic-bezier(.45,0,.55,1)}

/* Mobile: half the amplitude (set in JS), no blur on low-power devices */
@media(max-width:760px){
  .js .reveal,.js .r{filter:blur(6px)}
}
@media(prefers-reduced-motion:reduce){
  [data-breath]{transform:none!important;opacity:1!important;will-change:auto}
  .js .reveal,.js .r{filter:none!important}
  .scroll-cue,.scene-count,.site-header .brand img,.topbar .tb-logo{animation:none!important}
}