@property --exhaust-front {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #f3f7fb; background: #020b1b; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button { font: inherit; }
.scene { position: relative; width: 100%; min-height: 620px; height: 100svh; overflow: hidden; isolation: isolate; background: #020b1b; }
.earth, .atmosphere, .streaks { position: absolute; inset: 0; pointer-events: none; }
.earth { z-index: -3; }
.earth img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 54%; }
.atmosphere { z-index: -2; background: linear-gradient(180deg, rgba(0,7,21,.28), rgba(0,10,28,.07) 35%, rgba(1,13,32,.02) 51%, rgba(0,9,24,.2) 72%, rgba(0,6,17,.84)); }
.stripes { position: absolute; top: 0; left: -19%; width: 71%; height: 100%; fill: #e9f6ff; pointer-events: none; }
.resting-stripes { z-index: -1; opacity: var(--stripe-opacity, .065); }
.streaks { z-index: -1; overflow: hidden; }
.streak {
  --exhaust-front: 0%;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  filter: drop-shadow(0 0 7px #b6e8ff99) drop-shadow(0 0 25px #479dff66);
}
.exhaust-trail { fill: #a9d9ff; opacity: .22; }
.exhaust-front {
  fill: #f1fbff;
  /* A soft, hot leading edge follows the reveal up each fixed polygon. */
  mask-image: linear-gradient(to top,
    transparent calc(var(--exhaust-front) - 18%),
    #000 calc(var(--exhaust-front) - 5%),
    transparent var(--exhaust-front));
}
.masthead { position: absolute; top: 0; left: 0; width: 100%; padding: 34px 48px; display: flex; align-items: center; justify-content: space-between; }
.home { display: inline-flex; align-items: center; text-decoration: none; }
.brand-mark { display: block; width: 30px; height: 30px; }
.identity { position: absolute; top: 29%; width: 100%; padding: 0 8.1%; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font-size: 9px; letter-spacing: .35em; color: #c9d7e6; }
.rule { width: 33px; height: 1px; background: #a1c7e3; }
h1 { margin: 0; line-height: 1; }
.wordmark { display: block; width: 100%; height: auto; opacity: .93; }
.tagline { margin: 28px 0 0; color: #d5e0eb; font-size: clamp(12px, 1.03vw, 16px); font-weight: 400; letter-spacing: .065em; line-height: 1.6; }
.footer { position: absolute; bottom: 0; width: 100%; padding: 32px 48px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.photo-credit, .footer-domain, .replay { font-size: 8px; line-height: 1.6; letter-spacing: .18em; color: #c4d0dc; }
.footer-domain { position: absolute; left: 50%; transform: translateX(-50%); color: #bac7d4; font-size: 7px; letter-spacing: .15em; }
.photo-credit { margin-right: auto; text-decoration: none; font-size: 7px; color: #bac7d4; }
.photo-credit:hover { color: #fff; }
.copyright { color: #9cacbc; margin-left: 8px; }
.replay { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-width: 120px; min-height: 44px; margin: -12px -10px -12px 0; padding: 12px 10px; border: 0; background: transparent; cursor: pointer; transition: color .2s ease; }
.replay svg { width: 16px; height: 16px; transition: transform .5s ease; }
.replay:hover { color: #fff; }
.replay:hover svg { transform: rotate(-45deg); }
a:focus-visible, button:focus-visible { outline: 1px solid #d2edff; outline-offset: 7px; border-radius: 2px; }
.is-running .earth { animation: earth-reveal 1.5s ease both, earth-drift 35s 1.5s ease-out both; }
.is-running .streak-thin { animation: exhaust-grow 3.8s .15s cubic-bezier(.32,.05,.25,1) both; }
.is-running .streak-thick { animation: exhaust-grow 4.1s .4s cubic-bezier(.32,.05,.25,1) both; }
.is-running .resting-stripes { animation: stripe-form 3.15s .4s cubic-bezier(.32,.05,.25,1) both; }
.is-running .eyebrow { animation: text-reveal 2s 3.45s ease both; }
.is-running h1 { animation: text-reveal 2.6s 3.65s ease both; }
.is-running .tagline { animation: text-reveal 2s 4.4s ease both; }
.is-running .ambient-copy { animation: text-reveal 2s 4.7s ease both; }
@keyframes exhaust-grow {
  0% { --exhaust-front: 0%; clip-path: inset(100% 0 0 0); opacity: 0; }
  8% { opacity: .95; }
  72% { --exhaust-front: 100%; clip-path: inset(0); opacity: .75; }
  100% { --exhaust-front: 120%; clip-path: inset(0); opacity: 0; }
}
@keyframes text-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes earth-reveal { from { opacity: .18; } to { opacity: 1; } }
@keyframes earth-drift { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes stripe-form { from { clip-path: inset(100% 0 0 0); opacity: 0; } to { clip-path: inset(0); opacity: var(--stripe-opacity, .065); } }
@media (min-aspect-ratio: 2/1) { .scene { min-height: 450px; } .identity { top: 32%; padding: 0 13%; } .eyebrow { margin-bottom: 20px; } .tagline { margin-top: 22px; } }
@media (max-width: 700px) {
  .scene { min-height: 540px; }
  .masthead { padding: 25px 24px; }
  .brand-mark { width: 25px; height: 25px; }
  .earth img { object-position: 48% center; }
  .identity { top: 30%; padding: 0 7%; }
  .eyebrow { font-size: 7px; letter-spacing: .27em; gap: 10px; margin-bottom: 23px; }
  .rule { width: 22px; }
  .tagline { margin-top: 23px; font-size: 11px; letter-spacing: .055em; }
  .stripes { width: 130%; left: -54%; }
  .resting-stripes { --stripe-opacity: .05; }
  .footer { padding: 25px 24px; flex-wrap: wrap; gap: 20px; }
  .replay { font-size: 7px; letter-spacing: .13em; }
  .replay { gap: 9px; min-width: 105px; }
  .footer-domain { position: static; transform: none; order: 3; width: 100%; font-size: 6px; opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene.is-running * { animation: none !important; transition: none !important; }
  .streaks { display: none; }
  .replay { display: none; }
  .replay:hover svg { transform: none; }
}