/* ==========================================================================
   ANUKUL Ayur Vastu Harmony Clinic — Global Premium Motion & Interaction System
   Health • Space • Lifestyle • Harmony
   ========================================================================== */

:root {
  --anukul-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anukul-ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --anukul-dur-fast: 180ms;
  --anukul-dur-std: 320ms;
  --anukul-dur-reveal: 600ms;
  --anukul-stagger-gap: 80ms;
}

/* 1. Global Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* 2. Top Scroll & Reading Progress Bar */
#anukul-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, #1F4D3A 0%, #B38A3E 50%, #C66A22 100%);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.1s ease-out;
  box-shadow: 0 1px 4px rgba(179, 138, 62, 0.3);
}

/* 3. Floating Back to Top Button */
#anukul-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F7F1E3;
  color: #1F4D3A;
  border: 1px solid #B38A3E;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 4px 14px rgba(31, 77, 58, 0.15);
}

#anukul-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#anukul-back-to-top:hover {
  background: #1F4D3A;
  color: #F7F1E3;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(31, 77, 58, 0.25);
}

#anukul-back-to-top svg.progress-ring {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
  pointer-events: none;
}

#anukul-back-to-top circle.progress-ring-circle {
  transition: stroke-dashoffset 0.1s linear;
  stroke: #B38A3E;
  stroke-width: 2;
  fill: transparent;
}

/* 4. Ambient Sacred Geometry Animations */
@keyframes mandalaSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mandala-rotate {
  animation: mandalaSpin 65s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

.mandala-rotate-reverse {
  animation: mandalaSpin 80s linear infinite reverse;
  transform-origin: 50% 50%;
  will-change: transform;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.ambient-float {
  animation: gentleFloat 5s ease-in-out infinite;
  will-change: transform;
}

/* 5. Scroll-Triggered Content Reveal System */
.anukul-reveal,
.anukul-fade-up,
.anukul-fade-in,
.anukul-scale-in {
  opacity: 1; /* Robust fallback: fully visible by default */
  transition: opacity var(--anukul-dur-reveal) var(--anukul-ease-out),
              transform var(--anukul-dur-reveal) var(--anukul-ease-out);
  will-change: opacity, transform;
}

.js-enabled .anukul-reveal.pending-reveal,
.js-enabled .anukul-fade-up.pending-reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js-enabled .anukul-fade-in.pending-reveal {
  opacity: 0;
  transform: none;
}

.js-enabled .anukul-scale-in.pending-reveal {
  opacity: 0;
  transform: scale(0.975);
}

.js-enabled .anukul-reveal.revealed,
.js-enabled .anukul-fade-up.revealed,
.js-enabled .anukul-fade-in.revealed,
.js-enabled .anukul-scale-in.revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* 6. Staggered Card Grid Delays */
.anukul-stagger > *:nth-child(1) { transition-delay: 0ms; }
.anukul-stagger > *:nth-child(2) { transition-delay: 80ms; }
.anukul-stagger > *:nth-child(3) { transition-delay: 160ms; }
.anukul-stagger > *:nth-child(4) { transition-delay: 240ms; }
.anukul-stagger > *:nth-child(5) { transition-delay: 320ms; }
.anukul-stagger > *:nth-child(6) { transition-delay: 400ms; }
.anukul-stagger > *:nth-child(7) { transition-delay: 480ms; }
.anukul-stagger > *:nth-child(8) { transition-delay: 560ms; }

/* 7. Interactive Cards & Elevated Hover States */
.anukul-card-lift {
  transition: transform var(--anukul-dur-std) var(--anukul-ease-out),
              box-shadow var(--anukul-dur-std) var(--anukul-ease-out),
              border-color var(--anukul-dur-std) var(--anukul-ease-out);
  will-change: transform, box-shadow;
}

.anukul-card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(31, 77, 58, 0.12), 0 4px 12px -2px rgba(46, 41, 36, 0.05);
  border-color: rgba(179, 138, 62, 0.45);
}

.anukul-card-lift:active {
  transform: translateY(-1px);
  transition-duration: 100ms;
}

/* Image scaling inside interactive cards */
.anukul-card-lift .overflow-hidden img,
.anukul-image-reveal img {
  transition: transform 0.6s var(--anukul-ease-out);
  will-change: transform;
}

.anukul-card-lift:hover .overflow-hidden img,
.anukul-image-reveal:hover img {
  transform: scale(1.035);
}

/* Arrow Slide Micro-Interaction */
.anukul-arrow-slide {
  transition: transform var(--anukul-dur-fast) var(--anukul-ease-out);
  display: inline-block;
}

.anukul-card-lift:hover .anukul-arrow-slide,
a:hover .anukul-arrow-slide {
  transform: translateX(3px);
}

/* 8. Standardized Interactive Button Feedback */
.anukul-btn-interactive,
button[type="submit"]:not(:disabled),
.anukul-btn {
  transition: background-color var(--anukul-dur-fast) var(--anukul-ease-out),
              color var(--anukul-dur-fast) var(--anukul-ease-out),
              transform var(--anukul-dur-fast) var(--anukul-ease-out),
              box-shadow var(--anukul-dur-fast) var(--anukul-ease-out);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.anukul-btn-interactive:active,
button[type="submit"]:not(:disabled):active,
.anukul-btn:active {
  transform: scale(0.975);
}

/* 9. Accessible Keyboard Focus Indicators */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #B38A3E !important;
  outline-offset: 2px !important;
}

/* 10. Dynamic Header Scroll Enhancement */
header.header-scrolled {
  box-shadow: 0 4px 18px -2px rgba(46, 41, 36, 0.08) !important;
}

/* 11. Modal Dialog & Drawer Smooth Transitions */
.anukul-modal-backdrop {
  transition: opacity var(--anukul-dur-std) var(--anukul-ease-out);
}

.anukul-modal-dialog {
  transition: transform var(--anukul-dur-std) var(--anukul-ease-out),
              opacity var(--anukul-dur-std) var(--anukul-ease-out);
}

/* 12. Accessibility: Prefers-Reduced-Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mandala-rotate,
  .mandala-rotate-reverse,
  .ambient-float {
    animation: none !important;
  }
  .anukul-reveal,
  .anukul-fade-up,
  .anukul-fade-in,
  .anukul-scale-in,
  .anukul-card-lift {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}