/* ==========================================================================
   JAFAN — Animation library
   Soft, restrained motion. Nothing bounces, nothing shouts.
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes silkShine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.loading-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease-silk), visibility 0.8s;
}
.loading-veil.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-veil .mark {
  font-family: var(--f-en);
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  color: var(--c-gold);
  opacity: 0;
  animation: fadeIn 1.2s var(--ease-silk) 0.2s forwards;
}

/* Parallax layers (JS toggles transform via animations.js) */
.parallax-layer { will-change: transform; }

/* Gentle hover lift for cards/images */
.hover-lift {
  transition: transform var(--dur-med) var(--ease-silk), box-shadow var(--dur-med) var(--ease-silk);
}
.hover-lift:hover {
  transform: translateY(-6px);
}

/* Image reveal mask — used on gallery/media images entering viewport */
.mask-reveal {
  position: relative;
  overflow: hidden;
}
.mask-reveal img { transform: scale(1.15); transition: transform 1.4s var(--ease-silk); }
.mask-reveal::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-primary);
  transform-origin: left;
  z-index: 1;
  transition: transform 1s var(--ease-silk);
}
.mask-reveal.is-visible::before { transform: scaleX(0); }
.mask-reveal.is-visible img { transform: scale(1); }

/* Toast (cart added / newsletter subscribed) */
.toast {
  position: fixed;
  bottom: var(--sp-4);
  right: 50%;
  transform: translateX(50%) translateY(20px);
  background: var(--c-text);
  color: #fff;
  padding: 1rem 1.8rem;
  font-size: var(--fs-00);
  letter-spacing: 0.03em;
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-silk), transform var(--dur-med) var(--ease-silk);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}