/* ──────────────────────────────────────────
   HERO
─────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layer 1 — base gradient (lighter top, dark bottom) */
.bg-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      #2a2622 0%,
      #1f1c19 28%,
      #161412 60%,
      #0e0d0c 100%);
}

/* Layer 2 — noise / film grain */
.bg-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.77 0 0 0 0 0.73 0 0 0 0 0.69 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ──────────────────────────────────────────
   Layer 3 — BULLS (parallax)
─────────────────────────────────────────── */
.bulls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.bull {
  position: absolute;
  filter: blur(2.9px) brightness(0.5) contrast(1.42) saturate(0.98);
  will-change: transform;
}

/* PAIR: hjhj sits behind, ghgh in front — ghgh's body masks hjhj's missing head.
   Wrapper handles parallax as a unit so the two move together. */
.bull-pair {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 540px;
  height: 440px;
  pointer-events: none;
  will-change: transform;
}
.bull-pair .bull-hjhj {
  bottom: 60px;
  left: 0;
  width: 290px;
  z-index: 1;
}
.bull-pair .bull-ghgh {
  bottom: 0;
  left: 140px;
  width: 400px;
  z-index: 2;
  filter: blur(2.9px) brightness(0.53) contrast(1.42) saturate(0.98);
}

/* Standalone bulls */
.bull-jjj  { width: 600px; bottom: 0;                left: calc(50% - 300px); }
.bull-nnsk { width: 400px; top: calc(50% - 200px);   left: -4%;               }

/* Bulls reveal alongside the title — fog has already started forming,
   so they emerge as part of the scene materializing, not as an afterthought. */
.bull-pair, .bull-jjj, .bull-nnsk {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out-quint);
}
body.loaded .bull-pair { opacity: 1; transition-delay: 1.6s; }
body.loaded .bull-jjj  { opacity: 1; transition-delay: 1.8s; }
body.loaded .bull-nnsk { opacity: 1; transition-delay: 2.0s; }

/* ──────────────────────────────────────────
   Layer 4 — REAL FOG (above bulls, veils them)
   Built from three things stacked:
     (a) SVG turbulence sheet → organic texture
     (b) six soft masses on irregular paths → body of fog
     (c) two long wisps crossing screen → trackable motion
─────────────────────────────────────────── */
.fog-layer {
  position: absolute;
  inset: -20%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 4s var(--ease-out-quint) 1.2s;
}
body.loaded .fog-layer { opacity: 0.55; }

/* (a) turbulent base texture */
.fog-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.32;
  mix-blend-mode: screen;
}

/* (b) drifting masses */
.fog-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}
.fog-blob.f1 {
  width: 75vw; height: 75vw;
  top: -25%; left: -15%;
  background: radial-gradient(circle, rgba(196, 186, 176, 0.09), rgba(196, 186, 176, 0.02) 40%, transparent 70%);
  animation: fogDrift1 38s ease-in-out infinite;
}
.fog-blob.f2 {
  width: 65vw; height: 65vw;
  bottom: -20%; right: -10%;
  background: radial-gradient(circle, rgba(196, 186, 176, 0.08), rgba(196, 186, 176, 0.015) 45%, transparent 75%);
  animation: fogDrift2 52s ease-in-out infinite;
}
.fog-blob.f3 {
  width: 55vw; height: 55vw;
  top: 15%; left: 25%;
  background: radial-gradient(circle, rgba(196, 186, 176, 0.06), transparent 70%);
  animation: fogDrift3 64s ease-in-out infinite;
}
.fog-blob.f4 {
  width: 45vw; height: 45vw;
  top: 40%; right: 18%;
  background: radial-gradient(circle, rgba(196, 186, 176, 0.05), transparent 65%);
  animation: fogDrift4 47s ease-in-out infinite;
}
.fog-blob.f5 {
  width: 50vw; height: 50vw;
  bottom: 10%; left: 8%;
  background: radial-gradient(circle, rgba(196, 186, 176, 0.06), transparent 70%);
  animation: fogDrift5 58s ease-in-out infinite;
}
.fog-blob.f6 {
  width: 38vw; height: 38vw;
  top: 5%; right: 30%;
  background: radial-gradient(circle, rgba(196, 186, 176, 0.04), transparent 65%);
  animation: fogDrift6 71s ease-in-out infinite;
}

/* (c) long wisps — visible "movement" */
.fog-wisp {
  position: absolute;
  height: 28vh;
  width: 70vw;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.fog-wisp.w1 {
  top: 35%;
  background: radial-gradient(ellipse, rgba(196, 186, 176, 0.07), transparent 70%);
  animation: wispRight 55s linear infinite;
}
.fog-wisp.w2 {
  top: 55%;
  background: radial-gradient(ellipse, rgba(196, 186, 176, 0.05), transparent 70%);
  animation: wispLeft 80s linear infinite;
}

/* ── Fog keyframes ────────────────────────── */
@keyframes fogDrift1 {
  0%   { transform: translate(0, 0)         scale(1);    }
  25%  { transform: translate(8vw, 5vh)     scale(1.08); }
  50%  { transform: translate(14vw, -3vh)   scale(1.15); }
  75%  { transform: translate(4vw, 8vh)     scale(1.05); }
  100% { transform: translate(0, 0)         scale(1);    }
}
@keyframes fogDrift2 {
  0%   { transform: translate(0, 0)         scale(1.05); }
  20%  { transform: translate(-6vw, -4vh)   scale(0.95); }
  45%  { transform: translate(-12vw, -8vh)  scale(0.88); }
  70%  { transform: translate(-3vw, -10vh)  scale(1.0);  }
  100% { transform: translate(0, 0)         scale(1.05); }
}
@keyframes fogDrift3 {
  0%   { transform: translate(0, 0)         scale(1);    }
  30%  { transform: translate(-7vw, 4vh)    scale(1.1);  }
  55%  { transform: translate(2vw, 9vh)     scale(0.92); }
  80%  { transform: translate(9vw, -2vh)    scale(1.05); }
  100% { transform: translate(0, 0)         scale(1);    }
}
@keyframes fogDrift4 {
  0%   { transform: translate(0, 0)         scale(1);    }
  35%  { transform: translate(5vw, -6vh)    scale(0.9);  }
  65%  { transform: translate(-4vw, -3vh)   scale(1.12); }
  100% { transform: translate(0, 0)         scale(1);    }
}
@keyframes fogDrift5 {
  0%   { transform: translate(0, 0)         scale(1.02); }
  40%  { transform: translate(6vw, -5vh)    scale(1.1);  }
  75%  { transform: translate(11vw, 3vh)    scale(0.95); }
  100% { transform: translate(0, 0)         scale(1.02); }
}
@keyframes fogDrift6 {
  0%   { transform: translate(0, 0)         scale(1);    }
  50%  { transform: translate(-8vw, 6vh)    scale(1.18); }
  100% { transform: translate(0, 0)         scale(1);    }
}

@keyframes wispRight {
  0%   { transform: translateX(-100%) translateY(0)    skewX(-2deg); }
  50%  { transform: translateX(20%)   translateY(-3vh) skewX(0deg);  }
  100% { transform: translateX(140%)  translateY(0)    skewX(2deg);  }
}
@keyframes wispLeft {
  0%   { transform: translateX(140%)  translateY(0)    skewX(2deg);  }
  50%  { transform: translateX(20%)   translateY(4vh)  skewX(0deg);  }
  100% { transform: translateX(-100%) translateY(0)    skewX(-2deg); }
}

/* ──────────────────────────────────────────
   Layer 5 — VIGNETTE (focus the title)
─────────────────────────────────────────── */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 30%,
    rgba(10, 10, 10, 0.35) 75%,
    rgba(10, 10, 10, 0.7) 100%);
}

/* ──────────────────────────────────────────
   Layer 6 — bottom-rising fade (seamless to next section)
─────────────────────────────────────────── */
.bg-fade-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(to top,
    #131313 0%,
    #131313 14%,
    rgba(19, 19, 19, 0.82) 35%,
    rgba(19, 19, 19, 0.45) 60%,
    rgba(19, 19, 19, 0.18) 82%,
    transparent 100%);
}

/* ──────────────────────────────────────────
   HERO CONTENT (eyebrow + title)
─────────────────────────────────────────── */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--light-dim);
  margin-top: 32px;
  padding-left: 0.5em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease-out-quint) 2.6s, transform 1.2s var(--ease-out-quint) 2.6s;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--light-dim);
  vertical-align: middle;
  margin: 0 18px;
}
body.loaded .hero-eyebrow { opacity: 1; transform: translateY(0); }

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--light);
  text-transform: uppercase;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.6s var(--ease-out-quint) 2.2s, transform 1.6s var(--ease-out-quint) 2.2s;
}
body.loaded .hero-title { opacity: 1; transform: translateY(0); }

.hero-title .word {
  display: inline-block;
  margin: 0 0.18em;
}

/* ──────────────────────────────────────────
   SCROLL INDICATOR
─────────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 11;
  opacity: 0;
  transition: opacity 1.2s ease 3.2s;
  cursor: pointer;
}
body.loaded .scroll-indicator { opacity: 1; }

.scroll-label {
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--light-dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.scroll-mouse {
  width: 22px;
  height: 36px;
  border: 1px solid var(--light-dim);
  border-radius: 12px;
  position: relative;
}
.scroll-mouse::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 2px;
  height: 6px;
  background: var(--light);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateX(-50%) translateY(0);    opacity: 1; }
  60%  { transform: translateX(-50%) translateY(14px); opacity: 0; }
  61%  { transform: translateX(-50%) translateY(0);    opacity: 0; }
  100% { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

.scroll-indicator:hover .scroll-mouse { border-color: var(--light); }
.scroll-indicator:hover .scroll-label { color: var(--light); }