/* Shifora motion: the brand's own sparkle, used sparingly.
   Brand moments are slow and fluid (0.9–1.4 s, --ease-lux); interface feedback stays quick.
   Everything here switches off under prefers-reduced-motion. */

/* ---------- Logo: a gold glint across the wordmark, and the sparkle over the "i" twinkles ---------- */
.m-logo { position: relative; }
.m-glint, .m-spark { position: absolute; pointer-events: none; }
.m-glint {
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 190, .95) 48%, rgba(255, 255, 255, .9) 50%, rgba(214, 179, 106, .85) 53%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  -webkit-mask: url(/static/img/brand/wordmark-ink.png) center / contain no-repeat;
          mask: url(/static/img/brand/wordmark-ink.png) center / contain no-repeat;
  animation: mGlint 14s 1.1s cubic-bezier(.45, .05, .25, 1) infinite;
}
.m-spark { left: 36.9%; top: 20.5%; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); color: #e2c27a; filter: drop-shadow(0 0 3px rgba(255, 226, 160, .95)) drop-shadow(0 0 8px rgba(214, 179, 106, .6)); animation: mTwinkle 14s 1.1s ease-out infinite; }
.m-spark svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.m-logo:hover .m-glint { animation: mGlintOnce 1.3s cubic-bezier(.45, .05, .25, 1); }
.m-logo:hover .m-spark { animation: mTwinkleOnce 1.3s ease-out; }
@keyframes mGlint { 0% { background-position: 160% 0; } 9%, 100% { background-position: -60% 0; } }
@keyframes mGlintOnce { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes mTwinkle {
  0%, 3% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  5% { transform: translate(-50%, -50%) scale(1.35) rotate(45deg); opacity: 1; }
  8% { transform: translate(-50%, -50%) scale(.9) rotate(90deg); opacity: .9; }
  11%, 100% { transform: translate(-50%, -50%) scale(0) rotate(135deg); opacity: 0; }
}
@keyframes mTwinkleOnce {
  0%, 25% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.35) rotate(45deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0) rotate(135deg); opacity: 0; }
}

/* ---------- Opening curtain: the wordmark unveils, a gold hairline draws, the curtain lifts ---------- */
.m-curtain { flex-direction: column; gap: 22px; transition: transform 1s cubic-bezier(.76, 0, .24, 1), visibility 1s; }
.m-curtain.done { opacity: 1; transform: translateY(-100%); }
.m-curtain .m-cw { position: relative; height: 44px; }
.m-curtain .m-cw img { height: 44px; opacity: 1; animation: mUnveil 1.25s .15s cubic-bezier(.65, 0, .35, 1) both; }
.m-curtain .m-cw .m-spark { animation: mTwinkleOnce 1.1s 1.15s ease-out both; }
.m-curtain::after { content: ""; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #d6b36a, transparent); transform: scaleX(0); animation: mLine 1.1s .55s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes mUnveil { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mLine { to { transform: scaleX(1); } }

/* ---------- Hero: a few stars, barely there ---------- */
.m-stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.m-stars i { position: absolute; width: 10px; height: 10px; background: #f3dfae; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 230, 170, .9)); animation: mStar 6.5s ease-in-out infinite; }
.m-stars i:nth-child(1) { left: 12%; top: 22%; animation-delay: .4s; }
.m-stars i:nth-child(2) { left: 78%; top: 18%; width: 14px; height: 14px; animation-delay: 2.1s; }
.m-stars i:nth-child(3) { left: 64%; top: 64%; width: 7px; height: 7px; animation-delay: 3.6s; }
.m-stars i:nth-child(4) { left: 26%; top: 70%; width: 8px; height: 8px; animation-delay: 1.3s; }
.m-stars i:nth-child(5) { left: 88%; top: 46%; width: 9px; height: 9px; animation-delay: 4.7s; }
.m-stars i:nth-child(6) { left: 44%; top: 14%; width: 6px; height: 6px; animation-delay: 5.5s; }
@keyframes mStar { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 45% { opacity: .85; transform: scale(1) rotate(45deg); } 60% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@media (max-width: 699px) { .m-stars i:nth-child(n+4) { display: none; } }

/* ---------- Editorial photographs open like a frame as they arrive ---------- */
.m-split-img img[data-zoom] { clip-path: inset(7% 7% 7% 7%); transition: clip-path 1.5s var(--ease-lux), transform 1.6s var(--ease-lux), opacity .8s var(--ease-lux); }
.m-split-img img[data-zoom].in { clip-path: inset(0 0 0 0); }

/* ---------- Main navigation: a hairline draws under the hovered item ---------- */
.m-nav-i > a { position: relative; }
.m-nav-i > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-lux); }
.m-nav-i:hover > a::after, .m-nav-i > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Cards: the price line settles in when the metal changes ---------- */
[data-card-price] { display: inline-block; }
[data-card-price].tick { animation: mTick .5s var(--ease-lux); }
@keyframes mTick { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .m-glint, .m-spark, .m-stars { display: none; }
  .m-curtain .m-cw img, .m-curtain::after { animation: none; clip-path: none; transform: none; }
  .m-split-img img[data-zoom] { clip-path: none; }
  .m-nav-i > a::after { transition: none; }
}