/* ===========================================================================
   The Telorn logos ([wam_telorn] in wam-telorn.php): colour and motion.
   Shared by every page that shows them (World Lore, Gods of The Multiverse).
     PRIME   the needle swings and settles on north, then never quite stops
             listening; the dashed ring turns; light crosses the letters.
     RELIC   the four pantheon petals open, the bloom turns against its ring
             of marks, Morph's heart breathes, the pantheon gems glow in turn.
   The great compasses sweep a beam of light around their runes.
   =========================================================================== */

@property --tl-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }


.wam-tl { display: block; overflow: visible; }
.wam-tl.is-prime { color: #e7bf62; }
.wam-tl.is-relic { color: #c9c4ff; }
.wam-tl-lockup.is-prime { filter: drop-shadow(0 0 14px rgba(231, 191, 98, 0.28)); }
.wam-tl-lockup.is-relic { filter: drop-shadow(0 0 14px rgba(125, 111, 224, 0.45)); }
.wam-tl :is(.tl-needle, .tl-dash, .tl-bloom, .tl-ticks, .tl-petals, .tl-petal, .tl-morph, .tl-gem) {
  transform-box: fill-box;
  transform-origin: center;
}

/* PRIME: the needle finds north, then never quite stops listening. */
.wam-tl-lockup.is-prime .tl-needle,
.wam-wl-switch [aria-selected="true"] .wam-tl.is-prime .tl-needle {
  animation: tl-find-north 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both, tl-listen 9s ease-in-out 3.2s infinite;
}
.wam-wl-switch [aria-selected="true"] .wam-tl.is-prime .tl-needle { animation-duration: 1.7s, 9s; animation-delay: 0s, 2s; }
@keyframes tl-find-north {
  0% { transform: rotate(-150deg); }
  30% { transform: rotate(32deg); }
  48% { transform: rotate(-16deg); }
  64% { transform: rotate(8deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
@keyframes tl-listen { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(3deg); } 70% { transform: rotate(-2deg); } }
.wam-tl-lockup.is-prime .tl-dash { animation: tl-spin 80s linear infinite; }

/* A band of light across the letters, now and then. */
.wam-tl-lockup .tl-sheen-bar { transform: translateX(0) skewX(-18deg); animation: tl-sheen 8s ease-in-out 2.2s infinite; }
.wam-tl-lockup.is-relic .tl-sheen-bar { animation-delay: 3s; animation-duration: 10s; }
@keyframes tl-sheen { 0% { transform: translateX(0) skewX(-18deg); } 30%, 100% { transform: translateX(680px) skewX(-18deg); } }

/* RELIC: the pantheons open, the bloom turns, Morph breathes. */
:is(.wam-tl-lockup, .wam-tl-heart) .tl-petal,
.wam-wl-switch [aria-selected="true"] .wam-tl.is-relic .tl-petal {
  animation: tl-open 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.25s + var(--i) * 0.12s) both;
}
@keyframes tl-open { from { transform: scale(0); opacity: 0; } }
:is(.wam-tl-lockup, .wam-tl-heart) .tl-petals { animation: tl-spin 140s linear infinite; }
:is(.wam-tl-lockup, .wam-tl-heart) .tl-ticks { animation: tl-spin 200s linear infinite reverse; }
:is(.wam-tl-lockup, .wam-tl-heart) .tl-morph { animation: tl-breathe 4.5s ease-in-out infinite; }
@keyframes tl-breathe { 50% { transform: scale(0.86); opacity: 0.75; } }
.wam-tl-lockup .tl-gem { animation: tl-gem 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
.wam-tl-lockup .tl-flank.is-right .tl-gem { animation-delay: calc(var(--i) * 1.2s + 0.6s); }
@keyframes tl-gem { 0%, 100% { opacity: 0.72; transform: scale(1); } 12% { opacity: 1; transform: scale(1.18); } }
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* The great compasses: a beam of light circles the runes. */
.wam-tl-great { position: relative; width: var(--size, 320px); aspect-ratio: 664 / 670; }
.wam-tl-great > i { position: absolute; inset: 0; -webkit-mask: var(--tl-compass) center / contain no-repeat; mask: var(--tl-compass) center / contain no-repeat; }
.wam-tl-great.is-prime .tl-g-fill { background: linear-gradient(170deg, #fffaf0, #f6ecd4 40%, #e7bf62 80%, #a97c22); }
.wam-tl-great.is-relic .tl-g-fill { background: linear-gradient(170deg, #ffffff, #f4f2ff 30%, #c9c4ff 65%, #7d6fe0); }
.wam-tl-great .tl-g-sweep {
  background: conic-gradient(from var(--tl-sweep), transparent 0 76%, rgba(255, 250, 232, 0.8) 85%, transparent 94%);
  mix-blend-mode: screen;
  animation: tl-sweep 8s linear infinite;
}
.wam-tl-great.is-relic .tl-g-sweep { background: conic-gradient(from var(--tl-sweep), transparent 0 78%, rgba(244, 242, 255, 0.7) 86%, transparent 94%); animation-duration: 11s; }
@keyframes tl-sweep { to { --tl-sweep: 360deg; } }
.wam-tl-great .wam-tl-heart { position: absolute; top: 50%; left: 50%; width: 47%; height: auto; translate: -50% -50%; color: #c9c4ff; }


@media (prefers-reduced-motion: reduce) {
  .wam-tl *, .wam-tl-great * { animation: none !important; }
}

/* The edition's word in its own lettering (the switches). Its own gold or
   astral gradient when chosen; muted to the button's colour when not. */
.wam-tl-word { display: block; width: auto; height: 1.15em; overflow: visible; }
[aria-selected="true"] > .wam-tl-word.is-prime { filter: drop-shadow(0 0 8px rgba(231, 191, 98, 0.45)); }
[aria-selected="true"] > .wam-tl-word.is-relic { filter: drop-shadow(0 0 8px rgba(125, 111, 224, 0.6)); }
[aria-selected="false"] > .wam-tl-word .tl-w-face,
[aria-selected="false"] > .wam-tl-word .tl-w-depth { fill: currentColor; }
[aria-selected="false"] > .wam-tl-word .tl-w-depth { opacity: 0.3; }