/* ============================================================
   hero-atom-cursor.css
   The "dreaming atom" cursor for the hero personal-card.

   Three behaviours, all gated behind body.atom-cursor-ready (set
   by hero-atom-cursor.js) so the native cursor is preserved on
   touch devices, under reduced-motion, or if JS is off.

   1. Idle dream-morph — the atom periodically transforms into one
      of three symbols (chip / folded protein / battery): the
      infinite possibilities of an atom in dreams.
   2. Hover "engineer" — the atom crystallises into a lattice and
      radiates electromagnetic waves.
   3. Hover "dreamer" — gold excitation + ripple water-waves around
      the word + slow rising gold dream-motes + the whole card flushes
      with a shimmering golden afterglow (波光粼粼) that fades over 3s
      after the pointer leaves.

   Tokens: --mint / --mint-bright + the gold accent the hero mesh uses.
   ============================================================ */

.atom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-200px, -200px, 0) translate(-50%, -50%);
  transition: opacity 220ms ease;
  will-change: transform;
}
.atom-cursor.is-on { opacity: 1; }

/* ---- Form stack: only one form is visible at a time ---- */
.atom-form {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.55) rotate(-10deg);
  transition: opacity 480ms ease, transform 560ms var(--ease-spring);
  pointer-events: none;
  color: var(--mint-bright);
}
.atom-form.is-active { opacity: 1; transform: scale(1) rotate(0deg); }
/* Pause the electron orbit while the atom form is hidden (battery) */
.atom-form:not(.is-active) .atom-electron-track { animation-play-state: paused; }
.atom-form svg { width: 34px; height: 34px; filter: drop-shadow(0 0 4px rgba(73, 191, 157, 0.55)); }

/* ---- Atom form: nucleus + three tilted orbit rings ---- */
.atom-nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--mint-bright) 55%, var(--mint) 100%);
  box-shadow: 0 0 10px 2px rgba(73, 191, 157, 0.65);
  transition: transform 300ms var(--ease-spring), box-shadow 300ms ease, background 300ms ease;
  z-index: 3;
}
.atom-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 1px solid rgba(73, 191, 157, 0.28);
  border-radius: 50%;
  transform: rotateX(70deg) rotateZ(var(--rot, 0deg));
  transition: border-color 300ms ease;
}
.atom-orbit-1 { --rot: 0deg; }
.atom-orbit-2 { --rot: 60deg; }
.atom-orbit-3 { --rot: 120deg; }
.atom-electron-track {
  position: absolute;
  inset: 0;
  animation: atom-spin 2.6s linear infinite;
}
.atom-orbit-2 .atom-electron-track { animation-duration: 3.4s; }
.atom-orbit-3 .atom-electron-track { animation-duration: 4.2s; }
.atom-electron {
  position: absolute;
  top: -3.5px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, var(--mint-bright));
  box-shadow: 0 0 8px 1px rgba(73, 191, 157, 0.85);
  transition: background 280ms ease, box-shadow 280ms ease;
}
@keyframes atom-spin { to { transform: rotate(360deg); } }

/* ---- Excitation (dreamer): electrons heat to gold, nucleus swells ---- */
.atom-cursor.is-excited .atom-electron-track { animation-duration: 0.55s !important; }
.atom-cursor.is-excited .atom-electron {
  background: radial-gradient(circle, #ffffff, #f5b942);
  box-shadow: 0 0 10px 2px rgba(245, 185, 66, 0.95);
}
.atom-cursor.is-excited .atom-nucleus {
  transform: scale(1.45);
  box-shadow: 0 0 16px 4px rgba(245, 185, 66, 0.7);
}
.atom-cursor.is-excited .atom-orbit { border-color: rgba(245, 185, 66, 0.4); }

/* ---- Engineer: crystal lattice + electromagnetic waves ---- */
.atom-cursor.is-engineer .atom-form-crystal svg {
  filter: drop-shadow(0 0 6px rgba(73, 191, 157, 0.8));
}
.atom-emwave { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.atom-emwave span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1.5px solid rgba(73, 191, 157, 0.75);
  border-radius: 50%;
  opacity: 0;
}
.atom-cursor.is-engineer .atom-emwave span { animation: atom-emwave 2.2s ease-out infinite; }
.atom-emwave span:nth-child(2) { animation-delay: 0.73s; border-color: rgba(245, 185, 66, 0.65); }
.atom-emwave span:nth-child(3) { animation-delay: 1.46s; }
@keyframes atom-emwave {
  0%   { transform: scale(0.25); opacity: 0.85; }
  100% { transform: scale(3.3);  opacity: 0; }
}

/* ============================================================
   "dreamer" — ripples, dream-motes, and the card's golden tide
   ============================================================ */

.pc-dreamer {
  position: relative;
  transition: text-shadow 320ms ease, color 320ms ease;
}
body.atom-cursor-ready .pc-dreamer.is-excited {
  color: #f5b942;
  text-shadow: 0 0 18px rgba(245, 185, 66, 0.55);
}

/* Expanding water-wave ripple rings emanating from the word */
.pc-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 1px solid rgba(245, 185, 66, 0.7);
  border-radius: 50%;
  opacity: 0.8;
  transform: scale(0.2);
  animation: pc-ripple 1.7s ease-out forwards;
  pointer-events: none;
}
@keyframes pc-ripple {
  0%   { transform: scale(0.2); opacity: 0.85; border-width: 1.5px; }
  100% { transform: scale(6);   opacity: 0;    border-width: 0.5px; }
}

/* Slow rising gold dream-motes */
.pc-mote {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #f5b942);
  box-shadow: 0 0 6px rgba(245, 185, 66, 0.85);
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  animation: pc-mote 2.6s ease-out forwards;
  pointer-events: none;
}
@keyframes pc-mote {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translate(var(--mx, 0px), -52px) scale(0.2); opacity: 0; }
}

/* The card's golden afterglow — concentric golden ripples centred on
   "dreamer" (--rx/--ry, set in JS), layered with a multi-stop gold
   wash for depth. Opacity is toggled by .is-on; the out-transition is
   stretched to 3s in JS when the pointer leaves "dreamer". */
.pc-gold-tide,
.pc-gold-ripples {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
  mix-blend-mode: screen;
  z-index: 0;
}
.pc-gold-tide.is-on,
.pc-gold-ripples.is-on { opacity: 1; }

/* Layered wash: pale-gold core → gold → amber → mint-gold halo → fade.
   Two stacked radials give the afterglow its depth. */
.pc-gold-tide {
  background:
    radial-gradient(circle at var(--rx, 30%) var(--ry, 22%),
      rgba(255, 226, 150, 0.42) 0%,
      rgba(245, 185, 66, 0.30) 16%,
      rgba(217, 138, 40, 0.18) 32%,
      rgba(73, 191, 157, 0.10) 46%,
      transparent 66%),
    radial-gradient(circle at var(--rx, 30%) var(--ry, 22%),
      transparent 40%,
      rgba(245, 185, 66, 0.12) 55%,
      transparent 72%);
}
/* Concentric shimmering rings (波光粼粼) breathing outward from the word */
.pc-gold-ripples {
  background: repeating-radial-gradient(circle at var(--rx, 30%) var(--ry, 22%),
    rgba(245, 185, 66, 0.16) 0px,
    rgba(245, 185, 66, 0.16) 1.5px,
    transparent 1.5px,
    transparent 13px);
}
.pc-gold-ripples.is-on {
  animation: pc-ripple-flow 5s ease-in-out infinite alternate;
}
@keyframes pc-ripple-flow {
  from { background-size: 92% 92%; }
  to   { background-size: 118% 118%; }
}

/* Dreamer material forms take on a gold tint while excited */
.atom-cursor.is-excited .atom-form.is-active { color: #f5b942; }
.atom-cursor.is-excited .atom-form.is-active svg {
  filter: drop-shadow(0 0 6px rgba(245, 185, 66, 0.85));
}

/* ============================================================
   Avatar "light-up" halo + electron rings
   ============================================================ */

.pc-avatar-wrap {
  position: relative;
  display: block;
  width: fit-content;
  height: fit-content;
  margin: 0 auto 8px;
}
.pc-avatar-wrap .pc-avatar {
  margin: 0;
  display: block;
  position: relative;
  z-index: 2;
  transition: filter 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
}

.avatar-aura {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
  z-index: 0;
}
.avatar-aura::before,
.avatar-aura::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(18px);
  will-change: transform;
}
.avatar-aura::before {
  background: conic-gradient(
    from 0deg,
    rgba(73, 191, 157, 0.50) 0deg,
    rgba(245, 185, 66, 0.34) 90deg,
    rgba(73, 191, 157, 0.10) 180deg,
    rgba(245, 185, 66, 0.28) 270deg,
    rgba(73, 191, 157, 0.50) 360deg);
  animation: avatar-aura-rotate 18s linear infinite;
}
.avatar-aura::after {
  background: conic-gradient(
    from 180deg,
    rgba(245, 185, 66, 0.30) 0deg,
    rgba(73, 191, 157, 0.42) 90deg,
    rgba(245, 185, 66, 0.08) 200deg,
    rgba(73, 191, 157, 0.30) 300deg,
    rgba(245, 185, 66, 0.30) 360deg);
  mix-blend-mode: screen;
  animation: avatar-aura-rotate 26s linear infinite reverse;
}
@keyframes avatar-aura-rotate {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.avatar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(73, 191, 157, 0.22);
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease, border-color 600ms ease;
  z-index: 1;
}
.avatar-ring-1 { inset: -8px; }
.avatar-ring-2 { inset: -18px; transform: rotateX(56deg) rotateZ(35deg); }
.avatar-ring-3 { inset: -26px; transform: rotateX(48deg) rotateZ(-30deg); }
.avatar-electron-track { position: absolute; inset: 0; animation: atom-spin 5.5s linear infinite; }
.avatar-ring-2 .avatar-electron-track { animation-duration: 8s; }
.avatar-ring-3 .avatar-electron-track { animation-duration: 11s; }
.avatar-electron {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #f5b942);
  box-shadow: 0 0 8px 1px rgba(245, 185, 66, 0.9);
}

.pc-avatar-wrap.is-lit .avatar-aura,
.pc-avatar-wrap.is-lit .avatar-ring { opacity: 1; }
.pc-avatar-wrap.is-lit .avatar-ring {
  border-color: rgba(245, 185, 66, 0.30);
  animation: avatar-ring-float 7s ease-in-out infinite;
}
.pc-avatar-wrap.is-lit .avatar-ring-2 { animation-duration: 9s;  animation-delay: -2.5s; }
.pc-avatar-wrap.is-lit .avatar-ring-3 { animation-duration: 11s; animation-delay: -5s; }
@keyframes avatar-ring-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}
.pc-avatar-wrap.is-lit .pc-avatar {
  filter: brightness(1.06) saturate(1.05);
  border-color: rgba(245, 185, 66, 0.7);
  box-shadow: 0 0 0 3px rgba(73, 191, 157, 0.18), 0 0 22px rgba(245, 185, 66, 0.25);
}

/* Hide native cursor inside the card once the atom is armed */
body.atom-cursor-ready .personal-card,
body.atom-cursor-ready .personal-card * { cursor: none; }

/* ---- Reduced motion: show states without motion ---- */
@media (prefers-reduced-motion: reduce) {
  .atom-electron-track,
  .atom-form { transition: none; animation: none !important; }
  .atom-form:not(.is-active) .atom-electron-track { animation-play-state: paused; }
  .atom-emwave span,
  .pc-ripple,
  .pc-mote { animation: none !important; }
  .pc-gold-tide.is-on,
  .pc-gold-ripples.is-on { animation: none; }
  .avatar-aura::before,
  .avatar-aura::after { animation: none; }
  .pc-avatar-wrap.is-lit .avatar-ring { animation: none; }
}