/* ============================================================
   Virat Public School — balanced reactive motion
   ============================================================ */

:root {
  --motion-ease: cubic-bezier(.2, .72, .2, 1);
  --motion-spring: cubic-bezier(.16, 1, .3, 1);
  --scroll-progress: 0;
  --ambient-x: 0px;
  --ambient-y: 0px;
}

html, body { overflow-x: clip; }

/* Page arrival */
body { opacity: 1; transform: none; }
html.motion-ready body.motion-page-entered {
  animation: motion-page-arrive .46s var(--motion-spring) both;
}
@keyframes motion-page-arrive {
  from { opacity: .9; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}

/* Scroll progress is thin enough to stay quiet but gives an app-like response. */
.motion-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--scroll-progress));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--pink-500), var(--sky-500));
  box-shadow: 0 2px 12px rgba(255,61,128,.32);
  transition: transform .08s linear;
}

/* Scroll reveal */
.motion-ready .motion-reveal {
  transition:
    opacity .62s var(--motion-ease) var(--motion-delay, 0ms),
    transform .68s var(--motion-spring) var(--motion-delay, 0ms),
    filter .58s ease var(--motion-delay, 0ms),
    box-shadow .25s var(--motion-ease),
    border-color .2s ease;
}
.motion-ready .motion-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px) scale(.982);
  filter: blur(5px);
}
.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
}

/* Pointer-reactive glass lighting */
.motion-reactive {
  position: relative;
  isolation: isolate;
  will-change: transform;
  transform-style: preserve-3d;
}
.motion-reactive > *:not(.motion-pointer-glow):not(.motion-ripple):not(.motion-success-spark) {
  position: relative;
  z-index: 1;
}
.motion-pointer-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle 180px at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, transparent 72%);
  transition: opacity .28s ease;
}
.motion-reactive.is-reacting .motion-pointer-glow { opacity: .72; }

/* Tactile ripple for every app action */
.btn,
.quick-app a,
.dock-item,
.nav-item,
.filter-btn { position: relative; overflow: hidden; }
.motion-ripple {
  position: absolute !important;
  z-index: 4 !important;
  pointer-events: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .13;
  transform: scale(0);
  animation: motion-ripple .62s ease-out forwards;
}
@keyframes motion-ripple {
  55% { opacity: .1; }
  to { opacity: 0; transform: scale(1); }
}

/* Header responds as the document moves under it. */
.app-topbar,
.topbar {
  transition: box-shadow .28s ease, background-color .28s ease, border-color .28s ease, transform .28s var(--motion-spring);
}
.app-topbar.is-scrolled,
.topbar.is-scrolled {
  background-color: rgba(255,255,255,.79);
  border-color: rgba(255,255,255,.98);
  box-shadow: 0 18px 48px rgba(58,38,68,.15), inset 0 1px 0 rgba(255,255,255,.96);
}

/* Mobile dock gently gets out of the way while reading, without disappearing. */
.app-dock-wrap {
  transition: transform .3s var(--motion-spring), opacity .25s ease;
}
body.is-scrolling-down .app-dock-wrap {
  transform: translateY(7px) scale(.975);
  opacity: .82;
}
body:not(.is-scrolling-down) .app-dock-wrap { transform: translateY(0) scale(1); }

/* Ambient blobs follow the pointer by a few pixels on desktop. */
.float-blob {
  translate: var(--ambient-x) var(--ambient-y);
  transition: translate .55s var(--motion-ease);
}
.float-blob.sky { translate: calc(0px - var(--ambient-x)) calc(0px - var(--ambient-y)); }

/* Icon and badge micro-interactions */
.quick-app .icon,
.app-card .head .icon,
.quick-action .qa-icon,
.sidebar-brand .logo,
.school-brand-mark {
  transition: transform .34s var(--motion-spring), box-shadow .3s ease, filter .3s ease;
}
.quick-app a:hover .icon,
.app-card:hover .head .icon,
.quick-action:hover .qa-icon {
  transform: translateY(-2px) rotate(-4deg) scale(1.08);
  filter: saturate(1.14);
  box-shadow: 0 9px 22px rgba(255,61,128,.15), inset 0 1px 0 rgba(255,255,255,.95);
}
.school-brand:hover .school-brand-mark,
.sidebar-brand:hover .logo { transform: rotate(-5deg) scale(1.06); }

.pill,
.tag,
.chip,
.app-pill,
.section-eyebrow {
  transition: transform .24s var(--motion-spring), box-shadow .24s ease, background-color .2s;
}
a:hover .pill,
a:hover .tag,
.app-pill:hover,
.section-eyebrow:hover { transform: translateY(-1px) scale(1.025); }

/* Active navigation feels selected instead of simply recoloured. */
.dock-item.active,
.nav-item.active {
  animation: motion-nav-settle .38s var(--motion-spring) both;
}
@keyframes motion-nav-settle {
  from { transform: scale(.94); opacity: .7; }
  to { transform: scale(1); opacity: 1; }
}

/* Count-up numbers avoid width jumps. */
.value,
.stat-num,
.stat-tile .value {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}

/* Form success gets one restrained celebratory pulse. */
.form-success,
.form-status { position: relative; }
.motion-success-pop { animation: motion-success-pop .58s var(--motion-spring); }
@keyframes motion-success-pop {
  0% { transform: scale(.97); }
  55% { transform: scale(1.018); box-shadow: 0 12px 32px rgba(16,185,129,.14); }
  100% { transform: scale(1); }
}
.motion-success-spark {
  --spark-distance: 34px;
  position: absolute !important;
  z-index: 5 !important;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-400), var(--sky-400));
  animation: motion-spark .75s ease-out var(--spark-delay, 0ms) both;
}
@keyframes motion-spark {
  from { opacity: .9; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(0) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(var(--spark-distance)) scale(.2); }
}

/* Modal and drawer entrances */
.modal-backdrop.open .modal { animation: motion-modal-in .34s var(--motion-spring) both; }
@keyframes motion-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.sidebar { transition: transform .32s var(--motion-spring), box-shadow .3s ease; }
.sidebar-scrim.open { animation: motion-scrim-in .25s ease both; }
@keyframes motion-scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* Loading placeholders breathe instead of appearing frozen. */
.loading-state,
.empty:has(+ .loading-state) {
  background-image: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.52) 42%, transparent 60%);
  background-size: 240% 100%;
  animation: motion-shimmer 2.1s ease-in-out infinite;
}
@keyframes motion-shimmer { to { background-position: -180% 0; } }

@media (max-width: 700px) {
  .motion-ready .motion-reveal:not(.is-visible) {
    transform: translateY(15px) scale(.988);
    filter: blur(3px);
  }
  .motion-reactive { transform-style: flat; }
  .motion-pointer-glow { display: none; }
  body.is-scrolling-down .app-dock-wrap { transform: translateY(5px) scale(.985); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  body { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .motion-ready .motion-reveal,
  .motion-ready .motion-reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .motion-scroll-progress,
  .motion-pointer-glow,
  .motion-ripple,
  .motion-success-spark { display: none !important; }
  .float-blob { translate: 0 0 !important; }
}

@media print {
  body { opacity: 1 !important; transform: none !important; }
  .motion-scroll-progress,
  .motion-pointer-glow,
  .motion-ripple,
  .motion-success-spark { display: none !important; }
  .motion-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}