/* anyachew.com — cross-page star-iris transitions.
   Included on EVERY page (hub, games, video pages). Pure progressive enhancement: browsers with cross-document
   View Transitions (Chrome/Edge 126+, Safari 18.2+) open each new page through a growing gold-star iris that starts
   where you tapped; everything else navigates normally. No layout or page styles live in this file. */
@view-transition { navigation: auto; }

@property --vt-iris { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root { --vt-x: 50vw; --vt-y: 50vh; }

::view-transition-group(root) { animation-duration: 0.8s; }

/* the page we are leaving sinks back into the night */
::view-transition-old(root) {
  animation: anya-vt-out 0.8s cubic-bezier(0.33, 0, 0.2, 1) both;
}

/* the page we are entering opens through the star, from the tap point */
::view-transition-new(root) {
  animation: anya-vt-in 0.8s linear both;
  -webkit-mask-image: url(star-mask.svg);
          mask-image: url(star-mask.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: var(--vt-iris) var(--vt-iris);
          mask-size: var(--vt-iris) var(--vt-iris);
  -webkit-mask-position: calc(var(--vt-x) - var(--vt-iris) / 2) calc(var(--vt-y) - var(--vt-iris) / 2);
          mask-position: calc(var(--vt-x) - var(--vt-iris) / 2) calc(var(--vt-y) - var(--vt-iris) / 2);
}

/* two phases: a quick bloom to a clearly readable star, then an accelerating sweep past the screen edges */
@keyframes anya-vt-in {
  0%   { --vt-iris: 0px;    transform: scale(1.08) rotate(-3deg); animation-timing-function: cubic-bezier(0.2, 0.75, 0.35, 1); }
  48%  { --vt-iris: 72vmax; transform: scale(1.04) rotate(-1.2deg); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.35); }
  100% { --vt-iris: 560vmax; transform: none; }
}
/* the gold rim (injected by transitions.js on pagereveal) follows exactly the same size curve */
.anya-vt-rim { position: fixed; left: var(--vt-x); top: var(--vt-y); width: 0; height: 0; z-index: 2147483647; pointer-events: none; }
.anya-vt-rim svg {
  position: absolute; overflow: visible; width: var(--vt-iris); height: var(--vt-iris);
  left: calc(var(--vt-iris) / -2); top: calc(var(--vt-iris) / -2);
  filter: drop-shadow(0 0 6px rgba(255, 213, 79, 0.95)) drop-shadow(0 0 18px rgba(240, 111, 184, 0.6));
  animation: anya-vt-rim 0.8s linear both;
}
@keyframes anya-vt-rim {
  0%   { --vt-iris: 0px; opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.75, 0.35, 1); }
  48%  { --vt-iris: 72vmax; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.35); }
  92%  { opacity: 1; }
  100% { --vt-iris: 560vmax; opacity: 0; }
}
@keyframes anya-vt-out {
  to { transform: scale(0.93); filter: brightness(0.5) saturate(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .anya-vt-rim { display: none !important; }
}