/* =====================================================================
   Riviera House — Home (raiz do domínio)
   "R" gigante (maior que o viewport) alinhado à esquerda, sem rolagem.
   No centro: logo + data de inauguração + botão do Instagram.
   ===================================================================== */

:root {
  --bg-light: #ffffff;
  --bg-mid:   #f3f2f1;
  --bg-edge:  #e6e4e1;

  --terra:       #a46f59;
  --terra-light: #b9836b;
  --terra-dark:  #885a47;

  --ink:      #262320;
  --ink-soft: #5f5852;

  --r-stroke: rgba(164, 111, 89, 0.22);

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

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

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

/* Trava o viewport: altura fixa e sem rolagem */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(130% 120% at 50% 12%, var(--bg-light) 0%, var(--bg-mid) 48%, var(--bg-edge) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================ PALCO ============================ */
.home {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 48px);
  overflow: hidden;
}

/* ============ "R" GIGANTE AO FUNDO, ALINHADO À ESQUERDA ============ */
.home__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* alinha o R à esquerda */
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.r-mark {
  /* Maior que o viewport — extravasa em cima/baixo */
  height: 150vh;
  height: 150dvh;
  width: auto;
  flex: none;
  /* "vaza" um pouco pela borda esquerda */
  margin-left: clamp(-14vh, -7vw, -4vh);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: r-drift 16s ease-in-out infinite;
}
@keyframes r-drift {
  0%, 100% { transform: translateY(0)     rotate(0deg)   scale(1);     }
  50%      { transform: translateY(-14px) rotate(0.6deg) scale(1.015); }
}

.r-path {
  fill: none;
  stroke: var(--r-stroke);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* traço fino mesmo ampliado */
}

/* pulsação contínua do traço (após desenhar) */
.home__backdrop.is-drawn .r-path {
  animation: r-pulse 5s ease-in-out infinite;
}
@keyframes r-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1;    }
}

/* segmento de luz que percorre o contorno do "R" — criado via JS */
.r-glow {
  fill: none;
  stroke: var(--terra);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(164, 111, 89, 0.5));
}

/* ===================== CONTEÚDO CENTRAL ===================== */
.home__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 2.6vw, 24px);
}

.home__logo {
  width: clamp(220px, 46vw, 360px);
}
.home__logo svg { display: block; width: 100%; height: auto; }

.home__date {
  font-size: clamp(0.76rem, 2vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
}
.home__date span { color: var(--terra-dark); }

/* ============================ BOTÃO ============================ */
.btn {
  --glow: rgba(164, 111, 89, 0.45);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  margin-top: clamp(6px, 1.4vw, 12px);
  padding: 16px 32px;

  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;

  border-radius: 999px;
  background: linear-gradient(135deg, var(--terra-light) 0%, var(--terra) 48%, var(--terra-dark) 100%);
  box-shadow:
    0 12px 28px -8px var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s ease;
  animation: btn-pulse 2.8s ease-in-out infinite;
}

.btn__icon  { width: 23px; height: 23px; flex: none; }
.btn__label { line-height: 1; }

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 0%, transparent 38%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 62%, transparent 100%
  );
  transform: translateX(-130%);
  animation: btn-shine 3.6s ease-in-out infinite;
}

@keyframes btn-shine {
  0%        { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%);  }
}

@keyframes btn-pulse {
  0%, 100% {
    box-shadow: 0 12px 28px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
  50% {
    box-shadow: 0 16px 36px -6px var(--glow), 0 0 0 6px rgba(164, 111, 89, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
}

.btn:hover {
  transform: translateY(-3px) scale(1.018);
  box-shadow: 0 20px 42px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.btn:active { transform: translateY(-1px) scale(0.99); }
.btn:focus-visible {
  outline: 3px solid rgba(164, 111, 89, 0.55);
  outline-offset: 3px;
}

/* ==================== ESTADOS DE ENTRADA (GSAP) ==================== */
.js .home__logo,
.js .home__date,
.js .countdown,
.js .btn { opacity: 0; }

/* ===================== ACESSIBILIDADE ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .home__logo,
  .js .home__date,
  .js .countdown,
  .js .btn { opacity: 1 !important; }
  .r-path { stroke-dashoffset: 0 !important; }
}

/* ===================== AJUSTES MOBILE ===================== */
@media (max-width: 600px) {
  /* R menor e a haste vertical rente à borda esquerda */
  .home__backdrop { justify-content: flex-start; }
  .r-mark {
    height: 92vh;
    height: 92dvh;
    margin-left: -9vw;
    opacity: 0.92;
  }
  .btn { width: 100%; }
}