/* Right hero window: the AtarUp mark assembles piece by piece in sync with the code blocks.
   motion.js drives every value through CSS custom properties, inline styles and attributes; no independent timers. */
#atarup-hero-animation .ah-logo-stage {
  display: flex;
  position: relative;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px 24px 30px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 58%, var(--surface-2), var(--surface) 72%);
}

/* Shockwave rings on completion: centre, radius and opacity come from motion.js; clipped by the stage. */
#atarup-hero-animation .ah-logo-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.75;
  pointer-events: none;
}
#atarup-hero-animation .ah-logo-rings [data-ring="0"] { stroke: #fd7103; }

/* Mark wrapper: pop scale, glow under the U, fade before the next cycle. */
#atarup-hero-animation .ah-logo-mark {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(84%, 400px);
  opacity: var(--logo-fade, 1);
}
#atarup-hero-animation .ah-logo-mark::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 48%;
  bottom: -18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(253, 113, 3, .42), rgba(253, 113, 3, 0) 70%);
  filter: blur(22px);
  opacity: var(--logo-glow, 0);
  pointer-events: none;
}
#atarup-hero-animation .ah-logo-svg {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: scale(var(--logo-pop, 1));
  transform-origin: 50% 58%;
}

/* Blueprint ghost: each piece keeps its thin outline until its own code block starts. */
#atarup-hero-animation .ah-logo-ghost {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
#atarup-hero-animation .ah-logo-ghost [data-ghost] { opacity: 0; }
#atarup-hero-animation .ah-logo-ghost .ah-logo-u { stroke: #fd7103; }

/* Solid pieces rise inside per-piece clip rectangles; each piece pops briefly when its block ends. */
#atarup-hero-animation .ah-logo-fills { fill: var(--ink); }
#atarup-hero-animation .ah-logo-fills .ah-logo-u { fill: #fd7103; }
#atarup-hero-animation .ah-logo-fills [data-fill] { transform-box: fill-box; transform-origin: 50% 50%; }
/* Flash on completion: soft halo and a touch of brightness, peaking on the first beat. */
#atarup-hero-animation .ah-logo-stage.is-pulsing .ah-logo-fills .ah-logo-a {
  filter: drop-shadow(0 0 calc(var(--logo-flash, 0) * 8px) color-mix(in srgb, var(--ink) 45%, transparent)) brightness(calc(1 + var(--logo-flash, 0) * .18));
}
#atarup-hero-animation .ah-logo-stage.is-pulsing .ah-logo-fills .ah-logo-u {
  filter: drop-shadow(0 0 calc(var(--logo-flash, 0) * 10px) rgba(253, 113, 3, .7)) brightness(calc(1 + var(--logo-flash, 0) * .22));
}

/* Contours draw with stroke-dashoffset (pathLength="100"); the piece being drawn is slightly brighter. */
#atarup-hero-animation .ah-logo-strokes {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-opacity: 0;
}
#atarup-hero-animation .ah-logo-strokes .ah-logo-u { stroke: #fd7103; }
#atarup-hero-animation .ah-logo-strokes [data-stroke].is-drawing {
  stroke-width: 6;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ink) 45%, transparent));
}
#atarup-hero-animation .ah-logo-strokes .ah-logo-u.is-drawing {
  filter: drop-shadow(0 0 5px rgba(253, 113, 3, .6));
}

/* Living orange bubbles clipped inside the U pieces, light sweep clipped inside all pieces. */
#atarup-hero-animation .ah-logo-bubbles { opacity: var(--logo-bubbles, 0); }
#atarup-hero-animation .ah-logo-sweep { opacity: var(--logo-sweep, 0); mix-blend-mode: screen; }
html[data-theme="stripe"] #atarup-hero-animation .ah-logo-sweep { mix-blend-mode: normal; }

#atarup-hero-animation .ah-logo-caption {
  position: relative;
  z-index: 1;
  flex: none;
  direction: ltr;
  font: 700 22px/1.1 var(--f-display);
  letter-spacing: -.02em;
  color: var(--ink);
  opacity: calc(var(--logo-caption, 0) * var(--logo-fade, 1));
  transform: translateY(calc((1 - var(--logo-caption, 0)) * 8px));
}

@media (max-width: 700px) {
  #atarup-hero-animation .ah-logo-stage { gap: 16px; padding: 20px 18px 22px; }
  #atarup-hero-animation .ah-logo-mark { width: min(70%, 300px); }
  #atarup-hero-animation .ah-logo-caption { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  #atarup-hero-animation .ah-logo-ghost,
  #atarup-hero-animation .ah-logo-bubbles,
  #atarup-hero-animation .ah-logo-rings,
  #atarup-hero-animation .ah-logo-sweep { display: none; }
}