/* =========================================================
   Natália Morelo — Effects
   ---------------------------------------------------------
   Linguagem visual avançada: tipografia disruptiva,
   liquid metal protagonista, gradient aurora, foto fatiada,
   microcopy técnico em colunas. Use com discrição —
   1 efeito por composição.
   ========================================================= */

/* ---------- 1. DISPLAY DISRUPTIVO ----------
   Para manchetes-monstro tipo "I'M THE KING OF ME".
   Neue Haas Roman 400, em escala absurda, tracking apertado.
   Cor coral apenas em momentos manifesto. */
.nm-display-bold {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(96px, 14vw, 240px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.nm-display-bold.is-coral { color: var(--nm-coral); }
.nm-display-bold .stack { display: block; }

/* ---------- 2. MICROCOPY EM COLUNAS ----------
   Sora em colunas alinhadas — assinatura "estúdio". */
.nm-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.nm-meta-grid .item .lbl { display: block; opacity: 0.6; margin-bottom: 4px; }
.nm-meta-grid .item .val { color: var(--fg-1); }
.nm-meta-grid.on-dark { color: var(--fg-on-dark-2); }
.nm-meta-grid.on-dark .item .val { color: var(--fg-on-dark-1); }

/* ---------- 3. AURORA BACKGROUND ----------
   Gradient orgânico inspirado em poster Arkade.
   Usar em hero, capa de carrossel, full bleeds.  */
.nm-aurora-bg {
  background: var(--nm-aurora);
  position: relative;
}
.nm-aurora-bg.soft { background: var(--nm-aurora-soft); }
.nm-aurora-blur {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 65% 30%,
    rgba(255,122,90,0.9) 0%,
    rgba(255,90,60,0.75) 15%,
    rgba(184,59,34,0.55) 35%,
    rgba(74,47,30,0.35) 55%,
    rgba(31,27,24,0) 80%);
  filter: blur(40px);
}

/* ---------- 4. LIQUID METAL — protagonista ----------
   Quando o blob é o assunto da peça (não chip).
   Soft drop shadow + leve flutuação. */
.nm-blob-hero {
  filter: drop-shadow(0 30px 40px rgba(20,18,17,0.25))
          drop-shadow(0 8px 12px rgba(20,18,17,0.15));
  mix-blend-mode: multiply; /* funciona quando o PNG tem fundo checker */
}
.nm-blob-hero.on-dark { mix-blend-mode: screen; }
@keyframes nm-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-1.5deg); }
}
.nm-blob-float { animation: nm-float 7s ease-in-out infinite; }

/* ---------- 5. SLICED PHOTO ----------
   Retrato cortado em tiras verticais com leve deslocamento.
   Aplicar a uma <div class="nm-sliced"><img ... /></div>. */
.nm-sliced {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  --slice-count: 6;
  --slice-shift: 14px;
  background: var(--nm-graphite);
}
.nm-sliced .slice {
  position: absolute; top: 0; bottom: 0;
  width: calc(100% / var(--slice-count));
  background-size: calc(var(--slice-count) * 100%) 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.nm-sliced .slice:nth-child(1) { left: 0%;                                    background-position-x: 0%;   transform: translateY(0); }
.nm-sliced .slice:nth-child(2) { left: calc(100% / var(--slice-count) * 1);  background-position-x: -100%; transform: translateY(calc(var(--slice-shift) * -1)); }
.nm-sliced .slice:nth-child(3) { left: calc(100% / var(--slice-count) * 2);  background-position-x: -200%; transform: translateY(calc(var(--slice-shift) * 1.4)); }
.nm-sliced .slice:nth-child(4) { left: calc(100% / var(--slice-count) * 3);  background-position-x: -300%; transform: translateY(calc(var(--slice-shift) * -0.6)); }
.nm-sliced .slice:nth-child(5) { left: calc(100% / var(--slice-count) * 4);  background-position-x: -400%; transform: translateY(calc(var(--slice-shift) * 1.8)); }
.nm-sliced .slice:nth-child(6) { left: calc(100% / var(--slice-count) * 5);  background-position-x: -500%; transform: translateY(calc(var(--slice-shift) * -1.1)); }

/* ---------- 6. MOTION BLUR PORTRAIT ----------
   Retrato com borrão de movimento horizontal — tom calmo. */
.nm-motion {
  position: relative;
  overflow: hidden;
  background: var(--nm-off-white);
}
.nm-motion img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px) contrast(1.05); transform: scale(1.06); }

/* ---------- 7. WAVE LINES ----------
   SVG-friendly: classes para curva de linhas finas.
   Use diretamente no SVG <path stroke="currentColor"/>. */
.nm-wave-coral { color: var(--nm-coral); }

/* ---------- 8. TEXT OUTLINE ----------
   Manchete contornada — para sobreposição em foto. */
.nm-text-outline {
  -webkit-text-stroke: 1px currentColor;
  color: transparent;
}

/* ---------- 9. ROTATED MARGIN TYPE ----------
   Tipografia rotacionada nas margens (poster Arkade). */
.nm-rotate-cw  { writing-mode: vertical-rl; transform: rotate(180deg); }
.nm-rotate-ccw { writing-mode: vertical-rl; }

/* ---------- 10. GRAIN OVERLAY ----------
   Textura sutil para aproximar de impresso editorial. */
.nm-grain { position: relative; }
.nm-grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity: 0.18; mix-blend-mode: multiply;
}