/* ═══════════════════════════════════════════════════════════════
   CAROL PORTILHO — Link Hub v4 · A CENA
   O teatro: spotlight que acompanha o olhar, poeira de palco no
   feixe de luz, retrato-medalhão com halo, entrada orquestrada e
   os arcos de leitura desenhando-se. O encanto está no movimento.
   ═══════════════════════════════════════════════════════════════ */

@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;
}

/* registro para o feixe poder derivar em keyframes (touch) */
@property --spot-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --spot-y { syntax: "<percentage>"; inherits: true; initial-value: 34%; }

:root {
  --noite: #0A141B;
  --noite-profunda: #061017;
  --vinho: #4A1D22;
  --vinho-profundo: #300914;
  --carmim: #A31C38;
  --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.24);

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

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

  /* posição do feixe de luz (o JS acompanha o cursor) */
  --spot-x: 50%;
  --spot-y: 34%;
}

* { 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;
}

/* ═══════════════ O TEATRO ═══════════════ */

.stageBackdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  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.52)
    blur(1px);
}
.stageSlideActive {
  opacity: 1;
  transform: scale(1.105);
}
.stageColorGrade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(
      120% 90% at 50% 30%,
      rgba(10, 20, 27, 0.55) 0%,
      rgba(6, 16, 23, 0.86) 58%,
      rgba(6, 16, 23, 0.97) 100%
    ),
    linear-gradient(180deg, rgba(48, 9, 20, 0.28) 0%, transparent 40%, rgba(6, 16, 23, 0.75) 100%);
}
/* o feixe: luz quente que acompanha o olhar do visitante */
.stageSpotlight {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    clamp(280px, 42vw, 560px) circle at var(--spot-x) var(--spot-y),
    rgba(183, 154, 135, 0.16) 0%,
    rgba(74, 29, 34, 0.1) 45%,
    transparent 72%
  );
  pointer-events: none;
}
/* sem cursor (touch), o feixe deriva sozinho pelo palco */
@media (hover: none) {
  .stageSpotlight { animation: spotDrift 14s ease-in-out infinite alternate; }
}
@keyframes spotDrift {
  0%   { --spot-x: 34%; --spot-y: 26%; }
  100% { --spot-x: 66%; --spot-y: 44%; }
}

/* poeira de palco: partículas subindo pelo feixe */
.stageDust {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.stageDust::before,
.stageDust::after {
  content: "";
  position: absolute;
  inset: -10% 0;
  background-image:
    radial-gradient(2px 2px at 22% 82%, rgba(237, 230, 232, 0.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 64%, rgba(183, 154, 135, 0.55), transparent 60%),
    radial-gradient(2.4px 2.4px at 61% 88%, rgba(237, 230, 232, 0.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 58%, rgba(183, 154, 135, 0.5), transparent 60%),
    radial-gradient(1.8px 1.8px at 33% 44%, rgba(237, 230, 232, 0.34), transparent 60%),
    radial-gradient(1.4px 1.4px at 87% 76%, rgba(237, 230, 232, 0.42), transparent 60%);
  background-repeat: no-repeat;
  animation: dustRise 17s linear infinite;
  opacity: 0;
}
.stageDust::after {
  background-image:
    radial-gradient(1.6px 1.6px at 14% 70%, rgba(183, 154, 135, 0.45), transparent 60%),
    radial-gradient(2px 2px at 52% 78%, rgba(237, 230, 232, 0.36), transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 50%, rgba(237, 230, 232, 0.45), transparent 60%),
    radial-gradient(2.2px 2.2px at 90% 84%, rgba(183, 154, 135, 0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 92%, rgba(237, 230, 232, 0.38), transparent 60%);
  animation-duration: 23s;
  animation-delay: -9s;
}
@keyframes dustRise {
  0%   { transform: translate3d(0, 6%, 0); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translate3d(1.5%, -8%, 0); opacity: 0; }
}

.stageVignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  box-shadow: inset 0 0 200px rgba(3, 10, 14, 0.9);
  pointer-events: none;
}
.stageGrain {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0.05;
  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;
}

/* ═══════════════ A CENA ═══════════════ */

.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.7svh, 18px);
  width: min(100%, 520px);
  margin: 0 auto;
  padding: clamp(16px, 3svh, 40px) clamp(20px, 4vw, 24px);
  text-align: center;
}

/* coreografia de entrada: cada elemento entra no seu tempo */
.enter {
  opacity: 0;
  transform: translateY(14px);
  animation: enterUp 640ms var(--ease-out) forwards;
  animation-delay: calc(var(--enter) * 110ms + 120ms);
}
@keyframes enterUp {
  to { opacity: var(--enter-final, 1); transform: translateY(0); }
}

/* ——— Arcos de leitura desenhando-se ——— */

.nonverbalSignal {
  position: absolute;
  top: clamp(8px, 4svh, 48px);
  right: calc(50% - 320px);
  width: min(300px, 60vw);
  z-index: 7;
  opacity: 0.14;
  pointer-events: none;
  color: var(--bronze);
}
@media (max-width: 640px) {
  .nonverbalSignal { right: -70px; }
}
.nonverbalSignal path {
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: signalDraw 1.9s var(--ease-out) forwards;
}
.nonverbalSignal path:nth-child(2) { animation-delay: 180ms; }
.nonverbalSignal path:nth-child(3) { animation-delay: 360ms; }
.nonverbalSignal path:nth-child(4) { animation-delay: 540ms; }
@keyframes signalDraw {
  to { stroke-dashoffset: 0; }
}

/* ——— Retrato-medalhão ——— */

.medallion {
  position: relative;
  width: clamp(120px, 17svh, 152px);
}
.medallionHalo {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(183, 154, 135, 0.22) 0%,
    rgba(74, 29, 34, 0.16) 45%,
    transparent 70%
  );
  animation: haloBreath 6s ease-in-out infinite;
}
@keyframes haloBreath {
  0%, 100% { opacity: 0.75; transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1.03); }
}
.medallionFrame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--bronze);
  outline: 1px solid rgba(183, 154, 135, 0.28);
  outline-offset: 5px;
  box-shadow:
    0 0 0 1px rgba(6, 16, 23, 0.9),
    0 0 40px rgba(74, 29, 34, 0.55),
    0 24px 44px rgba(0, 0, 0, 0.5);
}
.medallionFrame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  display: block;
  filter: saturate(0.85) contrast(1.04);
}
/* varredura de luz na entrada — o holofote encontra o rosto */
.medallionSweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(245, 240, 234, 0.32) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: sweepLight 1.1s var(--ease-out) 900ms forwards;
  pointer-events: none;
}
@keyframes sweepLight {
  to { transform: translateX(120%); }
}
/* microacento carmim sob o medalhão */
.medallion::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 26px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--carmim);
}

/* ——— Identificação ——— */

.brandEyebrow {
  color: var(--bronze);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.2em;
  margin-top: clamp(4px, 1svh, 10px);
}

.brandName {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.3rem, 8svh, 5.4rem);
  line-height: 0.96;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gelo);
}
.nameLine { display: block; overflow: hidden; }
.nameInner { display: inline-block; }

.brandHeadline {
  font-size: clamp(0.88rem, 1.9svh, 1rem);
  font-weight: 460;
  color: var(--texto-2);
  line-height: 1.45;
}
.brandHeadline strong {
  color: var(--creme);
  font-weight: 640;
}

/* ——— Programa da noite (links) ——— */

.linkStack {
  width: 100%;
  display: grid;
  border-top: 1px solid var(--hairline);
  margin-top: clamp(2px, 0.8svh, 8px);
}

.premiumLink {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 12px;
  min-height: clamp(56px, 7.6svh, 64px);
  padding: 8px 6px;
  overflow: hidden;
  color: var(--gelo);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: letter-spacing 260ms var(--ease-out);
}
/* calor que acende por baixo da linha */
.premiumLink::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    60% 130% at 50% 100%,
    rgba(74, 29, 34, 0.55) 0%,
    rgba(48, 9, 20, 0.2) 60%,
    transparent 100%
  );
  transition: opacity 300ms ease;
  pointer-events: none;
}
/* sublinhado que cresce do centro */
.premiumLink::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze) 30%, var(--bronze) 70%, transparent);
  transform: translateX(-50%) scaleX(0);
  transition: transform 320ms var(--ease-out);
}
.premiumLink:hover::before,
.premiumLink:focus-visible::before { opacity: 1; }
.premiumLink:hover::after,
.premiumLink:focus-visible::after { transform: translateX(-50%) scaleX(1); }
.premiumLink:active { transform: scale(0.994); }

.premiumLinkCopy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2px;
}
.premiumLinkCopy strong {
  font-size: clamp(0.96rem, 2svh, 1.06rem);
  font-weight: 660;
  letter-spacing: 0.015em;
  transition: letter-spacing 300ms var(--ease-out), color 200ms ease;
}
/* o texto respira quando recebe atenção */
.premiumLink:hover .premiumLinkCopy strong,
.premiumLink:focus-visible .premiumLinkCopy strong {
  letter-spacing: 0.055em;
  color: var(--creme);
}
.premiumLinkCopy small {
  color: var(--texto-2);
  font-size: 0.75rem;
  line-height: 1.3;
}

.premiumLinkOrn {
  position: relative;
  z-index: 2;
  width: 6px;
  height: 6px;
  justify-self: center;
  border-radius: 50%;
  background: rgba(139, 106, 85, 0.55);
  transition: background-color 250ms ease, box-shadow 250ms ease;
}
.premiumLink:hover .premiumLinkOrn,
.premiumLink:focus-visible .premiumLinkOrn {
  background: var(--carmim);
  box-shadow: 0 0 10px rgba(163, 28, 56, 0.55);
}

.premiumLinkArrow {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 17px;
  justify-self: center;
  color: var(--bronze-escuro);
  opacity: 0.7;
  transition: transform 260ms var(--ease-out), color 200ms ease, opacity 200ms ease;
}
.premiumLinkArrow svg { width: 100%; height: 100%; display: block; }
.premiumLink:hover .premiumLinkArrow,
.premiumLink:focus-visible .premiumLinkArrow {
  transform: translate(2px, -2px);
  color: var(--bronze);
  opacity: 1;
}

.premiumLink[aria-disabled="true"],
.communityFeature[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  --enter-final: 0.5; /* a coreografia de entrada respeita o estado desativado */
}

/* ——— O convite (comunidade) ——— */

.communityFeature {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: clamp(96px, 13svh, 118px);
  padding: 18px 22px 16px;
  color: var(--gelo);
  text-decoration: none;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(163, 28, 56, 0.2), transparent 55%),
    linear-gradient(160deg, var(--vinho), var(--vinho-profundo));
  border: 1px solid rgba(183, 154, 135, 0.45);
  border-radius: 4px;
  box-shadow:
    0 20px 44px rgba(48, 9, 20, 0.32),
    inset 0 1px 0 rgba(245, 240, 234, 0.09);
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease;
  margin-top: clamp(2px, 0.8svh, 8px);
}
/* cantoneiras de convite */
.inviteCorner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--bronze);
  transition: width 280ms var(--ease-out), height 280ms var(--ease-out);
  pointer-events: none;
}
.inviteCorner.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.inviteCorner.br { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.communityFeature:hover,
.communityFeature:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 26px 56px rgba(48, 9, 20, 0.46),
    inset 0 1px 0 rgba(245, 240, 234, 0.12);
}
/* as cantoneiras se abrem para receber */
.communityFeature:hover .inviteCorner,
.communityFeature:focus-visible .inviteCorner {
  width: 30px;
  height: 30px;
}

.communityCopy { display: grid; gap: 1px; justify-items: center; }

.communityEyebrow {
  color: var(--bronze);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.communityTitle {
  font-family: var(--font-display);
  font-weight: 800;
  white-space: nowrap;
  font-size: clamp(1.95rem, 4.8svh, 2.7rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--creme);
}
.communityDesc {
  color: rgba(237, 230, 232, 0.74);
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 3px;
}
.communityAction {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  justify-self: center;
  padding-bottom: 3px;
  color: var(--creme);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(245, 240, 234, 0.5);
  transition: border-color 200ms ease;
}
.communityFeature:hover .communityAction { border-color: var(--creme); }
.communityAction svg {
  width: 15px;
  height: 15px;
  transition: transform 240ms var(--ease-out);
}
.communityFeature:hover .communityAction svg { transform: translate(2px, -2px); }

/* ——— Assinatura ——— */

.brandSignature {
  color: rgba(237, 230, 232, 0.56);
  font-size: 0.75rem;
  font-weight: 480;
  letter-spacing: 0.06em;
}
.brandSignature::before,
.brandSignature::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  vertical-align: middle;
  margin: 0 10px;
}
/* filete de Rosa Sinal — dose única ≤1% */
.brandSignature::before { background: linear-gradient(90deg, var(--sinal), var(--carmim)); }
.brandSignature::after { background: var(--hairline); }

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

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

@media (prefers-reduced-motion: reduce) {
  .stageSlide,
  .stageSpotlight,
  .stageDust::before,
  .stageDust::after,
  .medallionHalo,
  .medallionSweep,
  .enter,
  .nonverbalSignal path {
    animation: none;
    transition: none;
  }
  .enter { opacity: 1; transform: none; }
  .nonverbalSignal path { stroke-dashoffset: 0; }
  .medallionSweep { display: none; }
  .stageSlideActive { transform: none; }
  .stageSlide:not(.stageSlideActive) { display: none; }
  .premiumLink,
  .premiumLink::before,
  .premiumLink::after,
  .premiumLink .premiumLinkCopy strong,
  .premiumLink .premiumLinkArrow,
  .communityFeature,
  .inviteCorner,
  .communityAction,
  .communityAction svg {
    transition: none;
  }
}

/* ═══════════════ MOBILE ═══════════════ */

@media (max-width: 480px) {
  .scene { gap: clamp(8px, 1.3svh, 13px); padding: 16px 20px; }
  .medallion { width: clamp(108px, 15svh, 132px); }
  .brandEyebrow { letter-spacing: 0.1em; white-space: nowrap; }
  .brandName { font-size: clamp(2.9rem, 6.8svh, 3.9rem); }
  .premiumLink { min-height: 54px; }
  .premiumLinkCopy small { white-space: nowrap; }
  .communityFeature { min-height: 0; padding: 14px 18px 13px; }
  .communityTitle { font-size: clamp(1.8rem, 4.3svh, 2.2rem); }
  .nonverbalSignal { right: -80px; opacity: 0.1; }
}

/* telas baixas de desktop */
@media (min-width: 1024px) and (max-height: 800px) {
  .medallion { width: clamp(104px, 14svh, 126px); }
  .brandName { font-size: clamp(2.9rem, 7svh, 4.2rem); }
  .scene { gap: clamp(8px, 1.4svh, 13px); }
  .premiumLink { min-height: 52px; }
  .communityFeature { min-height: 88px; }
  .communityTitle { font-size: clamp(1.8rem, 4.2svh, 2.3rem); }
}