/* scenes/logo-names.css -- styles for js/motion/scenes/logo-names.js (logo (PDF p1) + names (PDF p2)).
   OWNER: the logo-names motion agent (edit only this file + its JS).
   Armed (hidden-before-entrance) states live ONLY under html.motion and only on nodes
   the module claimed ([data-motion="custom"]), so reduced motion / no JS / a module
   that failed to load all show the exact PSD frame. Overlays are created by the JS,
   pointer-events:none unless they are buttons, never larger than the stage. */

/* ---------------------------------------------------------------- armed */
html.motion .scene--logo:not(.is-entered) .stage > .ly[data-motion="custom"],
html.motion .scene--logo:not(.is-entered) .tb[data-motion="custom"] .tl,
html.motion .scene--names:not(.is-entered) .stage > .ly[data-motion="custom"],
html.motion .scene--names:not(.is-entered) .tb[data-motion="custom"] .tl {
  opacity: 0;
}

/* The medallion turns / scales about the centre of its lettering ring
   (logo.webp 590x565: ring centre 309,257). */
.scene--logo [data-layer="logo"],
.scene--logo [data-layer="logo"] img { transform-origin: 52.37% 45.49%; }
.scene--names [data-layer="meadow"] img { transform-origin: 50% 100%; }

/* Handwriting wipe on a Maginia line (geometry set in px by the JS). */
.ln-ink {
  -webkit-mask-image: var(--ln-mi);
  mask-image: var(--ln-mi);
  -webkit-mask-size: var(--ln-ms);
  mask-size: var(--ln-ms);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---------------------------------------------------------------- shared fx */
.ln-pen, .ln-spark, .ln-glow, .ln-blush, .ln-foil, .ln-ring, .ln-shine, .ln-halo, .ln-rays,
.ln-ripple, .ln-diya, .ln-dglint, .ln-flourish, .ln-glyph, .ln-motes {
  position: absolute;
  pointer-events: none;
}
.ln-pen, .ln-spark, .ln-glow, .ln-blush, .ln-ripple, .ln-diya, .ln-dglint, .ln-flourish { opacity: 0; }

/* the nib of the pen: a warm point of light */
.ln-pen {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 253, 242, 1) 0%, rgba(255, 236, 190, 0.9) 26%,
    rgba(232, 186, 118, 0.38) 56%, rgba(232, 186, 118, 0) 100%);
}

/* four-point gold sparkle with a soft glow (deep enough to read on the pale sky) */
.ln-spark::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 250, 232, 0.95) 0%, rgba(250, 222, 160, 0.45) 40%, rgba(240, 205, 140, 0) 100%);
}
.ln-spark svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  fill: #f3cf7a;
  stroke: rgba(176, 124, 44, 0.55);
  stroke-width: 0.6;
}

/* warm bloom behind the medallion */
.ln-glow {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 246, 222, 0.7) 0%, rgba(255, 234, 196, 0.4) 30%,
    rgba(250, 220, 178, 0.16) 58%, rgba(250, 214, 168, 0.05) 80%, rgba(250, 214, 168, 0) 100%);
}
/* blush bloom behind the "&" */
.ln-blush {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 228, 226, 0.95) 0%, rgba(244, 190, 196, 0.45) 40%, rgba(244, 190, 196, 0) 100%);
}

/* foil glint: masked to the logo's own pixels; the band travels (compositor only) */
.ln-foil, .ln-ring {
  overflow: hidden;
  -webkit-mask-image: var(--ln-src);
  mask-image: var(--ln-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: var(--ln-mx) var(--ln-my);
  mask-position: var(--ln-mx) var(--ln-my);
  -webkit-mask-size: calc(590 * var(--u)) calc(565 * var(--u));
  mask-size: calc(590 * var(--u)) calc(565 * var(--u));
}
.ln-foil-band {
  position: absolute;
  inset: -20% -70%;
  opacity: 0;
  background: linear-gradient(112deg,
    rgba(255, 236, 170, 0) 36%, rgba(255, 230, 150, 0.85) 45%, rgba(255, 253, 238, 1) 50%,
    rgba(255, 230, 150, 0.85) 55%, rgba(255, 236, 170, 0) 64%);
}
/* ring light: annulus around the lettering (radius 252 of a 644-wide box) */
.ln-ring-band {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle closest-side,
    transparent 70%, #000 75.5%, #000 81%, transparent 86%);
  mask-image: radial-gradient(circle closest-side,
    transparent 70%, #000 75.5%, #000 81%, transparent 86%);
}
.ln-ring-wedge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(from -20deg,
    rgba(255, 232, 160, 0) 0deg, rgba(255, 230, 150, 0.9) 13deg, rgba(255, 253, 238, 1) 20deg,
    rgba(255, 230, 150, 0.9) 27deg, rgba(255, 232, 160, 0) 40deg, rgba(255, 232, 160, 0) 360deg);
}
/* a sparkle that rides the head of the ring light (zero-size pivot at the ring centre) */
.ln-orbit { position: absolute; width: 0; height: 0; pointer-events: none; }
.ln-orbit > .ln-spark { opacity: 1; }

/* ---------------------------------------------------------------- hashtag */
.ln-hash-btn {
  position: absolute;
  top: calc(var(--cy, 1550) * var(--u) - max(calc(72 * var(--u)), 44px) / 2);
  height: max(calc(72 * var(--u)), 44px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: copy;
  -webkit-tap-highlight-color: transparent;
}
.ln-hash-btn:focus-visible { outline: 2px solid #a84552; outline-offset: 2px; }

.ln-glyph { opacity: 0; transition: opacity 900ms ease; }
.ln-glyph.is-on { opacity: 0.5; }
.ln-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #28441e;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* a light runs along a hairline under the hashtag */
.ln-shine { overflow: hidden; }
.ln-shine-band {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(200, 160, 90, 0) 0%, rgba(214, 176, 104, 0.9) 45%,
    rgba(255, 240, 200, 1) 50%, rgba(214, 176, 104, 0.9) 55%, rgba(200, 160, 90, 0) 100%);
}

.ln-toast {
  position: absolute;
  padding: 0.5em 1.1em 0.55em;
  border-radius: 999px;
  border: 1px solid rgba(190, 150, 86, 0.55);
  background: rgba(255, 252, 244, 0.96);
  box-shadow: 0 6px 18px rgba(60, 70, 50, 0.16);
  color: #28441e;
  font-family: "Quattrocento", Georgia, serif;
  font-size: max(calc(27 * var(--u)), 13px);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
}
.ln-toast::before {
  content: "\2713";
  margin-right: 0.45em;
  color: #a84552;
}
.ln-toast.is-on { animation: ln-toast 2200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ln-toast {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.96); }
  14%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(1); }
}

/* the medallion is a button (petals + sparkle chase) */
.ln-logo-btn {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ln-logo-btn:focus-visible { outline: 2px solid #a84552; outline-offset: -6px; }

/* ---------------------------------------------------------------- names */
/* Ganesha's aura: rests faint after the entrance (the module animates in/out of these) */
.ln-halo {
  opacity: 0.42;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 238, 190, 0.95) 0%, rgba(250, 214, 140, 0.55) 34%,
    rgba(240, 196, 120, 0.18) 62%, rgba(240, 196, 120, 0) 100%);
}
.ln-rays {
  opacity: 0.38;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(236, 196, 118, 0.55) 0deg 2.2deg, rgba(236, 196, 118, 0) 5deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 14%, #000 26%, rgba(0, 0, 0, 0.5) 46%, transparent 68%);
  mask-image: radial-gradient(circle closest-side, transparent 14%, #000 26%, rgba(0, 0, 0, 0.5) 46%, transparent 68%);
}
.ln-ripple {
  border-radius: 50%;
  border: calc(2.5 * var(--u)) solid rgba(214, 170, 92, 0.85);
  box-shadow: 0 0 calc(10 * var(--u)) rgba(240, 200, 130, 0.55), inset 0 0 calc(8 * var(--u)) rgba(240, 200, 130, 0.45);
}
.ln-diya {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 252, 230, 1) 0%, rgba(255, 210, 120, 0.95) 30%,
    rgba(240, 150, 60, 0.4) 62%, rgba(240, 150, 60, 0) 100%);
}
.ln-dglint {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 252, 236, 1) 0%, rgba(232, 196, 120, 0.7) 40%, rgba(232, 196, 120, 0) 100%);
}
.ln-flourish {
  transform-origin: 0% 50%;
  background: linear-gradient(90deg, rgba(168, 69, 82, 0.85), rgba(200, 160, 90, 0.6) 60%, rgba(200, 160, 90, 0));
}
.ln-flourish.is-left {
  transform-origin: 100% 50%;
  background: linear-gradient(270deg, rgba(168, 69, 82, 0.85), rgba(200, 160, 90, 0.6) 60%, rgba(200, 160, 90, 0));
}

.ln-ganesha-btn {
  --ln-bw: max(calc(150 * var(--u)), 44px);
  position: absolute;
  top: 0;
  width: var(--ln-bw);
  height: max(calc(116 * var(--u)), 44px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ln-ganesha-btn:focus-visible { outline: 2px solid #a84552; outline-offset: -4px; }

/* pollen / light motes over the meadow */
.ln-motes { overflow: hidden; }
.ln-mote {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 253, 236, 1) 0%, rgba(255, 240, 190, 0.7) 40%, rgba(255, 240, 190, 0) 100%);
}
.scene--names.ln-motes-on .ln-mote { animation: ln-mote 9s ease-in-out infinite; }
.scene--names.ln-away .ln-mote { animation-play-state: paused; }
@keyframes ln-mote {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  22%  { opacity: var(--o, 0.7); }
  50%  { transform: translate(calc(var(--dx) * 0.45 + 6px), calc(var(--dy) * 0.5)) scale(1); }
  78%  { opacity: var(--o, 0.7); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.7); }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ln-pen, .ln-spark, .ln-glow, .ln-blush, .ln-foil, .ln-ring, .ln-shine, .ln-halo, .ln-rays,
  .ln-ripple, .ln-diya, .ln-dglint, .ln-flourish, .ln-glyph, .ln-motes { display: none; }
  .ln-toast.is-on { animation: none; opacity: 1; transform: translate(-50%, 0); }
}