/* ═══════════════════════════════════════════════════════════════════════════
   CINEMA CONTROLADO v2 — camada de identidade do Portal Monteiro
   Handoff: design_handoff_portal_home_v2 (21/07/2026)
   "Black tie, luz de candelabro que respira" — expo-out, sem bounce.
   Camada ADITIVA: nenhum token da v1 é alterado; só profundidade e movimento.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --gold-l:#D8BC82; --gold-d:#A88840;
  --ease:cubic-bezier(.16,1,.3,1);          /* entrada (novo ease da marca) */
  --ease-h:cubic-bezier(.22,1,.36,1);       /* hovers (v1, mantido) */
  --aurora-o:.10; --grain-o:.05;
  --card-sh-hover:0 14px 40px rgba(0,0,0,.45),0 4px 14px rgba(200,168,107,.06);
}
html[data-theme=light]{
  --aurora-o:.05; --grain-o:.028;
  --card-sh-hover:0 16px 40px rgba(60,50,30,.12);
}

/* ── 3 · Fundo vivo — aurora dourada + grain ─────────────────────────────── */
#mf-aurora-a,#mf-aurora-b{
  position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;
  will-change:transform;opacity:var(--aurora-o);
}
#mf-aurora-a{width:52vw;height:52vw;right:-14vw;top:-16vh;background:radial-gradient(circle,#C8A86B,transparent 65%);animation:mfDriftA 34s ease-in-out infinite alternate}
#mf-aurora-b{width:44vw;height:44vw;left:-12vw;bottom:-18vh;background:radial-gradient(circle,#A88840,transparent 65%);animation:mfDriftB 46s ease-in-out infinite alternate}
@keyframes mfDriftA{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,5vh) scale(1.12)}}
@keyframes mfDriftB{from{transform:translate(0,0) scale(1.08)}to{transform:translate(5vw,-6vh) scale(.96)}}
#mf-grain{
  position:fixed;inset:0;pointer-events:none;z-index:9990;mix-blend-mode:overlay;opacity:var(--grain-o);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app{position:relative;z-index:1}

/* ── 1 · Coreografia de entrada (stagger reveal por view) ────────────────── */
.view.active>*{animation:mfIn .9s var(--ease) both}
.view.active>*:nth-child(1){animation-delay:.06s}
.view.active>*:nth-child(2){animation-delay:.14s}
.view.active>*:nth-child(3){animation-delay:.20s}
.view.active>*:nth-child(4){animation-delay:.26s}
.view.active>*:nth-child(5){animation-delay:.32s}
.view.active>*:nth-child(6){animation-delay:.38s}
.view.active>*:nth-child(7){animation-delay:.44s}
.view.active>*:nth-child(n+8){animation-delay:.50s}
@keyframes mfIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.side{animation:mfIn .9s var(--ease) both}
.topbar,.main>header{animation:mfIn .9s var(--ease) .06s both}
/* título com mask reveal */
#ptitle{display:inline-block;overflow:hidden;vertical-align:bottom}
.view.active #ptitle,#ptitle span{animation:none}
.mf-title-in{animation:mfTitle 1s var(--ease) .12s both}
@keyframes mfTitle{from{transform:translateY(112%)}to{transform:translateY(0)}}
/* hairline da sidebar "se desenha" */
.side .brand{position:relative}
.side .brand::after{content:'';position:absolute;left:8%;right:8%;bottom:-6px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,168,107,.55),transparent);
  transform:scaleX(0);transform-origin:left;animation:mfHair 1.1s var(--ease) .35s both}
@keyframes mfHair{to{transform:scaleX(1)}}

/* ── 4/5 · Cards — lift, borda dourada, sombra longa, hairline shimmer ───── */
.card,.rsec{position:relative;overflow:clip;
  transition:transform .38s var(--ease-h),box-shadow .38s var(--ease-h),border-color .38s var(--ease-h)}
.card:hover,.rsec:hover{transform:translateY(-3px);border-color:rgba(200,168,107,.4);box-shadow:var(--card-sh-hover)}
.card::after,.rsec::after{content:'';position:absolute;top:0;left:-45%;width:38%;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--gold-l),transparent);pointer-events:none}
.card:hover::after,.rsec:hover::after{animation:mfSweep 1.2s var(--ease-h)}
@keyframes mfSweep{0%{opacity:0;left:-45%}12%{opacity:1}100%{opacity:0;left:105%}}

/* links "→" e .more deslizam */
.more{display:inline-block;transition:transform .3s var(--ease-h)}
.more:hover{transform:translateX(4px)}

/* KPIs — números tabulares (tickers não tremem) */
.kpi .kv{font-variant-numeric:tabular-nums}
.kpi{transition:transform .38s var(--ease-h),border-color .38s var(--ease-h)}
.kpi:hover{transform:translateY(-3px);border-color:rgba(200,168,107,.4)}

/* ── 4 · Fio de ouro da navegação ────────────────────────────────────────── */
.nav{position:relative}
#mf-fio{position:absolute;left:0;width:2.5px;border-radius:3px;pointer-events:none;
  background:linear-gradient(180deg,var(--gold-l),var(--gold-d));
  box-shadow:0 0 8px rgba(200,168,107,.6);
  transition:top .38s var(--ease-h),height .38s var(--ease-h),opacity .3s;opacity:0}
.nav a{transition:color .3s var(--ease-h)}
.nav a .ico{display:inline-flex;transition:transform .3s var(--ease-h)}
.nav a:hover .ico{transform:translateX(2px)}
/* sheen no item Copiloto */
.nav a[data-view=copiloto]{position:relative;overflow:clip}
.nav a[data-view=copiloto]::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(216,188,130,.18),transparent);opacity:0;pointer-events:none}
.nav a[data-view=copiloto]:hover::after{animation:mfSheen .9s var(--ease-h)}
@keyframes mfSheen{0%{opacity:0;left:-60%}15%{opacity:1}100%{opacity:0;left:110%}}

/* botões dão um passo */
.btn-sm,.btn-gold{transition:transform .3s var(--ease-h),box-shadow .3s var(--ease-h),border-color .3s var(--ease-h)}
.btn-sm:hover,.btn-gold:hover{transform:translateY(-2px)}

/* dot de alerta pulsa em sonar (usado em badges de risco/notificação) */
.mf-sonar{animation:mfSonar 2.6s ease-out infinite}
@keyframes mfSonar{0%{box-shadow:0 0 0 0 rgba(232,138,138,.5)}70%{box-shadow:0 0 0 9px rgba(232,138,138,0)}100%{box-shadow:0 0 0 0 rgba(232,138,138,0)}}

/* ── 10 · Acessibilidade ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #mf-aurora-a,#mf-aurora-b,#mf-grain{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}