/* ============================================================
   BHOOMIVISTA DESIGN SYSTEM — MOTION v7.1
   ------------------------------------------------------------
   Purpose:
     Centralizes all keyframes and animation utilities for
     BhoomiVista. Pure CSS, GPU-friendly, and mobile-safe.

   Works with:
     – Elementor & Gutenberg (FSE)
     – iOS/Android mobile browsers
     – core.css tokens (timings, colors)

   Structure:
     [1] Global Motion Policy
     [2] Core Keyframes (shared across themes)
     [3] Reveal Utilities (on-enter animations)
     [4] Hover/Focus Utilities (guarded by hover media)
     [5] Sweep/Glow Lines (top accents)
     [6] Hero Motion Presets
     [7] Image Effect Utilities (zoom, pan, tilt, float)
     [8] Column/Group Interaction Utilities
     [9] Reduced-Motion Safety (global overrides)
   ============================================================ */


/* ============================================================
   [1] GLOBAL MOTION POLICY
   ------------------------------------------------------------
   – Keep animations subtle (< 0.8s on interactive, < 1.5s on ambient)
   – Use transforms & opacity only (GPU friendly)
   – No layout-affecting transitions (top/left/width/height)
   – Honor prefers-reduced-motion everywhere
   ============================================================ */

:root {
  /* aliases for readability */
  --dur-fast:   var(--motion-fast);
  --dur-med:    var(--motion-medium);
  --dur-slow:   var(--motion-slow);
  --easing-snap: var(--motion-snap);
}

/* Helper to disable motion per element, regardless of media query */
.motion-none,
[data-motion="off"] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}


/* ============================================================
   [2] CORE KEYFRAMES
   ============================================================ */

/* soft horizontal light sweep (lines, accents) */
@keyframes bvSweep {
  0%   { left: -150%; }
  100% { left: 150%; }
}

/* gradient text slow flow (headings) */
@keyframes gradientFlowSoft {
  0%   { background-position: 0% 50%; filter: brightness(1.02); }
  25%  { background-position: 25% 50%; filter: brightness(1.06); }
  50%  { background-position: 50% 50%; filter: brightness(1.10); }
  75%  { background-position: 75% 50%; filter: brightness(1.06); }
  100% { background-position: 100% 50%; filter: brightness(1.02); }
}

/* torch-like radiance under headings */
@keyframes torchPulse {
  0%,100% { opacity: .65; transform: translateX(-50%) translateY(-10%) scale(1); }
  50%     { opacity: .85; transform: translateX(-50%) translateY(-8%)  scale(1.05); }
}

/* theme paragraph auras */
@keyframes sparkGlow {
  0%,100% { opacity: .6;  transform: translateX(-50%) scale(1); }
  50%     { opacity: .85; transform: translateX(-50%) scale(1.05); }
}
@keyframes lightPulse {
  0%,100% { opacity: .6;  transform: translateX(-50%) scale(1); }
  50%     { opacity: .85; transform: translateX(-50%) scale(1.08); }
}
@keyframes echoFlow {
  0%,100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%     { opacity: .8;  transform: translateX(-50%) scale(1.06); }
}

/* reveal-on-enter (IntersectionObserver friendly) */
@keyframes revealFade {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: none; }
}

/* hero gradient overlay drift */
@keyframes heroGradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* gentle CTA glow pulse */
@keyframes heroBtnPulse {
  0%,100% { box-shadow: 0 0 18px rgba(215,182,122,.15); }
  50%     { box-shadow: 0 0 32px rgba(215,182,122,.35); }
}

/* generic gradient shift for titles */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ambient aura pulse for panels/cards */
@keyframes auraPulse {
  0%,100% { box-shadow: 0 0 18px rgba(215,182,122,.12); }
  50%     { box-shadow: 0 0 32px rgba(215,182,122,.28); }
}


/* ============================================================
   [3] REVEAL UTILITIES (add on elements that should animate-in)
   ============================================================ */

/* default reveal (slower, cinematic) */
.terra-fadein,
.bv-reveal {
  opacity: 0;
  transform: translateY(40px);
  animation: revealFade .8s var(--dur-med) forwards;
}

/* faster, snappier upward slide */
.terra-slideup,
.bv-reveal-fast {
  opacity: 0;
  transform: translateY(28px);
  animation: revealFade .6s var(--dur-fast) forwards;
}

/* ambient glow for any box/panel */
.terra-glow { animation: auraPulse 6s ease-in-out infinite; }


/* ============================================================
   [4] HOVER/FOCUS UTILITIES (guarded by hover media query)
   ============================================================ */
@media (hover: hover) {

  /* subtle lift on hover (cards, panels) */
  .hover-lift:hover {
    transform: translateY(-4px);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
    box-shadow: var(--shadow-medium);
  }

  /* parallax-on-hover for hero/media */
  .parallax-hover:hover img,
  .parallax-hover:hover video {
    transform: translateY(-10px) scale(1.04);
    transition: transform 1.2s ease-out;
    will-change: transform;
  }

  /* interactive emphasis for buttons */
  .btn-pop:hover {
    transform: translateY(-2px) scale(1.02);
    transition: transform var(--dur-fast);
  }
}


/* ============================================================
   [5] SWEEP / GLOW LINES (top accents & column sweeps)
   ============================================================ */

/* generic horizontal glow line (works on any container) */
.bv-glow::after {
  content: "";
  position: absolute;
  top: -1px; left: -150%;
  width: 250%; height: 10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  animation: bvSweep 4s linear infinite;
  z-index: 2; pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(1px);
}

/* column sweep line (thinner) */
.bv-col-sweep .wp-block-column::before,
.bv-col-sweep .elementor-column::before {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 250%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  animation: bvSweep 4s linear infinite;
  pointer-events: none;
}


/* ============================================================
   [6] HERO MOTION PRESETS (class-only; no layout)
   ============================================================ */

/* fade-in entrance when hero mounts */
.terra-hero-fade {
  animation: revealFade 1.2s ease forwards;
}

/* hover glow/zoom (safe, guarded by @media hover in section 4) */
.terra-hero-glow:hover img,
.terra-hero-glow:hover video {
  filter: brightness(1.1);
  transform: scale(1.04);
  transition: transform 1.2s ease, filter .8s ease;
}

/* animated gradient overlay (set by ::before on hero) */
.terra-hero-gradient::before {
  background: linear-gradient(270deg, rgba(180,95,75,0.6), rgba(215,182,122,0.5), rgba(180,95,75,0.6));
  background-size: 300% 300%;
  animation: heroGradientShift 12s ease infinite;
}

/* CTA with breathing glow */
.terra-hero-btn.glow { animation: heroBtnPulse 5s ease-in-out infinite; }


/* ============================================================
   [7] IMAGE EFFECT UTILITIES (combine with .terra-img base)
   ============================================================ */

/* fade-in on load (useful for large media) */
.img-fadein { opacity: 0; animation: revealFade .8s ease forwards; }

/* zoom on hover */
@media (hover: hover) {
  .img-zoom img,
  .terra-img-zoom {
    transition: transform .6s ease;
    will-change: transform;
  }
  .img-zoom:hover img,
  .terra-img-zoom:hover { transform: scale(1.06); }
}

/* pan upward on hover (landscapes) */
@media (hover: hover) {
  .img-pan img,
  .terra-img-pan {
    transition: transform .8s ease;
    will-change: transform;
  }
  .img-pan:hover img,
  .terra-img-pan:hover { transform: translateY(-4%); }
}

/* subtle 3D tilt on hover */
@media (hover: hover) {
  .img-tilt,
  .terra-img-tilt {
    transform-style: preserve-3d;
    transition: transform .25s var(--easing-snap);
    will-change: transform;
  }
  .img-tilt:hover,
  .terra-img-tilt:hover { transform: perspective(900px) rotateX(3deg) rotateY(-3deg); }
}

/* gentle continuous float (decorative) */
.img-float,
.terra-img-float {
  animation: bvFloat 6s ease-in-out infinite;
}
@keyframes bvFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}


/* ============================================================
   [8] COLUMN / GROUP INTERACTION (Gutenberg/Elementor friendly)
   ============================================================ */

/* lift + shadow on column */
.terra-col-lift .wp-block-column,
.terra-col-lift .elementor-column {
  transition: transform .3s ease, box-shadow .3s ease;
  will-change: transform;
}
@media (hover: hover) {
  .terra-col-lift .wp-block-column:hover,
  .terra-col-lift .elementor-column:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-strong);
  }
}

/* overlay fade on hover */
.terra-col-overlay .wp-block-column,
.terra-col-overlay .elementor-column {
  position: relative; overflow: hidden;
}
.terra-col-overlay .wp-block-column::after,
.terra-col-overlay .elementor-column::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) {
  .terra-col-overlay .wp-block-column:hover::after,
  .terra-col-overlay .elementor-column:hover::after { opacity: 1; }
}

/* depth pop for media within columns */
.terra-col-pop .wp-block-column img,
.terra-col-pop .elementor-column img {
  transition: transform .6s ease;
  will-change: transform;
}
@media (hover: hover) {
  .terra-col-pop .wp-block-column:hover img,
  .terra-col-pop .elementor-column:hover img { transform: scale(1.05); }
}

/* brand tint feedback */
.terra-col-tint .wp-block-column:hover,
.terra-col-tint .elementor-column:hover {
  background: color-mix(in srgb, var(--terra-accent) 8%, var(--sec-bg, #fff) 92%);
  transition: background .35s ease;
}


/* ============================================================
   [9] REDUCED-MOTION SAFETY
   ------------------------------------------------------------
   Disables non-essential motion for users who prefer less motion.
   Keep transforms (e.g., hover scale) minimal or off.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* disable all animations defined here */
  .bv-glow::after,
  .bv-col-sweep .wp-block-column::before,
  .img-float,
  .terra-hero-btn.glow,
  .terra-glow,
  .terra-fadein,
  .terra-slideup,
  .img-fadein {
    animation: none !important;
  }

  /* keep static states without transforms */
  .parallax-hover:hover img,
  .parallax-hover:hover video,
  .img-zoom:hover img,
  .terra-img-zoom:hover,
  .img-pan:hover img,
  .terra-img-pan:hover,
  .img-tilt:hover,
  .terra-img-tilt:hover {
    transform: none !important;
  }

  /* remove transitions that could feel jumpy */
  * {
    transition-duration: 0ms !important;
  }
}

/* ============================================================
   END OF FILE — motion.css v7.1
   Next: utilities.css → colors, spacing, borders, helpers
   ============================================================ */