/* =====================================================================
   HermitMonster - transform.css   (persona transition: "The Awakening")
   A circular flood erupts from the toggle, the View Transitions API morphs
   the whole page beneath it, and a great eye opens at the wavefront. Seamless
   crossfade, theme-aware (palette vars), reduced-motion = instant. No assets.
   Origin (--hx,--hy) set in JS from the toggle's centre.
   ===================================================================== */

.hm-awake { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0; visibility: hidden; }
.hm-awake.is-active { opacity: 1; visibility: visible; }

/* colour flood that wipes the new persona in from the switch */
.hm-awake__flood {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at var(--hx,82%) var(--hy,8%), var(--fx-neon,#f25fd8), transparent 42%),
    radial-gradient(circle at var(--hx,82%) var(--hy,8%), var(--fx-neon-2,#8e2de2) 0%, #060a1a 60%);
  clip-path: circle(0% at var(--hx,82%) var(--hy,8%));
}
.hm-awake__flood::after { content:""; position:absolute; inset:0; opacity:.22; mix-blend-mode:overlay; background: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px); animation: ha-roll 6s linear infinite; }

/* VHS static + tracking tears across the whole stage while transitioning */
.hm-awake__vhs { position:absolute; inset:0; opacity:0; mix-blend-mode:screen; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23v)'/%3E%3C/svg%3E"); }
.hm-awake__tear { position:absolute; left:0; right:0; height:18px; mix-blend-mode:screen; opacity:0;
  background:linear-gradient(transparent,rgba(46,197,224,.5),transparent); }

/* the great eye that opens at centre */
.hm-awake__eye { position:absolute; inset:0; display:grid; place-items:center; }
.hm-awake__eye svg { width: clamp(160px, 40vmin, 420px); aspect-ratio:1; opacity:0; transform: scale(.6); filter: drop-shadow(3px 0 var(--fx-neon,#f25fd8)) drop-shadow(-3px 0 var(--fx-cy,#2ec5e0)); }
.ha-iris { transform-box:fill-box; transform-origin:center; transform: scaleY(.02); }
.ha-rays { stroke: var(--fx-cy,#2ec5e0); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }

/* hermit -> monster : flood + eye opens */
.hm-awake.go-monster .hm-awake__flood { animation: ha-flood 1.5s cubic-bezier(.7,0,.2,1) forwards, ha-chroma .18s steps(2) infinite; }
.hm-awake.go-monster .hm-awake__vhs { animation: ha-vhs .12s steps(3) 14, ha-fade 1.6s ease forwards; }
.hm-awake.go-monster .hm-awake__tear { animation: ha-tear 1.5s steps(1) infinite; }
.hm-awake.go-monster .hm-awake__eye svg { animation: ha-eye 1.5s cubic-bezier(.2,.7,.2,1) .15s forwards, ha-jit .16s steps(2) infinite; }
.hm-awake.go-monster .ha-iris { animation: ha-open .8s cubic-bezier(.2,.8,.3,1) .35s forwards; }
.hm-awake.go-monster .ha-rays { animation: ha-rays 1s ease .5s forwards; }

/* monster -> hermit : flood recedes, eye closes */
.hm-awake.go-hermit .hm-awake__flood { animation: ha-flood-out 1s cubic-bezier(.6,0,.3,1) forwards; }
.hm-awake.go-hermit .hm-awake__vhs { animation: ha-vhs .12s steps(3) 8, ha-fade 1s ease forwards; }
.hm-awake.go-hermit .hm-awake__eye svg { animation: ha-eye-out .8s ease forwards; }
.hm-awake.go-hermit .ha-iris { transform: scaleY(1); animation: ha-close .55s ease forwards; }

@keyframes ha-flood { 0%{clip-path:circle(0% at var(--hx) var(--hy))} 70%{clip-path:circle(150% at var(--hx) var(--hy));opacity:1} 100%{clip-path:circle(150% at var(--hx) var(--hy));opacity:0} }
@keyframes ha-flood-out { 0%{clip-path:circle(150% at var(--hx) var(--hy));opacity:1} 100%{clip-path:circle(0% at var(--hx) var(--hy));opacity:0} }
@keyframes ha-eye { 0%{opacity:0;transform:scale(.6)} 30%{opacity:1;transform:scale(1)} 80%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.1)} }
@keyframes ha-eye-out { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.7)} }
@keyframes ha-open { 0%{transform:scaleY(.02)} 100%{transform:scaleY(1)} }
@keyframes ha-close { 0%{transform:scaleY(1)} 100%{transform:scaleY(.02)} }
@keyframes ha-rays { 0%{opacity:0;transform:scale(.4)} 40%{opacity:.7} 100%{opacity:0;transform:scale(1.6)} }
@keyframes ha-chroma { 0%,100%{filter:none} 50%{filter:hue-rotate(40deg) saturate(1.4)} }
@keyframes ha-jit { 0%,100%{transform:scale(1) translate(0,0);filter:drop-shadow(3px 0 var(--fx-neon,#f25fd8)) drop-shadow(-3px 0 var(--fx-cy,#2ec5e0))} 50%{transform:scale(1) translate(4px,-2px);filter:drop-shadow(-6px 0 var(--fx-neon,#f25fd8)) drop-shadow(6px 0 var(--fx-cy,#2ec5e0))} }
@keyframes ha-vhs { 0%{opacity:.14;transform:translate(0,0)} 50%{opacity:.22;transform:translate(-4px,3px)} 100%{opacity:.1;transform:translate(3px,-2px)} }
@keyframes ha-fade { 0%{opacity:.2} 80%{opacity:.16} 100%{opacity:0} }
@keyframes ha-roll { to{background-position:0 200px} }
@keyframes ha-tear { 0%,30%,100%{top:18%;opacity:0} 32%{top:30%;opacity:.8} 33%{opacity:0} 64%{top:58%;opacity:.7} 65%{opacity:0} 88%{top:82%;opacity:.6} 89%{opacity:0} }

/* View Transitions: whole-page seamless crossfade */
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.6s; animation-timing-function:cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .hm-awake, .hm-awake * { animation: none !important; }
  .hm-awake.is-active { opacity:0 !important; visibility:hidden !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}