/* =====================================================================
   Victoria Kiu — Landing oficial · v0.2
   Fontes: Cormorant Garamond (display) + DM Sans (UI/corpo)
   Paleta: bordô profundo · sienna terroso · dourado champanhe
   ===================================================================== */

:root {
  /* ---- tipografia ---- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;

  /* ---- fundo / profundidade ---- */
  --bg-0: #0f0505;
  --bg-1: #1e0808;
  --bg-2: #330f0c;

  /* ---- bordô / vermelho profundo ---- */
  --wine:   #6b1012;
  --wine-2: #8c1c1c;

  /* ---- sienna / terra queimada ---- */
  --terra:   #7d3010;
  --terra-2: #a04520;
  --brown:   #3d1810;

  /* ---- dourado champanhe ---- */
  --gold:      #e8c99b;
  --gold-2:    #c9a46a;
  --gold-deep: #a07040;

  /* ---- texto ---- */
  --cream:     #f6ebdd;
  --cream-dim: #d9c4af;
  --muted:     #a88870;

  /* ---- superfícies de vidro ---- */
  --glass:     rgba(60, 18, 12, 0.45);
  --glass-brd: rgba(232, 201, 155, 0.16);
  --glass-hi:  rgba(232, 201, 155, 0.38);

  --maxw: 30rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.58);
}

/* ============================ RESET ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  font-family: var(--font-ui);
  color: var(--cream);
  background: var(--bg-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-touch-callout: none;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; user-drag: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Protege imagens de arrastar */
img[draggable="false"] { pointer-events: none; }

/* ============================ ATMOSFERA ============================ */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--wine) 0%, transparent 55%),
    radial-gradient(100% 70% at 110% 110%, var(--brown) 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 45%, #0a0303 100%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(65px); opacity: 0.45; will-change: transform; }
.orb--wine  { width: 26rem; height: 26rem; top: -8rem; left: -10rem;
  background: radial-gradient(circle, var(--wine-2), transparent 70%);
  animation: drift 22s var(--ease) infinite alternate; }
.orb--gold  { width: 18rem; height: 18rem; top: 30%; right: -8rem;
  background: radial-gradient(circle, rgba(232,201,155,0.38), transparent 70%);
  animation: drift 28s var(--ease) infinite alternate-reverse; }
.orb--terra { width: 22rem; height: 22rem; bottom: -10rem; left: 20%;
  background: radial-gradient(circle, var(--terra), transparent 70%);
  animation: drift 26s var(--ease) infinite alternate; }
.grain { position: absolute; inset: -50%; opacity: 0.04; 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.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5rem, -2rem, 0) scale(1.12); }
}

/* ============================ SHELL ============================ */
.shell {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.5rem, 8vw, 4rem) 1.3rem calc(2.5rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: clamp(2.5rem, 7vw, 3.5rem);
}

/* ============================ HERO ============================ */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }

/* retrato */
.portrait { position: relative; width: clamp(10rem, 44vw, 13.5rem); aspect-ratio: 1; margin: 0 0 0.4rem; }
.portrait__img {
  position: relative; z-index: 2; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  border: 1.5px solid rgba(232, 201, 155, 0.32);
  box-shadow: var(--shadow), inset 0 0 0 4px rgba(15, 5, 5, 0.6);
  animation: float 7s ease-in-out infinite;
}
.portrait__ring {
  position: absolute; inset: -0.7rem; z-index: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--gold), transparent 40%, var(--terra-2), transparent 75%, var(--gold));
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
          mask: radial-gradient(circle, transparent 62%, #000 63%);
  opacity: 0.82; animation: spin 14s linear infinite;
}
.portrait__glow {
  position: absolute; inset: -25%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,201,155,0.32), transparent 60%);
  filter: blur(14px);
}

.name {
  font-family: var(--font-display);
  font-weight: 700; font-style: normal; line-height: 1.0;
  font-size: clamp(3.2rem, 16vw, 5.2rem);
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff 0%, var(--gold) 52%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  -webkit-user-select: none; user-select: none;
}
.role {
  font-family: var(--font-ui);
  font-size: clamp(0.65rem, 2.8vw, 0.78rem); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-dim); font-weight: 500;
  -webkit-user-select: none; user-select: none;
}

/* ============================ CARROSSEL ============================ */
.gallery { width: 100%; }
.gallery__stage {
  position: relative; overflow: hidden;
  border-radius: 1.1rem;
  aspect-ratio: 3 / 4;
  max-height: 66vh;
  background: var(--bg-2);
  box-shadow: var(--shadow);
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.gallery__stage.dragging { cursor: grabbing; }
.gallery__track {
  display: flex; height: 100%;
  will-change: transform;
  /* transition definida via JS */
}
.gallery__slide {
  flex-shrink: 0; height: 100%; position: relative; overflow: hidden;
  border-radius: 1.05rem; /* evita borda reta visível contra o container arredondado */
  filter: brightness(0.45) saturate(0.65);
  transition: filter 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.gallery__slide.is-active {
  filter: brightness(1) saturate(1);
}
.gallery__slide img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; pointer-events: none;
  -webkit-user-select: none; user-select: none;
  transform: scale(1);
  transform-origin: center center;
  /* Ken Burns: transição lenta — ativa quando o slide ganha .is-active */
  transition: transform 6.2s ease-in-out;
}
/* object-position por foto — enquadra o melhor da imagem no recorte 3:4 */
.gallery__slide[data-frame="0"] img { object-position: 52% 18%; } /* corpo inteiro + rosto */
.gallery__slide[data-frame="1"] img { object-position: 50% 35%; } /* pose agachada centrada */
.gallery__slide[data-frame="2"] img { object-position: 50% 12%; } /* corpo inteiro, mais alto */
.gallery__slide[data-frame="3"] img { object-position: 58% 20%; } /* perfil/nuca, rosto à dir */
.gallery__slide[data-frame="4"] img { object-position: 50% 22%; } /* close no rosto + mão */

/* Ken Burns — direção e intensidade distintas por foto */
.gallery__slide[data-frame="0"].is-active img { transform: scale(1.06) translate(-1.0%,  0.5%); }
.gallery__slide[data-frame="1"].is-active img { transform: scale(1.07) translate( 0.8%, -0.6%); }
.gallery__slide[data-frame="2"].is-active img { transform: scale(1.05) translate( 0.3%, -0.8%); }
.gallery__slide[data-frame="3"].is-active img { transform: scale(1.08) translate(-1.2%,  0.4%); }
.gallery__slide[data-frame="4"].is-active img { transform: scale(1.06) translate( 0.6%, -0.5%); }

/* Reset instantâneo ao perder foco (slide está fora da tela — invisível) */
.gallery__slide:not(.is-active) img { transition: transform 0.05s; }

/* overlay gradiente elegante */
.gallery__slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15,5,5,0.55) 0%, transparent 45%);
}

/* dots */
.gallery__dots {
  position: absolute; bottom: 0.9rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.45rem; z-index: 10;
}
.gallery__dot {
  width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: rgba(246,235,221,0.35); border: none;
  padding: 0; cursor: pointer;
  transition: background 0.35s ease, transform 0.35s ease;
}
.gallery__dot.active { background: var(--gold); transform: scale(1.55); }

/* ============================ LIGHTBOX ============================ */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 3, 3, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; visibility: hidden;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }

.lightbox__close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: rgba(232, 201, 155, 0.14);
  border: 1px solid rgba(232, 201, 155, 0.28);
  color: var(--gold); display: grid; place-items: center;
  transition: background 0.3s ease, transform 0.4s var(--ease);
}
.lightbox__close:hover { background: rgba(232, 201, 155, 0.28); transform: rotate(90deg); }
.lightbox__close svg { width: 1.15rem; height: 1.15rem; }

.lightbox__fig {
  max-width: min(82vw, 46rem); max-height: 84vh;
  border-radius: 0.9rem; overflow: hidden;
  box-shadow: 0 2.5rem 5rem rgba(0,0,0,0.75);
  transform: scale(0.88);
  transition: transform 0.45s var(--ease);
  position: relative; z-index: 2;
}
.lightbox.open .lightbox__fig { transform: scale(1); }
.lightbox__fig img {
  display: block; width: 100%; max-height: 84vh;
  object-fit: contain; pointer-events: none;
  -webkit-user-select: none; user-select: none;
  transition: opacity 0.22s ease;
}
.lightbox__fig img.lb-fade { opacity: 0; }

/* botões prev / next */
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(15,5,5,0.72);
  border: 1px solid rgba(232,201,155,0.22);
  color: var(--gold); display: grid; place-items: center;
  cursor: pointer; z-index: 10;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  opacity: 0.7;
}
.lightbox__nav:hover { background: rgba(107,16,18,0.6); border-color: rgba(232,201,155,0.48); opacity: 1; }
.lightbox__nav svg { width: 1.1rem; height: 1.1rem; }
.lightbox__prev { left: 1.1rem; }
.lightbox__next { right: 1.1rem; }
.lightbox__prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__next:hover { transform: translateY(-50%) translateX( 3px); }

/* contador  1 / 3 */
.lightbox__counter {
  position: absolute; bottom: 1.3rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--cream-dim);
  background: rgba(15,5,5,0.55); padding: 0.28rem 0.85rem; border-radius: 2rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232,201,155,0.1);
  pointer-events: none; white-space: nowrap;
}

/* ============================ TÍTULO DE SEÇÃO ============================ */
.section-title {
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(1.25rem, 5vw, 1.65rem); letter-spacing: 0.03em;
  text-align: center; color: var(--cream); margin-bottom: 1.1rem;
}
.section-title::after {
  content: ''; display: block; width: 2rem; height: 1.5px; margin: 0.5rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ============================ BIO ============================ */
.bio { text-align: center; }
.bio__text { color: var(--cream-dim); font-size: clamp(0.9rem, 3.5vw, 1rem); max-width: 26rem; margin: 0 auto; line-height: 1.7; }
.bio__text + .bio__text { margin-top: 0.85rem; }

/* ============================ LINKS (SOCIAL + STREAMING) ============================ */
.links { display: flex; flex-direction: column; gap: 0.75rem; }
.links .section-title { margin-bottom: 0.35rem; }

.link {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1rem; border-radius: 0.95rem;
  background: var(--glass); border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* brilho deslizante no hover */
.link::before {
  content: ''; position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(246,235,221,0.14), transparent);
  transform: skewX(-18deg); transition: left 0.65s var(--ease);
}
.link:hover::before, .link:focus-visible::before { left: 140%; }
.link:hover, .link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--glass-hi);
  box-shadow: 0 0.9rem 2rem rgba(0,0,0,0.48), 0 0 1.2rem rgba(232,201,155,0.1);
}

/* ícone */
.link__icon {
  flex: 0 0 auto; width: 2.55rem; height: 2.55rem; border-radius: 0.65rem;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(232,201,155,0.13), rgba(140,28,28,0.18));
  border: 1px solid var(--glass-brd); color: var(--gold);
  transition: transform 0.4s var(--ease), color 0.35s ease;
}
/* Todos os paths/shapes herdam currentColor via SVG fill inheritance */
/* Tamanho fixo garante harmonia entre ícones com viewBox diferentes */
.link__icon svg { display: block; fill: currentColor; overflow: visible; width: 1.15rem; height: 1.15rem; }

/* cores de destaque por rede — mostradas no hover */
.link[data-accent="instagram"]:hover .link__icon { color: #e1306c; }
.link[data-accent="tiktok"]:hover    .link__icon { color: #69c9d0; }
.link[data-accent="youtube"]:hover   .link__icon { color: #ff4e42; }
.link[data-accent="facebook"]:hover  .link__icon { color: #5890e8; }
.link[data-accent="spotify"]:hover   .link__icon { color: #1db954; }
.link[data-accent="apple-music"]:hover .link__icon { color: #fc3c44; }
.link[data-accent="deezer"]:hover    .link__icon { color: #ef5466; }

.link:hover .link__icon, .link:focus-visible .link__icon { transform: scale(1.1) rotate(-4deg); }

/* corpo do link */
.link__body { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.22; text-align: left; }
.link__label { font-size: 0.96rem; font-weight: 600; color: var(--cream); }
.link__handle { font-size: 0.76rem; color: var(--muted); font-weight: 400; }

/* chevron */
.link__chevron { flex: 0 0 auto; color: var(--gold-2); opacity: 0.5; transition: transform 0.4s var(--ease), opacity 0.35s ease; }
.link__chevron svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.link:hover .link__chevron, .link:focus-visible .link__chevron { transform: translateX(4px); opacity: 1; }

/* ============================ COMUNIDADE ============================ */
.community { text-align: center; }
.community__lead { color: var(--cream-dim); font-size: 0.9rem; max-width: 24rem; margin: 0 auto 1.25rem; }
.community__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.chip {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 1.1rem 0.75rem; border-radius: 0.95rem;
  background: var(--glass); border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.chip__icon {
  width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(232,201,155,0.13), rgba(140,28,28,0.2));
  border: 1px solid var(--glass-brd); color: var(--gold);
  transition: transform 0.4s var(--ease), color 0.35s ease;
}
.chip__icon svg { display: block; fill: currentColor; overflow: visible; width: 1.3rem; height: 1.3rem; }
.chip__label { font-size: 0.8rem; font-weight: 500; color: var(--cream-dim); }
.chip__soon { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }

.chip:not(.chip--disabled):hover,
.chip:not(.chip--disabled):focus-visible {
  transform: translateY(-4px); border-color: var(--glass-hi);
  box-shadow: 0 0.9rem 2rem rgba(0,0,0,0.48);
}
.chip:not(.chip--disabled):hover .chip__icon { transform: scale(1.1); }
.chip--whats:not(.chip--disabled):hover .chip__icon { color: #59e08a; }
.chip--tg:not(.chip--disabled):hover    .chip__icon { color: #6fc4f2; }

/* chips desativados — aparência esmaecida, sem interação */
.chip--disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================ CONTATO COMERCIAL ============================ */
.contact { text-align: center; }

.contact__card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.3rem 1.4rem; border-radius: 1.1rem;
  background: linear-gradient(145deg, rgba(60,18,12,0.65), rgba(125,48,16,0.28));
  border: 1px solid rgba(232,201,155,0.22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: inherit; text-decoration: none;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.contact__card::before {
  content: ''; position: absolute; inset: 0; border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(232,201,155,0.06), rgba(125,48,16,0.12));
  opacity: 0; transition: opacity 0.4s ease;
}
.contact__card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,201,155,0.42);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,0.5), 0 0 1.5rem rgba(232,201,155,0.1);
}
.contact__card:hover::before { opacity: 1; }

.contact__shine {
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(246,235,221,0.12), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left 0.7s var(--ease);
}
.contact__card:hover .contact__shine { left: 140%; }

.contact__icon {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 0.75rem;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(232,201,155,0.15), rgba(107,16,18,0.3));
  border: 1px solid rgba(232,201,155,0.2); color: var(--gold);
  transition: transform 0.4s var(--ease), color 0.35s ease;
}
.contact__icon svg { width: 1.3rem; height: 1.3rem; }
.contact__card:hover .contact__icon { transform: scale(1.1) rotate(-4deg); color: var(--cream); }

.contact__body { flex: 1 1 auto; text-align: left; display: flex; flex-direction: column; gap: 0.25rem; }
.contact__label { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.contact__email { font-size: clamp(0.82rem, 3.5vw, 0.96rem); font-weight: 600; color: var(--gold); transition: color 0.3s ease; }
.contact__card:hover .contact__email { color: var(--cream); }

/* ============================ RODAPÉ ============================ */
.footer {
  text-align: center; display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem; padding-top: 0.5rem;
}
.footer__mark {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--gold); border: 1px solid var(--glass-hi); letter-spacing: 0.04em;
}
.footer__copy { font-size: 0.73rem; color: var(--muted); }
.footer__dev {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; color: var(--muted);
}
.footer__dev-label { letter-spacing: 0.02em; }

/* Link do dev — apenas o logo SVG centralizado */
.footer__dev-link {
  display: block;
  margin-inline: auto;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer__dev-link:hover {
  transform: scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 0 0.6rem rgba(232, 201, 155, 0.4));
}

.footer__logo-img {
  display: block;
  width: clamp(2.8rem, 11vw, 3.8rem);
  height: auto;
  opacity: 0.68;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.footer__dev-link:hover .footer__logo-img { opacity: 1; }

/* ============================ ANIMAÇÕES ============================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  {
  0%   { box-shadow: 0 0 0 0 rgba(232,201,155,0.55); }
  70%  { box-shadow: 0 0 0 0.65rem rgba(232,201,155,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,201,155,0); }
}

/* reveal ao entrar na viewport (reversível ao sair) */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

/* ============================ RESPONSIVO ============================ */
@media (min-width: 480px) {
  .gallery__stage { max-height: 75vh; }
}
@media (min-width: 768px) {
  .shell { padding-block: clamp(3.5rem, 6vw, 5rem); }
  .bio__text { font-size: 1rem; }
}

/* ============================ SCROLL TO TOP ========== */
.scroll-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 900;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(15,5,5,0.72);
  border: 1px solid rgba(232,201,155,0.22);
  color: var(--gold); display: grid; place-items: center;
  cursor: pointer; padding: 0;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
              background 0.3s ease, border-color 0.3s ease;
  opacity: 0; visibility: hidden; pointer-events: none;
}

.scroll-top.visible { opacity: 1; visibility: visible; pointer-events: auto; }

.scroll-top:hover {
  background: rgba(107,16,18,0.6);
  border-color: rgba(232,201,155,0.48);
  transform: translateY(-4px);
}

.scroll-top svg { width: 1.15rem; height: 1.15rem; }

/* sem movimento — acessibilidade */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .scroll-top { transition: none !important; }
}