/* Premium motion layer for Focus Trip */

.motion-ready .scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition:
    opacity 760ms cubic-bezier(.16, 1, .3, 1),
    transform 760ms cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.motion-ready .scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-hover-card {
  transform-origin: center;
  transition:
    transform 300ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 300ms cubic-bezier(.16, 1, .3, 1),
    border-color 300ms cubic-bezier(.16, 1, .3, 1),
    background-color 300ms cubic-bezier(.16, 1, .3, 1),
    opacity 300ms cubic-bezier(.16, 1, .3, 1);
}

.motion-hover-card:hover {
  transform: translate3d(0, -8px, 0) scale(1.03);
  box-shadow: 0 26px 70px rgba(35, 33, 29, .18);
}

[data-theme="dark"] .motion-hover-card:hover {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36);
}

.motion-progress-width,
.motion-progress-height {
  will-change: width, height;
}

.motion-progress-grown {
  transition:
    width 1100ms cubic-bezier(.16, 1, .3, 1),
    height 1100ms cubic-bezier(.16, 1, .3, 1);
}

.motion-ready .app-page .sidebar,
.app-page.motion-ready .sidebar {
  animation: appShellIn 620ms cubic-bezier(.16, 1, .3, 1) both;
}

.motion-ready .app-page .app-topbar,
.app-page.motion-ready .app-topbar {
  animation: topbarIn 620ms cubic-bezier(.16, 1, .3, 1) 80ms both;
}

.motion-ready .auth-page .auth-left,
.auth-page.motion-ready .auth-left {
  animation: authPanelIn 760ms cubic-bezier(.16, 1, .3, 1) both;
}

.motion-ready .auth-page .auth-right,
.auth-page.motion-ready .auth-right {
  animation: authPanelIn 760ms cubic-bezier(.16, 1, .3, 1) 100ms both;
}

.motion-ready .auth-page .auth-form-wrapper,
.auth-page.motion-ready .auth-form-wrapper {
  animation: authFormIn 820ms cubic-bezier(.16, 1, .3, 1) 140ms both;
}

.motion-ready .tab-content.tab-motion-active {
  animation: tabContentIn 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.landing-page .hero {
  isolation: isolate;
}

.landing-page .hero-parallax-bg {
  position: absolute;
  inset: 92px 34px 32px;
  z-index: 0;
  pointer-events: none;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 18%, rgba(139, 216, 255, .18) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 16%, rgba(246, 215, 122, .18) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 64%, rgba(184, 156, 255, .16) 0 1px, transparent 2px),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.018));
  background-size: 180px 180px, 260px 260px, 220px 220px, auto;
  transform: translate3d(0, var(--hero-parallax-y, 0px), 0);
  will-change: transform;
}

.landing-page .hero::before {
  z-index: 1;
}

.landing-page .hero-content,
.landing-page .hero-visual {
  will-change: transform;
}

.landing-page.motion-ready .hero-badge,
.landing-page.motion-ready .hero-title,
.landing-page.motion-ready .hero-subtitle,
.landing-page.motion-ready .hero-cta,
.landing-page.motion-ready .hero-note {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.landing-page.motion-ready.hero-loaded .hero-badge,
.landing-page.motion-ready.hero-loaded .hero-title,
.landing-page.motion-ready.hero-loaded .hero-subtitle,
.landing-page.motion-ready.hero-loaded .hero-cta,
.landing-page.motion-ready.hero-loaded .hero-note {
  animation: heroTextIn 820ms cubic-bezier(.16, 1, .3, 1) both;
}

.landing-page.motion-ready.hero-loaded .hero-title {
  animation-delay: 90ms;
}

.landing-page.motion-ready.hero-loaded .hero-subtitle {
  animation-delay: 180ms;
}

.landing-page.motion-ready.hero-loaded .hero-cta {
  animation-delay: 260ms;
}

.landing-page.motion-ready.hero-loaded .hero-note {
  animation-delay: 340ms;
}

.landing-page.motion-ready .mockup-card {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.92);
}

.landing-page.motion-ready.hero-loaded .mockup-card {
  animation: mockupScaleIn 920ms cubic-bezier(.16, 1, .3, 1) 180ms both;
}

.landing-page.motion-ready .star-point {
  opacity: 0;
  transform: scale(.72);
}

.landing-page.motion-ready.hero-loaded .star-point {
  animation: starWake 900ms cubic-bezier(.16, 1, .3, 1) both, starPulse 3.8s ease-in-out 900ms infinite;
}

.landing-page.motion-ready.hero-loaded .star-b { animation-delay: 120ms, 1020ms; }
.landing-page.motion-ready.hero-loaded .star-c { animation-delay: 220ms, 1120ms; }
.landing-page.motion-ready.hero-loaded .star-d { animation-delay: 320ms, 1220ms; }
.landing-page.motion-ready.hero-loaded .star-e { animation-delay: 420ms, 1320ms; }
.landing-page.motion-ready.hero-loaded .star-f { animation-delay: 520ms, 1420ms; }
.landing-page.motion-ready.hero-loaded .star-g { animation-delay: 620ms, 1520ms; }

.landing-page.motion-ready .constellation-line {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.landing-page.motion-ready.hero-loaded .constellation-line {
  animation: constellationDraw 1200ms cubic-bezier(.16, 1, .3, 1) 480ms both;
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mockupScaleIn {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes starWake {
  from {
    opacity: 0;
    transform: scale(.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes starPulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.45);
  }
}

@keyframes constellationDraw {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes appShellIn {
  from {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes topbarIn {
  from {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes authPanelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes authFormIn {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes tabContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 680px) {
  .landing-page .hero-parallax-bg {
    inset: 72px 8px 16px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .scroll-reveal,
  .motion-hover-card,
  .motion-progress-width,
  .motion-progress-height,
  .motion-progress-grown,
  .landing-page .hero-parallax-bg,
  .landing-page .hero-content,
  .landing-page .hero-visual,
  .landing-page.motion-ready .hero-badge,
  .landing-page.motion-ready .hero-title,
  .landing-page.motion-ready .hero-subtitle,
  .landing-page.motion-ready .hero-cta,
  .landing-page.motion-ready .hero-note,
  .landing-page.motion-ready .mockup-card,
  .landing-page.motion-ready .star-point,
  .landing-page.motion-ready .constellation-line,
  .app-page.motion-ready .sidebar,
  .app-page.motion-ready .app-topbar,
  .auth-page.motion-ready .auth-left,
  .auth-page.motion-ready .auth-right,
  .auth-page.motion-ready .auth-form-wrapper,
  .motion-ready .tab-content.tab-motion-active {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}