/* C0A · hero logo hareketi.
   Açılış (~1.7 sn): C ve A damga gibi basılır, 0 maskotun gözü gibi yarık → yarı kapalı (bıkkın) → tam açılır
   ve bir kez parlar, fırça çizgisi soldan sağa sürülür, taç havada kendini çizer, 0'ın tepesine düşer, boya sıçrar.
   Sonra: ara sıra taç yaramazca sallanır, 0 göz kırpar (logo.js).
   Kurallar: yalnız transform/opacity (+tek seferlik dashoffset), JS yoksa / reduced-motion'da son hal görünür. */

/* ---------- son hal (JS yoksa da bu) ---------- */
.logo .l { display: inline-block; }
.logo .zw { position: relative; display: inline-block; }
.logo .zero { transform-origin: 50% 66%; }

.logo .crown {
  position: absolute;
  width: .52em; height: .364em;
  left: calc(50% - .25em); top: -.3em;
  overflow: visible;
  fill: none; stroke: var(--green); stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(-9deg);
  transform-origin: 50% 85%;
  filter: drop-shadow(0 0 6px rgba(57,255,20,.35));
}
.logo .crown-band { stroke-width: 5; opacity: .9; }
.logo .crown-gem { fill: var(--green); stroke: none; transform-box: fill-box; transform-origin: center; }

.logo .brush {
  position: absolute;
  left: 2%; bottom: -.2em;
  width: 96%; height: .24em;
  overflow: visible;
  fill: var(--green);
}
.logo .brush-wipe { transform-box: fill-box; }

.logo .splat {
  position: absolute;
  left: -.2em; top: -.4em;
  width: 2.4em; height: 1.5em;
  overflow: visible;
  fill: var(--green);
  pointer-events: none;
}
.logo .splat > * { transform-box: fill-box; transform-origin: center; opacity: .85; }

/* mobilde maskot yazısı logonun hemen üstünde: taç ve sıçramalar ona değmesin */
@media (max-width: 760px) { .hero .logo { margin-top: .34em; } }

/* 0'ın arkasındaki tek seferlik parlama */
.logo .zw::before {
  content: "";
  position: absolute; z-index: -1;
  left: -.18em; right: -.18em; top: 0; bottom: -.06em;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(57,255,20,.55), rgba(57,255,20,.18) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* ---------- açılış: JS hazırlar (logo-anim), font gelince başlar (logo-go) ---------- */
html.logo-anim:not(.logo-go) .logo .l,
html.logo-anim:not(.logo-go) .logo .crown,
html.logo-anim:not(.logo-go) .logo .splat > * { opacity: 0; }
html.logo-anim:not(.logo-go) .logo .brush-wipe { transform: translateX(-100%); }

@media (prefers-reduced-motion: no-preference) {
  html.logo-go .logo .l-c { animation: c0a-stamp-l .42s cubic-bezier(.3,.7,.4,1) .05s both, c0a-thud .3s ease-out 1.2s; }
  html.logo-go .logo .l-a { animation: c0a-stamp-r .42s cubic-bezier(.3,.7,.4,1) .17s both, c0a-thud .3s ease-out 1.24s; }
  html.logo-go .logo .zero { animation: c0a-eye 1.05s linear .12s both; }
  html.logo-go .logo .zw::before { animation: c0a-glow .75s ease-out .95s both; }

  html.logo-go .logo .brush-wipe { animation: c0a-wipe .5s cubic-bezier(.6,.05,.3,1) .5s both; }

  html.logo-go .logo .crown { animation: c0a-crown-drop .55s cubic-bezier(.5,0,.75,.2) .9s both; }
  html.logo-go .logo .crown-line { stroke-dasharray: 1 1.1; animation: c0a-draw .5s cubic-bezier(.5,0,.3,1) .3s both; }
  html.logo-go .logo .crown-band { stroke-dasharray: 1 1.1; animation: c0a-draw-band .2s ease-out .72s both; }
  html.logo-go .logo .crown-gem { animation: c0a-pop .28s cubic-bezier(.3,1.8,.5,1) both; }
  html.logo-go .logo .crown-gem:nth-of-type(1) { animation-delay: .52s; }
  html.logo-go .logo .crown-gem:nth-of-type(2) { animation-delay: .62s; }
  html.logo-go .logo .crown-gem:nth-of-type(3) { animation-delay: .72s; }

  html.logo-go .logo .splat > * { animation: c0a-splat .34s cubic-bezier(.3,1.9,.5,1) 1.18s both; }
  html.logo-go .logo .splat > :nth-child(2) { animation-delay: 1.24s; }
  html.logo-go .logo .splat > :nth-child(3) { animation-delay: 1.3s; }
  html.logo-go .logo .splat > :nth-child(4) { animation-delay: 1.2s; }
  html.logo-go .logo .splat > :nth-child(5) { animation-delay: 1.27s; }
  html.logo-go .logo .splat > :nth-child(6) { animation-delay: .9s; }
  html.logo-go .logo .splat > :nth-child(7) { animation-delay: .96s; }

  /* ---------- idle (logo.js sınıf ekler) ---------- */
  .logo.is-wobble .crown { animation: c0a-crown-wobble 1.1s cubic-bezier(.4,0,.3,1); }
  .logo.is-blink .zero { animation: c0a-blink .24s ease-in-out; }
  .logo.is-meh .zero { animation: c0a-meh 1.3s ease-in-out; }
}

@keyframes c0a-stamp-l {
  0%   { opacity: 0; transform: translate(-.04em, -.12em) scale(1.7) rotate(-10deg); }
  45%  { opacity: 1; }
  60%  { transform: translate(0, .02em) scale(.9, .94) rotate(2deg); }
  80%  { transform: scale(1.04) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes c0a-stamp-r {
  0%   { opacity: 0; transform: translate(.04em, -.12em) scale(1.7) rotate(10deg); }
  45%  { opacity: 1; }
  60%  { transform: translate(0, .02em) scale(.9, .94) rotate(-2deg); }
  80%  { transform: scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes c0a-thud {
  40% { transform: translateY(.025em) scaleY(.97); }
}
/* yarık → glitch → bıkkın yarı kapalı → tam açık */
@keyframes c0a-eye {
  0%   { opacity: 0; transform: scale(.3, .05); }
  10%  { opacity: 1; transform: scale(1.05, .05); }
  17%  { transform: translateX(.05em) scale(1.05, .05); }
  20%  { transform: translateX(-.035em) scale(1.05, .08); }
  23%  { transform: translateX(.015em) scale(1.05, .05); }
  26%  { transform: scale(1, .05); }
  42%  { transform: scale(1, .05); animation-timing-function: cubic-bezier(.3,.8,.4,1); }
  52%  { transform: scale(1, .44); }
  70%  { transform: scale(1, .44); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  84%  { transform: scale(.97, 1.08); }
  93%  { transform: scale(1.01, .97); }
  100% { opacity: 1; transform: none; }
}
@keyframes c0a-glow {
  0%   { opacity: 0; transform: scale(.6); }
  30%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.2); }
}
@keyframes c0a-wipe {
  from { transform: translateX(-100%); }
  to   { transform: none; }
}
@keyframes c0a-draw {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  8%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes c0a-draw-band {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes c0a-pop {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: none; }
}
/* havada çizilir (-.26em, eğik), düşer, ezilir, sekip oturur */
@keyframes c0a-crown-drop {
  0%   { opacity: 1; transform: translate(.04em, -.26em) rotate(-22deg); }
  46%  { transform: translate(0, .02em) rotate(-6deg) scale(1.12, .78); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  66%  { transform: translate(0, -.07em) rotate(-12deg) scale(.96, 1.05); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  82%  { transform: translate(0, .005em) rotate(-8deg) scale(1.04, .95); }
  100% { opacity: 1; transform: rotate(-9deg); }
}
@keyframes c0a-splat {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; }
  100% { opacity: .85; transform: none; }
}
/* idle: taç yaramazlık yapar */
@keyframes c0a-crown-wobble {
  0%   { transform: rotate(-9deg); }
  18%  { transform: translate(-.02em, -.06em) rotate(-24deg); }
  38%  { transform: translate(.01em, -.03em) rotate(6deg); }
  56%  { transform: translate(0, .01em) rotate(-15deg) scale(1.04, .96); }
  74%  { transform: rotate(-5deg); }
  100% { transform: rotate(-9deg); }
}
@keyframes c0a-blink {
  50% { transform: scale(1.03, .06); }
}
/* bıkkın bakış: yarı kapanır, bekler, açılır */
@keyframes c0a-meh {
  0%, 100% { transform: none; }
  18%, 78% { transform: scale(1, .42); }
}