/* scenes/logo-names.css -- js/motion/scenes/logo-names.js (logo p1 + names p2).
   Armed (hidden-before-entrance) states live ONLY under html.motion and only on the
   nodes the module claimed, so reduced motion / no JS show the exact PSD frame.
   Overlays are created by the JS: pointer-events:none unless buttons, all small. */

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

/* crest scales / floats about its arch-frame centre (logo.webp 515x457: 257,224) */
.scene--logo [data-layer="logo"],
.scene--logo [data-layer="logo"] img { transform-origin: 50% 49%; }
.scene--names [data-layer="ganesha"] { transform-origin: 50% 60%; }

/* ---------------------------------------------------------------- shared fx */
.ln-spark, .ln-glow, .ln-halo, .ln-rays, .ln-ripple, .ln-diya, .ln-lamp, .ln-refl, .ln-glint {
  position: absolute;
  pointer-events: none;
}
.ln-spark, .ln-glow, .ln-ripple, .ln-diya, .ln-glint { opacity: 0; }

/* four-point gold sparkle with a soft glow (reads 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 crest */
.ln-glow {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 244, 222, 0.85) 0%, rgba(255, 228, 206, 0.5) 30%,
    rgba(250, 210, 196, 0.2) 58%, rgba(250, 210, 196, 0.06) 80%, rgba(250, 210, 196, 0) 100%);
}
.ln-glow.is-still, .ln-halo.is-still { opacity: 0.9; }

/* gold glint: a child of the crest wrapper, masked to the crest's own pixels */
.ln-foil {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--ln-src);
  mask-image: var(--ln-src);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ln-foil-band {
  position: absolute;
  inset: -20% -70%;
  opacity: 0;
  background: linear-gradient(112deg,
    rgba(255, 236, 170, 0) 38%, rgba(255, 222, 140, 0.9) 46%, rgba(255, 252, 236, 1) 50%,
    rgba(255, 222, 140, 0.9) 54%, rgba(255, 236, 170, 0) 62%);
}

/* ---------------------------------------------------------------- buttons */
.ln-crest-btn, .ln-ganesha-btn, .ln-tag {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ln-crest-btn { z-index: 40; border-radius: 46% 46% 30% 30%; }
.ln-ganesha-btn { z-index: 60; min-width: 44px; min-height: 44px; border-radius: 50%; }
.ln-tag { z-index: 60; border-radius: calc(20 * var(--u)); }
.ln-crest-btn:focus-visible, .ln-ganesha-btn:focus-visible, .ln-tag:focus-visible {
  outline: 3px solid #b8476d;
  outline-offset: 2px;
}
.ln-ganesha-btn:focus-visible { outline-offset: -6px; }   /* keep the ring off the line below */

.ln-toast {
  position: absolute;
  z-index: 61;
  left: 50%;
  top: 64%;
  transform: translate(-50%, calc(10 * var(--u)));
  padding: calc(14 * var(--u)) calc(30 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #2f4a2a;
  font: calc(30 * var(--u)) / 1 "Amiri", serif;
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(60, 40, 50, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}
.ln-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ln-toast { transition: none; } }

/* ---------------------------------------------------------------- names: Ganesha */
.ln-halo {
  opacity: 0.5;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 238, 190, 0.95) 0%, rgba(250, 214, 140, 0.6) 34%,
    rgba(240, 196, 120, 0.2) 62%, rgba(240, 196, 120, 0) 100%);
}
.ln-rays {
  opacity: 0.42;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(232, 188, 104, 0.6) 0deg 2.2deg, rgba(232, 188, 104, 0) 5deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 18%, #000 30%, rgba(0, 0, 0, 0.5) 48%, transparent 68%);
  mask-image: radial-gradient(circle closest-side, transparent 18%, #000 30%, rgba(0, 0, 0, 0.5) 48%, 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%);
}

/* ---------------------------------------------------------------- names: ITC Mughal */
.ln-lamp {
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 252, 226, 1) 0%, rgba(255, 228, 140, 0.75) 30%, rgba(255, 210, 110, 0.25) 62%, rgba(255, 206, 110, 0) 100%);
}
.ln-lamp--wide {
  background: radial-gradient(closest-side,
    rgba(255, 238, 190, 0.6) 0%, rgba(255, 222, 160, 0.28) 45%, rgba(255, 214, 150, 0) 100%);
}
/* a lamp's reflection on the water: warm vertical streak, top-anchored */
.ln-refl {
  opacity: 0.45;
  transform-origin: 50% 0%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 244, 196, 1) 0%, rgba(255, 228, 150, 0.6) 45%, rgba(255, 226, 150, 0) 100%);
}
/* a soft light glint drifting on the pool */
.ln-glint {
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 255, 246, 1) 0%, rgba(255, 252, 230, 0.9) 35%, rgba(255, 244, 210, 0.35) 65%, rgba(255, 240, 200, 0) 100%);
  box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 248, 220, 0.5);
}