/* Kotana Hub — motion layer. Loaded after site.css on the public pages, together with assets/js/motion.js.
   Everything moves with transform / opacity only (cheap on phones) and switches off for prefers-reduced-motion. */

:root {
  --m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-blob-1: color-mix(in oklch, #9FBC9F 45%, transparent);
  --m-blob-2: color-mix(in oklch, oklch(78% 0.11 85) 30%, transparent);
  --m-blob-3: color-mix(in oklch, oklch(58% 0.085 48) 22%, transparent);
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Reveal on scroll / when a view opens (classes set by motion.js) ---- */
  /* blocks are lifted into place and land with a little bounce, like a rep */
  .m-rv { opacity: 0; translate: 0 36px; scale: 1 .94; transform-origin: 50% 100%; }
  .m-rv.m-in {
    opacity: 1; translate: 0 0; scale: 1 1;
    transition: opacity .5s var(--m-ease-out), translate .85s cubic-bezier(.3, 1.35, .5, 1), scale .85s cubic-bezier(.3, 1.6, .5, 1), transform .35s var(--m-ease-spring), box-shadow .35s ease;
  }
  /* small items inside a revealed card follow one after another (--i set by motion.js) */
  .m-rv .m-kid { opacity: 0; translate: -10px 0; }
  .m-rv.m-in .m-kid { opacity: 1; translate: 0 0; transition: opacity .5s var(--m-ease-out), translate .6s var(--m-ease-out); transition-delay: calc(var(--i, 0) * 55ms + 180ms); }
  /* progress bars fill up when their card appears */
  .m-rv .bar > span { transform: scaleX(0); transform-origin: left; }
  .m-rv.m-in .bar > span { transform: scaleX(1); transition: transform 1.1s var(--m-ease-out) .35s; }

  /* ---- Headline words rise in ---- */
  .m-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  .m-w > span { display: inline-block; translate: 0 105%; animation: m-word .9s var(--m-ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  @keyframes m-word { to { translate: 0 0; } }

  /* ---- Things that pop in when they are shown ---- */
  .success:not([hidden]), .ok-box, .closed-card:not([hidden]) { animation: m-pop .6s var(--m-ease-spring) both; }
  @keyframes m-pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
  .tip.open .tip-body { animation: m-drop .45s var(--m-ease-out) both; transform-origin: top; }
  @keyframes m-drop { from { opacity: 0; transform: translateY(-8px) scaleY(.96); } to { opacity: 1; transform: none; } }
  .spinner { animation-timing-function: cubic-bezier(.6, .2, .4, .8); }

  /* ---- Cart badge bump (class added by motion.js when the count changes) ---- */
  .m-bump { animation: m-bump .55s var(--m-ease-spring); }
  @keyframes m-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }

  /* ---- Buttons and choices ---- */
  .btn, .pill, .pass, .tabs a, .link-btn, .stepper button { transition: transform .25s var(--m-ease-spring), filter .2s ease, background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
  .btn:active:not([disabled]), .pill:active, .pass:active, .stepper button:active:not(:disabled) { transform: scale(.96); }
  .pass.sel { animation: m-select .4s var(--m-ease-spring); }
  @keyframes m-select { 40% { transform: scale(1.03); } }

  /* ---- Topbar: stays at hand, slides away while you read down ---- */
  .topbar { position: sticky; top: 0; z-index: 30; transition: transform .45s var(--m-ease-out), background-color .3s ease, box-shadow .3s ease; }
  .m-scrolled .topbar { background: color-mix(in oklch, var(--linen, #F4F0EB) 86%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 var(--border-default, #D9CDBF); }
  .m-hide-top .topbar { transform: translateY(-105%); }
  .nav a { position: relative; }
  .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--brick); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--m-ease-out); }
  .nav a.is-active::after { transform: scaleX(1); }
  .nav .cart-link::after { display: none; }

  /* ---- Soft colour drifting behind the page (element added by motion.js) ---- */
  .m-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .m-ambient i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
  .m-ambient i:nth-child(1) { top: -30vmax; left: -25vmax; background: radial-gradient(closest-side, var(--m-blob-1), transparent); animation: m-drift1 26s ease-in-out infinite alternate; }
  .m-ambient i:nth-child(2) { top: 20vh; right: -35vmax; background: radial-gradient(closest-side, var(--m-blob-2), transparent); animation: m-drift2 32s ease-in-out infinite alternate; }
  .m-ambient i:nth-child(3) { bottom: -40vmax; left: 10vw; background: radial-gradient(closest-side, var(--m-blob-3), transparent); animation: m-drift3 38s ease-in-out infinite alternate; }
  @keyframes m-drift1 { to { transform: translate(18vw, 22vh) scale(1.15); } }
  @keyframes m-drift2 { to { transform: translate(-22vw, -12vh) scale(.9); } }
  @keyframes m-drift3 { to { transform: translate(14vw, -18vh) scale(1.1); } }
}

/* ---- Hover depth: only for a real mouse, never on touch ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .info-card, .class-card, .p-card, .cert, .tip, .w-row, .cart-row .w-thumb, .who img { transition: transform .4s var(--m-ease-spring), box-shadow .4s ease, border-color .25s ease; }
  .info-card:hover, .p-card:hover, .class-card:not(.is-closed):hover { transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgba(47, 75, 48, .45); }
  .cert:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(47, 75, 48, .4); }
  .tip:hover { transform: translateY(-3px); }
  a.w-row:hover { transform: translateX(6px); }
  .info-card .ico svg { transition: transform .45s var(--m-ease-spring); }
  .info-card:hover .ico svg { transform: rotate(-12deg) scale(1.25); }
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .btn:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(47, 75, 48, .6); }
  .tip-head:hover .tip-chev { transform: scale(1.15); }
  .tip.open .tip-head:hover .tip-chev { transform: rotate(180deg) scale(1.15); }
}

@media print {
  .m-rv, .m-rv .m-kid { opacity: 1 !important; translate: none !important; scale: none !important; }
  .m-ambient { display: none !important; }
}