/*
 * ==========================================================================
 * HERO — Full-bleed background, title, parallax floating cutouts
 * ==========================================================================
 */

/* --- Hero wrapper --- */
.hero {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  min-height: 100vh; /* fallback */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* content rests toward bottom */
}

/* --- Background image layer --- */
.hero__bg {
  position: absolute;
  inset: -5%; /* slight overhang for parallax room */
  background-image: var(--hero-bg-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
  z-index: var(--z-below);
  transition: transform 0.05s linear; /* driven by JS, super smooth */
}

/* --- Gradient overlay (dark to transparent to dark) --- */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: var(--z-base);
  pointer-events: none;
}

/* Atmospheric teal side vignettes */
.hero__overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(7, 21, 21, 0.55) 100%
  );
}

/* --- Fog layer (animated) --- */
.hero__fog {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  overflow: hidden;
}

.hero__fog::before,
.hero__fog::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -50%;
  width: 200%;
  height: 50%;
  background: radial-gradient(
    ellipse 80% 60% at 50% 100%,
    rgba(13, 40, 40, 0.6) 0%,
    transparent 70%
  );
  animation: fogDrift 18s ease-in-out infinite alternate;
}

.hero__fog::after {
  animation-delay: -9s;
  animation-duration: 24s;
  opacity: 0.6;
  filter: blur(30px);
}

@keyframes fogDrift {
  0%   { transform: translateX(-5%) scale(1); opacity: 0.7; }
  100% { transform: translateX(5%) scale(1.08); opacity: 1; }
}

/* --- Parallax floating cutouts --- */
.hero__parallax-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
}

.parallax-item {
  position: absolute;
  will-change: transform;
  filter: drop-shadow(0 0 20px var(--color-accent-glow));
}

/* Preset positions — override per item via class or inline style */
.parallax-item--left {
  left: -2%;
  bottom: 8%;
  width: clamp(120px, 18vw, 280px);
}

.parallax-item--right {
  right: -2%;
  bottom: 5%;
  width: clamp(100px, 15vw, 240px);
}

.parallax-item--center-left {
  left: 8%;
  bottom: 18%;
  width: clamp(80px, 12vw, 180px);
  opacity: 0.75;
}

.parallax-item--center-right {
  right: 8%;
  bottom: 20%;
  width: clamp(80px, 12vw, 160px);
  opacity: 0.7;
}

.parallax-item img {
  width: 100%;
  height: auto;
}

/* Gentle float animation on parallax items */
.parallax-item--float {
  animation: floatItem 6s ease-in-out infinite;
}
.parallax-item--float-slow {
  animation: floatItem 9s ease-in-out infinite reverse;
}
.parallax-item--float-med {
  animation: floatItem 7.5s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes floatItem {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

/* --- Hero content --- */
.hero__content {
  position: relative;
  z-index: var(--z-float);
  text-align: center;
  padding: var(--sp-24) var(--container-pad) var(--sp-20);
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  display: block;
  height: 1px;
  width: 40px;
  background: var(--color-accent-bright);
  opacity: 0.6;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-4xl), 9vw, var(--fs-7xl));
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  text-shadow:
    0 0 40px var(--color-accent-glow),
    0 0 80px var(--color-accent-subtle),
    0 2px 4px rgba(0,0,0,0.8);
  margin-bottom: var(--sp-4);
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(var(--fs-base), 2.5vw, var(--fs-xl));
  font-style: italic;
  color: var(--color-text-secondary);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-8);
  max-width: 55ch;
  margin-inline: auto;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* --- Scroll indicator --- */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  opacity: 0.5;
  transition: opacity var(--transition-base);
  cursor: pointer;
}

.hero__scroll-indicator:hover { opacity: 1; }

.hero__scroll-indicator span {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.scroll-arrow {
  width: 20px;
  height: 28px;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-full);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
}

.scroll-arrow__dot {
  width: 4px;
  height: 8px;
  background: var(--color-accent-bright);
  border-radius: var(--radius-full);
  animation: scrollBounce 1.8s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  80%       { transform: translateY(10px); opacity: 0; }
}

/* --- Mobile adjustments --- */
@media (max-width: 767px) {
  .parallax-item--left,
  .parallax-item--right {
    display: none; /* hide large cutouts on small screens */
  }
  .hero__content {
    padding-top: calc(var(--nav-height) + var(--sp-12));
    padding-bottom: var(--sp-16);
  }
}