/* Logo animations for the dot logo in the island nav (Vale Admin: Logo screen).
 * The logo is always visible by default. logo-anim.js adds classes to play an animation,
 * so if the script fails the logo simply shows. Transform and opacity only, no layout shift. */
html.la-pending .island-logo { opacity: 0; }

.island-logo.la-play { animation-duration: var(--la-dur, 1s); animation-fill-mode: both; will-change: transform, opacity; }
.island-logo.la-play.la-spin   { animation-name: la-spin;   animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.island-logo.la-play.la-settle { animation-name: la-settle; animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
.island-logo.la-play.la-roll   { animation-name: la-roll;   animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.island-logo.la-play.la-grow   { animation-name: la-grow;   animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
.island-logo.la-play.la-flip   { animation-name: la-flip;   animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.island-logo.la-hide { opacity: 0; }

@keyframes la-spin {
  from { opacity: 0; transform: rotate(-360deg) scale(.4); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes la-settle {
  0%   { opacity: 0; transform: rotate(-330deg) scale(.4); }
  55%  { opacity: 1; transform: rotate(28deg) scale(1.14); }
  78%  { transform: rotate(-9deg) scale(.96); }
  90%  { transform: rotate(3deg) scale(1.01); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes la-roll {
  from { opacity: 0; transform: translateX(-140%) rotate(-540deg); } /* same distance as the Vale Admin tile */
  30%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes la-grow {
  from { opacity: 0; transform: scale(.15); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes la-flip {
  from { opacity: 0; transform: perspective(300px) rotateY(-540deg) scale(.6); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(300px) rotateY(0) scale(1); }
}

/* Roll in stays inside the white menu pill: it rolls out from the pill's rounded edge */
.island:has(.island-logo.la-play.la-roll) { overflow: hidden; }

/* Dots gather: an inline copy of the logo laid exactly over the picture while the dots fly in */
.la-dots { position: absolute; pointer-events: none; overflow: visible; z-index: 1; }
.la-dots circle { transform-box: fill-box; transform-origin: center; }

/* Passive effects after the intro (Vale Admin: Logo screen, "After it comes in").
 * logo-anim.js puts lp-on and lp-<style> on <html>, and lp-run while the effect may move
 * (tab visible, mouse not over the logo, idle when asked). The individual rotate and scale
 * properties are used, so the mouse-over spin (transform) still works on top. No layout shift. */
html.lp-turn .island-logo:not(.la-play) { animation: lp-turn var(--lp-dur, 26s) linear infinite; animation-play-state: paused; }
html.lp-breathe .island-logo:not(.la-play) { animation: lp-breathe var(--lp-dur, 4.2s) ease-in-out infinite; animation-play-state: paused; }
html.lp-turn.lp-run .island-logo:not(.la-play),
html.lp-breathe.lp-run .island-logo:not(.la-play) { animation-play-state: running; }
.island-logo.lp-wob:not(.la-play) { animation: lp-wobble var(--lp-dur, 1.1s) cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes lp-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes lp-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes lp-wobble {
  0%, 100% { rotate: 0deg; }
  18% { rotate: -11deg; }
  38% { rotate: 8deg; }
  58% { rotate: -5deg; }
  78% { rotate: 2deg; }
}
.lp-dots circle { transform-box: fill-box; transform-origin: center; }

/* Spin on hover, computers only */
@media (hover: hover) and (pointer: fine) {
  html.la-hover .island-logo:not(.la-play) { transition: transform .8s cubic-bezier(.34, 1.2, .64, 1); }
  html.la-hover .island-brand:hover .island-logo:not(.la-play) { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.la-pending .island-logo, .island-logo.la-hide { opacity: 1; }
  .island-logo.la-play { animation: none !important; }
  .la-dots { display: none; }
  html.la-hover .island-brand:hover .island-logo { transform: none !important; }
  .island-logo, .island-logo.lp-wob { animation: none !important; rotate: none !important; scale: none !important; }
  .lp-dots { display: none; }
}