/* =====================================================================
   GRAPHICS UNIT — motion layer
   ---------------------------------------------------------------------
   Progressive enhancement only. Every rule that hides something is scoped
   to .mo-ready, which motion.js adds to <html> after it decides motion is
   safe. With JavaScript off, or with prefers-reduced-motion, none of this
   applies and the page renders exactly as it does without this file.
   ===================================================================== */

:root{
  --mo-fast:.22s;
  --mo-base:.55s;
  --mo-slow:.85s;
  --mo-ease:cubic-bezier(.22,.61,.36,1);
  --mo-spring:cubic-bezier(.34,1.42,.5,1);
}

/* ---------------------------------------------------------------
   1. Route progress bar — the thin gold line at the top of the
      window while the next page is being fetched.
   --------------------------------------------------------------- */
.mo-progress{
  position:fixed;top:0;left:0;height:2.5px;width:0;z-index:9999;
  background:linear-gradient(90deg,#B8893F,#E4C98B 55%,#F6E9C9);
  box-shadow:0 0 10px rgba(228,201,139,.7);
  opacity:0;pointer-events:none;
  transition:width .28s var(--mo-ease),opacity .3s ease;
}
.mo-progress.is-on{opacity:1}

/* ---------------------------------------------------------------
   2. First paint — the page eases in rather than snapping
   --------------------------------------------------------------- */
/* leaving the page */
.mo-ready.is-leaving body{opacity:.55;transition:opacity .18s ease}

/* A reveal that slides in from the side momentarily sits outside the
   viewport. `clip` (not `hidden`) trims that without creating a scroll
   container, so sticky sidebars keep working. */
.mo-ready body{overflow-x:clip}

/* ---------------------------------------------------------------
   3. Scroll reveal
      motion.js tags elements with [data-mo] and flips [data-mo-in]
      when they cross into view.
   --------------------------------------------------------------- */
.mo-ready [data-mo]{
  opacity:0;
  transform:translate3d(0,var(--mo-y,22px),0) scale(var(--mo-s,1));
  transition:opacity var(--mo-base) var(--mo-ease),
             transform var(--mo-base) var(--mo-ease);
  transition-delay:var(--mo-d,0ms);
  will-change:opacity,transform;
}
.mo-ready [data-mo="left"] { transform:translate3d(-26px,0,0) }
.mo-ready [data-mo="right"]{ transform:translate3d(26px,0,0) }
.mo-ready [data-mo="zoom"] { --mo-s:.965; --mo-y:14px }
.mo-ready [data-mo="fade"] { --mo-y:0px }

.mo-ready [data-mo][data-mo-in]{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  will-change:auto;
}

/* On narrow screens there is no room for a sideways entrance — everything
   rises instead, so nothing is ever clipped mid-animation. */
@media (max-width: 900px){
  .mo-ready [data-mo="left"],
  .mo-ready [data-mo="right"]{transform:translate3d(0,22px,0)}
}

/* ---------------------------------------------------------------
   4. Headline word reveal
   --------------------------------------------------------------- */
.mo-w{display:inline-block}
.mo-ready .mo-w{
  opacity:0;transform:translate3d(0,.72em,0) rotate(1.2deg);
  transition:opacity .62s var(--mo-ease),transform .62s var(--mo-ease);
  transition-delay:var(--mo-d,0ms);
}
.mo-ready .mo-line{display:inline-block;overflow:hidden;vertical-align:top}
.mo-ready [data-mo-words][data-mo-in] .mo-w{opacity:1;transform:none}

/* the gold italic in the hero picks up a slow shimmer once it has arrived */
.mo-ready .hero h1 em{background-size:220% 100%}
.mo-ready .hero h1 em{animation:moShimmer 7s ease-in-out 1.1s infinite}
@keyframes moShimmer{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}

/* ---------------------------------------------------------------
   5. Hero furniture
   --------------------------------------------------------------- */
.mo-ready .hero__aurora{animation:moDrift 15s ease-in-out infinite alternate}
.mo-ready .hero__aurora--2{animation-duration:19s;animation-delay:-6s}
@keyframes moDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-26px,20px,0) scale(1.09)}
}
.mo-ready .hero__mandala{
  animation:moSpin 150s linear infinite, moBreathe 11s ease-in-out infinite alternate;
  transform-origin:50% 50%;
}
@keyframes moSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes moBreathe{from{opacity:.10}to{opacity:.20}}

/* the slide copy crossfades instead of hard-swapping */
.mo-ready .hero__slide{animation:moSlideIn .55s var(--mo-ease) both}
@keyframes moSlideIn{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to  {opacity:1;transform:none}
}
.mo-ready .hero__dot{position:relative;overflow:hidden}
.mo-ready .hero__dot.is-active::after{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.5);
  transform-origin:left;animation:moTick 6.5s linear forwards;
}
@keyframes moTick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Below 900px the dot grows to a 44px tap target and only draws a 3px bar
   through its ::before. inset:0 would paint a full white square over that,
   so the tick is pinned to the bar itself. */
@media(max-width:900px){
  .mo-ready .hero__dot.is-active::after{
    inset:auto;top:50%;left:50%;width:40px;height:3px;
    margin:-1.5px 0 0 -20px;border-radius:2px;
  }
}

/* ---------------------------------------------------------------
   6. Micro-interactions
   --------------------------------------------------------------- */
.mo-ready .btn{transition:transform var(--mo-fast) var(--mo-spring),
                          box-shadow var(--mo-fast) var(--mo-ease),
                          background var(--mo-fast) var(--mo-ease),
                          border-color var(--mo-fast) var(--mo-ease),
                          color var(--mo-fast) var(--mo-ease)}
.mo-ready .btn:active:not(:disabled){transform:translateY(1px) scale(.985)}

/* ripple on any button press */
.mo-ink{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.45),rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%) scale(0);animation:moInk .62s ease-out forwards;
}
.btn--ghost .mo-ink,.btn--light .mo-ink,.pill .mo-ink{
  background:radial-gradient(circle,rgba(0,61,104,.20),rgba(0,61,104,0) 70%);
}
@keyframes moInk{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.mo-ready .btn,.mo-ready .pill,.mo-ready .card__wish{position:relative;overflow:hidden}

/* product cards lift a touch more, and the image settles */
.mo-ready .card{transition:transform .34s var(--mo-ease),box-shadow .34s var(--mo-ease),border-color .34s var(--mo-ease)}
.mo-ready .card:hover{transform:translateY(-5px)}
.mo-ready .card__flag{animation:moPop .45s var(--mo-spring) both;animation-delay:.12s}
@keyframes moPop{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:none}}

/* nav underline grows from the middle */
.mo-ready .nav__link::after{transition:transform .34s var(--mo-ease)}

/* the arrow chip on category tiles and hero paths */
.mo-ready .cat-tile__go svg{transition:transform var(--mo-fast) var(--mo-ease)}
.mo-ready .cat-tile:hover .cat-tile__go svg{transform:translateX(2px)}

/* wishlist heart */
.mo-ready .card__wish.is-on svg{animation:moHeart .48s var(--mo-spring)}
@keyframes moHeart{0%{transform:scale(1)}38%{transform:scale(1.35)}100%{transform:scale(1)}}

/* cart badge reacts when the count changes */
.mo-bump{animation:moBump .45s var(--mo-spring)}
@keyframes moBump{0%{transform:scale(1)}35%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ---------------------------------------------------------------
   7. Images — blur up as they decode
   --------------------------------------------------------------- */
.mo-ready img.mo-img{
  filter:blur(12px);transform:scale(1.03);opacity:.35;
  transition:filter .6s var(--mo-ease),transform .6s var(--mo-ease),opacity .45s ease;
}
.mo-ready img.mo-img.is-loaded{filter:none;transform:none;opacity:1}

/* ---------------------------------------------------------------
   8. Loading states
   --------------------------------------------------------------- */
.mo-skel{
  background:linear-gradient(100deg,#EEF1F5 8%,#F7F9FB 24%,#EEF1F5 40%);
  background-size:220% 100%;animation:moSkel 1.25s linear infinite;
  border-radius:8px;color:transparent !important;user-select:none;
}
@keyframes moSkel{to{background-position:-220% 0}}

.mo-skel-line{height:11px;margin-bottom:9px}
.mo-skel-line:last-child{width:62%;margin-bottom:0}

/* full-drawer cart skeleton */
.mo-cart-skel{padding:18px 22px;display:grid;gap:18px}
.mo-cart-skel > div{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center}
.mo-cart-skel .mo-sq{width:76px;height:76px;border-radius:10px}

/* inline spinner used by the drawer and any async area */
.mo-spin{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid rgba(0,61,104,.16);border-top-color:#003D68;
  animation:moSpin .72s linear infinite;margin:26px auto;
}
@keyframes moSpin{to{transform:rotate(360deg)}}

/* the whole page while a form is submitting */
.mo-busy{position:relative;pointer-events:none}
.mo-busy::after{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);
  backdrop-filter:blur(1px);border-radius:inherit;z-index:5;
  animation:moFadeIn .2s ease both;
}
@keyframes moFadeIn{from{opacity:0}to{opacity:1}}

/* ---------------------------------------------------------------
   9. Drawers, menus, toasts
   --------------------------------------------------------------- */
.mo-ready .drawer{transition:transform .42s var(--mo-ease)}
.mo-ready .overlay{transition:opacity .34s ease,visibility .34s ease}
.mo-ready .drawer.is-open .cart-line{animation:moRowIn .42s var(--mo-ease) both}
@keyframes moRowIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.mo-ready .mega{transition:opacity .26s var(--mo-ease),transform .26s var(--mo-ease),visibility .26s}
.mo-ready .nav__item:hover .mega .mega__col{animation:moColIn .4s var(--mo-ease) both}
@keyframes moColIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------
   10. Admin flourishes
   --------------------------------------------------------------- */
.mo-ready .stat{animation:moPop .45s var(--mo-ease) both}
.mo-ready .chart__bar{animation:moGrow .75s var(--mo-ease) both;transform-origin:bottom}
@keyframes moGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.mo-ready .tbl tbody tr{transition:background .16s ease}
.mo-ready .side__link{transition:background .16s ease,color .16s ease,padding-left .16s ease}
.mo-ready .side__link:hover{padding-left:14px}

/* success tick on the order-confirmed screen */
.mo-ready .success-hero__ico svg{animation:moDraw .6s var(--mo-ease) .2s both}
@keyframes moDraw{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------
   11. Anyone who asked for less motion gets none of it
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mo-ready [data-mo],
  .mo-ready .mo-w{opacity:1 !important;transform:none !important;transition:none !important}
  .mo-ready .hero__aurora,
  .mo-ready .hero__mandala,
  .mo-ready .hero h1 em,
  .mo-ready .hero__dot.is-active::after,
  .mo-ready .stat,
  .mo-ready .chart__bar,
  .mo-ready .card__flag,
  .mo-ready .hero__slide{animation:none !important}
  .mo-ready img.mo-img{filter:none !important;transform:none !important;opacity:1 !important}
  .mo-progress{display:none}
  .mo-skel{animation:none}
}

/* the hero showcase and marquee follow the same reduced-motion rule */
@media (prefers-reduced-motion: reduce){
  .hero__marquee-track{animation:none !important}
  .hero-card{transition:none !important}
}