/* =========================================================
   Karnal · "E vós, quem dizeis que eu sou?"
   Escala proporcional ao artboard de 1440px: --px vale 1px
   em 1440 e encolhe junto com a viewport até o breakpoint.
   ========================================================= */

:root {
  /* A composição de 1440×900 termina no botão, em 777px de altura.
     Limitar --k também pela altura (1440/777 ≈ 1.75) garante que a
     hero inteira caiba na dobra em qualquer monitor, sem rolagem. */
  --k: min(100vw, 1440px, 170svh);
  --px: calc(var(--k) / 1440);

  --cream:      #f5f2df;
  --cream-warm: #f2eadf;
  --navy:       #061d2f;
  --brick:      #8d3422;
  --brick-deep: #893e2e;
  --ink:        #431d15;
  --ink-soft:   #552116;
  --blue-deep:  #27628c;
  --blue:       #408dc6;

  --mask: url(assets/brush-h1.webp);
  --ease: cubic-bezier(.22, .84, .28, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 10px;
  background: var(--ink); color: var(--cream);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   Pincelada — máscara que varre o elemento da esquerda
   para a direita (ou de cima para baixo).
   ========================================================= */

.paint {
  -webkit-mask-image: var(--mask);          mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;           mask-repeat: no-repeat;
  -webkit-mask-size: 300% 100%;             mask-size: 300% 100%;
  -webkit-mask-position: 100% 50%;          mask-position: 100% 50%;
}
.paint--v {
  --mask: url(assets/brush-v.webp);
  -webkit-mask-size: 100% 300%;             mask-size: 100% 300%;
  -webkit-mask-position: 50% 100%;          mask-position: 50% 100%;
}

.intro-pending .paint,
.intro-play .paint { -webkit-mask-position: 0% 50%; mask-position: 0% 50%; }
.intro-pending .paint--v,
.intro-play .paint--v { -webkit-mask-position: 50% 0%; mask-position: 50% 0%; }

.intro-play .paint {
  animation: paint-h var(--dur, 800ms) var(--delay, 0ms) var(--ease) both;
  will-change: mask-position;
}
.intro-play .paint--v { animation-name: paint-v; }

@keyframes paint-h {
  from { -webkit-mask-position: 0% 50%;   mask-position: 0% 50%; }
  to   { -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
}
@keyframes paint-v {
  from { -webkit-mask-position: 50% 0%;   mask-position: 50% 0%; }
  to   { -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
}

/* Entradas simples (texto, foto, campos) */
.intro-pending .reveal { opacity: 0; }
.intro-play .reveal {
  animation: rise 720ms var(--delay, 0ms) var(--ease) both;
}
.intro-play .reveal--rise { animation-name: rise-far; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-far {
  from { opacity: 0; transform: translateY(34px) scale(1.02); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Palco
   ========================================================= */

.stage {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: min(calc(1278 * var(--px)), 100% - 40px);
  margin-inline: auto;
}

/* --- Coluna azul do fundo --- */
.layers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.layers__wrap {
  position: relative; height: 100%;
  width: min(calc(1278 * var(--px)), 100% - 40px);
  margin-inline: auto;
}
.column {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: calc(322 * var(--px));
  background: var(--blue-deep);
}
.column__face {
  position: absolute;
  width: 191.95%; height: 122.02%;
  left: -50.5%; top: -22.07%;
  max-width: none;
  object-fit: cover;
  opacity: .4;
  mix-blend-mode: multiply;
}

/* --- Pinceladas transitórias da abertura --- */
.intro { display: none; }
.intro-play .intro,
.intro-pending .intro {
  display: block;
  position: absolute; inset: 0; z-index: 40;
  pointer-events: none;
}
.intro__strip { position: absolute; overflow: hidden; }
.intro__strip > .paint { position: absolute; inset: 0; }
.intro__fill { position: absolute; inset: 0; }
.intro__strip img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .45;
  mix-blend-mode: multiply;
}
.intro-play .intro__strip {
  animation: strip-out 620ms var(--out) var(--ease) both;
}
@keyframes strip-out {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

.intro__strip--a { left: 16%; right: -4%; top: 9%;  height: 13%; }
.intro__strip--b { left: 31%; right: -8%; top: 33%; height: 11%; }
.intro__strip--c { left: 6%;  right: 26%; top: 63%; height: 9%;  }

/* =========================================================
   Bloco superior
   ========================================================= */

.hero {
  position: relative; z-index: 2;
  min-height: calc(465 * var(--px));      /* a faixa vermelha começa em 465 */
  padding-top: calc(24 * var(--px));
}
.hero__grid {
  display: grid;
  grid-template-columns: calc(574 * var(--px));
  align-items: start;
}

.hero__text { padding-bottom: calc(24 * var(--px)); }

.hero__quote {
  width: calc(62 * var(--px)); min-width: 34px;
  height: auto; margin-top: calc(10 * var(--px));
  fill: var(--brick);
}

.hero__title {
  margin: calc(20 * var(--px)) 0 0;
  font-size: max(34px, calc(64 * var(--px)));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--navy);
  text-wrap: balance;
}

.hero__ref {
  margin: calc(23 * var(--px)) 0 0;
  font-size: max(17px, calc(24 * var(--px)));
  font-style: italic;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brick);
}

.hero__lede {
  margin: calc(40 * var(--px)) 0 0 calc(108 * var(--px));
  max-width: calc(340 * var(--px));
  font-size: max(17px, calc(24 * var(--px)));
  font-style: italic;
  line-height: 1.2;
  color: var(--brick);
  text-wrap: pretty;
}

/* --- Retrato --- */
.portrait-layer {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
}
.portrait-layer__wrap {
  position: relative; height: 100%;
  width: min(calc(1278 * var(--px)), 100% - 40px);
  margin-inline: auto;
}

.portrait {
  position: absolute;
  left: calc(632 * var(--px));
  top: calc(103 * var(--px));
  width: calc(432 * var(--px));
  margin: 0;
  pointer-events: auto;
}
.portrait__plate {
  position: relative;
  aspect-ratio: 432 / 512;
  background: var(--brick-deep);
  overflow: hidden;
}
.portrait__texture {
  position: absolute;
  width: 103.21%; height: 154.73%;
  left: -1.59%; top: -15.47%;
  max-width: none; object-fit: cover;
  opacity: .4;
  mix-blend-mode: multiply;
}
.portrait__photo {
  position: absolute; z-index: 2;
  left: -10.4%; top: -16%;
  width: 113.4%; height: 116%;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
}
.portrait__name {
  position: absolute; z-index: 3;
  right: calc(28 * var(--px)); bottom: calc(24 * var(--px));
  font-size: max(15px, calc(22 * var(--px)));
  line-height: 1.1;
  color: var(--cream-warm);
  text-shadow: 0 1px 10px rgba(6, 29, 47, .45);
}
.portrait__name em { font-style: italic; font-weight: 400; }
.portrait__name b  { font-weight: 700; }

/* =========================================================
   Bloco inferior
   ========================================================= */

.invite {
  position: relative; z-index: 1;
  /* a faixa vermelha ocupa a sobra em telas altas; o conteúdo fica no alto */
  flex: 1 0 auto;
  padding-top: calc(40 * var(--px));
  padding-bottom: calc(16 * var(--px));
  color: var(--cream-warm);
}
.invite__bg {
  position: absolute; inset: 0; z-index: -1;
  background: var(--brick);
  overflow: hidden;
}
.invite__texture {
  position: absolute;
  max-width: none; object-fit: cover;
  opacity: .32;
  mix-blend-mode: multiply;
}
.invite__texture--l {
  left: 0; top: 0;
  width: calc(367 * var(--px)); height: calc(396 * var(--px));
  object-position: 64% 50%;
  transform: scaleY(-1);
}
.invite__texture--r {
  left: calc(908 * var(--px)); top: calc(154 * var(--px));
  width: calc(532 * var(--px)); height: calc(281 * var(--px));
  object-position: 28% 50%;
}

.invite__grid {
  display: grid;
  grid-template-columns: calc(524 * var(--px)) 1fr;
}

.invite__title {
  margin: 0 0 calc(26 * var(--px));
  font-size: max(26px, calc(40 * var(--px)));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--cream-warm);
  text-wrap: balance;
}

/* --- Formulário --- */
.form { display: grid; gap: calc(8 * var(--px)); }
.form[hidden] { display: none; }        /* o display acima venceria o atributo hidden */
.done:focus-visible { outline: none; }

.field__input {
  width: 100%;
  height: max(48px, calc(56 * var(--px)));
  padding: 0 calc(24 * var(--px));
  border: 2px solid transparent;
  border-radius: calc(12 * var(--px));
  background: var(--cream-warm);
  color: var(--ink-soft);
  font: inherit;
  font-size: max(15px, calc(18 * var(--px)));
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field__input::placeholder { color: var(--ink-soft); opacity: .7; }
.field__input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(64, 141, 198, .85);
}
.field--invalid .field__input { border-color: var(--ink); background: #fbf1e6; }

.form__error {
  margin: calc(4 * var(--px)) 0 0;
  font-size: max(13px, calc(15 * var(--px)));
  font-weight: 600;
  color: var(--cream-warm);
}
.form__error[hidden] { display: none; }

.cta {
  margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  gap: .6em;
  width: 100%;
  min-height: max(58px, calc(74 * var(--px)));
  padding: 0 24px;
  border: 2px solid var(--ink);
  border-radius: 100px;
  background: var(--blue);
  color: var(--cream);
  box-shadow: 4px 4px 0 0 var(--ink);
  font: inherit;
  font-size: max(17px, calc(24 * var(--px)));
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background-color .14s var(--ease);
}
.cta svg { width: 1em; height: 1em; flex: none; }
.cta:focus-visible { outline-color: var(--cream); outline-offset: 4px; }
.cta:hover { background: #4d9bd4; transform: translate(-1px, -1px); box-shadow: 6px 6px 0 0 var(--ink); }
.cta:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--ink); }

.form__note {
  margin: calc(10 * var(--px)) 0 0;
  font-size: max(13px, calc(15 * var(--px)));
  text-align: center;
  opacity: .72;
}

.done {
  padding: calc(28 * var(--px)) calc(24 * var(--px));
  border: 2px solid var(--cream-warm);
  border-radius: calc(12 * var(--px));
}
.done[hidden] { display: none; }
.done__title {
  margin: 0 0 8px;
  font-size: max(20px, calc(28 * var(--px)));
  font-weight: 800; letter-spacing: -.02em;
}
.done__text { margin: 0; font-size: max(15px, calc(18 * var(--px))); line-height: 1.35; opacity: .85; }

/* --- Biografia --- */
.invite__bio {
  padding-top: calc(144 * var(--px));     /* deixa o retrato passar por cima */
  margin-left: calc(157 * var(--px));
  width: calc(414 * var(--px));
}
.rule {
  display: block;
  width: calc(74 * var(--px)); height: 2px;
  background: var(--cream);
}
.bio {
  margin: calc(14 * var(--px)) 0 0;
  font-size: max(15px, calc(18 * var(--px)));
  font-style: italic;
  line-height: 1.2;
  text-align: justify;
  hyphens: auto;
  color: var(--cream-warm);
}
.bio b { font-weight: 700; }

/* Colunas estreitas (largura ou escala pela altura): justificado abre buracos */
@media (max-width: 1200px), (max-height: 846px) {
  .bio { text-align: left; hyphens: none; }
}

/* =========================================================
   Abaixo de 860px: composição do Figma mobile (390 de base).
   Texto → faixa vermelha com formulário → retrato no rodapé,
   sobre um bloco azul.
   ========================================================= */

@media (max-width: 860px) {
  :root {
    --px: 1px;
    --m: calc(min(100vw, 560px) / 390);   /* escala das alturas da arte mobile (390 de base) */
  }

  .wrap, .layers__wrap { width: 100%; padding-inline: 20px; }

  .stage { min-height: 0; }

  /* coluna azul vira um bloco no canto superior direito */
  .layers__wrap { padding: 0; }
  .column { top: 0; bottom: auto; right: 0; width: 25.9%; height: calc(248 * var(--m)); }
  .column__face { width: 191.95%; height: 138.9%; left: -50.5%; top: -25.13%; }

  .hero { min-height: calc(248 * var(--m)); padding-top: 20px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { padding-bottom: 20px; }

  .hero__quote { width: 32px; min-width: 0; margin-top: 0; }
  .hero__title { margin-top: 12px; max-width: 261px; font-size: 28px; }
  .hero__ref   { margin-top: 12px; font-size: 12px; }
  .hero__lede  { margin: 27px 0 0 49px; max-width: 200px; font-size: 14px; }

  .intro__strip--a { left: 8%;  right: -6%; top: 5%;  height: 7%; }
  .intro__strip--b { left: 22%; right: -8%; top: 30%; height: 6%; }
  .intro__strip--c { left: 4%;  right: 30%; top: 62%; height: 5%; }

  .invite { padding-top: 26px; padding-bottom: calc(185 * var(--m)); }   /* sobra para o retrato subir */
  .invite__grid { grid-template-columns: 1fr; }
  .invite__title { font-size: 27px; margin-bottom: 17px; }

  .form { gap: 6px; }
  .field__input { height: 44px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
  .cta {
    min-height: 49px; padding: 0 16px;
    border-width: 1.5px; box-shadow: 3px 3px 0 0 var(--ink);
    font-size: 16px;
  }
  .cta:hover { box-shadow: 4px 4px 0 0 var(--ink); }
  .form__note { margin-top: 8px; font-size: 12px; }

  .invite__bio { padding-top: 25px; margin-left: 0; width: 100%; }
  .rule { margin-inline: auto; }
  .bio { margin-top: 15px; font-size: 14px; text-align: center; }

  .invite__texture--l { width: 176px; height: 190px; object-position: 64% 50%; transform: scaleY(-1); }
  .invite__texture--r {
    left: 0; top: calc(294 * var(--m)); width: 100%; height: calc(223 * var(--m));
    object-position: 34% 50%;
    transform: none;
  }

  /* --- retrato no rodapé, sobre o bloco azul --- */
  .portrait-layer {
    position: relative; inset: auto;
    height: calc(381 * var(--m));
    background: var(--blue-deep);
    pointer-events: auto;
  }
  .portrait-layer::before {
    content: '';
    position: absolute; inset: 0;
    background: url(assets/jesus.webp) 50% 38% / 104% auto no-repeat;
    opacity: .4;
    mix-blend-mode: multiply;
  }
  .portrait-layer__wrap { width: 100%; padding: 0; }
  .portrait {
    left: 7.55%;
    top: calc(-97 * var(--m));
    width: 84.8%;
  }
  .portrait__name { right: 20px; bottom: 18px; font-size: 16px; }
}

/* =========================================================
   Movimento reduzido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .intro { display: none !important; }
}