/* ============================================================
   ALIISS — animations.css
   Entrance, scroll reveal, hover
   ============================================================ */

/* Pre-reveal state (set via JS/IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition:
    opacity 900ms var(--ease-out-soft),
    transform 900ms var(--ease-out-soft),
    filter 900ms var(--ease-out-soft);
  will-change: opacity, transform, filter;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 800ms var(--ease-out-soft),
    transform 800ms var(--ease-out-soft),
    filter 800ms var(--ease-out-soft);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Clip-path image reveal */
.clip-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1400ms var(--ease-out-quart);
}
.clip-reveal.is-in { clip-path: inset(0 0 0 0); }

/* Hero char stagger (class hooks applied by JS) */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(120%) rotate(4deg);
  transition:
    opacity 900ms var(--ease-out-quart),
    transform 1100ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 55ms + 200ms);
  will-change: transform, opacity;
}
.is-hero-in .char {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* Magnetic button effect (handled by JS, transform only) */
.magnet { transition: transform 400ms var(--ease-out-soft); }

/* Tilt target (JS updates CSS vars) */
.tilt {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 200ms var(--ease-out-soft);
}

/* Scroll-section blur flip */
.flip-section {
  transition: background-color 900ms var(--ease-out-soft), color 900ms var(--ease-out-soft);
}

/* Amber glow pulse (ambient) */
@keyframes emberPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.05); }
}
.ember-aura {
  animation: emberPulse 6s var(--ease-in-out) infinite;
}

/* Slow ambient float (for bottle images in story blocks) */
@keyframes slowFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float-slow {
  animation: slowFloat 8s var(--ease-in-out) infinite;
}

/* Curtain load overlay (covers whole viewport on first paint) */
.curtain {
  position: fixed;
  inset: 0;
  background: var(--obsidian);
  z-index: 400;
  pointer-events: none;
  transition: transform 1200ms var(--ease-out-quart), opacity 600ms var(--ease-out-soft) 800ms;
  transform-origin: bottom;
}
.curtain.is-lifted {
  transform: scaleY(0);
  opacity: 0;
}
.curtain__label {
  position: absolute;
  inset: auto 0 50% 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 200;
  text-transform: uppercase;
  font-size: var(--fs-lg);
  letter-spacing: 0.22em;
  color: var(--text-light);
  transform: translateY(50%);
  opacity: 0.9;
  transition: opacity 500ms;
}
.curtain.is-lifted .curtain__label { opacity: 0; }

/* Section pin crossfade (used by GSAP scroll scenes) */
.pin-stage {
  position: relative;
  min-height: 140vh;
}