/* ═══════════════════════════════════════
   ELLIE CARE — Animations & Motion
   ═══════════════════════════════════════ */

/* ── KEYFRAMES ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.05); }
}

@keyframes sheen {
  from { left: -60%; }
  to { left: 140%; }
}

@keyframes logoIntro {
  0% { opacity: 0; transform: translateY(-6px) scale(0.985); filter: blur(3px); }
  60% { opacity: 1; transform: translateY(0) scale(1.02); filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0) scale(1.0); filter: blur(0px); }
}

@keyframes ringFill {
  0% { stroke-dashoffset: 88; }
  100% { stroke-dashoffset: 0; }
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.992);
  filter: blur(2px);
  transition: opacity 0.55s var(--ease-premium),
              transform 0.55s var(--ease-premium),
              filter 0.55s var(--ease-premium);
}

body.no-motion .reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

body.motion .reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.992);
  filter: blur(2px);
}

body.motion .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* Stagger delays */
.reveal.stagger-1 { transition-delay: 0.04s; }
.reveal.stagger-2 { transition-delay: 0.08s; }
.reveal.stagger-3 { transition-delay: 0.12s; }
.reveal.stagger-4 { transition-delay: 0.16s; }
.reveal.stagger-5 { transition-delay: 0.20s; }
.reveal.stagger-6 { transition-delay: 0.24s; }

/* ── LOGO ── */
.nav-logo {
  transform-origin: left center;
}

/* ── HERO FADE ── */
.hero-left { animation: fadeUp 0.8s ease-out; }
.hero-right img { animation: fadeUp 0.8s ease-out 0.15s both; }

/* ── DECORATIVE ORBS ── */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.orb--mint {
  background: radial-gradient(circle, rgba(166,241,202,0.15) 0%, transparent 60%);
  animation: floatOrb 8s ease-in-out infinite;
}
.orb--pink {
  background: radial-gradient(circle, rgba(243,164,255,0.1) 0%, transparent 60%);
  animation: floatOrb 10s ease-in-out infinite reverse;
}

/* ── WATCH CAROUSEL ── */
.watch-color-picker { margin-top: 14px; text-align: center; }
.watch-color-label {
  font-weight: 600;
  color: var(--blue-deep);
  margin: 0 0 14px;
  font-size: 0.95rem;
}
.watch-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.watch-color-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  width: 32px;
  height: 32px;
}
.watch-color-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.watch-color-option .swatch {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--swatch);
  transition: transform 0.25s var(--ease-bounce);
  z-index: 2;
}
.watch-color-option:hover .swatch { transform: scale(1.2); }
.watch-color-option.is-selected .swatch { transform: scale(1.1); }
.watch-color-option .watch-color-name { display: none; }

/* Progress ring */
.progress-ring {
  position: absolute;
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
  z-index: 1;
  pointer-events: none;
}
.progress-ring .bg {
  fill: none;
  stroke: rgba(0,0,0,0.12);
  stroke-width: 2;
}
.progress-ring .progress {
  fill: none;
  stroke: #a6f1ca;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
  filter: drop-shadow(0 0 3px rgba(166,241,202,0.6));
}
.is-animating .progress {
  animation: ringFill 4s linear forwards !important;
}

/* Watch crossfade */
#watchWrapper {
  position: relative;
  overflow: visible;
  display: inline-block;
}
#watchImg, #watchImgNext {
  transition: opacity 0.5s ease-in-out !important;
}
#watchImgNext {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
}
#watchWrapper.is-transitioning #watchImg { opacity: 0 !important; }
#watchWrapper.is-transitioning #watchImgNext { opacity: 1 !important; }