/* ==========================================================================
   Kasiri Academy — Smart loading & transition layer
   Adds: top progress bar, skeleton screens, dialog/drawer motion, reveal-on-scroll,
   image fade-in, layout-stability fallbacks. Pure CSS; JS only toggles classes.
   Motion respects prefers-reduced-motion and is disabled on save-data connections.
   ========================================================================== */
:root {
  --ks-brand-green: #16a34a;
  --ks-brand-green-soft: #dcfce7;
  --ks-brand-ink: #0f172a;
  --ks-ease: cubic-bezier(.22, .61, .36, 1);
  --ks-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ks-shimmer: linear-gradient(100deg, rgba(226, 232, 240, .45) 8%, rgba(248, 250, 252, .95) 26%, rgba(226, 232, 240, .45) 44%);
}

/* ---------- 1. Top progress bar (navigation feedback) ---------- */
.ks-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity .18s var(--ks-ease);
}
.ks-progress.is-active { opacity: 1; }
.ks-progress__bar {
  height: 100%;
  width: 0%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #22c55e, #16a34a 55%, #0ea5e9);
  box-shadow: 0 0 12px rgba(22, 163, 74, .55);
  transition: width .28s var(--ks-ease-out);
}
/* slow trickle while waiting: JS sets --ks-progress */
.ks-progress.is-active .ks-progress__bar { width: var(--ks-progress, 12%); }
.ks-progress.is-done .ks-progress__bar { width: 100%; transition: width .16s ease-out; }

/* ---------- 2. Skeleton screens ---------- */
.ks-skeleton,
.ks-skel-line,
.ks-skel-card,
.ks-skel-media,
.ks-skel-avatar {
  position: relative;
  overflow: hidden;
  background-color: #eef2f6;
  border-radius: 12px;
  isolation: isolate;
}
.ks-skeleton::after,
.ks-skel-line::after,
.ks-skel-card::after,
.ks-skel-media::after,
.ks-skel-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ks-shimmer);
  background-size: 220% 100%;
  animation: ks-shimmer 1.25s linear infinite;
}
@keyframes ks-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
.ks-skel-line { height: 12px; border-radius: 8px; }
.ks-skel-line.is-title { height: 18px; width: 62%; }
.ks-skel-line.is-meta { height: 10px; width: 42%; }
.ks-skel-media { aspect-ratio: 1 / 1; width: 100%; border-radius: 16px; }
.ks-skel-avatar { width: 44px; height: 44px; border-radius: 50%; }
.ks-skel-card {
  padding: 12px;
  display: grid;
  gap: 10px;
  background: #fff;
  border: 1px solid #e8eef4;
  border-radius: 18px;
}
.ks-skel-card > .ks-skeleton { border-radius: 14px; }
.ks-skeleton-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Page-level skeleton shown while an in-app navigation is in flight.
   It mirrors the real page footprint so nothing jumps when content arrives. */
.ks-page-skeleton { display: grid; gap: 18px; padding-block: 8px; }
.ks-page-skeleton__row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ks-page-skeleton__hero { aspect-ratio: 16 / 5; border-radius: 20px; }
@media (max-width: 640px) { .ks-page-skeleton__hero { aspect-ratio: 4 / 3; } }

/* ---------- 3. In-app navigation transition (no jump, keeps height) ---------- */
#main { min-height: 62vh; transition: opacity .22s var(--ks-ease); }
html.ks-nav-out #main { opacity: .55; }
html.ks-nav-enter #main { opacity: 1; animation: ks-enter .34s var(--ks-ease-out) both; }
@keyframes ks-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}
/* When the incoming page is swapped in, animations play once, cheaply. */
.ks-nav-enter .shop59-section,
.ks-nav-enter .ks-section,
.ks-nav-enter .ks-pdp-v54,
.ks-nav-enter .ks-acad-hero { animation: ks-enter .4s var(--ks-ease-out) both; }

/* ---------- 4. Dialog / drawer / sheet motion ---------- */
dialog { scrollbar-width: thin; }
dialog[open] { animation: ks-dialog-in .24s var(--ks-ease-out) both; }
dialog[open]::backdrop { animation: ks-backdrop-in .2s ease-out both; }
dialog.ks-dialog-closing { animation: ks-dialog-out .18s var(--ks-ease) both; }
@keyframes ks-dialog-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes ks-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ks-dialog-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(0, 8px, 0) scale(.99); }
}
/* Sheets/drawers that slide in from the edge keep their own layout, only gain motion. */
#cart-dialog[open], #mobile-menu[open], #filter-dialog[open], #quick-dialog[open], #auth-dialog[open] {
  animation: ks-sheet-in .28s var(--ks-ease-out) both;
}
@keyframes ks-sheet-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 861px) {
  #cart-dialog[open] { animation-name: ks-drawer-in; }
  @keyframes ks-drawer-in {
    from { opacity: 0; transform: translate3d(-28px, 0, 0); }
    to { opacity: 1; transform: none; }
  }
}
/* Buttons inside dialogs confirm the tap instantly. */
dialog button:active, .ks-btn:active, .ks-add-cart:active, [data-add-to-cart]:active { transform: scale(.975); }
dialog button, .ks-btn, [data-add-to-cart] { transition: transform .14s var(--ks-ease), background-color .18s var(--ks-ease), box-shadow .18s var(--ks-ease); }

/* ---------- 5. Buttons in a pending state ---------- */
.is-pending, [aria-busy="true"] {
  position: relative;
  cursor: progress;
}
.is-pending > * { opacity: .45; }
.is-pending::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: ks-spin .7s linear infinite;
}
@keyframes ks-spin { to { transform: rotate(360deg); } }

/* ---------- 6. Reveal on scroll (smart, subtle) ---------- */
.ks-reveal { opacity: 0; transform: translate3d(0, 14px, 0); }
.ks-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ks-ease-out), transform .5s var(--ks-ease-out);
  transition-delay: var(--ks-delay, 0ms);
}
/* Never hide content when JS/IO is unavailable or motion is reduced. */
html:not(.app-ready) .ks-reveal, .ks-reveal.is-static { opacity: 1; transform: none; }

/* ---------- 7. Image loading (no flash, no layout jump) ---------- */
img { background-color: #f4f7fa; }
img.ks-img-pending { opacity: 0; }
img.ks-img-ready { opacity: 1; transition: opacity .32s var(--ks-ease); }
.ks-img-fallback { object-fit: contain; }
picture { display: contents; }

/* ---------- 8. Sticky header micro-interaction ---------- */
.site-header { transition: box-shadow .22s var(--ks-ease), transform .22s var(--ks-ease); }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(15, 23, 42, .09); }
body.ks-scroll-up .site-header.ks-smart-header-v51 { transform: translate3d(0, 0, 0); }

/* ---------- 9. Toasts ---------- */
#app-notifications > * { animation: ks-toast-in .28s var(--ks-ease-out) both; }
@keyframes ks-toast-in {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- 10. Search suggestion panel ---------- */
.search-results, .ks-search-suggest { animation: ks-enter .2s var(--ks-ease-out) both; }

/* ---------- 11. Respect user preferences & slow connections ---------- */
@media (prefers-reduced-motion: reduce) {
  .ks-reveal, .ks-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ks-skeleton::after, .ks-skel-line::after, .ks-skel-card::after, .ks-skel-media::after { animation: none; }
  html.ks-nav-enter #main, dialog[open], .ks-nav-enter .shop59-section { animation: none; }
  * { scroll-behavior: auto !important; }
}
html.ks-lite .ks-skeleton::after,
html.ks-lite .ks-reveal { animation: none; transition: none; opacity: 1; transform: none; }

/* ---------- 12. Accessibility helper used for SEO headings ---------- */
.ks-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   13. Micro-interactions & polish (kept GPU-only: transform/opacity)
   ========================================================================== */
/* Cards lift on hover with a soft, brand-tinted shadow. */
@media (hover: hover) {
  .product-card, .amazing-card, .ks-pdp54-related .product-card {
    transition: transform .22s var(--ks-ease), box-shadow .22s var(--ks-ease);
    will-change: transform;
  }
  .product-card:hover, .amazing-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .10);
  }
  .product-card:active, .amazing-card:active { transform: translate3d(0, -1px, 0) scale(.995); }
}
/* Keyboard users get the same affordance without motion. */
.product-card:focus-within, .amazing-card:focus-within {
  outline: 2px solid var(--ks-brand-green);
  outline-offset: 3px;
  border-radius: 16px;
}
/* Category tiles / story bubbles gently breathe on hover. */
@media (hover: hover) {
  .shop59-stories a span, .shop59-category-panels a { transition: transform .25s var(--ks-ease-out); }
  .shop59-stories a:hover span { transform: translate3d(0, -3px, 0) scale(1.04); }
  .shop59-category-panels a:hover { transform: translate3d(0, -3px, 0); }
}
/* Price / stock counters animate in when data changes (JS toggles .ks-bump). */
.ks-bump { animation: ks-bump .34s var(--ks-ease-out); }
@keyframes ks-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
/* Add-to-cart success pulse on the cart icon. */
.cart-link.ks-cart-pulse svg, .cart-link.ks-cart-pulse .icon {
  animation: ks-cart-pop .5s var(--ks-ease-out);
}
@keyframes ks-cart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.18) rotate(-6deg); }
  70% { transform: scale(.96) rotate(3deg); }
  100% { transform: scale(1); }
}
/* Sticky "bar" elements (mobile bottom nav, sticky add-to-cart) slide in — only
   when they are actually pinned to the viewport, never as inline page content. */
.mobile-bottom-nav { animation: ks-rise .4s var(--ks-ease-out) both; }
/* Desktop safety: the phone dock must never appear as inline content on wide
   screens (it is only meaningful pinned to the bottom on small screens). */
@media (min-width: 861px) {
  nav.mobile-bottom-nav, .mobile-bottom-nav.ks-bnav-v51 { display: none !important; animation: none !important; }
}
@keyframes ks-rise { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
/* Focus ring consistency (visible, never jarring). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ks-brand-green);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Inputs respond to focus without layout shift. */
input, select, textarea { transition: border-color .18s var(--ks-ease), box-shadow .18s var(--ks-ease); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
/* Horizontal rails scroll smoothly and show a fade at the edges (no jump). */
.shop59-product-rail, [data-strip] { scroll-behavior: smooth; scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) {
  .product-card, .amazing-card, .shop59-stories a span { transition: none !important; transform: none !important; }
  .mobile-bottom-nav { animation: none; }
}

/* ---------- 14. Mobile quick-access row: one swipeable row (no jump, no duplicate) ---- */
@media (max-width: 860px) {
  html body .shop59-services,
  html body .shop59-services.ks-quick-open {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  html body .shop59-services::-webkit-scrollbar { display: none; }
  html body .shop59-services > a {
    flex: 0 0 auto !important;
    width: 74px !important;
    scroll-snap-align: start;
  }
  html body .shop59-services > a b { font-size: 11px; line-height: 1.5; }
}

/* ---------- 15. Mobile quick row, final override (loaded last => wins) ---------- */
@media (max-width: 860px) {
  body.ios-store nav.shop59-services {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.ios-store nav.shop59-services > a {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 74px;
  }
  body.ios-store nav.shop59-services::-webkit-scrollbar { display: none; }
}