/* =========================================================
   GUZE — Coming Soon
   Paleta da marca:
   Champagne #f4e7c3 · Cristal Smoke #b8b1a0 · Deep Petrol #003036
   Smoked Bronze #ab783a · Velvet Bordeaux #511212 · Preto #0f0f0f
   ========================================================= */

:root {
  --champagne: #f4e7c3;
  --cristal:   #b8b1a0;
  --petrol:    #003036;
  --bronze:    #ab783a;
  --bordeaux:  #511212;
  --preto:     #0f0f0f;
  --branco:    #ffffff;

  --bg:        #021c20;
  --ink:       #f4e7c3;
  --muted:     rgba(244, 231, 195, 0.62);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

::selection { background: var(--bronze); color: var(--preto); }

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

/* ---------- Background layers ----------
   Ordem (do fundo para a frente):
   0 vídeo + tint · 1 véu radial · 4 grão · 5 conteúdo */
.grain { position: fixed; inset: 0; pointer-events: none; }

/* vídeo de fundo — duotone petrol + branco (cor do site) */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.62) contrast(1.05);
  pointer-events: none;
}

/* camada de cor: sombras viram petrol, luzes ficam brancas */
.video-tint {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--petrol);
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* véu radial semi-transparente — deixa ver o vídeo pelo centro
   e escurece as bordas para legibilidade (mantém o fundo da marca) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(92% 68% at 50% 44%,
      rgba(6, 40, 45, 0.48) 0%,
      rgba(3, 26, 30, 0.80) 40%,
      rgba(1, 12, 15, 0.97) 72%,
      rgba(1, 10, 12, 1) 100%),
    linear-gradient(180deg, rgba(0, 16, 19, 0.7) 0%, rgba(0, 18, 21, 0) 20%, rgba(0, 18, 21, 0) 80%, rgba(0, 11, 14, 0.75) 100%);
}

/* subtle film grain — elemento maior que o ecrã para a animação
   nunca revelar as bordas (evita a barra escura a piscar) */
.grain {
  z-index: 4;
  inset: -20%;
  width: 140%;
  height: 140%;
  opacity: 0.05;
  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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(2) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-2%)} }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.preloader__star {
  width: 44px; height: 44px;
  animation: spin 2.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.preloader__bar {
  width: 140px; height: 1px;
  background: rgba(244,231,195,0.18);
  overflow: hidden;
}
.preloader__bar span {
  display: block; height: 100%; width: 0%;
  background: var(--champagne);
}

/* ---------- Stage / layout ---------- */
.stage {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 4vw, 48px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar__mark { width: 34px; height: 34px; }

/* ---------- Hero ---------- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(18px, 2.4vw, 30px);
  padding: 5vh 0;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cristal);
}
.hero__eyebrow .line {
  width: clamp(28px, 6vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cristal), transparent);
}

.hero__logo { width: min(62vw, 320px); }
.hero__wordmark {
  width: 100%;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.45));
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.hero__title .word { display: inline-block; }
.hero__title--accent {
  font-style: italic;
  background: linear-gradient(100deg, var(--champagne), var(--bronze) 55%, var(--champagne));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  max-width: 46ch;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}

/* "Em breve" pill */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border: 1px solid rgba(244,231,195,0.22);
  border-radius: 100px;
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  background: rgba(244,231,195,0.03);
}
.soon__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 0 0 rgba(171,120,58,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(171,120,58,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(171,120,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(171,120,58,0); }
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid rgba(244,231,195,0.18);
  border-radius: 100px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
  will-change: transform;
}
.social:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--preto);
}
.footer__copy {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(244,231,195,0.4);
}

/* ---------- Reveal init state ---------- */
[data-reveal] { opacity: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .hero { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1 !important; }
}