/* ============================================================
   Demo — the official Eddy logo & its animation playground (#/demo)
   The mark itself lives in js/eddy-logo.js; every motion state is
   CSS-only, driven by [data-anim] on the .eddy wrapper.
   Animations are demo-only until signed off — nothing in the app
   proper uses them yet.
   ============================================================ */

.demo-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.demo-topnav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.demo-topnav-note {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.demo-hero {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-2);
  text-align: center;
}

.demo-hero h1 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(2.2rem, 5vw, 3rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.demo-hero p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink-3);
}

.demo-lab {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ---------- Stage ---------- */

.demo-stage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

.demo-stage {
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 18px 18px,
    var(--surface-sunken);
}

.demo-stage-floor {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 250px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(8, 19, 55, 0.1), transparent 68%);
  pointer-events: none;
}

.demo-anim-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  max-width: 680px;
}

.demo-anim-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--text-sm);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.demo-anim-btn:hover {
  border-color: #186cff;
  color: #186cff;
  transform: translateY(-1px);
}

.demo-anim-btn.is-active {
  background: #081337;
  border-color: #081337;
  color: #fff;
}

.demo-anim-hint {
  margin: 0;
  min-height: 1.4em;
  font-size: var(--text-sm);
  color: var(--ink-3);
  text-align: center;
}

/* ---------- Asset previews ---------- */

.demo-assets-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: var(--sp-4);
}

@media (max-width: 640px) {
  .demo-assets-grid {
    grid-template-columns: 1fr;
  }
}

.demo-asset-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.demo-asset-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.eddy-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eddy-lockup-word {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  color: #081337;
}

.demo-scale-row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.demo-scale-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.demo-scale-item small {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.demo-footer {
  margin-top: auto;
  padding: var(--sp-5);
  text-align: center;
  border-top: 1px solid var(--border);
}

.demo-footer p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-4);
}

/* ============================================================
   The Eddy rig
   ============================================================ */

.eddy {
  display: inline-block;
  line-height: 0;
}

.eddy-figure {
  display: inline-block;
  will-change: transform;
}

.eddy-logo {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Every animatable part rotates/scales around its own box. */
.eddy-logo-head,
.eddy-logo-trail,
.eddy-logo-eye,
.eddy-logo-line,
.eddy-logo-swoosh,
.eddy-fx,
.eddy-fx-dot,
.eddy-fx-spark,
.eddy-fx-z,
.eddy-fx-question-mark,
.eddy-fx-hammer-arm,
.eddy-fx-tool,
.eddy-fx-wrench,
.eddy-fx-drill,
.eddy-fx-nut,
.eddy-fx-tspark,
.eddy-fx-pencil,
.eddy-fx-scribble,
.eddy-fx-lens-g,
.eddy-fx-plane,
.eddy-fx-envelope {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Head pivots at the neck, swoosh wags from its tip, tools from the bolt. */
.eddy-logo-head { transform-origin: 48% 96%; }
.eddy-logo-swoosh { transform-origin: 6% 18%; }
.eddy-fx-hammer-arm { transform-origin: 50% 5%; }
.eddy-fx-wrench { transform-origin: 24% 50%; }
.eddy-fx-scribble { transform-origin: 0% 50%; }

.eddy-fx {
  opacity: 0;
  transition: opacity 0.28s ease;
}
.eddy-fx-tool { opacity: 0; }

/* ============================================================
   data-anim states
   ============================================================ */

/* ---------- enter: bounce in ---------- */

.eddy[data-anim='enter'] .eddy-figure {
  animation: eddy-bounce-in 0.95s cubic-bezier(0.3, 1.1, 0.4, 1) both;
}

.eddy[data-anim='enter'] .eddy-logo-line {
  stroke-dasharray: 1;
  animation: eddy-streak-in 0.7s 0.2s ease-out both;
}

.eddy[data-anim='enter'] .eddy-logo-swoosh {
  animation: eddy-swoosh-in 0.55s 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes eddy-bounce-in {
  0%   { transform: translateY(-150px) scale(0.55); opacity: 0; }
  18%  { opacity: 1; }
  52%  { transform: translateY(0) scale(1.08, 0.84); }
  72%  { transform: translateY(-16px) scale(0.96, 1.06); }
  88%  { transform: translateY(0) scale(1.02, 0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes eddy-streak-in {
  0%   { stroke-dashoffset: 1; transform: translate(-48px, -48px); opacity: 0; }
  35%  { opacity: 1; }
  100% { stroke-dashoffset: 0; transform: translate(0, 0); opacity: 1; }
}

@keyframes eddy-swoosh-in {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- draw: the mark inks itself ---------- */

.eddy[data-anim='draw'] .eddy-logo-outline {
  stroke-dasharray: 1;
  animation: eddy-draw-path 1.35s 0.1s cubic-bezier(0.45, 0, 0.25, 1) both;
}

.eddy[data-anim='draw'] .eddy-logo-eye {
  animation: eddy-pop 0.4s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.eddy[data-anim='draw'] .eddy-logo-line--long {
  stroke-dasharray: 1;
  animation: eddy-draw-path 0.5s 1.6s ease-out both;
}

.eddy[data-anim='draw'] .eddy-logo-line--short {
  stroke-dasharray: 1;
  animation: eddy-draw-path 0.45s 1.75s ease-out both;
}

.eddy[data-anim='draw'] .eddy-logo-swoosh {
  animation: eddy-swoosh-in 0.5s 1.95s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes eddy-draw-path {
  0%   { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

@keyframes eddy-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- idle: float + blink ---------- */

.eddy[data-anim='idle'] .eddy-figure {
  animation: eddy-float 4.4s ease-in-out infinite;
}

.eddy[data-anim='idle'] .eddy-logo-eye {
  animation: eddy-blink 4.8s infinite;
}

.eddy[data-anim='idle'] .eddy-logo-trail {
  animation: eddy-trail-sway 4.4s ease-in-out infinite;
}

@keyframes eddy-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes eddy-blink {
  0%, 90.5%, 95.5%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(0.06); }
}

@keyframes eddy-trail-sway {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6px, 5px); }
}

/* ---------- thinking: chin up, thought dots ---------- */

.eddy[data-anim='thinking'] .eddy-figure {
  animation: eddy-float 5.2s ease-in-out infinite;
}

.eddy[data-anim='thinking'] .eddy-logo-head {
  animation: eddy-think-bob 2.8s ease-in-out infinite;
}

.eddy[data-anim='thinking'] .eddy-logo-eye {
  animation: eddy-eye-up 2.8s ease-in-out infinite;
}

.eddy[data-anim='thinking'] .eddy-fx-dots {
  opacity: 1;
}

.eddy[data-anim='thinking'] .eddy-fx-dot {
  animation: eddy-dot 2.4s ease-in-out infinite both;
}

.eddy[data-anim='thinking'] .eddy-fx-dot--2 { animation-delay: 0.35s; }
.eddy[data-anim='thinking'] .eddy-fx-dot--3 { animation-delay: 0.7s; }

@keyframes eddy-think-bob {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-5deg) translateY(-5px); }
}

@keyframes eddy-eye-up {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6px, -9px); }
}

@keyframes eddy-dot {
  0%   { opacity: 0; transform: scale(0.2); }
  16%  { opacity: 1; transform: scale(1.12); }
  24%  { transform: scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.8); }
}

/* ---------- working: the wrench ratchets a bolt tight ---------- */
/* The tool is grounded: it grips a hex bolt under the chin, the bolt visibly
   advances 60° per push (hex symmetry makes the loop seamless). */

.eddy[data-anim='working'] .eddy-figure {
  animation: eddy-work-bounce 0.72s ease-in-out infinite;
}

.eddy[data-anim='working'] .eddy-logo-head {
  animation: eddy-work-nod 0.72s ease-in-out infinite;
}

.eddy[data-anim='working'] .eddy-logo-eye {
  transform: translate(9px, 10px);
}

.eddy[data-anim='working'] .eddy-logo-line--long {
  animation: eddy-line-pump 0.72s ease-in-out infinite;
}

.eddy[data-anim='working'] .eddy-logo-line--short {
  animation: eddy-line-pump 0.72s ease-in-out -0.36s infinite;
}

.eddy[data-anim='working'] .eddy-logo-swoosh {
  animation: eddy-swoosh-pump 0.72s ease-in-out infinite;
}

.eddy[data-anim='working'] .eddy-fx-tools,
.eddy[data-anim='working'] .eddy-fx-tool--wrench {
  opacity: 1;
}

.eddy[data-anim='working'] .eddy-fx-wrench,
.eddy[data-anim='building'] .eddy-fx-wrench {
  animation: eddy-wrench-ratchet 0.72s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

.eddy[data-anim='working'] .eddy-fx-nut,
.eddy[data-anim='building'] .eddy-fx-nut {
  animation: eddy-nut-turn 0.72s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

.eddy[data-anim='working'] .eddy-fx-tspark--1,
.eddy[data-anim='building'] .eddy-fx-tspark--1,
.eddy[data-anim='building'] .eddy-fx-tspark--3 {
  animation: eddy-tspark 0.72s ease-out infinite;
}

.eddy[data-anim='working'] .eddy-fx-tspark--2,
.eddy[data-anim='building'] .eddy-fx-tspark--2,
.eddy[data-anim='building'] .eddy-fx-tspark--4 {
  animation: eddy-tspark 0.72s ease-out 0.36s infinite;
}

@keyframes eddy-work-bounce {
  0%, 100% { transform: translateY(0); }
  42%      { transform: translateY(4px); }
}

@keyframes eddy-work-nod {
  0%, 100% { transform: rotate(0deg); }
  42%      { transform: rotate(5deg); }
}

@keyframes eddy-line-pump {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(11px, 11px); }
}

@keyframes eddy-swoosh-pump {
  0%, 100% { transform: scale(1); }
  55%      { transform: scale(1.14); }
}

/* Push down (work), then ride back up the ratchet. */
@keyframes eddy-wrench-ratchet {
  0%   { transform: rotate(14deg); }
  42%  { transform: rotate(-34deg); }
  52%  { transform: rotate(-31deg); }
  88%  { transform: rotate(16deg); }
  100% { transform: rotate(14deg); }
}

/* ---------- mailing: holding an envelope, ready to send ---------- */
/* Same grounded workspace as the wrench — envelope under the chin, Eddy
   offers it with a soft nod and a little spark of “ready to send”. */

.eddy[data-anim='mailing'] .eddy-figure {
  animation: eddy-mail-bounce 1.6s ease-in-out infinite;
}

.eddy[data-anim='mailing'] .eddy-logo-head {
  animation: eddy-mail-tilt 1.6s ease-in-out infinite;
}

.eddy[data-anim='mailing'] .eddy-logo-eye {
  transform: translate(10px, 9px);
}

.eddy[data-anim='mailing'] .eddy-logo-line--long {
  animation: eddy-line-pump 1.6s ease-in-out infinite;
}

.eddy[data-anim='mailing'] .eddy-logo-line--short {
  animation: eddy-line-pump 1.6s ease-in-out -0.8s infinite;
}

.eddy[data-anim='mailing'] .eddy-logo-swoosh {
  animation: eddy-mail-wag 1.6s ease-in-out infinite;
}

.eddy[data-anim='mailing'] .eddy-fx-mail {
  opacity: 1;
}

.eddy[data-anim='mailing'] .eddy-fx-envelope {
  animation: eddy-mail-hold 1.6s ease-in-out infinite;
}

.eddy[data-anim='mailing'] .eddy-fx-tspark--mail {
  animation: eddy-tspark 1.6s ease-out infinite;
}

@keyframes eddy-mail-bounce {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-5px); }
}

@keyframes eddy-mail-tilt {
  0%, 100% { transform: rotate(0deg); }
  45%      { transform: rotate(-6deg); }
}

@keyframes eddy-mail-wag {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(10deg) scale(1.08); }
}

@keyframes eddy-mail-hold {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  45%      { transform: translate(6px, -12px) rotate(5deg); }
}

/* The bolt advances only while the wrench pushes; -60° = seamless hex loop. */
@keyframes eddy-nut-turn {
  0%   { transform: rotate(0deg); }
  42%  { transform: rotate(-60deg); }
  100% { transform: rotate(-60deg); }
}

@keyframes eddy-tspark {
  0%, 30% { opacity: 0; transform: scale(0.2); }
  46%     { opacity: 1; transform: scale(1.15); }
  72%     { opacity: 0; transform: scale(0.4); }
  100%    { opacity: 0; }
}

/* ---------- building: the whole toolbox takes turns on the bolt ---------- */

.eddy[data-anim='building'] .eddy-figure {
  animation: eddy-work-bounce 0.72s ease-in-out infinite;
}

.eddy[data-anim='building'] .eddy-logo-head {
  animation: eddy-work-nod 0.72s ease-in-out infinite;
}

.eddy[data-anim='building'] .eddy-logo-eye {
  transform: translate(9px, 10px);
}

.eddy[data-anim='building'] .eddy-logo-line--long {
  animation: eddy-line-pump 0.72s ease-in-out infinite;
}

.eddy[data-anim='building'] .eddy-logo-line--short {
  animation: eddy-line-pump 0.72s ease-in-out -0.36s infinite;
}

.eddy[data-anim='building'] .eddy-logo-swoosh {
  animation: eddy-swoosh-pump 0.72s ease-in-out infinite;
}

.eddy[data-anim='building'] .eddy-fx-tools {
  opacity: 1;
}

/* Each tool gets a 1.44s window in a 4.32s cycle (2 beats per tool). */
.eddy[data-anim='building'] .eddy-fx-tool--wrench {
  animation: eddy-tool-window 4.32s linear infinite;
}

.eddy[data-anim='building'] .eddy-fx-tool--drill {
  animation: eddy-tool-window 4.32s linear 1.44s infinite;
}

.eddy[data-anim='building'] .eddy-fx-tool--hammer {
  animation: eddy-tool-window 4.32s linear 2.88s infinite;
}

.eddy[data-anim='building'] .eddy-fx-drill {
  animation: eddy-drill-buzz 0.09s linear infinite;
}

.eddy[data-anim='building'] .eddy-fx-hammer-arm {
  animation: eddy-hammer-strike 0.72s cubic-bezier(0.5, 0, 0.35, 1) infinite;
}

@keyframes eddy-tool-window {
  0%       { opacity: 0; }
  2%, 30%  { opacity: 1; }
  33%, 100% { opacity: 0; }
}

/* Vibration along the bit axis (about -40°). */
@keyframes eddy-drill-buzz {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(2.2px, -1.8px); }
}

@keyframes eddy-hammer-strike {
  0%   { transform: rotate(-36deg); }
  42%  { transform: rotate(40deg); }
  50%  { transform: rotate(35deg); }
  100% { transform: rotate(-36deg); }
}

/* ---------- searching: the eye sweeps ---------- */

.eddy[data-anim='searching'] .eddy-figure {
  animation: eddy-float 5s ease-in-out infinite;
}

.eddy[data-anim='searching'] .eddy-logo-eye {
  animation: eddy-eye-scan 3.2s ease-in-out infinite;
}

.eddy[data-anim='searching'] .eddy-logo-head {
  animation: eddy-head-scan 3.2s ease-in-out infinite;
}

@keyframes eddy-eye-scan {
  0%, 100% { transform: translate(0, 0); }
  16%      { transform: translate(-15px, 3px); }
  34%      { transform: translate(-15px, 3px); }
  52%      { transform: translate(13px, -3px); }
  72%      { transform: translate(13px, -3px); }
  88%      { transform: translate(0, 0); }
}

@keyframes eddy-head-scan {
  0%, 100% { transform: rotate(0deg); }
  16%, 34% { transform: rotate(2.4deg); }
  52%, 72% { transform: rotate(-2.4deg); }
}

/* ---------- happy: hop + spark burst + tail wag ---------- */

.eddy[data-anim='happy'] .eddy-figure {
  animation: eddy-hop 1.5s ease-in-out infinite;
}

.eddy[data-anim='happy'] .eddy-logo-eye {
  animation: eddy-squint 1.5s ease-in-out infinite;
}

.eddy[data-anim='happy'] .eddy-logo-swoosh {
  animation: eddy-wag 0.5s ease-in-out infinite;
}

.eddy[data-anim='happy'] .eddy-fx-sparks {
  opacity: 1;
}

.eddy[data-anim='happy'] .eddy-fx-spark {
  animation: eddy-spark-burst 1.5s ease-out infinite both;
}

.eddy[data-anim='happy'] .eddy-fx-spark--2 { animation-delay: 0.12s; }
.eddy[data-anim='happy'] .eddy-fx-spark--3 { animation-delay: 0.24s; }
.eddy[data-anim='happy'] .eddy-fx-spark--4 { animation-delay: 0.36s; }

@keyframes eddy-hop {
  0%   { transform: translateY(0) scale(1); }
  12%  { transform: translateY(5px) scale(1.05, 0.9); }
  32%  { transform: translateY(-32px) scale(0.95, 1.07); }
  50%  { transform: translateY(0) scale(1.06, 0.9); }
  62%  { transform: translateY(-13px) scale(0.98, 1.03); }
  74%  { transform: translateY(0) scale(1.02, 0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes eddy-squint {
  0%, 100% { transform: scaleY(1); }
  30%, 70% { transform: scaleY(0.55); }
}

@keyframes eddy-wag {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-13deg); }
}

@keyframes eddy-spark-burst {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  16%  { opacity: 1; transform: scale(1.15) rotate(10deg); }
  36%  { opacity: 1; transform: scale(1) rotate(20deg); }
  56%  { opacity: 0; transform: scale(0.2) rotate(28deg); }
  100% { opacity: 0; transform: scale(0); }
}

/* ---------- confused: head shake + question mark ---------- */

.eddy[data-anim='confused'] .eddy-logo-head {
  animation: eddy-shake 2.6s ease-in-out infinite;
}

.eddy[data-anim='confused'] .eddy-logo-eye {
  animation: eddy-eye-wide 2.6s ease-in-out infinite;
}

.eddy[data-anim='confused'] .eddy-logo-trail {
  animation: eddy-droop 2.6s ease-in-out infinite;
}

.eddy[data-anim='confused'] .eddy-fx-question {
  opacity: 1;
}

.eddy[data-anim='confused'] .eddy-fx-question-mark {
  animation: eddy-q-pop 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
}

@keyframes eddy-shake {
  0%   { transform: translateX(0) rotate(0deg); }
  5%   { transform: translateX(-10px) rotate(-3deg); }
  11%  { transform: translateX(9px) rotate(3deg); }
  17%  { transform: translateX(-7px) rotate(-2deg); }
  23%  { transform: translateX(5px) rotate(1.6deg); }
  29%  { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes eddy-eye-wide {
  0%, 4%    { transform: scale(1); }
  8%, 78%   { transform: scale(1.2); }
  88%, 100% { transform: scale(1); }
}

@keyframes eddy-droop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  10%, 72% { transform: translateY(8px) rotate(3.5deg); }
}

@keyframes eddy-q-pop {
  0%   { opacity: 0; transform: scale(0); }
  7%   { opacity: 1; transform: scale(1.25); }
  13%  { transform: scale(1); }
  60%  { opacity: 1; transform: scale(1) rotate(-4deg); }
  80%  { opacity: 0; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(0); }
}

/* ---------- sleeping: breathe + zzz ---------- */

.eddy[data-anim='sleeping'] .eddy-figure {
  animation: eddy-breathe 3.8s ease-in-out infinite;
}

.eddy[data-anim='sleeping'] .eddy-logo-eye {
  transform: scaleY(0.07);
}

.eddy[data-anim='sleeping'] .eddy-fx-zzz {
  opacity: 1;
}

.eddy[data-anim='sleeping'] .eddy-fx-z {
  animation: eddy-zzz 3.2s ease-in-out infinite both;
}

.eddy[data-anim='sleeping'] .eddy-fx-z--2 { animation-delay: 0.55s; }
.eddy[data-anim='sleeping'] .eddy-fx-z--3 { animation-delay: 1.1s; }

@keyframes eddy-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.022) translateY(3px); }
}

@keyframes eddy-zzz {
  0%   { opacity: 0; transform: translateY(16px) scale(0.7); }
  22%  { opacity: 1; }
  62%  { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.06); }
}

/* ---------- exit: wind up, zip away ---------- */

.eddy[data-anim='exit'] .eddy-figure {
  animation: eddy-exit 1.15s cubic-bezier(0.55, 0, 0.6, 0.4) both;
}

@keyframes eddy-exit {
  0%   { transform: translateX(0) scaleX(1); opacity: 1; }
  30%  { transform: translateX(-52px) rotate(-3deg) scaleX(0.94); }
  44%  { transform: translateX(-38px) scaleX(1.08); }
  92%  { opacity: 1; }
  100% { transform: translateX(760px) skewX(-8deg) scaleX(1.3); opacity: 0; }
}

/* ---------- hello: a friendly bow and a wink ---------- */

.eddy[data-anim='hello'] .eddy-figure {
  animation: eddy-hello 1.5s cubic-bezier(0.3, 1, 0.4, 1) both;
}

.eddy[data-anim='hello'] .eddy-logo-eye {
  animation: eddy-hello-wink 1.5s ease-in-out both;
}

.eddy[data-anim='hello'] .eddy-logo-swoosh {
  animation: eddy-hello-wag 1.5s ease-in-out both;
}

@keyframes eddy-hello {
  0%   { transform: rotate(0deg) translateY(0); }
  18%  { transform: rotate(8deg) translateY(6px); }
  40%  { transform: rotate(-4deg) translateY(-10px); }
  60%  { transform: rotate(2deg) translateY(0); }
  78%  { transform: rotate(-1deg) translateY(-3px); }
  100% { transform: rotate(0deg) translateY(0); }
}

@keyframes eddy-hello-wink {
  0%, 48%, 78%, 100% { transform: scaleY(1); }
  58%, 68%           { transform: scaleY(0.08); }
}

@keyframes eddy-hello-wag {
  0%, 100%  { transform: rotate(0deg); }
  25%, 65%  { transform: rotate(-14deg); }
  45%, 85%  { transform: rotate(4deg); }
}

/* ---------- writing: pencil works through line after line ---------- */

.eddy[data-anim='writing'] .eddy-figure {
  animation: eddy-float 5.4s ease-in-out infinite;
}

.eddy[data-anim='writing'] .eddy-logo-head {
  transform: rotate(4deg);
}

.eddy[data-anim='writing'] .eddy-logo-eye {
  transform: translate(9px, 11px);
}

.eddy[data-anim='writing'] .eddy-fx-write {
  opacity: 1;
}

.eddy[data-anim='writing'] .eddy-fx-pencil {
  animation: eddy-pencil 4.2s ease-in-out infinite;
}

.eddy[data-anim='writing'] .eddy-fx-scribble--1 { animation: eddy-scribble-1 4.2s linear infinite; }
.eddy[data-anim='writing'] .eddy-fx-scribble--2 { animation: eddy-scribble-2 4.2s linear infinite; }
.eddy[data-anim='writing'] .eddy-fx-scribble--3 { animation: eddy-scribble-3 4.2s linear infinite; }

/* Three passes, one per line, with a small handwriting wobble. */
@keyframes eddy-pencil {
  0%   { transform: translate(0, 0); }
  7%   { transform: translate(48px, -4px); }
  14%  { transform: translate(96px, 3px); }
  21%  { transform: translate(144px, -3px); }
  28%  { transform: translate(190px, 0); }
  33%  { transform: translate(0, 42px); }
  40%  { transform: translate(50px, 38px); }
  47%  { transform: translate(100px, 45px); }
  54%  { transform: translate(150px, 42px); }
  61%  { transform: translate(150px, 42px); }
  66%  { transform: translate(0, 84px); }
  73%  { transform: translate(37px, 80px); }
  80%  { transform: translate(74px, 87px); }
  87%  { transform: translate(110px, 84px); }
  96%  { transform: translate(110px, 84px); }
  100% { transform: translate(0, 0); }
}

@keyframes eddy-scribble-1 {
  0%        { transform: scaleX(0); opacity: 1; }
  28%, 94%  { transform: scaleX(1); opacity: 1; }
  98%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes eddy-scribble-2 {
  0%, 33%   { transform: scaleX(0); opacity: 1; }
  54%, 94%  { transform: scaleX(1); opacity: 1; }
  98%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes eddy-scribble-3 {
  0%, 66%   { transform: scaleX(0); opacity: 1; }
  87%, 94%  { transform: scaleX(1); opacity: 1; }
  98%, 100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- inspecting: magnifier sweeps over the details ---------- */

.eddy[data-anim='inspecting'] .eddy-figure {
  animation: eddy-float 5.6s ease-in-out infinite;
}

.eddy[data-anim='inspecting'] .eddy-fx-lens {
  opacity: 1;
}

.eddy[data-anim='inspecting'] .eddy-fx-lens-g {
  animation: eddy-lens-sweep 3.8s ease-in-out infinite;
}

.eddy[data-anim='inspecting'] .eddy-logo-eye {
  animation: eddy-eye-inspect 3.8s ease-in-out infinite;
}

@keyframes eddy-lens-sweep {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%      { transform: translate(30px, 8px) rotate(3deg); }
  30%      { transform: translate(30px, 8px) rotate(3deg) scale(1.06); }
  58%      { transform: translate(150px, 84px) rotate(-4deg); }
  70%      { transform: translate(150px, 84px) rotate(-4deg) scale(1.06); }
  88%      { transform: translate(52px, 40px) rotate(0deg); }
}

@keyframes eddy-eye-inspect {
  0%, 100% { transform: translate(-8px, -2px) scale(1.06); }
  20%, 30% { transform: translate(-10px, 0) scale(1.1); }
  58%, 70% { transform: translate(6px, 6px) scale(1.1); }
}

/* ---------- shipping: paper planes off to production ---------- */

.eddy[data-anim='shipping'] .eddy-figure {
  animation: eddy-float 4.6s ease-in-out infinite;
}

.eddy[data-anim='shipping'] .eddy-logo-eye {
  transform: translate(10px, -8px);
}

.eddy[data-anim='shipping'] .eddy-logo-line--long {
  animation: eddy-line-pump 1.15s ease-in-out infinite;
}

.eddy[data-anim='shipping'] .eddy-logo-line--short {
  animation: eddy-line-pump 1.15s ease-in-out -0.55s infinite;
}

.eddy[data-anim='shipping'] .eddy-fx-planes {
  opacity: 1;
}

.eddy[data-anim='shipping'] .eddy-fx-plane {
  animation: eddy-plane-fly 2.3s cubic-bezier(0.3, 0.4, 0.4, 1) infinite;
}

.eddy[data-anim='shipping'] .eddy-fx-plane-trail {
  animation: eddy-plane-trail 2.3s ease-out infinite;
}

@keyframes eddy-plane-fly {
  0%   { transform: translate(-56px, 34px) scale(0.72) rotate(-6deg); opacity: 0; }
  14%  { opacity: 1; }
  62%  { transform: translate(150px, -96px) scale(1) rotate(3deg); opacity: 1; }
  92%  { transform: translate(268px, -178px) scale(1.04) rotate(6deg); opacity: 0; }
  100% { transform: translate(268px, -178px) scale(1.04); opacity: 0; }
}

@keyframes eddy-plane-trail {
  0%       { opacity: 0; }
  18%, 55% { opacity: 0.55; }
  80%, 100% { opacity: 0; }
}

/* ---------- nod: a satisfied double nod ---------- */

.eddy[data-anim='nod'] .eddy-logo-head {
  animation: eddy-nod 1.25s ease-in-out both;
}

.eddy[data-anim='nod'] .eddy-logo-eye {
  animation: eddy-nod-squint 1.25s ease-in-out both;
}

.eddy[data-anim='nod'] .eddy-logo-swoosh {
  animation: eddy-hello-wag 1.25s ease-in-out both;
}

@keyframes eddy-nod {
  0%, 100%  { transform: rotate(0deg); }
  22%       { transform: rotate(9deg); }
  44%       { transform: rotate(1deg); }
  64%       { transform: rotate(8deg); }
  86%       { transform: rotate(0deg); }
}

@keyframes eddy-nod-squint {
  0%, 100%   { transform: scaleY(1); }
  20%, 70%   { transform: scaleY(0.55); }
}

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  .eddy .eddy-figure,
  .eddy [class^='eddy-logo'],
  .eddy .eddy-fx,
  .eddy [class*='eddy-fx-'] {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }

  .eddy-fx {
    transition: none;
  }
}