/* SEMS landing — motion.
   1. Hero intro: a CSS-only choreography that plays once on load (~2.6 s), then stays "live".
   2. Scroll reveals: elements marked .rv by site.js fade/rise in when they enter the viewport
      (.is-in), and keep .is-on afterwards so their inner animations can run.
   3. Living details: sankey energy particles, light circuits, scheduler sweep, chat loop…
   Everything is gated on html.js so the page is fully static (and complete) without JS.
   Not gated on prefers-reduced-motion — see the note in brand/sems.css. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------------------------------------------------------- keyframes */
@keyframes upIn     { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes navIn    { from { opacity: 0; transform: translate3d(0, -24px, 0); } to { opacity: 1; transform: none; } }
@keyframes lineIn   { from { transform: translate3d(0, 115%, 0) rotate(3deg); } to { transform: none; } }
@keyframes glowIn   { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes drift    { 0% { transform: none; } 50% { transform: translate3d(-34px, 26px, 0) scale(1.08); } 100% { transform: translate3d(22px, -18px, 0) scale(.95); } }
@keyframes breathe  { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes scan     { 0% { transform: translate3d(0, -220px, 0); opacity: 0; } 4% { opacity: 1; } 32% { transform: translate3d(0, 1100px, 0); opacity: 0; } 100% { transform: translate3d(0, 1100px, 0); opacity: 0; } }
@keyframes shimmer  { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }
@keyframes dashIn   { from { opacity: 0; transform: translate3d(0, 80px, 0) rotateX(18deg) rotateY(-12deg) scale(.93); } to { opacity: 1; transform: none; } }
@keyframes draw     { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes areaIn   { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes pop      { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes ring     { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes ringIn   { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 33 100; } }
@keyframes barIn    { from { transform: scaleY(0); } to { transform: none; } }
@keyframes ping     { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 155, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(47, 191, 155, 0); } }
@keyframes sheen    { 0% { transform: translateX(0) skewX(-20deg); } 28%, 100% { transform: translateX(480%) skewX(-20deg); } }
@keyframes icPop    { from { opacity: 0; transform: scale(.35) rotate(-28deg); } to { opacity: 1; transform: none; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes skFlow   { to { stroke-dashoffset: -15.5; } }
@keyframes sweep    { 0% { transform: translateX(-118px); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(118px); opacity: 0; } }
@keyframes wire     { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes icGlow   { 0%, 70%, 100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; }
                      20% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 0 26px 2px color-mix(in srgb, var(--c) 45%, transparent); } }
@keyframes dots     { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
/* WhatsApp conversation, one 9 s loop: alert → typing… → reply → acknowledged → fade */
@keyframes chatIn   { 0% { opacity: 0; transform: translateY(12px) scale(.92); } 4%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes chatType { 0%, 11% { opacity: 0; transform: scale(.8); } 14%, 25% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes chatOut  { 0%, 27% { opacity: 0; transform: translateY(12px) scale(.92); } 31%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes chatNote { 0%, 34% { opacity: 0; } 38%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ---------------------------------------------------------------- ambient */
.js .glow { animation: drift 22s ease-in-out infinite alternate; }
.js .hero .glow { animation: glowIn 2.2s var(--ease-out) both, drift 20s ease-in-out 2.2s infinite alternate; }
.js .hero .glow:nth-of-type(3) { animation-duration: 2.2s, 26s; }
.js .cta-card .glow { animation: breathe 7s ease-in-out infinite; }
.js .cta-card .glow-sky { animation-delay: -3.5s; }

.hero .bg-grid { overflow: hidden; }
.hero .bg-grid::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(63, 224, 255, .05) 65%, rgba(127, 240, 255, .16));
  border-bottom: 1px solid rgba(127, 240, 255, .35);
}
.js .hero .bg-grid { animation: fadeIn 1.4s ease both; }
.js .hero .bg-grid::after { animation: scan 10s var(--ease-io) .3s infinite; }

.dot-mint { animation: ping 2.2s ease-out infinite; }

/* Sections that are off-screen pause their looping animations (site.js toggles .offscreen),
   so only what you can see costs anything while scrolling. */
.offscreen, .offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- hero intro */
.js .nav { animation: navIn .8s var(--ease-out) .1s both; }
.js .hero .pill { animation: upIn .8s var(--ease-out) .25s both; }

.hero-title .ln { display: block; overflow: hidden; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.hero-title .ln > span { display: inline-block; }
.js .hero-title .ln > span { animation: lineIn 1.15s var(--ease-out) both; }
.js .hero-title .ln:nth-child(1) > span { animation-delay: .35s; }
.js .hero-title .ln:nth-child(2) > span { animation-delay: .47s; }
.js .hero-title .ln:nth-child(3) > span { animation-delay: .59s; }
.hero-title .ln > span.text-gold {
  background: linear-gradient(100deg, #B5875A 0%, #E4C59D 35%, #FFF5E4 50%, #E4C59D 65%, #B5875A 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js .hero-title .ln > span.text-gold { animation: lineIn 1.15s var(--ease-out) .74s both, shimmer 5.5s ease-in-out 2.2s infinite; }

.js .hero-sub { animation: upIn .9s var(--ease-out) .9s both; }
.js .hero-ctas > :nth-child(1) { animation: upIn .8s var(--ease-out) 1.05s both; }
.js .hero-ctas > :nth-child(2) { animation: upIn .8s var(--ease-out) 1.15s both; }
.js .trust-label { animation: fadeIn .8s ease 1.3s both; }
.js .trust-row li { animation: upIn .7s var(--ease-out) both; }
.js .trust-row li:nth-child(1) { animation-delay: 1.38s; }
.js .trust-row li:nth-child(2) { animation-delay: 1.46s; }
.js .trust-row li:nth-child(3) { animation-delay: 1.54s; }
.js .trust-row li:nth-child(4) { animation-delay: 1.62s; }

/* dashboard: swings in in 3D, then fills itself in */
.hero-visual { perspective: 1600px; transform: perspective(1600px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .8s var(--ease-out); }
.js .dash { transform-origin: 50% 0; animation: dashIn 1.5s var(--ease-out) .5s both; }
.js .dash-head { animation: fadeIn .8s ease .95s both; }
.js .dash-kpis .kpi { animation: upIn .7s var(--ease-out) both; }
.js .dash-kpis .kpi:nth-child(1) { animation-delay: 1.02s; }
.js .dash-kpis .kpi:nth-child(2) { animation-delay: 1.1s; }
.js .dash-kpis .kpi:nth-child(3) { animation-delay: 1.18s; }
.js .dash-kpis .kpi:nth-child(4) { animation-delay: 1.26s; }
.kpi .num { transition: color .5s ease; }
.kpi .num.tick { color: var(--gold2); }
.js .dash-chart { animation: fadeIn .8s ease 1.15s both; }
.js .chart .gridlines { animation: fadeIn 1s ease 1.3s both; }
.chart .ln-draw { stroke-dasharray: 1; }
.js .chart .ln-draw { animation: draw 1.9s var(--ease-io) 1.45s both; }
.js .chart .ln-draw + .ln-draw { animation-delay: 1.65s; }
.chart .area, .chart .mark, .chart .mark-ring { transform-box: fill-box; }
.chart .area { transform-origin: 50% 100%; }
.js .chart .area { animation: areaIn 1.4s var(--ease-out) 1.5s both; }
.chart .mark, .chart .mark-ring { transform-origin: 50% 50%; }
.js .chart .mark { animation: pop .6s var(--ease-back) 2.7s both; }
.chart .mark-ring { opacity: 0; }
.js .chart .mark-ring { animation: ring 2.4s ease-out 3.1s infinite; }
.js .dash-foot > div { animation: upIn .8s var(--ease-out) 1.4s both; }
.js .dash-foot > div + div { animation-delay: 1.5s; }
.js .ring-val { animation: ringIn 1.7s var(--ease-out) 1.75s both; }
.bars i { transform-origin: 50% 100%; transition: height 1.1s var(--ease-io); }
.js .bars i { animation: barIn .8s var(--ease-back) both; }
.js .bars i:nth-child(1) { animation-delay: 1.8s; }  .js .bars i:nth-child(2) { animation-delay: 1.86s; }
.js .bars i:nth-child(3) { animation-delay: 1.92s; } .js .bars i:nth-child(4) { animation-delay: 1.98s; }
.js .bars i:nth-child(5) { animation-delay: 2.04s; } .js .bars i:nth-child(6) { animation-delay: 2.1s; }
.js .bars i:nth-child(7) { animation-delay: 2.16s; } .js .bars i:nth-child(8) { animation-delay: 2.22s; }
.js .bars i:nth-child(9) { animation-delay: 2.28s; }

/* gold buttons: a light sheen sweeps across every few seconds */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(0) skewX(-20deg);
}
.js .hero-ctas .btn-gold::after { animation: sheen 5s ease-in-out 2.6s infinite; }
.js .cta .btn-gold::after { animation: sheen 5s ease-in-out 1s infinite; }

/* ---------------------------------------------------------------- scroll reveals */
.js .rv {
  opacity: 0;
  transition: opacity .9s var(--ease-out), transform 1.05s var(--ease-out), filter .9s var(--ease-out), letter-spacing 1.2s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .rv-up    { transform: translate3d(0, 36px, 0); }
.js .rv-rise  { transform: translate3d(0, 56px, 0) scale(.95); }
.js .rv-left  { transform: translate3d(-40px, 0, 0); }
.js .rv-zoom  { transform: translate3d(0, 30px, 0) scale(.93); }
.js .rv-blur  { transform: translate3d(0, 26px, 0); filter: blur(12px); }
.js .rv-track { letter-spacing: .85em; }
.js .rv.is-in { opacity: 1; transform: none; filter: none; }
.js .rv-track.is-in { letter-spacing: 2.4px; }
@media (max-width: 767px) { .js .rv-blur { filter: none; } .js .rv-track.is-in { letter-spacing: 2.2px; } }

/* stats: top hairline draws out from the centre */
.stats-grid { border-top-color: transparent !important; position: relative; }
.stats-grid::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(255, 255, 255, .08); transform-origin: 50% 50%; transition: transform 1.4s var(--ease-out); }
.js .stats-grid:not(.is-on)::before { transform: scaleX(0); }
@media (max-width: 767px) { .stats-grid::before { display: none; } }

/* module cards: icon pops, sparkline draws, tags follow */
.spark path { stroke-dasharray: 1; }
.js .mod.is-on .mod-ic { animation: icPop .9s var(--ease-back) calc(var(--d, 0ms) + 220ms) both; }
.js .mod.is-on .spark path { animation: draw 1.5s var(--ease-io) calc(var(--d, 0ms) + 380ms) both; }
.js .mod.is-on .tags li { animation: upIn .6s var(--ease-out) both; }
.js .mod.is-on .tags li:nth-child(1) { animation-delay: calc(var(--d, 0ms) + 520ms); }
.js .mod.is-on .tags li:nth-child(2) { animation-delay: calc(var(--d, 0ms) + 600ms); }
.js .mod.is-on .tags li:nth-child(3) { animation-delay: calc(var(--d, 0ms) + 680ms); }
.mod:hover .mod-ic .ic { animation: spin 1.2s var(--ease-out); }
.mod:hover .spark path { animation: draw 1.1s var(--ease-io); }

/* insights points: icon pops after the row slides in */
.js .points li.is-on .pt-ic { animation: icPop .8s var(--ease-back) calc(var(--d, 0ms) + 200ms) both; }

/* sankey: nodes grow, bands fill, labels follow, then energy particles flow forever */
.sankey .sk-node { transform-box: fill-box; transform-origin: 50% 50%; }
.js .flow .sk-node { transform: scaleY(0); }
.js .flow.is-on .sk-node { transform: none; transition: transform .9s var(--ease-out) var(--sd, 0ms); }
.js .flow .sk-band { opacity: 0; }
.js .flow.is-on .sk-band { opacity: 1; transition: opacity 1.1s ease var(--sd, 0ms); }
.js .flow .sk-lbl { opacity: 0; transform: translateX(-8px); }
.js .flow.is-on .sk-lbl { opacity: 1; transform: none; transition: opacity .7s ease var(--sd, 0ms), transform .7s var(--ease-out) var(--sd, 0ms); }
.sk-flow path { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 1.5 14; animation: skFlow 1.5s linear infinite; }
.js .flow .sk-flow { opacity: 0; }
.js .flow.is-on .sk-flow { opacity: 1; transition: opacity 1.2s ease 1.5s; }
.js .flow .flow-head, .js .flow .flow-note { opacity: 0; }
.js .flow.is-on .flow-head { opacity: 1; transition: opacity .8s ease .2s; }
.js .flow.is-on .flow-note { opacity: 1; transition: opacity .8s ease 1.6s; }

/* automation — AC: power switch flips on, temperature counts down, schedule tile pops */
.toggle { transition: background .45s ease .45s; }
.toggle i { transition: transform .7s var(--ease-back) .45s; }
.js .auto:not(.is-on) .toggle { background: #C9D3DE; }
.js .auto:not(.is-on) .toggle i { transform: translateX(-40px); }
.js .auto.is-on .modes .on { animation: pop .5s var(--ease-back) .9s both; }
.js .auto.is-on .next { animation: pop .6s var(--ease-back) 1.1s both; }
.auto:first-child .auto-body .auto-ic .ic { animation: spin 16s linear infinite; }   /* the snowflake turns slowly */

/* automation — lights: bulbs switch with a soft glow (JS drives which ones) */
.circuits span { transition: background .4s ease, color .4s ease, box-shadow .4s ease, transform .4s var(--ease-back); }
.circuits span.on { transform: scale(1.04); }
.circuits span.flash { transform: scale(1.18); }

/* automation — scheduler: job bars grow along the timeline, "now" sweeps across */
.track i { transform-origin: 0 50%; }
.js .auto .track i { transform: scaleX(0); }
.js .auto.is-on .track i { transform: none; transition: transform 1s var(--ease-out) .3s; }
.js .auto.is-on .job:nth-child(3) .track i { transition-delay: .42s; }
.js .auto.is-on .job:nth-child(4) .track i { transition-delay: .54s; }
.js .auto.is-on .job:nth-child(5) .track i { transition-delay: .66s; }
.js .auto.is-on .track i + i { transition-delay: .78s; }
.js .auto:not(.is-on) .now { opacity: 0; }
.js .auto.is-on .now { animation: sweep 12s linear .9s infinite; }

/* automation — WhatsApp chat plays the conversation on a loop */
.typing {
  position: absolute; right: 12px; top: 84px; display: flex; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #D9FDD3;
}
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #3B6F43; animation: dots 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.chat .bub.in { transform-origin: 0 100%; } .chat .bub.out { transform-origin: 100% 100%; } .typing { transform-origin: 100% 100%; }
.js .chat .bub, .js .chat .typing, .js .chat small { opacity: 0; }
.typing { opacity: 0; }
.js .wide.is-on .chat .bub.in { animation: chatIn 9s var(--ease-out) .2s infinite; }
.js .wide.is-on .chat .typing { animation: chatType 9s var(--ease-out) .2s infinite; }
.js .wide.is-on .chat .bub.out { animation: chatOut 9s var(--ease-out) .2s infinite; }
.js .wide.is-on .chat small { animation: chatNote 9s ease .2s infinite; }

/* automation — report rows slide in */
.js .wide .reports li { opacity: 0; transform: translateX(28px); }
.js .wide.is-on .reports li { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s var(--ease-out); }
.js .wide.is-on .reports li:nth-child(1) { transition-delay: .3s; }
.js .wide.is-on .reports li:nth-child(2) { transition-delay: .42s; }
.js .wide.is-on .reports li:nth-child(3) { transition-delay: .54s; }
.reports li .ic { transition: transform .3s var(--ease-out); }
.reports li:hover .ic { transform: translateX(4px); }

/* hardware: wires draw between steps, data pulses flow through them, icons glow in turn */
.steps li + li::before {
  background: linear-gradient(90deg, rgba(201, 154, 104, .35) 0%, #FFE7C2 50%, rgba(201, 154, 104, .35) 100%);
  background-size: 200% 100%; transform-origin: 0 50%;
  transition: transform .8s var(--ease-out) calc(var(--d, 0ms) + 250ms);
  animation: wire 1.8s linear infinite;
}
.js .steps li:not(.is-on) + li::before, .js .steps li + li:not(.is-on)::before { transform: scaleX(0); }
.steps li + li::after { transition: transform .5s var(--ease-back) calc(var(--d, 0ms) + 700ms); }
.js .steps li + li:not(.is-on)::after { transform: scale(0); }
.js .steps li.is-on .step-ic { animation: icGlow 4.8s ease-in-out infinite; }
.js .steps li.is-on:nth-child(2) .step-ic { animation-delay: 1.2s; }
.js .steps li.is-on:nth-child(3) .step-ic { animation-delay: 2.4s; }
.js .steps li.is-on:nth-child(4) .step-ic { animation-delay: 3.6s; }
@media (max-width: 767px) {
  .steps::before { transform-origin: 50% 0; transition: transform 1.4s var(--ease-out) .2s; }
  .js .steps:not(.is-on)::before { transform: scaleY(0); }
}

/* small screens: the AC switch is shorter */
@media (max-width: 767px) {
  .js .auto:not(.is-on) .toggle i { transform: translateX(-32px); }
}