/* Refinamento visual da landing: vidro, cabeçalho, demos e símbolo 3D.
   Camada por cima de styles.css; não muda estrutura nem textos.
   Movimento segue a personalidade "Premium" (skill motion-design): sem sobra de overshoot,
   entrada que desacelera, durações rápida 180 ms, padrão 450 ms, lenta 900 ms. */
:root {
  --ease-in-scene: cubic-bezier(.05, .7, .1, 1);
  --ease-onscreen: cubic-bezier(.4, 0, .2, 1);
  --t-quick: 180ms; --t-std: 450ms; --t-slow: 900ms;
}

/* ============ Vidro com mais brilho de borda (mesma identidade, blur de 10 px) ============ */
.glass {
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%),
    linear-gradient(145deg, var(--glass-top), var(--glass-bot));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.35), 0 0 0 1px var(--glass-ring), 0 26px 50px -24px var(--shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(247,249,251,.96); } }

/* ============ Cabeçalho: mesma barra, logo e links; encolhe ao rolar e marca a seção atual ============ */
.header-bar { transition: padding var(--t-std) var(--ease-onscreen), box-shadow var(--t-std) var(--ease-onscreen); }
.header .logo { transition: height var(--t-std) var(--ease-onscreen); }
.header.is-scrolled .header-bar { padding-block: 6px; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--glass-ring), 0 18px 40px -14px rgba(27,36,51,.38); }
.header.is-scrolled .logo { height: 28px; }
.nav a:not(.btn) { position: relative; padding: 8px 14px; border-radius: 999px; transition: color var(--t-quick) var(--ease-onscreen), background var(--t-std) var(--ease-onscreen); }
.nav a:not(.btn):hover { background: rgba(255,255,255,.55); }
.nav a:not(.btn).is-active { color: var(--champ-ink); background: rgba(169,134,91,.14); box-shadow: inset 0 0 0 1px rgba(169,134,91,.28); }

/* ============ Acabamento da moldura dos celulares (a tela não é tocada) ============ */
.phone { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 2px 6px rgba(255,255,255,.22), 0 40px 60px -28px rgba(15,23,42,.6), 0 12px 20px -12px rgba(15,23,42,.4); }

/* ============ Demos: fundo vivo para o vidro desfocar ============ */
#demos { position: relative; isolation: isolate; overflow: clip; }
#demos::before, #demos::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(34px); pointer-events: none; }
#demos::before { width: 38rem; height: 38rem; left: -10rem; top: 12%; background: radial-gradient(closest-side, rgba(222,200,168,.75), rgba(222,200,168,0)); }
#demos::after { width: 42rem; height: 42rem; right: -12rem; bottom: 2%; background: radial-gradient(closest-side, rgba(197,204,214,.95), rgba(197,204,214,0)); }

/* ============ Movimento (só para quem não pediu movimento reduzido) ============ */
@media (prefers-reduced-motion: no-preference) {

  /* Demos: os celulares aparecem com a rolagem (não ficam presos). Básico primeiro, Premium 140 ms depois. */
  .fx-js .demos { perspective: 1700px; }
  .fx-js .demo { opacity: 0; transform: translateY(64px) rotateX(14deg) scale(.97); transform-origin: 50% 100%; }
  .fx-js .demo.in { opacity: 1; transform: none; transition: opacity 600ms var(--ease-in-scene) var(--d, 0s), transform 950ms var(--ease-in-scene) var(--d, 0s); }
  .fx-js .demo .phone { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 6px 10px -6px rgba(15,23,42,.25); }
  .fx-js .demo.in .phone { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 2px 6px rgba(255,255,255,.22), 0 40px 60px -28px rgba(15,23,42,.6), 0 12px 20px -12px rgba(15,23,42,.4);
    transition: box-shadow 900ms var(--ease-onscreen) calc(var(--d, 0s) + 160ms); }               /* a sombra chega depois (follow-through) */
  .fx-js .demo .demo-label, .fx-js .demo .demo-feats, .fx-js .demo .demo-note { opacity: 0; transform: translateY(10px); }
  .fx-js .demo.in .demo-label { opacity: 1; transform: none; transition: opacity 500ms var(--ease-in-scene) calc(var(--d, 0s) + 120ms), transform 600ms var(--ease-in-scene) calc(var(--d, 0s) + 120ms); }
  .fx-js .demo.in .demo-feats, .fx-js .demo.in .demo-note { opacity: 1; transform: none; transition: opacity 500ms var(--ease-in-scene) calc(var(--d, 0s) + 520ms), transform 600ms var(--ease-in-scene) calc(var(--d, 0s) + 520ms); }

  /* Fundo ambiente das demos, muito lento */
  #demos::before { animation: fx-drift 22s ease-in-out infinite alternate; }
  #demos::after  { animation: fx-drift 26s ease-in-out infinite alternate-reverse; }
  @keyframes fx-drift { to { transform: translate(5rem, 3rem); } }

  /* Título da seção de demos sai do desfoque quando chega */
  .fx-js #demos .section-head > * { opacity: 0; filter: blur(12px); transform: translateY(12px); }
  .fx-js #demos .section-head.in > * { opacity: 1; filter: blur(0); transform: none; transition: opacity 800ms var(--ease-in-scene) calc(var(--i, 0) * 70ms), filter 900ms var(--ease-in-scene) calc(var(--i, 0) * 70ms), transform 900ms var(--ease-in-scene) calc(var(--i, 0) * 70ms); }
  .fx-js #demos .section-head > :nth-child(2) { --i: 1; } .fx-js #demos .section-head > :nth-child(3) { --i: 2; }
}

/* ============ Hero: "!" 3D pequeno no lugar do "!" plano do cartão de vidro ============ */
.eyebrow.has-3d::before { display: none; }
.fx-bang { position: relative; display: inline-block; flex: none; width: 14px; height: 22px; margin-right: -2px; perspective: 160px; }
.fx-bang .b { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(6deg); }
.fx-bang svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .fx-bang .b { animation: fx-sway 7s ease-in-out 1s infinite; }   /* camada ambiente: balanço lento e curto */
  @keyframes fx-sway { 0%, 100% { transform: rotateY(-26deg) rotateX(6deg); } 50% { transform: rotateY(24deg) rotateX(6deg); } }
  /* Abertura: só o cartão de vidro entra (o texto do hero aparece de imediato, para não atrasar a primeira impressão) */
  .fx-js .hero .link-card { animation: fx-card var(--t-slow) var(--ease-in-scene) 200ms both; }
  @keyframes fx-card { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}