/* =====================================================================
   STORY ROAD™ — HERO
   animations.css · M1 reveal · M2 veil · ken-burns · reduced-motion

   Yalnızca transform, opacity ve clip-path animasyonlanır.
   Animasyonlar VARSAYILAN olarak çalışır: JS çalışmasa dahi
   hero eksiksiz görünür. JS yalnızca görsel çözülene kadar
   perdeyi duraklatır (html.is-holding).
   ===================================================================== */

/* ── Perde açılışı ─────────────────────────────────────────────────── */
.plate{
  animation:plate-open 2000ms var(--ease-out-expo) both;
  will-change:transform,opacity;
}

/* M2 — veil: satır satır açılım */
.v{
  animation:veil 1150ms var(--ease-out-expo) both;
  animation-delay:calc(620ms + var(--v) * 115ms);
}

/* M1 — reveal */
.strip   { animation:reveal 950ms var(--ease-lux) both; animation-delay:1420ms }
.footbar { animation:reveal 950ms var(--ease-lux) both; animation-delay:1560ms }
.masthead__inner{ animation:reveal 950ms var(--ease-lux) both; animation-delay:1700ms }

/* Ken-burns — 26 sn, tek yön, döngüsüz */
.plate__media img{
  animation:ken-burns 26000ms linear both;
  animation-delay:900ms;
}

/* Scroll cue */
.cue span{
  animation:cue 2600ms var(--ease-lux) 2200ms infinite;
}

/* ── Perde tutucu: görsel çözülene kadar (en fazla 1300ms) ─────────── */
.is-holding .plate,
.is-holding .v,
.is-holding .strip,
.is-holding .footbar,
.is-holding .masthead__inner,
.is-holding .plate__media img,
.is-holding .cue span{
  animation-play-state:paused;
}

/* ── Keyframes ─────────────────────────────────────────────────────── */
@keyframes plate-open{
  from{opacity:0;transform:scale(1.035)}
  to  {opacity:1;transform:scale(1)}
}

@keyframes veil{
  from{opacity:0;transform:translateY(20px);clip-path:inset(0 0 102% 0)}
  to  {opacity:1;transform:none;clip-path:inset(0 0 -22% 0)}
}

@keyframes reveal{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}

@keyframes ken-burns{
  from{transform:scale(1.02)}
  to  {transform:scale(1.085)}
}

@keyframes cue{
  0%  {transform:translateY(-16px);opacity:0}
  22% {opacity:1}
  74% {opacity:1}
  100%{transform:translateY(46px);opacity:0}
}

/* ── Erişilebilirlik: hareket azaltma ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  .plate,.v,.strip,.footbar,.masthead__inner,.plate__media img,.cue span{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
  .plate__media img{transform:scale(1.02) !important}
  .cue span{transform:translateY(16px) !important}

  *,*::before,*::after{transition-duration:1ms !important}
}

/* =====================================================================
   SECTIONS II–VI — kaydırma ile açılan bölümler

   Başlangıç durumu YALNIZCA html.has-js varken uygulanır.
   JavaScript çalışmazsa hiçbir içerik opacity:0'da kalmaz.
   ===================================================================== */

.has-js .r{
  opacity:0;
  transform:translateY(18px);
}
.has-js .r.is-visible{
  animation:reveal 900ms var(--ease-lux) both;
  animation-delay:calc(var(--r, 0) * 90ms);
}

/* Teknik çizim tamamlanıyor hissi — gösterge amaçlı proje aksı */
.has-js .survey__axis-line{
  stroke-dasharray:var(--len, 200);
  stroke-dashoffset:var(--len, 200);
}
.has-js .survey__plate.is-drawn .survey__axis-line{
  animation:draw-axis 2600ms cubic-bezier(.5,0,.2,1) 260ms forwards;
}
.has-js .survey__axis-label{opacity:0;transition:opacity 800ms var(--ease-lux) 2200ms}
.has-js .survey__plate.is-drawn .survey__axis-label{opacity:1}

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

/* ── Erişilebilirlik: hareket azaltma ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .has-js .r,
  .has-js .r.is-visible{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .has-js .survey__axis-line{
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
    animation:none !important;
  }
  .has-js .survey__axis-label{opacity:1 !important;transition:none !important}
}