/* sections motion · C0A
   .motion-deco : JS enjekte ettiği dekorlar var (hep son durumda görünür)
   .js-motion   : hareket serbest; gizli başlangıç durumları yalnız bunun altında */

.c0a-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------- HERO ARKA PLANI ---------- */
.motion-deco .hero::before { display: none; }
.hero-bg {
  position: absolute; z-index: -1;
  top: -90px; bottom: -30px;
  /* hero ortalı; kenardan kenara taşar ama kendi içinde kırpılır */
  left: calc((100% - 100vw) / 2); right: calc((100% - 100vw) / 2);
  overflow: hidden;
  opacity: .62;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 38%, #000 62%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 38%, #000 62%);
          mask-composite: intersect;
}
.hero-bg-par { position: absolute; inset: -40px; will-change: transform; }
.hero-bg-svg {
  display: block; width: 100%; height: 100%;
  will-change: transform;
  animation: hbDrift 24s ease-in-out 2.8s infinite alternate;
}
.hb-stroke {
  stroke-dasharray: 1000 1000;
  stroke-dashoffset: 0;
  animation: hbDraw 1.4s cubic-bezier(.65,.05,.3,1) backwards;
}
.hb-dot {
  transform-box: fill-box; transform-origin: center;
  animation: hbPop .45s cubic-bezier(.3,1.7,.5,1) backwards;
}
.hb-drip {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 0;
  animation: hbDrip 1.1s cubic-bezier(.5,0,.5,1) backwards;
}
@keyframes hbDraw { 0% { stroke-dashoffset: 1000; opacity: 0; } 3% { opacity: 1; } }
@keyframes hbDrip { 0% { stroke-dashoffset: 100; opacity: 0; } 5% { opacity: 1; } }
@keyframes hbPop  { 0% { transform: scale(0); opacity: 0; } }
@keyframes hbDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(-18px, 10px, 0) rotate(.8deg) scale(1.03); }
}

/* ---------- AÇILIŞ (scroll reveal) ---------- */
.js-motion .rv {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
}
.js-motion .exp.rv {
  transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s), border-color .15s;
}
.js-motion .link-card.rv {
  transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s), border-color .15s, transform .15s;
}
.js-motion .rv.in { opacity: 1; translate: 0 0; }

/* ---------- BAŞLIK FIRÇA ALT ÇİZGİSİ ---------- */
.motion-deco .section-head h2 { position: relative; isolation: isolate; }
.h2-brush {
  position: absolute; z-index: -1;
  left: -.08em; bottom: -.2em;
  width: calc(100% + .2em); height: .26em;
  overflow: visible;
  opacity: .92;
  pointer-events: none;
}
.js-motion .section-head .h2-brush {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s cubic-bezier(.7,0,.2,1) .35s;
}
.js-motion .section-head.in .h2-brush { clip-path: inset(0 0 0 -2%); }

/* ---------- DENEY HATTI ---------- */
.motion-deco .pipeline { position: relative; padding-bottom: 11px; }
.motion-deco .pipeline.pipe-off { padding-bottom: 0; }
.pipe-off .pipe-track { display: none; }
.pipe-track {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: #2A2A2A;
  pointer-events: none;
}
.pipe-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--pipe-fill, 0px);
  border-radius: 2px;
  background: #39FF14;
  box-shadow: 0 0 8px rgba(57,255,20,.45);
  transform-origin: 0 50%;
}
.pipe-head {
  position: absolute; right: -4px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%;
  background: #39FF14;
  box-shadow: 0 0 10px #39FF14;
  animation: headPulse 1.6s ease-in-out infinite;
}
@keyframes headPulse { 50% { transform: scale(.55); opacity: .6; } }
.js-motion .exp .pipe-fill {
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.6,0,.2,1) calc(var(--d, 0s) + .5s);
}
.js-motion .exp.in .pipe-fill { transform: scaleX(1); }
.js-motion .exp .pipe-head { opacity: 0; transition: opacity .3s calc(var(--d, 0s) + 1.6s); }
.js-motion .exp.in .pipe-head { opacity: 1; }

.motion-deco .pipeline li.now { position: relative; }
.motion-deco .pipeline li.now::after {
  content: "";
  position: absolute; inset: -3px;
  border: 1px solid #39FF14; border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  animation: nowPulse 2.2s ease-out 1.8s infinite;
}
@keyframes nowPulse {
  0%   { opacity: .9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.18, 1.55); }
}

/* tarama çizgisi: kart açılırken bir kez */
.motion-deco .exp { position: relative; overflow: hidden; }
.exp-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent, rgba(57,255,20,.06) 80%, rgba(57,255,20,.55) 99%, transparent);
  opacity: 0;
  pointer-events: none;
}
.js-motion .exp.in .exp-scan { animation: scan 1.2s cubic-bezier(.5,0,.5,1) calc(var(--d, 0s) + .25s) both; }
@keyframes scan {
  0%   { transform: translateY(-100%); opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(230%); opacity: 0; }
}

/* sıradaki deney: imleç + kıpırdayan "?" */
.tcur {
  display: inline-block;
  width: .5em; height: .95em;
  margin-left: .18em;
  vertical-align: -.1em;
  background: #39FF14;
  animation: c0aBlink 1.05s steps(1) infinite;
}
@keyframes c0aBlink { 50% { opacity: 0; } }
.motion-deco .exp-next .badge-dim { animation: qWiggle 5s ease-in-out 2.4s infinite; }
@keyframes qWiggle {
  0%, 82%, 100% { transform: rotate(0); }
  85% { transform: rotate(-16deg) scale(1.08); }
  88% { transform: rotate(13deg) scale(1.08); }
  91% { transform: rotate(-8deg); }
  94% { transform: rotate(4deg); }
}

/* ---------- KURAL: fırçayla fosforlu kalem ---------- */
.js-motion #kural blockquote { isolation: isolate; }
.js-motion .rv-hl {
  position: relative;
  white-space: nowrap;
  background: linear-gradient(90deg, #0B0B0B 0 50%, #F5F5F5 50% 100%) 80% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: background-position .95s cubic-bezier(.65,0,.35,1) .2s;
}
.js-motion .rv-hl.in { background-position: 20% 0; }
.hl-paint {
  position: absolute; z-index: -1;
  inset: .02em -.03em -.02em;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H150L155 7 148 15 156 24 149 33 157 44 148 55 155 66 147 77 154 88 149 100H0Z'/%3E%3C/svg%3E") 80% 0 / 300% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H150L155 7 148 15 156 24 149 33 157 44 148 55 155 66 147 77 154 88 149 100H0Z'/%3E%3C/svg%3E") 80% 0 / 300% 100% no-repeat;
  transition: -webkit-mask-position .95s cubic-bezier(.65,0,.35,1) .2s, mask-position .95s cubic-bezier(.65,0,.35,1) .2s;
}
.hl-paint svg { display: block; width: 100%; height: 100%; overflow: visible; }
.js-motion .rv-hl.in .hl-paint { -webkit-mask-position: 20% 0; mask-position: 20% 0; }

/* çipler sırayla, "başarısızlık" başarısız olur */
.js-motion .rv-chips:not(.in) li { opacity: 0; }
.js-motion .rv-chips.in li {
  animation: chipPop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i, 0) * 80ms + .35s) backwards;
}
.js-motion .rv-chips.in li:last-child {
  animation:
    chipPop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i, 0) * 80ms + .35s) backwards,
    chipFail .9s linear calc(var(--i, 0) * 80ms + .95s) forwards;
}
@keyframes chipPop { 0% { opacity: 0; scale: .5; translate: 0 10px; } }
@keyframes chipFail {
  0%   { transform: none; }
  8%   { transform: translate(-3px, 0) skewX(-14deg); text-shadow: 2px 0 #F5F5F5, -2px 0 #2A2A2A; }
  16%  { transform: translate(3px, -1px) skewX(10deg); clip-path: inset(15% 0 45% 0); }
  24%  { transform: translate(-2px, 1px); clip-path: inset(55% 0 8% 0); text-shadow: -2px 0 #F5F5F5, 2px 0 #2A2A2A; }
  32%  { transform: translate(2px, 0); clip-path: none; text-shadow: none; }
  40%  { transform: none; }
  62%  { transform: translateY(4px) rotate(-9deg); }
  78%  { transform: translateY(2px) rotate(-3deg); }
  100% { transform: translateY(2px) rotate(-5deg); }
}

/* ---------- LİNK KARTLARI ---------- */
.motion-deco .link-card { position: relative; }
.arr { display: inline-block; transition: transform .22s cubic-bezier(.3,1.7,.5,1); }
.link-card:hover .arr, .link-card:focus-visible .arr { transform: translate(3px, -3px); }
.card-brush {
  position: absolute;
  left: 18px; bottom: 11px;
  width: calc(100% - 36px); height: 9px;
  opacity: .85;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s cubic-bezier(.6,0,.2,1);
}
.link-card:hover .card-brush, .link-card:focus-visible .card-brush { clip-path: inset(0 0 0 0); }

/* ---------- KAYDIRMA FIRÇASI ---------- */
.scroll-brush {
  position: fixed; z-index: 60;
  top: 0; left: 0;
  width: 100%; height: 4px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.scroll-brush svg { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg-svg, .hb-stroke, .hb-dot, .hb-drip, .pipe-head, .tcur,
  .motion-deco .exp-next .badge-dim, .motion-deco .pipeline li.now::after { animation: none !important; }
  .hero-bg-par { transform: none !important; }
}