/* LWR motion system (direction C). transform + opacity only. One easing family.
   Everything here is switched off under prefers-reduced-motion (bottom of file). */
:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);       /* default: quick out, long soft landing */
  --m-ease-in-out: cubic-bezier(.45, 0, .2, 1);  /* for things that leave and come back */
  --m-fast: 160ms;   /* press, small state changes */
  --m-base: 260ms;   /* hover, tabs, menus */
  --m-slow: 480ms;   /* entrances, crossfades */
  --m-xslow: 600ms;  /* page intro pieces, shine sweeps */
}

/* 1. Page intro: background, then logo, then heading words, then buttons. Ends under 1s. */
.m-intro .m-bg { opacity: 0; transform: scale(1.04); }
.m-intro .m-logo { opacity: 0; transform: translateY(14px) scale(.96); }
.m-intro .m-btns > * { opacity: 0; transform: translateY(10px); }
.m-intro .m-fade { opacity: 0; transform: translateY(8px); }
.m-go .m-bg { opacity: 1; transform: none; transition: opacity 420ms var(--m-ease), transform 900ms var(--m-ease); }
.m-go .m-logo { opacity: 1; transform: none; transition: opacity 360ms var(--m-ease) 120ms, transform 480ms var(--m-ease) 120ms; }
.m-go .m-btns > * { opacity: 1; transform: none; transition: opacity 300ms var(--m-ease), transform 360ms var(--m-ease); }
.m-go .m-btns > :nth-child(1) { transition-delay: 520ms; }
.m-go .m-btns > :nth-child(2) { transition-delay: 580ms; }
.m-go .m-fade { opacity: 1; transform: none; transition: opacity 360ms var(--m-ease) 480ms, transform 360ms var(--m-ease) 480ms; }

/* 2. Heading reveal by word (never by letter: Arabic letters are joined) */
.m-words .w { display: inline-block; opacity: 0; transform: translateY(.45em); }
.m-words.m-on .w { opacity: 1; transform: none; transition: opacity 360ms var(--m-ease), transform 420ms var(--m-ease); transition-delay: calc(var(--i) * 40ms + var(--m-delay, 0ms)); }

/* 3. Logo shine: a light band crosses the diamond once on load, again on hover.
   The band is masked by the logo image itself so only the mark lights up. */
.m-shine { position: relative; }
.m-shine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(192,240,242,.85) 48%, rgba(255,255,255,.95) 50%, rgba(192,240,242,.85) 52%, transparent 62%);
  -webkit-mask: var(--m-mask) center / contain no-repeat; mask: var(--m-mask) center / contain no-repeat;
  mix-blend-mode: screen; opacity: 0; transform: translateX(-60%);
}
.m-shine.shine-run::after { animation: m-shine var(--m-xslow) var(--m-ease-in-out) 1; }
@keyframes m-shine { 0% { opacity: 0; transform: translateX(-60%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }

/* 4. Buttons: metallic sweep on hover, clear press, loading state for buy buttons */
.m-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--m-fast) var(--m-ease), box-shadow var(--m-base) var(--m-ease), background-color var(--m-base) var(--m-ease); }
.m-btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 46%, rgba(192,240,242,.4) 50%, rgba(255,255,255,.28) 54%, transparent 70%);
  transform: translateX(-110%);
}
.m-btn:hover::before { transform: translateX(110%); transition: transform var(--m-xslow) var(--m-ease); }
.m-btn:active { transform: scale(.96); transition-duration: 90ms; }
.m-btn .m-label, .m-btn .m-done { transition: opacity var(--m-fast) var(--m-ease), transform var(--m-base) var(--m-ease); }
.m-btn .m-spin, .m-btn .m-done { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(6px); }
.m-btn .m-spin span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: m-rot 700ms linear infinite; }
.m-btn.is-loading { pointer-events: none; }
.m-btn.is-loading .m-label { opacity: 0; transform: translateY(-6px); }
.m-btn.is-loading .m-spin { opacity: 1; transform: none; transition: opacity var(--m-fast) var(--m-ease), transform var(--m-base) var(--m-ease); }
.m-btn.is-done .m-label { opacity: 0; transform: translateY(-6px); }
.m-btn.is-done .m-done { opacity: 1; transform: none; }
@keyframes m-rot { to { transform: rotate(360deg); } }

/* 5. Cards: tilt + light that follows the pointer + image zoom (no tilt on touch screens) */
.m-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform var(--m-base) var(--m-ease); will-change: transform; }
.m-tilt.is-tracking { transition: transform 80ms linear; }
.m-tilt .m-light { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 1; }
.m-tilt .m-light::before {
  content: ""; position: absolute; width: 140%; aspect-ratio: 1; left: -20%; top: -20%;
  background: radial-gradient(closest-side, rgba(192,240,242,.22), rgba(80,144,216,.08) 45%, transparent 70%);
  transform: translate(var(--lx, 0px), var(--ly, 0px)); opacity: 0; transition: opacity var(--m-base) var(--m-ease);
}
.m-tilt:hover .m-light::before, .m-tilt.is-hover .m-light::before { opacity: 1; }
.m-tilt img { transition: transform var(--m-slow) var(--m-ease); }
.m-tilt:hover img, .m-tilt.is-hover img { transform: scale(1.06); }
@media (hover: none), (pointer: coarse) { .m-tilt { transform: none !important; } .m-tilt .m-light { display: none; } }

/* 6. Sliding indicator for tabs and filters */
.m-ind-host { position: relative; }
.m-ind { position: absolute; bottom: -1px; left: 0; height: 2px; width: 1px; background: var(--primary, #3A6BC9); transform-origin: 0 50%;
  transform: translateX(var(--x, 0px)) scaleX(var(--w, 0)); transition: transform 340ms var(--m-ease); pointer-events: none; }
.m-ind-host [aria-selected="true"], .m-ind-host .on { border-color: transparent !important; }

/* 7. Slider: cards crossfade + scale as they enter/leave the visible track; gallery image crossfade */
.m-slide > * { transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease); }
.m-slide > .is-out { opacity: .35; transform: scale(.94); }
.m-xfade { position: relative; }
.m-xfade .m-next { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity var(--m-slow) var(--m-ease), transform var(--m-xslow) var(--m-ease); }
.m-xfade .m-next.on { opacity: 1; transform: none; }

/* 8. Scroll scenes: image grows a little, number rises in. Uses scroll-driven animations where
   supported; motion.js adds .m-on through IntersectionObserver everywhere else. */
.m-scene .pic img { transform: scale(.9); opacity: .55; transition: transform 700ms var(--m-ease), opacity 600ms var(--m-ease); }
.m-scene .n, .m-scene h3, .m-scene p { opacity: 0; transform: translateY(18px); transition: opacity 480ms var(--m-ease), transform 520ms var(--m-ease); }
.m-scene h3 { transition-delay: 80ms; } .m-scene p { transition-delay: 140ms; }
.m-scene.m-on .pic img { transform: none; opacity: 1; }
.m-scene.m-on .n, .m-scene.m-on h3, .m-scene.m-on p { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .m-scene .pic img { transition: none; animation: m-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  .m-scene .n { transition: none; animation: m-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
}
@keyframes m-grow { from { transform: scale(.9); opacity: .55; } to { transform: none; opacity: 1; } }
@keyframes m-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 9. Fixed buy bar slides in and out (positions come from the page CSS) */
.buybar { transition: transform 360ms var(--m-ease-in-out), visibility 0s linear 360ms !important; }
.buybar.show { transition: transform 360ms var(--m-ease-in-out), visibility 0s linear 0s !important; }

/* 10. Account menu */
.m-pop { opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; pointer-events: none; transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease); }
.m-pop.open { opacity: 1; transform: none; pointer-events: auto; }

/* 11. Page to page: View Transitions (cross-document) where supported; ignored elsewhere */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
.vt-logo { view-transition-name: lwr-logo; }


/* 12. The logo diamond: only the diamond is shown (clip follows its outline in the logo file),
   a soft breathing glow behind it, a slow sheen across it, and it leans toward the pointer. */
.gem { --clip: polygon(50.4% 19.5%, 74.7% 48.6%, 50.4% 75.5%, 25.9% 48.8%);
  position: relative; width: 100%; height: 100%;
  transform: perspective(900px) rotateX(var(--gx, 0deg)) rotateY(var(--gy, 0deg)) translate3d(var(--gtx, 0px), var(--gty, 0px), 0); }
.gem-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: var(--clip); }
.gem-glow { position: absolute; inset: 16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(80,144,216,.55), rgba(58,107,201,.18) 60%, transparent);
  filter: blur(28px); opacity: .55; transform: scale(1); animation: gem-breathe 5.5s var(--m-ease-in-out) infinite alternate; }
@keyframes gem-breathe { from { opacity: .55; transform: scale(.94); } to { opacity: .9; transform: scale(1.05); } }
.gem-sheen { position: absolute; inset: 0; clip-path: var(--clip); pointer-events: none; overflow: hidden; }
.gem-sheen::before { content: ""; position: absolute; inset: -10% -70%; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(115deg, transparent 43%, rgba(192,240,242,.08) 46%, rgba(235,250,255,.6) 50%, rgba(192,240,242,.08) 54%, transparent 57%);
  transform: translateX(-45%); }
.gem.sheen-run .gem-sheen::before { animation: gem-sheen 1300ms var(--m-ease-in-out) 1; }
@keyframes gem-sheen { 0% { opacity: 0; transform: translateX(-45%); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(45%); } }

/* 13. Cursor: a small dot on the pointer and a soft ring that trails it (fine pointers only) */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [role="tab"], .has-cursor summary { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; border-radius: 50%; opacity: 0; transition: opacity 240ms var(--m-ease); will-change: transform; }
.cur-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; box-shadow: 0 0 10px rgba(192,240,242,.6); }
.cur-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cur-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(192,240,242,.55); background: rgba(80,144,216,0);
  transform: scale(var(--rs, 1)); transition: transform 380ms var(--m-ease), background-color 300ms var(--m-ease), box-shadow 300ms var(--m-ease); }
.cur-on .cur-dot, .cur-on .cur-ring { opacity: 1; }
.cur-hover .cur-ring::before { --rs: 1.55; background: rgba(80,144,216,.14); box-shadow: inset 0 0 0 1px rgba(192,240,242,.35); }
.cur-hover .cur-dot { opacity: 0; }
.cur-down .cur-ring::before { --rs: .78; }
.cur-text .cur-dot, .cur-text .cur-ring { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .gem-glow { animation: none; }
  .gem-sheen { display: none; }
  .m-intro .m-bg, .m-intro .m-logo, .m-intro .m-btns > *, .m-intro .m-fade, .m-words .w,
  .m-scene .pic img, .m-scene .n, .m-scene h3, .m-scene p, .m-slide > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .m-shine::after, .m-btn::before, .m-tilt .m-light { display: none; }
  .m-tilt { transform: none !important; }
  .m-btn .m-spin span { animation-duration: 1.6s; }
  @view-transition { navigation: none; }
}

/* Real add-to-basket loading: store.js puts .updating on .product-actions while Tebex answers */
.product-actions.updating .m-btn .m-label { opacity: 0; transform: translateY(-6px); }
.product-actions.updating .m-btn .m-spin { opacity: 1; transform: none; }
.product-actions.updating { opacity: 1; }