/* FIRST LIGHT only owns temporary first-load presentation. Removing the root
   attribute restores the existing logo and navigation styles immediately. */
html[data-first-light="pending"] .logo-link img,
html[data-first-light="pending"] .site-footer__surface,
html[data-first-light="pending"] .globe-canvas,
html[data-first-light="pending"] .globe-scroll-overlay {
  opacity: 0;
}

/* True black before the first draw, including while Earth textures decode. */
html[data-first-light="pending"] .site-shell,
html[data-first-light="running"] .site-shell,
html[data-first-light="pending"] .panel--explore,
html[data-first-light="running"] .panel--explore {
  background: #000;
}

/* COSMOS pops up last, using the existing markers' 640ms rebound. Backwards
   fill hides it through the delay, then releases native hover/edge behavior
   when the pop settles, before the scene's three-second cleanup. */
html[data-first-light="pending"] .project-marker[data-project~="cosmos"],
html[data-first-light="pending"] .project-callout[data-project="cosmos"] {
  filter: opacity(0);
}

html[data-first-light="running"] .project-marker[data-project~="cosmos"] {
  animation: home-first-light-marker-pop 640ms 2200ms backwards;
  animation-composition: add;
}

html[data-first-light="running"] .project-callout[data-project="cosmos"] {
  animation: home-first-light-callout-pop 640ms 2200ms backwards;
  animation-composition: add;
}

@keyframes home-first-light-marker-pop {
  0% { filter: opacity(0); transform: scale(0.6666666667); animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); }
  58% { filter: opacity(1); transform: scale(1.1); animation-timing-function: ease-in-out; }
  80% { filter: opacity(1); transform: scale(0.9733333333); animation-timing-function: ease-out; }
  100% { filter: opacity(1); transform: scale(1); }
}

@keyframes home-first-light-callout-pop {
  0% { filter: opacity(0); transform: translateY(12px) scale(0.72); animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); }
  58% { filter: opacity(1); transform: translateY(0px) scale(1.035); animation-timing-function: ease-in-out; }
  80% { filter: opacity(1); transform: translateY(0px) scale(0.992); animation-timing-function: ease-out; }
  100% { filter: opacity(1); transform: translateY(0px) scale(1); }
}

/* The logo is one unchanged raster. A soft mask reveals it left to right,
   using the same opacity/blur curve as the existing RELICS letter entrance.
   Masking the image leaves the link's normal opacity and hover glow intact. */
html[data-first-light="running"] .logo-link img {
  animation:
    relics-intro-arrive 1100ms cubic-bezier(.22,.61,.36,1) 1000ms both,
    home-first-light-logo-sweep 1100ms cubic-bezier(.22,.61,.36,1) 1000ms both;
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 65%);
  mask-image: linear-gradient(90deg, #000 35%, transparent 65%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

@keyframes home-first-light-logo-sweep {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

/* Fade the existing glass as one surface. Its scale, shadow, active pill and
   input behavior keep their existing owners; only the labels receive blur. */
html[data-first-light="running"] .site-footer__surface {
  animation: home-first-light-surface-reveal 1100ms cubic-bezier(.22,.61,.36,1) 1400ms both;
}

@keyframes home-first-light-surface-reveal {
  0% { opacity: 0; }
  35% { opacity: .2; }
  100% { opacity: 1; }
}

/* The inverse-scale labels retain their transforms. Their existing inner
   word/cue groups can still bounce independently during the entrance. */
html[data-first-light="running"] .footer-toggle__label {
  animation: relics-intro-arrive 1100ms cubic-bezier(.22,.61,.36,1) 1400ms both;
}

html[data-first-light="running"] .footer-toggle[data-target="index"] .footer-toggle__label {
  animation-delay: 1540ms;
}

html[data-first-light="running"] .footer-toggle[data-target="relics"] .footer-toggle__label {
  animation-delay: 1680ms;
}

html[data-first-light="running"] .footer-toggle[data-target="tool"] .footer-toggle__label {
  animation-delay: 1820ms;
}

@media (prefers-reduced-motion: reduce) {
  html[data-first-light="pending"] .project-marker[data-project~="cosmos"],
  html[data-first-light="running"] .project-marker[data-project~="cosmos"],
  html[data-first-light="pending"] .project-callout[data-project="cosmos"],
  html[data-first-light="running"] .project-callout[data-project="cosmos"] {
    animation: none;
    filter: none;
  }

  html[data-first-light="pending"] .logo-link img,
  html[data-first-light="running"] .logo-link img,
  html[data-first-light="pending"] .site-footer__surface,
  html[data-first-light="running"] .site-footer__surface,
  html[data-first-light="pending"] .globe-canvas,
  html[data-first-light="pending"] .globe-scroll-overlay,
  html[data-first-light="running"] .globe-scroll-overlay,
  html[data-first-light="pending"] .footer-toggle__label,
  html[data-first-light="running"] .footer-toggle__label {
    animation: none;
    opacity: 1;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  html[data-first-light="pending"] .site-shell,
  html[data-first-light="running"] .site-shell,
  html[data-first-light="pending"] .panel--explore,
  html[data-first-light="running"] .panel--explore {
    background: #020202;
  }
}