@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.animate-float { animation: float 5s ease-in-out infinite; }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(2.2);opacity:0} }
.pulse-ring { animation: pulse-ring 2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes dot-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.animate-dot-blink { animation: dot-blink 1.5s ease-in-out infinite; }
.pulse-ring-delay { animation: pulse-ring 2s cubic-bezier(0,0,0.2,1) 0.6s infinite; }
.pulse-ring-delay2 { animation: pulse-ring 2s cubic-bezier(0,0,0.2,1) 1.2s infinite; }
@keyframes menu-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes menu-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
#mobile-menu { animation: menu-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#mobile-menu.hidden { display: none !important; }
.schedule-details { max-height:0; opacity:0; overflow:hidden; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease; margin-top:0; }
.schedule-item:hover .schedule-details { max-height:80px; opacity:1; margin-top:8px; }
.phone-shadow { box-shadow: 0 0 80px rgba(201,168,76,0.12), 0 30px 60px rgba(44,26,18,0.18); }
.glass-card { background:rgba(255,255,255,0.06); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.1); }
.view-toggle-btn.active { box-shadow: 0 0 20px rgba(198, 123, 92, 0.4); transform: scale(1.05); }
.view-toggle-btn.active:hover { background-color: #5D4037; color: #FAF6F0; box-shadow: 0 0 28px rgba(198, 123, 92, 0.6); }
.view-toggle-btn.inactive:hover { background-color: transparent; }
.other-user-type-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
.other-user-type-wrapper.is-open {
  max-height: 7rem;
  opacity: 1;
}
#hero-phone { will-change: transform; }
.phone-notif { opacity:0; transform:translateY(-14px); transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.phone-notif.show { opacity:1; transform:translateY(0); }
.wl-phone { --wl:#2563EB; --wl-r:1rem; }
.wl-radius-el { border-radius: var(--wl-r); }
.wl-swatch { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.wl-swatch:hover { transform: scale(1.12); }
.wl-swatch.active { box-shadow: 0 0 0 2px #FAF6F0, 0 0 0 4px rgba(44,26,18,0.4); transform: scale(1.08); }
.wl-radius-btn { color:#8D6E63; transition: all 0.25s ease; }
.wl-radius-btn.active { background:#2C1A12; color:#FAF6F0; }
.ann-card { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.ann-enter { opacity:0; transform: translateY(18px) scale(0.97); }
.ann-exit { opacity:0; transform: translateY(10px) scale(0.97); }
.chart-bar { transform: scaleY(0); transform-origin: bottom; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.chart-live .chart-bar { transform: scaleY(1); }
[data-magnetic] { transition: transform 0.2s ease; will-change: transform; }

/* ── Animation layer ── */
.hero-underline { position: relative; display: inline-block; }
.hero-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.04em;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #C9A84C, #C67B5C);
  border-radius: 2px;
  animation: underline-draw 0.9s 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes underline-draw { to { width: 100%; } }

.step-badge { transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s; }
.reveal.revealed .step-badge { transform: scale(1); }

#how-it-works .reveal > div:first-child { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
#how-it-works .reveal:hover > div:first-child { transform: rotate(-8deg) scale(1.1); }

@keyframes star-pop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}
#testimonials .reveal.revealed .gap-1 svg { animation: star-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#testimonials .reveal.revealed .gap-1 svg:nth-child(2) { animation-delay: 0.08s; }
#testimonials .reveal.revealed .gap-1 svg:nth-child(3) { animation-delay: 0.16s; }
#testimonials .reveal.revealed .gap-1 svg:nth-child(4) { animation-delay: 0.24s; }
#testimonials .reveal.revealed .gap-1 svg:nth-child(5) { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .hero-underline::after { animation: none; width: 100%; }
  .step-badge { transform: scale(1); transition: none; }
  #testimonials .reveal.revealed .gap-1 svg { animation: none; }
  #how-it-works .reveal:hover > div:first-child { transform: none; }
}

/* Hero rotating word */
.word-rotator {
  display: inline-flex;
  flex-direction: column;
  height: 1.4em;
  overflow: hidden;
  vertical-align: bottom;
}
.word-rotator span {
  display: block;
  line-height: 1.4em;
  animation: word-cycle 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes word-cycle {
  0%, 16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-1.4em); }
  40%, 56% { transform: translateY(-2.8em); }
  60%, 76% { transform: translateY(-4.2em); }
  80%, 96% { transform: translateY(-5.6em); }
  100% { transform: translateY(-7em); }
}

/* Rising particles in CTA section */
.cta-particles span {
  position: absolute;
  bottom: -12px;
  border-radius: 9999px;
  background: rgba(224, 200, 120, 0.55);
  animation: particle-rise linear infinite;
}
.cta-particles span:nth-child(1) { left: 12%; width: 5px; height: 5px; animation-duration: 9s; }
.cta-particles span:nth-child(2) { left: 28%; width: 4px; height: 4px; animation-duration: 12s; animation-delay: 2s; }
.cta-particles span:nth-child(3) { left: 46%; width: 6px; height: 6px; animation-duration: 8s; animation-delay: 4s; }
.cta-particles span:nth-child(4) { left: 62%; width: 4px; height: 4px; animation-duration: 11s; animation-delay: 1s; }
.cta-particles span:nth-child(5) { left: 78%; width: 5px; height: 5px; animation-duration: 10s; animation-delay: 5s; }
.cta-particles span:nth-child(6) { left: 90%; width: 3px; height: 3px; animation-duration: 13s; animation-delay: 3s; }
@keyframes particle-rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-72vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .word-rotator span { animation: none; }
  .cta-particles { display: none; }
}

/* "Try the interface" hint above the attendee demo */
.try-hint { animation: hint-bob 2.2s ease-in-out infinite; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .try-hint { animation: none; } }