/* IPN TV motion kit — vanilla ports of animate-ui.com patterns (Tabs highlight, Switch, Checkbox, Radio group,
   Sliding number, Toast, Progress, Accordion, animated icons). Exponential ease-out, no bounce. */

/* ---- Highlight: a pill or underline that glides to the hovered / active item (animate-ui "Tabs", "Highlight") ---- */
[data-highlight] { position: relative; isolation: isolate; }
.mk-hl { position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .2s; will-change: transform, width; }
.mk-hl.is-on { opacity: 1; }
.mk-hl--line { height: 3px !important; top: auto !important; bottom: 0; border-radius: 3px 3px 0 0; background: var(--red); }

/* ---- Switch (animate-ui Switch: thumb stretches while pressed) ---- */
.mk-switch { position: relative; display: inline-flex; flex: none; width: 44px; height: 26px; }
.mk-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mk-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background-color .3s var(--ease); }
.mk-switch__thumb { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(14,23,38,.3);
  transition: inset-inline-start .4s var(--ease), width .25s var(--ease); }
.mk-switch input:active ~ .mk-switch__thumb { width: 26px; }
.mk-switch input:checked ~ .mk-switch__track { background: var(--red); }
.mk-switch input:checked ~ .mk-switch__thumb { inset-inline-start: calc(100% - 23px); }
.mk-switch input:checked:active ~ .mk-switch__thumb { inset-inline-start: calc(100% - 29px); }
.mk-switch input:focus-visible ~ .mk-switch__track { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* ---- Checkbox (animate-ui Checkbox: the tick draws itself) ---- */
.mk-check { position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; }
.mk-check input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mk-check__box { position: absolute; inset: 0; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--paper); transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease); }
.mk-check svg { position: relative; width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ease) .05s; pointer-events: none; }
.mk-check input:checked ~ .mk-check__box { background: var(--red); border-color: var(--red); }
.mk-check input:checked ~ svg { stroke-dashoffset: 0; }
.mk-check input:active ~ .mk-check__box { transform: scale(.9); }
.mk-check input:focus-visible ~ .mk-check__box { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* ---- Sliding number (animate-ui Sliding Number: each digit rolls into place) ---- */
.mk-num { display: inline-flex; direction: ltr; font-variant-numeric: tabular-nums; overflow: hidden; line-height: 1; vertical-align: bottom; }
.mk-num__d { display: inline-block; height: 1em; overflow: hidden; }
.mk-num__col { display: flex; flex-direction: column; transition: transform 1.2s var(--ease); }
.mk-num__col span { height: 1em; line-height: 1; }

/* ---- Toast (animate-ui Toast) ---- */
.mk-toasts { position: fixed; z-index: 120; inset-inline-end: 20px; bottom: max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.mk-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 12px; width: min(380px, calc(100vw - 40px)); padding: 14px 40px 16px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-2); overflow: hidden;
  transform: translateY(16px) scale(.98); opacity: 0; transition: transform .5s var(--ease), opacity .3s var(--ease); }
html[dir="rtl"] .mk-toast { padding: 14px 16px 16px 40px; }
.mk-toast.is-on { transform: none; opacity: 1; }
.mk-toast.is-out { transform: translateY(8px) scale(.98); opacity: 0; }
.mk-toast > .ic { margin-top: 2px; width: 20px; height: 20px; }
.mk-toast--success > .ic { color: #4ADE80; } .mk-toast--error > .ic { color: #FF6576; } .mk-toast--info > .ic { color: #8DB4FF; }
.mk-toast__msg { flex: 1; font-weight: 500; font-size: 14.5px; line-height: 1.45; }
.mk-toast__x { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: inherit; opacity: .6; cursor: pointer; }
.mk-toast__x:hover { opacity: 1; background: rgba(255,255,255,.1); }
.mk-toast__a { color: #fff; font-weight: 700; text-decoration: underline; }
.mk-toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); transform-origin: left; animation: mk-drain var(--dur, 5s) linear forwards; }
html[dir="rtl"] .mk-toast__bar { transform-origin: right; }
.mk-toast:hover .mk-toast__bar { animation-play-state: paused; }
@keyframes mk-drain { to { transform: scaleX(0); } }

/* ---- Progress (animate-ui Progress) ---- */
.mk-progress { position: fixed; z-index: 130; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.mk-progress span { display: block; height: 100%; width: 0; background: var(--red); transition: width 8s cubic-bezier(.1, .7, .1, 1); }
.mk-progress.is-run span { width: 88%; }
.mk-progress.is-done span { width: 100%; transition-duration: .3s; }

/* ---- Accordion (animate-ui Accordion): details with an animated height, chevron turns ---- */
.mk-acc summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mk-acc summary::-webkit-details-marker { display: none; }
.mk-acc summary .ic { transition: transform .4s var(--ease); }
.mk-acc[open] summary .ic { transform: rotate(180deg); }
.mk-acc__body { overflow: hidden; }

/* ---- Animated icons (animate-ui Icons: move when their control is hovered) ---- */
@keyframes ai-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes ai-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes ai-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
[data-ai="bell"] .ic, [data-ai="spin"] .ic, [data-ai="pop"] .ic, [data-ai="tilt"] .ic { transform-origin: 50% 20%; }
[data-ai="spin"] .ic, [data-ai="pop"] .ic, [data-ai="tilt"] .ic { transform-origin: 50% 50%; }
[data-ai="bell"]:hover .ic, [data-ai="bell"]:focus-visible .ic { animation: ai-ring .9s var(--ease); }
[data-ai="spin"]:hover .ic, [data-ai="spin"]:focus-visible .ic { animation: ai-spin .8s var(--ease); }
[data-ai="pop"]:hover .ic, [data-ai="pop"]:focus-visible .ic { animation: ai-pop .45s var(--ease); }
[data-ai="tilt"]:hover .ic, [data-ai="tilt"]:focus-visible .ic { animation: ai-tilt .5s var(--ease); }
.is-busy [data-ai="spin"] .ic, [data-ai="spin"].is-busy .ic { animation: ai-spin .9s linear infinite; }

/* ---- Reveal on scroll: content is visible by default; motion.js adds the entrance only when JS runs ---- */
.mk-js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.mk-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Rotating text (animate-ui Rotating Text) ---- */
.mk-rot { display: inline-grid; vertical-align: bottom; }
.mk-rot > span { grid-area: 1 / 1; transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); }
.mk-rot > span:not(.is-on) { opacity: 0; transform: translateY(45%); filter: blur(5px); }
.mk-rot > span.is-out { transform: translateY(-45%); }

/* ---- Sliding number used for live values (countdowns) ---- */
.mk-num__col--fast { transition-duration: .55s; }

/* ---- Tilt + spotlight (animate-ui Tilt / Shine) ---- */
[data-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
[data-tilt]:hover { transition-duration: .15s; }
[data-magnetic] { transition: translate .4s var(--ease); }

/* ---- Tooltip (animate-ui Tooltip) ---- */
.mk-tip { position: fixed; z-index: 140; max-width: 260px; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 600; line-height: 1.4; pointer-events: none; opacity: 0; transform: translateY(-3px) scale(.96); transition: opacity .18s var(--ease), transform .25s var(--ease); }
.mk-tip.is-on { opacity: 1; transform: none; }

/* ---- Alert dialog (animate-ui Alert Dialog) ---- */
.mk-dlg { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: min(420px, calc(100vw - 32px)); }
.mk-dlg::backdrop { background: rgba(14, 23, 38, .45); opacity: 0; transition: opacity .25s var(--ease); }
.mk-dlg.is-in::backdrop { opacity: 1; }
.mk-dlg__box { padding: 22px; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-2); transform: scale(.95) translateY(10px); opacity: 0; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.mk-dlg.is-in .mk-dlg__box { transform: none; opacity: 1; }
.mk-dlg__title { font-size: 17px; font-weight: 700; line-height: 1.45; }
.mk-dlg__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---- Copy button state ---- */
[data-copy-btn].is-copied { color: #15803D; border-color: currentColor; }

/* ---- Theme toggler: circular reveal (View Transitions) ---- */
.mk-vt::view-transition-old(root), .mk-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.mk-vt::view-transition-new(root) { animation: mk-reveal .7s var(--ease) both; }
@keyframes mk-reveal { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 0)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 0)); } }

/* ---- Page transitions between pages (animate-ui Page Transition), same-origin only ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mk-vt-out .18s var(--ease-in-out) both; }
::view-transition-new(root) { animation: mk-vt-in .38s var(--ease) both; }
@keyframes mk-vt-out { to { opacity: 0; } }
@keyframes mk-vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .mk-rot > span:not(.is-on) { display: none; }
  [data-tilt] { transform: none; }
}