/* ============================================================
   Motion + interaction polish layer (loaded everywhere via base.html)
   Principles: subtle, spring-like, purposeful. No flashy bounce.
   ============================================================ */

/* Universal smooth transitions — anything that animates color/shadow/transform
   should feel buttery without us writing transitions everywhere. */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 480ms;
}

a, button, input, select, .nav-item, .tile, .card, .badge, table tr {
  transition:
    background-color var(--dur) var(--ease-out),
    border-color     var(--dur) var(--ease-out),
    color            var(--dur) var(--ease-out),
    box-shadow       var(--dur) var(--ease-out),
    transform        var(--dur) var(--ease-out);
}

/* ---- Page entrance: stagger fade-up for major sections ---- */
main h1, main h2, main .tiles, main .card, main table, main .alert {
  opacity: 0;
  transform: translateY(12px);
  animation: enter-up var(--dur-slow) var(--ease-out) forwards;
}
main h1            { animation-delay: 0.05s; }
main .alert        { animation-delay: 0.10s; }
main h2:nth-of-type(1) { animation-delay: 0.12s; }
main .tiles:nth-of-type(1) { animation-delay: 0.16s; }
main h2:nth-of-type(2) { animation-delay: 0.20s; }
main .tiles:nth-of-type(2) { animation-delay: 0.24s; }
main h2:nth-of-type(3) { animation-delay: 0.28s; }
main .tiles:nth-of-type(3) { animation-delay: 0.32s; }
main table:nth-of-type(1) { animation-delay: 0.34s; }
main table:nth-of-type(2) { animation-delay: 0.40s; }
main .card { animation-delay: 0.18s; }

@keyframes enter-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Tile stagger inside .tiles (children fade up sequentially) ---- */
.tiles .tile {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: tile-in 520ms var(--ease-spring) forwards;
}
.tiles .tile:nth-child(1) { animation-delay: 60ms; }
.tiles .tile:nth-child(2) { animation-delay: 130ms; }
.tiles .tile:nth-child(3) { animation-delay: 200ms; }
.tiles .tile:nth-child(4) { animation-delay: 270ms; }
.tiles .tile:nth-child(5) { animation-delay: 340ms; }
.tiles .tile:nth-child(6) { animation-delay: 410ms; }

@keyframes tile-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* tile hover — gentle lift + saffron edge glow */
.tile {
  position: relative;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 18px 48px -22px rgba(255, 153, 51, 0.55),
    0 0 0 1px rgba(255, 153, 51, 0.35) inset;
  transition: opacity var(--dur) var(--ease-out);
}
.tile:hover::after { opacity: 1; }
.tile:hover { transform: translateY(-3px); }

/* counter shine — runs once when tile appears */
.tile .num {
  background: linear-gradient(180deg, currentColor 60%, color-mix(in srgb, var(--saffron) 30%, currentColor));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---- Buttons: shimmer sweep on hover ---- */
button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
}
button:hover::before { transform: translateX(120%); }
button:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(255, 153, 51, 0.45); }
button:active { transform: translateY(0); }

/* ---- Focus ring — saffron, gentle, accessible ---- */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255, 153, 51, 0.55),
    0 0 0 5px rgba(255, 153, 51, 0.18);
  border-radius: 8px;
  transition: box-shadow 120ms var(--ease-out);
}
input:focus-visible, select:focus-visible {
  border-color: var(--saffron) !important;
}

/* ---- Nav-item: smooth bg + indicator slide ---- */
.nav-item {
  position: relative;
}
.nav-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0%;
  background: var(--saffron);
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease-out);
  border-radius: 2px;
}
.nav-item:hover::before, .nav-item.active::before { height: 60%; }
.nav-item:hover { transform: translateX(2px); }

/* ---- Table rows: subtle highlight + scale ---- */
tbody tr { transform-origin: left; }
tbody tr:hover {
  transform: scale(1.003);
  box-shadow: inset 3px 0 0 var(--saffron);
}

/* ---- Card hover lift ---- */
.card:not(.narrow):hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px -28px rgba(0, 0, 0, 0.45);
}
body.theme-light .card:not(.narrow):hover {
  box-shadow: 0 22px 60px -28px rgba(120, 70, 20, 0.30);
}

/* ---- Badge: gentle pop on appearance, hover sheen ---- */
.badge {
  transform-origin: center;
  animation: badge-in 360ms var(--ease-spring) backwards;
}
@keyframes badge-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Progress bar fill — animated stripe ---- */
.bar-fill {
  position: relative;
  overflow: hidden;
}
.bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%);
  animation: bar-shimmer 2.4s ease-in-out infinite;
}
@keyframes bar-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

/* ---- Sidebar reveal ---- */
.sidebar {
  animation: sidebar-in 600ms var(--ease-out);
}
@keyframes sidebar-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Logout / link hover underline draw ---- */
a:not(.nav-item):not(.btn):not(.public-cta):not(.logout) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 240ms var(--ease-out);
  text-decoration: none;
}
a:not(.nav-item):not(.btn):not(.public-cta):not(.logout):hover {
  background-size: 100% 1px;
}

/* ---- Smooth view transitions where supported (Chrome/Edge) ---- */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 240ms;
  }
}

/* ============================================================
   Finishing-touch layer 2 — site-wide polish
   ============================================================ */

/* Smooth scroll for anchor jumps + tile click-throughs */
html { scroll-behavior: smooth; }

/* ---- Top navigation progress bar (driven by JS) ---- */
.mhk-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--saffron), var(--gold), var(--saffron));
  background-size: 200% 100%;
  z-index: 99999;
  box-shadow: 0 0 14px rgba(255, 153, 51, 0.7);
  transition: width 280ms var(--ease-out), opacity 240ms var(--ease-out);
  animation: mhk-progress-shimmer 1.4s linear infinite;
  border-radius: 0 2px 2px 0;
}
@keyframes mhk-progress-shimmer {
  to { background-position: 200% 0; }
}

/* ---- Scroll-reveal for content below the fold ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Floating labels on form inputs ---- */
.field {
  position: relative;
  display: block;
  margin: 12px 0;
}
.field input,
.field select {
  width: 100%;
  padding: 18px 12px 8px;
}
.field > .lab {
  position: absolute;
  left: 12px;
  top: 14px;
  color: var(--ink-dim);
  font-size: 13px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 200ms var(--ease-out), color 200ms var(--ease-out);
}
.field input:focus + .lab,
.field input:not(:placeholder-shown) + .lab,
.field select:focus + .lab,
.field select:valid + .lab {
  transform: translateY(-9px) scale(0.78);
  color: var(--saffron);
}

/* Hint: any plain <label> wrapping an input gets a soft caption color */
label { color: var(--ink-dim); font-size: 12px; letter-spacing: 0.02em; }
label input, label select { display: block; margin-top: 4px; }

/* ---- <details> nav-group: smooth slide on expand/collapse ---- */
details > summary { transition: color var(--dur) var(--ease-out); }
details[open] > *:not(summary) {
  animation: details-slide 260ms var(--ease-out);
  transform-origin: top;
}
@keyframes details-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Toast container ---- */
.mhk-toast-stack {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.mhk-toast {
  pointer-events: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--saffron);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4);
  min-width: 240px;
  max-width: 360px;
  font-size: 13.5px;
  transform: translateX(120%);
  opacity: 0;
  animation:
    toast-in   320ms var(--ease-spring) forwards,
    toast-out  320ms var(--ease-out) forwards 4.6s;
}
.mhk-toast.ok    { border-left-color: var(--green); }
.mhk-toast.err   { border-left-color: var(--red); }
@keyframes toast-in  { to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateX(120%); opacity: 0; } }
body.theme-light .mhk-toast { background: #fff; box-shadow: 0 18px 40px -16px rgba(120, 70, 20, 0.25); }

/* ---- Skeleton shimmer for loading rows ---- */
.skeleton {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--saffron) 14%, transparent), transparent),
    var(--bg-3);
  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -150% 0, 0 0;
  animation: skel 1.6s linear infinite;
  border-radius: 6px;
  color: transparent !important;
}
@keyframes skel { to { background-position: 250% 0, 0 0; } }

/* ---- Brand pulse in sidebar (very subtle) ---- */
.sidebar .brand {
  position: relative;
}
.sidebar .brand::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--saffron), transparent);
  animation: brand-glow 4s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes brand-glow {
  0%, 100% { opacity: 0.25; transform: scaleX(0.6); }
  50%      { opacity: 0.85; transform: scaleX(1); }
}

/* ---- Form submit success flash (added by JS) ---- */
.flash-ok {
  animation: flash-ok 700ms var(--ease-out);
}
@keyframes flash-ok {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.0); }
  40%  { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.0); }
}

/* ---- Image hover zoom (banners) ---- */
.temple-banner, .temple-strip {
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.temple-banner:hover, .temple-strip:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Temple-architecture accents — Mahakaleshwar visual cues
   ============================================================ */

/* Saffron filigree at top of every .card / .tile / .public-card / table — like the
   gold band that runs along temple plinths. */
.card::before,
.public-card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background:
    radial-gradient(circle at center, var(--saffron) 0, transparent 70%),
    linear-gradient(90deg, transparent, var(--saffron) 40%, var(--gold) 50%, var(--saffron) 60%, transparent);
  background-size: 18px 100%, 100% 100%;
  opacity: 0.55;
  border-radius: 0 0 2px 2px;
}
.card { position: relative; }
.public-card { position: relative; }

/* Tables get a saffron rule above the header row */
table {
  position: relative;
}
table::before {
  content: "";
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--saffron), var(--gold), var(--saffron), transparent);
  opacity: 0.6;
  border-radius: 2px;
  z-index: 2;
}

/* Mandala divider — drop in via <div class="mandala-divider"></div> */
.mandala-divider {
  position: relative;
  height: 28px;
  margin: 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mandala-divider::before,
.mandala-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--saffron), transparent);
  opacity: 0.6;
}
.mandala-divider::before { margin-right: 12px; }
.mandala-divider::after  { margin-left: 12px; }
.mandala-divider .glyph {
  font-size: 16px;
  color: var(--saffron);
  letter-spacing: 0.6em;
  filter: drop-shadow(0 0 6px rgba(255, 153, 51, 0.45));
  animation: glyph-glow 4s ease-in-out infinite alternate;
}
@keyframes glyph-glow {
  0%   { opacity: 0.6; }
  100% { opacity: 1;   }
}

/* ॐ ambient accent — floats in the corner of dashboards / pages with body content */
main h1::before {
  content: "ॐ";
  font-family: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
  position: absolute;
  right: 0;
  top: -6px;
  font-size: 38px;
  color: var(--saffron);
  opacity: 0.18;
  letter-spacing: 0;
  filter: drop-shadow(0 0 14px rgba(255, 153, 51, 0.5));
  pointer-events: none;
  animation: om-pulse 6s ease-in-out infinite;
}
@keyframes om-pulse {
  0%, 100% { opacity: 0.14; transform: scale(1); }
  50%      { opacity: 0.28; transform: scale(1.04); }
}

/* Sidebar foot blessing — small Sanskrit dedication */
.sidebar-foot::after {
  content: "🔱 जय श्री महाकाल 🔱";
  display: block;
  font-family: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--saffron);
  opacity: 0.7;
}

/* Lotus markers on <ol>/<ul> bullets when inside .card */
.card ul, .card ol {
  list-style: none;
  padding-left: 22px;
}
.card ul li, .card ol li {
  position: relative;
  padding-left: 4px;
}
.card ul li::before, .card ol li::before {
  content: "🪷";
  position: absolute;
  left: -22px;
  font-size: 12px;
  filter: saturate(1.3);
}

/* Public footer blessing on every page */
.shell::after,
.public-shell::after {
  content: "ॐ नमः शिवाय  ·  जय श्री महाकाल  ·  हर हर महादेव";
  display: block;
  font-family: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--saffron);
  opacity: 0.4;
  pointer-events: none;
  z-index: 5;
  text-align: center;
  width: max-content;
  max-width: 90vw;
}

@media (max-width: 640px) {
  .shell::after, .public-shell::after { font-size: 9px; letter-spacing: 0.08em; }
  main h1::before { font-size: 26px; top: -4px; }
}

/* ---- Reduce motion override (must remain last so it wins) ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}