/* ═══════════════════════════════════════════════════════════
   BELLA SWISS — Animations
   Entrance, scroll-reveal, floating & micro-interactions
   ═══════════════════════════════════════════════════════════ */

/* ── Hero entrance ─────────────────────────────────────────── */
.hero-anim {
  opacity: 0;
  transform: translateY(28px);
  animation: heroIn 1s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Scroll-triggered reveal ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}

.reveal--left { transform: translateX(-44px); }

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Ambient floating ──────────────────────────────────────── */
.float-soft {
  animation: floatSoft 5.5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

@keyframes floatSoft {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

/* Background blobs drift slowly */
.blob--rose  { animation: blobDrift 14s ease-in-out infinite alternate; }
.blob--sage  { animation: blobDrift 18s ease-in-out infinite alternate-reverse; }
.blob--gold  { animation: blobDrift 12s ease-in-out infinite alternate; }
.blob--values1 { animation: blobDrift 16s ease-in-out infinite alternate; }
.blob--values2 { animation: blobDrift 20s ease-in-out infinite alternate-reverse; }

@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4%, 6%) scale(1.08); }
}

/* ── Sparkles (hero) ───────────────────────────────────────── */
.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--magenta);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  opacity: 0;
  animation: sparkle 4.5s ease-in-out infinite;
}

.sparkle--1 { top: 22%; left: 46%; animation-delay: 0s; }
.sparkle--2 { top: 64%; left: 8%;  animation-delay: 1.6s; transform: scale(0.7); }
.sparkle--3 { top: 30%; right: 6%; animation-delay: 3s;   transform: scale(1.3); }

@keyframes sparkle {
  0%, 100% { opacity: 0; scale: 0.4; rotate: 0deg; }
  50%      { opacity: 0.85; scale: 1; rotate: 90deg; }
}

/* ── Scroll cue ────────────────────────────────────────────── */
@keyframes scrollCue {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ── 3D tilt (JS-driven, smoothing here) ───────────────────── */
[data-tilt] {
  transition: transform 0.25s ease-out, box-shadow 0.5s ease;
}

[data-tilt].is-tilting {
  transition: transform 0.08s linear, box-shadow 0.5s ease;
}

/* ── Parallax targets (JS-driven) ──────────────────────────── */
[data-parallax] {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Mobile nav transition ─────────────────────────────────── */
@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: grid;
    place-items: center;
    background: rgba(253, 250, 246, 0.94);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s;
  }

  .main-nav.is-open { opacity: 1; visibility: visible; }

  .nav-list { flex-direction: column; gap: 1.9rem; text-align: center; }

  .nav-link { font-size: 1.25rem; }

  .main-nav .nav-list li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }

  .main-nav.is-open .nav-list li {
    opacity: 1;
    transform: none;
  }

  .main-nav.is-open .nav-list li:nth-child(1) { transition-delay: 0.08s; }
  .main-nav.is-open .nav-list li:nth-child(2) { transition-delay: 0.14s; }
  .main-nav.is-open .nav-list li:nth-child(3) { transition-delay: 0.20s; }
  .main-nav.is-open .nav-list li:nth-child(4) { transition-delay: 0.26s; }
  .main-nav.is-open .nav-list li:nth-child(5) { transition-delay: 0.32s; }
  .main-nav.is-open .nav-list li:nth-child(6) { transition-delay: 0.38s; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-anim, .reveal { opacity: 1; transform: none; }
}