﻿/* ═══════════════════════════════════════════════════════
   DIVINE REALTY — GLOBAL ANIMATION SYSTEM
   Applied via footer.php on every public page
════════════════════════════════════════════════════════ */

/* ── 1. BASE KEYFRAMES ───────────────────────────────── */
@keyframes dr-fadeUp        { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes dr-fadeDown      { from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }
@keyframes dr-fadeLeft      { from { opacity:0; transform:translateX(50px); } to { opacity:1; transform:translateX(0); } }
@keyframes dr-fadeRight     { from { opacity:0; transform:translateX(-50px); } to { opacity:1; transform:translateX(0); } }
@keyframes dr-scaleIn       { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
@keyframes dr-rotateIn      { from { opacity:0; transform:rotate(-8deg) scale(0.9); } to { opacity:1; transform:rotate(0) scale(1); } }
@keyframes dr-slideUp       { from { opacity:0; transform:translateY(60px) skewY(2deg); } to { opacity:1; transform:translateY(0) skewY(0); } }
@keyframes dr-countUp       { from { opacity:0; } to { opacity:1; } }

/* Float for hero elements */
@keyframes dr-float         { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
/* Shimmer on gold accents */
@keyframes dr-shimmer       { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
/* Pulse ring */
@keyframes dr-pulse-ring    { 0%   { box-shadow:0 0 0 0 rgba(201,168,76,0.4); }
                               70%  { box-shadow:0 0 0 16px rgba(201,168,76,0); }
                               100% { box-shadow:0 0 0 0 rgba(201,168,76,0); } }
/* Typing cursor blink */
@keyframes dr-blink         { 0%,100%{ opacity:1; } 50%{ opacity:0; } }
/* Gold line expand */
@keyframes dr-lineExpand    { from { transform:scaleX(0); } to { transform:scaleX(1); } }
/* Page loader */
@keyframes dr-loaderSpin    { to { transform:rotate(360deg); } }
@keyframes dr-loaderFade    { 0%,100%{ opacity:1; } 50%{ opacity:0.2; } }
/* Stagger children */
@keyframes dr-stagger       { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
/* Card hover lift */
@keyframes dr-liftHover     { from { transform:translateY(0); box-shadow:0 4px 20px rgba(0,0,0,0.1); }
                               to   { transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,0.18); } }

/* ── 2. SCROLL-TRIGGERED CLASSES (wired by JS) ───────── */
.dr-anim { opacity:0; }
.dr-anim.is-visible                           { animation-fill-mode:both; animation-duration:.7s; animation-timing-function:cubic-bezier(.22,.68,0,1.2); }
.dr-anim[data-dr-anim="fade-up"].is-visible   { animation-name:dr-fadeUp; }
.dr-anim[data-dr-anim="fade-down"].is-visible { animation-name:dr-fadeDown; }
.dr-anim[data-dr-anim="fade-left"].is-visible { animation-name:dr-fadeLeft; }
.dr-anim[data-dr-anim="fade-right"].is-visible{ animation-name:dr-fadeRight; }
.dr-anim[data-dr-anim="scale"].is-visible     { animation-name:dr-scaleIn; }
.dr-anim[data-dr-anim="rotate"].is-visible    { animation-name:dr-rotateIn; }
.dr-anim[data-dr-anim="slide-up"].is-visible  { animation-name:dr-slideUp; animation-timing-function:cubic-bezier(.16,1,.3,1); }

/* Delay helpers */
.dr-delay-1{ animation-delay:.1s; }
.dr-delay-2{ animation-delay:.2s; }
.dr-delay-3{ animation-delay:.3s; }
.dr-delay-4{ animation-delay:.45s; }
.dr-delay-5{ animation-delay:.6s; }
.dr-delay-6{ animation-delay:.75s; }

/* ── 3. PAGE LOADER ──────────────────────────────────── */
#dr-page-loader{
  position:fixed; inset:0;
  background:#0a0f1e;
  display:flex; align-items:center; justify-content:center;
  z-index:99999;
  transition:opacity .5s ease, visibility .5s ease;
}
#dr-page-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.dr-loader-ring{
  width:52px; height:52px;
  border:3px solid rgba(201,168,76,0.15);
  border-top-color:#c9a84c;
  border-radius:50%;
  animation:dr-loaderSpin .8s linear infinite;
}

/* ── 4. HERO ENTRANCE (index.php) ────────────────────── */
.dr-hero-content .dr-badge        { animation:dr-fadeDown .6s .1s both; }
.dr-hero-content .dr-hero-title   { animation:dr-fadeUp .8s .25s both cubic-bezier(.16,1,.3,1); }
.dr-hero-content .dr-hero-sub     { animation:dr-fadeUp .8s .4s both; }
.dr-hero-content .d-flex.flex-wrap{ animation:dr-fadeUp .7s .55s both; }
.dr-hero-content .dr-hero-stats   { animation:dr-fadeUp .7s .7s both; }
/* Float the scroll arrow */
.dr-hero-scroll .dr-scroll-line   { animation:dr-float 2.5s ease-in-out infinite; }

/* ── 5. GOLD SHIMMER on section labels ───────────────── */
.dr-section-label{
  background:linear-gradient(90deg,#c9a84c 0%,#f5d78e 40%,#c9a84c 80%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:dr-shimmer 3s linear infinite;
  display:inline-block;
}

/* ── 6. CARD HOVER TRANSITIONS ───────────────────────── */
.dr-why-card, .dr-vertical-card, .dr-testi-card, .dr-faq-item,
.services-3-item, .alt-features-item, .service-box {
  transition: transform .35s cubic-bezier(.22,.68,0,1.2),
              box-shadow .35s ease,
              border-color .35s ease !important;
}

/* ── 7. BUTTON RIPPLE ────────────────────────────────── */
.dr-btn-primary, .dr-btn-outline, .dr-btn, .dr-nav-cta {
  position:relative; overflow:hidden;
}
.dr-btn-primary::after, .dr-btn-outline::after, .dr-btn::after, .dr-nav-cta::after {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity:0; transform:scale(0);
  transition:opacity .4s, transform .6s;
  border-radius:inherit;
  pointer-events:none;
}
.dr-btn-primary:active::after, .dr-btn-outline:active::after,
.dr-btn:active::after, .dr-nav-cta:active::after {
  opacity:1; transform:scale(2.5);
  transition:opacity 0s, transform 0s;
}

/* ── 8. STAT COUNTER ANIMATION ───────────────────────── */
.dr-stat-card-num, .dr-hero-stat-num{
  animation:dr-countUp .6s ease both;
}

/* ── 9. NAV LINK UNDERLINE SLIDE ─────────────────────── */
.dr-nav-links li a {
  position:relative;
}
.dr-nav-links li a::after {
  content:'';
  position:absolute; bottom:-2px; left:50%; right:50%;
  height:2px; background:#c9a84c;
  transition:left .3s ease, right .3s ease;
}
.dr-nav-links li a:hover::after { left:14px; right:14px; }

/* ── 10. FLOATING ORBS (login/signup bg) ─────────────── */
.dr-orb {
  position:fixed; border-radius:50%;
  pointer-events:none; z-index:0;
  animation:dr-float 6s ease-in-out infinite;
}
.dr-orb-1{
  width:400px; height:400px; top:-120px; left:-120px;
  background:radial-gradient(circle,rgba(201,168,76,0.07) 0%,transparent 70%);
  animation-delay:0s;
}
.dr-orb-2{
  width:500px; height:500px; bottom:-150px; right:-150px;
  background:radial-gradient(circle,rgba(99,102,241,0.06) 0%,transparent 70%);
  animation-delay:-3s;
}
.dr-orb-3{
  width:300px; height:300px; top:40%; left:60%;
  background:radial-gradient(circle,rgba(201,168,76,0.04) 0%,transparent 70%);
  animation-delay:-1.5s;
}

/* ── 11. INPUT FOCUS GLOW (login/signup) ─────────────── */
.dr-input {
  transition:border-color .25s, box-shadow .25s, background .25s, transform .2s !important;
}
.dr-input:focus { transform:translateY(-1px) !important; }

/* ── 12. LOGIN CARD ENTRANCE ─────────────────────────── */
.login-card, .signup-card {
  animation:dr-scaleIn .6s cubic-bezier(.16,1,.3,1) both;
}

/* ── 13. GOLD ACCENT LINE (section titles) ───────────── */
.dr-section-title::after {
  content:'';
  display:block; width:48px; height:3px;
  background:linear-gradient(90deg,#c9a84c,transparent);
  border-radius:2px; margin-top:12px;
  transform-origin:left;
  animation:dr-lineExpand .6s .3s both;
}
/* Don't add line to centered titles */
.text-center .dr-section-title::after { margin:12px auto 0; }

/* ── 14. TRUST BAR SCROLL ────────────────────────────── */
.dr-trust-bar-inner {
  animation:dr-fadeUp .5s .2s both;
}

/* ── 15. PARALLAX TILT on cards (wired by JS) ────────── */
[data-tilt] { transform-style:preserve-3d; }

/* ── 16. NAVBAR SLIDE IN ─────────────────────────────── */
.dr-nav {
  animation:dr-fadeDown .5s .1s both;
}

/* ── 17. PLAN CARD STAGGER ───────────────────────────── */
.dr-plan-card:nth-child(1){ transition-delay:.05s; }
.dr-plan-card:nth-child(2){ transition-delay:.12s; }
.dr-plan-card:nth-child(3){ transition-delay:.19s; }
.dr-plan-card:nth-child(4){ transition-delay:.26s; }
.dr-plan-card:nth-child(5){ transition-delay:.33s; }
.dr-plan-card:nth-child(6){ transition-delay:.40s; }

/* ── 18. SMOOTH PAGE TRANSITIONS ────────────────────────*/
main#main {
  animation:dr-fadeUp .5s .15s both;
}

/* ── 19. REDUCE MOTION ───────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}
