/* ikto motion layer.
 *
 * One easing family, three durations, only transform and opacity on the hot
 * path. Every effect turns off under prefers-reduced-motion. motion.js adds
 * the classes and custom properties used here; without JS the page is the
 * same page, just still.
 */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 640ms;
  --glow-teal: rgba(13, 148, 136, 0.55);
  --glow-blue: rgba(6, 134, 212, 0.45);
  --glow-violet: rgba(139, 92, 246, 0.42);
}

html { overflow-x: clip; }

/* ---- Page transitions (cross-document View Transitions) ---------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 160ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 280ms var(--ease-out) both; }
.sidebar { view-transition-name: ikto-sidebar; }
.app-top-bar { view-transition-name: ikto-topbar; }
.land-top { view-transition-name: ikto-landtop; }
::view-transition-group(ikto-sidebar),
::view-transition-group(ikto-topbar),
::view-transition-group(ikto-landtop) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px) scale(0.995); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px) scale(0.995); } }

/* ---- Navigation progress ------------------------------------------------ */
.nav-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-pink));
  box-shadow: 0 0 12px var(--glow-teal);
}
.nav-progress.is-on {
  opacity: 1;
  animation: nav-progress 2.4s var(--ease-out) forwards;
}
@keyframes nav-progress {
  0% { transform: scaleX(0.05); }
  40% { transform: scaleX(0.55); }
  100% { transform: scaleX(0.92); }
}

/* ---- Living aurora --------------------------------------------------------- */
.motion-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.motion-aurora i {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
  mix-blend-mode: screen;
}
.motion-aurora i:nth-child(1) {
  left: -18vmax;
  top: -24vmax;
  background: radial-gradient(circle, var(--glow-teal), transparent 62%);
  animation: blob-a 26s var(--ease-in-out) infinite alternate;
}
.motion-aurora i:nth-child(2) {
  right: -22vmax;
  top: -10vmax;
  background: radial-gradient(circle, var(--glow-blue), transparent 62%);
  animation: blob-b 32s var(--ease-in-out) infinite alternate;
}
.motion-aurora i:nth-child(3) {
  left: 20vmax;
  bottom: -34vmax;
  background: radial-gradient(circle, var(--glow-violet), transparent 62%);
  animation: blob-c 38s var(--ease-in-out) infinite alternate;
  opacity: 0.38;
}
.motion-aurora::after {
  /* Pointer glow: follows the cursor on a fine pointer. */
  content: "";
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  left: calc(var(--px, 50) * 1% - 23vmax);
  top: calc(var(--py, 30) * 1% - 23vmax);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.13), transparent 60%);
  transition: left 0.9s var(--ease-out), top 0.9s var(--ease-out);
}
body:has(.app-shell) .motion-aurora { opacity: 0.55; }
@keyframes blob-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); } }
@keyframes blob-b { to { transform: translate3d(-12vmax, 14vmax, 0) scale(0.9); } }
@keyframes blob-c { to { transform: translate3d(-10vmax, -16vmax, 0) scale(1.2); } }

/* ---- Reveal on scroll -------------------------------------------------------- */
[data-reveal] {
  opacity: 1;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 55ms);
}
html.motion [data-reveal]:not(.is-in) {
  opacity: 0;
  animation: reveal-failsafe 0.01s linear 0.9s forwards;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}
[data-reveal="left"] { transform: translate3d(-22px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.92); }

/* ---- Kinetic headline ----------------------------------------------------------- */
.kinetic .kw {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.6em, 0) rotate(2deg);
  filter: blur(6px);
  animation: kw-in 0.7s var(--ease-out) forwards;
  animation-delay: calc(var(--w, 0) * 70ms + 120ms);
}
@keyframes kw-in { to { opacity: 1; transform: none; filter: none; } }
.sell-grad {
  background-size: 220% 100%;
  animation: grad-flow 6s var(--ease-in-out) infinite alternate;
}
@keyframes grad-flow { to { background-position: 100% 0; } }

/* ---- Buttons: lift, press, ripple, magnet --------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--mgx, 0), var(--mgy, 0), 0);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    background-color var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
}
.btn:not(:disabled):hover { box-shadow: 0 10px 28px -10px var(--glow-teal); }
.btn:not(:disabled):active { transform: translate3d(var(--mgx, 0), var(--mgy, 0), 0) scale(0.965); transition-duration: 80ms; }
.btn.primary:not(:disabled) {
  background-image: linear-gradient(110deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent) 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    background-position 0.8s var(--ease-out);
}
.btn.primary:not(:disabled):hover { background-position: 100% 0; box-shadow: 0 14px 36px -12px var(--glow-blue); }
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: ripple 0.6s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(var(--rs, 30)); opacity: 0; } }
.btn[aria-busy="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Card spotlight + tilt ------------------------------------------------------- */
.spot {
  position: relative;
  isolation: isolate;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(13, 148, 136, 0.16), transparent 45%);
  transition: opacity var(--t-med) var(--ease-out);
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .spot:hover::after { opacity: 1; }
  .spot.tilt:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6);
  }
}

/* ---- Navigation: sliding active pill -------------------------------------------- */
.sidebar-nav { position: relative; }
.sidebar-nav > a { position: relative; z-index: 1; }
.nav-pill {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  height: var(--ph, 40px);
  transform: translate3d(0, var(--py, 0), 0);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.95), rgba(8, 145, 178, 0.88));
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.35);
  transition: transform 0.28s var(--ease-out), height 0.28s var(--ease-out), opacity 0.2s;
  pointer-events: none;
  opacity: 0;
}
.land-nav-pill a { position: relative; }
.land-nav-pill a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-med) var(--ease-out);
}
.land-nav-pill a:hover::after { transform: scaleX(1); }

/* ---- Inputs ------------------------------------------------------------------------ */
.input {
  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background-color var(--t-med);
}
.input:focus-visible,
.input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 24px -16px var(--glow-teal);
}

/* ---- Chips, progress, stat tiles ---------------------------------------------------- */
.clip-suggest-chip {
  animation: chip-in 0.45s var(--ease-spring) both;
  animation-delay: calc(var(--d, 0) * 50ms);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-med), border-color var(--t-med);
}
.clip-suggest-chip:hover { transform: translateY(-2px); }
.clip-suggest-chip.is-selected { animation: chip-pick 0.5s var(--ease-spring); }
@keyframes chip-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.94); } }
@keyframes chip-pick { 40% { transform: scale(1.04); } }
#clip-progress:not([hidden]),
#studio-asr-progress:not([hidden]) {
  background-image:
    linear-gradient(90deg, var(--accent) var(--pct, 0%), rgba(255, 255, 255, 0.14) var(--pct, 0%)),
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  background-size: 100% 100%, 200% 100%;
  background-blend-mode: overlay;
  animation: shimmer 1.6s linear infinite;
}
.stat-tile strong, .dash-kpi-value { font-variant-numeric: tabular-nums; }

/* ---- Landing hero motion graphic --------------------------------------------------- */
.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: min(1120px, 100%);
  margin: 0 auto;
}
.hero-reel {
  position: relative;
  justify-self: center;
  width: min(270px, 70vw);
  margin: 0 auto 40px;
  aspect-ratio: 9 / 16;
  transform: perspective(1200px) rotateY(var(--hry, -10deg)) rotateX(var(--hrx, 4deg));
  transition: transform 0.8s var(--ease-out);
  animation: reel-float 7s var(--ease-in-out) infinite alternate, reel-in 1s var(--ease-out) both;
}
.hero-reel-phone {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  padding: 9px;
  background: linear-gradient(160deg, #2a3446, #0b0f14 60%);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 60px -10px var(--glow-teal);
}
.hero-reel canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 26px;
  background: #0b0f14;
}
.hero-reel-chip {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: rgba(13, 20, 30, 0.72);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  animation: chip-float 5s var(--ease-in-out) infinite alternate, chip-in 0.6s var(--ease-spring) both;
}
.hero-reel-chip b { color: #5eead4; }
.hero-reel-chip.c1 { left: -14%; top: 18%; animation-delay: -1s, 0.9s; }
.hero-reel-chip.c2 { right: -16%; top: 44%; animation-delay: -2.5s, 1.1s; }
.hero-reel-chip.c3 { left: -10%; bottom: 14%; animation-delay: -3.5s, 1.3s; }
@keyframes reel-float { to { translate: 0 -12px; } }
@keyframes reel-in { from { opacity: 0; transform: perspective(1200px) rotateY(-30deg) translateY(30px) scale(0.9); } }
@keyframes chip-float { to { translate: 0 -8px; } }
@media (min-width: 900px) {
  .hero-stage { grid-template-columns: minmax(0, 1.1fr) minmax(260px, 420px); align-items: start; }
  .hero-stage .sell-hero-inner { margin: 0; }
  .hero-reel { width: min(300px, 100%); margin: 24px auto; }
}

.marquee {
  position: relative;
  overflow: hidden;
  margin: 0 0 12px;
  padding: 10px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-soft);
  font-weight: 650;
  font-size: 0.85rem;
  white-space: nowrap;
}
.marquee-track span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
}
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---- Clip studio extras ------------------------------------------------------------- */
.clip-preview-frame { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.clip-preview-frame:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-border), 0 0 50px -16px var(--glow-teal); }
.clip-result { animation: chip-in 0.5s var(--ease-out) both; }

/* ---- Reduced motion: still, instant, readable ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  html.motion [data-reveal]:not(.is-in) { opacity: 1; transform: none; animation: none; }
  .kinetic .kw { opacity: 1; transform: none; filter: none; }
  .motion-aurora i { animation: none; }
  .hero-reel { transform: none; }
  .btn { transform: none; }
}