/*
 * VFD intro animation styles (moved verbatim from main.css in Design Pass 1).
 *
 * Used only by the Home page at "/" (src/pages/index.astro), where the intro
 * plays as an overlay on first visit or with /?intro=1, then reveals Home.
 * State classes are driven by public/js/main.js. Do not retime or restyle the
 * animation without explicit approval (AGENTS.md: protected intro).
 */

/* Legacy color tokens the intro rules were written against, scoped to the overlay. */
.vfd-startup {
  --color-background: #010100;
  --color-text: #b8ddd7;
  --color-caption: #97b5b0;
}

/* Lock page scroll while the intro owns the screen. */
html.vfd-intro-pending,
html:has(.vfd-startup.is-active:not(.is-finishing)) {
  overflow: hidden;
}

/* Hide Home until the intro has painted over it (avoids a first-paint flash). */
html.vfd-intro-pending body > :not(.vfd-startup) {
  visibility: hidden;
}

/* The overlay ships with [hidden]; the head guard's pending class shows it before main.js runs. */
html.vfd-intro-pending .vfd-startup[hidden] {
  display: block;
}

/*
 * Invisible layout stage reproducing the retired standalone intro page
 * (centered logo frame, title, tagline; nudged up 3vh). main.js measures
 * [data-vfd-startup-anchor] so the animated display lands exactly where it
 * did on the old page.
 */
.vfd-startup__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  visibility: hidden;
  pointer-events: none;
  line-height: 1.5;
}

.vfd-startup__stage-inner {
  width: 100%;
  text-align: center;
  transform: translateY(-3vh);
}

.vfd-startup__stage-title {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.21em;
}

.vfd-startup__stage-tagline {
  margin: 0 auto 1.35rem;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.65;
}

.logo-frame {
  width: min(540px, 92vw, 100%);
  aspect-ratio: 25 / 18;
  margin: 0 auto 1.2rem;
  overflow: hidden;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-14%);
}

.vfd-startup {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--color-background);
  opacity: 0;
  pointer-events: none;
}

html.vfd-intro-pending .vfd-startup {
  opacity: 1;
  pointer-events: auto;
}

html.vfd-intro-pending .vfd-startup__display {
  visibility: hidden;
}

.vfd-startup[hidden] {
  display: none;
}

.vfd-startup.is-active {
  opacity: 1;
  pointer-events: auto;
}

.vfd-startup.is-finishing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 950ms ease-out;
}

.vfd-startup__display {
  position: absolute;
  top: var(--startup-logo-top, 50%);
  left: var(--startup-logo-left, 50%);
  width: var(--startup-logo-width, min(540px, 92vw));
  height: var(--startup-logo-height, auto);
  transform: var(--startup-logo-fallback, translate(-50%, -50%));
}

.vfd-startup__frame {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.vfd-startup__logo {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: brightness(0.1) contrast(1.15) saturate(0.35);
}

.vfd-startup__logo--off {
  opacity: 0.16;
  filter: brightness(0.22) contrast(1.45) saturate(0.12) blur(0.25px);
  clip-path: inset(0 0 26% 0);
}

.vfd-startup__logo--partial-a {
  clip-path: inset(29% 4% 35% 3%);
}

.vfd-startup__logo--partial-b {
  clip-path: inset(5% 0 54% 0);
}

.vfd-startup__logo--mark {
  clip-path: inset(0 0 26% 0);
}

.vfd-startup__logo--text {
  clip-path: inset(74% calc(100% - var(--text-reveal-edge, 24%)) 19% 24%);
}

.vfd-startup__logo--lit {
  clip-path: inset(0 0 26% 0);
}

.vfd-startup__cursor {
  position: absolute;
  top: 84.2%;
  left: calc(var(--cursor-edge, 25%) + 0.35%);
  width: 1.25%;
  height: 6.2%;
  background: #9cc8c2;
  opacity: 0;
  filter: blur(0.25px);
}

.vfd-startup__heaters {
  position: absolute;
  inset: 15% 6% 20%;
  opacity: 0;
}

.vfd-startup__heaters span {
  position: absolute;
  left: 3%;
  width: 94%;
  border-top: 1px solid #657b7f;
  opacity: 0.22;
}

.vfd-startup__heaters span:nth-child(1) {
  top: 29%;
}

.vfd-startup__heaters span:nth-child(2) {
  top: 51%;
}

.vfd-startup__heaters span:nth-child(3) {
  top: 72%;
}

.vfd-startup__skip {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--color-caption);
  border-radius: 999px;
  background: rgb(1 1 0 / 82%);
  color: var(--color-text);
  font: inherit;
  font-size: 1.03125rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
}

.vfd-startup__skip:hover {
  color: var(--color-text);
  border-color: var(--color-text);
  background: rgb(184 221 215 / 6%);
}

.vfd-startup__skip:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 4px;
}

.vfd-startup.state-off .vfd-startup__logo--off {
  opacity: 0.18;
}

.vfd-startup.state-black-hold .vfd-startup__logo,
.vfd-startup.state-black-hold .vfd-startup__heaters,
.vfd-startup.state-black-hold .vfd-startup__cursor {
  opacity: 0;
}

.vfd-startup.state-heater .vfd-startup__heaters {
  opacity: 0.78;
}

.vfd-startup.state-faint-ghost .vfd-startup__logo--lit {
  opacity: 0.22;
  filter: brightness(0.42) contrast(1.4) saturate(0.45) blur(0.65px);
}

.vfd-startup.state-strike-1 .vfd-startup__logo--lit {
  opacity: 0.52;
  filter: brightness(0.78) contrast(1.25) saturate(0.72) blur(0.35px);
}

.vfd-startup.state-dropout .vfd-startup__logo--off,
.vfd-startup.state-short-dropout .vfd-startup__logo--off {
  opacity: 0.035;
  filter: brightness(0.08) contrast(1.25) saturate(0);
}

.vfd-startup.state-strike-2 .vfd-startup__logo--partial-a {
  opacity: 0.72;
  filter: brightness(0.95) contrast(1.2) saturate(0.9) blur(0.2px);
}

.vfd-startup.state-partial .vfd-startup__logo--partial-a {
  opacity: 1;
  filter: brightness(1.12) contrast(1.15) saturate(1.05);
}

.vfd-startup.state-partial .vfd-startup__logo--partial-b {
  opacity: 0.38;
  filter: brightness(0.58) contrast(1.25) saturate(0.6) blur(0.4px);
}

.vfd-startup.state-ignite .vfd-startup__logo--lit {
  opacity: 1;
  filter: none;
}

.vfd-startup.state-flutter .vfd-startup__logo--lit {
  opacity: 0.9;
  filter: brightness(0.95);
}

.vfd-startup.state-stable .vfd-startup__logo--lit {
  opacity: 0;
}

.vfd-startup.state-stable .vfd-startup__logo--off,
.vfd-startup.is-text-phase .vfd-startup__logo--off,
.vfd-startup.is-text-phase .vfd-startup__logo--partial-a,
.vfd-startup.is-text-phase .vfd-startup__logo--partial-b,
.vfd-startup.is-text-phase .vfd-startup__logo--lit {
  opacity: 0;
}

.vfd-startup.state-stable .vfd-startup__logo--mark,
.vfd-startup.is-text-phase .vfd-startup__logo--mark,
.vfd-startup.is-text-phase .vfd-startup__logo--text {
  opacity: 1;
  filter: none;
}

.vfd-startup.is-text-phase .vfd-startup__cursor.is-visible {
  opacity: 0.88;
}

.vfd-startup.state-power-pop .vfd-startup__logo--lit {
  opacity: 0.3;
  filter: none;
}

.vfd-startup.state-blackout .vfd-startup__logo--off {
  opacity: 0.02;
  filter: brightness(0.04) saturate(0);
}

.vfd-startup.state-blackout .vfd-startup__logo--lit,
.vfd-startup.state-blackout .vfd-startup__logo--partial-a,
.vfd-startup.state-blackout .vfd-startup__logo--partial-b,
.vfd-startup.state-blackout .vfd-startup__logo--mark,
.vfd-startup.state-blackout .vfd-startup__logo--text,
.vfd-startup.state-blackout .vfd-startup__heaters {
  opacity: 0;
}

.vfd-startup.state-partial-2 .vfd-startup__logo--partial-a {
  opacity: 0.82;
  filter: brightness(1.02) contrast(1.18) saturate(0.9);
}

.vfd-startup.state-partial-2 .vfd-startup__logo--partial-b {
  opacity: 0.58;
  filter: brightness(0.72) contrast(1.2) saturate(0.7);
}

.vfd-startup.state-collapse-line .vfd-startup__display {
  transform: scaleY(0.006);
  transform-origin: center;
  transition: transform 135ms cubic-bezier(0.55, 0, 1, 0.55);
}

.vfd-startup.state-collapse-dot .vfd-startup__display,
.vfd-startup.state-dot-hold .vfd-startup__display,
.vfd-startup.state-dot-out .vfd-startup__display {
  transform: scale(0.008, 0.006);
  transform-origin: center;
}

.vfd-startup.state-collapse-dot .vfd-startup__display {
  transition: transform 105ms ease-in;
}

.vfd-startup.state-dot-out .vfd-startup__display {
  opacity: 0;
  transition: opacity 90ms ease-out;
}

.vfd-startup.state-shutdown-black .vfd-startup__display {
  opacity: 0;
}