/* ============================================================================
   MR MÓVEIS PLANEJADOS — identidade visual 100% AMART (design_system.html)
   Reversão literal ao sistema de referência: paleta monocromática única
   (sem retinte de acento), fundo escuro único em toda a página — nada de
   seções claras nem cor de destaque própria. O "acento" volta a ser a
   própria luz branca, exatamente como no design system original.
   ============================================================================ */

:root {
  --mr-white:    #FFFFFF;
  --mr-cream:    #1A1A1A;
  --mr-fog:      #CCCCCC;
  --mr-smoke:    #8C8C8C;
  --mr-iron:     #CCCCCC;
  --mr-midnight: #262626;
  --mr-black:    #1A1A1A;

  --mr-silver:      #FFFFFF;
  --mr-silver-soft: #CCCCCC;

  --ease-mr: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* fundo único escuro — sem alternância de contexto claro/escuro */
  --grid-line: rgba(255, 255, 255, 0.03);
  --beam-base: rgba(255, 255, 255, 0.05);
  --border-gradient-c: rgba(255, 255, 255, 0.2);
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--mr-black);
  /* clip (e não hidden) — hidden cria um scroll container e quebraria o
     position:sticky da pilha de cards do Processo. A 1ª linha é fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: var(--mr-white); color: var(--mr-black); }

/* ---------------------------------------------------------------------------
   HERDADO — fluxora.aura.build (verbatim, só o acento muda em .underline-grow)
--------------------------------------------------------------------------- */
@keyframes fadeSlideIn {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0);     filter: blur(0px); }
}
.border-gradient { position: relative; }
.border-gradient::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(225deg, transparent 0%, var(--border-gradient-c) 50%, transparent 100%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   HERDADO — canvas-visual.aura.build (grid / feixes / floating-card / btn)
   Parametrizado com custom properties para funcionar em seções claras e escuras.
--------------------------------------------------------------------------- */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
}
.beam-border-v {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--beam-base); overflow: hidden; z-index: 10;
}
.beam-border-v::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(to bottom, transparent, var(--mr-silver), transparent);
  transform: translateY(-100%);
  animation: beam-drop 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0.8;
}
.beam-border-h {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--beam-base); overflow: hidden; z-index: 10;
}
.beam-border-h::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(to right, transparent, var(--mr-silver), transparent);
  transform: translateX(-100%);
  animation: beam-slide 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 2.5s;
  opacity: 0.8;
}
@keyframes beam-drop {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes beam-slide {
  0% { transform: translateX(-100%); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.floating-card {
  transition: transform 0.5s var(--ease-mr), z-index 0s;
  will-change: transform;
}
.floating-card:hover {
  transform: scale(1.04) translateY(-8px) !important;
  z-index: 50;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}
.btn { transition: all 0.3s ease; }
.btn-wrapper:hover .btn { background-color: var(--mr-silver); color: var(--mr-black); border-color: var(--mr-silver); }

/* ---------------------------------------------------------------------------
   EXTENSÕES MR — mesmo vocabulário do sistema, acento sempre branco
--------------------------------------------------------------------------- */
@keyframes auroraDrift {
  0%   { transform: translate3d(-8%, -4%, 0) scale(1);    opacity: .30; }
  50%  { transform: translate3d( 8%,  4%, 0) scale(1.18); opacity: .55; }
  100% { transform: translate3d(-8%, -4%, 0) scale(1);    opacity: .30; }
}
.aura-glow {
  animation: auroraDrift 18s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

@keyframes lightSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer-text {
  background-image: linear-gradient(100deg, var(--mr-silver-soft) 0%, var(--mr-silver) 45%, var(--mr-silver) 55%, var(--mr-silver-soft) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lightSweep 7s linear infinite;
}

.noise-layer {
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 42s linear infinite; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }

.glow-card {
  transition: transform .5s var(--ease-mr), box-shadow .5s var(--ease-mr), border-color .5s var(--ease-mr);
}
.glow-card:hover {
  transform: translateY(-6px);
  border-color: rgba(92,102,112,0.5);
  box-shadow:
    0 24px 60px -24px rgba(0,0,0,0.35),
    0 0 70px -30px rgba(92,102,112,0.55);
}

/* ---------------------------------------------------------------------------
   Processo — pilha de cards com scroll (sticky stack)
   Cada card gruda no topo e o próximo sobe cobrindo o anterior, deixando uma
   fatia visível. O incremento de `top` entre eles é a fatia que sobra.
   Cards são OPACOS de propósito: sendo translúcidos, veríamos através da pilha.
--------------------------------------------------------------------------- */
.process-stack {
  display: flex;
  flex-direction: column;
  gap: 4vh;
  padding-bottom: 2vh;
  /* desfaz no fluxo o padding extra do cabeçalho (ver .process-head) */
  margin-top: -300px;
}
.process-card {
  position: sticky;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -10px 40px -20px rgba(0,0,0,0.9);
  will-change: transform;
}
/* tons crescentes: card 1 o mais escuro, card 3 o mais claro */
.process-card:nth-child(1) { top: 208px; z-index: 1; background-color: #1F1F1F; }
.process-card:nth-child(2) { top: 224px; z-index: 2; background-color: #262626; }
.process-card:nth-child(3) { top: 240px; z-index: 3; background-color: #2E2E2E; }

/* o cabeçalho gruda logo abaixo do nav e os cards param abaixo dele, para que
   título e subtítulo sigam visíveis durante a pilha (mesmo efeito do desktop).
   z-index abaixo dos cards: no fim da pilha eles sobem e precisam cobrir o
   cabeçalho (são opacos), em vez de transparecer por trás.
   O padding-bottom alonga a caixa (invisível) do cabeçalho para que o sticky o
   libere junto com o último card; a pilha reabsorve esse espaço no margin-top. */
.process-head {
  position: sticky;
  top: 96px;
  z-index: 0;
  padding-bottom: 300px;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .process-stack { gap: 7vh; padding-bottom: 3vh; }
  .process-head { top: 104px; }
  /* fatia maior do card anterior visível — há mais altura de tela disponível */
  .process-card:nth-child(1) { top: 232px; }
  .process-card:nth-child(2) { top: 264px; }
  .process-card:nth-child(3) { top: 296px; }
}

.process-step {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--mr-silver-soft);
  margin-bottom: 14px;
}

/* Sem sticky para quem pediu menos movimento — vira lista estática */
@media (prefers-reduced-motion: reduce) {
  .process-stack { gap: 20px; padding-bottom: 0; margin-top: 0; }
  .process-card,
  .process-head {
    position: static;
  }
  .process-head { padding-bottom: 0; pointer-events: auto; }
  .process-card { box-shadow: none; }
}

.portfolio-tab.is-active {
  border-color: var(--mr-silver);
  color: var(--mr-silver);
}

.underline-grow { position: relative; }
.underline-grow::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  height: 1px; width: 0;
  background: var(--mr-silver);
  transition: width .35s var(--ease-mr);
}
.underline-grow:hover::after,
.underline-grow[data-active="true"]::after { width: 100%; }


/* ---------------------------------------------------------------------------
   Contexto claro / escuro — troca as variáveis usadas pelos utilitários acima
--------------------------------------------------------------------------- */
.on-dark,
.on-light { --grid-line: rgba(255,255,255,0.035); --beam-base: rgba(255,255,255,0.06); --border-gradient-c: rgba(255,255,255,0.22); }

/* ---------------------------------------------------------------------------
   FAQ — accordion no mesmo idioma do sistema (bordas finas, mono uppercase)
--------------------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.1); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-mr); }
.faq-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--mr-silver); transition: transform .3s var(--ease-mr);
}
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-icon::after  { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item.is-open .faq-icon::after { transform: translateX(-50%) scaleY(0); }

/* ---------------------------------------------------------------------------
   Galeria de vídeo — lightbox em tela cheia (seção Projetos)
--------------------------------------------------------------------------- */
.lightbox-backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: grayscale(1) brightness(0.4) blur(3px);
  -webkit-backdrop-filter: grayscale(1) brightness(0.4) blur(3px);
}
#lightbox-video { border-radius: 2px; }

/* ---------------------------------------------------------------------------
   Placeholder de estrutura — só nesta fase, sem copy/imagem final
--------------------------------------------------------------------------- */
.ph {
  border: 1px dashed currentColor;
  opacity: .5;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: .04em; padding: 10px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}