/* ============================================================
   CSNExplore — Premium Global Animation System v2.0
   Covers: Page Loader · Scroll Reveals · Hover FX · Micro-interactions
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   0.  CSS Variables
   ────────────────────────────────────────────────────────── */
:root {
  --ease-out-expo : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring   : cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth   : cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast      : 0.25s;
  --dur-normal    : 0.5s;
  --dur-slow      : 0.9s;
  --dur-xslow     : 1.2s;
}

/* ──────────────────────────────────────────────────────────
   1.  PAGE EXIT TRANSITION  (fade out when navigating away)
   ────────────────────────────────────────────────────────── */
body.page-fade-out {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.4s var(--ease-smooth),
              transform 0.4s var(--ease-smooth) !important;
}

/* ──────────────────────────────────────────────────────────
   3.  SCROLL REVEAL  [data-reveal]
   ────────────────────────────────────────────────────────── */
[data-reveal], .card-reveal {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity  var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
[data-reveal='left']  { transform: translateX(-50px); }
[data-reveal='right'] { transform: translateX(50px); }
[data-reveal='scale'] { transform: scale(0.94); }
[data-reveal='fade']  { transform: none; }
[data-reveal='up']    { transform: translateY(44px); }
[data-reveal='down']  { transform: translateY(-44px); }

[data-reveal].revealed, .card-reveal.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays on [data-delay] */
[data-delay="1"]  { transition-delay: 60ms !important; }
[data-delay="2"]  { transition-delay: 130ms !important; }
[data-delay="3"]  { transition-delay: 200ms !important; }
[data-delay="4"]  { transition-delay: 280ms !important; }
[data-delay="5"]  { transition-delay: 360ms !important; }
[data-delay="6"]  { transition-delay: 440ms !important; }

/* Auto stagger children of a reveal container */
[data-reveal-children] > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
  will-change: opacity, transform;
}
[data-reveal-children].revealed > *:nth-child(1)  { opacity:1; transform:none; transition-delay:  40ms; }
[data-reveal-children].revealed > *:nth-child(2)  { opacity:1; transform:none; transition-delay: 110ms; }
[data-reveal-children].revealed > *:nth-child(3)  { opacity:1; transform:none; transition-delay: 180ms; }
[data-reveal-children].revealed > *:nth-child(4)  { opacity:1; transform:none; transition-delay: 250ms; }
[data-reveal-children].revealed > *:nth-child(5)  { opacity:1; transform:none; transition-delay: 320ms; }
[data-reveal-children].revealed > *:nth-child(6)  { opacity:1; transform:none; transition-delay: 390ms; }
[data-reveal-children].revealed > *:nth-child(7)  { opacity:1; transform:none; transition-delay: 460ms; }
[data-reveal-children].revealed > *:nth-child(8)  { opacity:1; transform:none; transition-delay: 530ms; }
[data-reveal-children].revealed > *:nth-child(9)  { opacity:1; transform:none; transition-delay: 600ms; }
[data-reveal-children].revealed > *:nth-child(10) { opacity:1; transform:none; transition-delay: 670ms; }

/* ──────────────────────────────────────────────────────────
   4.  HOVER MICRO-INTERACTIONS
   ────────────────────────────────────────────────────────── */

/* Cards — lift + glow */
.card-hover,
.listing-card-anim,
.blog-card,
.service-card {
  transition:
    transform  0.55s var(--ease-out-expo),
    box-shadow 0.55s var(--ease-out-expo);
  will-change: transform;
}
.card-hover:hover,
.listing-card-anim:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -8px rgba(0,0,0,0.15),
              0 0 0 1px rgba(236,91,19,0.06);
}

/* Buttons */
button, .btn, a.btn, input[type="submit"] {
  transition:
    transform  0.3s var(--ease-spring),
    box-shadow 0.3s var(--ease-smooth),
    background-color 0.3s var(--ease-smooth),
    opacity    0.3s var(--ease-smooth);
}
button:hover:not(:disabled), .btn:hover {
  transform: translateY(-2px);
}
button:active:not(:disabled), .btn:active {
  transform: scale(0.97) !important;
  transition-duration: 0.1s !important;
}

/* Primary CTA buttons */
.btn-primary:hover,
a.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(236,91,19,0.4);
}

/* Image zoom on card hover */
.img-zoom-container { overflow: hidden; }
.img-zoom-container img {
  transition: transform 0.8s var(--ease-out-expo);
  will-change: transform;
}
.img-zoom-container:hover img { transform: scale(1.08); }

/* Links */
a {
  transition: color 0.25s var(--ease-smooth),
              opacity 0.25s var(--ease-smooth);
}

/* Nav links underline slide */
.nav-link-underline {
  position: relative;
}
.nav-link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: #ec5b13;
  border-radius: 99px;
  transition: width 0.3s var(--ease-out-expo);
}
.nav-link-underline:hover::after,
.nav-link-underline.active::after { width: 100%; }

/* ──────────────────────────────────────────────────────────
   5.  KEYFRAME LIBRARY
   ────────────────────────────────────────────────────────── */
@keyframes fadeIn     { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } }
@keyframes fadeInRight{ from { opacity:0; transform:translateX(40px);  } to { opacity:1; transform:none; } }
@keyframes fadeInUp   { from { opacity:0; transform:translateY(40px);  } to { opacity:1; transform:none; } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-40px); } to { opacity:1; transform:none; } }

@keyframes scaleIn {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes popIn {
  0%   { opacity:0; transform:scale(0.85); }
  70%  { transform:scale(1.04); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(60px); }
  to   { opacity:1; transform:none; }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-14px); }
}
@keyframes shimmer {
  0%   { background-position:-800px 0; }
  100% { background-position: 800px 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(236,91,19,0.4); }
  50%     { box-shadow:0 0 0 12px rgba(236,91,19,0); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes heroKen {
  0%   { transform: scale(1)    translateX(0); }
  50%  { transform: scale(1.04) translateX(-1%); }
  100% { transform: scale(1)    translateX(0); }
}
@keyframes numberCountUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}

/* ──────────────────────────────────────────────────────────
   6.  UTILITY ANIMATION CLASSES
   ────────────────────────────────────────────────────────── */
.anim-fade-in      { animation: fadeIn      var(--dur-slow) var(--ease-out-expo) both; }
.anim-fade-in-left { animation: fadeInLeft  var(--dur-slow) var(--ease-out-expo) both; }
.anim-fade-in-right{ animation: fadeInRight var(--dur-slow) var(--ease-out-expo) both; }
.anim-fade-in-up   { animation: fadeInUp    var(--dur-slow) var(--ease-out-expo) both; }
.anim-scale-in     { animation: scaleIn     var(--dur-slow) var(--ease-out-expo) both; }
.anim-pop-in       { animation: popIn       var(--dur-slow) var(--ease-spring)   both; }
.anim-slide-up     { animation: slideUp     var(--dur-slow) var(--ease-out-expo) both; }
.anim-float        { animation: float       3s var(--ease-smooth) infinite; }
.anim-spin         { animation: spin        1s linear infinite; }
.anim-pulse-glow   { animation: pulseGlow   2s ease-in-out infinite; }
.anim-hero-ken     { animation: heroKen    18s ease-in-out infinite; }
.animate-marquee   { display:flex; width:max-content; animation: marquee 120s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }

/* delay helpers */
.anim-d1 { animation-delay:  80ms; }
.anim-d2 { animation-delay: 160ms; }
.anim-d3 { animation-delay: 240ms; }
.anim-d4 { animation-delay: 320ms; }
.anim-d5 { animation-delay: 400ms; }
.anim-d6 { animation-delay: 480ms; }

/* ──────────────────────────────────────────────────────────
   7.  SHIMMER SKELETON (Loading placeholders)
   ────────────────────────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg,
    #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 8px;
}
.shimmer-dark {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 8px;
}

/* ──────────────────────────────────────────────────────────
   8.  MODAL / DROPDOWN ANIMATIONS
   ────────────────────────────────────────────────────────── */
.modal-enter {
  animation: popIn 0.4s var(--ease-spring) both;
}
.modal-overlay-enter {
  animation: fadeIn 0.3s var(--ease-smooth) both;
}
.dropdown-enter {
  animation: fadeInUp 0.35s var(--ease-out-expo) both;
  transform-origin: top center;
}

/* ──────────────────────────────────────────────────────────
   9.  FORM INPUT FOCUS GLOW
   ────────────────────────────────────────────────────────── */
input, select, textarea {
  transition:
    border-color 0.3s var(--ease-smooth),
    box-shadow   0.3s var(--ease-smooth),
    background   0.3s var(--ease-smooth);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(236,91,19,0.18) !important;
}

/* ──────────────────────────────────────────────────────────
   10. HERO SECTION EXTRAS
   ────────────────────────────────────────────────────────── */
.hero-bg-ken  { animation: heroKen 18s ease-in-out infinite; }
.hero-text-in { animation: slideUp 1s 0.2s var(--ease-out-expo) both; }
.hero-sub-in  { animation: fadeInUp 1s 0.45s var(--ease-out-expo) both; }
.hero-cta-in  { animation: popIn 0.8s 0.65s var(--ease-spring) both; }

/* ──────────────────────────────────────────────────────────
   11. SCROLL PROGRESS BAR  (top of viewport)
   ────────────────────────────────────────────────────────── */
#csn-scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #ec5b13 0%, #ff8c42 100%);
  z-index: 100000;
  border-radius: 0 99px 99px 0;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   12. BACK TO TOP BUTTON
   ────────────────────────────────────────────────────────── */
#go-top-btn {
  transition:
    opacity    0.4s var(--ease-out-expo),
    visibility 0.4s var(--ease-out-expo),
    transform  0.4s var(--ease-spring);
}
#go-top-btn:hover {
  transform: translateY(-4px) scale(1.08) !important;
}

/* ──────────────────────────────────────────────────────────
   13. FOOTER & MISC TRANSITIONS
   ────────────────────────────────────────────────────────── */
footer a, footer button {
  transition: color 0.3s var(--ease-smooth),
              transform 0.3s var(--ease-smooth),
              opacity 0.3s var(--ease-smooth);
}
footer a:hover { transform: translateX(3px); }

/* ──────────────────────────────────────────────────────────
   14. ACCESSIBILITY — reduce motion
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], #csn-loader {
    opacity: 1 !important;
    transform: none !important;
  }
  #csn-loader { display: none !important; }
}

/* ──────────────────────────────────────────────────────────
   15. MOBILE — tune distances down
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  [data-reveal] {
    transform: translateY(28px);
    transition-duration: 0.7s;
  }
  [data-reveal='left']  { transform: translateX(-28px); }
  [data-reveal='right'] { transform: translateX(28px); }
}