/* =========================================================================
   Micro Mania — the feel layer  (2026-09-09)

   The last stylesheet on every MMI page. Nothing here changes a layout or a
   colour scheme; it is the set of small, site-wide behaviours that make the
   site feel finished under the hand: how a page arrives, how a press lands,
   what the keyboard sees, what the scrollbar and the text selection look
   like on a dark page, how a picture comes in, and a way back to the top of
   a long page. Each block says what it is for. Everything that moves stops
   under prefers-reduced-motion. mmi-feel.js adds the two things CSS cannot:
   the scrolled state of the bar and the back-to-top button.
   ====================================================================== */


/* ---- 1. Arriving: a page-to-page fade -------------------------------
   Same-origin navigations cross-fade instead of flashing white then black.
   Browsers without cross-document view transitions ignore the whole block
   and navigate as before. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:mmiFeelOut .14s ease-in both}
  ::view-transition-new(root){animation:mmiFeelIn .2s ease-out both}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@keyframes mmiFeelOut{to{opacity:0}}
@keyframes mmiFeelIn{from{opacity:0}}


/* ---- 2. The page's own chrome on a dark design ------------------------
   The document scrollbar and the text selection are the two pieces of
   browser chrome that sit inside the design; both were stock white. */
html:has(body.mmi-page){scrollbar-color:rgba(255,255,255,.22) #0b0b14;scrollbar-width:thin}
@media (hover:hover) and (pointer:fine){
  html:has(body.mmi-page)::-webkit-scrollbar{width:11px;height:11px}
  html:has(body.mmi-page)::-webkit-scrollbar-track{background:#0b0b14}
  html:has(body.mmi-page)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px;border:3px solid #0b0b14}
  html:has(body.mmi-page)::-webkit-scrollbar-thumb:hover{background:rgba(79,216,224,.55)}
}
.mmi-page ::selection{background:rgba(79,216,224,.38);color:#fff}
.mmi-page nav.site-nav ::selection,
.mmi-page .search ::selection{background:rgba(45,27,94,.22);color:inherit}

/* No grey flash on tap — the elements have their own pressed state below. */
body.mmi-page{-webkit-tap-highlight-color:transparent}

.mmi-page h1,.mmi-page h2,.mmi-page h3{text-rendering:optimizeLegibility;font-kerning:normal}


/* ---- 3. A press lands ----------------------------------------------------
   Every button-like thing gives a little under the finger or the mouse, on
   one short curve, so the whole site answers the same way. */
.mmi-page .btn,
.mmi-page .bc-cta,
.mmi-page .mmi-review-write,
.mmi-page .brands-card,
.mmi-page .brands-chip,
.mmi-page .nav-icon,
.mmi-page .lang,
.mmi-page .menu-toggle,
.mmi-page .search-btn,
.mmi-page .mobile-dock a,
.mmi-page .tile,
.mmi-page .card,
.mmi-page .shop-product,
.mmi-page .related-card,
.mmi-page .t-card,
.mmi-page .mmi-reviews-dot,
.mmi-page .product-thumb{transition-property:transform,box-shadow,border-color,background-color,color,opacity,filter;transition-duration:.18s;transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.mmi-page .btn:active,
.mmi-page .bc-cta:active,
.mmi-page .mmi-review-write:active,
.mmi-page .brands-card:active,
.mmi-page .brands-chip:active,
.mmi-page .nav-icon:active,
.mmi-page .lang:active,
.mmi-page .menu-toggle:active,
.mmi-page .search-btn:active,
.mmi-page .mobile-dock a:active,
.mmi-page .tile:active,
.mmi-page .card:active,
.mmi-page .shop-product:active,
.mmi-page .related-card:active,
.mmi-page .t-card:active{transform:scale(.985);transition-duration:.08s}


/* ---- 4. What the keyboard sees --------------------------------------------
   One focus ring, the brand's cyan, on everything that can take focus. A
   mouse click leaves no ring behind. Elements with a ring of their own keep
   it (theirs is more specific). */
.mmi-page a:focus-visible,
.mmi-page button:focus-visible,
.mmi-page input:focus-visible,
.mmi-page select:focus-visible,
.mmi-page textarea:focus-visible,
.mmi-page summary:focus-visible,
.mmi-page [tabindex]:focus-visible{outline:2px solid var(--cyan,#4fd8e0);outline-offset:3px;border-radius:6px}
.mmi-page nav.site-nav a:focus-visible,
.mmi-page nav.site-nav button:focus-visible{outline-color:var(--indigo,#2d1b5e)}


/* ---- 5. The bar, once the page has moved -----------------------------------
   The navigation bar is sticky. While the page sits at the top it is part
   of the page; once anything scrolls under it, it gets a shadow so it reads
   as sitting above the content. mmi-feel.js flips the class. */
.mmi-page nav.site-nav{transition:box-shadow .25s ease}
.mmi-page nav.site-nav.is-scrolled{box-shadow:0 12px 34px -16px rgba(7,7,20,.7),0 1px 0 rgba(45,27,94,.1)}


/* ---- 6. Pictures arrive, they do not pop ----------------------------------
   mmi-feel.js marks a lazy image that has not loaded yet; it fades in when
   it has. Without the script nothing is ever hidden. */
.mmi-page img.is-pending{opacity:0}
.mmi-page img.is-loaded{opacity:1;transition:opacity .32s ease}


/* ---- 7. A way back up ------------------------------------------------------
   A small round button in the bottom corner, shown once the reader is more
   than a screen down. It sits above the phone dock, and follows the
   reading direction. Added by mmi-feel.js. */
.mmi-page .mmi-top{
  position:fixed;z-index:60;inset-inline-end:22px;bottom:22px;
  width:46px;height:46px;padding:0;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(79,216,224,.38);
  background:rgba(13,13,22,.82);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,border-color .18s,color .18s;
}
.mmi-page .mmi-top.is-on{opacity:1;visibility:visible;transform:none}
.mmi-page .mmi-top svg{width:20px;height:20px}
@media (hover:hover){
  .mmi-page .mmi-top:hover{border-color:var(--cyan,#4fd8e0);color:var(--cyan,#4fd8e0)}
}
.mmi-page .mmi-top:active{transform:scale(.94)}
@media (max-width:620px){
  .mmi-page .mmi-top{
    inset-inline-end:14px;width:42px;height:42px;
    bottom:calc(78px + env(safe-area-inset-bottom));
  }
}


/* ---- Motion off for anyone who asked ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mmi-page img.is-pending{opacity:1}
  .mmi-page img.is-loaded{transition:none}
  .mmi-page .mmi-top{transition:none;transform:none}
  .mmi-page .btn:active,
  .mmi-page .bc-cta:active,
  .mmi-page .mmi-review-write:active,
  .mmi-page .brands-card:active,
  .mmi-page .brands-chip:active,
  .mmi-page .nav-icon:active,
  .mmi-page .lang:active,
  .mmi-page .menu-toggle:active,
  .mmi-page .search-btn:active,
  .mmi-page .mobile-dock a:active,
  .mmi-page .tile:active,
  .mmi-page .card:active,
  .mmi-page .shop-product:active,
  .mmi-page .related-card:active,
  .mmi-page .t-card:active,
  .mmi-page .mmi-top:active{transform:none}
}