/* ============================================================================
   HOMI "3.0" process constellation — pinned scroll section
   27 construction phases light up in order, drawing the numerals "3.0".
   Depends on the brand tokens declared in hero.css (:root).
   ==========================================================================*/

/* Night section: dark in every theme; explicit ink text so it stays cream
   even when the page theme is light. */
.proc { background: var(--navy); color: var(--ink); position: relative; }

.proc__track { height: 400vh; }               /* scroll distance of the reveal */

.proc__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 2vh, 22px);
  /* Extra top padding so the eyebrow clears the fixed header on every screen. */
  padding: clamp(74px, 12vh, 116px) clamp(20px, 5vw, 90px) clamp(24px, 4vh, 52px);
}

/* Header row */
.proc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.proc__eyebrow {
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: .34em;
  color: var(--gold);
}
.proc__counter { font-family: var(--font-serif); white-space: nowrap; }
.proc__counter b {
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 60px);
  color: var(--ink);
}
.proc__counter i {
  font-style: normal;
  color: var(--muted);
  margin-left: .35em;
  font-size: clamp(15px, 2vw, 26px);
}

/* The constellation */
.proc__svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: visible;
}

/* Footer readout */
.proc__foot { text-align: center; }
.proc__phase {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .4s var(--ease);
  min-height: 1.2em;
}
.proc__hint {
  margin: .8em 0 0;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity .5s var(--ease);
}

/* ── SVG primitives — snake of phase circles ────────────────────────── */
/* One soft, professional easing everywhere. */
.proc-line {
  stroke: rgba(122, 138, 194, .20);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke .7s cubic-bezier(.22, 1, .36, 1);
}
.proc-line.is-lit { stroke: var(--gold); }

.proc-node {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
}
.proc-node circle {
  fill: var(--navy-2);
  stroke: rgba(122, 138, 194, .34);
  stroke-width: 1.4;
  transition: fill .7s cubic-bezier(.22, 1, .36, 1),
              stroke .7s cubic-bezier(.22, 1, .36, 1),
              filter .7s cubic-bezier(.22, 1, .36, 1);
}
/* Phase name inside the circle — thin, minimal, same font & size everywhere. */
.proc-node .proc-text {
  fill: rgba(210, 218, 242, .66);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;                 /* SVG user units; identical across circles */
  letter-spacing: .06em;
  transition: fill .7s cubic-bezier(.22, 1, .36, 1);
  dominant-baseline: middle;
}
/* Visited → gold + dark text (progress fills along the snake) */
.proc-node.is-lit circle { fill: var(--gold); stroke: var(--gold); }
.proc-node.is-lit .proc-text { fill: var(--navy); font-weight: 400; }
/* Active → gently zooms in with a soft breathing glow, then eases back out */
.proc-node.is-cur { transform: scale(1.55); }
.proc-node.is-cur circle {
  fill: #ffdca0;
  stroke: #ffdca0;
  animation: procGlow 2.6s ease-in-out infinite;
}
.proc-node.is-cur .proc-text { fill: var(--navy); font-weight: 500; }
@keyframes procGlow {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(240, 196, 121, .45)); }
  50%      { filter: drop-shadow(0 0 20px rgba(240, 196, 121, .85)); }
}

/* Reduced motion: everything gold, no zoom / pulse, no long track */
.proc--static .proc__track { height: 100vh; height: 100svh; }
.proc--static .proc__hint { display: none; }
.proc--static .proc-node.is-cur { transform: none; }
.proc--static .proc-node.is-cur circle { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .proc-line, .proc-node, .proc-node circle, .proc-node .proc-text { transition: none; }
  .proc-node.is-cur circle { animation: none; }
}

@media (max-width: 640px) { .proc__eyebrow { letter-spacing: .2em; } }

/* Mobil timeline: "Süreci görmek için kaydırın" ipucunu EN BAŞA al + sönük
   yanma-sönme (blink) efektiyle göster. */
@media (max-width: 1024px) {
  .proc.is-timeline .proc__stage { display: flex !important; flex-direction: column; }
  .proc.is-timeline .proc__foot { order: -1; margin: 0 0 clamp(14px, 3vh, 26px); }
  .proc.is-timeline .proc__hint {
    opacity: .4;
    animation: homiHintBlink 2.2s ease-in-out infinite;
  }
}
@keyframes homiHintBlink { 0%, 100% { opacity: .22; } 50% { opacity: .72; } }