/*
 * Hero Sagrada — Studio Design (webdesignvip-es) v3
 * DS: bg #000 · mint hsl(162,100%,68%) · violeta hsl(270,100%,67%) · Space Grotesk · 1rem=10px
 * Animações: GSAP intro + ScrollTrigger + câmara Three.js multi-oscillator
 */

/* ── Secção hero ─────────────────────────────────────────── */
.hero-sagrada {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 60rem;
  overflow: hidden;
  background: var(--bg-body, #000);
  font-family: 'Space Grotesk', sans-serif;
  will-change: transform, opacity;
}

/* ── Canvas — começa em opacity:0, GSAP revela ───────────── */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  opacity: 0;
  will-change: opacity;
}

/* ── Vignette + máscara lateral 4vw ─────────────────────── */
.hero-sagrada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 90% at 50% 45%,
      transparent 35%,
      hsla(0, 0%, 0%, .10) 62%,
      hsla(0, 0%, 0%, .34) 100%
    ),
    linear-gradient(to right,
      var(--bg-body, #000) 0%,
      transparent 4vw,
      transparent calc(100% - 4vw),
      var(--bg-body, #000) 100%
    );
}

/* ── Granulado (noise URL injectado) ─────────────────────── */
.hero-sagrada::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .038;
  mix-blend-mode: overlay;
  background-size: 25.6rem 25.6rem;
  pointer-events: none;
  z-index: 8;
}

/* ── Degrade inferior ────────────────────────────────────── */
.hero-shadow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(10rem, 20vh, 16rem);
  background: linear-gradient(
    0deg,
    var(--bg-body, #000) 0%,
    hsla(0, 0%, 0%, .85) 40%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
}

/* ── Glows — geridos pelo GSAP (idle + intro) ────────────── */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}
.hero-glow.mint {
  width: 55vw; height: 55vw;
  bottom: -12%; left: -10%;
  background: radial-gradient(circle,
    hsla(162, 100%, 68%, .13) 0%,
    transparent 65%
  );
  filter: blur(7rem);
  opacity: 0; /* GSAP revela */
}
.hero-glow.violet {
  width: 42vw; height: 42vw;
  top: 6%; right: -8%;
  background: radial-gradient(circle,
    hsla(270, 100%, 67%, .13) 0%,
    transparent 65%
  );
  filter: blur(6rem);
  opacity: 0; /* GSAP revela */
}

/* ── Luz do caminho iluminado ────────────────────────────── */
.hero-ground-light {
  position: absolute;
  bottom: 16%; left: 50%;
  transform: translateX(-50%);
  width: 32vw; height: 12vh;
  background: radial-gradient(ellipse at 50% 85%,
    hsla(0, 0%, 100%, .055) 0%,
    hsla(0, 0%, 100%, .018) 45%,
    transparent 72%
  );
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* GSAP anima */
  will-change: opacity;
}

/* Shimmer horizontal — reflexo no chão */
.hero-ground-shimmer {
  position: absolute;
  bottom: 17%; left: 50%;
  transform: translateX(-50%);
  width: 22vw; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(0, 0%, 100%, .04) 35%,
    hsla(0, 0%, 100%, .08) 50%,
    hsla(0, 0%, 100%, .04) 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.4;
  animation: shimmerSlide 16s ease-in-out infinite;
}

@keyframes shimmerSlide {
  0%, 100% { background-position: 120% 0; opacity: .25; }
  50%       { background-position: -20% 0; opacity: .55; }
}

/* ── Hero content — zona do chão ─────────────────────────── */
.hero-content {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: clamp(2.4rem, 5vh, 4.5rem);
  transform: translateX(-50%);
  text-align: center;
  max-width: min(95vw, 100rem);
  width: 100%;
  padding: 0 max(2vw, 1.6rem);
  will-change: transform, opacity, filter;
}

/* ── Título — 2 linhas uppercase ─────────────────────────── */
.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 3.2vw, 4.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  opacity: 0; /* GSAP revela com blur */
  will-change: transform, opacity, filter;
}
.hero-title .accent { color: hsl(270, 100%, 67%); }

/* Tagline */
.hero-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.0rem, 1.0vw, 1.25rem);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.5;
  color: hsla(0, 0%, 100%, .5);
  max-width: 40rem;
  margin: 1.0rem auto 0;
  text-align: center;
  display: none;
  will-change: opacity;
}

/* ── Clock BCN/LIS ───────────────────────────────────────── */
.hero-clock {
  position: absolute;
  top: clamp(2rem, 3vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  opacity: 0; /* GSAP revela */
  transition: opacity 150ms ease;
  will-change: opacity, transform;
}
.hero-clock:hover { opacity: .65 !important; }

.hero-clock__city {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: hsla(0, 0%, 100%, .5);
}
.hero-clock__time {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: hsla(0, 0%, 100%, .65);
  font-variant-numeric: tabular-nums;
}

/* ── Scroll button ───────────────────────────────────────── */
.scroll-btn {
  position: absolute;
  bottom: clamp(2.4rem, 5vh, 4rem);
  right: max(4vw, 2rem);
  z-index: 10;
  width:  clamp(2.4rem, 3.2vw, 3.2rem);
  height: clamp(2.4rem, 3.2vw, 3.2rem);
  background: none; border: none; cursor: pointer;
  color: #fff; padding: 0;
  opacity: 0; /* GSAP revela */
  transition: color 200ms ease;
  will-change: opacity;
}
.scroll-btn:hover { color: hsl(270, 100%, 67%); }
.scroll-ring-progress { stroke-dasharray: 110; stroke-dashoffset: 110; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-title { font-size: clamp(1.4rem, 4.5vw, 2.2rem); letter-spacing: -.005em; }
  .hero-content { bottom: clamp(7rem, 16vh, 11rem); max-width: 90vw; }
  .hero-glow.violet, .hero-clock { display: none; }
  .scroll-btn { right: clamp(1.6rem, 4vw, 3rem); }
  .hero-ground-light, .hero-ground-shimmer { display: none; }
}

/* ── prefers-reduced-motion — tudo colapsa para estado final */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas, .hero-title, .hero-tagline,
  .hero-clock, .scroll-btn, .hero-glow,
  .hero-ground-light { opacity: 1 !important; }
  .hero-sagrada { will-change: auto; }
  .hero-title   { filter: none !important; transform: translateX(-50%) translateY(0) !important; }
  .hero-ground-shimmer { animation: none !important; }
  .scroll-ring-progress { stroke-dashoffset: 0 !important; }
}