/* YZ Ring — logo motion
   One shared 1600ms clock. Phases are intra-keyframe percentages so ?t=<ms> maps 1:1.
   Easing inside @keyframes is literal on purpose: var() in a keyframe timing function
   is silently dropped by Chromium and the segment falls back to linear. */

:root {
  --p2m-duration: 1600ms;
  --p2m-ease-draw: cubic-bezier(.33, 0, .18, 1);
  --p2m-ease-pop: cubic-bezier(.18, .9, .28, 1.08);
  --p2m-ease-settle: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- stage ---------- */

#mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: p2m-mark-breathe var(--p2m-duration) both;
}

/* ---------- ring: two arcs drawn clockwise out of their gaps ---------- */

#ring-a,
#ring-b {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

#ring-a { animation: p2m-ring-a var(--p2m-duration) both; }
#ring-b { animation: p2m-ring-b var(--p2m-duration) both; }

@keyframes p2m-ring-a {
  0%, 20% {
    stroke-dashoffset: 1;
    animation-timing-function: cubic-bezier(.33, 0, .18, 1);
  }
  62% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes p2m-ring-b {
  0%, 28% {
    stroke-dashoffset: 1;
    animation-timing-function: cubic-bezier(.36, 0, .16, 1);
  }
  70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* ---------- letters: staggered assembly, drag hierarchy root -> tertiary ---------- */

#y-stem,
#y-arm,
#z-main,
#z-bar {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

#y-stem { animation: p2m-y-stem var(--p2m-duration) both; }
#y-arm  { animation: p2m-y-arm  var(--p2m-duration) both; }
#z-main { animation: p2m-z-main var(--p2m-duration) both; }
#z-bar  { animation: p2m-z-bar  var(--p2m-duration) both; }

@keyframes p2m-y-stem {
  0%, 36% {
    opacity: 0;
    transform: scale(.82);
    animation-timing-function: cubic-bezier(.18, .9, .28, 1.08);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  56% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes p2m-y-arm {
  0%, 40% {
    opacity: 0;
    transform: scale(.82);
    animation-timing-function: cubic-bezier(.18, .9, .28, 1.08);
  }
  54% {
    opacity: 1;
    transform: scale(1.04);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes p2m-z-main {
  0%, 46% {
    opacity: 0;
    transform: scale(.82);
    animation-timing-function: cubic-bezier(.18, .9, .28, 1.08);
  }
  60% {
    opacity: 1;
    transform: scale(1.04);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  66% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes p2m-z-bar {
  0%, 52% {
    opacity: 0;
    transform: scale(.82);
    animation-timing-function: cubic-bezier(.18, .9, .28, 1.08);
  }
  66% {
    opacity: 1;
    transform: scale(1.04);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- detail: registered-trademark mark arrives last ---------- */

#r-mark {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: p2m-r-mark var(--p2m-duration) both;
}

@keyframes p2m-r-mark {
  0%, 72% {
    opacity: 0;
    transform: scale(.5);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  86% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- follow through: one 0.4% breath, then hold at exactly 1 ---------- */

@keyframes p2m-mark-breathe {
  0%, 86% { transform: scale(1); }
  92% { transform: scale(1.004); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { transform: scale(1); }
}