/* c:\Users\carev\Desktop\Ankyatra Building\css\animations.css */

/* Reveal Animations */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

.reveal-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s ease;
}
.reveal-clip.revealed {
  clip-path: inset(0);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }

/* ============================================================
   ANKYATRA · HERO ANIMATION — BLOOMING GLASS LOTUS (CLEAN, NO BLUR)
   ============================================================ */

:root {
  --ivory:     #FDFAF2;
  --paper:     #FFFFFF;
  --ink:       #241C4E;
  --ink-soft:  #4C4A63;
  --gold:      #E9A63A;
  --gold-deep: #C87F14;
  --gold-pale: #FAE9CC;
  --line:      #EFE3CC;

  --ease-out: cubic-bezier(.22,.9,.24,1);
  --ease-bloom: cubic-bezier(.16,.84,.32,1);     /* slow, organic unfurl */
}

/* Continuous 360-Degree Rotation for the Glass Lotus */
@keyframes spin-lotus-continuous {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes lotus-breathe {
  0%, 100%{ scale: 1; }
  50%    { scale: 1.02; }
}

/* Glass Lotus Shell */
.lotus {
  position: absolute;
  z-index: 1;
  top: 58%;
  left: 50%;
  translate: -50% -50%;
  width: min(980px, 138vw);
  aspect-ratio: 1;
  pointer-events: none;
  animation: lotus-breathe 9s ease-in-out 0s infinite;
  will-change: transform;
}

.lotus svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: spin-lotus-continuous 65s linear infinite;
}

/* Hide blurred glow understudy & backdrop blur veil */
.lotus__glow {
  display: none !important;
}

.hero__veil {
  display: none !important;
}

/* Instant Opening Bloom: Starts blooming immediately on page open */
@keyframes bloom-once-and-hold {
  0% {
    transform: rotate(var(--closed)) scale(0.06);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    transform: rotate(calc(var(--open) * 1.03)) scale(1.04); /* overshoot */
    opacity: 1;
  }
  100% {
    transform: rotate(var(--open)) scale(1);
    opacity: 1;
  }
}

.petal-g {
  opacity: 0;                           /* Base state: starts blooming instantly */
  transform-box: fill-box;              /* rotate around the flower centre */
  transform-origin: 50% 100%;
  animation: bloom-once-and-hold 1.8s var(--ease-bloom) var(--delay) forwards !important;
}

/* Glass surfaces - crisp vector lines */
.petal-body { stroke: rgba(255,246,228,.82); stroke-width: 1; stroke-linejoin: round; }
.petal-rim  { fill: none; stroke: rgba(200,127,20,.5); stroke-width: .8; }
.petal-core { mix-blend-mode: screen; opacity: .55; }

/* Continuous Light Sheen Sweep */
@keyframes sheen-continuous {
  0%, 80%, 100% { opacity: 0; }
  25%           { opacity: 0.85; }
  40%           { opacity: 0.15; }
}

.petal-sheen {
  mix-blend-mode: screen;
  opacity: 0;
  animation: sheen-continuous 6s ease-in-out var(--sheen-delay) infinite !important;
}

/* Seed pod (karnika) stays open and glowing */
@keyframes pod-stay-open {
  0%   { opacity: 0; transform: scale(.5); }
  100% { opacity: 1; transform: scale(1); }
}

.pod {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pod-stay-open 1.5s var(--ease-out) 0.3s forwards !important;
}

.pod-seed { fill: rgba(200,127,20,.6); animation: seed-twinkle 4.5s ease-in-out infinite; }
@keyframes seed-twinkle { 0%, 100%{ opacity: .45; } 50%{ opacity: .95; } }

/* Core light that swells open instantly and stays radiant */
@keyframes core-stay-bright {
  0%   { opacity: 0; transform: scale(.55); }
  100% { opacity: 1; transform: scale(1.1); }
}

.lotus__core {
  position: absolute;
  z-index: 2;
  top: 58%;
  left: 50%;
  translate: -50% -50%;
  width: min(520px, 68vw);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,214,140,.65) 0%, rgba(233,166,58,.28) 40%, rgba(233,166,58,0) 70%);
  animation: core-stay-bright 2.0s ease-in-out 0.1s forwards !important;
}

/* Pollen motes lifting off the bloom */
.motes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.motes i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE7B8 0%, rgba(233,166,58,.6) 55%, rgba(233,166,58,0) 100%);
  opacity: 0;
  animation: mote linear infinite;
  will-change: transform, opacity;
}

@keyframes mote {
  0%  { transform: translate(0,0) scale(.6); opacity: 0; }
  15% { opacity: .9; }
  70% { opacity: .5; }
  100%{ transform: translate(var(--dx), -360px) scale(1.15); opacity: 0; }
}