/* romka.cc motion system: progressive enhancement only. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-motion="nav"],
  .motion-ready .hero .hero-line,
  .motion-ready .hero .hero-copy,
  .motion-ready .hero .hero-actions,
  .motion-ready .hero .hero-scroll-note {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  .motion-ready.motion-home-loaded [data-motion="nav"] {
    animation: romka-enter .48s cubic-bezier(.2,.8,.2,1) .06s both;
  }

  .motion-ready.motion-home-loaded [data-motion-step="hero-intro"] { animation: romka-enter .62s cubic-bezier(.16,1,.3,1) .18s both; }
  .motion-ready.motion-home-loaded [data-motion-step="hero-stack"] { animation: romka-enter .62s cubic-bezier(.16,1,.3,1) .31s both; }
  .motion-ready.motion-home-loaded [data-motion-step="hero-outro"] { animation: romka-enter .62s cubic-bezier(.16,1,.3,1) .44s both; }
  .motion-ready.motion-home-loaded .hero .hero-copy { animation: romka-enter .54s cubic-bezier(.2,.8,.2,1) .62s both; }
  .motion-ready.motion-home-loaded .hero .hero-actions { animation: romka-enter .54s cubic-bezier(.2,.8,.2,1) .72s both; }
  .motion-ready.motion-home-loaded .hero .hero-scroll-note { animation: romka-enter .48s cubic-bezier(.2,.8,.2,1) .86s both; }

  .motion-ready .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0) rotate(var(--reveal-rotate, 0deg));
    transition: opacity .58s ease, transform .72s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .motion-ready .motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--reveal-rotate, 0deg));
  }

  .motion-ready .flow-arrow path,
  .motion-ready svg.motion-draw path {
    stroke-dasharray: var(--path-length, 520);
    stroke-dashoffset: var(--path-length, 520);
    transition: stroke-dashoffset 1.05s cubic-bezier(.33,1,.68,1) var(--draw-delay, 120ms);
  }

  .motion-ready .flow-arrow.is-visible path,
  .motion-ready svg.motion-draw.is-visible path { stroke-dashoffset: 0; }

  .motion-ready .marker-highlight::before,
  .motion-ready .figma-highlight::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .68s cubic-bezier(.16,1,.3,1) .16s;
  }

  .motion-ready .is-visible .marker-highlight::before,
  .motion-ready .marker-highlight.is-visible::before,
  .motion-ready .is-visible .figma-highlight::before,
  .motion-ready .figma-highlight.is-visible::before { transform: scaleX(1); }

  .motion-ready .now-progress-fill {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.16,1,.3,1);
  }

  .motion-ready #now.is-visible .now-progress-fill {
    transform: scaleX(calc(var(--progress-number, 78) / 100));
  }

  .motion-ready .activity-entry,
  .motion-ready .github-entry,
  .motion-ready .lab-entry,
  .motion-ready .lab-project,
  .motion-ready .route-card,
  .motion-ready .error-card {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .48s ease, transform .62s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .motion-ready .activity-entry.is-visible,
  .motion-ready .github-entry.is-visible,
  .motion-ready .lab-entry.is-visible,
  .motion-ready .lab-project.is-visible,
  .motion-ready .route-card.is-visible,
  .motion-ready .error-card.is-visible { opacity: 1; transform: translate3d(0,0,0); }

  .motion-ready .command-palette:not([hidden]) .palette-backdrop,
  .motion-ready .doom-easter:not([hidden]) .doom-backdrop { animation: romka-fade .22s ease both; }
  .motion-ready .command-palette:not([hidden]) .palette-terminal { animation: romka-palette-in .34s cubic-bezier(.16,1,.3,1) both; }
  .motion-ready .doom-easter:not([hidden]) .doom-card { animation: romka-doom-in .72s cubic-bezier(.16,1,.3,1) both; }
  .motion-ready .doom-easter:not([hidden]) .doom-ring.r1 { animation: romka-spin 8s linear infinite; }
  .motion-ready .doom-easter:not([hidden]) .doom-ring.r2 { animation: romka-spin-reverse 5s linear infinite; }
  .motion-ready .doom-easter:not([hidden]) .doom-ring.r3 { animation: romka-doom-pulse 1.8s ease-in-out infinite; }
  .motion-ready .doom-easter:not([hidden]) .doom-face { animation: romka-face .9s steps(2,end) .45s both; }
  .motion-ready .doom-easter:not([hidden]) .doom-mascot-wrap { animation: romka-mascot-glitch .9s steps(2,end) .35s both; }
  .motion-ready .mascot-sticker--hero { animation: romka-mascot-sticker-in .62s cubic-bezier(.16,1,.3,1) .88s both; }
  .motion-ready .route-mascot--github,
  .motion-ready .lab-approved-stamp,
  .motion-ready .error-mascot { animation: romka-mascot-sticker-in .52s cubic-bezier(.16,1,.3,1) .22s both; }

  .motion-ready .motion-drift {
    translate: var(--drift-x, 0px) var(--drift-y, 0px);
    transition: translate .3s ease-out;
    will-change: translate;
  }

  .motion-ready .mac-terminal-window.is-visible .terminal-line {
    animation: romka-terminal-line .35s ease both;
    animation-delay: calc(var(--line-index, 0) * 85ms);
  }

  @keyframes romka-enter { to { opacity: 1; transform: translate3d(0,0,0); } }
  @keyframes romka-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes romka-palette-in { from { opacity: 0; transform: translate3d(0,-18px,0) scale(.985) rotate(-.35deg); } to { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(-.35deg); } }
  @keyframes romka-doom-in { 0% { opacity: 0; transform: scale(.88) rotate(-2deg); filter: contrast(1.8); } 58% { transform: scale(1.025) rotate(.8deg); } 100% { opacity: 1; transform: scale(1) rotate(.4deg); filter: contrast(1); } }
  @keyframes romka-spin { to { transform: rotate(369deg); } }
  @keyframes romka-spin-reverse { to { transform: rotate(-377deg); } }
  @keyframes romka-doom-pulse { 50% { transform: rotate(24deg) scale(.9); opacity: .6; } }
  @keyframes romka-face { 0% { opacity: 0; transform: scale(.6); } 65% { opacity: 1; transform: scale(1.15); } 100% { transform: scale(1); } }
  @keyframes romka-mascot-sticker-in { from { opacity: 0; transform: translate3d(0,14px,0) rotate(14deg) scale(.88); } to { opacity: 1; } }
  @keyframes romka-mascot-glitch { 0% { opacity: 0; transform: translate3d(-7px,2px,0) scale(.82); filter: contrast(2); } 55% { opacity: 1; transform: translate3d(5px,-2px,0) scale(1.08); } 70% { transform: translate3d(-2px,1px,0) scale(.98); } 100% { transform: none; filter: none; } }
  @keyframes romka-terminal-line { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: translateX(0); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .motion-reveal,
  .activity-entry,
  .github-entry,
  .lab-entry,
  .lab-project,
  .route-card,
  .error-card { opacity: 1 !important; transform: none !important; }
  .now-progress-fill { transform: none !important; width: var(--progress, 78%) !important; }
  .mascot-sticker--hero,
  .profile-mascot,
  .palette-whoami-avatar,
  .doom-mascot-wrap,
  .route-mascot--github,
  .lab-approved-stamp,
  .footer-mascot,
  .error-mascot { animation: none !important; transition: none !important; }
}

@media (max-width: 660px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .motion-reveal { transform: translate3d(0, 12px, 0); }
  .motion-ready .motion-reveal.is-visible { transform: translate3d(0,0,0); }
  .motion-ready .motion-drift { translate: none; }
  .motion-ready .doom-easter:not([hidden]) .doom-card { animation-duration: .42s; }
}