/*
  Terra Eclipse motion layer.
  Everything here is opt-in through the `m` class on <html>, which the page sets
  only when the visitor has not asked for reduced motion. Without it, the site
  renders exactly as before.

  Timing functions are closed-form spring step responses sampled into linear()
  (stiffness/damping: ui 320/30, camera 170/26, type 120/24, moon 90/11).
*/
:root {
  --spring-ui: cubic-bezier(.2, .9, .3, 1.05);
  --spring-camera: cubic-bezier(.2, .8, .2, 1);
  --spring-type: cubic-bezier(.16, .84, .24, 1);
  --spring-moon: cubic-bezier(.3, 1.4, .5, 1);
  --dur-ui: 453ms;
  --dur-camera: 644ms;
  --dur-type: 952ms;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring-ui: linear(0, 0.0183, 0.0654, 0.1313, 0.2084, 0.2907, 0.3739, 0.4549, 0.5314, 0.6021, 0.6663, 0.7235, 0.7739, 0.8176, 0.855, 0.8867, 0.9132, 0.935, 0.9528, 0.9672, 0.9785, 0.9873, 0.994, 0.999, 1.0026, 1.0051, 1.0066, 1.0075, 1.0079, 1.0079, 1.0076, 1.0072, 1.0066, 1.0059, 1.0053, 1.0046, 1.004, 1.0034, 1.0029, 1.0024, 1);
    --spring-camera: linear(0, 0.0192, 0.067, 0.1319, 0.2058, 0.2829, 0.3593, 0.4326, 0.5012, 0.5642, 0.6213, 0.6724, 0.7178, 0.7578, 0.7929, 0.8233, 0.8497, 0.8724, 0.892, 0.9087, 0.923, 0.9352, 0.9455, 0.9543, 0.9616, 0.9679, 0.9732, 0.9776, 0.9813, 0.9844, 0.987, 0.9892, 0.991, 0.9925, 0.9938, 0.9949, 0.9957, 0.9965, 0.9971, 0.9976, 1);
    --spring-type: linear(0, 0.0282, 0.0942, 0.1781, 0.2678, 0.3562, 0.4392, 0.515, 0.5828, 0.6426, 0.6948, 0.7399, 0.7788, 0.8122, 0.8407, 0.865, 0.8857, 0.9033, 0.9182, 0.9308, 0.9415, 0.9506, 0.9582, 0.9647, 0.9702, 0.9748, 0.9787, 0.982, 0.9848, 0.9872, 0.9892, 0.9909, 0.9923, 0.9935, 0.9945, 0.9953, 0.9961, 0.9967, 0.9972, 0.9976, 1);
    --spring-moon: linear(0, 0.0272, 0.0981, 0.1983, 0.3154, 0.4391, 0.5613, 0.6761, 0.7793, 0.8685, 0.9425, 1.0012, 1.0453, 1.0761, 1.0954, 1.105, 1.1068, 1.1025, 1.094, 1.0828, 1.07, 1.0567, 1.0438, 1.0318, 1.0211, 1.012, 1.0045, 0.9986, 0.9942, 0.9912, 0.9895, 0.9887, 0.9886, 0.9892, 0.9902, 0.9915, 0.9929, 0.9943, 0.9956, 0.9969, 1);
  }
}

/* ---------- page-to-page: a quiet cross-fade, header stays put ---------- */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 260ms ease-in both m-fade-out; }
::view-transition-new(root) { animation: 520ms var(--spring-camera) 60ms both m-fade-in; }
@keyframes m-fade-out { to { opacity: 0; } }
@keyframes m-fade-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- brand mark: the bead travels the ring once, then settles ---------- */
.m header .brand .mark { animation: m-mark 1.4s var(--spring-camera) .15s both; }
@keyframes m-mark { from { transform: rotate(-300deg); } }

/* ---------- masked word rise (headlines are split into .w > span) ---------- */
.w { display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.w > span { display: inline-block; will-change: transform; }
.m .rise .w > span { transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; }
.m .rise.in .w > span { animation: m-rise var(--dur-type) var(--spring-type) calc(var(--delay, 0ms) + var(--i) * 55ms) both; }
@keyframes m-rise { from { transform: translateY(108%) rotate(4deg); } to { transform: none; } }

/* ---------- eyebrow rule draws in, label follows ---------- */
.m .eyebrow.reveal:before { transform-origin: left; transform: scaleX(0); }
.m .eyebrow.reveal.in:before { animation: m-draw 700ms var(--spring-camera) var(--delay, 0ms) both; }
@keyframes m-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- generic fade-up with sibling stagger ---------- */
.m .reveal:not(.eyebrow) { opacity: 0; transform: translateY(26px); }
.m .reveal.in:not(.eyebrow) { animation: m-up var(--dur-type) var(--spring-type) var(--delay, 0ms) both; }
.m .eyebrow.reveal { opacity: 0; }
.m .eyebrow.reveal.in { animation: m-fade 600ms ease-out var(--delay, 0ms) both; }
@keyframes m-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

/* Before the script starts, hold the hero dark so the intro doesn't flash;
   if the script never runs, everything appears after 2.5s anyway. */
.m:not(.m-live) .hero-copy, .m:not(.m-live) .hero-bottom { animation: m-up 1ms 2.5s both; }
.m:not(.m-live) .hero-render { animation: m-fade 1ms 2.5s both; }

/* ---------- camera rigs: scrubbed by scroll, no transitions on scrubbed props ---------- */
.m-cam { position: absolute; inset: 0; transform-origin: 62% 45%; will-change: transform; }
.hero > .m-cam { z-index: 0; }
.rendered-pillars > .m-cam, .industry-intro > .m-cam { z-index: -2; }
.m .hero-render { animation: none; }
.m .timeline:before { transition: none; }

/* light sources pinned to the renders (positions computed from object-fit) */
.m-light { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.m-light i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.m-light .core { width: 10px; height: 10px; background: #fffaf0; box-shadow: 0 0 6px 3px #fff4dd, 0 0 22px 10px #ffd69a99, 0 0 60px 24px #f2a54a44; }
.m-light .glow { width: 260px; height: 260px; background: radial-gradient(circle, #ffd7a066 0%, #f2a54a22 30%, transparent 68%); }
.m-light .streak { width: 520px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ffd7a0aa 45%, #fff3df 50%, #ffd7a0aa 55%, transparent); }
.m-light .streak.v { width: 2px; height: 140px; background: linear-gradient(0deg, transparent, #ffd7a066 45%, #fff3df 50%, #ffd7a066 55%, transparent); }
.m-light.sun .glow { width: 360px; height: 360px; background: radial-gradient(circle, #ffe2b866 0%, #f2a54a1f 34%, transparent 70%); }

/* day/night plates over the orbit render */
.m-layer { pointer-events: none; }
.m-lights { mix-blend-mode: screen; opacity: 0; }
.m-day { -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent); }
.m-twilight { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; }

/* a warm bloom that sits exactly on the eclipse ring */
.m-ring { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; mix-blend-mode: screen;
  box-shadow: 0 0 0 1px #ffb46e55, 0 0 14px 2px #ff7a3a55, 0 0 46px 8px #f2a54a2e, inset 0 0 18px 2px #ff6a2a33; }

/* ---------- industry orbit: a moon rides the ring ---------- */
.m .orbit-ring { -webkit-mask: conic-gradient(from 0deg, #000 var(--sweep, 360deg), transparent 0); mask: conic-gradient(from 0deg, #000 var(--sweep, 360deg), transparent 0); }
.m-moon { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: #fff6e6; box-shadow: 0 0 8px 3px #ffe2b8, 0 0 26px 10px #f2a54a55; }
.m-moon:after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid #f2a54a55; opacity: 0; }
.m-moon.arrive:after { animation: m-ping 900ms ease-out both; }
@keyframes m-ping { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(2.2); } }
.m .orbit-core.flash { animation: m-core 900ms ease-out both; }
@keyframes m-core { 30% { box-shadow: 0 0 14px #ffd7a0aa, 0 0 90px #f2a54a55, inset 0 0 22px #f2a54a40; border-color: #fff0d8; } }
.m .industry-orbit button { transition: border-color .25s, color .25s, background .25s, box-shadow .25s; }
.m .industry-orbit button[aria-pressed="true"] { box-shadow: 0 0 18px #f2a54a33; }

/* ---------- timeline: steps light up as the line reaches them ---------- */
.m .step .step-number { transition: background .4s, color .4s, box-shadow .4s, border-color .4s; }
.m .step.on .step-number { background: var(--gold); color: #18140e; border-color: var(--gold); box-shadow: 0 0 0 5px #dbb3821a, 0 0 22px #f2a54a55; }

/* ---------- small affordances ---------- */
.m .button .arrow { display: inline-block; transition: transform var(--dur-ui) var(--spring-ui); }
.m .button:hover .arrow, .m .text-link:hover .arrow { transform: translate(3px, -3px); }
.m .hero-bottom .cross { display: inline-block; animation: m-bob 2.4s ease-in-out 2.4s infinite; }
@keyframes m-bob { 50% { transform: translateY(4px); } }

/* closing corona: scrubbed values arrive as custom properties */
.m .closing-art { transform: scale(var(--s, 1)) rotate(var(--r, 0deg)); filter: brightness(var(--b, 1)); will-change: transform, filter; }

@media (max-width: 700px) {
  /* The phone render is pure black; feather its edges into the page ink so no box shows. */
  .hero-render img { -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 42%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 58% 52% at 50% 42%, #000 62%, transparent 100%); }
  .m-light .streak { width: 200px; }
  .m-light .streak.v { width: 2px; height: 90px; }
  .m-light .glow { width: 160px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-light, .m-ring, .m-moon { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}