/* ============================================================
   ANVIL · SPLASH OVERLAY  (recycled from anvil-splash.html v0.1)
   Entry curtain over the homepage. All selectors scoped under
   #anvil-splash so they never collide with site components.
   Motion law: draw → fill → metal scan → wordmark reveal.
   ============================================================ */

/* Scroll lock + visibility are driven by html.splash-on, set by an
   inline head script before paint (no flash of the homepage). */
#anvil-splash { display: none; }
html.splash-on #anvil-splash { display: flex; }
html.splash-on,
html.splash-on body { height: 100%; overflow: hidden; }

#anvil-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--obsidian);
  color: var(--platinum);
  font-family: var(--font-sans);
  font-weight: 300;

  /* Master timeline */
  --t-draw: 1400ms;
  --t-fill:  700ms;
  --t-scan: 1600ms;
  --t-mark:  700ms;
}

/* Atmospheric ground — identical language to the system */
#anvil-splash::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(125,143,163,0.05), transparent 60%),
    radial-gradient(ellipse 800px 500px at 50% 100%, rgba(181,170,153,0.025), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#anvil-splash::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.4;
  z-index: 1;
}

/* ---- Corner registration marks ---- */
#anvil-splash .frame-mark {
  position: fixed;
  width: 18px; height: 18px;
  border-color: var(--titanium-grey);
  opacity: 0;
  animation: splashMarkIn 800ms var(--ease) forwards;
  animation-delay: 120ms;
  z-index: 3;
}
#anvil-splash .fm-tl { top: 28px; left: 28px;     border-top: 1px solid; border-left: 1px solid; }
#anvil-splash .fm-tr { top: 28px; right: 28px;    border-top: 1px solid; border-right: 1px solid; }
#anvil-splash .fm-bl { bottom: 28px; left: 28px;  border-bottom: 1px solid; border-left: 1px solid; }
#anvil-splash .fm-br { bottom: 28px; right: 28px; border-bottom: 1px solid; border-right: 1px solid; }
@keyframes splashMarkIn { to { opacity: 1; } }

/* ---- Top + bottom metadata lines ---- */
#anvil-splash .meta-line {
  position: fixed;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 30px 34px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--titanium-grey);
  z-index: 3;
  opacity: 0;
  animation: splashMetaIn 700ms var(--ease) forwards;
}
#anvil-splash .meta-top    { top: 0;    animation-delay: 200ms; }
#anvil-splash .meta-bottom { bottom: 0; animation-delay: 2900ms; }
#anvil-splash .meta-line .live { color: var(--muted-chrome); }
#anvil-splash .meta-line .live::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cold-cyan);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(157,184,199,0.5);
}
@keyframes splashMetaIn { to { opacity: 1; } }

/* ---- Logo stage ---- */
#anvil-splash .stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
#anvil-splash .logo-wrap { position: relative; width: 132px; height: 146px; }
#anvil-splash .logo-wrap svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Phase A: outline draws itself */
#anvil-splash .logo-stroke path {
  fill: none;
  stroke: var(--cold-silver);
  stroke-width: 0.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  animation: splashDraw var(--t-draw) var(--ease) forwards;
}
#anvil-splash .logo-stroke .p-a      { stroke-dasharray: 140; stroke-dashoffset: 140; animation-delay: 120ms; }
#anvil-splash .logo-stroke .p-arc-tr { stroke-dasharray: 25;  stroke-dashoffset: 25;  animation-delay: 320ms; }
#anvil-splash .logo-stroke .p-arc-l  { stroke-dasharray: 58;  stroke-dashoffset: 58;  animation-delay: 440ms; }
#anvil-splash .logo-stroke .p-arc-b  { stroke-dasharray: 39;  stroke-dashoffset: 39;  animation-delay: 560ms; }
@keyframes splashDraw { to { stroke-dashoffset: 0; } }

/* Phase B: solid platinum fill resolves in */
#anvil-splash .logo-fill .fill-group path { fill: var(--platinum); }
#anvil-splash .logo-fill .fill-group {
  opacity: 0;
  animation: splashFillIn var(--t-fill) var(--ease) forwards;
  animation-delay: 1600ms;
}
@keyframes splashFillIn { to { opacity: 1; } }

/* Phase C: single metallic scan, clipped to the mark */
#anvil-splash .scan-rect {
  opacity: 0;
  animation: splashScan var(--t-scan) cubic-bezier(.45,0,.55,1) forwards;
  animation-delay: 2400ms;
}
@keyframes splashScan {
  0%   { transform: translateX(-34px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(34px); opacity: 0; }
}

/* ---- Wordmark + claim ---- */
#anvil-splash .identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(8px);
  animation: splashReveal var(--t-mark) var(--ease) forwards;
  animation-delay: 2700ms;
}
#anvil-splash .wordmark {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  color: var(--platinum);
}
#anvil-splash .claim {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-chrome);
}
@keyframes splashReveal { to { opacity: 1; transform: translateY(0); } }

#anvil-splash .rule {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--steel-border) 50%, transparent);
  animation: splashRule 900ms var(--ease) forwards;
  animation-delay: 2620ms;
}
@keyframes splashRule { to { width: 168px; } }

/* ---- Loader progress ---- */
#anvil-splash .progress {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: 168px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  animation: splashMetaIn 600ms var(--ease) forwards;
  animation-delay: 300ms;
  z-index: 3;
}
#anvil-splash .progress .track {
  height: 1px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
#anvil-splash .progress .track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--titanium-grey), var(--cold-silver));
  transform-origin: left;
  transform: scaleX(0);
  animation: splashLoad 3200ms cubic-bezier(.45,0,.15,1) forwards;
  animation-delay: 200ms;
}
@keyframes splashLoad { to { transform: scaleX(1); } }
#anvil-splash .progress .pmeta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--titanium-grey);
}

/* ---- Handoff: the centre fades, the frame cross-dissolves to the hero ----
   The corner marks + meta lines hold position (no translate) and the hero
   beneath carries an identical frame, so the frame reads as continuous while
   the logo leaves and the video appears. */
#anvil-splash.done .stage,
#anvil-splash.done .progress {
  animation: splashCenterOut 520ms var(--ease) forwards;
}
#anvil-splash.done {
  animation: splashOut 720ms var(--ease) 460ms forwards;
}
@keyframes splashCenterOut {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes splashOut {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  #anvil-splash * { animation-duration: 0.001ms !important; animation-delay: 0ms !important; }
  #anvil-splash .logo-stroke path { stroke-dashoffset: 0; }
  #anvil-splash .logo-fill .fill-group { opacity: 1; }
  #anvil-splash .identity,
  #anvil-splash .meta-line,
  #anvil-splash .progress,
  #anvil-splash .frame-mark { opacity: 1; transform: none; }
  #anvil-splash .rule { width: 168px; }
}