/* =====================================================================
   Soft Navy — motion (view transitions, entrance, feedback)
   Part of the Soft Navy design kit (from the IAU class grouping site).
   Load order: tokens.css → components.css → motion.css
   ===================================================================== */

/* =====================================================================
   Motion
   - Page and tab changes use cross-document View Transitions: the page
     cross-fades while the dock pill, the workspace tab pill and the
     panel switch slide to their new position.
   - Content enters with a short staggered rise; numbers count up;
     bars fill; flash messages slide in and dismiss themselves.
   ===================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

.topbar { view-transition-name: topbar; }
.dock { view-transition-name: dock; }
.dock a.on { view-transition-name: dock-pill; }
.tabs a.on { view-transition-name: tab-pill; }
.seg.light a.on { view-transition-name: seg-pill; }
.hero { view-transition-name: hero; }
::view-transition-group(dock-pill),
::view-transition-group(tab-pill),
::view-transition-group(seg-pill),
::view-transition-group(hero) { animation-duration: .38s; animation-timing-function: cubic-bezier(.3, .8, .2, 1); }
::view-transition-old(dock-pill), ::view-transition-new(dock-pill),
::view-transition-old(tab-pill), ::view-transition-new(tab-pill),
::view-transition-old(seg-pill), ::view-transition-new(seg-pill) { height: 100%; animation-duration: .38s; }
::view-transition-group(topbar), ::view-transition-group(dock) { animation: none; }

/* staggered entrance of page content */
.rise { animation: rise .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms + 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.pop { animation: pop .35s cubic-bezier(.2, .9, .3, 1.3) backwards; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

/* hover & press feedback */
a.card, a.tile, a.cta, a.strip, .tile { transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease; }
a.card:hover, a.tile:hover, .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
a.cta:hover, button.cta:hover { transform: translateY(-2px); }
a.strip:hover { transform: translateY(-2px); }
.btn:active, .circle:active, .cta:active, .go:active, .dock a:active { transform: scale(.96); }
.quick a .q { transition: background .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.4), color .2s ease; }
.quick a:hover .q { transform: translateY(-4px) scale(1.05); }
.rows li { transition: background .2s ease; border-radius: 12px; }
.task { transition: transform .2s ease, box-shadow .2s ease; }
.task:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 26, 48, .08); }
.tabs a, .seg a, .dock a { transition: background .2s ease, color .2s ease, transform .15s ease; }

/* decorative drift of the big faded icons and glow */
.hero .hero-art, .card-navy .art, .tile .art, .auth-side .art { animation: drift 6s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-10px, -8px) rotate(-4deg); } }
.hero::after, .card-navy::after, .auth-side::after { animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .7; } to { opacity: 1; transform: scale(1.12); } }

/* bars fill in (RTL: grow from the right) */
.progress > i, .tile .meter i { transform-origin: right center; animation: fill 1s cubic-bezier(.2, .7, .2, 1) .25s both; }
@keyframes fill { from { transform: scaleX(0); } }

/* notification badges breathe */
.circle .dot, .dock a .dot { animation: ping 2.4s ease-in-out infinite; }
@keyframes ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* flash messages */
.flash div { animation: flash-in .45s cubic-bezier(.2, .9, .3, 1.2) backwards; transition: opacity .4s ease, transform .4s ease, max-height .4s ease, margin .4s ease, padding .4s ease; max-height: 200px; overflow: hidden; }
.flash div.out { opacity: 0; transform: translateY(-8px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } }

/* chat bubbles */
.msg.new { animation: msg-in .35s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.msg.new.mine { transform-origin: right bottom; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.chat-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chat-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(31, 138, 99, .5); animation: live 2s infinite; }
.chat-status.off i { background: var(--muted); animation: none; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(31, 138, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 138, 99, 0); } }

/* submit buttons show a spinner while the request is in flight */
.is-loading { pointer-events: none; opacity: .8; }
.is-loading::after {
  content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite; margin-inline-start: 4px;
}
.cta.is-loading::after, .circle.is-loading::after { display: none; }
.cta.is-loading .go > *, .circle.is-loading > * { opacity: 0; }
.cta.is-loading .go, .circle.is-loading { position: relative; }
.cta.is-loading .go::after, .circle.is-loading::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

details[open] > form, details[open] > div { animation: rise .35s cubic-bezier(.2, .7, .2, 1) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}

/* =====================================================================
   Ambient life (project): slow, low-contrast movement that makes the page feel awake without
   asking for attention. Everything here is transform/opacity only (cheap), loops on 12–30 s,
   and switches off with prefers-reduced-motion (the rule above).
   ===================================================================== */

/* Two soft light pools drifting behind the whole page. */
body::before {
  content: ""; position: fixed; inset: -20vh -20vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 82% 8%, var(--ambient-a), transparent 70%),
    radial-gradient(30vmax 26vmax at 12% 92%, var(--ambient-b), transparent 70%);
  animation: ambient 15s ease-in-out infinite alternate;
}
@keyframes ambient {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-6vw, 4vh, 0) rotate(8deg); }
}

/* A warm (gold, from the logo) light slowly circling inside the navy hero, opposite the cool glow. */
.hero::before {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -150px; top: -230px; pointer-events: none;
  background: radial-gradient(circle, rgba(227, 163, 59, .17), transparent 65%);
  animation: aurora 9s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, 40px) scale(1.12); }
  100% { transform: translate(-140px, 10px) scale(.95); }
}

/* «دسترسی سریع» icons float a few pixels, out of step with each other. */
.quick-tiles .hq { animation: bob 3.6s ease-in-out infinite; }
.quick-tiles a:nth-child(2) .hq { animation-delay: -.9s; }
.quick-tiles a:nth-child(3) .hq { animation-delay: -1.8s; }
.quick-tiles a:nth-child(4) .hq { animation-delay: -2.7s; }
.quick-tiles a:nth-child(5) .hq { animation-delay: -.45s; }
.quick-tiles a:nth-child(6) .hq { animation-delay: -1.35s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* The logo in the top bar: the open book "breathes" very slightly. */
.topbar .brandmark .logo-mark { animation: breathe 4.5s ease-in-out infinite; }

/* A slow shine passes over gold buttons now and then. */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(120%); animation: shine 4.5s ease-in-out 1.2s infinite;
}
@keyframes shine { 0%, 80% { transform: translateX(120%); } 100% { transform: translateX(-120%); } }

/* Theme switch: the new theme spreads from the toggle as a circle (softnavy.js sets --tx/--ty).
   Named elements are folded into the root snapshot so the whole page reveals at once. */
.theme-swap :is(.topbar, .dock, .dock a.on, .tabs a.on, .seg.light a.on, .hero) { view-transition-name: none !important; }
:root.theme-swap::view-transition-old(root) { animation: none; }
:root.theme-swap::view-transition-new(root) { animation: theme-reveal .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--tx, 50%) var(--ty, 0)); }
  to { clip-path: circle(150vmax at var(--tx, 50%) var(--ty, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .hero::before, .quick-tiles .hq, .topbar .brandmark .logo-mark, .btn-gold::after { animation: none !important; }
}