/* =========================================================
   Home (DE) cinematic hero: pinned, scroll-scrubbed frames
   Iran -> Ankunft -> Station. Loaded on index.html only.
   Static (frame 3, no pin) below 768px, on short viewports
   and with prefers-reduced-motion. No library.
   ========================================================= */

.hero-pin { position: relative; }
.hero-pin__track { display: none; }

/* Frames */
.hero-pin .hero__bg { overflow: hidden; background: var(--ink); }
.hero-frame {
  position: absolute;
  inset: -12px 0;            /* room for the <=10px parallax, no gaps */
  opacity: 0;
  will-change: opacity, transform;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
}
.hero-frame--3 { opacity: 1; } /* static default = frame 3 (Station) */

/* Neutral placeholders until the photos exist (see assets/images/hero/README.md) */
.hero-frame--1 {               /* dawn, warm */
  background-image:
    radial-gradient(55% 45% at 72% 74%, rgba(236, 176, 116, 0.55) 0%, rgba(236, 176, 116, 0) 70%),
    linear-gradient(180deg, #1c2332 0%, #3f3a4a 34%, #8d6655 68%, #d3a079 100%);
}
.hero-frame--2 {               /* transit, cool */
  background-image:
    radial-gradient(65% 45% at 76% 28%, rgba(176, 206, 226, 0.28) 0%, rgba(176, 206, 226, 0) 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px 140px),
    linear-gradient(180deg, #111a25 0%, #263949 52%, #587083 100%);
}
.hero-frame--3 {               /* daylight, clinical */
  background-image:
    radial-gradient(60% 60% at 80% 18%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #8ea3ae 0%, #c3d1d7 55%, #e6ecec 100%);
}

/* Real photos (only inserted by hero-scrub.js when data-hero-photos="true") */
.hero-pin .hero-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: none;
  transform: none;
  animation: none;
}

/* Overlay: keeps the headline readable on all three frames */
.hero-pin .hero__overlay {
  background:
    linear-gradient(90deg, rgba(14, 22, 32, 0.95) 0%, rgba(14, 22, 32, 0.82) 45%, rgba(14, 22, 32, 0.45) 100%),
    linear-gradient(0deg, rgba(14, 22, 32, 0.9) 0%, rgba(14, 22, 32, 0) 50%);
}

/* Progress label (Iran -> Ankunft -> Station) */
.hero-progress { display: none; }

@media (min-width: 768px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .hero-pin__track { display: block; height: 200vh; }
  .hero-pin .hero {
    position: sticky;
    top: var(--hero-pin-top, 0px);
    min-height: 100vh;
    padding: calc(var(--header-height) + 3vh) 0 4vh;
  }
  .hero-pin .hero-frame--1 { opacity: 1; }
  .hero-pin .hero-frame--3 { opacity: 0; }

  /* Fit the unchanged hero content into one viewport while pinned */
  .hero-pin .hero__badge { margin-bottom: min(1.75rem, 2.6vh); }
  .hero-pin .hero h1 { font-size: min(clamp(2.9rem, 6.4vw, 5.6rem), 9vh); margin-bottom: min(1.75rem, 2.6vh); }
  .hero-pin .hero__text { margin-bottom: min(2.5rem, 3.5vh); }
  .hero-pin .hero__stats { margin-top: min(clamp(3.5rem, 7vw, 6rem), 5vh); }
  .hero-pin .hero__stats > div { padding-top: min(1.75rem, 2.4vh); }

  .hero-progress {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    position: absolute;
    z-index: 1;
    inset-inline-end: max(2rem, calc((100vw - 1440px) / 2 + 2rem));
    top: 50%;
    transform: translateY(-50%);
    padding-inline-start: 1.1rem;
    margin: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.45);
    pointer-events: none;
  }
  .hero-progress::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 1px;
    background: rgba(244, 239, 230, 0.22);
  }
  .hero-progress__bar {
    position: absolute;
    inset-inline-start: 0;
    top: 0.2rem;
    width: 1px;
    height: calc((100% - 0.4rem) * var(--hero-p, 0));
    background: var(--gold);
  }
  .hero-progress__step { transition: color 0.3s ease; }
  .hero-progress__step.is-active { color: var(--paper); }
}
@media (min-width: 768px) and (max-width: 1099px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .hero-progress { top: calc(var(--header-height) + 1.5rem - var(--hero-pin-top, 0px)); transform: none; }
}