/* workshop-zen.css — Ambient post-completion celebration for the workshop room.
   Spawned by frontend/workshop-zen.ts when the player enters the workshop
   after finding all 13 scrolls. Eight layered effects create a living,
   breathing reward space. All containers are aria-hidden; every animation
   is disabled under prefers-reduced-motion. Colors from tokens.css. */

/* --- Container: covers the room stage, pointer-transparent --- */
.workshop-zen-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

/* ==========================================================================
   1. GOD RAYS — slow-rotating golden conic gradient from the top center.
   ========================================================================== */
.zen-godrays {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translateX(-50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 209, 102, 0.12) 0deg,
    transparent 8deg,
    transparent 22deg,
    rgba(255, 209, 102, 0.08) 30deg
  );
  mix-blend-mode: screen;
  filter: blur(8px);
  opacity: 0;
  /* Start immediately on entry — no delay before the rays appear.
     Rotation slowed to 3 minutes so the spin reads as ambient drift,
     in sync with the rest of the meditative pacing (kanji 70-95s,
     rain 50-70s). */
  animation: zenGodraysIn 1.2s ease 0s forwards,
             zenGodraysSpin 180s linear 0s infinite;
}
@keyframes zenGodraysIn {
  to { opacity: 0.95; }
}
@keyframes zenGodraysSpin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* ==========================================================================
   4. GOLD RAIN — small golden droplets falling gently.
   ========================================================================== */
.zen-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.zen-gold-drop {
  position: absolute;
  top: -5%;
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0%,
    var(--color-pixel-cream) 25%,
    var(--color-gold) 55%,
    rgba(255, 209, 102, 0.4) 80%,
    transparent 100%);
  /* Quad-halo glow — pure-white core, warm cream bloom, gold mid-glow,
     wide soft outer halo. The layered shadows make each droplet read
     like a small captured ember. */
  box-shadow:
    0 0 3px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 245, 200, 0.95),
    0 0 16px rgba(255, 209, 102, 0.9),
    0 0 32px rgba(255, 209, 102, 0.45);
  opacity: 0;
  animation:
    zenRainFall var(--zen-dur, 36s) cubic-bezier(0.4, 0.05, 0.6, 1) var(--zen-delay, 0s) infinite,
    zenDropTwinkle calc(var(--zen-dur, 36s) / 6) ease-in-out var(--zen-delay, 0s) infinite;
}
@keyframes zenRainFall {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.95; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(480px) translateX(var(--zen-drift, 0px)); opacity: 0; }
}
/* Twinkle: glow + saturation pulse running 6 times per fall. Adds
   sparkle without speeding up the fall path. */
@keyframes zenDropTwinkle {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.8) saturate(1.5); }
}

/* ==========================================================================
   5. CHERRY BLOSSOMS — glowing sakura petals tumbling down with rotation.
   ========================================================================== */
.zen-blossoms {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.zen-blossom {
  position: absolute;
  top: -8%;
  border-radius: 50% 0 50% 0;
  background: radial-gradient(circle,
    #ffffff 0%,
    rgba(255, 255, 255, 0.95) 20%,
    var(--color-sakura) 45%,
    rgba(255, 107, 157, 0.45) 80%,
    transparent 100%);
  /* Brighter sakura glow — pinks pop against the gold composition. */
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(255, 200, 220, 0.7),
    0 0 20px rgba(255, 107, 157, 0.85),
    0 0 36px rgba(255, 107, 157, 0.4);
  opacity: 0;
  animation: zenBlossomFall var(--zen-dur, 7s) ease-in-out var(--zen-delay, 0s) infinite;
}
@keyframes zenBlossomFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  6%   { opacity: 0.7; }
  50%  { transform: translateY(240px) translateX(calc(var(--zen-drift, 0px) * 0.6)) rotate(calc(var(--zen-rot, 90deg) * 0.5)); opacity: 0.8; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(500px) translateX(var(--zen-drift, 0px)) rotate(var(--zen-rot, 90deg)); opacity: 0; }
}

/* ==========================================================================
   6. SHIMMER ORBS — larger golden spheres that bob gently in place.
   ========================================================================== */
.zen-orbs {
  position: absolute;
  inset: 0;
}
.zen-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0%,
    rgba(255, 255, 255, 0.95) 18%,
    var(--color-gold) 42%,
    rgba(255, 209, 102, 0.25) 75%,
    transparent 100%);
  /* Quad-halo glow on the larger orbs — they read as soft floating
     suns rather than dots. */
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(255, 245, 200, 0.85),
    0 0 26px rgba(255, 209, 102, 0.85),
    0 0 48px rgba(255, 209, 102, 0.4);
  opacity: 0;
  animation:
    zenOrbFloat var(--zen-dur, 16s) ease-in-out var(--zen-delay, 0s) infinite,
    zenOrbTwinkle calc(var(--zen-dur, 16s) / 4) ease-in-out var(--zen-delay, 0s) infinite;
}
@keyframes zenOrbFloat {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  25%      { opacity: 0.75; }
  50%      { transform: translateY(-18px); opacity: 0.95; }
  75%      { opacity: 0.75; }
}
/* Sparkle pulse — brightness + saturation twinkle 4x per orb cycle. */
@keyframes zenOrbTwinkle {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.9) saturate(1.6); }
}

/* ==========================================================================
   7. FLOATING KANJI — translucent characters rising like incense smoke.
   ========================================================================== */
.zen-kanji-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.zen-kanji {
  position: absolute;
  bottom: -10%;
  font-family: var(--font-kanji);
  font-style: normal;
  color: var(--color-gold);
  opacity: 0;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.4);
  animation: zenKanjiRise var(--zen-dur, 10s) ease-out var(--zen-delay, 0s) infinite;
}
@keyframes zenKanjiRise {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  8%   { opacity: 0.15; }
  50%  { opacity: 0.12; }
  85%  { opacity: 0.06; }
  100% { transform: translateY(-520px) scale(1.1); opacity: 0; }
}

/* ==========================================================================
   7b. ROOM SPARKLES — static twinkling dots scattered across the painted
   scene (not falling, not rising). Read as catchlights on dojo surfaces:
   wood grain, scroll racks, the windowsill. Each sparkle pulses in place
   on its own rhythm so the room glints continuously without choreography.
   ========================================================================== */
.zen-sparkles {
  position: absolute;
  inset: 0;
}
.zen-sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0%,
    rgba(255, 245, 200, 0.95) 50%,
    var(--color-gold) 100%);
  /* Tight glow keeps each sparkle reading as a small, sharp catchlight
     even with 110+ on screen. Larger halos would muddy the carpet. */
  box-shadow:
    0 0 2px rgba(255, 255, 255, 1),
    0 0 6px rgba(255, 209, 102, 0.85);
  opacity: 0;
  animation: zenSparkleTwinkle var(--zen-dur, 3s) ease-in-out var(--zen-delay, 0s) infinite;
}
@keyframes zenSparkleTwinkle {
  0%, 100% { transform: scale(0.5); opacity: 0; }
  40%      { transform: scale(1);   opacity: 1; filter: brightness(1.5); }
  60%      { transform: scale(1.2); opacity: 1; filter: brightness(2)   saturate(1.5); }
  80%      { transform: scale(0.8); opacity: 0.7; }
}

/* ==========================================================================
   8. FIREFLIES — warm dots that wander lazily in sine-wave paths.
   ========================================================================== */
.zen-fireflies {
  position: absolute;
  inset: 0;
}
.zen-firefly {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--color-pixel-cream) 0%,
    var(--color-gold) 45%,
    transparent 100%);
  box-shadow: 0 0 8px var(--color-gold),
              0 0 16px rgba(255, 209, 102, 0.3);
  opacity: 0;
  animation: zenFireflyWander var(--zen-dur, 6s) ease-in-out var(--zen-delay, 0s) infinite;
}
@keyframes zenFireflyWander {
  0%       { transform: translate(0, 0); opacity: 0; }
  15%      { opacity: 0.7; }
  25%      { transform: translate(calc(var(--zen-wx, 15px) * 0.5), calc(var(--zen-wy, 10px) * -0.5)); }
  50%      { transform: translate(var(--zen-wx, 15px), var(--zen-wy, 10px)); opacity: 0.9; }
  75%      { transform: translate(calc(var(--zen-wx, 15px) * 0.3), calc(var(--zen-wy, 10px) * -0.8)); }
  85%      { opacity: 0.6; }
  100%     { transform: translate(0, 0); opacity: 0; }
}

/* ==========================================================================
   Accessibility: disable all animations for users who prefer reduced motion.
   ========================================================================== */
/* ==========================================================================
   KORO RECEIVES THE CELEBRATION — while the room is in zen state, force
   the celebrating sprite to be the visible one regardless of the engine's
   movement-driven sprite swaps. The engine still owns position/input;
   this only overrides which sprite renders, so Koro stands in his
   celebrating pose throughout the zen and is part of the moment rather
   than a bystander watching effects play out.
   ========================================================================== */
html.workshop-zen .dojo-koro-player .koro-sprite {
  opacity: 0;
}
html.workshop-zen .dojo-koro-player .koro-sprite[src*="koro_celebrating"] {
  opacity: 1;
  animation:
    koroBreath 2.5s ease-in-out infinite,
    lanternGlow 1.8s ease-in-out infinite;
}

/* Diffused rainbow aura tightly hugging Koro's silhouette — reserved
   for the zen ceremony. Mounted on .koro-squash-wrap (the actual sprite
   container, 128x128) rather than .dojo-koro-player (the 80x80 hitbox),
   so the halo centers on Koro's body, not 24px below it. Sized ~1.4x
   the sprite for a tight halo that blooms just past his outline.
   Heavy blur + partial opacity + screen-blend keep it diffused and
   translucent. Slow spin cycles the color positions around him; a
   gentle breath pulses scale and opacity. */
html.workshop-zen .koro-squash-wrap {
  position: relative;
}
html.workshop-zen .koro-squash-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 38%),
    conic-gradient(
      from 0deg,
      rgba(255, 99, 132, 0.8) 0deg,
      rgba(255, 159, 64, 0.8) 51deg,
      rgba(255, 209, 102, 0.85) 102deg,
      rgba(75, 192, 192, 0.8) 154deg,
      rgba(54, 162, 235, 0.8) 205deg,
      rgba(153, 102, 255, 0.8) 257deg,
      rgba(255, 107, 157, 0.8) 308deg,
      rgba(255, 99, 132, 0.8) 360deg
    );
  filter: blur(22px) saturate(1.3);
  opacity: 0.65;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  animation:
    zenKoroAuraSpin 18s linear infinite,
    zenKoroAuraBreath 5s ease-in-out infinite;
}
@keyframes zenKoroAuraSpin {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  to   { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
@keyframes zenKoroAuraBreath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.8; }
}

/* ==========================================================================
   FLOATING IKIGAI SCROLL — the meta-scroll, hung mid-air at room center.
   Closes the game's scroll-collecting motif: the player has found 13;
   here is the 14th, the one Koro left for them. Tap → opens zo.computer
   in a new tab so the celebration isn't interrupted. The 4-character
   kanji 生き甲斐 (ikigai) reads top-to-bottom as on a traditional kakejiku
   silk banner. Soft gold halo, slow bob, hover brightens — diegetic, not
   a UI banner.
   ========================================================================== */
.zen-zo-scroll {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 6;
  text-decoration: none;
  pointer-events: auto;
  animation: zenScrollIn 1.2s ease 0.4s backwards,
             zenScrollBob 5.5s ease-in-out 1.6s infinite;
  cursor: pointer;
  /* Generous tap target without changing visual size — extra padding +
     pseudo-element hit-zone so a fingertip near the scroll counts. */
  padding: 8px;
}
@keyframes zenScrollIn {
  from { opacity: 0; transform: translate(-50%, 16px) scale(0.85); }
  to   { opacity: 1; transform: translate(-50%, 0)   scale(1);    }
}
@keyframes zenScrollBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}

/* Halo behind the scroll — soft warm aura, slowly pulsing. */
.zen-zo-scroll-aura {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 140px;
  height: 200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(255, 250, 220, 0.55) 0%,
    rgba(255, 209, 102, 0.4) 30%,
    rgba(255, 209, 102, 0.15) 60%,
    transparent 90%);
  filter: blur(14px);
  pointer-events: none;
  animation: zenScrollAuraPulse 3.5s ease-in-out infinite;
  z-index: -1;
}
@keyframes zenScrollAuraPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1);    }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* The scroll body — vertical kakejiku-style banner: cream paper with
   gold edges and a gold-leaf top/bottom rod. */
.zen-zo-scroll-paper {
  position: relative;
  width: 64px;
  padding: 18px 8px;
  background:
    linear-gradient(180deg,
      rgba(255, 245, 215, 0.98) 0%,
      rgba(254, 246, 228, 0.98) 50%,
      rgba(255, 235, 200, 0.98) 100%);
  border-left: 2px solid var(--color-gold);
  border-right: 2px solid var(--color-gold);
  box-shadow:
    0 0 0 2px rgba(15, 14, 23, 0.4),
    0 0 18px rgba(255, 209, 102, 0.65),
    0 0 36px rgba(255, 209, 102, 0.35);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* Top + bottom "rods" of the kakejiku — a thin gold band capping each end. */
.zen-zo-scroll-paper::before,
.zen-zo-scroll-paper::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  height: 6px;
  background: linear-gradient(180deg,
    rgba(255, 209, 102, 0.95) 0%,
    rgba(212, 160, 60, 0.95) 100%);
  border: 1px solid var(--color-bg-deep);
  border-radius: 1px;
}
.zen-zo-scroll-paper::before { top: -8px; }
.zen-zo-scroll-paper::after  { bottom: -8px; }

/* The kanji column — vertical writing, top to bottom, gold ink. */
.zen-zo-scroll-kanji {
  display: block;
  font-family: var(--font-kanji);
  font-size: 22px;
  line-height: 1.18;
  color: var(--color-bg-deep);
  /* CJK vertical writing — rendered top-to-bottom like a real scroll. */
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-shadow:
    0 0 4px rgba(255, 209, 102, 0.6),
    1px 1px 0 rgba(255, 209, 102, 0.4);
  letter-spacing: 2px;
}

/* Hint label below the scroll — small, low-key, tells the player it's
   tappable without being a button. */
.zen-zo-scroll-hint {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--color-pixel-cream);
  opacity: 0.55;
  text-transform: lowercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* Hover/focus: brighter halo, scroll lifts slightly, hint fully visible. */
.zen-zo-scroll:hover .zen-zo-scroll-paper,
.zen-zo-scroll:focus-visible .zen-zo-scroll-paper {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 0 0 2px rgba(15, 14, 23, 0.4),
    0 0 28px rgba(255, 209, 102, 0.95),
    0 0 56px rgba(255, 209, 102, 0.55);
}
.zen-zo-scroll:hover .zen-zo-scroll-hint,
.zen-zo-scroll:focus-visible .zen-zo-scroll-hint {
  opacity: 1;
}
/* Focus state — soft sapphire-blue aura around the scroll instead of
   a sharp outline rectangle. Slow pulse so it reads as ambient, not
   aggressive focus chrome. */
.zen-zo-scroll:focus-visible {
  outline: none;
}
.zen-zo-scroll:focus-visible .zen-zo-scroll-paper,
.zen-zo-scroll.zen-zo-scroll-armed .zen-zo-scroll-paper {
  animation: zenScrollFocusPulse 2.4s ease-in-out infinite;
}
@keyframes zenScrollFocusPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(15, 14, 23, 0.4),
      0 0 18px rgba(70, 145, 230, 0.7),
      0 0 36px rgba(70, 145, 230, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(15, 14, 23, 0.4),
      0 0 28px rgba(70, 145, 230, 1),
      0 0 56px rgba(70, 145, 230, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workshop-zen-layer,
  .workshop-zen-layer * {
    animation: none !important;
  }
  .zen-godrays { opacity: 0.3; }
  .zen-gold-drop,
  .zen-blossom,
  .zen-kanji,
  .zen-firefly,
  .zen-sparkle { display: none; }
  .zen-orb { opacity: 0.4; animation: none; }
  /* Scroll stays visible (it's the call-to-action) but doesn't bob. */
  .zen-zo-scroll {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .zen-zo-scroll-aura { animation: none; opacity: 0.7; }
}