/* =============================================================
   Dr. Ecem Ergün — Motion Layer (Phase 2.4)
   Editorial cinematic enhancement: Lenis + GSAP scroll reveals.
   Tokens, initial-states, and rule/line draw choreography only —
   no design-system changes (palette/font/spacing locked).
   ============================================================= */

:root {
  /* Emil Kowalski easing curves (cubic-beziers) */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drawer:      cubic-bezier(0.32, 0.72, 0, 1);

  /* Timing scale */
  --motion-instant:   120ms;
  --motion-fast:      200ms;
  --motion-base:      400ms;
  --motion-slow:      700ms;
  --motion-cinematic: 1000ms;

  /* Stagger increments */
  --stagger-tight:    80ms;
  --stagger-base:     120ms;
  --stagger-relaxed:  180ms;
}

/* -- Pre-reveal initial states ------------------------------------
   Applied to elements before GSAP/Lenis attaches. Prevents FOUC where
   motion.js targets exist but the GSAP timeline hasn't started yet.
   Removed by JS via .reveal-ready (sets opacity:1 instantly) if the
   reduced-motion query matches OR motion.js fails to load. */
.js-motion-ready [data-reveal-init] {
  opacity: 0;
}

/* -- Pull-quote gold rule (motion.js injects this element) -------- */
.mission-rule {
  display: block;
  width: 64px;
  height: 1.5px;
  margin: 0 auto 1.75rem;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
}
.mission-section .mission-rule {
  /* Center the rule visually within the centered mission-section */
  transform-origin: center;
}

/* -- Ladder connecting-line animation hook -----------------------
   The ladder uses .ladder::before for the horizontal sage line.
   Default state is scaleX(1) (already drawn). When motion.js adds
   .ladder--anim, the pseudo starts at scaleX(0) and transitions on
   .ladder--draw. Keeps non-JS users with a fully drawn line. */
@media (min-width: 900px) {
  .ladder.ladder--anim::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-slow) var(--ease-out-expo);
  }
  .ladder.ladder--anim.ladder--draw::before {
    transform: scaleX(1);
  }
}

/* -- SplitText line wrappers -------------------------------------
   GSAP's SplitText adds .split-line divs; each line is its own
   block so the staggered y/opacity transitions look clean. */
.split-line {
  overflow: hidden;
  display: block;
}

/* -- Reduced-motion override -------------------------------------
   Disables transforms but keeps opacity transitions for orientation.
   Layered on top of main.css's reduced-motion block (which already
   zeros transition-duration globally). */
@media (prefers-reduced-motion: reduce) {
  .js-motion-ready [data-reveal-init] {
    opacity: 1 !important;
    transform: none !important;
  }
  .ladder.ladder--anim::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .mission-rule {
    transform: scaleX(1) !important;
  }
}

/* =============================================================
   Phase 2.5 — Hero ambient motion + h1 underline
   ============================================================= */

/* -- C.1 — H1 gold hairline underline ---------------------------
   Injected by motion.js. Default width 0; animated to 6rem on
   hero reveal. Under reduced-motion, shown static at full width. */
@keyframes hpH1UnderlineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.h1-underline {
  display: block;
  height: 1px;
  width: 6rem;
  margin-top: 0.75rem;
  background-color: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
  animation-name: hpH1UnderlineDraw;
  animation-duration: 600ms;
  animation-timing-function: var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  animation-delay: 850ms;
  animation-fill-mode: forwards;
  pointer-events: none;
}

/* -- C.3 — Ken Burns slow drift on portrait ---------------------- */
@keyframes hpKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
[data-hero-portrait] .portrait-media {
  will-change: transform;
  animation: hpKenBurns 20s ease-in-out infinite alternate;
}

/* -- C.4 — Background botanical sketch slow opacity drift -------- */
@keyframes hpSketchBreath {
  from { opacity: 0.10; }
  to   { opacity: 0.18; }
}
[data-hero-bg-sketch] {
  will-change: opacity;
  animation: hpSketchBreath 30s ease-in-out infinite alternate;
}

/* Mobile — skip Ken Burns (battery + perf); keep sketch breath. */
@media (max-width: 767px) {
  [data-hero-portrait] .portrait-media {
    animation: none;
  }
}

/* Reduced-motion — show static states, no movement. */
@media (prefers-reduced-motion: reduce) {
  .h1-underline {
    transform: scaleX(1) !important;
  }
  [data-hero-portrait] .portrait-media {
    animation: none !important;
  }
  [data-hero-bg-sketch] {
    animation: none !important;
    opacity: 0.14 !important;
  }
}

/* =============================================================
   Phase 2.6 (ayrı session) — Ambient botanicals
   Hero'nun "nefes alan" botanik hissini site geneline yayar.
   motion.js initAmbientBotanicals() runtime'da enjekte eder;
   bu blok yalnız keyframe + initial-state tanımlar. MASTER §7
   (Fleurs du Marché tek-çizgi sage), §5/§10 (yalnız transform/
   opacity, layout-shift yok). Hero davranışına dokunmaz.
   ============================================================= */

/* Opacity "breath" — hero sketch'inden daha düşük bant (0.06–0.10). */
@keyframes hpAmbientBreath {
  from { opacity: 0.06; }
  to   { opacity: 0.10; }
}
/* Çok hafif konumsal drift (≤8px) — yalnız transform, döngü başa döner. */
@keyframes hpAmbientDrift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-5px, 6px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.ambient-botanical {
  position: absolute;
  z-index: 0;                 /* içeriğin arkasında (MASTER §7) */
  pointer-events: none;       /* tıklamayı engellemez */
  width: var(--ab-w, 200px);
  line-height: 0;
  opacity: 0.08;              /* statik fallback (reduced-motion / no-JS-anim) */
}
.ambient-botanical img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobil — drift'i (ağır transform animasyonu) atla; yalnız hafif opacity
   nefesi kalır (mevcut hero sketch'in mobilde korunması deseniyle uyumlu).
   Asset de küçülür ki dar ekranda baskın durmasın. */
@media (prefers-reduced-motion: no-preference) {
  .ambient-botanical {
    will-change: opacity;
    animation: hpAmbientBreath var(--ab-breath, 24s) var(--ease-in-out-soft) infinite alternate;
    animation-delay: var(--ab-delay, 0s);
  }
}
@media (max-width: 767px) {
  .ambient-botanical {
    width: calc(var(--ab-w, 200px) * 0.62);
  }
}

/* Masaüstü — opacity nefesi + konumsal drift birlikte; ölçülü will-change. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .ambient-botanical {
    will-change: opacity, transform;
    animation:
      hpAmbientBreath var(--ab-breath, 24s) var(--ease-in-out-soft) infinite alternate,
      hpAmbientDrift  var(--ab-drift, 28s)  var(--ease-in-out-soft) infinite;
    animation-delay: var(--ab-delay, 0s), var(--ab-delay, 0s);
  }
}

/* Reduced-motion — tüm hareket durur, asset statik düşük opacity'de görünür. */
@media (prefers-reduced-motion: reduce) {
  .ambient-botanical {
    animation: none !important;
    will-change: auto;
    opacity: 0.07 !important;
  }
}

/* =============================================================
   Phase 4 — ReactBits-uyarlama hareketler (v1.8)
   Yalnız vanilla CSS/JS port; React/WebGL YOK. MASTER §5/§10
   (yalnız transform/opacity, gradient-text yok). motion.js init'ler:
     • initScrollWordReveal  → .wr-word
     • initBandFrameDraw     → .cta-frame
   Blur-in tamamen JS-driven (GSAP filter tween), CSS gerektirmez.
   ============================================================= */

/* -- Scroll word-reveal — kelime sarmalayıcı --------------------
   SplitText her kelimeyi .wr-word'e sarar. inline-block ki opacity
   bağımsız çalışsın; satır kaydırmayı bozmasın diye boşluk korunur. */
.wr-word {
  display: inline-block;
  will-change: opacity;
}

/* -- CTA band gold hairline frame draw -------------------------- */
.cta-frame {
  position: absolute;
  inset: 10px;                 /* band kenarından içeri çekili çerçeve */
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 0;                  /* içerik .cta-strip içinde üstte kalır */
  overflow: visible;
}
.cta-frame rect {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;  /* her boyutta 1.5px net */
  stroke-dasharray: 1;                /* pathLength=1 normalize */
  stroke-dashoffset: 1;               /* başlangıç: çizilmemiş */
  opacity: 0.5;                       /* hairline — baskın değil */
}
/* .cta-strip içeriğini hairline'ın üstünde tut (frame z-index:0). */
.cta-strip > *:not(.cta-frame) { position: relative; z-index: 1; }

/* Reduced-motion — çerçeve statik tam çizili, kelimeler tam opak.
   (motion.js erken return ettiği için enjeksiyon olmaz; bu blok
   yine de no-JS/parça-yükleme senaryolarında güvenli durum verir.) */
@media (prefers-reduced-motion: reduce) {
  .cta-frame rect { stroke-dashoffset: 0; }
  .wr-word { opacity: 1 !important; }
}

/* =============================================================
   Phase 5 — Konu hero emblem ikonu (motion.js initHeroTopicIcon)
   Masthead: breadcrumb · [44px emblem] · kategori çipi · h1.
   Sage tek-çizgi (asset zaten sage). İçerik — reduced-motion'da da
   görünür. will-change yok; statik.
   ============================================================= */
.hero-topic-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 0.9rem;
  opacity: 0.95;
}
/* Masaüstünde hafif yumuşak giriş (içeriği geciktirmez; tek sefer). */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .hero-topic-icon {
    animation: hpHeroIconIn 600ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
  }
}
@keyframes hpHeroIconIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.95; transform: translateY(0); }
}