/* ============================================================
   ANIMATIONS — animations.css
   Scroll-reveal, parallax, floating elements, micro-interactions
   Premium motion system — "luxury" but not "flashy"
   ============================================================ */

/* =======================
   SCROLL REVEAL — base
   ======================= */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-anim].is-visible {
  opacity: 1;
  transform: none !important;
}

/* ---- Variants ---- */
[data-anim="fade-up"]    { transform: translateY(48px); }
[data-anim="fade-down"]  { transform: translateY(-32px); }
[data-anim="fade-left"]  { transform: translateX(-48px); }
[data-anim="fade-right"] { transform: translateX(48px); }
[data-anim="scale-up"]   { transform: scale(0.88); }
[data-anim="zoom-in"]    { transform: scale(1.08); opacity: 0; }
[data-anim="rotate-in"]  { transform: rotate(-6deg) translateY(20px); }
[data-anim="blur-in"]    { transform: translateY(20px); filter: blur(6px); }
[data-anim="clip-up"]    { clip-path: inset(100% 0 0 0); }
[data-anim="clip-left"]  { clip-path: inset(0 100% 0 0); }
[data-anim="slide-up"]   { transform: translateY(100%); }

/* Visible state transitions */
[data-anim].is-visible {
  transition:
    opacity 0.72s cubic-bezier(.25,.46,.45,.94),
    transform 0.72s cubic-bezier(.25,.46,.45,.94),
    filter 0.72s ease,
    clip-path 0.72s cubic-bezier(.25,.46,.45,.94);
}

[data-anim="clip-up"].is-visible,
[data-anim="clip-left"].is-visible {
  clip-path: inset(0 0 0 0);
}

[data-anim="blur-in"].is-visible {
  filter: blur(0);
}

/* ---- Stagger delays ---- */
[data-anim-delay="100"]  { transition-delay: 0.10s !important; }
[data-anim-delay="150"]  { transition-delay: 0.15s !important; }
[data-anim-delay="200"]  { transition-delay: 0.20s !important; }
[data-anim-delay="250"]  { transition-delay: 0.25s !important; }
[data-anim-delay="300"]  { transition-delay: 0.30s !important; }
[data-anim-delay="400"]  { transition-delay: 0.40s !important; }
[data-anim-delay="500"]  { transition-delay: 0.50s !important; }
[data-anim-delay="600"]  { transition-delay: 0.60s !important; }
[data-anim-delay="700"]  { transition-delay: 0.70s !important; }
[data-anim-delay="800"]  { transition-delay: 0.80s !important; }

/* ---- Duration modifiers ---- */
[data-anim-duration="fast"]  { transition-duration: 0.45s !important; }
[data-anim-duration="slow"]  { transition-duration: 1.1s  !important; }
[data-anim-duration="extra"] { transition-duration: 1.5s  !important; }


/* =======================
   PARALLAX BACKGROUND
   ======================= */
.parallax-section {
  position: relative;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: -15%;
  left: 0;
  right: 0;
  bottom: -15%;
  z-index: 0;
  will-change: transform;
}
.parallax-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.parallax-bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.parallax-section > .container {
  position: relative;
  z-index: 1;
}


/* =======================
   SECTION TEXTURE OVERLAYS
   Aged paper / fabric / grain
   ======================= */
.texture-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23f5ede0'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23f0e6d4' opacity='0.3'/%3E%3C/svg%3E");
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

.texture-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}


/* =======================
   FLOATING DECORATIVE ELEMENTS
   Leaves, petals, particles
   ======================= */
.floating-elements {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

.float-el {
  position: absolute;
  top: -60px;
  animation: floatFall linear infinite;
  opacity: 0;
  will-change: transform;
  font-size: 1.2rem;
}

@keyframes floatFall {
  0%   { transform: translateY(-60px) rotate(0deg) translateX(0px); opacity: 0; }
  5%   { opacity: .6; }
  50%  { transform: translateY(50vh) rotate(180deg) translateX(40px); opacity: .6; }
  95%  { opacity: .6; }
  100% { transform: translateY(calc(100vh + 80px)) rotate(360deg) translateX(-20px); opacity: 0; }
}

/* ---- Sway variant ---- */
@keyframes floatSway {
  0%   { transform: translateY(-60px) rotate(0deg); opacity: 0; }
  5%   { opacity: .55; }
  25%  { transform: translateY(25vh) rotate(90deg) translateX(30px); }
  50%  { transform: translateY(50vh) rotate(180deg) translateX(-20px); }
  75%  { transform: translateY(75vh) rotate(270deg) translateX(25px); }
  95%  { opacity: .55; }
  100% { transform: translateY(calc(100vh + 60px)) rotate(360deg) translateX(-10px); opacity: 0; }
}


/* =======================
   TEXT REVEAL — word-by-word
   ======================= */
.text-reveal {
  overflow: hidden;
}

.text-reveal__word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.55s cubic-bezier(.215,.61,.355,1);
}

.text-reveal.is-visible .text-reveal__word {
  transform: translateY(0);
}

/* Stagger words */
.text-reveal__word:nth-child(1)  { transition-delay: 0.00s; }
.text-reveal__word:nth-child(2)  { transition-delay: 0.06s; }
.text-reveal__word:nth-child(3)  { transition-delay: 0.12s; }
.text-reveal__word:nth-child(4)  { transition-delay: 0.18s; }
.text-reveal__word:nth-child(5)  { transition-delay: 0.24s; }
.text-reveal__word:nth-child(6)  { transition-delay: 0.30s; }
.text-reveal__word:nth-child(7)  { transition-delay: 0.36s; }
.text-reveal__word:nth-child(8)  { transition-delay: 0.42s; }
.text-reveal__word:nth-child(9)  { transition-delay: 0.48s; }
.text-reveal__word:nth-child(10) { transition-delay: 0.54s; }


/* =======================
   COUNTER ANIMATION
   ======================= */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.counter.is-counting {
  animation: counterPulse 0.1s ease;
}

@keyframes counterPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}


/* =======================
   IMAGE REVEAL — curtain
   ======================= */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--clr-primary);
  z-index: 2;
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(.77,0,.175,1);
}

.img-reveal.is-visible::before {
  transform: scaleX(0);
  transform-origin: right;
}

.img-reveal img {
  transform: scale(1.15);
  transition: transform 1.2s cubic-bezier(.25,.46,.45,.94) 0.3s;
}

.img-reveal.is-visible img {
  transform: scale(1);
}


/* =======================
   HOVER MICRO-INTERACTIONS
   ======================= */

/* Magnetic hover */
.magnetic-hover {
  transition: transform 0.3s cubic-bezier(.25,.46,.45,.94);
}

/* Shine sweep on hover */
.shine-hover {
  position: relative;
  overflow: hidden;
}
.shine-hover::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255,255,255,.18) 50%,
    transparent 60%
  );
  transform: rotate(25deg);
  transition: left 0.6s ease;
}
.shine-hover:hover::after {
  left: 120%;
}

/* Tilt on hover */
.tilt-hover {
  transition: transform 0.35s ease;
  transform-style: preserve-3d;
}
.tilt-hover:hover {
  transform: perspective(600px) rotateY(-4deg) rotateX(2deg) scale(1.02);
}

/* Underline draw */
.draw-underline {
  position: relative;
}
.draw-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(.25,.46,.45,.94);
}
.draw-underline:hover::after {
  width: 100%;
}


/* =======================
   SECTION DIVIDERS
   Vietnamese-inspired wave + traditional pattern
   ======================= */
.divider-wave {
  position: relative;
  height: 60px;
  overflow: hidden;
}
.divider-wave svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}


/* =======================
   LOADING / PAGE TRANSITION
   ======================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--clr-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

.page-loader__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--clr-border);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =======================
   REDUCED MOTION — accessibility
   ======================= */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .float-el,
  .float-lantern,
  .lantern {
    animation: none !important;
  }

  .parallax-bg {
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
  }
}