/* ============================================================
   THE NURSE BRIDGE — CINEMATIC HERO KIT  (cinematic.css)
   One distinct authentic motion per page. Photoreal plate under
   dark scrims + one atmosphere layer, hall-quality. 60fps-safe:
   transform / opacity / filter only. prefers-reduced-motion => still.
   Depends only on styles.css tokens. Drop-in, additive — does not
   assume it loads last, so the four structural stacking rules below
   (marked STACKING) carry !important to guarantee plate/atmos/scrim
   always paint behind hero copy regardless of a page's own legacy
   same-named selectors (e.g. an old `.cine-wrap{z-index:1}` rule).
   ============================================================ */

/* ---------- STRUCTURE ---------- */
.cin-hero{position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; align-items:center; padding:120px 0 90px;}
.cin-hero.compact{min-height:auto; padding:clamp(140px,20vh,200px) 0 90px;}
/* STACKING: hero copy must always paint above plate/atmos/scrim.
   Includes each target page's existing hero-copy wrapper class so a
   plain (non-positioned) legacy wrapper doesn't fall behind the new
   z-indexed plate layers (per CSS2.1 stacking order, in-flow static
   content paints below explicitly z-indexed positioned siblings). */
.cin-hero > .wrap,.cin-hero > .container,.cin-hero > .container-narrow,
.cin-hero > .cine-wrap,.cin-hero > .pw-doc
{position:relative !important; z-index:3 !important; width:100%;}

.cin-plate{position:absolute; inset:0; z-index:0 !important; background-size:cover;
  background-position:center; transform-origin:center;
  will-change:transform,filter; backface-visibility:hidden;}
.cin-plate.tone-cool{filter:saturate(.82) contrast(1.05) brightness(.70);}
.cin-plate.tone-warm{filter:saturate(.90) contrast(1.03) brightness(.72);}
.cin-plate.tone-deep{filter:saturate(.80) contrast(1.08) brightness(.60);}

.cin-atmos{position:absolute; inset:0; z-index:1 !important; pointer-events:none; overflow:hidden;}
.cin-scrim{position:absolute; inset:0; z-index:2 !important; pointer-events:none;}

/* ---------- PLATE MOTIONS (one per page) ---------- */
.m-atmos{animation:cin-atmos 42s ease-in-out infinite alternate; transform:scale(1.06);}
@keyframes cin-atmos{from{transform:scale(1.06)} to{transform:scale(1.11) translateY(-1.4%)}}

.m-kenburns{animation:cin-kenburns 34s ease-in-out infinite alternate; transform:scale(1.06);}
@keyframes cin-kenburns{from{transform:scale(1.06) translate(0,0)} to{transform:scale(1.17) translate(-2.4%,-2.2%)}}

.m-driftpan{animation:cin-driftpan 44s ease-in-out infinite alternate; transform:scale(1.14) translateX(-3%);}
@keyframes cin-driftpan{from{transform:scale(1.14) translateX(-3%)} to{transform:scale(1.14) translateX(3%)}}

.m-rush{animation:cin-rush 22s ease-in-out infinite alternate; transform:scale(1.02);}
@keyframes cin-rush{from{transform:scale(1.02)} to{transform:scale(1.10) translateY(1.5%)}}

.m-bloom{animation:cin-bloom 2.6s cubic-bezier(.2,.7,.2,1) both; transform-origin:60% 45%;}
@keyframes cin-bloom{
  0%{filter:blur(14px) brightness(.5) saturate(.7); transform:scale(1.12)}
  100%{filter:blur(0) brightness(.72) saturate(.85); transform:scale(1.04)}}

.m-crane{animation:cin-crane 40s ease-in-out infinite alternate; transform:scale(1.10) translateY(3.5%);}
@keyframes cin-crane{from{transform:scale(1.10) translateY(3.5%)} to{transform:scale(1.12) translateY(-2%)}}

.m-driftdiag{animation:cin-driftdiag 48s ease-in-out infinite alternate; transform:scale(1.12) translate(-2%,1%);}
@keyframes cin-driftdiag{from{transform:scale(1.12) translate(-2%,1%)} to{transform:scale(1.15) translate(2%,-1.5%)}}

.m-breathe{animation:cin-breathe 13s ease-in-out infinite alternate; transform:scale(1.05);}
@keyframes cin-breathe{from{transform:scale(1.05)} to{transform:scale(1.10)}}

.m-tilt{transform:scale(1.12) translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*-14px),0);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.m-walkin{animation:cin-walkin 30s ease-in-out infinite alternate; transform-origin:50% 78%; transform:scale(1.03);}
@keyframes cin-walkin{from{transform:scale(1.03)} to{transform:scale(1.14)}}

/* ---------- ATMOSPHERE LAYERS ---------- */
.a-bloom{position:absolute; left:50%; top:44%; width:60vw; height:60vw; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(224,184,119,.16) 0%, rgba(224,184,119,0) 62%);
  filter:blur(8px); animation:cin-glow 9s ease-in-out infinite;}
@keyframes cin-glow{0%,100%{opacity:.6; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.12)}}

.a-dust::before,.a-dust::after{content:""; position:absolute; inset:-20% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,240,214,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,240,214,.35), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(255,240,214,.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,240,214,.3), transparent),
    radial-gradient(1px 1px at 10% 70%, rgba(255,240,214,.35), transparent);
  animation:cin-motes 26s linear infinite;}
.a-dust::after{animation-duration:38s; opacity:.6; transform:translateY(10%) scale(1.3);}
@keyframes cin-motes{from{transform:translateY(8%)} to{transform:translateY(-12%)}}

.a-motes::before{content:""; position:absolute; inset:-15% 0;
  background-image:
    radial-gradient(2px 2px at 15% 40%, rgba(217,154,91,.45), transparent),
    radial-gradient(1.5px 1.5px at 60% 25%, rgba(217,154,91,.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 70%, rgba(255,220,170,.4), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(217,154,91,.35), transparent);
  animation:cin-motes 30s linear infinite;}

.a-streak{background:repeating-linear-gradient(74deg,
    rgba(224,184,119,0) 0 26px, rgba(224,184,119,.05) 26px 27px, rgba(224,184,119,0) 27px 60px);
  mix-blend-mode:screen; animation:cin-streak 7s linear infinite; opacity:.8;}
@keyframes cin-streak{from{transform:translate3d(-8%,-4%,0)} to{transform:translate3d(8%,4%,0)}}
.a-streak::after{content:""; position:absolute; top:0; left:-30%; width:22%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(244,213,154,.22), transparent);
  filter:blur(6px); transform:skewX(-14deg); animation:cin-beamsweep 6.5s ease-in-out infinite;}
@keyframes cin-beamsweep{0%{left:-30%; opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{left:120%; opacity:0}}

.a-coolsweep{background:radial-gradient(120% 80% at 30% 30%, rgba(111,143,181,.18), transparent 55%);
  animation:cin-coolpulse 11s ease-in-out infinite;}
@keyframes cin-coolpulse{0%,100%{opacity:.55} 50%{opacity:.9}}

.a-fog::before{content:""; position:absolute; left:-40%; right:-40%; bottom:6%; height:34%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(180,195,210,.22), transparent 70%);
  filter:blur(14px); animation:cin-fog 26s ease-in-out infinite alternate;}
@keyframes cin-fog{from{transform:translateX(-6%)} to{transform:translateX(6%)}}

.a-rain{background:repeating-linear-gradient(100deg,
    rgba(200,215,235,0) 0 22px, rgba(200,215,235,.05) 22px 23px, rgba(200,215,235,0) 23px 46px);
  animation:cin-rain 1.1s linear infinite; opacity:.6;}
@keyframes cin-rain{from{transform:translateY(-46px)} to{transform:translateY(0)}}
.a-rain::after{content:""; position:absolute; left:14%; top:22%; width:20%; height:34%;
  background:radial-gradient(circle, rgba(224,150,80,.22), transparent 68%); filter:blur(10px);
  animation:cin-flicker 5.5s ease-in-out infinite;}
@keyframes cin-flicker{0%,100%{opacity:.5} 45%{opacity:.85} 55%{opacity:.6}}

.a-lamp{background:radial-gradient(30% 42% at 33% 40%, rgba(255,190,120,.22), transparent 60%);
  animation:cin-lamp 6s ease-in-out infinite;}
@keyframes cin-lamp{0%,100%{opacity:.6} 50%{opacity:.95}}

.a-sweep::before{content:""; position:absolute; top:-20%; left:-30%; width:26%; height:140%;
  background:linear-gradient(90deg, transparent, rgba(244,213,154,.18), transparent);
  transform:skewX(-16deg); filter:blur(4px); animation:cin-sweepbar 9s ease-in-out infinite;}
@keyframes cin-sweepbar{0%{left:-30%; opacity:0} 30%{opacity:1} 70%{opacity:1} 100%{left:120%; opacity:0}}

.a-godray{background:linear-gradient(115deg, transparent 30%, rgba(255,235,200,.10) 46%,
    rgba(255,235,200,.16) 50%, rgba(255,235,200,.10) 54%, transparent 70%);
  mix-blend-mode:screen; animation:cin-godray 14s ease-in-out infinite alternate;}
@keyframes cin-godray{from{transform:translateX(-6%)} to{transform:translateX(6%)}}

/* ---------- SCRIMS ---------- */
.s-cinema{background:
  linear-gradient(180deg, rgba(5,6,10,.55) 0%, rgba(5,6,10,0) 30%, rgba(5,6,10,.2) 60%, rgba(5,6,10,.92) 100%),
  linear-gradient(90deg, rgba(5,6,10,.7) 0%, rgba(5,6,10,0) 34%, rgba(5,6,10,0) 66%, rgba(5,6,10,.7) 100%);}
.s-left{background:
  linear-gradient(90deg, rgba(5,6,10,.92) 0%, rgba(5,6,10,.55) 34%, rgba(5,6,10,.05) 70%, rgba(5,6,10,.4) 100%),
  linear-gradient(180deg, rgba(5,6,10,.45) 0%, transparent 34%, transparent 60%, rgba(5,6,10,.95) 100%);}
.s-bottom{background:
  linear-gradient(180deg, rgba(5,6,10,.5) 0%, rgba(5,6,10,0) 34%, rgba(5,6,10,.25) 62%, rgba(5,6,10,.95) 100%);}
.s-center{background:
  radial-gradient(120% 90% at 50% 42%, rgba(5,6,10,0) 30%, rgba(5,6,10,.6) 82%),
  linear-gradient(180deg, rgba(5,6,10,.5) 0%, transparent 36%, rgba(5,6,10,.9) 100%);}

/* ---------- MOBILE 390px ---------- */
@media (max-width:560px){
  .cin-hero{min-height:88svh; padding:110px 0 72px;}
  .cin-scrim.s-left{background:
    linear-gradient(180deg, rgba(5,6,10,.5) 0%, rgba(5,6,10,.2) 40%, rgba(5,6,10,.96) 100%);}
  .a-streak,.a-rain{opacity:.4;}
  .m-tilt{transform:scale(1.16);}
}

/* ---------- REDUCED MOTION => photoreal still ---------- */
@media (prefers-reduced-motion:reduce){
  .cin-plate{animation:none !important; transform:scale(1.04) !important;
    filter:saturate(.85) contrast(1.04) brightness(.70) !important;}
  .cin-atmos,.cin-atmos::before,.cin-atmos::after,
  .a-bloom,.a-streak,.a-streak::after,.a-fog::before,.a-rain,.a-rain::after,
  .a-lamp,.a-sweep::before,.a-godray,.a-coolsweep{animation:none !important;}
  .a-bloom,.a-lamp,.a-coolsweep{opacity:.6 !important;}
  .a-rain{opacity:.25 !important;}
}