/* ═══════════════════════════════════════════
   effects.css — ambient layers, fixed chrome,
   cursor trail, floating hearts, balloons, fx
   ═══════════════════════════════════════════ */

/* ── Background canvases & glows ── */
.bg-layer {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bg-glow {
  position: fixed;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
  animation: glowDrift 26s ease-in-out infinite alternate;
}
.bg-glow--1 {
  top: -25vmax; left: -18vmax;
  background: radial-gradient(circle, var(--gold) 0%, transparent 65%);
}
.bg-glow--2 {
  bottom: -28vmax; right: -20vmax;
  background: radial-gradient(circle, var(--pink-deep) 0%, transparent 65%);
  animation-delay: -13s;
}
@keyframes glowDrift {
  to { transform: translate(6vmax, 4vmax) scale(1.15); }
}

/* ── Scroll progress ── */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, var(--gold), var(--pink));
  box-shadow: 0 0 12px rgba(212, 175, 106, 0.7);
  transition: width 0.15s linear;
}

/* ── Fixed round buttons ── */
.chrome-btn {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--gold-bright);
  font-size: 1.1rem;
  transition: transform 0.35s var(--ease-out), opacity 0.35s, box-shadow 0.35s;
  -webkit-tap-highlight-color: transparent;
}
.chrome-btn:hover { transform: scale(1.1); box-shadow: 0 0 24px rgba(212, 175, 106, 0.3); }

.music-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: 16px;
  z-index: 65;
}
.music-toggle__bars { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.music-toggle__bars i {
  width: 3px; border-radius: 2px;
  background: var(--gold-bright);
  animation: eq 0.9s ease-in-out infinite alternate;
}
.music-toggle__bars i:nth-child(1) { height: 6px; }
.music-toggle__bars i:nth-child(2) { height: 13px; animation-delay: 0.2s; }
.music-toggle__bars i:nth-child(3) { height: 9px; animation-delay: 0.45s; }
@keyframes eq { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }

.music-toggle.is-playing .music-toggle__icon--play { display: none; }
.music-toggle.is-playing .music-toggle__bars { display: flex; }

.back-to-top {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  right: 16px;
  z-index: 65;
  opacity: 0; transform: translateY(16px);
  pointer-events: none;
}
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ── Heart cursor trail & tap hearts ── */
.trail-heart, .tap-heart {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  color: var(--pink-deep);
  text-shadow: 0 0 10px rgba(232, 155, 181, 0.8);
  will-change: transform, opacity;
  user-select: none;
}
.trail-heart { font-size: 12px; animation: trailFade 0.9s ease-out forwards; }
@keyframes trailFade {
  from { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -140%) scale(0.35) rotate(20deg); }
}

.tap-heart { font-size: 20px; animation: tapFloat 1.6s var(--ease-out) forwards; }
@keyframes tapFloat {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  25%  { transform: translate(-50%, -110%) scale(1.15) rotate(-8deg); }
  to   { opacity: 0; transform: translate(-50%, -320%) scale(0.8) rotate(12deg); }
}

/* ── Reveal-on-scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── Fireworks / confetti canvas (surprise section) ── */
.fx-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
}
.fx-canvas.is-active { opacity: 1; }

/* ── Balloons ── */
.balloons { position: fixed; inset: 0; z-index: 54; pointer-events: none; overflow: hidden; }

.balloon {
  position: absolute;
  bottom: -18vh;
  width: 52px; height: 66px;
  border-radius: 50% 50% 48% 52% / 58% 58% 42% 42%;
  animation: balloonRise linear forwards;
  opacity: 0.92;
}
.balloon::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 8px; height: 8px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.balloon::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 60px;
  background: rgba(255, 255, 255, 0.35);
}
@keyframes balloonRise {
  from { transform: translateY(0) rotate(-3deg); }
  50%  { transform: translateY(-60vh) translateX(4vw) rotate(4deg); }
  to   { transform: translateY(-130vh) translateX(-3vw) rotate(-4deg); }
}