/* =====================================================================
   BreakThrough Education — Tier-A "living world" scene layer styling
   (js/scene-fx.js): ambient FX, secrets, keeper. Sits inside .biome,
   above the painting/parallax, below the task nodes (z14).
   ===================================================================== */

/* ---------------- ambient FX ---------------- */
.b-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: 14px; }

.fx-mote {
  position: absolute; bottom: -2%; border-radius: 50%;
  background: radial-gradient(circle, var(--mc, #fff), transparent 72%);
  opacity: 0; filter: blur(.3px);
  animation: fx-rise var(--dur, 16s) linear infinite;
}
@keyframes fx-rise {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; }
  12% { opacity: .85; } 88% { opacity: .7; }
  100% { transform: translate(var(--dx, 20px), -104%) scale(1.1); opacity: 0; }
}

.fx-ray {
  position: absolute; top: -30%; width: 38%; height: 150%;
  background: linear-gradient(to bottom, rgba(255,240,200,.10), transparent 70%);
  transform: rotate(14deg); transform-origin: top center; mix-blend-mode: screen;
  filter: blur(8px); animation: fx-ray-shimmer 9s ease-in-out infinite;
}
.fx-ray.r1 { left: 6%; }
.fx-ray.r2 { left: 40%; animation-delay: 2.5s; opacity: .8; }
.fx-ray.r3 { left: 70%; animation-delay: 5s; opacity: .6; }
@keyframes fx-ray-shimmer { 0%,100% { opacity: .35; transform: rotate(14deg) translateX(0); } 50% { opacity: .7; transform: rotate(14deg) translateX(10px); } }

.fx-twinkle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff6d8; box-shadow: 0 0 6px 1px rgba(255,225,150,.9);
  opacity: 0; animation: fx-twinkle var(--td, 3s) ease-in-out infinite;
}
@keyframes fx-twinkle { 0%,100% { opacity: 0; transform: scale(.6); } 50% { opacity: .95; transform: scale(1); } }

/* far-off bird silhouette (two angled wings) */
.fx-bird { position: absolute; left: -6%; width: 16px; height: 8px; opacity: .55; animation: fx-glide var(--bd, 32s) linear infinite; }
.fx-bird b { position: absolute; top: 3px; width: 9px; height: 2px; background: rgba(20,24,34,.8); border-radius: 2px; }
.fx-bird b:first-child { left: 0; transform: rotate(20deg); }
.fx-bird b:last-child { right: 0; transform: rotate(-20deg); }
@keyframes fx-glide {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: .55; } 92% { opacity: .5; }
  100% { transform: translate(116vw, -22px); opacity: 0; }
}

/* ---------------- secrets ---------------- */
.b-secrets { position: absolute; inset: 0; z-index: 13; pointer-events: none; }
.b-secret {
  position: absolute; transform: translate(-50%,-50%); width: 30px; height: 30px;
  background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
}
.secret-glint {
  position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,235,170,.5) 50%, transparent 70%);
  box-shadow: 0 0 10px 3px rgba(255,225,150,.8);
  animation: secret-pulse 2.4s ease-in-out infinite;
}
@keyframes secret-pulse { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.b-secret:hover .secret-glint { animation-duration: 1s; }
.b-secret:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 50%; }
.b-secret.found .secret-glint { background: radial-gradient(circle, rgba(120,230,150,.9), transparent 70%); box-shadow: 0 0 8px 2px rgba(80,210,120,.6); opacity: .5; animation: none; }
.secret-burst { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff, transparent 60%); animation: secret-burst .85s ease-out forwards; pointer-events: none; }
@keyframes secret-burst { from { transform: scale(.4); opacity: .95; } to { transform: scale(7); opacity: 0; } }

/* discovery card */
.secret-pop { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: auto; }
.secret-pop .secret-card {
  text-align: center; padding: 22px 30px; border-radius: 20px;
  background: rgba(12,18,32,.86); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 60px rgba(0,0,0,.6); color: #fff; transform: scale(.7); opacity: 0;
  transition: transform .3s var(--ease, cubic-bezier(.2,.8,.2,1)), opacity .3s;
}
.secret-pop.show .secret-card { transform: scale(1); opacity: 1; }
.secret-emoji { font-size: 3rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.secret-af { font-family: var(--font); font-weight: 800; font-size: 2rem; margin-top: 6px; }
.secret-en { color: #bcd0f0; font-weight: 600; font-size: 1.05rem; }
.secret-tag { margin-top: 10px; font-family: var(--font); font-weight: 800; font-size: .8rem; color: #ffe08a; }

/* discoveries HUD chip */
.b-discoveries {
  position: absolute; top: 16px; right: 16px; z-index: 15;
  font-family: var(--font); font-weight: 800; font-size: .82rem; color: #fff;
  background: rgba(8,14,30,.6); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 7px 14px; backdrop-filter: blur(8px);
}

/* ---------------- keeper ---------------- */
.b-keeper { position: absolute; left: 18px; bottom: 18px; z-index: 16; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
.keeper-portrait {
  pointer-events: auto; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--ka, #7fd0ff); background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), rgba(10,16,30,.85));
  display: grid; place-items: center; font-size: 1.9rem; box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 18px -4px var(--ka, #7fd0ff);
  transition: transform .15s var(--ease); animation: keeper-bob 4s ease-in-out infinite;
}
.keeper-portrait:hover { transform: translateY(-3px) scale(1.05); }
@keyframes keeper-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.keeper-bubble {
  pointer-events: none; max-width: min(62vw, 360px); margin-bottom: 8px; opacity: 0; transform: translateY(8px) scale(.96);
  transform-origin: left bottom; transition: opacity .3s var(--ease), transform .3s var(--ease);
  background: rgba(255,255,255,.97); color: #21303f; border-radius: 16px 16px 16px 4px;
  padding: 12px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.keeper-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.keeper-bubble p { margin: 0; font-family: var(--font); font-weight: 700; font-size: .98rem; line-height: 1.4; }
.keeper-bubble .keeper-name { display: block; margin-top: 6px; font-size: .72rem; font-weight: 800; color: #6b7a90; text-transform: uppercase; letter-spacing: .5px; }

/* reduced motion: kill all the looping animation, keep everything legible + interactive */
@media (prefers-reduced-motion: reduce) {
  .fx-mote, .fx-ray, .fx-twinkle, .fx-bird, .secret-glint, .keeper-portrait { animation: none !important; }
  .fx-mote, .fx-bird { opacity: .4; }
  .secret-glint { opacity: .8; }
}