/* ============= TOKENS ============= */
:root {
  --background: hsl(0, 0%, 4%);
  --foreground: hsl(0, 0%, 96%);
  --muted: hsl(0, 0%, 65%);
  --card: hsl(0, 0%, 6%);
  --border: hsla(0, 0%, 100%, 0.1);
  --border-strong: hsla(0, 0%, 100%, 0.3);
  --hairline: hsla(0, 0%, 100%, 0.12);
  --shadow-elegant: 0 30px 80px -20px hsla(0, 0%, 0%, 0.7);
  --shadow-glow: 0 0 60px hsla(0, 0%, 100%, 0.08);
  --silk: cubic-bezier(0.22, 1, 0.36, 1);
  --gradient-vignette: radial-gradient(ellipse at center, hsla(0,0%,4%,0) 0%, hsla(0,0%,4%,0.4) 60%, hsl(0,0%,2%) 100%);
  --gradient-fade: linear-gradient(180deg, hsla(0,0%,4%,0) 0%, hsla(0,0%,4%,0.6) 60%, hsl(0,0%,4%) 100%);
}

/* ============= RESET ============= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============= TYPOGRAPHY ============= */
.font-display { font-family: 'Cormorant Garamond', serif; font-weight: 300; letter-spacing: 0.02em; }
.italic { font-style: italic; }
.block { display: block; }
.center { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: var(--muted);
  margin: 0;
}

.text-glow { text-shadow: 0 0 40px hsla(0,0%,100%,0.3), 0 2px 20px hsla(0,0%,0%,0.6); }

.muted-strong { color: hsla(0,0%,100%,0.7); }

.body-text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}
@media (min-width: 768px) { .body-text { font-size: 1.05rem; } }

.body-text.center, .invite-box .body-text { text-align: center; }

.quote {
  font-size: 1.25rem;
  color: hsla(0,0%,100%,0.8);
  margin: 0;
}
.quote.big { font-size: 1.6rem; }
@media (min-width: 768px) { .quote { font-size: 1.5rem; } .quote.big { font-size: 1.9rem; } }

/* ============= HAIRLINE ============= */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.w-12 { width: 3rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }

/* ============= LAYOUT ============= */
.container { max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 6rem 0; position: relative; }
@media (min-width: 768px) { .section { padding: 8rem 0; } }

.grid-2 { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.stack > * + * { margin-top: 1.5rem; }

.section-head { text-align: center; margin-bottom: 4rem; }
.section-title {
  font-size: 2.25rem;
  line-height: 1.15;
  margin: 1.5rem 0 0;
}
@media (min-width: 768px) { .section-title { font-size: 3rem; } }
@media (min-width: 1024px) { .section-title { font-size: 3.75rem; } }

/* ============= HERO ============= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, hsla(0,0%,4%,0.4), hsla(0,0%,4%,0.3), hsl(0,0%,4%));
}
.vignette::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gradient-vignette);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 10;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
.hero-divider {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: hsla(0,0%,100%,0.7);
}
.hero-divider .line { display: inline-block; height: 1px; width: 3rem; background: hsla(0,0%,100%,0.3); }

.hero-title {
  margin: 1.5rem 0 0;
  font-size: 4rem;
  line-height: 0.95;
}
@media (min-width: 640px) { .hero-title { font-size: 5rem; } }
@media (min-width: 768px) { .hero-title { font-size: 6rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 8rem; } }

.hero-title .hero-sub {
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.6em;
  color: hsla(0,0%,100%,0.6);
  margin-top: 0.5rem;
}
@media (min-width: 640px) { .hero-title .hero-sub { font-size: 0.875rem; } }

.hero-tagline {
  margin-top: 2.5rem;
  max-width: 28rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: hsla(0,0%,100%,0.5);
}
.hero-scroll .scroll-line {
  height: 2.5rem; width: 1px;
  background: linear-gradient(180deg, hsla(0,0%,100%,0.4), transparent);
}

/* ============= IMAGE FRAME ============= */
.image-frame {
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}
.image-glow {
  position: absolute;
  inset: -1rem;
  background: hsla(0,0%,100%,0.05);
  filter: blur(40px);
  z-index: -1;
  border-radius: 4px;
}
.image-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: var(--shadow-elegant);
}
.image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2s var(--silk);
}
.image-wrap:hover img { transform: scale(1.05); }

.image-badge {
  position: absolute;
  bottom: -0.75rem; right: -0.75rem;
  font-size: 4.5rem;
  color: hsla(0,0%,100%,0.2);
}
@media (min-width: 768px) { .image-badge { font-size: 6rem; } }

/* ============= GIFT INVITE ============= */
.invite-box {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 2rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: var(--shadow-glow);
}
@media (min-width: 768px) { .invite-box { padding: 4rem 3rem; } }
.invite-title {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0;
}
@media (min-width: 768px) { .invite-title { font-size: 2.5rem; } }

/* ============= BUTTONS ============= */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  border: 1px solid var(--border-strong);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: hsl(0,0%,100%);
  transition: all 0.5s var(--silk);
  cursor: pointer;
}
.btn-outline:hover {
  border-color: hsl(0,0%,100%);
  background: hsl(0,0%,100%);
  color: var(--background);
}
.btn-outline.small { padding: 0.75rem 1rem; }

/* ============= GIFT LIST ============= */
.gifts-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  contain: layout style paint; /* Otimização de performance */
}
@media (min-width: 640px) { .gifts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gifts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .gifts-grid { grid-template-columns: repeat(4, 1fr); } }

.gift-card {
  display: flex !important; /* Força visibilidade inicial */
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--card);
  transition: all 0.7s var(--silk);
}
.gift-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-glow);
}
.gift-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: hsl(0, 0%, 12%);
}
.gift-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--silk);
}
.gift-card:hover .gift-image img { transform: scale(1.1); }

.gift-body {
  display: flex; flex-direction: column;
  flex: 1;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
}
.gift-name {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
}
.gift-price {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin: 0;
}
.gift-body .btn-outline { margin-top: auto; }

/* ============= CLOSING ============= */
.order-1-md, .order-2-md { order: 0; }
@media (min-width: 768px) {
  .order-1-md { order: 1; }
  .order-2-md { order: 2; }
}

.site-footer {
  margin: 6rem auto 0;
  max-width: 1152px;
  text-align: center;
  padding: 0 1.5rem;
}
.footer-mark {
  margin-top: 2rem;
  font-size: 1.875rem;
  color: hsla(0,0%,100%,0.4);
}

/* ============= MUSIC TOGGLE ============= */
.music-toggle {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 50;
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  border: 1px solid hsla(0,0%,100%,0.2);
  background: hsla(0,0%,4%,0.6);
  color: var(--foreground);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.5s var(--silk);
}
.music-toggle:hover {
  border-color: hsla(0,0%,100%,0.4);
  background: hsla(0,0%,4%,0.8);
}

/* ============= ANIMATIONS ============= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.fade-up { animation: fadeUp 1.4s var(--silk) both; }
.fade-in { animation: fadeIn 2s ease-out both; }
.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }
.delay-600 { animation-delay: 0.6s; }
.delay-800 { animation-delay: 0.8s; }

.shimmer {
  background: linear-gradient(90deg, hsl(0,0%,96%) 0%, hsl(0,0%,70%) 50%, hsl(0,0%,96%) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Reveal on scroll (script.js adiciona .is-visible) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--silk), transform 1.2s var(--silk); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ Category filters ============ */
.section-sub{
  margin-top:1rem;
  font-family:'Inter',sans-serif;
  font-size:.85rem;
  color:rgba(255,255,255,.55);
  letter-spacing:.05em;
}
.filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin:2.5rem auto 3.5rem;
  max-width:880px;
}
.filter-btn{
  background:transparent;
  color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.18);
  padding:.7rem 1.4rem;
  font-family:'Inter',sans-serif;
  font-size:.65rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .4s ease;
  border-radius:2px;
}
.filter-btn:hover{
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.filter-btn.active{
  background:#fff;
  color:#000;
  border-color:#fff;
}
.gift-tag{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:.55rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:.4rem;
}
.gift-card.is-hidden {
  display: none !important; /* Força o ocultamento */
}
.empty-state{
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:rgba(255,255,255,.55);
  font-size:1.3rem;
  margin-top:3rem;
}
@media (max-width:640px){
  .filter-btn{ padding:.55rem 1rem; font-size:.58rem; letter-spacing:.25em; }
}