:root {
  --black: #000;
  --white: #f7f7f2;
  --soft: rgba(247, 247, 242, 0.62);
  --ghost: rgba(247, 247, 242, 0.14);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #000;
  scroll-behavior: smooth;
}

body {
  min-height: 180vh;
  margin: 0;
  background: #000;
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.075), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 34%, transparent 68%, rgba(255,255,255,0.035));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.055;
  mix-blend-mode: screen;
}

.teaser {
  position: relative;
  min-height: 180vh;
  isolation: isolate;
}

.silhouette-section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(22px, 4vw, 56px);
  overflow: hidden;
}

.mark {
  margin: 0;
  color: rgba(247, 247, 242, 0.54);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  z-index: 3;
}

.stage {
  position: relative;
  align-self: center;
  min-height: min(56vh, 560px);
  display: grid;
  place-items: center;
}

.line-wrap {
  width: min(1180px, 94vw);
  margin: 0 auto;
  transform: translateY(-2vh);
}

.line-wrap svg {
  width: 100%;
  display: block;
  overflow: visible;
}

.body-line,
.aero-line {
  fill: none;
  stroke: var(--white);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.34)) drop-shadow(0 0 30px rgba(255,255,255,0.16));
}

.body-line {
  stroke-width: 5;
  opacity: 0.96;
  stroke-dasharray: 1550;
  stroke-dashoffset: 1550;
  animation: draw 2.6s ease-out forwards 0.25s;
}

.aero-line {
  stroke-width: 3;
  opacity: 0.5;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: draw 1.8s ease-out forwards 1.15s;
}

.overlay-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(860px, 92vw);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 52px));
  filter: blur(12px);
  will-change: opacity, transform, filter;
  z-index: 2;
  pointer-events: none;
}

.overlay-copy::before {
  content: "";
  position: absolute;
  inset: -50px -70px;
  z-index: -1;
  background: radial-gradient(circle at center, rgba(0,0,0,0.82), rgba(0,0,0,0.44) 45%, transparent 72%);
  opacity: 0.85;
}

.scroll-cue {
  justify-self: center;
  margin: 0 0 4px;
  color: rgba(247, 247, 242, 0.38);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  animation: pulse 2.2s ease-in-out infinite;
}

.overline {
  margin: 0 0 16px;
  color: var(--soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(3.2rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.075em;
  font-weight: 500;
}

.hint {
  max-width: 720px;
  margin: 24px auto 0;
  color: rgba(247, 247, 242, 0.58);
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.55;
}

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

@keyframes pulse {
  0%, 100% { opacity: 0.28; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .body-line,
  .aero-line,
  .scroll-cue {
    animation: none;
  }
  .body-line,
  .aero-line { stroke-dashoffset: 0; }
  .overlay-copy { opacity: 1; transform: translate(-50%, -50%); filter: none; }
}

@media (max-width: 760px) {
  body,
  .teaser { min-height: 170vh; }
  .silhouette-section { min-height: 100svh; padding: 24px; }
  .stage { min-height: 58vh; }
  .line-wrap { width: 116vw; margin-left: -8vw; }
  .body-line { stroke-width: 6; }
  .overlay-copy::before { inset: -36px -28px; }
}