/* ============================================================
   AALIN — Animations CSS
   CSS-based reveal classes, GSAP helpers, transitions
   ============================================================ */

/* ── Barba.js Page Transition ── */
#barba-wrapper {
  position: relative;
}

.barba-container {
  position: relative;
}

/* Curtain overlay */
.page-curtain {
  position: fixed;
  inset: 0;
  background: var(--color-beige);
  z-index: calc(var(--z-modal) - 1);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

/* ── GSAP Reveal Classes ── */

/* Elements start invisible only after JS confirms it loaded — avoids blank flash */
.js-ready [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

.js-ready [data-reveal="up"]   { transform: translateY(40px); }
.js-ready [data-reveal="down"] { transform: translateY(-40px); }
.js-ready [data-reveal="left"] { transform: translateX(-40px); }
.js-ready [data-reveal="right"]{ transform: translateX(40px); }
.js-ready [data-reveal="scale"]{ transform: scale(0.95); }

/* Clip-path image reveals */
.js-ready [data-clip-reveal] {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

[data-clip-reveal="bottom"] {
  clip-path: inset(100% 0 0 0);
}

/* Text split animation wrapper */
.split-text {
  overflow: hidden;
  display: inline-block;
}

.split-text .word {
  display: inline-block;
  overflow: hidden;
}

.split-text .char {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* Fallback: if JS/GSAP fails, word spans are still readable */
.no-js .word,
.no-js .char {
  transform: none !important;
}

/* ── Hover Effects ── */

/* Image zoom on hover (without GSAP) */
.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: transform var(--duration-slower) var(--ease-out);
}

.hover-zoom:hover img {
  transform: scale(1.06);
}

/* Underline draw */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-out);
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Loading State ── */
.site-loader {
  position: fixed;
  inset: 0;
  background: var(--color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--z-cursor) + 10);
  transition: opacity var(--duration-slow) var(--ease-out);
  /* CSS fallback: loader hides after 3s even if JS fails */
  animation: site-loader-hide 0.6s 3s forwards;
}

.site-loader__logo {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-onyx);
  letter-spacing: var(--tracking-wide);
  opacity: 0;
  animation: loader-pulse 1.5s var(--ease-out) forwards;
}

@keyframes loader-pulse {
  0%   { opacity: 0; transform: scale(0.95) translateY(10px); }
  60%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 1; }
}

@keyframes site-loader-hide {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}

.site-loader.loaded {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  animation: none;
}

/* ── Parallax ── */
[data-parallax] {
  will-change: transform;
}

/* ── Scroll Progress ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-gold);
  z-index: calc(var(--z-sticky) + 1);
  transition: none;
}

/* ── Section Title Animation ── */
.section-heading {
  overflow: hidden;
}

.section-heading__line {
  display: block;
  transform: translateY(100%);
  will-change: transform;
}

/* ── Marquee pause on hover ── */
.marquee__inner {
  display: flex;
  gap: var(--space-3xl);
  animation: marquee-scroll 40s linear infinite;
  flex-shrink: 0;
}

.marquee__inner--reverse {
  animation-direction: reverse;
}

/* ── Gold divider line ── */
.divider {
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  margin-block: var(--space-lg);
}

.divider--center {
  margin-inline: auto;
}

.divider--long {
  width: 80px;
}

/* ── Noise texture overlay ── */
.texture-overlay {
  position: relative;
}

.texture-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ── Video overlay ── */
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(23, 20, 17, 0.22) 0%,
    rgba(23, 20, 17, 0.06) 40%,
    rgba(23, 20, 17, 0.28) 100%
  );
  pointer-events: none;
}

/* ── Champagne overlay (lighter than black) ── */
.champagne-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(23, 20, 17, 0.4) 0%,
    rgba(23, 20, 17, 0.22) 50%,
    rgba(23, 20, 17, 0.38) 100%
  );
  pointer-events: none;
}