/* transitions.dev — motion tokens + landing-page transitions */

:root {
  /* Motion tokens */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  --distance-medium: 12px;
  --blur-small: 2px;
  --blur-medium: 3px;

  /* Texts reveal */
  --stagger-dur: var(--duration-very-slow);
  --stagger-distance: var(--distance-medium);
  --stagger-stagger: var(--duration-stagger);
  --stagger-blur: var(--blur-medium);
  --stagger-ease: var(--ease-smooth-out);

  /* Scroll reveal (panel-reveal inspired) */
  --scroll-reveal-y: 28px;
  --scroll-reveal-open-dur: var(--duration-slow);
  --scroll-reveal-blur: var(--blur-small);
  --scroll-reveal-ease: var(--ease-smooth-out);

  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: var(--ease-smooth-out);
  --avatar-ease-out: var(--ease-bounce-strong);

  /* Card hover tilt */
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: var(--ease-smooth-out);
  --tilt-follow: 400ms;
  --tilt-follow-ease: var(--ease-smooth-out);
  --tilt-glare-opacity: 0.28;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: var(--ease-smooth-out);
}

/* ── Texts reveal (hero) ─────────────────────────────────────── */

.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}

.t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}

.t-stagger-line--3 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}

.t-stagger-line--4 {
  transition-delay: calc(var(--stagger-stagger) * 3);
}

.t-stagger-line--5 {
  transition-delay: calc(var(--stagger-stagger) * 4);
}

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero-actions.t-stagger-line {
  display: flex;
  flex-wrap: wrap;
}

.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

/* ── Scroll reveal ───────────────────────────────────────────── */

.t-scroll-reveal {
  opacity: 0;
  transform: translateY(var(--scroll-reveal-y));
  filter: blur(var(--scroll-reveal-blur));
  transition:
    opacity var(--scroll-reveal-open-dur) var(--scroll-reveal-ease),
    transform var(--scroll-reveal-open-dur) var(--scroll-reveal-ease),
    filter var(--scroll-reveal-open-dur) var(--scroll-reveal-ease);
  transition-delay: calc(var(--reveal-delay, 0) * var(--duration-stagger));
  will-change: transform, opacity, filter;
}

.t-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.site-header.t-scroll-reveal {
  --scroll-reveal-y: 10px;
  --scroll-reveal-open-dur: var(--duration-fast);
}

/* ── Avatar group hover (chips, shortcut row) ────────────────── */

.t-avatar {
  transform-origin: center;
  transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
  will-change: transform;
}

/* ── Card hover tilt (showcase panels) ─────────────────────────── */

.showcase-tilt {
  touch-action: none;
  height: 100%;
}

.showcase-tilt .t-tilt-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}

.showcase-tilt .t-tilt-card.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}

.t-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255, 255, 255, 0.48),
      rgba(255, 255, 255, 0.06) 52%,
      rgba(255, 255, 255, 0) 84%
    ),
    radial-gradient(
      circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.04) 58%,
      rgba(255, 255, 255, 0) 78%
    ),
    radial-gradient(
      circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 88%
    );
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}

.showcase-tilt.is-hover .t-tilt-glare {
  opacity: var(--tilt-glare-opacity);
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line,
  .t-scroll-reveal,
  .t-avatar,
  .showcase-tilt .t-tilt-card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}