/* ============================================================================
   Climate Service — cinematic animated hero (keyframes + base).
   Pairs with hero-cinematic.js. No React. Inline styles in the JS reference
   these @keyframes by name. Port to WordPress: enqueue on the front page only.
   ============================================================================ */
@keyframes csb-enter { from { opacity:0; transform:scale(1.04) } to { opacity:1; transform:scale(1) } }
@keyframes csb-leave { from { opacity:1 } to { opacity:0 } }
@keyframes csb-fall { 0%{ transform:translateY(-12%) translateX(0) rotate(0); opacity:0 } 12%{ opacity:.95 } 100%{ transform:translateY(560%) translateX(var(--dx,16px)) rotate(360deg); opacity:0 } }
@keyframes csb-chev { 0%{ opacity:0; transform:translateY(-8px) } 40%{ opacity:1 } 100%{ opacity:0; transform:translateY(46px) } }
@keyframes csb-cone { 0%{ opacity:0; transform:scaleY(.45) } 35%{ opacity:.5 } 100%{ opacity:0; transform:scaleY(1.1) } }
@keyframes csb-drop { 0%{ opacity:0; transform:translateY(0) } 20%{ opacity:.9 } 100%{ opacity:0; transform:translateY(74px) } }
@keyframes csb-puff { 0%{ opacity:0; transform:translate(0,0) scale(.35) } 28%{ opacity:.9 } 100%{ opacity:0; transform:translate(var(--dx,0px),var(--dy,46px)) scale(1.9) } }
@keyframes csb-lowfog { 0%{ transform:translateX(-7%); opacity:0 } 22%{ opacity:.55 } 78%{ opacity:.5 } 100%{ transform:translateX(7%); opacity:0 } }
@keyframes csb-rays { to { transform:rotate(360deg) } }
@keyframes csb-cone-h { 0%{ opacity:0; transform:scaleY(.45) } 35%{ opacity:.5 } 100%{ opacity:0; transform:scaleY(1.1) } }
@keyframes csb-heat { 0%{ opacity:0; transform:translateY(0) } 25%{ opacity:.75 } 100%{ opacity:0; transform:translateY(-150px) } }
@keyframes csb-spin { to { transform:rotate(360deg) } }
@keyframes csb-dash { to { stroke-dashoffset:-240 } }
@keyframes csb-orbit { from { transform:rotate(0) translateX(var(--r,90px)) rotate(0) } to { transform:rotate(360deg) translateX(var(--r,90px)) rotate(-360deg) } }
@keyframes csb-twinkle { 0%,100%{ opacity:.18 } 50%{ opacity:1 } }
@keyframes csb-bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
@keyframes csb-glow { 0%,100%{ opacity:.4; transform:scale(.96) } 50%{ opacity:.8; transform:scale(1.04) } }
@keyframes csb-progress { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes csb-chipin { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes csb-textin { from { opacity:0; transform:translateY(20px) } }

/* Hero shell */
.cs-hero-cine { position:relative; height:calc(100svh - var(--header-h,134px)); min-height:540px; max-height:960px; overflow:hidden; background:#0b3b63; }
@media (max-width:900px) { .cs-hero-cine { min-height:400px; } }
/* Stage is 80px taller on each side so parallax translate never reveals background */
.cs-hero-cine__stage { position:absolute; top:-80px; bottom:-80px; left:0; right:0; overflow:hidden; will-change:transform; }
.cs-hero-cine__scrim { position:absolute; inset:0; z-index:5; background:linear-gradient(90deg,rgba(4,18,32,.72) 0%,rgba(4,18,32,.3) 38%,transparent 62%); }
.cs-hero-cine__overlay { position:absolute; inset:0; z-index:6; display:flex; align-items:flex-end; }
.cs-hero-cine__copy { width:100%; padding-bottom:clamp(2rem,5vw,4rem); }
.cs-hero-cine__inner { max-width:640px; animation:csb-textin .6s var(--ease); }
.cs-hero-cine__eyebrow { display:inline-flex; align-items:center; gap:.55rem; padding:.4rem .9rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:var(--fs-sm); font-weight:700; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cs-hero-cine__title { color:#fff; font-size:clamp(1.8rem,2rem + 3.4vw,4.6rem); line-height:1.02; letter-spacing:-0.025em;
  margin:var(--space-4) 0 var(--space-3); text-shadow:0 4px 30px rgba(0,0,0,.35); }
.cs-hero-cine__text { color:rgba(255,255,255,.9); font-size:var(--fs-lead); max-width:46ch; margin:0 0 var(--space-5); }
.cs-hero-cine__actions { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }
.cs-hero-cine .cs-btn--glass { color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); }
.cs-hero-cine .cs-btn--glass:hover { background:rgba(255,255,255,.22); color:#fff; }
.cs-hero-cine__dots { display:flex; gap:10px; align-items:center; margin-top:var(--space-6); }
.cs-hero-cine__dot { position:relative; height:5px; width:22px; border-radius:999px; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.35); overflow:hidden; transition:width .3s ease; }
.cs-hero-cine__dot.is-active { width:56px; }
.cs-hero-cine__dot .bar { position:absolute; inset:0; transform-origin:left; background:#fff; }
.cs-hero-cine__dot.is-active .bar { animation:csb-progress var(--cine-ms,3000ms) linear forwards; }

/* Scroll-down bouncing arrow */
.cs-hero-cine__scroll {
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%); z-index:10;
  width:42px; height:42px; border-radius:50%; border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  color:rgba(255,255,255,.8); display:flex; align-items:center; justify-content:center;
  text-decoration:none; animation:csb-scroll-bounce 2.2s ease-in-out infinite;
  transition:border-color .25s,background .25s,color .25s;
}
.cs-hero-cine__scroll:hover { border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.22); color:#fff; }
.cs-hero-cine__scroll svg { pointer-events:none; }
@keyframes csb-scroll-bounce {
  0%,100% { transform:translateX(-50%) translateY(0); opacity:1; }
  50%      { transform:translateX(-50%) translateY(9px); opacity:.7; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero-cine *, .cs-hero-cine *::before, .cs-hero-cine *::after { animation: none !important; }
}