/* =========================================================================
   ASHES · GLOBAL — one motion system for every page, plus the pages the
   homepage work did not reach: package popup, basket / login drawer,
   category pages, CMS pages.

   Why the hovers felt instant: ashes.css switches every transition off
   (0.01ms) when the visitor's OS asks for reduced motion — Windows does
   this whenever "Animation effects" is off, which is common. Colour,
   glow and fade changes are not motion, so they are restored here for
   everyone; travel stays small, and the endless loops (ticker, floating
   logo) still stop for those visitors.
   ========================================================================= */

html:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);       /* ease-out-quint, Tailwind-style */
  --m-spring: cubic-bezier(.34, 1.36, .64, 1);  /* tiny overshoot for presses */
  --m-fast: .28s;
  --m-med: .45s;
  --m-slow: .7s;
}

/* ------------------------------------------------------------------ motion system */
html body a,
html body button,
html body input,
html body select,
html body textarea,
html body .btn-primary,
html body .btn-secondary,
html body .site-navigation .navigation-list > li > a,
html body .f-shop-tabs a,
html body .f-foot-col a,
html body .f-foot-col button,
html body .f-foot-social a,
html body .a-station,
html body .a-track,
html body .a-roster-item,
html body .a-ctrl,
html body .a-video-play,
html body .popup-close {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity, filter, outline-color !important;
  transition-duration: var(--m-med) !important;
  transition-timing-function: var(--m-ease) !important;
}
html body .store-product,
html body .a-step,
html body .a-tile,
html body .a-beat,
html body .f-help,
html body .f-fact,
html body .a-panel,
html body .a-video-screen {
  transition-property: transform, border-color, box-shadow, background-color, opacity !important;
  transition-duration: .55s !important;
  transition-timing-function: var(--m-ease) !important;
}
html body .store-product .image-link img,
html body .a-video-poster,
html body .a-tile-art img { transition: transform .9s var(--m-ease), filter .9s var(--m-ease) !important; }
html body .site-header { transition: background-color var(--m-slow) var(--m-ease), border-color var(--m-slow) var(--m-ease), backdrop-filter var(--m-slow) var(--m-ease) !important; }

/* presses feel physical: quick down, springy release */
html body .btn-primary:active,
html body .btn-secondary:active,
html body .a-ctrl:active,
html body .f-shop-tabs a:active { transition-duration: .12s !important; transition-timing-function: ease-out !important; }

/* decorative lines and sweeps */
html body .site-navigation .navigation-list > li > a::after { transition: transform var(--m-med) var(--m-ease) !important; }
html body .f-foot-col a::before, html body .f-foot-col button::before { transition: width var(--m-med) var(--m-ease) !important; }
html body .store-product.a-tier::before { transition: height var(--m-med) var(--m-ease), opacity var(--m-med) var(--m-ease) !important; }
html body .btn-primary:hover::after,
html body .btn-secondary:hover::after { animation: fx-sweep .9s var(--m-ease) forwards !important; }

/* focus rings that fade in */
html body :focus { outline-color: transparent; }
html body :focus-visible { outline: 2px solid var(--c-accent) !important; outline-offset: 3px; border-radius: 8px; }

/* smooth anchor jumps between sections */
html { scroll-behavior: smooth !important; }

/* ------------------------------------------------------------------ page + scroll entrances */
@keyframes m-page { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html body .site > *:not(.site-header) { animation: m-page .8s var(--m-ease) both !important; }
html body .site > *:nth-child(3) { animation-delay: .06s !important; }
html body .site > *:nth-child(4) { animation-delay: .12s !important; }

/* .reveal blocks (the older script adds .in) */
html body .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--m-ease), transform .9s var(--m-ease) !important; }
html body .reveal.in { opacity: 1; transform: none; }

/* cards (ashes-motion.js adds .m-pre, then .m-in when in view, staggered via --m-d) */
html body .m-pre { opacity: 0 !important; transform: translateY(26px) scale(.985) !important; }
html body .m-pre.m-in {
  opacity: 1 !important; transform: none !important;
  transition: opacity .8s var(--m-ease) var(--m-d, 0s), transform 1s var(--m-ease) var(--m-d, 0s) !important;
}

/* ------------------------------------------------------------------ popups (package details, basket, login) */
html body .popup {
  background: rgba(4, 4, 4, .72) !important;
  backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  animation: m-fade .4s var(--m-ease) both !important;
}
html body .popup::before, html body .popup::after { display: none !important; }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-pop { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes m-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

html body .popup-content {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line-2) !important;
  border-radius: 22px !important;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .95) !important;
  clip-path: none !important;
}
html body .store-product-popup .popup-content { animation: m-pop .55s var(--m-ease) both !important; overflow: hidden; }
html body .basket-popup .popup-content {
  border-radius: 22px 0 0 22px !important; border-right: 0 !important;
  animation: m-slide .55s var(--m-ease) both !important;
  padding: 36px 32px !important;
}
html body .popup-close {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: var(--c-surface-2) !important; border: 1px solid var(--c-line-2) !important;
  color: var(--c-fg) !important; box-shadow: none !important; filter: none !important;
}
html body .popup-close:hover { background: var(--c-fg) !important; color: #0a0a0a !important; transform: rotate(90deg); }

/* package details */
html body .store-product-popup .store-product { transform: none !important; }
html body .store-product-popup .product-title {
  font: 800 clamp(34px, 4vw, 52px)/0.95 var(--c-display) !important; text-transform: uppercase; color: var(--c-fg) !important;
}
html body .store-product-popup .image { border-radius: 16px !important; }
html body .store-product-popup .price strong { font: 800 48px/1 var(--c-display) !important; color: var(--c-fg) !important; }
html body .store-product-popup .product-actions::after {
  content: "Secure Tebex checkout  ·  Delivered automatically  ·  Cancel any time";
  display: block; margin-top: 14px; font: 500 12.5px/1.5 var(--c-body); color: var(--c-fg-3); text-align: center;
}
html body .store-product-popup .descr h2 {
  font: 800 28px/1 var(--c-display) !important; text-transform: uppercase; color: var(--c-fg) !important; margin: 28px 0 10px !important;
}
html body .store-product-popup .descr p { color: var(--c-fg-2) !important; font-size: 14.5px !important; line-height: 1.75 !important; }
html body .store-product-popup .descr li { color: var(--c-fg-2); }

/* basket drawer / login prompt */
html body .basket-popup .a-title { font-size: clamp(34px, 3.4vw, 46px) !important; max-width: none; }
html body .basket-popup .a-lede { font-size: 14.5px !important; }
html body .basket-popup .field .btn-primary { width: 100%; margin-top: 8px; }
html body .basket-popup table, html body .basket-popup .basket-item, html body .basket-popup li { border-color: var(--c-line) !important; }
html body .basket-popup input { background: var(--c-bg) !important; border: 1px solid var(--c-line-2) !important; color: var(--c-fg) !important; border-radius: 10px !important; }
html body .basket-popup input:focus { border-color: rgba(255, 255, 255, .45) !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06) !important; }

/* ------------------------------------------------------------------ inner pages */
/* category + CMS pages share the homepage's opening rhythm */
html body.page-category .a-page,
html body.page-cms .a-page { padding-top: 150px !important; }
html body.page-category .a-page::before,
html body.page-cms .a-page::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 20% 0%, rgba(255, 255, 255, .04), transparent 70%);
}
html body .no-products {
  padding: 40px; border-radius: 16px; border: 1px dashed var(--c-line-2); color: var(--c-fg-2); text-align: center;
}
html body .a-doc {
  background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-radius: 18px !important;
  padding: 36px 40px !important; line-height: 1.8;
}
html body .a-doc h2, html body .a-doc h3 { margin: 1.6em 0 .5em; font-size: 30px; }
html body .a-doc a { color: var(--c-fg); text-decoration: underline; text-decoration-color: var(--c-accent-line); text-underline-offset: 3px; }
html body .a-doc a:hover { text-decoration-color: var(--c-accent); }
html body .a-doc strong { color: var(--c-fg); }

/* Tebex's own toast */
html body .toast, html body [class*="toast"] {
  background: var(--c-surface-2) !important; color: var(--c-fg) !important;
  border: 1px solid var(--c-line-2) !important; border-radius: 12px !important; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9) !important;
}

/* mobile menu drawer */
@media (max-width: 1100px) {
  html body .site-navigation {
    background: rgba(8, 8, 8, .97) !important; backdrop-filter: blur(16px) !important;
  }
  html body .site-navigation .navigation-list > li > a { font-size: 16px !important; padding: 14px 6px !important; }
  html body .site-navigation .navigation-list > li > a::after { left: 6px; right: auto; width: 24px; bottom: 6px; transform-origin: left; }
  html body .basket-popup .popup-content { border-radius: 0 !important; padding: 28px 22px !important; }
}

/* ------------------------------------------------------------------ reduced motion: keep fades, drop loops and travel */
@media (prefers-reduced-motion: reduce) {
  html body .f-ticker-track,
  html body .f-hero .a-hero-logo { animation: none !important; }
  html body .m-pre { transform: none !important; }
  html body .store-product:hover,
  html body .a-step:hover,
  html body .a-tile:hover,
  html body .a-beat:hover,
  html body .f-help:hover { transform: translateY(-2px) !important; }
}

/* popup polish after preview */
html body .popup { background: rgba(4, 4, 4, .86) !important; }
html body .popup-close { opacity: 1 !important; }
html body .store-product-popup .popup-content .product-title,
html body .store-product-popup .popup-content h1.product-title {
  font: 800 clamp(34px, 4vw, 52px)/0.95 var(--c-display) !important; text-transform: uppercase !important; letter-spacing: 0 !important;
}

/* ------------------------------------------------------------------ Apply / Careers / Connect pages */
html body .f-page-steps { grid-template-columns: 1fr !important; margin-top: 0; }
html body .f-about-grid > div > .a-doc + .f-page-steps { margin-top: 14px; }
html body .f-connect-steps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html body .f-connect-steps .a-step, html body .f-page-steps .a-step { display: flex; flex-direction: column; }
html body .f-connect-steps .a-step .btn-primary,
html body .f-connect-steps .a-step .btn-secondary { margin-top: auto; align-self: flex-start; }
html body .f-connect-steps .a-step p { margin-bottom: 18px; }
html body .f-dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
html body .f-dept { min-height: 280px; padding: 28px !important; gap: 10px !important; }
html body .f-dept b { font-size: 30px !important; }
html body .f-dept .btn-primary { margin-top: auto; align-self: flex-start; }
html body .f-dept-tag { font: 600 11px/1 var(--c-body) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent) !important; }
@media (max-width: 1000px) {
  html body .f-connect-steps, html body .f-dept-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  html body .f-connect-steps, html body .f-dept-grid { grid-template-columns: 1fr !important; }
}