/* Smarco — living logo (see js/logo-live.js). At rest the layers are identical to the official logo. */
.logo-stack.lg-wrap { position: relative; display: inline-block; line-height: 0; }
.logo-stack.lg-wrap > .lg-full { display: block; }
.lg-live { position: absolute; inset: 0; pointer-events: none; }
.lg-live .lv-base { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-stack .lg-live img { margin: 0; max-width: none; }
.lg-live i, .lg-live .lv-star { position: absolute; display: block; max-width: none; }
.lg-live i { background: var(--u) center / 100% 100% no-repeat; will-change: transform; }
.logo-stack.is-live > .lg-full { visibility: hidden; }
/* film page: the layers follow the logo while its stars are away */
html.stars-out .logo-plate .lg-live, html.stars-out:not(.stars-home) .fan-logo .lg-live { opacity: 0; }

/* SMARCO: a soft wave and a glint of brass light that travels across the word */
.lv-l::after { content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,226,160,0) 38%, #FFE2A0 50%, #D8A848 56%, transparent 68%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: var(--u) center / 100% 100% no-repeat; mask: var(--u) center / 100% 100% no-repeat; }
.lg-play .lv-l { animation: lv-wave .9s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 85ms); }
.lg-play .lv-l::after { animation: lv-glint 1.1s ease-in-out both; animation-delay: calc(200ms + var(--i) * 85ms); }
@keyframes lv-wave { 0% { transform: none; } 35% { transform: translateY(-14%) scale(1.04); } 100% { transform: none; } }
@keyframes lv-glint { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -50% 0; } }

/* the orange peak rocks forward and back, like a sail catching the wind (3D tilt around its base) */

.lv-tri { transform-origin: 50% 96%; animation: lv-sway 3.2s ease-in-out infinite; }
@keyframes lv-sway {
  0%, 100% { transform: perspective(var(--pz, 60px)) rotateX(0deg); filter: brightness(1); }
  25% { transform: perspective(var(--pz, 60px)) rotateX(-42deg); filter: brightness(1.12); }
  50% { transform: perspective(var(--pz, 60px)) rotateX(4deg); filter: brightness(.98); }
  75% { transform: perspective(var(--pz, 60px)) rotateX(40deg); filter: brightness(.82); }
}
a:hover .lv-tri, button:hover .lv-tri { animation-duration: 1.7s; }
.lg-play .lv-tri { animation: lv-pop .9s cubic-bezier(.3,1.6,.5,1) both .45s, lv-sway 3.2s ease-in-out infinite 1.35s; }
@keyframes lv-pop { 0% { transform: perspective(var(--pz, 60px)) rotateX(0deg); } 35% { transform: perspective(var(--pz, 60px)) rotateX(-50deg); filter: brightness(1.18); } 70% { transform: perspective(var(--pz, 60px)) rotateX(18deg); } 100% { transform: perspective(var(--pz, 60px)) rotateX(0deg); } }

/* the stars twinkle, each on its own rhythm */
.lg-live .lv-star { transform-origin: 50% 50%; animation: lv-twinkle var(--tt, 3.4s) ease-in-out infinite var(--td, 0s); }
@keyframes lv-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1) drop-shadow(0 0 0 rgba(255,214,120,0)); }
  18% { transform: scale(1.16) rotate(8deg); filter: brightness(1.28) drop-shadow(0 0 4px rgba(255,214,120,.95)); }
  34% { transform: scale(.94) rotate(-2deg); filter: brightness(.95) drop-shadow(0 0 0 rgba(255,214,120,0)); }
  50% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}
/* a small white glint beside the biggest star */
.lg-live::after { content: ""; position: absolute; left: 18.4%; top: 36%; width: 3.6%; height: 7.2%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 12%, transparent 13%), linear-gradient(#fff, #fff) center / 9% 100% no-repeat, linear-gradient(90deg, #fff, #fff) center / 100% 9% no-repeat;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  filter: drop-shadow(0 0 3px #FFE7B0); opacity: 0; animation: lv-glint-star 4.8s ease-in-out infinite 1.6s; }
@keyframes lv-glint-star { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 78% { opacity: 1; transform: scale(1.2) rotate(45deg); } 88% { opacity: 0; transform: scale(.4) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) { .lv-tri, .lg-play .lv-tri, .lg-play .lv-l, .lg-play .lv-l::after, .lg-live .lv-star, .lg-live::after { animation: none; } }
/* restraint: the stars glimmer rather than pulse */
.lg-live .lv-star { animation-name: lv-glimmer; animation-duration: calc(var(--tt, 3.4s) * 1.6); }
@keyframes lv-glimmer {
  0%, 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(255,214,120,0)); }
  14% { transform: scale(1.08) rotate(4deg); filter: brightness(1.2) drop-shadow(0 0 3px rgba(255,214,120,.8)); }
  30% { transform: scale(1); filter: brightness(1); }
}
.lg-live::after { animation-duration: 7.5s; }
/* the opening: the centre logo keeps its fixed placement while it carries the live layers */
#intro-logo.logo-stack { position: fixed; display: block; }
#intro-logo .lg-live { z-index: 2; }