/* HAZEM AL-ZUBI · BREATH V3 · HHS WOW PLAYBOOK APPLICATION · 04 Sep 2026
   Rhythm principle: inhale · stillness · exhale. Motion never carries meaning alone.
   Layout is stable while reading; transforms/opacity only. A complete static/reduced-motion state is built in. */

:root{
  --hz-breath-ease:cubic-bezier(.16,1,.3,1);
  --hz-breath-soft:cubic-bezier(.45,0,.55,1);
}

/* A scene can feel alive without every object moving. */
.scene{
  --hz-scene-lift:0px;
  --hz-scene-scale:1;
  --hz-scene-opacity:1;
  --hz-light-x:50%;
}

/* Very quiet atmosphere: a moving pool of light, not a decorative animation. */
.scene.scene-dark::after,
.scene.scene-weight::after,
.scene.payoff::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at var(--hz-light-x) 52%,rgba(255,244,219,.052),transparent 39%);
  opacity:var(--hz-atmosphere,.7);
  transition:opacity 1.2s var(--hz-breath-soft);
}
.scene.scene-ivory::after,
.scene:not(.scene-dark):not(.scene-weight):not(.payoff)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at var(--hz-light-x) 48%,rgba(18,15,12,.028),transparent 42%);
  opacity:var(--hz-atmosphere,.5);
}

/* The page breathes in density too. Rest scenes gain air inside the content block,
   but the text never reflows while the user reads. */
.scene.breath-rest > .scene-inner{
  padding-top:clamp(4.5rem,8.5vh,8rem);
  padding-bottom:clamp(4.5rem,8.5vh,8rem);
}
.scene.breath-hold > .scene-inner{
  padding-top:clamp(3.2rem,6vh,6rem);
  padding-bottom:clamp(3.2rem,6vh,6rem);
}

/* Tracked blocks: minuscule centre-settle, never a zoom spectacle. */
[data-hz-breath="block"]{
  transform:translate3d(0,var(--hz-block-y,0px),0) scale(var(--hz-block-s,1));
  opacity:var(--hz-block-o,1);
  transform-origin:50% 50%;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* Media drifts only enough to register as breathing. */
[data-hz-breath="media"]{
  transform:translate3d(0,var(--hz-media-y,0px),0) scale(var(--hz-media-s,1));
  transform-origin:50% 58%;
  will-change:transform;
  backface-visibility:hidden;
}

/* Hero breath is autonomous and deliberately slower than the rest of the page. */
.hero-picture[data-hz-breath="hero"]{
  transform:translate3d(0,0,0) scale(var(--hz-hero-s,1));
  transform-origin:50% 68%;
  will-change:transform;
}
.hero-picture[data-hz-breath="hero"] img{
  filter:saturate(var(--hz-hero-sat,.83)) contrast(1.08) brightness(var(--hz-hero-bright,.9)) drop-shadow(0 var(--hz-hero-shadow-y,34px) var(--hz-hero-shadow-b,48px) rgba(0,0,0,var(--hz-hero-shadow-a,.61)));
  transition:filter 1.4s var(--hz-breath-soft);
}

/* Reveal = exhale into clarity. No blur veil; content remains legible if JS is late. */
.js .reveal,
.js .r{
  filter:none!important;
}
.js .reveal:not(.is-visible),
.js .r:not(.in){
  opacity:.01;
  transform:translate3d(0,18px,0);
}
.js .reveal,
.js .r{
  transition:opacity 1.05s var(--hz-breath-ease),transform 1.05s var(--hz-breath-ease)!important;
}

/* A few tiny anchors keep the pulse visible while the large scenes remain calm. */
.scroll-cue,.scene-count{
  animation:hz-v37-cue 10s var(--hz-breath-soft) infinite;
}
.site-header .brand img,.topbar .tb-logo{
  animation:hz-v37-mark 42s var(--hz-breath-soft) infinite;
  transform-origin:center;
}
@keyframes hz-v37-cue{0%,100%{opacity:.52}50%{opacity:.94}}
@keyframes hz-v37-mark{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}

/* Manual motion control, required because breathing must be optional. */
.hz-motion-control{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:90;
  min-width:44px;
  min-height:44px;
  padding:10px 14px;
  border:1px solid currentColor;
  border-radius:999px;
  background:rgba(12,11,9,.78);
  color:#f2eadb;
  font:500 11px/1.1 "IBM Plex Sans",system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  opacity:.72;
  transition:opacity .25s ease,transform .25s ease,background .25s ease;
}
.hz-motion-control:hover,.hz-motion-control:focus-visible{opacity:1;transform:translateY(-2px)}
.hz-motion-control:focus-visible{outline:2px solid currentColor;outline-offset:3px}
html[dir="rtl"] .hz-motion-control{right:auto;left:max(16px,env(safe-area-inset-left))}

/* Paused is a full static design, not merely a slower animation. */
.motion-paused [data-hz-breath]{transform:none!important;opacity:1!important;will-change:auto!important}
.motion-paused .scene::after{opacity:.34!important}
.motion-paused .scroll-cue,
.motion-paused .scene-count,
.motion-paused .site-header .brand img,
.motion-paused .topbar .tb-logo{animation:none!important}
.motion-paused .hero-picture img{filter:none!important}

@media(max-width:760px){
  .scene.breath-rest > .scene-inner{padding-top:clamp(3.5rem,7vh,5rem);padding-bottom:clamp(3.5rem,7vh,5rem)}
  .scene.breath-hold > .scene-inner{padding-top:clamp(2.6rem,5vh,4rem);padding-bottom:clamp(2.6rem,5vh,4rem)}
  .hz-motion-control{padding:9px 11px;font-size:10px;bottom:max(12px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))}
  html[dir="rtl"] .hz-motion-control{right:auto;left:max(12px,env(safe-area-inset-left))}
}

@media(prefers-reduced-motion:reduce){
  [data-hz-breath]{transform:none!important;opacity:1!important;will-change:auto!important}
  .scene::after{opacity:.34!important}
  .scroll-cue,.scene-count,.site-header .brand img,.topbar .tb-logo{animation:none!important}
  .hero-picture img{filter:none!important}
  .js .reveal,.js .r{opacity:1!important;transform:none!important;transition:none!important}
  .hz-motion-control{display:none!important}
}