.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.mountain-color {
  position: absolute;
  inset: 0;
  background: url('../../assets/images/hero-bg.jpg') center / cover no-repeat;
  opacity: 0;
  animation: mountainColorReveal 2.5s ease-in-out 6s forwards;
}

.mountain-bw {
  position: absolute;
  inset: 0;
  background: url('../../assets/images/hero-bg.jpg') center / cover no-repeat;
  filter: grayscale(1);
  opacity: 0;
  animation: mountainBWReveal 3s ease-in-out 3s forwards, mountainBWFadeOut 2.5s ease-in-out 6s forwards;
}

.fog-container {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 100%;
  height: 45%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.fog {
  position: absolute;
  width: 400%;
  height: 100%;
  will-change: transform;
}

.fog-1 {
  background:
    radial-gradient(ellipse 25% 50% at 20% 50%, rgba(230, 235, 240, 0.22) 0%, rgba(230, 235, 240, 0.1) 40%, transparent 70%),
    radial-gradient(ellipse 18% 40% at 45% 60%, rgba(230, 235, 240, 0.18) 0%, rgba(230, 235, 240, 0.08) 45%, transparent 70%);
  bottom: 10%;
  left: -100%;
  opacity: 0;
  animation: fogAppear 3s ease-out 1s forwards, fogDrift1 18s ease-in-out 1s infinite;
}

.fog-2 {
  background:
    radial-gradient(ellipse 22% 45% at 65% 45%, rgba(220, 225, 230, 0.2) 0%, rgba(220, 225, 230, 0.09) 45%, transparent 72%),
    radial-gradient(ellipse 15% 35% at 80% 55%, rgba(220, 225, 230, 0.16) 0%, rgba(220, 225, 230, 0.07) 50%, transparent 75%);
  bottom: 15%;
  left: -150%;
  opacity: 0;
  animation: fogAppear 3.5s ease-out 1.5s forwards, fogDrift2 22s ease-in-out 1.5s infinite;
}

.fog-3 {
  background:
    radial-gradient(ellipse 30% 55% at 35% 65%, rgba(235, 240, 245, 0.18) 0%, rgba(235, 240, 245, 0.08) 40%, transparent 70%);
  bottom: 5%;
  left: -80%;
  opacity: 0;
  animation: fogAppear 3s ease-out 1.5s forwards, fogDrift3 20s ease-in-out 1.5s infinite;
}

.mist-tendril {
  position: absolute;
  width: 100px;
  height: 150px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  border-radius: 50%;
  filter: blur(15px);
}

.mist-tendril-1 {
  left: 28%;
  bottom: 38%;
  opacity: 0;
  animation: tendril1 35s ease-in-out 3s infinite;
}

.mist-tendril-2 {
  left: 48%;
  bottom: 42%;
  opacity: 0;
  animation: tendril2 40s ease-in-out 3.5s infinite;
}

.mist-tendril-3 {
  right: 25%;
  bottom: 35%;
  opacity: 0;
  animation: tendril3 38s ease-in-out 3s infinite;
}

@keyframes mountainBWReveal {
  0%   { opacity: 0; }
  20%  { opacity: 0.1; }
  40%  { opacity: 0.28; }
  60%  { opacity: 0.5; }
  80%  { opacity: 0.7; }
  100% { opacity: 0.8; }
}

@keyframes mountainBWFadeOut {
  0%   { opacity: 0.8; }
  30%  { opacity: 0.65; }
  60%  { opacity: 0.4; }
  100% { opacity: 0; }
}

@keyframes mountainColorReveal {
  0%   { opacity: 0; }
  30%  { opacity: 0.25; }
  60%  { opacity: 0.55; }
  100% { opacity: 1; }
}

@keyframes fogAppear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fogDrift1 {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(30%); }
  100% { transform: translateX(0); }
}
@keyframes fogDrift2 {
  0%   { transform: translateX(15%); }
  50%  { transform: translateX(-20%); }
  100% { transform: translateX(15%); }
}
@keyframes fogDrift3 {
  0%   { transform: translateX(-10%); }
  50%  { transform: translateX(25%); }
  100% { transform: translateX(-10%); }
}

@keyframes tendril1 {
  0%, 100% { opacity: 0; transform: translateY(0) scaleY(1); }
  20%      { opacity: 0.4; }
  30%      { opacity: 0.6; }
  40%      { opacity: 0.4; }
  50%      { opacity: 0; }
  60%      { opacity: 0.3; }
  70%      { opacity: 0.5; }
  80%      { opacity: 0.3; }
  90%      { opacity: 0; }
}
@keyframes tendril2 {
  0%, 100% { opacity: 0; transform: translateY(0) scaleY(1); }
  15%      { opacity: 0.3; }
  25%      { opacity: 0.5; }
  35%      { opacity: 0.3; }
  45%      { opacity: 0; }
  55%      { opacity: 0.4; }
  65%      { opacity: 0.6; }
  75%      { opacity: 0.4; }
  85%      { opacity: 0; }
}
@keyframes tendril3 {
  0%, 100% { opacity: 0; transform: translateY(0) scaleY(1); }
  10%      { opacity: 0.2; }
  20%      { opacity: 0.4; }
  30%      { opacity: 0.2; }
  40%      { opacity: 0; }
  50%      { opacity: 0.5; }
  60%      { opacity: 0.7; }
  70%      { opacity: 0.5; }
  80%      { opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.reveal-logo {
  opacity: 0;
  animation: gentleFadeIn 1.2s ease-out 8s forwards;
}

.logo-img {
  width: 300px;
  max-width: 80vw;
  filter: brightness(0) invert(1);
}

.hero-bottom {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 15;
  width: 100%;
}

.hero-slogan {
  opacity: 0;
  text-align: center;
  animation: sloganFadeIn 1s ease-out 9s forwards;
}

.slogan-img {
  width: 448px;
  max-width: 90vw;
  filter: brightness(0) invert(1);
  display: block;
}

@keyframes sloganFadeIn {
  to { opacity: 1; }
}

@keyframes gentleFadeIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.scroll-indicator {
  opacity: 0;
  animation: fadeInLate 1s ease-out 10s forwards, bounce 2s 10s infinite;
}

.scroll-indicator span {
  display: block;
  width: 1px;
  height: 30px;
  background: var(--color-text-light-muted);
}

@keyframes fadeInLate {
  to { opacity: 1; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

@media (max-width: 600px) {
  .logo-img { width: 240px; }
  .slogan-img { width: 360px; max-width: 90vw; }
}

@media screen and (orientation: landscape) and (max-width: 900px) {
  .hero {
    height: 100vh;
    height: 100svh;
  }
  .logo-img { width: 280px; max-width: 60vw; }
  .slogan-img { width: 400px; max-width: 80vw; }
}