/* ═══════════════════════════════════════════════════════════════════════════
   Rainshadow Systems — The Break · hero motion · v1
   Built from motion sketch 01. Pairs with hero-break.js and the markup in
   hero-break.html. Every id and variable is prefixed rs- so nothing collides
   with the site's own CSS. Colours are the brand tokens (obsidian, orange,
   orange-light, mist-gray). See README.md for installation.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --rs-settle:cubic-bezier(.22,1,.36,1); --rs-break:cubic-bezier(.65,0,.35,1);
  --rs-tempo:1;      /* 1 = cinematic (about 4s to resolve), .55 = site tempo; hero-break.js sets it from RS_BREAK.tempo */
  --rs-p:0;          /* scroll progress through the hero, 0..1, set by script */
  --rs-sx:66vw; --rs-sy:26vh;   /* the sun break, set by script from the image's cover box */
  --rs-sun:1; --rs-rays:1;      /* how much sun the passing clouds let through; the rays flicker more than the glow */
  --rs-bolt:0; --rs-bx:12vw; --rs-by:16vh;  /* distant sheet lightning on the far side of the storm */
  --rs-logo:none;    /* the nav logo's url(), set by script for the sheen mask */
}
/* ── the scene: fixed cinematic layers behind everything ─────────────────── */
#rs-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#1e2028}
#rs-par{position:absolute;inset:-3%;transform:translate3d(0,calc(var(--rs-p) * 9vh),0)}
.rs-desktop #rs-par{filter:blur(calc(var(--rs-p) * 14px)) brightness(calc(1 - var(--rs-p) * .3));will-change:transform,filter}
#rs-img,#rs-sky{position:absolute;inset:0;background:#1e2028 50% 50% / cover no-repeat;will-change:transform;filter:saturate(1.1) contrast(1.08)}
#rs-sky{-webkit-mask:linear-gradient(to bottom,#000 0,#000 6%,transparent 15%);mask:linear-gradient(to bottom,#000 0,#000 6%,transparent 15%);animation:rsSkyDrift 30s ease-in-out infinite alternate}
@keyframes rsSkyDrift{from{transform:translateX(-1.3%) scale(1.03)} to{transform:translateX(1.3%) scale(1.03)}}
#rs-light{position:absolute;inset:0;opacity:calc((1 - var(--rs-p) * .8) * var(--rs-sun))}
#rs-glow,#rs-rays,#rs-wave,#rs-halo,#rs-warm,#rs-streak,#rs-flash{position:absolute;left:var(--rs-sx);top:var(--rs-sy);transform:translate(-50%,-50%);mix-blend-mode:screen}
#rs-glow{width:120vmax;height:120vmax;background:
  radial-gradient(circle, rgba(255,248,236,1) 0, rgba(255,232,186,.98) 1.2%, rgba(255,204,122,.85) 3%, rgba(250,176,60,.5) 6%, rgba(240,140,40,.22) 12%, rgba(232,114,26,.08) 22%, rgba(232,114,26,0) 36%)}
#rs-halo{width:160vmax;height:160vmax;background:radial-gradient(circle, rgba(255,198,122,.24) 0, rgba(240,140,50,.09) 20%, rgba(232,114,26,.03) 34%, rgba(232,114,26,0) 44%)}
#rs-warm{width:130vmax;height:130vmax;mix-blend-mode:soft-light;opacity:.55;background:radial-gradient(circle, rgba(255,172,64,.85) 0, rgba(245,140,40,.4) 24%, rgba(232,114,26,0) 50%)}
#rs-streak{width:80vmax;height:2.2vmax;opacity:calc(.45 * var(--rs-rays));filter:blur(1.2px);
  background:linear-gradient(to bottom, rgba(255,220,170,0) 0, rgba(255,234,200,.9) 50%, rgba(255,220,170,0) 100%);
  -webkit-mask:linear-gradient(to right, transparent 0, rgba(0,0,0,.5) 30%, #000 47%, #000 53%, rgba(0,0,0,.5) 70%, transparent 100%);mask:linear-gradient(to right, transparent 0, rgba(0,0,0,.5) 30%, #000 47%, #000 53%, rgba(0,0,0,.5) 70%, transparent 100%);
  animation:rsStreak 9s ease-in-out infinite alternate}
@keyframes rsStreak{from{transform:translate(-50%,-50%) scaleX(1)} to{transform:translate(-50%,-50%) scaleX(1.09)}}
#rs-flash{width:300vmax;height:300vmax;opacity:0;visibility:hidden;background:radial-gradient(circle, rgba(255,242,224,.95) 0, rgba(255,206,140,.6) 18%, rgba(255,170,90,.2) 40%, rgba(255,170,90,0) 60%)}
.rs-play #rs-flash{animation:rsFlash calc(1.6s * var(--rs-tempo)) var(--rs-break) calc(1.45s * var(--rs-tempo)) both}
@keyframes rsFlash{0%{opacity:0;visibility:visible} 38%{opacity:.62} 99%{visibility:visible} 100%{opacity:0;visibility:hidden}}
#rs-rays{width:175vmax;height:175vmax;opacity:.55;
  -webkit-mask:conic-gradient(from 150deg, transparent 0deg, #000 22deg, #000 96deg, transparent 122deg, transparent 360deg);
          mask:conic-gradient(from 150deg, transparent 0deg, #000 22deg, #000 96deg, transparent 122deg, transparent 360deg)}
#rs-rays > div{position:absolute;inset:0;opacity:var(--rs-rays);
  background:repeating-conic-gradient(from 0deg, rgba(245,166,35,0) 0deg, rgba(245,166,35,.2) 1.1deg, rgba(255,222,170,.3) 1.6deg, rgba(245,166,35,0) 2.4deg, rgba(245,166,35,0) 5.7deg);
  -webkit-mask:radial-gradient(circle, #000 0, rgba(0,0,0,.65) 20%, transparent 62%);
          mask:radial-gradient(circle, #000 0, rgba(0,0,0,.65) 20%, transparent 62%)}
#rs-wave{width:220vmax;height:220vmax;opacity:0;visibility:hidden;
  background:radial-gradient(circle, rgba(0,0,0,0) 0 44%, rgba(255,214,150,.8) 47.5%, rgba(232,114,26,.36) 50%, rgba(232,114,26,0) 54%)}
#rs-night,#rs-dim,#rs-scrim,#rs-grain{position:absolute;inset:0}
#rs-night{background:#1e2028;opacity:.1}
#rs-dim{background:#1e2028;opacity:calc(var(--rs-p) * .42)}
#rs-storm{position:absolute;left:var(--rs-bx);top:var(--rs-by);width:130vmax;height:130vmax;transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:var(--rs-bolt);
  background:radial-gradient(circle, rgba(220,228,246,.85) 0, rgba(184,198,232,.4) 12%, rgba(150,170,212,.12) 28%, rgba(150,170,212,0) 48%)}
#rs-stormfill{position:absolute;inset:0;background:#c8d2ea;mix-blend-mode:screen;opacity:calc(var(--rs-bolt) * .1)}
#rs-mist,#rs-motes,#rs-shade{position:absolute;inset:0;width:100%;height:100%}
#rs-shade{mix-blend-mode:multiply;opacity:.9}
.rs-mobile #rs-shade{display:none}
#rs-mist{opacity:.92}
#rs-motes{mix-blend-mode:screen}
#rs-scrim{background:
  linear-gradient(to top right, rgba(30,32,40,.95) 0%, rgba(30,32,40,.85) 30%, rgba(30,32,40,.6) 55%, rgba(30,32,40,.15) 100%),
  linear-gradient(to top, rgba(30,32,40,.95) 0%, rgba(30,32,40,.3) 40%, rgba(30,32,40,0) 70%)}
#rs-grain{inset:-40%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 260px 260px;
  opacity:.06;mix-blend-mode:overlay}

/* ── the intro sequence, driven by the .rs-play class and --tempo ───────────── */
.rs-play #rs-img,.rs-play #rs-sky{animation:
  rsImgIn calc(2.8s * var(--rs-tempo)) var(--rs-settle) both,
  rsPush calc(7s * var(--rs-tempo)) var(--rs-settle) both,
  rsBreathe 40s ease-in-out calc(7s * var(--rs-tempo)) infinite alternate}
@keyframes rsImgIn{0%{opacity:0;filter:blur(18px) saturate(.5) brightness(.8)} 28%{opacity:1} 100%{opacity:1;filter:blur(0) saturate(1.1) contrast(1.08)}}
@keyframes rsPush{from{transform:scale(1.09)} to{transform:scale(1)}}
@keyframes rsBreathe{from{transform:scale(1)} to{transform:scale(1.028)}}
.rs-play #rs-night{animation:rsNight calc(2.1s * var(--rs-tempo)) var(--rs-break) calc(.8s * var(--rs-tempo)) both}
@keyframes rsNight{from{opacity:.9} to{opacity:.1}}
.rs-play #rs-glow{animation:
  rsGlowIn calc(2.3s * var(--rs-tempo)) var(--rs-settle) calc(.9s * var(--rs-tempo)) both,
  rsGlowBreathe 8s ease-in-out calc(3.4s * var(--rs-tempo)) infinite alternate}
@keyframes rsGlowIn{from{opacity:0} to{opacity:1}}
@keyframes rsGlowBreathe{from{opacity:1} to{opacity:.88}}
.rs-play #rs-rays{animation:rsRaysIn calc(2.6s * var(--rs-tempo)) var(--rs-settle) calc(1.5s * var(--rs-tempo)) both}
@keyframes rsRaysIn{from{opacity:0} to{opacity:.55}}
#rs-rays > div{animation:rsSway 26s ease-in-out infinite alternate}
#rs-rays > div.b{animation:rsSway2 19s ease-in-out infinite alternate;
  background:repeating-conic-gradient(from 2deg, rgba(245,166,35,0) 0deg, rgba(245,166,35,.16) .9deg, rgba(255,222,170,.24) 1.4deg, rgba(245,166,35,0) 2.1deg, rgba(245,166,35,0) 4.3deg)}
@keyframes rsSway{from{transform:rotate(-1.6deg)} to{transform:rotate(1.6deg)}}
@keyframes rsSway2{from{transform:rotate(1.9deg)} to{transform:rotate(-1.9deg)}}
.rs-play #rs-wave{animation:rsWave calc(2.5s * var(--rs-tempo)) cubic-bezier(.16,.8,.3,1) calc(.95s * var(--rs-tempo)) both}
@keyframes rsWave{0%{transform:translate(-50%,-50%) scale(.02);opacity:.95;visibility:visible} 70%{opacity:.35} 99%{visibility:visible} 100%{transform:translate(-50%,-50%) scale(1.35);opacity:0;visibility:hidden}}
.rs-desktop.rs-play #rs-grain{animation:rsGrain .7s steps(1) infinite}
@keyframes rsGrain{0%{transform:translate(0,0)} 14%{transform:translate(-4%,-6%)} 28%{transform:translate(6%,3%)} 42%{transform:translate(-8%,5%)} 56%{transform:translate(4%,-9%)} 70%{transform:translate(-2%,8%)} 84%{transform:translate(9%,-3%)}}


/* ── the title resolves with the light; the logo arrives top to bottom, then a sheen crosses it ── */
.rs-play .hero-title-main,.rs-play .hero-title-sub{display:block;animation:rsResolve calc(1.7s * var(--rs-tempo)) var(--rs-settle) both}
.rs-play .hero-title-main{animation-delay:calc(1.5s * var(--rs-tempo))}
.rs-play .hero-title-sub{animation-delay:calc(1.78s * var(--rs-tempo))}
@keyframes rsResolve{from{opacity:0;filter:blur(18px);transform:translateY(16px);letter-spacing:.02em} to{opacity:1;filter:blur(0);transform:none;letter-spacing:-.03em}}
.rs-play .hero-tagline{animation:rsSweepIn calc(1.1s * var(--rs-tempo)) var(--rs-break) calc(3.05s * var(--rs-tempo)) both}
@keyframes rsSweepIn{from{clip-path:inset(-10% 100% -10% -2%);opacity:.6} to{clip-path:inset(-10% -2% -10% -2%);opacity:1}}
.rs-focus .hero-content{transform:translate3d(0,calc(var(--rs-p) * 22vh),0);opacity:calc(1 - var(--rs-p) * 1.7)}
.nav-logo{position:relative}
.rs-play .nav-logo img{animation:rsLogoIn calc(1.1s * var(--rs-tempo)) var(--rs-settle) calc(.3s * var(--rs-tempo)) both}
@keyframes rsLogoIn{from{opacity:0;filter:blur(8px);clip-path:inset(0 0 100% 0)} 60%{opacity:1;filter:blur(0)} to{opacity:1;filter:blur(0);clip-path:inset(-2% -2% -2% -2%)}}
.nav-logo .rs-sheen{position:absolute;inset:0;opacity:0;pointer-events:none;-webkit-mask:var(--rs-logo) center / contain no-repeat;mask:var(--rs-logo) center / contain no-repeat;
  background:linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 62%) 100% 0 / 320% 100% no-repeat}
.rs-play .nav-logo .rs-sheen{animation:rsLogoSheen 1s var(--rs-break) calc(.9s * var(--rs-tempo)) both}
@keyframes rsLogoSheen{0%{opacity:0;background-position:100% 0} 30%{opacity:1} 100%{opacity:0;background-position:0% 0}}
@keyframes rsFadeIn{from{opacity:0} to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .rs-play #rs-img,.rs-play #rs-sky,.rs-play #rs-night,.rs-play #rs-glow,.rs-play #rs-rays,.rs-play #rs-wave,.rs-play #rs-flash,#rs-rays > div,#rs-sky,#rs-streak,.rs-desktop.rs-play #rs-grain,
  .rs-play .hero-title-main,.rs-play .hero-title-sub,.rs-play .hero-tagline,.rs-play .nav-logo img,.rs-play .nav-logo .rs-sheen{animation:none !important}
  #rs-mist,#rs-motes,#rs-shade,#rs-storm,#rs-stormfill{display:none}
  .rs-focus .hero-content{transform:none;opacity:1}
}