/* ==========================================================
   AND Studio de Marcas — Fundação v2 (and.css)
   Tokens, base, componentes compartilhados e estados de movimento.
   Usado por index.html, manual-de-marca.html e orcamento.html.
   Não edite por página: sobrescreva em um CSS próprio da página.
   Utilitários da 1.1: .label--on-art (rótulo sobre pintura/foto),
   .numeral--sm (romano pequeno em vermelho AA), .print-keep-ink
   (painel escuro que mantém a tinta clara na impressão),
   --anchor-extra (UI fixa extra somada ao offset das âncoras).
   Restrição: o tracejado por pathLength (data-reveal="draw", laço) quebra
   com vector-effect: non-scaling-stroke ou preserveAspectRatio="none";
   use viewBox com a mesma proporção do elemento.
   ========================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta */
  --navy: #161A26;          /* fundo base */
  --navy-2: #1C2030;
  --navy-3: #212538;
  --line: #2E3347;          /* filetes / bordas */
  --gray: #888888;          /* texto de apoio (AA sobre navy e navy-2) */
  --gray-light: #9498A6;    /* corpo secundário (AA também sobre navy-3) */
  --paper: #EEEEEE;
  --paper-light: #F7FBFC;
  --cream: #F3F9FB;         /* creme do logo */
  --red: #EA3D3D;           /* acento: itálicos-chave, pontos, filetes, CTA */
  --red-logo: #ED1C24;
  --red-hi: #FF5E5E;        /* hover / texto vermelho pequeno sobre navy (AA) */
  --ink: #0E111A;           /* texto sobre vermelho (AA) */
  --gray-on-light: #5C606E; /* cinza para fundos claros (AA) */
  --red-on-light: #C42B2B;  /* vermelho de texto pequeno em fundo claro (AA) */

  /* Papéis semânticos — trocam em .theme-light */
  --bg: var(--navy);
  --fg: var(--paper);
  --fg-strong: var(--paper-light);
  --muted: var(--gray-light);
  --subtle: var(--gray);
  --rule: var(--line);
  --accent: var(--red);
  --accent-text: var(--red-hi);

  /* Tipografia */
  --serif: 'Times New Roman', 'Cormorant Garamond', Georgia, serif;
  --sans: 'motiva-sans', 'Mulish', system-ui, sans-serif;
  --fs-display: clamp(3rem, 1.4rem + 6.8vw, 8.75rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.7vw, 3.75rem);
  --fs-h3: clamp(1.45rem, 1.2rem + 0.9vw, 2.1rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.4vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;
  --tracking-label: 0.22em;

  /* Layout */
  --container: 1280px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.55rem + 3vw, 3.5rem);
  --section-y: clamp(5rem, 3rem + 8vw, 10rem);
  --gap: clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem);
  --nav-h: 84px;            /* atualizado pelo and.js */
  --anchor-extra: 0px;      /* UI fixa extra da página somada ao offset das âncoras */
  --radius: 3px;
  --radius-pill: 999px;

  /* Movimento — equivalentes CSS das eases do GSAP */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);      /* power3.out */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);     /* power4.out */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);   /* power4.inOut */
  --dur-1: 0.4s;
  --dur-2: 0.8s;
  --dur-3: 1.2s;
  --dur-4: 1.6s;

  /* Faixas de z-index (não use valores fora delas) */
  --z-base: 1;        /* 1–9: camadas internas de seção */
  --z-sticky: 40;     /* 10–59: elementos sticky/fixos da página (resumo do orçamento etc.) */
  --z-menu: 90;       /* menu mobile (abaixo da nav, para o botão continuar clicável) */
  --z-nav: 100;
  --z-progress: 110;
  --z-toast: 300;
  --z-modal: 400;     /* 400–499: modais, lightbox, drawers das páginas */
  --z-grain: 600;     /* grão de filme global */
  --z-curtain: 900;   /* cortina de transição */
  --z-loader: 950;    /* intro */
  --z-cursor: 1000;

  /* Grão de filme (SVG turbulence) e seta fina */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M0 6h20.4M15.2 1l5.2 5-5.2 5'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* Tema claro (seções em papel) — os componentes usam os papéis semânticos */
.theme-light {
  --bg: var(--paper);
  --fg: var(--navy);
  --fg-strong: var(--navy);
  --muted: #4A4E5C;
  --subtle: var(--gray-on-light);
  --rule: rgba(22, 26, 38, 0.16);
  --accent-text: var(--red-on-light);
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}

/* Fundos de seção */
.bg-navy   { background: var(--navy); }
.bg-navy-2 { background: var(--navy-2); }
.bg-navy-3 { background: var(--navy-3); --subtle: var(--gray-light); }
.bg-paper  { background: var(--paper); }

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;       /* evita "pulo" ao travar o scroll */
  scrollbar-width: thin;
  scrollbar-color: var(--line) var(--navy);
  background: var(--navy);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}
/* âncoras nativas (sem JS) não ficam atrás da nav fixa */
[id] { scroll-margin-top: calc(var(--nav-h) + 12px + var(--anchor-extra)); }

/* [hidden] vence o display dos componentes (ex.: .form { display: grid }) */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  overflow-x: clip;               /* sem criar contêiner de scroll (sticky continua funcionando) */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
ul[class], ol[class] { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  color: var(--fg-strong);
  text-wrap: balance;
}

p { text-wrap: pretty; }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--rule);
}

::selection { background: var(--red); color: var(--ink); }

/* Foco visível (teclado) */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--accent-text);
  outline-offset: 4px;
  border-radius: 2px;
}
main:focus, [tabindex="-1"]:focus { outline: none; }

/* Scrollbar discreta (WebKit antigo) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--navy); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3C4259; }

/* Lenis (regras do lenis.css embutidas) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Travas de scroll: intro e menu aberto */
html.js.is-loading:not(.no-motion),
html.menu-open { overflow: hidden; }

/* ---------- 3. Acessibilidade ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: calc(var(--z-cursor) + 1);
  padding: 0.85rem 1.25rem;
  background: var(--paper-light);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  transform: translateY(-160%);
  transition: transform 0.4s var(--ease-expo);
}
.skip-link:focus-visible { transform: none; }

/* ---------- 4. Tipografia ---------- */
.serif { font-family: var(--serif); }
.sans  { font-family: var(--sans); }
.italic { font-style: italic; }
.red   { color: var(--accent); }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.upper { text-transform: uppercase; letter-spacing: 0.16em; }
.tabular { font-variant-numeric: tabular-nums; }

.display, .h1, .h2, .h3 {
  font-family: var(--serif);
  color: var(--fg-strong);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); font-weight: 300; line-height: 0.98; letter-spacing: -0.02em; }
.h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1.04; letter-spacing: -0.015em; }
.h2 { font-size: var(--fs-h2); font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; }
.h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; }

/* Itálico-chave em títulos: serif itálico vermelho */
:is(h1, h2, h3, .display, .h1, .h2, .h3) em,
.em-red {
  font-style: italic;
  color: var(--accent);
}

/* "and more." — sempre serif itálico vermelho */
.and-more {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  max-width: 38ch;
}
.body-text { font-size: var(--fs-body); line-height: 1.75; color: var(--muted); max-width: 62ch; }
.body-text p + p { margin-top: 1.25em; }
.small { font-size: var(--fs-small); line-height: 1.6; }

/* Rótulo de seção — "( 01 — Sobre )" */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--subtle);
}
.label--line::before {
  content: '';
  flex: none;
  width: 40px;
  height: 1px;
  background: var(--accent);
}
.label--red { color: var(--accent-text); }
/* sobre pintura ou foto: o cinza padrão cai abaixo de AA */
.label--on-art { color: rgba(238, 238, 238, 0.82); }

/* Numerais romanos / índices clássicos (vermelho do acento: tamanhos de título) */
.numeral {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-variant-numeric: oldstyle-nums;
}
/* numeral em texto pequeno (< 1.5rem): vermelho AA (#FF5E5E no navy, #C42B2B no papel) */
.numeral--sm { color: var(--accent-text); }

/* ---------- 5. Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }

.stack { display: flex; flex-direction: column; gap: var(--stack, 1.5rem); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, 1rem); }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr));
}
@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Mídia */
.ratio { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 5); }
.media-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* folga vertical para parallax dentro de contêiner com overflow hidden */
.media-bleed {
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 124%;
  max-width: none;
  object-fit: cover;
}

/* Pintura barroca de fundo (hero / capas) */
.painting {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--navy);
  pointer-events: none;
}
.painting__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(22, 26, 38, 0.86) 0%, rgba(22, 26, 38, 0.55) 34%, rgba(22, 26, 38, 0.18) 64%, rgba(22, 26, 38, 0.06) 88%),
    linear-gradient(to bottom, rgba(22, 26, 38, 0.1) 0%, rgba(22, 26, 38, 0.12) 55%, var(--navy) 100%);
}
.painting--center .painting__shade {
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(22, 26, 38, 0.35) 0%, rgba(22, 26, 38, 0.72) 70%),
    linear-gradient(to bottom, rgba(22, 26, 38, 0.2) 0%, var(--navy) 100%);
}

/* ---------- 6. Filetes, molduras e arcos ---------- */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--rule);
  transform-origin: 0 50%;
}
.rule--red { background: var(--accent); }
.rule--short { width: 48px; background: var(--accent); }
.rule--v { width: 1px; height: 100%; min-height: 3rem; transform-origin: 50% 0; }

/* Filete com losango central (ornamento clássico) */
.ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--accent);
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.ornament > i {
  flex: none;
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}

/* Arco de topo (janela clássica) e oval */
.arch { overflow: hidden; border-radius: 999px 999px 0 0; }
.arch--oval { border-radius: 999px; }

/* Moldura de filete duplo */
.frame {
  position: relative;
  padding: 0.6rem;
  border: 1px solid var(--rule);
}
.frame::after {
  content: '';
  position: absolute;
  inset: 0.3rem;
  border: 1px solid var(--rule);
  pointer-events: none;
}

/* ---------- 7. Grão de filme ---------- */
/* .grain: sobreposição local (dentro de um pai posicionado) */
.grain {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  opacity: 0.05;
  background-image: var(--noise);
  background-size: 180px;
}
/* .grain-page: grão fixo sobre a página inteira */
.grain-page {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.045;
  background-image: var(--noise);
  background-size: 180px;
}
/* variante com tremulação de película (só transform) */
.grain--animated {
  inset: -60%;
  animation: and-grain 1.2s steps(6) infinite;
}
@keyframes and-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-6%, -2%); }
  80%  { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}

/* ---------- 8. Botões ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  min-height: 50px;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--red);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: transparent;
  color: var(--fg-strong);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.6s var(--ease-expo), border-color 0.6s var(--ease-expo);
}
/* preenchimento que sobe em arco */
.btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -12%;
  right: -12%;
  top: 100%;
  height: 230%;
  border-radius: 50%;
  background: var(--red);
  transform: translate3d(0, 0, 0);
  transition: transform 0.75s var(--ease-expo);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translate3d(0, -72%, 0); }
.btn:hover,
.btn:focus-visible { color: var(--ink); }
.btn .arrow, .btn .btn__arrow { color: var(--red); transition: color 0.6s var(--ease-expo); }
.btn:hover .arrow, .btn:focus-visible .arrow,
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { color: var(--ink); }

.btn--primary { background: var(--red); color: var(--ink); }
.btn--primary::before { background: var(--red-hi); }
.btn--primary .arrow, .btn--primary .btn__arrow { color: var(--ink); }

.btn--ghost { border-color: rgba(238, 238, 238, 0.28); }
.btn--ghost::before { background: var(--paper-light); }
.btn--ghost .arrow, .btn--ghost .btn__arrow { color: var(--fg-strong); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--paper-light); color: var(--navy); }
.btn--ghost:hover .arrow, .btn--ghost:focus-visible .arrow { color: var(--navy); }

/* para fundos claros */
.btn--light { color: var(--navy); border-color: var(--red); }
.theme-light .btn--ghost { border-color: rgba(22, 26, 38, 0.3); color: var(--navy); }
.theme-light .btn--ghost::before { background: var(--navy); }
.theme-light .btn--ghost .arrow { color: var(--navy); }
.theme-light .btn--ghost:hover, .theme-light .btn--ghost:focus-visible { color: var(--paper-light); border-color: var(--navy); }
.theme-light .btn--ghost:hover .arrow { color: var(--paper-light); }

.btn--sm { min-height: 44px; padding: 0.75rem 1.35rem; font-size: 0.7rem; gap: 0.7rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.4; pointer-events: none; }

/* Seta fina que desliza (use <span class="arrow" aria-hidden="true"></span>) */
.arrow, .btn__arrow {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.3rem;
  height: 0.75rem;
  overflow: hidden;
  font-size: 0;                 /* ignora texto acidental dentro do span */
  vertical-align: middle;
}
.arrow::before, .arrow::after,
.btn__arrow::before, .btn__arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform 0.7s var(--ease-expo);
}
.arrow::after, .btn__arrow::after { transform: translateX(-130%); }
:is(a, button, .btn, label):hover > .arrow::before,
:is(a, button, .btn):focus-visible > .arrow::before,
:is(a, button, .btn):hover > .btn__arrow::before,
:is(a, button, .btn):focus-visible > .btn__arrow::before { transform: translateX(130%); }
:is(a, button, .btn, label):hover > .arrow::after,
:is(a, button, .btn):focus-visible > .arrow::after,
:is(a, button, .btn):hover > .btn__arrow::after,
:is(a, button, .btn):focus-visible > .btn__arrow::after { transform: translateX(0); }
.arrow--down { transform: rotate(90deg); }
.arrow--up { transform: rotate(-90deg); }
.arrow--diag { transform: rotate(-45deg); }

/* ---------- 9. Links ---------- */
/* sublinhado que nasce da esquerda e sai pela direita */
.link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  padding-bottom: 0.12em;
  transition: background-size 0.7s var(--ease-expo), color 0.4s;
}
.link:hover, .link:focus-visible {
  background-size: 100% 1px;
  background-position: 0 100%;
}
/* sublinhado sempre visível que se redesenha no hover */
.link--underline {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--rule), var(--rule));
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
}
.link--underline:hover, .link--underline:focus-visible {
  background-size: 100% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
}
.link--red:hover, .link--red:focus-visible { color: var(--accent-text); }

/* link com seta (ex.: "Ver case →") */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-strong);
  transition: color 0.4s;
}
.link-arrow .arrow { color: var(--accent); }
.link-arrow:hover, .link-arrow:focus-visible { color: var(--accent-text); }

/* ---------- 10. Intro / loader ---------- */
.and-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--cream);
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}
html:not(.js) .and-loader,
html.no-motion .and-loader,
.and-loader.is-done { display: none; }

/* se o and.js não assumir em 3s, a própria CSS tira a intro */
html.js:not(.and-init) .and-loader { animation: and-loader-failsafe 0.5s 3s both; }
@keyframes and-loader-failsafe { to { opacity: 0; visibility: hidden; } }

.and-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  transition: transform 1s var(--ease-in-out), opacity 0.6s var(--ease-out);
}
.and-loader__mark,
.and-curtain__mark {
  width: 46px;
  height: auto;
  overflow: visible;
}
.and-loader__mark path,
.and-curtain__mark path {
  fill: var(--cream);
  stroke: var(--cream);
  stroke-width: 1.1;
  stroke-opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.and-loader__word {
  width: 132px;
  height: auto;
  display: none;
}
.and-loader__meta {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: none;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-light);
}
.and-loader__count {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

/* 1ª visita da sessão: laço se desenha, preenche, wordmark sobe */
html.is-first-visit .and-loader__word,
html.is-first-visit .and-loader__meta { display: flex; }
html.is-first-visit .and-loader__word { display: block; }
html.is-first-visit:not(.reduced-motion) .and-loader__mark path {
  fill-opacity: 0;
  stroke-opacity: 1;
  stroke-dashoffset: 1;
}
.and-loader.is-intro .and-loader__mark path {
  animation:
    and-draw 1.05s var(--ease-in-out) forwards,
    and-fill 0.5s 0.9s var(--ease-out) forwards;
}
.and-loader.is-intro .and-loader__mark path + path { animation-delay: 0.12s, 1s; }
html.is-first-visit:not(.reduced-motion) .and-loader__word { clip-path: inset(0 0 100% 0); transform: translateY(12px); }
.and-loader.is-intro .and-loader__word { animation: and-word 0.9s 0.7s var(--ease-expo) forwards; }
html.is-first-visit:not(.reduced-motion) .and-loader__meta { opacity: 0; }
.and-loader.is-intro .and-loader__meta { animation: and-fade 0.8s 0.1s var(--ease-out) forwards; }

@keyframes and-draw { to { stroke-dashoffset: 0; } }
@keyframes and-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes and-word { to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes and-fade { to { opacity: 1; } }

/* saída: cortina sobe */
.and-loader.is-leaving {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: clip-path 1s var(--ease-in-out);
}
.and-loader.is-leaving .and-loader__inner { transform: translateY(-6vh); opacity: 0; }
.and-loader.is-leaving .and-loader__meta { opacity: 0 !important; transition: opacity 0.4s; }

/* movimento reduzido: sem desenho, sai com fade curto */
html.reduced-motion .and-loader.is-leaving {
  clip-path: inset(0 0 0 0);
  opacity: 0;
  transition: opacity 0.45s linear;
}
html.reduced-motion .and-loader.is-leaving .and-loader__inner { transform: none; }
html.reduced-motion .and-loader__meta { display: none !important; }

/* ---------- 11. Cortina de transição entre páginas ---------- */
.and-curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: grid;
  place-items: center;
  background: var(--navy);
  clip-path: inset(100% 0 0 0);
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.and-curtain.is-active {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 0.75s var(--ease-in-out);
}
.and-curtain.is-leaving {
  clip-path: inset(0 0 100% 0);
  visibility: visible;
  transition: clip-path 0.9s var(--ease-in-out);
}
.and-curtain__mark { opacity: 0; transform: translateY(14px); transition: opacity 0.4s, transform 0.6s var(--ease-expo); }
.and-curtain.is-active .and-curtain__mark { opacity: 1; transform: none; transition-delay: 0.3s; }

html.reduced-motion .and-curtain { clip-path: none; opacity: 0; }
html.reduced-motion .and-curtain.is-active { opacity: 1; transition: opacity 0.25s linear; }
html.reduced-motion .and-curtain.is-leaving { opacity: 0; transition: opacity 0.3s linear; }

/* ---------- 12. Navegação ---------- */
.and-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition:
    transform 0.8s var(--ease-expo),
    background-color 0.6s var(--ease-out),
    border-color 0.6s var(--ease-out),
    -webkit-backdrop-filter 0.6s,
    backdrop-filter 0.6s;
}
.and-nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 1.35rem var(--gutter);
  transition: padding 0.6s var(--ease-expo);
}
.and-nav.is-scrolled,
.and-nav--solid {
  background: rgba(22, 26, 38, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: rgba(238, 238, 238, 0.07);
}
/* sem and.js (sem JS ou fail-safe com CDN pendurado) ninguém lê o scroll: nav sólida */
html:not(.js) .and-nav,
html.is-failsafe .and-nav {
  background: rgba(22, 26, 38, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: rgba(238, 238, 238, 0.07);
}
.and-nav.is-scrolled .and-nav__inner { padding-block: 0.8rem; }
.and-nav.is-hidden { transform: translate3d(0, -101%, 0); }
.and-nav.is-hidden:focus-within { transform: none; }

.and-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  transition: opacity 0.4s;
}
.and-nav__brand img { width: auto; height: 30px; }
.and-nav__brand:hover { opacity: 0.75; }

.and-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
  margin-left: auto;
}
.and-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-light);
  transition: color 0.4s;
}
.and-nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 0.6s var(--ease-expo);
}
.and-nav__link:hover { color: var(--paper-light); }
.and-nav__link.is-active,
.and-nav__link[aria-current] { color: var(--paper-light); }
.and-nav__link.is-active::after,
.and-nav__link[aria-current]::after { transform: scale(1); }

.and-nav__cta { margin-left: 0.75rem; }

.and-nav__toggle {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  border-radius: 50%;
  color: var(--paper-light);
}
.and-nav__toggle span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1px;
  background: currentColor;
  transition: transform 0.6s var(--ease-expo), opacity 0.3s;
}
.and-nav__toggle span:first-child { transform: translateY(-4px); }
.and-nav__toggle span:last-child { transform: translateY(4px); right: 19px; }
.and-nav__toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.and-nav__toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); right: 13px; }

@media (max-width: 1023px) {
  .and-nav__links { display: none; }
  .and-nav__cta { margin-left: auto; }
  .and-nav__toggle { display: inline-flex; margin-left: 0.25rem; }
  .and-nav__brand img { height: 26px; }
  .and-nav__inner { padding-block: 1rem; }
}
@media (max-width: 639px) {
  .and-nav__cta { display: none; }
  .and-nav__toggle { margin-left: auto; }
}

/* nav com o menu aberto: transparente, sempre visível */
html.menu-open .and-nav {
  transform: none;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.menu-open .and-nav__cta { opacity: 0; pointer-events: none; }

/* ---------- 13. Menu mobile ---------- */
.and-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--paper);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  clip-path: circle(0px at var(--menu-x, calc(100% - 44px)) var(--menu-y, 44px));
  transition: clip-path 0.8s var(--ease-in-out), visibility 0s linear 0.8s;
}
.and-menu.is-open {
  visibility: visible;
  clip-path: circle(var(--menu-r, 150vmax) at var(--menu-x, calc(100% - 44px)) var(--menu-y, 44px));
  transition: clip-path 1s var(--ease-in-out), visibility 0s;
}
.and-menu__art {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background: var(--navy) center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  pointer-events: none;
}
/* pintura violeta só carrega em telas onde o menu existe, depois da intro */
@media (max-width: 1023px) {
  html.is-ready .and-menu__art { background-image: url('../img/pinturas/giaquinto-violeta-1200.jpg'); } /* Giaquinto, Alegorias da Justiça e da Paz — domínio público */
}
.and-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 2rem;
}
.and-menu__list {
  list-style: none;
  margin: auto 0;
  padding: 0;
}
.and-menu__item {
  overflow: hidden;
  border-top: 1px solid rgba(46, 51, 71, 0.7);
}
.and-menu__item:last-child { border-bottom: 1px solid rgba(46, 51, 71, 0.7); }
.and-menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-height: 44px;
  padding: 0.55rem 0;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.4rem + 5.5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--paper-light);
  transform: translate3d(0, 105%, 0);
  transition: transform 0.5s var(--ease-in-out), color 0.4s;
}
.and-menu.is-open .and-menu__link {
  transform: none;
  transition: transform 1.1s var(--ease-expo) calc(0.32s + var(--i, 0) * 0.07s), color 0.4s;
}
.and-menu__num {
  flex: none;
  min-width: 2.75rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--accent-text); /* texto pequeno: vermelho AA */
}
.and-menu__label { transition: transform 0.6s var(--ease-expo); }
.and-menu__link:hover .and-menu__label,
.and-menu__link:focus-visible .and-menu__label { font-style: italic; transform: translateX(0.4rem); }
.and-menu__link.is-active .and-menu__label,
.and-menu__link[aria-current] .and-menu__label { font-style: italic; color: var(--accent); }
.and-menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--gray-light);
  opacity: 0;
  transition: opacity 0.3s;
}
.and-menu__foot a { display: inline-flex; align-items: center; min-height: 44px; }
.and-menu.is-open .and-menu__foot { opacity: 1; transition: opacity 0.8s 0.7s; }

html.reduced-motion .and-menu { clip-path: none; opacity: 0; transition: opacity 0.3s, visibility 0s 0.3s; }
html.reduced-motion .and-menu.is-open { opacity: 1; transition: opacity 0.3s, visibility 0s; }
html.reduced-motion .and-menu__link { transform: none; }

/* ---------- 14. Cursor custom (apenas ponteiro fino) ---------- */
.and-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
  display: none;
}
html.has-cursor .and-cursor { display: block; }
.and-cursor__dot,
.and-cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  translate: -200px -200px;
  will-change: translate;
  transition: opacity 0.3s;
}
.and-cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  transition: opacity 0.3s, scale 0.4s var(--ease-expo);
}
.and-cursor__ring { width: 0; height: 0; }
.and-cursor__circle,
.and-cursor__label {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
}
.and-cursor__circle {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid #fff;
  opacity: 0.55;
  transition: scale 0.6s var(--ease-expo), opacity 0.4s;
}
.and-cursor__label {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  padding: 0.5rem;
  background: var(--red);
  color: var(--paper-light);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.1;
  text-align: center;
  scale: 0;
  transition: scale 0.6s var(--ease-expo);
}
.and-cursor.is-hover .and-cursor__circle { scale: 1.7; opacity: 0.9; }
.and-cursor.is-hover .and-cursor__dot { scale: 0.5; }
.and-cursor.is-down .and-cursor__circle { scale: 0.8; }
.and-cursor.has-label { mix-blend-mode: normal; }
.and-cursor.has-label .and-cursor__label { scale: 1; }
.and-cursor.has-label .and-cursor__circle,
.and-cursor.has-label .and-cursor__dot { opacity: 0; }
.and-cursor.is-hidden .and-cursor__dot,
.and-cursor.is-hidden .and-cursor__ring { opacity: 0; }

/* esconde o cursor nativo, exceto em campos e iframes */
html.has-cursor,
html.has-cursor * { cursor: none !important; }
html.has-cursor :is(input, textarea, [contenteditable]:not([contenteditable="false"]), iframe, [data-cursor-native], [data-cursor-native] *) { cursor: auto !important; }
html.has-cursor :is(select, input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"], input[type="file"], input[type="submit"], input[type="button"]) { cursor: pointer !important; }

/* ---------- 15. Barra de progresso ---------- */
.and-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-progress);
  height: 2px;
  pointer-events: none;
}
.and-progress__bar {
  display: block;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- 16. Marquee ---------- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  --marquee-gap: 2.5rem;
}
/* sem JS (ou no fail-safe) o and.js não monta track/group: o espaço vem do próprio .marquee */
.marquee:not(:has(.marquee__track)) { gap: var(--marquee-gap); }
.marquee__track {
  display: flex;
  flex: none;
  will-change: transform;
}
.marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}
.marquee__sep { color: var(--accent); }
.marquee--display {
  --marquee-gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: 0.15em;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.5rem + 5vw, 6.5rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--fg-strong);
}
.marquee--display em { font-style: italic; color: var(--accent); }
.marquee--small {
  --marquee-gap: 1.5rem;
  padding-block: 0.9rem;
  border-block: 1px solid var(--rule);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--subtle);
}

/* ---------- 17. Toast ---------- */
.and-toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  transform: translateX(-50%);
  pointer-events: none;
}
.and-toast__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(33, 37, 56, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--paper-light);
  font-size: 0.85rem;
  line-height: 1.35;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-expo);
}
.and-toast__item::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.and-toast__item.is-in { opacity: 1; transform: none; }
.and-toast__item.is-out { opacity: 0; transform: translateY(-8px); }

/* ---------- 18. Rodapé ---------- */
.and-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 3rem + 8vw, 9rem) 0 1.5rem;
}
.and-footer__statement {
  display: grid;
  gap: 1.5rem;
}
.and-footer__and {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.25rem, 1.5rem + 15vw, 16.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--red);
}
.and-footer__dot { display: inline-block; animation: and-dot 2.4s ease-in-out infinite; }
@keyframes and-dot { 50% { opacity: 0.35; } }
.and-footer__grid {
  display: grid;
  /* Contato mais larga: o e-mail não quebra no meio entre 1024 e ~1150px */
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem var(--gap);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.and-footer__title {
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray);
}
.and-footer__list { display: grid; gap: 0; }
.and-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  color: var(--paper);
  overflow-wrap: anywhere;
  transition: color 0.4s;
}
.and-footer__list a:hover,
.and-footer__list a:focus-visible { color: var(--accent-text); }
.and-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--gray);
}
.and-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color 0.4s;
}
.and-footer__top:hover, .and-footer__top:focus-visible { color: var(--accent-text); }
.and-footer__top .arrow { color: var(--accent); }
@media (max-width: 1023px) {
  .and-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 539px) {
  .and-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---------- 19. Estados de movimento (só com html.js e sem html.no-motion) ---------- */
/* Texto dividido (data-split) */
.and-split__vis { display: block; }
.and_line, .and_line-mask { display: block; position: relative; }
.and_line-mask { padding: 0.1em 0.1em 0.2em; margin: -0.1em -0.1em -0.2em; }
.and_word, .and_char { display: inline-block; position: relative; }
.and-nobr { white-space: nowrap; }
html.js:not(.no-motion) [data-split]:not(.is-split):not(.is-revealed) { opacity: 0; }

/* fallback sem SplitText: palavras mascaradas */
.and_w {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  vertical-align: top;
  padding: 0.1em 0.06em 0.2em;
  margin: -0.1em -0.06em -0.2em;
}
.and_wi { display: inline-block; }
html:not(.no-motion) [data-split].is-words:not(.is-revealed) .and_wi { transform: translateY(125%); }
[data-split].is-words .and_wi {
  transition: transform 1.1s var(--ease-quart) calc(var(--d, 0s) + min(var(--i, 0), 24) * 45ms);
}
html.and-fallback.reduced-motion [data-split] { transition: opacity 0.5s var(--ease-out) var(--d, 0s); }

/* Reveals genéricos (data-reveal) — estado inicial */
html.js:not(.no-motion) [data-reveal]:not(.is-revealed) { opacity: 0; }
html.js:not(.no-motion):not(.reduced-motion) [data-reveal="up"]:not(.is-revealed) { transform: translate3d(0, 48px, 0); }
html.js:not(.no-motion):not(.reduced-motion) [data-reveal="scale"]:not(.is-revealed) { transform: scale(0.94); }
html.js:not(.no-motion):not(.reduced-motion) [data-reveal="clip"]:not(.is-revealed) { opacity: 1; clip-path: inset(100% 0 0 0); }
html.js:not(.no-motion):not(.reduced-motion) [data-reveal="clip"]:not(.is-revealed) :is(img, video, .reveal-media) { transform: scale(1.15); }
html.js:not(.no-motion):not(.reduced-motion) [data-reveal="line"]:not(.is-revealed) { opacity: 1; transform: scaleX(0); }
html.js:not(.no-motion):not(.reduced-motion) [data-reveal="line"][data-axis="y"]:not(.is-revealed) { transform: scaleY(0); }
html.js:not(.no-motion):not(.reduced-motion) [data-reveal="draw"]:not(.is-revealed) { opacity: 1; }
html.js:not(.no-motion):not(.reduced-motion) [data-reveal="draw"]:not(.is-revealed) :is(path, line, polyline, polygon, circle, ellipse, rect) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-reveal="line"] { transform-origin: 0 50%; }
[data-reveal="line"][data-axis="y"] { transform-origin: 50% 0; }

/* fallback sem GSAP: transições CSS */
html.and-fallback [data-reveal] {
  transition:
    opacity 1.1s var(--ease-out) var(--d, 0s),
    transform 1.3s var(--ease-expo) var(--d, 0s),
    clip-path 1.3s var(--ease-in-out) var(--d, 0s);
}
html.and-fallback [data-reveal="clip"] :is(img, video, .reveal-media) { transition: transform 1.8s var(--ease-expo) var(--d, 0s); }
html.and-fallback [data-reveal="draw"] :is(path, line, polyline, polygon, circle, ellipse, rect) { transition: stroke-dashoffset 1.6s var(--ease-in-out) var(--d, 0s); }
html.and-fallback.reduced-motion [data-reveal] { transition: opacity 0.5s var(--ease-out) var(--d, 0s); }

/* Texto de manifesto (data-scrub-text) */
html.js:not(.no-motion):not(.reduced-motion) [data-scrub-text]:not(.is-scrub) { opacity: 0.15; }
.and_sw { transition: none; }

/* ---------- 20. Movimento reduzido ---------- */
html.reduced-motion .grain--animated,
html.reduced-motion .and-footer__dot { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .grain--animated, .and-footer__dot { animation: none; }
  .and-loader__mark path, .and-loader__word, .and-loader__meta { animation: none !important; }
}

/* ---------- 21. Impressão ---------- */
@media print {
  @page { margin: 16mm; }
  /* papéis semânticos viram tinta sobre papel em qualquer seção */
  :root, .theme-light, .bg-navy, .bg-navy-2, .bg-navy-3, .bg-paper {
    --bg: #fff;
    --fg: #161A26;
    --fg-strong: #161A26;
    --muted: #444;
    --subtle: #5C606E;
    --rule: #ccc;
    --accent-text: var(--red-on-light);
    color-scheme: light;
  }
  html, body, .bg-navy, .bg-navy-2, .bg-navy-3, .bg-paper, .theme-light, .and-footer { background: #fff !important; }
  html, body { color: #161A26 !important; }
  .and-loader, .and-curtain, .and-cursor, .and-progress, .and-menu, .and-toast,
  .grain, .grain-page, .skip-link, .and-nav, .and-footer__top, .marquee, .painting { display: none !important; }
  /* estado final dos reveals: o próprio elemento, a mídia do "clip", os traços do "draw"
     e as peças do texto dividido (descendentes comuns mantêm seus transforms e estados) */
  [data-split], [data-reveal], .and_line, .and_word, .and_char, .and_wi, .and_sw, [data-scrub-text], [data-parallax],
  [data-reveal="clip"] :is(img, video, .reveal-media) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    visibility: visible !important;
  }
  [data-reveal="draw"], [data-reveal="draw"] :is(path, line, polyline, polygon, circle, ellipse, rect) { stroke-dashoffset: 0 !important; }
  /* tinta escura em qualquer seção; painéis que continuam escuros no papel
     (print-color-adjust: exact) usam .print-keep-ink para manter a própria cor */
  /* :where() = especificidade zero: o CSS de print da página sempre pode ajustar */
  :where(h1, h2, h3, h4, .display, .h1, .h2, .h3):not(:where(.print-keep-ink, .print-keep-ink *)) { color: #161A26 !important; }
  :where(h1, h2, h3, h4, .display, .h1, .h2, .h3) { break-after: avoid; }
  :where(p, .label, .lead, .body-text, .muted, .subtle):not(:where(.print-keep-ink, .print-keep-ink *)) { color: #333 !important; }
  :where(.numeral):not(:where(.print-keep-ink *)) { color: var(--red-on-light) !important; }
  .and-footer { border-top: 1px solid #ccc; padding-top: 2rem; }
  .and-footer__and { font-size: 3rem; }
  .and-footer__grid, .and-footer__bottom { border-color: #ccc; }
  .and-footer__title, .and-footer__bottom { color: #5C606E !important; }
  .and-footer__list a { color: #161A26 !important; min-height: 0; }
  .btn { border-color: #161A26 !important; color: #161A26 !important; background: none !important; }
  .btn::before { display: none; }
  a[href^="http"]:not(.btn)::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  /* só blocos pequenos não se partem (seções inteiras deixariam páginas meio vazias) */
  figure, .frame, tr, blockquote { break-inside: avoid; }
  img { max-width: 100% !important; }
}