/* ============================================================
   Moments: three quiet scenes for the platform capabilities.
   Scenes 1 and 3 happen at night, so they stay dark in both
   themes; the palette below maps them onto brand tokens.
   Scene 2 is daylight and follows the page theme.
   ============================================================ */
.moments{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.4rem);

  --m-night-1:var(--ink);
  --m-night-2:color-mix(in srgb, var(--ink) 82%, var(--accent) 18%);
  --m-night-ink:var(--panel);
  --m-glint:var(--panel);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .moments{
    --m-night-1:var(--sea-1);
    --m-night-2:var(--sea-3);
    --m-night-ink:var(--ink);
    --m-glint:var(--ink);
  }
}
:root[data-theme="dark"] .moments{
  --m-night-1:var(--sea-1);
  --m-night-2:var(--sea-3);
  --m-night-ink:var(--ink);
  --m-glint:var(--ink);
}
@media (max-width:900px){
  .moments{grid-template-columns:minmax(0,1fr);gap:1.1rem}
}

.moment{
  min-width:0;
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.moment__scene{
  position:relative;
  aspect-ratio:4/3;
  background:var(--panel-2);
  overflow:hidden;
}
.moment__scene svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.moment__scene svg text{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.moment__body{
  padding:1.25rem 1.45rem 1.55rem;
  display:grid;gap:.45rem;
}
.moment__title{font-size:clamp(1.1rem,1.5vw,1.28rem)}
.moment__text{color:var(--ink-2);font-size:.98rem;line-height:1.5}

/* ---- scroll reveal (JS adds .moments--ready, then .is-in per panel) ---- */
.moments--ready .moment{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
.moments--ready .moment:nth-child(2){transition-delay:80ms}
.moments--ready .moment:nth-child(3){transition-delay:160ms}
.moments--ready .moment.is-in{opacity:1;transform:none}

/* ---- animations run only while the scene is on screen ---- */
.moment__scene:not(.is-live) svg *{animation-play-state:paused}

/* Scene 1: the phone glow breathes, the card rises once. */
.m1-glow{
  transform-box:fill-box;transform-origin:center;
  animation:m1breathe 5.4s ease-in-out infinite;
}
.m1-glow--back{animation-delay:-1.6s}
@keyframes m1breathe{
  0%,100%{transform:scale(1);opacity:.78}
  50%{transform:scale(1.09);opacity:1}
}
.m1-card{opacity:0;transform:translateY(48px)}
.is-live .m1-card{animation:m1rise 1.1s cubic-bezier(.2,.8,.2,1) .9s both}
@keyframes m1rise{
  from{opacity:0;transform:translateY(48px)}
  to{opacity:1;transform:none}
}
.m1-stars circle:nth-child(odd){animation:mtwinkle 4.6s ease-in-out infinite}
.m1-stars circle:nth-child(3n){animation-delay:-2.2s}

/* Scene 2: glints drift across the water, the preset highlight slides
   and the load toggles follow it. */
.m2-glints{animation:m2drift 11s linear infinite}
@keyframes m2drift{
  from{transform:translateX(0)}
  to{transform:translateX(-22px)}
}
.m2-active{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.m2-mode{fill:var(--ink);transition:fill .35s ease}
.m2-mode.is-on{fill:var(--on-accent)}
.m2-track{fill:var(--line);transition:fill .35s ease}
.m2-knob{transition:transform .4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 1px 1.5px rgba(15,23,42,.25))}
.m2-icon{opacity:.45;transition:opacity .35s ease}
.m2-load.is-on .m2-track{fill:var(--accent)}
.m2-load.is-on .m2-knob{transform:translateX(18px)}
.m2-load.is-on .m2-icon{opacity:1}

/* Scene 3: stars and harbour lights, then the plug drops and the warning
   arrives. The scene class flips .is-out and .is-alert on a timeline. */
.m3-stars circle:nth-child(even){animation:mtwinkle 5.2s ease-in-out infinite}
.m3-stars circle:nth-child(4n){animation-delay:-2.7s}
.m3-stars circle:nth-child(4n+1){animation-delay:-1.3s}
@keyframes mtwinkle{
  0%,100%{opacity:.35}
  50%{opacity:1}
}
.m3-shimmer rect{animation:m3shimmer 3.8s ease-in-out infinite}
.m3-shimmer rect:nth-child(2n){animation-delay:-1.1s}
.m3-shimmer rect:nth-child(3n){animation-delay:-2.3s}
@keyframes m3shimmer{
  0%,100%{opacity:.45}
  50%{opacity:1}
}
.m3-led{fill:var(--ok);transition:fill .3s ease}
.m3-cable{transition:opacity .3s ease}
.m3-cable--off{opacity:0}
.m3-spark{opacity:0}
.m3-tag-bg{fill:color-mix(in srgb,var(--warn) 16%,var(--panel))}
.m3-tag{fill:var(--warn);letter-spacing:.02em}
.m3-card{
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
.m3.is-out .m3-cable--on{opacity:0}
.m3.is-out .m3-cable--off{opacity:1}
.m3.is-out .m3-spark{animation:m3spark .7s ease-out both}
.m3.is-out .m3-led{fill:var(--warn);animation:m3blink 1.1s steps(2,jump-none) infinite}
.m3.is-alert .m3-card{opacity:1;transform:none}
@keyframes m3spark{
  0%{opacity:0}
  15%{opacity:1}
  100%{opacity:0}
}
@keyframes m3blink{
  0%{opacity:1}
  100%{opacity:.25}
}
.is-static .m3-spark{display:none}

/* ---- reduced motion: static end states, one soft fade, no loops ---- */
@media (prefers-reduced-motion:reduce){
  .moments--ready .moment{transform:none;transition:opacity .4s ease}
  .moment__scene svg *{animation:none !important;transition:none !important}
  .m1-card{opacity:1;transform:none}
  .m1-glow{opacity:.9}
}

/* Caption above the title, set like the eyebrow elsewhere on the page. */
.moment__k{
  font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);
}