/* ============================================================
   MARCI EYE CARE - FX LAYER (additive, motion-safe)
   retinal-scan bg · glassmorphism · celebrations · Burt layer
   ============================================================ */
:root{
  --glass-bg:rgba(9,18,28,.52);
  --glass-brd:rgba(120,205,232,.20);
  --purp:#a855f7;
}

/* ---- background + overlay canvases ---- */
#retina-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:#03060b}
#fx-overlay{position:fixed;inset:0;width:100%;height:100%;z-index:9999;pointer-events:none}
body{background:#03060b}
#login-screen,#app-screen{position:relative;z-index:1}
.page,.screen,#app-screen{background:transparent!important}

/* ---- glassmorphism: CARDS + MODALS only ---- */
.card,.login-card,.modal{
  background:var(--glass-bg)!important;
  -webkit-backdrop-filter:blur(13px) saturate(1.25);
  backdrop-filter:blur(13px) saturate(1.25);
  border:1px solid var(--glass-brd)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.notice{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---- purple-rainbow celebrate outline ---- */
@keyframes fxRainbow{
  0%  {box-shadow:0 0 0 2px rgba(168,85,247,.95),0 0 18px 5px rgba(168,85,247,.6)}
  25% {box-shadow:0 0 0 2px rgba(236,72,153,.95),0 0 22px 7px rgba(236,72,153,.55)}
  50% {box-shadow:0 0 0 2px rgba(139,92,246,.95),0 0 24px 7px rgba(139,92,246,.6)}
  75% {box-shadow:0 0 0 2px rgba(96,165,250,.9),0 0 22px 7px rgba(96,165,250,.5)}
  100%{box-shadow:0 0 0 2px rgba(168,85,247,0),0 0 0 0 rgba(168,85,247,0)}
}
.fx-celebrate{animation:fxRainbow 1.1s ease-out forwards;border-color:var(--purp)!important}

/* ---- Burt Reynolds mustache play button ---- */
.audio-btn.mustache{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(22,12,30,.5)!important;border:1px solid rgba(168,85,247,.4)!important;padding:12px 14px;
}
.audio-btn.mustache svg{width:78px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
.audio-btn.mustache .audio-label{font-family:var(--ff-display,'Orbitron');font-size:11px;letter-spacing:.06em;color:#ead8ff;text-align:left;line-height:1.25}
@keyframes stache{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-2px)}}
.audio-btn.mustache.playing svg{animation:stache .5s ease-in-out infinite}

/* ---- shiny purple heart stage ---- */
#fx-heart-stage{
  position:fixed;inset:0;z-index:10000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:rgba(3,6,11,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .3s;padding:24px;text-align:center;
}
#fx-heart-stage.show{display:flex;opacity:1}
@keyframes heartPop{0%{transform:scale(0) rotate(-22deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes heartShine{0%,100%{filter:drop-shadow(0 0 16px rgba(168,85,247,.7))}50%{filter:drop-shadow(0 0 34px rgba(220,150,255,.95))}}
#fx-heart{width:min(46vw,210px);height:auto;animation:heartPop .6s cubic-bezier(.2,1.4,.4,1),heartShine 1.6s ease-in-out .6s infinite}
.fx-heart-cap{font-family:var(--ff-display,'Orbitron');font-size:clamp(19px,5.5vw,28px);color:#f1e2ff;text-shadow:0 0 16px rgba(168,85,247,.7);line-height:1.3}
.fx-heart-cap .strike{position:relative;white-space:nowrap}
.fx-heart-cap .strike::after{content:'';position:absolute;left:-5%;right:-5%;top:52%;height:3px;background:#ff5db1;border-radius:2px;transform:scaleX(0);transform-origin:left;animation:strikeOut .35s ease-out 1s forwards;box-shadow:0 0 8px #ff5db1}
@keyframes strikeOut{to{transform:scaleX(1)}}
.fx-heart-cap .corrected{display:inline-block;opacity:0;animation:fadeUp .5s ease-out 1.45s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.fx-heart-puff{position:absolute;font-size:34px;opacity:0;animation:puff 1.1s ease-out .35s forwards;pointer-events:none}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.5)}30%{opacity:.85}100%{opacity:0;transform:translate(38px,26px) scale(1.5)}}
.fx-heart-hint{font-family:var(--ff-mono,monospace);font-size:11px;color:#b9a7d6;letter-spacing:.05em}

/* ---- tomorrow's sneak peek (rainbow) ---- */
@keyframes sneakHue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.fx-sneak{
  position:relative;border:2px solid transparent!important;border-radius:16px;padding:14px 16px;margin-top:12px;
  background:
    linear-gradient(var(--glass-bg),var(--glass-bg)) padding-box,
    linear-gradient(120deg,#a855f7,#ec4899,#8b5cf6,#60a5fa,#a855f7) border-box!important;
  animation:sneakHue 7s linear infinite;
}
.fx-sneak .fx-sneak-label{display:block;font-family:var(--ff-display,'Orbitron');font-size:10px;letter-spacing:.2em;color:#e9d5ff;margin-bottom:6px}
.fx-sneak .fx-sneak-body{font-family:var(--ff-body,'Inter');font-size:14px;color:#f3e9ff;line-height:1.4}

/* ---- "ride Burt's mustache" leave-guard modal ---- */
#fx-guard-backdrop{position:fixed;inset:0;z-index:10001;display:none;align-items:center;justify-content:center;background:rgba(3,6,11,.66);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:22px}
#fx-guard-backdrop.open{display:flex}
.fx-guard-card{max-width:350px;width:100%;padding:24px 22px;border-radius:18px;text-align:center;background:var(--glass-bg);border:1px solid rgba(168,85,247,.42);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 12px 44px rgba(0,0,0,.5)}
.fx-guard-stache{width:96px;height:auto;margin:0 auto 12px;display:block}
.fx-guard-title{font-family:var(--ff-display,'Orbitron');font-size:17px;line-height:1.35;color:#f1e2ff;margin:0 0 18px;letter-spacing:.02em}
.fx-guard-actions{display:flex;gap:12px}
.fx-guard-actions button{flex:1;min-height:50px;border-radius:14px;font-family:var(--ff-display,'Orbitron');font-weight:700;letter-spacing:.05em;font-size:15px;cursor:pointer;border:1px solid}
#fx-guard-yes{background:rgba(120,200,230,.12);border-color:rgba(120,200,230,.5);color:#dff4fb}
#fx-guard-no{background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.55);color:#ead8ff}
.fx-guard-emoji{font-size:74px;line-height:1;margin:10px 0;opacity:0;transition:opacity .45s ease}
.fx-guard-emoji.show{opacity:1}

/* ---- reduced motion: kill FX animation, keep end-states legible ---- */
@media (prefers-reduced-motion: reduce){
  .fx-celebrate,#fx-heart,.audio-btn.mustache.playing svg,.fx-sneak,
  .fx-heart-cap .corrected,.fx-heart-cap .strike::after,.fx-heart-puff{animation:none!important}
  .fx-heart-cap .corrected{opacity:1}
  .fx-heart-cap .strike::after{transform:scaleX(1)}
}