/* =========================================================
   ALKIMIA — Scroll Story Hero
   Botella → viñas → uva → barricas → botella final
   ========================================================= */

.alkimia-scroll-hero {
  position: relative;
  height: 520svh;
  min-height: 520svh;
  background: #050505;
  color: #fff;
  overflow: clip;
  isolation: isolate;
}

.alkimia-scroll-hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #050505;
}

.alkimia-scroll-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: scale(1.015);
  will-change: transform, opacity, filter;
}

.alkimia-scroll-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 33%),
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.16) 65%, rgba(0,0,0,.64) 100%),
    linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.03) 32%, rgba(0,0,0,.84) 100%);
}

.alkimia-scroll-hero__grain {
  position: absolute;
  inset: -20%;
  z-index: 3;
  pointer-events: none;
  opacity: .075;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 64%, rgba(255,255,255,.14) 0 1px, transparent 1.5px);
  background-size: 52px 52px, 69px 69px;
  mix-blend-mode: screen;
}

.alkimia-scroll-hero__content {
  position: relative;
  z-index: 4;
  width: min(1180px, calc(100% - 48px));
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 7vw, 8rem);
  padding-top: clamp(6.5rem, 10vh, 8rem);
  padding-bottom: 4rem;
  pointer-events: none;
}

.alkimia-scroll-hero__copy {
  max-width: 620px;
  opacity: var(--copy-opacity, 1);
  transform: translate3d(0, var(--copy-y, 0), 0);
  transition: opacity .18s linear, transform .18s linear;
}

.alkimia-scroll-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: var(--c-gold, #c4943b);
  text-transform: uppercase;
  letter-spacing: .38em;
  font-size: clamp(.65rem, .8vw, .78rem);
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.alkimia-scroll-hero__eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
}

.alkimia-scroll-hero__title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.045em;
  font-size: clamp(4.2rem, 9vw, 10.8rem);
  color: rgba(255,255,255,.96);
  max-width: 8.6ch;
  margin: 0;
}

.alkimia-scroll-hero__title em {
  color: var(--c-gold, #c4943b);
  font-style: italic;
}

.alkimia-scroll-hero__lead {
  margin-top: clamp(1.35rem, 2.4vw, 2.4rem);
  max-width: 46ch;
  color: rgba(255,255,255,.74);
  font-weight: 300;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.85;
}

.alkimia-scroll-hero__stage {
  align-self: flex-end;
  margin-bottom: clamp(3rem, 7vh, 6rem);
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 210px;
  opacity: .9;
}

.alkimia-scroll-hero__progress {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}

.alkimia-scroll-hero__progress span {
  display: block;
  height: 100%;
  width: var(--hero-progress, 0%);
  background: var(--c-gold, #c4943b);
  box-shadow: 0 0 16px rgba(196,148,59,.45);
}

.alkimia-scroll-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  z-index: 5;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .68rem;
  display: grid;
  place-items: center;
  gap: .8rem;
  pointer-events: none;
}

.alkimia-scroll-hero__scroll::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--c-gold, #c4943b), transparent);
  transform-origin: top;
  animation: alkimia-scroll-line 1.8s ease-in-out infinite;
}

@keyframes alkimia-scroll-line {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  50% { transform: scaleY(1); opacity: 1; }
}

.alkimia-scroll-hero__fragments {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: var(--fragments-opacity, 0);
  transition: opacity .12s linear;
}

.alkimia-scroll-hero__fragments i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(196,148,59,.85);
  box-shadow: 0 0 22px rgba(196,148,59,.7);
  transform: translate3d(var(--fx,0), var(--fy,0), 0) scale(var(--fs,1));
}
.alkimia-scroll-hero__fragments i:nth-child(1){left:48%;top:38%;--fx:-14vw;--fy:-8vh;--fs:1.2}
.alkimia-scroll-hero__fragments i:nth-child(2){left:54%;top:42%;--fx:12vw;--fy:-5vh;--fs:.9}
.alkimia-scroll-hero__fragments i:nth-child(3){left:51%;top:55%;--fx:-18vw;--fy:8vh;--fs:.8}
.alkimia-scroll-hero__fragments i:nth-child(4){left:58%;top:58%;--fx:15vw;--fy:10vh;--fs:1.1}
.alkimia-scroll-hero__fragments i:nth-child(5){left:46%;top:66%;--fx:-8vw;--fy:14vh;--fs:.7}
.alkimia-scroll-hero__fragments i:nth-child(6){left:61%;top:48%;--fx:19vw;--fy:-10vh;--fs:.75}

@media (max-width: 860px) {
  .alkimia-scroll-hero { height: 500svh; min-height: 500svh; }
  .alkimia-scroll-hero__content {
    width: min(100% - 32px, 680px);
    align-items: flex-end;
    justify-content: flex-end;
    padding-top: 6rem;
    padding-bottom: 6.2rem;
  }
  .alkimia-scroll-hero__copy { max-width: 100%; }
  .alkimia-scroll-hero__title { font-size: clamp(3.5rem, 18vw, 6.5rem); max-width: 8ch; }
  .alkimia-scroll-hero__lead { font-size: .98rem; max-width: 34ch; }
  .alkimia-scroll-hero__stage { display: none; }
  .alkimia-scroll-hero__shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.9) 100%),
      linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.42));
  }
}