/* ═══════════════════════════════════════════════════════════
   KÜLFET — Motion katmanı
   Başlangıç durumları yalnızca html.motion altında uygulanır:
   JS/GSAP yüklenmezse veya hareket azaltma açıksa içerik statik ve tam görünür.
   ═══════════════════════════════════════════════════════════ */

/* ───── Scroll progress (1px) ───── */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 1px; z-index: 60; pointer-events: none; }
.scroll-progress span {
  display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ───── Film greni — statik doku, sadece derinlik için ───── */
.grain {
  position: fixed; inset: -50%; z-index: 55; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───── Split text yapı taşları ───── */
.split-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .04em .16em; margin: -.14em -.04em -.16em; }
.split-word, .split-char, .split-line { display: inline-block; will-change: transform; }
.split-line-wrap { display: block; overflow: hidden; padding: .14em 0 .16em; margin: -.14em 0 -.16em; }

/* ───── Açılış perdesi — yalnızca motion açıkken var olur; JS gelmezse hiç çizilmez ───── */
.intro {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  background: var(--color-background);
  clip-path: inset(0 0 0 0);
}
.motion .intro { display: grid; }
.intro__inner { display: grid; justify-items: center; gap: clamp(1rem, 2.5vw, 1.5rem); padding: var(--gutter); }
.intro__word {
  font-family: var(--font-display); font-weight: 500; line-height: 1;
  font-size: clamp(2.75rem, 2rem + 4.5vw, 5.75rem);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-text);
  visibility: hidden;
}
.intro__word i { font-style: italic; text-transform: none; color: var(--color-chrome); margin-inline: .02em .06em; }
.intro__line { width: min(56vw, 220px); height: 1px; background: var(--color-line); overflow: hidden; }
.intro__line i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0); transform-origin: 0 50%;
}
.intro__meta {
  font-size: .6875rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--color-muted); visibility: hidden;
}

/* ───── İlk kare durumları (motion açıkken) ───── */
.motion .hero__logo,
.motion .hero__kicker,
.motion .hero__tagline,
.motion .hero__signature > li,
.motion .hero__ctas > *,
.motion .hero__foot,
.motion .scroll-cue,
.motion [data-reveal],
.motion [data-split] { visibility: hidden; }
.motion .hero__backdrop { opacity: 0; }
.motion .hero__rule path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .site-header .header-inner { opacity: 0; }
.motion.motion-ready .site-header .header-inner { opacity: 1; transition: opacity 600ms var(--ease-out) 700ms; }

/* Kart girişleri — WAAPI ile oynatılır */
.dish, .chapter { will-change: auto; }

/* ───── Custom cursor (yalnızca hassas işaretçi) ───── */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor .dish { cursor: none; }
  .has-cursor input, .has-cursor textarea { cursor: auto; }
  .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; }
  .cursor__dot, .cursor__ring {
    position: absolute; left: 0; top: 0; border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor__dot { width: 6px; height: 6px; background: var(--color-accent); transition: opacity 200ms; }
  .cursor__ring {
    width: 34px; height: 34px;
    box-shadow: inset 0 0 0 1px rgba(242, 235, 225, .35);
    display: grid; place-items: center;
    transition: width 420ms var(--ease-out), height 420ms var(--ease-out),
                background-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  }
  .cursor__label {
    font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-on-primary);
    opacity: 0; transform: scale(.6); transition: opacity 240ms, transform 420ms var(--ease-out);
    white-space: nowrap;
  }
  .cursor.is-hover .cursor__ring { width: 56px; height: 56px; box-shadow: inset 0 0 0 1px rgba(224, 86, 28, .7); }
  .cursor.is-label .cursor__ring { width: 88px; height: 88px; background: var(--color-primary); box-shadow: none; }
  .cursor.is-label .cursor__label { opacity: 1; transform: none; }
  .cursor.is-label .cursor__dot, .cursor.is-hover .cursor__dot { opacity: 0; }
  .cursor.is-down .cursor__ring { width: 26px; height: 26px; }
  .cursor.is-hidden { opacity: 0; }
}

/* ───── Hareket azaltma: her şey görünür, sürekli animasyonlar durur ───── */
@media (prefers-reduced-motion: reduce) {
  .hero__light, .scroll-cue__line::after, .hero__backdrop img { animation: none; }
  .hero__embers, .grain, .intro { display: none !important; }
}

/* ScrollTrigger ölçümleri anlık scroll ister: CSS smooth scroll motion açıkken kapalı.
   Yumuşak anchor kaydırması motion.js tarafından yapılır. */
html.motion, html.motion-ready { scroll-behavior: auto; }