/* =========================================================================
   Per-page animated hero SCENES — each page gets a distinct motif.
   Base + one block per scene. All selectors scoped under .scene--<key>,
   all keyframes prefixed, all disabled under prefers-reduced-motion.
   ========================================================================= */

/* Arrangement: the scene is a calm BACKDROP on a LIGHT hero.
   Confined to the right, faded so it never sits behind the headline/CTA,
   subtle opacity, and behind content (z-index 0). Strokes are the teal
   accent at low opacity so they read on white without shouting. */
.scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden;
  opacity: .9;
  color: #17a2b8;  /* accent inherited by strokes that use currentColor */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0,0,0,.5) 60%, #000 82%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0,0,0,.5) 60%, #000 82%);
}
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Centered page heroes (no side dashboard) — keep it to the right-top corner */
.page-hero .scene {
  opacity: .85;
  -webkit-mask-image: radial-gradient(110% 120% at 100% 18%, #000 0%, rgba(0,0,0,.45) 42%, transparent 70%);
          mask-image: radial-gradient(110% 120% at 100% 18%, #000 0%, rgba(0,0,0,.45) 42%, transparent 70%);
}
/* Ensure hero text/visual always sit ABOVE the scene */
.hero .container, .page-hero .container, .hero__visual { position: relative; z-index: 2; }

/* Shared accent tones (teal on white). Strokes use currentColor (=accent). */
.scene--home, .scene--sol, .scene--ind, .scene--tech, .scene--proj,
.scene--part, .scene--ins, .scene--about, .scene--contact { color: #17a2b8; }

/* === HOME — AIRFLOW: smooth continuous curves that gently drift (no dashes) === */
.scene--home .ln { fill: none; stroke: url(#home-grad); stroke-width: 1.8; stroke-linecap: round; opacity: .45; animation: home-drift 14s ease-in-out infinite; }
.scene--home .ln:nth-child(2){ opacity:.32; animation-duration: 16s; animation-delay:-2s }
.scene--home .ln:nth-child(3){ opacity:.4;  animation-duration: 18s; animation-delay:-4s }
.scene--home .ln:nth-child(4){ opacity:.28; animation-duration: 15s; animation-delay:-3s }
.scene--home .ln:nth-child(5){ opacity:.36; animation-duration: 17s; animation-delay:-5s }
/* a bright glint travels along to suggest moving air */
.scene--home .gl { fill:none; stroke: url(#home-glint); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 70 1600; animation: home-glint 6s linear infinite; }
.scene--home .gl:nth-child(2){ animation-duration: 8s; animation-delay:-2.5s }
.scene--home .pm { fill: #2bc4d4; opacity: 0; animation: home-particle 7s linear infinite; }
.scene--home .pm:nth-child(odd){ animation-delay:-2s } .scene--home .pm:nth-child(3n){ animation-delay:-4s }
@keyframes home-drift { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes home-glint { from{ stroke-dashoffset:1670 } to{ stroke-dashoffset:0 } }
@keyframes home-particle { 0%{ opacity:0; transform:translateX(-40px) } 15%,80%{ opacity:.8 } 100%{ opacity:0; transform:translateX(220px) } }

/* === SOLUTIONS — SENSE→INTERPRET→PROTECT→ASSURE signal through 4 stages === */
.scene--sol .track { fill:none; stroke: rgba(23,162,184,.18); stroke-width: 2; }
.scene--sol .stage { fill:none; stroke: currentColor; stroke-width: 1.6; opacity: .32; transform-box: fill-box; transform-origin:center; animation: sol-stage 5s ease-in-out infinite; }
.scene--sol .stage:nth-child(2){ animation-delay:-1.25s } .scene--sol .stage:nth-child(3){ animation-delay:-2.5s } .scene--sol .stage:nth-child(4){ animation-delay:-3.75s }
.scene--sol .sig { fill: #2bc4d4; filter: drop-shadow(0 0 4px rgba(43,196,212,.6)); offset-path: path('M180,300 H420 H660 H900 H1140'); animation: sol-run 6s ease-in-out infinite; }
@keyframes sol-stage { 0%,100%{ opacity:.22; transform:scale(.9) } 50%{ opacity:.6; transform:scale(1.06) } }
@keyframes sol-run { 0%{ offset-distance:0%; opacity:0 } 8%,92%{ opacity:1 } 100%{ offset-distance:100%; opacity:0 } }

/* === INDUSTRIES — FLOOR-PLAN with air-quality zones being monitored === */
.scene--ind .room { fill: rgba(23,162,184,.05); stroke: rgba(23,162,184,.28); stroke-width: 1.2; }
.scene--ind .zone { fill: #2bc4d4; opacity: 0; transform-box: fill-box; transform-origin:center; animation: ind-zone 6s ease-in-out infinite; }
.scene--ind .zone:nth-child(2){ animation-delay:-1.5s } .scene--ind .zone:nth-child(3){ animation-delay:-3s } .scene--ind .zone:nth-child(4){ animation-delay:-4.5s } .scene--ind .zone:nth-child(5){ animation-delay:-2.2s }
@keyframes ind-zone { 0%,100%{ opacity:.08; transform:scale(.7) } 50%{ opacity:.5; transform:scale(1) } }

/* === TECHNOLOGY — SENSOR emits waves that feed a rising data signal === */
.scene--tech .wave { fill:none; stroke: currentColor; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: tech-wave 4.5s ease-out infinite; }
.scene--tech .wave.w2{ animation-delay:-1.5s } .scene--tech .wave.w3{ animation-delay:-3s }
.scene--tech .feed { fill:none; stroke: url(#tech-grad); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 14 200; animation: tech-run 4.5s linear infinite; }
.scene--tech .sensor { fill: #17a2b8; }
.scene--tech .bar { fill: rgba(43,196,212,.5); transform-box: fill-box; transform-origin: bottom; animation: tech-bar 3.2s ease-in-out infinite; }
.scene--tech .bar:nth-child(even){ animation-delay:-1.1s } .scene--tech .bar:nth-child(3n){ animation-delay:-2.1s }
@keyframes tech-run { to { stroke-dashoffset: -214; } }
@keyframes tech-wave { 0%{ transform:scale(.2); opacity:.55 } 100%{ transform:scale(1.5); opacity:0 } }
@keyframes tech-bar { 0%,100%{ transform:scaleY(.4) } 50%{ transform:scaleY(1) } }

/* === PROJECTS — DEPLOYMENT MAP: site sensors pinging across a plan === */
.scene--proj .ring { fill:none; stroke: currentColor; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; opacity: 0; animation: proj-ping 4.5s ease-out infinite; }
.scene--proj .ring.r2{ animation-delay:-1.5s } .scene--proj .ring.r3{ animation-delay:-3s }
.scene--proj .ring.s2{ animation-delay:-0.8s } .scene--proj .ring.s2b{ animation-delay:-2.3s } .scene--proj .ring.s2c{ animation-delay:-3.8s }
.scene--proj .plan { fill:none; stroke: rgba(23,162,184,.16); stroke-width: 1.2; }
.scene--proj .blip { fill: #17a2b8; opacity: 0; animation: proj-blip 4s ease-in-out infinite; }
.scene--proj .blip:nth-child(odd){ animation-delay:-2s } .scene--proj .blip:nth-child(3n){ animation-delay:-1s }
@keyframes proj-ping { 0%{ transform:scale(.2); opacity:.6 } 80%{ opacity:.04 } 100%{ transform:scale(1.4); opacity:0 } }
@keyframes proj-blip { 0%,100%{ opacity:0; transform:scale(.6) } 40%,60%{ opacity:.9; transform:scale(1) } }

/* === PARTNERS — INTERLOCKING modules clicking together (ecosystem) === */
.scene--part .mod { fill: rgba(23,162,184,.06); stroke: rgba(23,162,184,.3); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: part-join 5s ease-in-out infinite; }
.scene--part .mod:nth-child(2){ animation-delay:-1s } .scene--part .mod:nth-child(3){ animation-delay:-2s }
.scene--part .mod:nth-child(4){ animation-delay:-3s } .scene--part .mod:nth-child(5){ animation-delay:-4s }
.scene--part .link2 { stroke: currentColor; stroke-width: 1.4; opacity:.3; stroke-dasharray: 4 8; animation: part-dash 6s linear infinite; }
@keyframes part-join { 0%,100%{ opacity:.5; transform:translateY(0) } 50%{ opacity:.95; transform:translateY(-8px) } }
@keyframes part-dash { to { stroke-dashoffset: -120 } }

/* === INSIGHTS — LIVE air-quality trend line drawing itself === */
.scene--ins .grid { stroke: rgba(23,162,184,.10); stroke-width: 1; }
.scene--ins .chart { fill:none; stroke: url(#ins-grad); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: ins-draw 7s ease-in-out infinite; }
.scene--ins .chart.c2{ stroke: url(#ins-grad2); animation-duration: 9s; animation-delay:-2s; opacity:.7 }
.scene--ins .dot { fill: #17a2b8; opacity: 0; animation: ins-pop 7s ease-in-out infinite; }
.scene--ins .dot:nth-child(odd){ animation-delay:-1s } .scene--ins .dot:nth-child(3n){ animation-delay:-3s }
@keyframes ins-draw { 0%{ stroke-dashoffset:2600 } 55%,80%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:0; opacity:.3 } }
@keyframes ins-pop { 0%,45%{ opacity:0; transform:scale(.4) } 60%{ opacity:1; transform:scale(1) } 90%{ opacity:.7 } 100%{ opacity:0 } }

/* === ABOUT — calm BREATHING ring (health / wellbeing) === */
.scene--about .breath { fill:none; stroke: currentColor; stroke-width: 1.6; transform-box: fill-box; transform-origin:center; opacity:.4; animation: about-breath 7s ease-in-out infinite; }
.scene--about .breath.b2{ animation-delay:-2.3s } .scene--about .breath.b3{ animation-delay:-4.6s }
.scene--about .heart { fill: #2bc4d4; transform-box: fill-box; transform-origin:center; animation: about-beat 4s ease-in-out infinite; }
.scene--about .st { fill: #2bc4d4; transform-box: fill-box; transform-origin:center; animation: about-tw 6s ease-in-out infinite; }
.scene--about .st:nth-child(3n){ animation-delay:-1.5s } .scene--about .st:nth-child(3n+1){ animation-delay:-3s }
@keyframes about-breath { 0%,100%{ transform:scale(.8); opacity:.25 } 50%{ transform:scale(1.15); opacity:.55 } }
@keyframes about-beat { 0%,100%{ transform:scale(.85); opacity:.7 } 50%{ transform:scale(1.1); opacity:1 } }
@keyframes about-tw { 0%,100%{ opacity:.3; transform:scale(.7) } 50%{ opacity:.9; transform:scale(1.2) } }

/* === CONTACT — friendly signal rippling outward (reach us) === */
.scene--contact .rp { fill:none; stroke: currentColor; stroke-width: 1.5; transform-box: fill-box; transform-origin:center; opacity:0; animation: contact-rp 5s ease-out infinite; }
.scene--contact .rp.b2{ animation-delay:-1.6s } .scene--contact .rp.b3{ animation-delay:-3.2s }
.scene--contact .rp.q2{ animation-delay:-0.8s } .scene--contact .rp.q2b{ animation-delay:-2.4s } .scene--contact .rp.q2c{ animation-delay:-4s }
.scene--contact .src { fill: #17a2b8; transform-box: fill-box; transform-origin:center; animation: contact-src 5s ease-in-out infinite; }
@keyframes contact-rp { 0%{ transform:scale(.1); opacity:.6 } 100%{ transform:scale(1.5); opacity:0 } }
@keyframes contact-src { 0%,100%{ opacity:.7; transform:scale(.85) } 50%{ opacity:1; transform:scale(1.15) } }

/* --------------------------- reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
  .scene--ins .chart { stroke-dashoffset: 0 !important; }
  .scene--sol .pl, .scene--ind .beam, .scene--ind .mote, .scene--proj .ring,
  .scene--proj .blip, .scene--ins .dot, .scene--contact .rp { opacity: .35 !important; }
}