/* Opening sequence: the supplied M, extruded in CSS, then a two-door store reveal. */
.store-intro[open] {
  position: fixed; inset: 0; display: grid; place-items: center;
  width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; color: #f4eee3;
  background: transparent; perspective: 1400px;
}
.store-intro::backdrop { background: transparent; }
.intro-door { position: absolute; top: 0; bottom: 0; width: 50.1%; background: #131513; will-change: transform; }
.intro-door::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, #9e99861a, transparent 70%); }
.intro-door-left { left: 0; transform-origin: left center; border-right: 1px solid #ffffff0a; animation: intro-open-left .95s 2.55s cubic-bezier(.65,0,.25,1) both; }
.intro-door-right { right: 0; transform-origin: right center; animation: intro-open-right .95s 2.55s cubic-bezier(.65,0,.25,1) both; }
.intro-composition { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 24px; animation: intro-depart .5s 2.45s ease-in both; }
.intro-stage { width: clamp(150px,24vw,230px); aspect-ratio: 1; perspective: 850px; position: relative; }
.intro-stage::after { content: ''; position: absolute; bottom: 3%; left: 17%; width: 66%; height: 9%; border-radius: 50%; background: #000; filter: blur(12px); opacity: .45; animation: intro-shadow 1.7s ease-out both; }
.intro-emblem { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: intro-fall 1.8s linear both; }
.intro-mark-layer, .intro-mark-face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-mark-layer { fill: #635c50; transform: translateZ(calc(var(--depth) * -1.2px)); }
.intro-mark-face { transform: translateZ(1px); filter: drop-shadow(0 1px 1px #fff3); }
.intro-wordmark { display: flex; gap: clamp(9px,1.7vw,20px); margin: 18px 0 0; padding-left: 12px; font-family: var(--display, Arial, sans-serif); font-size: clamp(28px,6vw,53px); font-weight: 500; line-height: 1.2; }
.intro-wordmark span { display: block; animation: intro-letter .7s calc(.85s + var(--letter) * .075s) cubic-bezier(.2,.8,.2,1) both; }
.intro-tagline { margin: 24px 0 0; color: #aca99e; font-size: 9px; letter-spacing: .32em; animation: intro-caption .6s 1.55s both; }
.intro-rule { margin-top: 28px; height: 1px; width: 44px; background: #c0b8a8; transform-origin: center; animation: intro-line .7s 1.7s both; }
.store-intro:not(.intro-running) .intro-door,
.store-intro:not(.intro-running) .intro-composition,
.store-intro:not(.intro-running) .intro-stage::after,
.store-intro:not(.intro-running) .intro-emblem,
.store-intro:not(.intro-running) .intro-wordmark span,
.store-intro:not(.intro-running) .intro-tagline,
.store-intro:not(.intro-running) .intro-rule { animation-play-state: paused; }
.intro-skip { position: absolute; bottom: max(28px,env(safe-area-inset-bottom)); right: max(28px,env(safe-area-inset-right)); background: transparent; color: #c8c6bc; border: 1px solid #ffffff30; padding: 12px 17px; min-height: 44px; font-size: 11px; letter-spacing: .04em; cursor: pointer; }
.intro-skip span { margin-left: 20px; }
.intro-skip:hover { color: #fff; border-color: #ffffff70; }
.intro-skip:focus-visible { outline: 2px solid #e4d9c7; outline-offset: 5px; }
@keyframes intro-fall {
  0% { transform: translate3d(-52vw,-45vh,0) rotateX(20deg) rotateY(-55deg) rotateZ(-300deg); animation-timing-function: cubic-bezier(.45,0,.8,1); }
  55% { transform: translate3d(0,6px,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); animation-timing-function: ease-out; }
  63% { transform: translate3d(-5px,-5px,0) rotateX(0deg) rotateY(-5deg) rotateZ(-4deg); }
  69% { transform: translate3d(4px,2px,0) rotateX(0deg) rotateY(4deg) rotateZ(3deg); }
  75% { transform: translate3d(-3px,0,0) rotateX(0deg) rotateY(-3deg) rotateZ(-2deg); }
  81% { transform: translate3d(2px,0,0) rotateX(0deg) rotateY(2deg) rotateZ(1.3deg); }
  87% { transform: translate3d(-1px,0,0) rotateX(0deg) rotateY(-1deg) rotateZ(-.7deg); }
  94% { transform: translate3d(.5px,0,0) rotateX(0deg) rotateY(.5deg) rotateZ(.3deg); }
  100% { transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}
@keyframes intro-shadow { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: .45; } }
@keyframes intro-letter { from { opacity: 0; transform: translateY(22px) rotateX(-70deg); } to { opacity: 1; transform: none; } }
@keyframes intro-caption { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes intro-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-depart { to { opacity: 0; transform: scale(1.08) translateZ(40px); } }
@keyframes intro-open-left { to { transform: translateX(-105%) rotateY(-12deg); } }
@keyframes intro-open-right { to { transform: translateX(105%) rotateY(12deg); } }

/* Small, finite movements for browsing. No hidden content depends on JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color .2s, color .2s, border-color .2s, transform .25s, box-shadow .25s; }
  .button:active { transform: scale(.98); }
  .button > span, .text-link > span { display: inline-block; transition: transform .25s; }
  .product-card { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .product-visual img { transition: transform .75s cubic-bezier(.2,.7,.2,1); }
  .category-visual { transition: filter .4s; }
  .desktop-nav a { position: relative; }
  .desktop-nav a::after { content: ''; position: absolute; height: 1px; bottom: -6px; left: 0; right: 0; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .desktop-nav a:hover::after, .desktop-nav a.active::after { transform: scaleX(1); }
  .cart-dialog[open] { animation: store-bag-in .35s cubic-bezier(.2,.7,.2,1); }
  .search-dialog[open], .size-dialog[open] { animation: store-dialog-in .3s ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .product-card:hover { transform: translateY(-5px); }
    .product-card:hover .product-visual img { transform: scale(1.045); }
    .collection-card:hover .category-visual { filter: brightness(1.04); }
    .button:hover { transform: translateY(-2px); box-shadow: 0 5px 14px #0000000a; }
    .button:hover > span, .text-link:hover > span { transform: translate(2px,-2px); }
  }
}
@keyframes store-bag-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes store-dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .store-intro[open] { display: none; }
  .store-intro *, .product-card, .product-visual img, .category-title > span, .button { animation: none !important; transition: none !important; }
  .product-visual:hover img { transform: none; }
}