/* ==============================================================
   MAKETHEFISHRICH -- aquarium.css
   THE CHRISTENING -- a TRANSPARENT overlay on the stream frame.

   The stream/aquarium underneath is NEVER replaced or hidden: whether the
   stream is live or offline, its content stays visible the whole time. The
   overlay only ADDS ceremonial elements -- a countdown, soft light, a few
   rising bubbles, a confirmation -- and drops the just-made wish into the
   water using the SHARED wish-drop (wish-card.css `.is-sinking`), the exact
   same card + motion the OBS overlay uses. So the submitter and everyone
   watching the stream see the same wish enter the same way.

   Everything scales to the stream frame via container queries.
   ============================================================== */

/* The ceremony layer -- fills the stream frame, TRANSPARENT so the real
   aquarium shows through. container-type lets the wish + effects size to
   THIS frame (and the shared wishSink's cqh travel resolve to it). */
.aq-frame {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  container-type: size;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  background: transparent;
  color: #EEE7D8;
}
.aq-frame.on { opacity: 1; pointer-events: auto; }
.aq-frame[hidden] { display: none; }

/* The AMBIENT layer -- the homepage's quiet presentation of a global
   "a wish entered the aquarium" event (aquarium events feed): the shared
   card sinks into the stream frame with no countdown/veil/ceremony. Always
   transparent + non-interactive; sits UNDER the ceremony layer (z 40).
   Same container-type as .aq-frame so the shared wishSink cqh travel
   resolves to the stream frame here too. */
.aq-ambient {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
  background: transparent;
}

/* The dropped wish -- the SHARED card (wish-card.css), centred and scaled to
   the frame, using the shared wishSink drop. --sink-x:-50% centres it.
   Identical in the ceremony layer and the ambient layer. */
.aq-frame .wish-note,
.aq-ambient .wish-note {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 5;
  --sink-x: -50%;
  --sink-dur: 6s;
  font-size: clamp(9px, 2.4cqh, 15px);   /* THE card scale knob, per frame */
  width: clamp(150px, 58cqh, 236px);
}
@container (max-width: 459px) {
  .aq-frame .wish-note,
  .aq-ambient .wish-note { width: clamp(140px, 46cqw, 172px); font-size: clamp(9px, 4.2cqw, 12px); }
  .aq-frame .wish-note .wish-note-text,
  .aq-ambient .wish-note .wish-note-text { -webkit-line-clamp: 2; }
}

/* Soft light from above -- additive, subtle; the stream still reads through. */
.aq-beam {
  position: absolute; left: 50%; top: -12%; z-index: 2;
  width: clamp(150px, 56cqh, 340px); height: 122%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(236,192,87,.16), rgba(212,168,67,.03) 55%, transparent 78%);
  filter: blur(9px); opacity: 0; transition: opacity .8s ease;
  /* `left` is set by JS to the wish's landing column before the ceremony
     paints, so the beam is a fixed shaft the wish falls straight through. */
  pointer-events: none; mix-blend-mode: screen;
}
.aq-beam.on { opacity: 1; }

/* Golden pool where the wish settles -- fades in as it reaches the bottom,
   echoing the card's own glow, then fades with it. */
.aq-spot {
  position: absolute; left: 50%; bottom: 6%; z-index: 3;
  width: clamp(150px, 66cqh, 360px); height: clamp(80px, 34cqh, 190px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(212,168,67,.24), rgba(212,168,67,.05) 45%, transparent 72%);
  opacity: 0; transition: opacity .7s ease;
  pointer-events: none; mix-blend-mode: screen;
}
.aq-spot.on { opacity: 1; }

/* A whisper of darkening behind the countdown only -- localised + light, so
   the numerals read over any stream content while the stream stays visible. */
.aq-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* Vertical centre follows the countdown (JS sets --aq-veil-y when the
     countdown is moved off-centre offline to clear the mascot). */
  background: radial-gradient(42% 36% at 50% var(--aq-veil-y, 42%), rgba(4,4,6,.4), transparent 72%);
  opacity: 0; transition: opacity .5s ease;
}
.aq-veil.on { opacity: 1; }

/* Subtle rising bubbles/particles. */
.aq-bubbles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.aq-bubble {
  position: absolute; bottom: -8%;
  width: var(--b, 6px); height: var(--b, 6px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(236,192,87,.55), rgba(212,168,67,.12) 60%, transparent 72%);
  opacity: 0;
  animation: aqRise var(--bd, 7s) ease-in var(--bdelay, 0s) infinite;
}
@keyframes aqRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  14%  { opacity: .5; }
  72%  { opacity: .32; }
  100% { transform: translateY(-116cqh) translateX(var(--bx, 8px)); opacity: 0; }
}

/* ── Countdown (the submitter's lead-in) ── */
.aq-stage {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; padding: 6%;
}
.aq-eyebrow {
  font-family: 'Playfair Display', serif;
  font-size: clamp(13px, 4cqh, 20px); font-style: italic; color: #EEE7D8;
  letter-spacing: .3px; margin-bottom: clamp(2px, 1cqh, 6px);
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(5px);
  transition: opacity .5s ease, transform .5s ease;
}
.aq-eyebrow em { color: #ECC057; font-style: italic; }
.aq-eyebrow.on { opacity: 1; transform: none; }
.aq-count {
  font-family: 'Playfair Display', serif; font-weight: 900;
  font-size: clamp(46px, 21cqh, 104px); line-height: 1;
  color: #ECC057; text-shadow: 0 0 40px rgba(212,168,67,.4), 0 3px 18px rgba(0,0,0,.8);
}
.aq-count .aq-num { display: inline-block; }
.aq-count .aq-num.tick { animation: aqTick .55s cubic-bezier(.22,1,.36,1); }
@keyframes aqTick {
  0%   { opacity: 0; transform: scale(1.5); }
  45%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@container (max-width: 459px) {
  .aq-eyebrow { font-size: clamp(12px, 5.4cqw, 16px); }
  .aq-count { font-size: clamp(44px, 26cqw, 84px); }
}

/* Confirmation, once the aquarium has accepted the wish. Sits noticeably
   above the Done button (raised from bottom:clamp(40px,12cqh,62px)) so the
   confirmation and the CTA have clear breathing room between them. */
.aq-caption {
  position: absolute; left: 0; right: 0; bottom: clamp(52px, 15cqh, 78px); z-index: 6;
  text-align: center; padding: 0 8%;
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(12px, 3.6cqh, 16px); color: #EEE7D8;
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(5px);
  transition: opacity .6s ease, transform .6s ease; pointer-events: none;
}
.aq-caption em { color: #ECC057; font-style: italic; }
.aq-caption.on { opacity: 1; transform: none; }

.aq-done {
  position: absolute; left: 50%; bottom: clamp(12px, 5cqh, 24px); z-index: 6;
  transform: translateX(-50%);
  background: rgba(6,6,6,.5); border: 1px solid rgba(212,168,67,.38); color: #EEE7D8;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(9px, 2.2cqh, 10px); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  padding: clamp(8px, 2.4cqh, 12px) clamp(18px, 6cqh, 28px); border-radius: 7px;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .5s ease, background .15s, border-color .15s, color .15s;
}
.aq-done.on { opacity: 1; pointer-events: auto; }
.aq-done:hover { background: rgba(212,168,67,.12); border-color: #D4A843; color: #ECC057; }
.aq-done:focus-visible { outline: 2px solid #D4A843; outline-offset: 2px; }

.aq-skip {
  position: absolute; right: 8px; top: 6px; z-index: 6;
  background: transparent; border: none; color: rgba(238,231,216,.35);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(8px, 2cqh, 9px); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; cursor: pointer; padding: 8px 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); transition: color .2s;
}
.aq-skip:hover { color: #EEE7D8; }
.aq-skip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .aq-frame { transition: opacity .3s ease; }
  .aq-bubble { animation: none; opacity: 0; }
  .aq-count .aq-num.tick { animation: aqTickRM .5s ease-out; }
  @keyframes aqTickRM { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 1; } }
}