/* ============================================================
   ARTHANARIKULAM — Animations Stylesheet
   Keyframes, micro-interactions, transitions
   ============================================================ */

/* ─── LOADER ANIMATIONS ───────────────────────────────────── */
@keyframes seedGrow {
  0%   { transform: scaleY(0) translateY(30px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleY(1) translateY(0); opacity: 1; }
}

@keyframes leafUnfurl {
  0%   { transform: scaleX(0) rotate(-20deg); opacity: 0; transform-origin: left center; }
  100% { transform: scaleX(1) rotate(0deg);   opacity: 1; transform-origin: left center; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── LOADER EXIT ─────────────────────────────────────────── */
@keyframes loaderExit {
  0%   { opacity: 1; transform: scale(1); }
  80%  { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; pointer-events: none; }
}

#loader.exit {
  animation: loaderExit 1s var(--ease-organic) forwards;
}

/* ─── SCROLL LINE PULSE ───────────────────────────────────── */
@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.4; }
}

/* ─── FLOATING PARTICLES ──────────────────────────────────── */
@keyframes floatParticle {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(var(--drift, 30px)) rotate(var(--rot, 180deg));
  }
}

/* ─── HERO SHIMMER ────────────────────────────────────────── */
@keyframes shimmer {
  0%   { opacity: 0.04; }
  50%  { opacity: 0.10; }
  100% { opacity: 0.04; }
}

.hero-ray {
  position: absolute;
  top: -20%;
  width: 2px;
  height: 140%;
  background: linear-gradient(to bottom, transparent, rgba(255,220,120,0.18), transparent);
  transform-origin: top center;
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

.hero-ray:nth-child(1) { left: 28%; transform: rotate(-12deg); animation-delay: 0s;   }
.hero-ray:nth-child(2) { left: 38%; transform: rotate(-6deg);  animation-delay: 0.8s; }
.hero-ray:nth-child(3) { left: 48%; transform: rotate(2deg);   animation-delay: 1.6s; }
.hero-ray:nth-child(4) { left: 58%; transform: rotate(8deg);   animation-delay: 0.4s; }
.hero-ray:nth-child(5) { left: 66%; transform: rotate(14deg);  animation-delay: 1.2s; }

/* ─── LEAF FLOAT VARIANTS ─────────────────────────────────── */
.p1  { --dur: 9s;  --delay: 0s;    --drift: 40px;  --rot: 200deg; left: 10%; bottom: 15%; }
.p2  { --dur: 12s; --delay: 2s;    --drift: -30px; --rot: 150deg; left: 25%; bottom: 10%; }
.p3  { --dur: 8s;  --delay: 1s;    --drift: 50px;  --rot: 220deg; left: 40%; bottom: 20%; }
.p4  { --dur: 11s; --delay: 3.5s;  --drift: -40px; --rot: 180deg; left: 60%; bottom: 8%;  }
.p5  { --dur: 10s; --delay: 0.5s;  --drift: 35px;  --rot: 160deg; left: 75%; bottom: 18%; }
.p6  { --dur: 13s; --delay: 2.5s;  --drift: -50px; --rot: 240deg; left: 85%; bottom: 12%; }

/* ─── GOLD LINE REVEAL ────────────────────────────────────── */
.gold-line {
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.8s var(--ease-out);
}

.gold-line.revealed {
  width: 48px;
}

/* ─── CARD HOVER GLOW ─────────────────────────────────────── */
.herb-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0);
  transition: box-shadow 0.4s;
  z-index: 2;
  pointer-events: none;
}

.herb-card:hover::before {
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0.4);
}

/* ─── WISDOM ILLUSTRATION FLOAT ───────────────────────────── */
@keyframes illustrationFloat {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.wisdom-illustration img {
  animation: illustrationFloat 6s ease-in-out infinite;
}

/* ─── FUTURE MODULE PULSE ─────────────────────────────────── */
@keyframes modulePulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0.2); }
  70%  { box-shadow: 0 0 0 12px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0);   }
}

.future-module.active-pulse {
  animation: modulePulse 2s ease-out;
}

/* ─── GOLDEN GRAIN TEXTURE OVERLAY ───────────────────────────*/
#grain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.025;
  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='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── UNDERLINE LINK ANIMATION ────────────────────────────── */
.anim-link {
  position: relative;
  display: inline-block;
}

.anim-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease-organic);
}

.anim-link:hover::after {
  width: 100%;
}

/* ─── COUNTER ANIMATION ───────────────────────────────────── */
.stat-counter {
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}

/* ─── MAGNETIC BUTTON ─────────────────────────────────────── */
.magnetic {
  transition: transform 0.3s var(--ease-out);
}

/* ─── PAGE TRANSITION CURTAIN ─────────────────────────────── */
#curtain {
  position: fixed;
  inset: 0;
  background: var(--forest);
  z-index: 9900;
  transform: scaleY(0);
  transform-origin: top;
}