/* ============================================================
   ANIMATE.CSS – Sri Manishaa Homes
   Scroll-triggered reveal · Stagger · Parallax · Shimmer
   ============================================================ */

/* ── BASE REVEAL STATES ── */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 0.75s;
  transition-property: opacity, transform;
}

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

/* Entrance variants */
[data-anim="fade-up"]    { transform: translateY(48px); }
[data-anim="fade-down"]  { transform: translateY(-48px); }
[data-anim="fade-left"]  { transform: translateX(56px); }
[data-anim="fade-right"] { transform: translateX(-56px); }
[data-anim="zoom-in"]    { transform: scale(0.88); }
[data-anim="zoom-out"]   { transform: scale(1.12); }
[data-anim="flip-up"]    { transform: perspective(600px) rotateX(20deg) translateY(32px); }
[data-anim="slide-up"]   { transform: translateY(100%); overflow: hidden; }

/* Delay helpers */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }
[data-delay="600"] { transition-delay: 0.60s; }
[data-delay="700"] { transition-delay: 0.70s; }

/* Duration helpers */
[data-duration="400"]  { transition-duration: 0.40s; }
[data-duration="600"]  { transition-duration: 0.60s; }
[data-duration="900"]  { transition-duration: 0.90s; }
[data-duration="1200"] { transition-duration: 1.20s; }

/* ── PAGE TRANSITION OVERLAY ── */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: var(--indigo);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

#page-transition.page-entered {
  transform: scaleY(0);
  transform-origin: bottom;
}

/* ── SHIMMER SKELETON (loading) ── */
.shimmer {
  background: linear-gradient(90deg, #f0eeff 25%, #e0d8ff 50%, #f0eeff 75%);
  background-size: 200% 100%;
  animation: shimmerAnim 1.6s infinite;
}

@keyframes shimmerAnim {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── FLOATING PARTICLES ── */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

/* ── HERO TEXT SPLIT (char-by-char) ── */
.split-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) rotate(4deg);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.split-text.anim-visible .char {
  opacity: 1;
  transform: none;
}

/* ── MAGNETIC BUTTON ── */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
}

/* ── CARD TILT ── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease;
}

.tilt-card .tilt-inner {
  transform: translateZ(20px);
}

/* ── STAGGER CHILDREN ── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

.stagger-children.anim-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0.05s; }
.stagger-children.anim-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 0.15s; }
.stagger-children.anim-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 0.25s; }
.stagger-children.anim-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 0.35s; }
.stagger-children.anim-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 0.45s; }
.stagger-children.anim-visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: 0.55s; }
.stagger-children.anim-visible > *:nth-child(7) { opacity:1; transform:none; transition-delay: 0.65s; }
.stagger-children.anim-visible > *:nth-child(8) { opacity:1; transform:none; transition-delay: 0.75s; }
.stagger-children.anim-visible > *:nth-child(n+9) { opacity:1; transform:none; transition-delay: 0.85s; }

/* ── NUMBER COUNTER ── */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ── IMAGE REVEAL (curtain wipe) ── */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--indigo);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 1;
}

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

/* ── PARALLAX SECTION ── */
.parallax-bg {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── HOVER LIFT ── */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(61,31,142,0.18);
}

/* ── GLOW PULSE (for CTAs) ── */
.glow-pulse {
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,31,142,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(61,31,142,0); }
}

/* ── SPINNING BADGE (for stats / awards) ── */
.spin-slow {
  animation: spinSlow 18s linear infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── UNDERLINE DRAW (nav / headings) ── */
.underline-draw {
  position: relative;
  display: inline-block;
}

.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  height: 2px;
  width: 0;
  background: var(--amber);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.22,1,0.36,1);
}

.underline-draw:hover::after,
.underline-draw.active::after {
  width: 100%;
}

/* ── TYPED CURSOR ── */
.typed-cursor {
  display: inline-block;
  width: 2px;
  background: var(--amber);
  margin-left: 2px;
  animation: blinkCursor 0.9s step-end infinite;
  vertical-align: text-bottom;
  height: 1em;
}

@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── RIPPLE on click ── */
.ripple-btn {
  position: relative;
  overflow: hidden;
}

.ripple-btn .ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── SECTION REVEAL LINE ── */
.section-reveal-line {
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--indigo), var(--amber));
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
  margin: 16px 0 32px;
}

.section-reveal-line.anim-visible {
  width: 60px;
}

/* ── FLOATING SHAPES (decorative) ── */
.float-shape {
  position: absolute;
  border-radius: 50%;
  background: var(--indigo-soft);
  opacity: 0.5;
  pointer-events: none;
  animation: floatShape 6s ease-in-out infinite;
  z-index: 0;
}

@keyframes floatShape {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-16px) rotate(8deg); }
  66%       { transform: translateY(8px) rotate(-5deg); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim].anim-visible,
  .shimmer, .glow-pulse, .spin-slow,
  .float-shape, .scroll-dot { animation: none !important; transition: none !important; }
  #page-transition { display: none; }
}