/* =========================================================================
   GuiaVivo · Mode extras · FUTURE
   -------------------------------------------------------------------------
   Efeitos pesados / animações / overlays. Todo escopo é html[data-mode="future"]
   pra não vazar nos outros modos. Performance: aurora a 30s, grão estático,
   blur só onde realmente importa.
   ========================================================================= */


/* =====================================================================
   1. Aurora viva no fundo do viewport
   - 4 elipses borradas que se movem lentamente
   - Acontece atrás do device-frame
   ===================================================================== */

html[data-mode="future"] .viewport{
  background:
    radial-gradient(ellipse 70vw 50vh at 20% 25%, rgba(193,140,255,.42), transparent 65%),
    radial-gradient(ellipse 60vw 45vh at 80% 75%, rgba(255,140,200,.32), transparent 60%),
    radial-gradient(ellipse 65vw 50vh at 50% 55%, rgba(140,184,255,.28), transparent 65%),
    radial-gradient(ellipse 55vw 40vh at 70% 20%, rgba(140,255,217,.18), transparent 60%),
    var(--paper-cave);
  background-attachment: fixed;
}

/* Camada extra de movimento — pseudo-element animado */
html[data-mode="future"] .viewport::after{
  content:"";
  position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 40vw 30vh at 30% 40%, rgba(193,140,255,.30), transparent 60%),
    radial-gradient(ellipse 35vw 25vh at 70% 65%, rgba(255,140,200,.25), transparent 55%),
    radial-gradient(ellipse 38vw 28vh at 55% 30%, rgba(140,184,255,.22), transparent 60%);
  filter: blur(60px);
  pointer-events:none;
  z-index:0;
  animation: futureAurora 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes futureAurora{
  0%   { transform: translate(0%, 0%)    rotate(0deg)   scale(1); }
  33%  { transform: translate(-6%, 4%)   rotate(8deg)   scale(1.08); }
  66%  { transform: translate(5%, -3%)   rotate(-6deg)  scale(1.05); }
  100% { transform: translate(-2%, 6%)   rotate(4deg)   scale(1.10); }
}

/* Grain SVG sutil (data URI — não bate na rede) */
html[data-mode="future"] .viewport::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.5 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.20;
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:1;
}


/* =====================================================================
   2. Device-frame como vidro pesado
   - backdrop-filter forte
   - rim lighting na borda superior
   - shadow + glow aurora
   ===================================================================== */

html[data-mode="future"] .device-frame{
  background: var(--glass-2);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 50px 120px rgba(0,0,0,0.70),
    0 20px 60px rgba(193,140,255,0.20),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(193,140,255,0.10);
  position: relative;
  z-index: 2;
}

/* Rim light — linha brilhante 1px na borda superior */
html[data-mode="future"] .device-frame::before{
  content:"";
  position:absolute;
  top:0;left:8%;right:8%;
  height:1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.6) 30%,
    rgba(193,140,255,0.5) 50%,
    rgba(255,255,255,0.6) 70%,
    transparent);
  pointer-events:none;
  z-index:10;
}

/* Halo aurora atrás do device — leve, atrás de tudo */
html[data-mode="future"] .device-frame::after{
  content:"";
  position:absolute;inset:-40px;
  background:
    radial-gradient(circle at 50% 50%, rgba(193,140,255,0.25), transparent 60%);
  filter: blur(30px);
  pointer-events:none;
  z-index: -1;
}


/* =====================================================================
   3. Screen interno — superfície glass mais clara
   ===================================================================== */

html[data-mode="future"] .device-frame__screen{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.025) 0%,
      rgba(255,255,255,0.015) 50%,
      transparent 100%),
    var(--paper);
}

/* Status bar tem brilho leve */
html[data-mode="future"] .device-frame__status{
  color: var(--ink-soft);
  text-shadow: 0 0 8px rgba(193,140,255,0.40);
}


/* =====================================================================
   4. Bolha — aurora reativa
   - Mantém a estrutura SVG, adiciona glow aurora externo
   - Filter chain pra deixar a bolha mais "iridescente"
   ===================================================================== */

html[data-mode="future"] .bubble{
  filter:
    drop-shadow(0 0 36px rgba(193,140,255,0.45))
    drop-shadow(0 0 12px rgba(255,140,200,0.30))
    drop-shadow(0 12px 32px rgba(0,0,0,0.40));
}

/* Aura conic atrás da bolha (cria o efeito iridescente girando) */
html[data-mode="future"] .bubble::before{
  content:"";
  position:absolute;inset:-15%;border-radius:50%;
  background: var(--aurora-conic);
  filter: blur(28px);
  opacity: 0.45;
  z-index: -1;
  animation: futureAuraSpin 18s linear infinite;
}

@keyframes futureAuraSpin{
  to { transform: rotate(360deg); }
}

/* Quando listening, intensifica */
html[data-mode="future"] .bubble--listening::before{
  opacity: 0.7;
  filter: blur(36px);
}


/* =====================================================================
   5. Capa — display com gradient aurora no título
   ===================================================================== */

html[data-mode="future"] .capa__titulo{
  background: var(--aurora-grad);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: futureGradShift 12s ease-in-out infinite alternate;
}

@keyframes futureGradShift{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

html[data-mode="future"] .capa__sub{
  color: var(--ink-soft);
  text-shadow: 0 1px 12px rgba(193,140,255,0.20);
}

html[data-mode="future"] .capa__eyebrow{
  background: var(--aurora-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
  font-family: var(--font-mono);
  letter-spacing: var(--track-widest);
}


/* =====================================================================
   6. Botões — glass pill com glow no hover
   ===================================================================== */

html[data-mode="future"] .btn{
  background: var(--glass-2);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 4px 16px rgba(0,0,0,0.30);
  position: relative;
  overflow: hidden;
}

html[data-mode="future"] .btn--primary{
  background: var(--aurora-grad);
  background-size: 200% 200%;
  color: var(--paper);
  border-color: transparent;
  box-shadow:
    0 0 24px rgba(193,140,255,0.50),
    0 4px 20px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.30);
  animation: futureGradShift 8s ease-in-out infinite alternate;
}
html[data-mode="future"] .btn--primary:hover{
  box-shadow:
    0 0 36px rgba(193,140,255,0.65),
    0 6px 28px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.40);
}


/* =====================================================================
   7. Cards / chips / divisores adaptam ao glass
   ===================================================================== */

html[data-mode="future"] .chip{
  background: var(--glass-2);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-mode="future"] .chip--done{
  background: var(--sage-soft);
  border-color: rgba(193,140,255,0.30);
  box-shadow: 0 0 16px rgba(193,140,255,0.25);
}

html[data-mode="future"] .divider{
  background: linear-gradient(90deg,
    transparent,
    rgba(193,140,255,0.30) 20%,
    rgba(255,140,200,0.30) 50%,
    rgba(140,184,255,0.30) 80%,
    transparent);
  height: 1px;
  border: 0;
  opacity: 0.6;
}


/* =====================================================================
   8. Toast / sheet / tarja — surfaces glassy
   ===================================================================== */

html[data-mode="future"] .toast,
html[data-mode="future"] .sheet__panel,
html[data-mode="future"] .tarja{
  background: var(--glass-3);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.50),
    0 0 32px rgba(193,140,255,0.20),
    inset 0 1px 0 rgba(255,255,255,0.18);
}


/* =====================================================================
   9. Performance e acessibilidade
   ===================================================================== */

@media (prefers-reduced-motion: reduce){
  html[data-mode="future"] .viewport::after,
  html[data-mode="future"] .bubble::before,
  html[data-mode="future"] .capa__titulo,
  html[data-mode="future"] .btn--primary{
    animation: none !important;
  }
}

/* Fallback pra navegadores sem backdrop-filter (raro hoje) */
@supports not (backdrop-filter: blur(1px)){
  html[data-mode="future"] .device-frame,
  html[data-mode="future"] .toast,
  html[data-mode="future"] .sheet__panel{
    background: var(--paper-deep);
  }
}