/* ═══════════════════════════════════════════════════════════════
   CAROL PORTILHO — Link Hub v3 · O CARTAZ
   Poster editorial de uma dobra: sem card, tipografia como
   arquitetura. Morganite no tamanho para o qual foi desenhada
   (--cp-type-hero do brand book), retrato fundido na noite,
   links como índice editorial, comunidade como tarja carmim.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Morganite";
  src: url("../assets/fonts/Morganite-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Morganite";
  src: url("../assets/fonts/Morganite-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --noite: #0A141B;
  --noite-profunda: #061017;
  --vinho: #4A1D22;
  --vinho-profundo: #300914;
  --carmim: #A31C38;
  --carmim-hover: #B72641;
  --sinal: #F31955;
  --gelo: #EDE6E8;
  --creme: #F5F0EA;
  --bronze: #B79A87;
  --bronze-escuro: #8B6A55;

  --texto-2: rgba(237, 230, 232, 0.68);
  --hairline: rgba(183, 154, 135, 0.26);

  --font-display: "Morganite", sans-serif;
  --font-texto: "Archivo", "Helvetica Neue", sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  min-height: 100svh;
  background: var(--noite-profunda);
  color: var(--gelo);
  font-family: var(--font-texto);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════ PALCO ATRÁS DO CARTAZ ═══════════════ */

.stageBackdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--noite-profunda);
  isolation: isolate;
}
.stageSlide {
  position: absolute;
  inset: -2%;
  opacity: 0;
  transform: scale(1.045);
  transition:
    opacity 1.8s var(--ease-out),
    transform 7.5s linear;
  will-change: opacity, transform;
}
.stageSlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  filter:
    grayscale(1)
    saturate(0.1)
    contrast(1.05)
    brightness(0.5)
    blur(1px);
}
.stageSlideActive {
  opacity: 1;
  transform: scale(1.105);
}
/* véu denso: o palco é presença subliminar, não protagonista */
.stageColorGrade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(6, 16, 23, 0.94) 0%,
      rgba(10, 20, 27, 0.86) 45%,
      rgba(48, 9, 20, 0.62) 78%,
      rgba(6, 16, 23, 0.8) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 16, 23, 0.5) 0%,
      rgba(6, 16, 23, 0.18) 45%,
      rgba(6, 16, 23, 0.88) 100%
    );
}
.stageSmoke {
  position: absolute;
  inset: -20%;
  z-index: 3;
  background:
    radial-gradient(circle at 74% 30%, rgba(183, 154, 135, 0.13), transparent 30%),
    radial-gradient(circle at 38% 72%, rgba(74, 29, 34, 0.32), transparent 38%);
  filter: blur(44px);
  animation: smokeDrift 18s ease-in-out infinite alternate;
}
.stageVignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  box-shadow: inset 0 0 200px rgba(3, 10, 14, 0.9);
  pointer-events: none;
}
.stageGrain {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.055;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: soft-light;
}
@keyframes smokeDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.04); }
}

/* ═══════════════ RETRATO FUNDIDO NA NOITE ═══════════════ */

.posterPortrait {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(46vw, 620px);
  z-index: -1;
  pointer-events: none;
  /* fusão: a foto emerge da noite, sem moldura */
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.98) 55%, transparent 98%),
    linear-gradient(to top, transparent 0%, rgba(0,0,0,1) 26%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, rgba(0,0,0,0.98) 55%, transparent 98%),
    linear-gradient(to top, transparent 0%, rgba(0,0,0,1) 26%);
  mask-composite: intersect;
}
.posterPortrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  /* penumbra: o estúdio claro do ensaio entra na luz do cartaz */
  filter: saturate(0.7) contrast(1.06) brightness(0.66);
  animation: portraitBreath 22s ease-in-out infinite alternate;
}
/* lavagem noite/vinho por cima da figura */
.posterPortrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    200deg,
    rgba(6, 16, 23, 0.5) 0%,
    rgba(48, 9, 20, 0.34) 55%,
    rgba(6, 16, 23, 0.62) 100%
  );
  mix-blend-mode: multiply;
}
@keyframes portraitBreath {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

/* ═══════════════ O CARTAZ ═══════════════ */

.poster {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2.6svh, 26px);
  width: min(100%, 620px);
  padding: clamp(18px, 3svh, 44px) clamp(20px, 4vw, 24px);
}

/* ——— Masthead ——— */

.brandEyebrow {
  color: var(--bronze);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.22em;
}

.brandName {
  display: grid;
  margin-top: clamp(2px, 0.8svh, 8px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.4rem, 17.5svh, 12rem);
  line-height: 0.96; /* brand book: nunca abaixo de 0,95 */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gelo);
}
.nameLine {
  display: block;
  overflow: hidden;
}
.nameInner {
  display: inline-block;
  transform: translateY(0);
  animation: nameRise 760ms var(--ease-out) backwards;
}
.nameLine:nth-child(2) .nameInner { animation-delay: 120ms; }
@keyframes nameRise {
  from { transform: translateY(104%); }
  to   { transform: translateY(0); }
}

.brandHeadline {
  margin-top: clamp(2px, 0.8svh, 8px);
  font-size: clamp(0.9rem, 2svh, 1.02rem);
  font-weight: 460;
  color: var(--texto-2);
  line-height: 1.45;
}
.brandHeadline strong {
  color: var(--creme);
  font-weight: 640;
}

/* ——— Índice editorial ——— */

.linkIndex {
  display: grid;
  border-top: 1px solid var(--hairline);
}

.indexRow {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 22px;
  align-items: center;
  gap: 14px;
  min-height: clamp(56px, 8svh, 66px);
  padding: 8px 4px;
  overflow: hidden;
  color: var(--gelo);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
/* preenchimento vinho que varre a linha */
.indexRow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--vinho-profundo), var(--vinho) 85%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease-out);
}
.indexRow:hover::before,
.indexRow:focus-visible::before { transform: scaleX(1); }

.indexNum {
  position: relative;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.12em;
  color: var(--bronze-escuro);
  transition: color 200ms ease;
}
.indexRow:hover .indexNum,
.indexRow:focus-visible .indexNum { color: var(--bronze); }

.indexCopy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2px;
  transition: transform 260ms var(--ease-out);
}
.indexRow:hover .indexCopy,
.indexRow:focus-visible .indexCopy { transform: translateX(6px); }
.indexCopy strong {
  font-size: clamp(1rem, 2.1svh, 1.12rem);
  font-weight: 660;
  letter-spacing: 0.01em;
}
.indexCopy small {
  color: var(--texto-2);
  font-size: 0.75rem;
  line-height: 1.3;
}

.indexArrow {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
  color: var(--bronze-escuro);
  transition: transform 260ms var(--ease-out), color 200ms ease;
}
.indexArrow svg { width: 100%; height: 100%; display: block; }
.indexRow:hover .indexArrow,
.indexRow:focus-visible .indexArrow {
  transform: translate(3px, -3px);
  color: var(--gelo);
}

.indexRow[aria-disabled="true"],
.communityFeature[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ——— Tarja da comunidade: a única área de cor ——— */

.communityFeature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  min-height: clamp(84px, 12svh, 104px);
  padding: 14px 18px 14px 20px;
  overflow: hidden;
  color: var(--gelo);
  text-decoration: none;
  background: linear-gradient(115deg, var(--carmim), #8C1730 78%);
  border-radius: 3px;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, background-color 220ms ease;
}
/* grifo de perita: traço fino que sublinha a tarja */
.communityFeature::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--vinho-profundo);
}
.communityFeature:hover,
.communityFeature:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(163, 28, 56, 0.34);
  background: linear-gradient(115deg, var(--carmim-hover), #96182f 78%);
}

.communityCopy { display: grid; gap: 1px; }

.communityEyebrow {
  color: rgba(237, 230, 232, 0.75);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.communityTitle {
  font-family: var(--font-display);
  font-weight: 800;
  white-space: nowrap;
  font-size: clamp(2rem, 5svh, 2.9rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--creme);
}
.communityDesc {
  color: rgba(237, 230, 232, 0.78);
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 3px;
  max-width: 40ch;
}
.communityAction {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  color: var(--creme);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* CTA sublinhado — padrão poster */
  border-bottom: 2px solid rgba(245, 240, 234, 0.55);
  transition: border-color 200ms ease;
}
.communityFeature:hover .communityAction { border-color: var(--creme); }
.communityAction svg {
  width: 16px;
  height: 16px;
  transition: transform 220ms var(--ease-out);
}
.communityFeature:hover .communityAction svg { transform: translate(2px, -2px); }

/* ——— Rodapé do cartaz ——— */

.posterFoot {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 14px;
}
/* pulso de Rosa Sinal — a dose única (≤1%) */
.footRule {
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, var(--sinal), var(--carmim) 70%);
}
.brandSignature {
  color: rgba(237, 230, 232, 0.56);
  font-size: 0.75rem;
  font-weight: 480;
  letter-spacing: 0.06em;
}

/* ═══════════════ ACESSIBILIDADE ═══════════════ */

a:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .stageSlide,
  .stageSmoke,
  .posterPortrait img,
  .nameInner {
    animation: none;
    transition: none;
  }
  .stageSlideActive { transform: none; }
  .stageSlide:not(.stageSlideActive) { display: none; }
  .indexRow::before,
  .indexRow .indexCopy,
  .indexRow .indexArrow,
  .communityFeature,
  .communityAction,
  .communityAction svg {
    transition: none;
  }
}

/* ═══════════════ MOBILE — o cartaz empilha ═══════════════ */

@media (max-width: 1023px) {
  /* retrato vira banda superior, fundido para baixo */
  .posterPortrait {
    width: 100%;
    height: 40svh;
    bottom: auto;
  }
  .posterPortrait img {
    object-position: center 16%;
    -webkit-mask-image: linear-gradient(to top, transparent 6%, rgba(0,0,0,0.96) 52%);
    mask-image: linear-gradient(to top, transparent 6%, rgba(0,0,0,0.96) 52%);
  }
  .poster {
    justify-content: flex-end;
    width: 100%;
  }
  .brandHeadline { max-width: none; }
}

@media (max-width: 480px) {
  .poster {
    gap: clamp(10px, 1.6svh, 16px);
    padding: 16px 20px 18px;
  }
  .brandEyebrow {
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-shadow: 0 1px 14px rgba(6, 16, 23, 0.85), 0 0 4px rgba(6, 16, 23, 0.6);
  }
  .brandName { text-shadow: 0 2px 24px rgba(6, 16, 23, 0.55); }
  .brandName { font-size: clamp(4rem, 10.5svh, 6.2rem); }
  .indexRow { min-height: 54px; grid-template-columns: 34px 1fr 20px; gap: 10px; }
  .indexCopy small { white-space: nowrap; }
  .communityFeature {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    min-height: 0;
    padding: 12px 16px 12px 18px;
  }
  .communityAction { justify-self: start; }
  .communityTitle { font-size: clamp(1.9rem, 4.4svh, 2.3rem); }
}

/* ═══════════════ DESKTOP ═══════════════ */

@media (min-width: 1024px) {
  .poster {
    width: min(60vw, 760px);
    padding-left: clamp(48px, 7vw, 150px);
  }
  /* o sobrenome invade a foto: o cartaz não respeita colunas */
  .brandName { width: 118%; position: relative; z-index: 2; }
}

@media (min-width: 1024px) and (max-height: 800px) {
  .brandName { font-size: clamp(4rem, 13.5svh, 8rem); }
  .poster { gap: clamp(10px, 2svh, 18px); }
  .indexRow { min-height: 54px; }
  .communityFeature { min-height: 80px; }
  .communityTitle { font-size: clamp(1.8rem, 4.4svh, 2.4rem); }
}