/* ── HERO CONTAINER ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: flex-end;
  padding: 0 60px 100px;
  overflow: hidden;
  --px: 0;
  --py: 0;
}

/* Custom Parallax Transitions */
.hero-bg-wrap,
.hero-pattern,
.hero-leaf,
.hero-clouds,
.hero-content {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-bg-wrap {
  position: absolute;
  top: -24px; left: -24px; right: -24px; bottom: -24px;
  z-index: 1;
  overflow: hidden;
  pointer-events: auto;
  transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -12px), 0);
}

.hero-bg {
  position: absolute; inset: 0;
  background: 
    linear-gradient(to right, 
      rgba(13, 26, 18, 0.95) 0%, 
      rgba(13, 26, 18, 0.6) 40%, 
      rgba(13, 26, 18, 0.1) 70%, 
      rgba(13, 26, 18, 0) 100%
    );
  background-size: cover;
  background-position: center right;
  transform: scale(1.08);
  animation: kenburns 24s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  cursor: pointer;
}

/* Chỉ tải ảnh nền khi Intro đã đóng */
body:not(.intro-active) .hero-bg {
  background-image: 
    linear-gradient(to right, 
      rgba(13, 26, 18, 0.95) 0%, 
      rgba(13, 26, 18, 0.6) 40%, 
      rgba(13, 26, 18, 0.1) 70%, 
      rgba(13, 26, 18, 0) 100%
    ),
    url('../images/Background-hero.webp');
}

@keyframes kenburns {
  to { transform: scale(1); }
}

/* Sông nước SVG pattern */
.hero-pattern {
  position: absolute; inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 60 Q30 40 60 60 Q90 80 120 60' stroke='%23C8E6D4' stroke-width='1.5' fill='none'/%3E%3Cpath d='M0 80 Q30 60 60 80 Q90 100 120 80' stroke='%23C8E6D4' stroke-width='1' fill='none'/%3E%3Cpath d='M0 40 Q30 20 60 40 Q90 60 120 40' stroke='%23C8E6D4' stroke-width='1' fill='none'/%3E%3Cpath d='M60 0 Q40 30 60 60 Q80 90 60 120' stroke='%23C8E6D4' stroke-width='.8' fill='none' opacity='.5'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  z-index: 2;
  transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 6px), 0);
}

/* Lá đước decorative */
.hero-leaf {
  position: absolute;
  right: 8%;
  top: 50%;
  width: 420px; height: 520px;
  opacity: .03;
  pointer-events: none;
  z-index: 3;
  transform: translateY(-55%) translate3d(calc(var(--px) * -24px), calc(var(--py) * -24px), 0);
}

.hero-accent-line {
  position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 200' preserveAspectRatio='none'%3E%3Cpath d='M6 0 C2 40 10 80 4 120 C8 150 2 180 6 200 M6 40 C10 50 12 70 8 80 M6 130 C2 140 0 160 4 170' stroke='%23C9A84C' stroke-width='1.2' fill='none' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 4;
}

.hero-content {
  position: relative;
  max-width: 680px;
  z-index: 5;
  padding-left: 48px;
  transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 8px), 0);
}

/* ── HERO TYPOGRAPHY ── */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.hero-eyebrow::after {
  content: '';
  display: block;
  width: 40px; height: 1px;
  background: var(--gold);
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}

.hero-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
}

.hero-subtitle {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 300;
  font-style: italic;
  color: var(--seafoam);
  margin-bottom: 32px;
  line-height: 1.3;
}

.hero-desc {
  font-size: 15px;
  color: rgba(247,242,232,.6);
  max-width: 480px;
  margin-bottom: 52px;
  line-height: 1.8;
}

.hero-actions {
  display: flex; align-items: center; gap: 32px;
}

/* Reveal Animations */
.hero-eyebrow, .hero-title, .hero-subtitle, .hero-desc, .hero-actions {
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-eyebrow { animation-delay: 0.15s; }
.hero-title { animation-delay: 0.35s; }
.hero-subtitle { animation-delay: 0.55s; }
.hero-desc { animation-delay: 0.75s; }
.hero-actions { animation-delay: 0.95s; }

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HERO SCROLL INDICATOR ── */
.hero-scroll {
  position: absolute; bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247,242,232,.35);
  z-index: 5;
}

.hero-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

/* ── HERO CLOUDS ── */
.hero-clouds {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 16px), 0);
}

.cloud {
  position: absolute;
  opacity: 0.75;
  filter: blur(20px);
  animation: floatCloud linear infinite;
}

.cloud-1 {
  top: 20%;
  left: -20%;
  width: 45%;
  height: auto;
  animation-duration: 95s;
}

.cloud-2 {
  bottom: 15%;
  left: -35%;
  width: 55%;
  height: auto;
  animation-duration: 125s;
  animation-delay: -30s;
}

.cloud-3 {
  top: 45%;
  left: -25%;
  width: 35%;
  height: auto;
  animation-duration: 80s;
  animation-delay: -15s;
}

@keyframes floatCloud {
  0% {
    transform: translateX(-10%);
  }
  50% {
    transform: translateX(110vw);
  }
  50.0001% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(110vw);
  }
}

/* ── AUDIO TOGGLE ── */
.hero-audio-btn {
  position: absolute;
  bottom: 40px;
  right: 60px;
  background: rgba(13, 26, 18, 0.4);
  border: 1px solid rgba(201, 168, 76, 0.2);
  color: var(--ivory);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  z-index: 10;
  transition: background 0.3s, border-color 0.3s;
  backdrop-filter: blur(4px);
}

.hero-audio-btn:hover {
  background: rgba(13, 26, 18, 0.7);
  border-color: var(--gold);
}

.audio-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 16px;
  height: 12px;
}

.audio-wave .bar {
  width: 2px;
  background: var(--gold);
  height: 3px;
  transition: height 0.3s ease;
}

.hero-audio-btn.playing .bar {
  animation: bounce 0.8s ease-in-out infinite alternate;
}

.hero-audio-btn.playing .bar-1 { animation-delay: 0.1s; height: 100%; }
.hero-audio-btn.playing .bar-2 { animation-delay: 0.4s; height: 70%; }
.hero-audio-btn.playing .bar-3 { animation-delay: 0.2s; height: 90%; }
.hero-audio-btn.playing .bar-4 { animation-delay: 0.5s; height: 60%; }

@keyframes bounce {
  0% { height: 20%; }
  100% { height: 100%; }
}

.audio-label {
  opacity: 0.7;
  transition: opacity 0.3s;
}

.hero-audio-btn:hover .audio-label {
  opacity: 1;
}

/* ── RESPONSIVE HERO ── */
@media (max-width: 900px) {
  .hero { padding: 0 24px 80px; }
  .hero-accent-line { display: none; }
  .hero-content { padding-left: 0; }
  .hero-audio-btn {
    right: 24px;
    bottom: 30px;
  }
}