/*
 * E.D.E.N. arrival veil (components/eden/intro, js/intro.js).
 *
 * Shown once per session on first entry, over the page while it loads.
 * Everything here hangs off `html.eden-intro`, which the head script in
 * layouts/eden sets only when the veil should play - so with that class
 * absent (no JavaScript, a return visit, prefers-reduced-motion) the veil
 * is display:none and the page is exactly as it was.
 *
 * Timeline (ms), all CSS animations started by `.is-playing`:
 *     0  eyebrow "From The Great Discovery" rises
 *   150  globe ring draws, then the two orbits
 *   800  nodes bloom along the orbits, glow blooms behind
 *  1050  the sprout grows
 *  1500  the eyebrow gives way and the real wordmark sweeps in
 *  1750  the drawn mark fades out in place
 *  ~2400 (or page load, whichever is later, capped by the script) the
 *        veil lifts and the hero beneath rises into place
 *
 * The SVG uses the raster logo's globe proportions, but stays centred
 * in the lockup while it draws and fades.
 *
 * Bump asset_version in config/eden_pages.php after editing this file.
 */

html.eden-intro {
  overflow: hidden;
}

[data-eden-intro] {
  display: none;
}

/* Shown while the head's gate class is on the root, and kept shown by
   its own leaving class: the lift takes the gate class off the root
   (that is what lets the hero rise), and the veil must not vanish
   with it before its own animation has run. */
html.eden-intro .eden-intro,
.eden-intro.is-leaving {
  --eden-intro-w: min(520px, 72vw);
  --eden-intro-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --eden-intro-lift: cubic-bezier(0.77, 0, 0.18, 1);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(13, 103, 180, 0.28), transparent 70%),
    linear-gradient(180deg, #071e3a 0%, #040f20 100%);
  clip-path: inset(0 0 0 0);
}

/* --- the field behind the mark ------------------------------------ */

.eden-intro-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A slow aurora: gold and sky, blurred, drifting. Restrained - the
   mark is the subject. */
.eden-intro-aurora {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(217, 167, 53, 0.22), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(73, 182, 234, 0.26), transparent 48%);
  filter: blur(40px);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.eden-intro.is-playing .eden-intro-aurora {
  animation:
    eden-intro-fade-in 1400ms ease-out 200ms forwards,
    eden-intro-drift 14s linear 200ms infinite;
}

/* One faint ring, far larger than the mark, expanding once: the
   network's reach. */
.eden-intro-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28vmax;
  height: 28vmax;
  border-radius: 50%;
  border: 1px solid rgba(217, 167, 53, 0.45);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

.eden-intro.is-playing .eden-intro-ring {
  animation: eden-intro-ripple 2600ms var(--eden-intro-ease) 700ms forwards;
}

/* --- the stage ----------------------------------------------------- */

.eden-intro-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 34px;
  transform: translateY(2vh);
}

.eden-intro-eyebrow {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  opacity: 0;
  transform: translateY(10px);
}

.eden-intro.is-playing .eden-intro-eyebrow {
  animation:
    eden-intro-rise 900ms var(--eden-intro-ease) 0ms forwards,
    eden-intro-give-way 700ms ease-in 1500ms forwards;
}

/* The lockup box is the raster logo's box; the SVG mark sits over the
   logo's own mark inside it. */
.eden-intro-lockup {
  position: relative;
  width: var(--eden-intro-w);
  height: calc(var(--eden-intro-w) * 0.359);
}

.eden-intro-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  /* The sweep: a soft-edged window that travels left to right and opens
     the wordmark as it passes. */
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(100deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  filter: drop-shadow(0 0 24px rgba(217, 167, 53, 0.18));
}

.eden-intro.is-playing .eden-intro-logo {
  animation: eden-intro-sweep 1100ms var(--eden-intro-ease) 1550ms forwards;
}

.eden-intro-mark {
  position: absolute;
  left: calc(var(--eden-intro-w) * 0.052);
  top: calc(var(--eden-intro-w) * 0.041);
  width: calc(var(--eden-intro-w) * 0.284);
  height: calc(var(--eden-intro-w) * 0.284);
  overflow: visible;
  /* Remains centred in the lockup throughout the fade. */
  transform: translateX(calc(var(--eden-intro-w) * 0.306));
  filter: drop-shadow(0 0 0 rgba(217, 167, 53, 0));
}

.eden-intro.is-playing .eden-intro-mark {
  animation:
    eden-intro-glow 1200ms ease-out 800ms forwards,
    eden-intro-hand-over 500ms ease-in 1750ms forwards;
}

/* Strokes draw in: pathLength="1" on every shape, so one dash rule
   fits them all. */
.eden-intro-orbit,
.eden-intro-stem {
  stroke: #e2ad2f;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.eden-intro-orbit-globe {
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
}

.eden-intro.is-playing .eden-intro-orbit-globe {
  animation: eden-intro-draw 800ms var(--eden-intro-ease) 150ms forwards;
}

.eden-intro.is-playing .eden-intro-orbit-wide {
  animation: eden-intro-draw 800ms var(--eden-intro-ease) 380ms forwards;
}

.eden-intro.is-playing .eden-intro-orbit-tall {
  animation: eden-intro-draw 800ms var(--eden-intro-ease) 540ms forwards;
}

.eden-intro-nodes circle {
  fill: #e2ad2f;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.eden-intro.is-playing .eden-intro-nodes circle {
  animation: eden-intro-bloom 520ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(800ms + var(--i) * 70ms) forwards;
}

.eden-intro-stem {
  stroke-width: 6;
}

.eden-intro.is-playing .eden-intro-stem {
  animation: eden-intro-draw 450ms ease-out 1050ms forwards;
}

.eden-intro-leaf {
  fill: #e2ad2f;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scale(0);
}

.eden-intro.is-playing .eden-intro-leaf {
  animation: eden-intro-bloom 500ms cubic-bezier(0.34, 1.4, 0.64, 1) 1260ms forwards;
}

.eden-intro.is-playing .eden-intro-leaf:last-child {
  animation-delay: 1340ms;
}

/* --- progress ------------------------------------------------------ */

/* A hairline at the very bottom. It eases most of the way on its own;
   the script takes it the rest of the way when the page is ready. */
.eden-intro-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.eden-intro-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #d9a735, #49b6ea);
  box-shadow: 0 0 12px rgba(73, 182, 234, 0.55);
  transition: width 500ms var(--eden-intro-ease);
}

.eden-intro.is-playing .eden-intro-progress span {
  animation: eden-intro-progress 2400ms var(--eden-intro-ease) forwards;
}

.eden-intro.is-ready .eden-intro-progress span {
  animation: none;
  width: 100%;
}

/* --- the lift ------------------------------------------------------ */

.eden-intro.is-leaving {
  animation: eden-intro-lift 900ms var(--eden-intro-lift) forwards;
}

.eden-intro.is-leaving .eden-intro-stage {
  animation: eden-intro-recede 700ms ease-in forwards;
}

/* --- the page arriving beneath --------------------------------------- */

/* While the veil is up, the hero's copy waits below its resting place;
   once the veil is on its way (`eden-arrived`) it rises in, line by
   line, timed to the lift. Only these two classes ever hide anything,
   and the head script guarantees the first always ends. */
html.eden-intro .site-header,
html.eden-intro .hero .hero-copy > * {
  opacity: 0;
}

html.eden-arrived .site-header {
  animation: eden-intro-rise 900ms var(--eden-intro-ease, cubic-bezier(0.22, 1, 0.36, 1)) 300ms both;
}

html.eden-arrived .hero .hero-copy > * {
  animation: eden-intro-rise 1000ms var(--eden-intro-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

html.eden-arrived .hero .hero-copy > :nth-child(1) { animation-delay: 380ms; }
html.eden-arrived .hero .hero-copy > :nth-child(2) { animation-delay: 470ms; }
html.eden-arrived .hero .hero-copy > :nth-child(3) { animation-delay: 560ms; }
html.eden-arrived .hero .hero-copy > :nth-child(4) { animation-delay: 650ms; }
html.eden-arrived .hero .hero-copy > :nth-child(5) { animation-delay: 740ms; }
html.eden-arrived .hero .hero-copy > :nth-child(n + 6) { animation-delay: 830ms; }

/* --- keyframes ----------------------------------------------------- */

@keyframes eden-intro-fade-in {
  to { opacity: 1; }
}

@keyframes eden-intro-drift {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes eden-intro-ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

@keyframes eden-intro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes eden-intro-give-way {
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes eden-intro-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes eden-intro-bloom {
  to { transform: scale(1); }
}

@keyframes eden-intro-glow {
  to { filter: drop-shadow(0 0 26px rgba(217, 167, 53, 0.55)); }
}

/* The drawn mark yields to the raster one beneath the sweep. */
@keyframes eden-intro-hand-over {
  to { opacity: 0; }
}

@keyframes eden-intro-sweep {
  from { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

@keyframes eden-intro-progress {
  0% { width: 0; }
  100% { width: 86%; }
}

@keyframes eden-intro-lift {
  to { clip-path: inset(0 0 100% 0); }
}

@keyframes eden-intro-recede {
  to { opacity: 0; transform: translateY(-6vh) scale(0.96); }
}

@media (max-width: 640px) {
  html.eden-intro .eden-intro,
  .eden-intro.is-leaving {
    --eden-intro-w: min(420px, 78vw);
  }

  .eden-intro-stage {
    gap: 26px;
  }

  .eden-intro-eyebrow {
    font-size: 10px;
    letter-spacing: 0.26em;
  }
}