/* ==========================================================================
   Frankenstein — Hero Section
   Grid layer, arrival choreography, stamp mark
   ========================================================================== */

/* ------- Grid layer (SVG, full-bleed) ------- */
.hero-grid-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-grid-layer svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-grid-layer .grid-line {
  stroke: rgba(232, 228, 220, 1);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  fill: none;
  opacity: 0.10;
}

/* Lines hidden by default, revealed via JS stroke-dashoffset animation.
   Composed state clears any leftover dash so lines stay visible. */
#hero.composed .hero-grid-layer .grid-line {
  stroke-dashoffset: 0;
  stroke-dasharray: none;
}

.hero-grid-layer .grid-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  fill: rgba(232, 228, 220, 1);
  letter-spacing: 0.04em;
  opacity: 0;
}

#hero.composed .hero-grid-layer .grid-label {
  opacity: 0.15;
}

/* ------- Hero content ------- */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  min-height: calc(100vh - 280px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mark — top-left, circle stamp */
.hero-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  opacity: 1;
  transition: opacity 400ms linear;
}
/* JS adds .hero-loading to hide elements before arrival animation */
.hero-loading .hero-mark { opacity: 0; }

.hero-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Copy block */
.hero-copy {
  position: relative;
  max-width: 640px;
  margin: 0;
  padding-top: 88px;
  width: 100%;
}

.hero-h1 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--color-text);
  margin: 0 0 36px 0;
  text-wrap: balance;
  opacity: 1;
  transition: opacity 300ms linear;
}
.hero-loading .hero-h1 { opacity: 0; }

.hero-subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: rgba(232, 228, 220, 0.72);
  max-width: 560px;
  margin: 0;
  opacity: 1;
  transition: opacity 300ms linear;
}
.hero-loading .hero-subhead { opacity: 0; }

.hero-subhead .line {
  display: block;
}

/* ------- Scroll cue ------- */
.hero .scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(232, 228, 220, 0.40);
  opacity: 1;
  transition: opacity 400ms linear;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  animation: none;
}
.hero-loading .scroll-cue { opacity: 0; }

.hero .scroll-cue svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero .scroll-cue:hover {
  color: rgba(232, 228, 220, 0.72);
}

.hero .scroll-cue::after {
  display: none;
}

/* ------- Arrival state gates ------- */
#hero.hero-loading.mark-in .hero-mark { opacity: 1; }
#hero.hero-loading.h1-in .hero-h1 { opacity: 1; }
#hero.hero-loading.sub-in .hero-subhead { opacity: 1; }
#hero.hero-loading.cue-in .scroll-cue { opacity: 1; }

/* ------- Hero consciousness filler (desktop only) ------- */
.hero-anim-wrap {
  display: none;
}

@media (min-width: 768px) {
  .hero-stage {
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 64px;
  }
  .hero-copy {
    flex: 0 1 560px;
    min-width: 0;
  }
  .hero-anim-wrap {
    display: block;
    flex: 0 0 320px;
    max-width: 320px;
  }
  .hero-anim-wrap .stage-mobile {
    aspect-ratio: 4 / 5;
    max-width: 100%;
    opacity: 0.85;
  }
}

@media (min-width: 1024px) {
  .hero-copy {
    flex: 0 1 640px;
  }
  .hero-anim-wrap {
    flex: 0 0 380px;
    max-width: 380px;
  }
}

/* ------- Responsive ------- */
@media (max-width: 1023px) {
  .hero.section { padding: 128px 54px 112px; }
  .hero-mark { width: 52px; height: 52px; }
}

@media (max-width: 767px) {
  .hero.section { padding: 112px 24px 96px; }
  .hero-mark { width: 48px; height: 48px; }
  .hero-h1 { font-size: clamp(34px, 9vw, 46px); margin-bottom: 28px; }
  .hero-subhead { font-size: 16px; }
}

@media (max-width: 479px) {
  .hero.section { padding: 104px 20px 88px; }
  .hero-mark { width: 44px; height: 44px; }
  .hero-h1 { font-size: clamp(30px, 9.5vw, 40px); }
}

/* Reduced motion: render in held state immediately */
@media (prefers-reduced-motion: reduce) {
  .hero-mark,
  .hero-h1,
  .hero-subhead,
  .hero .scroll-cue {
    opacity: 1 !important;
    transition: none !important;
  }
  .hero-grid-layer .grid-line { opacity: 0.10 !important; }
  .hero-grid-layer .grid-label { opacity: 0.15 !important; }
}