/* ============================================================
   KIRK KAT — LEDGER ATMOSPHERE LAYER
   Theme-specific, page-of-a-bound-notebook animations.
   Every entrance state is gated behind `html.ledger-anim`
   (added by ledger-atmos.js only when motion is allowed), so
   with no JS / reduced-motion the content is fully visible.
   ============================================================ */

/* ---- paper grain: a faint ruled-notebook tint on light sections ---- */
html.ledger-anim .defter,
html.ledger-anim .fiyat,
html.ledger-anim .about-lead,
html.ledger-anim .contact-hero {
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 38px,
      rgba(62,107,58,.05) 38px 39px);
}

/* ============================================================
   A. HEADING INK UNDERLINE — writes itself L→R, + pistachio glow
   ============================================================ */
html.ledger-anim .la-underline {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
html.ledger-anim .la-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.16em;
  height: 3px;
  width: clamp(46px, 42%, 170px);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .85s var(--ease) .12s;
  pointer-events: none;
}
html.ledger-anim .la-underline.la-drawn::after { transform: scaleX(1); }
/* one-time pistachio "accent sweep" glow on the words themselves */
@keyframes laInkGlow {
  0%   { text-shadow: 0 0 0 rgba(62,107,58,0); }
  38%  { text-shadow: 0 .02em .4em rgba(62,107,58,.30); }
  100% { text-shadow: 0 0 0 rgba(62,107,58,0); }
}
html.ledger-anim .la-underline.la-drawn { animation: laInkGlow 1.25s var(--ease) .12s 1; }
/* dark-ground headings: warmer glow so it reads */
html.ledger-anim .manifesto .la-underline.la-drawn,
html.ledger-anim .harman .la-underline.la-drawn,
html.ledger-anim .refs .la-underline.la-drawn,
html.ledger-anim .cta-band .la-underline.la-drawn,
html.ledger-anim .doc-hero .la-underline.la-drawn {
  animation-name: laInkGlowGold;
}
@keyframes laInkGlowGold {
  0%   { text-shadow: 0 0 0 rgba(230,197,110,0); }
  38%  { text-shadow: 0 .02em .5em rgba(230,197,110,.34); }
  100% { text-shadow: 0 0 0 rgba(230,197,110,0); }
}

/* ============================================================
   B. EYEBROW LEDGER-RULE — a short ink line draws beside the kicker
   ============================================================ */
html.ledger-anim .eyebrow.la-rule::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  margin-left: .7em;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--accent2) 0%, transparent 100%);
  transition: width .7s var(--ease) .18s;
}
html.ledger-anim .eyebrow.la-rule.la-ruled::after { width: 2.6em; }
html.ledger-anim .manifesto .eyebrow.la-rule::after,
html.ledger-anim .harman .eyebrow.la-rule::after,
html.ledger-anim .refs .eyebrow.la-rule::after,
html.ledger-anim .doc-hero .eyebrow.la-rule::after {
  background: linear-gradient(90deg, #E6C56E 0%, transparent 100%);
}

/* ============================================================
   C. SIGNATURE — draws itself once (ink filling L→R)
   VOID-PROOF: the resting state is fully visible; the draw is an
   animation that only PLAYS on .la-sigin and ends visible, so a
   never-firing observer can never hide a signature.
   ============================================================ */
@keyframes laSigDraw {
  from { clip-path: inset(0 100% -.2em 0); }
  to   { clip-path: inset(0 -.15em -.2em 0); }
}
html.ledger-anim .la-sig.la-sigin {
  animation: laSigDraw 1.35s cubic-bezier(.62,.03,.3,1) .1s both;
}

/* ============================================================
   D. LEDGER ROWS — entries fill in with a written-in stagger
   VOID-PROOF: transform-only (opacity stays 1) — rows are never
   invisible even if the observer never runs.
   ============================================================ */
html.ledger-anim .la-rows > * {
  transform: translateY(14px);
}
html.ledger-anim .la-rows.la-rowsin > * {
  transform: none;
  transition: transform .55s var(--ease);
  transition-delay: calc(var(--r, 0) * 75ms);
}

/* ============================================================
   E. PAGE-TURN RISE — reveal blocks lift like a turning page
   (layers onto main.js's .reveal / .is-in)
   ============================================================ */
html.ledger-anim .reveal:not(.is-in) {
  transform: translateY(26px) scale(.985);
  transform-origin: 50% 0;
}
html.ledger-anim .reveal {
  transition: transform .72s var(--ease), opacity .72s var(--ease);
}
html.ledger-anim .reveal.is-in { transform: none; }

/* hero rule draws across instead of sliding */
html.ledger-anim .hero-rule { transform-origin: left center; }
html.ledger-anim .hero-rule:not(.is-in) { transform: scaleX(0); }
html.ledger-anim .hero-rule.is-in {
  transform: scaleX(1);
  transition: transform .95s var(--ease) .25s;
}

/* ============================================================
   F. TEPSİ BÖLÜCÜ — tray fill + ink pulse on recompute
   ============================================================ */
.tray-fill { margin-top: 20px; }
.tray-fill-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--body); font-weight: 600; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent2-text);
  margin-bottom: 8px;
}
.tray-fill-pct {
  font-family: var(--serif); font-weight: 800; font-size: 1.05rem;
  color: var(--accent-text); letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums;
}
.tray-fill-track {
  position: relative; height: 12px; border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tray-fill-bar {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--accent) 0%, #5b8c4f 55%, var(--accent2) 120%);
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}
/* ledger tick marks across the track (the tray's slice guides) */
.tray-fill-track::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(12.5% - 1px),
    rgba(32,36,28,.16) calc(12.5% - 1px) 12.5%);
}
@media (prefers-reduced-motion: reduce) { .tray-fill-bar { transition: none; } }

/* soft ink pulse on the whole result panel when it recomputes */
@keyframes laInkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(62,107,58,0); }
  30%  { box-shadow: 0 0 0 6px rgba(62,107,58,.10); }
  100% { box-shadow: 0 0 0 0 rgba(62,107,58,0); }
}
.tool-result.la-pulse {
  animation: laInkPulse .7s var(--ease) 1;
  border-radius: 6px;
}
/* the freshly-written value gets a brief pistachio flash */
@keyframes laValueInk {
  0%   { color: var(--accent-text); }
  100% { color: inherit; }
}
.result-row .v.la-fresh { animation: laValueInk .7s var(--ease) 1; }
.tray-fill-bar.la-fresh { filter: saturate(1.25) brightness(1.05); }

/* ============================================================
   REDUCED MOTION — hard stop: everything visible, nothing moves
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html .la-underline::after,
  html .eyebrow.la-rule::after { transition: none !important; }
  html .la-underline.la-drawn::after,
  html .eyebrow.la-rule.la-ruled::after { transform: none; width: auto; }
  html .la-underline.la-drawn { animation: none !important; }
  html .la-sig { clip-path: none !important; }
  html .la-rows > * { opacity: 1 !important; transform: none !important; }
  html .reveal { transform: none !important; }
  .tool-result.la-pulse, .result-row .v.la-fresh { animation: none !important; }
}