/* Hollmind — Site 2 (nova identidade de marca) */
/* Paleta: Full Black, Purple Mind, Iron Stone, Gold Craft, Clean Grafite, Lemon Neon, Cinza Bari, Full White */
:root {
  --full-black: #09090B;
  --purple-mind: #65219C;
  --iron-stone: #333333;
  --gold-craft: #E2B8A4;
  --clean-grafite: #94939A;
  --lemon-neon: #CDDA14;
  --cinza-bari: #C5C4CB;
  --full-white: #FEFEFE;

  --background: var(--full-white);
  --foreground: var(--full-black);
  --border: var(--cinza-bari);
  --input: var(--cinza-bari);
  --ring: var(--lemon-neon);
  --secondary: #F4F3F6;
  --muted: #F4F3F6;
  --muted-foreground: var(--clean-grafite);
  --lime: var(--lemon-neon);
  --purple: var(--purple-mind);
  --gold: var(--gold-craft);
  --ink: var(--full-black);
}

* { border-color: var(--border); }

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: "Prompt", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.font-display { font-family: "Prompt", ui-sans-serif, system-ui, sans-serif; }

.container-hm {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ===== Header: transparente no topo, branco após rolar a página ===== */
#site-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
#site-header.is-solid {
  background-color: #FEFEFE;
  border-bottom-color: var(--border);
  box-shadow: 0 10px 30px -22px rgba(9, 9, 11, 0.5);
}

/* Logo do header escuro, legível tanto sobre o lemon (topo) quanto no branco. */
#site-header .hm-logo {
  filter: brightness(0);
}

/* Somente no mobile: logo centralizada no estado inicial e, ao rolar (is-solid),
   desliza pra esquerda enquanto o CTA aparece. No desktop a logo fica na posição original. */
@media (max-width: 767.98px) {
  #site-header .container-hm {
    position: relative;
    justify-content: flex-end;
  }
  #site-header .hm-logo-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #site-header.is-solid .hm-logo-link {
    left: 1.25rem; /* alinha com o padding-inline do container-hm */
    transform: translate(0, -50%);
  }
}
/* CTA do header roxo com texto branco. Aparece só quando o header rola (is-solid). */
#site-header .hm-header-cta {
  background-color: #65219C;
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background-color 0.2s ease;
}
#site-header.is-solid .hm-header-cta {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
#site-header .hm-header-cta:hover {
  background-color: #5a1d8c;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal { opacity: 0; }
.reveal.in { animation: fade-up 0.7s ease-out forwards; }

/* ===== Fundo do hero: Lemon Neon com degradê + textura de traços ===== */
.hm-hero {
  position: relative;
  min-height: 100vh;              /* hero ocupa a altura da viewport */
  display: flex;
  align-items: center;            /* conteúdo centralizado verticalmente */
  background: linear-gradient(125deg, #C3D30F 0%, #CDDA14 52%, #D8E339 100%);
}
.hm-hero > .container-hm {
  width: 100%;
}

/* Textura de linhas (contorno do glifo) espalhada suavemente pelo fundo. */
.hm-hero-texture {
  position: absolute;
  inset: 0;
  height: 100vh;
  pointer-events: none;
  background-image: url("../img/logos/NEON6-outline.png");
  background-repeat: repeat;
  background-size: 360px auto;
  background-position: -40px -30px;
  opacity: 0.16;
  mix-blend-mode: soft-light;
}

/* Grão de filme bem sutil, para dar profundidade e um acabamento moderno. */
.hm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: soft-light;
}

/* Marca-texto (highlight) que não invade as linhas vizinhas quando o título quebra.
   A altura do realce é menor que a linha e cada fragmento é uma caixa própria. */
.hm-mark {
  color: #09090B;
  padding-inline: 0.16em;
  background-image: linear-gradient(#CDDA14, #CDDA14);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 100% 1.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Título do hero em MuseoModerno (fonte da marca), como na referência. */
.hm-hero-title {
  font-family: "MuseoModerno", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Destaque da frase do hero: mesma fonte do título, em Purple Mind. */
.hero-accent {
  color: #65219C;
  font-weight: 800;
}

/* Flutuação suave do símbolo do hero */
.hm-hero-float {
  animation: hm-float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes hm-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.5deg); }
}

/* Símbolo no mobile: animação diferente — balanço (rotação) com leve pulsar. */
.hm-hero-symbol-mobile {
  transform-origin: center;
  animation: hm-hero-sway 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes hm-hero-sway {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-hero-float,
  .hm-hero-symbol-mobile { animation: none; }
}

/* ===== Marca d'água de seção (NEON6) ===== */
.hm-section-mark {
  position: absolute;
  top: -70px;
  right: -90px;
  pointer-events: none;
}
.hm-section-mark img {
  width: clamp(260px, 32vw, 460px);
  filter: brightness(0);
  opacity: 0.04;
  transform: rotate(12deg);
}