/* Motion layer: opacity and small transforms, without changing photo crops. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 850ms cubic-bezier(.2,.65,.3,1), transform 850ms cubic-bezier(.2,.65,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal][data-revealed="true"],
.motion-ready [data-reveal]:focus-within {
  opacity: var(--reveal-opacity, 1);
  transform: none;
}
.hero-copy { z-index: 2; }
.hero .moon-glow {
  width: 38%; height: 64%; top: -12%; right: 0;
  background: radial-gradient(ellipse, #e9daf866 0%, #c9b8f01a 40%, transparent 70%);
  opacity: .3;
  animation: quiet-moonlight 9s ease-in-out infinite;
}
@keyframes quiet-moonlight {
  0%, 100% { opacity: .25; transform: scale(.96); }
  50% { opacity: .65; transform: scale(1.04); }
}
.moon-highlights { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.moon-highlights i {
  position: absolute; width: 15px; height: 15px; opacity: 0;
  background: radial-gradient(circle, #fffaf4d9, transparent 65%);
  animation: quiet-sparkle 8s ease-in-out infinite;
}
.moon-highlights i::before, .moon-highlights i::after {
  content: ''; position: absolute; inset: 1px 7px;
  background: linear-gradient(transparent, #fffaf4, transparent);
}
.moon-highlights i::after { transform: rotate(90deg); }
.moon-highlights i:nth-child(1) { top: 20%; left: 80%; animation-delay: -1s; }
.moon-highlights i:nth-child(2) { top: 39%; left: 69%; animation-delay: -5s; width: 11px; height: 11px; }
.moon-highlights i:nth-child(3) { top: 63%; left: 77%; animation-delay: -3s; animation-duration: 11s; }
@keyframes quiet-sparkle {
  0%, 23%, 65%, 100% { opacity: 0; transform: scale(.75); }
  43% { opacity: .7; transform: scale(1); }
}
.ambient-paused .moon-glow, .ambient-paused .moon-highlights i { animation-play-state: paused; }
.collection a img, .product img {
  transition: filter 450ms ease, box-shadow 450ms ease;
}
.collection a:focus-visible img, .product:focus-visible img {
  filter: brightness(1.05);
  box-shadow: 0 0 22px #b9a4d43b;
}
.ornate {
  transition: background-color 350ms ease, box-shadow 350ms ease;
}
.ornate:focus-visible {
  background-color: #c5b0df26;
  box-shadow: 0 0 20px #d5c9e52e;
}
@media (hover: hover) and (pointer: fine) {
  .collection a:hover img, .product:hover img {
    filter: brightness(1.05);
    box-shadow: 0 0 22px #b9a4d43b;
  }
  .ornate:hover:not(:disabled) {
    background-color: #c5b0df26;
    box-shadow: 0 0 20px #d5c9e52e;
  }
  .consult:hover { background-color: #746285 !important; }
}
.collection a:active img, .product:active img { filter: brightness(1.06); }
.ornate:active:not(:disabled) { box-shadow: 0 0 18px #d5c9e54d; }
#doors.active { pointer-events: auto; animation: door-appear 120ms ease-out both; }
@keyframes door-appear { from { opacity: 0; } to { opacity: 1; } }
.door { transition: transform 820ms cubic-bezier(.35,.05,.2,1); }
.door-frame {
  box-shadow: inset 0 0 0 8px #232b43, inset 0 0 0 9px #c5b6963b, inset 0 0 45px #05081766;
  position: relative;
}
.door-frame::before, .door-frame::after {
  content: '✧'; position: absolute; color: #c5b6969c; font-size: 22px;
  left: 50%; transform: translateX(-50%);
}
.door-frame::before { top: 18%; }
.door-frame::after { bottom: 16%; }
.open .left { transform: rotateY(-104deg); }
.open .right { transform: rotateY(104deg); }
@media (max-width: 700px) {
  .story-art { --reveal-opacity: .38; }
  .hero .moon-glow { width: 70%; right: -25%; top: 2%; height: 48%; }
  .moon-highlights i:nth-child(1) { top: 24%; left: 87%; }
  .moon-highlights i:nth-child(2) { top: 36%; left: 69%; }
  .moon-highlights i:nth-child(3) { top: 55%; left: 80%; }
  .motion-ready [data-reveal] { transform: translateY(12px); }
  .motion-ready [data-revealed="true"], .motion-ready [data-reveal]:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero .moon-glow { animation: none; opacity: .25; transform: none; }
  .moon-highlights { display: none; }
  #doors.active { display: none; animation: none; }
}