/* ============================================================
   motion.css — Motion layer inspired by antigravity.google
   - Material 3-style easing curves
   - Antigravity-grade fluid typography scale
   - Scroll-reveal, glass surface, gradient mesh, magnetic, sticky-stage
   ============================================================ */

/* ============== 1. Easing tokens (full Material library) ============== */
:root {
  /* Quad */
  --ease-in-quad:        cubic-bezier(.55, .085, .68, .53);
  --ease-out-quad:       cubic-bezier(.25, .46, .45, .94);
  --ease-in-out-quad:    cubic-bezier(.455, .03, .515, .955);
  /* Cubic */
  --ease-in-cubic:       cubic-bezier(.55, .055, .675, .19);
  --ease-out-cubic:      cubic-bezier(.215, .61, .355, 1);
  --ease-in-out-cubic:   cubic-bezier(.645, .045, .355, 1);
  /* Quart */
  --ease-in-quart:       cubic-bezier(.895, .03, .685, .22);
  --ease-out-quart:      cubic-bezier(.165, .84, .44, 1);
  --ease-in-out-quart:   cubic-bezier(.77, 0, .175, 1);
  /* Quint */
  --ease-in-quint:       cubic-bezier(.755, .05, .855, .06);
  --ease-out-quint:      cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-quint:   cubic-bezier(.86, 0, .07, 1);
  /* Expo */
  --ease-in-expo:        cubic-bezier(.95, .05, .795, .035);
  --ease-out-expo:       cubic-bezier(.19, 1, .22, 1);
  --ease-in-out-expo:    cubic-bezier(1, 0, 0, 1);
  /* Circ */
  --ease-in-circ:        cubic-bezier(.6, .04, .98, .335);
  --ease-out-circ:       cubic-bezier(.075, .82, .165, 1);
  --ease-in-out-circ:    cubic-bezier(.785, .135, .15, .86);
  /* Back (overshoot) */
  --ease-out-back:       cubic-bezier(.34, 1.85, .64, 1);
  --ease-in-out-back:    cubic-bezier(.68, -.55, .265, 1.55);

  /* Durations */
  --dur-1: 120ms;
  --dur-2: 250ms;
  --dur-3: 450ms;
  --dur-4: 700ms;
  --dur-5: 1100ms;

  /* Antigravity-style display scale */
  --display-1: clamp(2.75rem, 7vw, 6.7rem);   /* 44 → 107px */
  --display-2: clamp(2.25rem, 5.2vw, 4.5rem); /* 36 → 72  */
  --display-3: clamp(1.875rem, 4vw, 3.5rem);  /* 30 → 56  */
  --display-4: clamp(1.625rem, 3vw, 2.875rem);/* 26 → 46  */
}

/* ============== 2. Page-level smoothing ============== */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============== 3. Scroll reveal ============== */
/* Default state: hidden + translated, then animated on .is-in-view */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-4) var(--ease-out-quart),
    transform var(--dur-4) var(--ease-out-quart);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"] {
  transform: none;
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="up-lg"] { transform: translateY(56px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal="blur"]  { filter: blur(12px); transform: translateY(20px); }

[data-reveal].is-in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-3) var(--ease-out-quart),
    transform var(--dur-3) var(--ease-out-quart);
}
[data-reveal-stagger].is-in-view > * {
  opacity: 1;
  transform: none;
}
[data-reveal-stagger].is-in-view > *:nth-child(1) { transition-delay: 60ms; }
[data-reveal-stagger].is-in-view > *:nth-child(2) { transition-delay: 140ms; }
[data-reveal-stagger].is-in-view > *:nth-child(3) { transition-delay: 220ms; }
[data-reveal-stagger].is-in-view > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal-stagger].is-in-view > *:nth-child(5) { transition-delay: 380ms; }
[data-reveal-stagger].is-in-view > *:nth-child(6) { transition-delay: 460ms; }
[data-reveal-stagger].is-in-view > *:nth-child(7) { transition-delay: 540ms; }
[data-reveal-stagger].is-in-view > *:nth-child(8) { transition-delay: 620ms; }

/* ============== 4. Hero typography upgrade (Antigravity scale) ============== */
.t-display-1 {
  font-family: var(--font-display);
  font-size: var(--display-1);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 600;
  font-feature-settings: "palt";
}
.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--display-2);
  line-height: 1.05;
  letter-spacing: -0.024em;
  font-weight: 600;
}
.t-display-3 {
  font-family: var(--font-display);
  font-size: var(--display-3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Inline animated underline (Antigravity arrow-link style) */
.m-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: opacity var(--dur-1) var(--ease-out-cubic);
}
.m-arrow-link::after {
  content: "→";
  display: inline-block;
  font-weight: 500;
  transition: transform var(--dur-2) var(--ease-out-expo);
}
.m-arrow-link:hover::after,
.m-arrow-link:focus-visible::after {
  transform: translateX(6px);
}
.m-arrow-link::before {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out-quart);
}
.m-arrow-link:hover::before,
.m-arrow-link:focus-visible::before {
  transform: scaleX(1);
}

/* ============== 5. Frosted glass surface ============== */
.m-glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: var(--radius-lg);
}
.m-glass--dark {
  background: rgba(26, 19, 34, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.m-glass--light {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* ============== 6. Gradient mesh / aurora background ============== */
.m-mesh {
  position: relative;
  isolation: isolate;
}
.m-mesh::before,
.m-mesh::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .65;
  pointer-events: none;
  animation: meshDrift 14s ease-in-out infinite alternate;
}
.m-mesh::before {
  width: 50vw;
  height: 50vw;
  top: -10%; left: -10%;
  background: radial-gradient(circle, #8b168f 0%, transparent 70%);
}
.m-mesh::after {
  width: 45vw;
  height: 45vw;
  bottom: -15%; right: -5%;
  background: radial-gradient(circle, #f4a93a 0%, transparent 70%);
  animation-delay: -4s;
}
.m-mesh--soft::before { opacity: .25; }
.m-mesh--soft::after  { opacity: .20; }

@keyframes meshDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6%, -4%) scale(1.08); }
  100% { transform: translate(-4%, 6%) scale(.96); }
}

/* ============== 7. Aurora line (thin gradient divider) ============== */
.m-aurora {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(139,22,143,.0) 8%,
    rgba(139,22,143,.6) 35%,
    rgba(244,169,58,.7) 55%,
    rgba(139,22,143,.6) 75%,
    transparent 100%);
  border: 0;
  margin: 0;
}

/* ============== 8. Magnetic hover (JS-driven, CSS transition only) ============== */
[data-magnet] {
  transition: transform var(--dur-3) var(--ease-out-expo);
  will-change: transform;
}
[data-magnet-target] {
  transition: transform var(--dur-3) var(--ease-out-expo);
  will-change: transform;
}

/* ============== 9. Sticky-stage (Antigravity use-cases-detail style) ============== */
.m-stage {
  position: relative;
}
.m-stage__pin {
  position: sticky;
  top: calc(var(--header-height, 72px) + 24px);
  height: calc(100vh - var(--header-height, 72px) - 48px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.m-stage__slides {
  display: grid;
}
.m-stage__slide {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px);
}

/* ============== 10. Marquee / infinite ticker ============== */
.m-marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.m-marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.m-marquee:hover .m-marquee__track {
  animation-play-state: paused;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============== 11. Hero kinetic underline / shimmer ============== */
.m-shimmer {
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerSweep 4.5s var(--ease-in-out-quint) infinite;
}
@keyframes shimmerSweep {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

/* ============== 12. Cursor / pointer follow (subtle spotlight) ============== */
.m-spotlight {
  position: relative;
  overflow: hidden;
}
.m-spotlight::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(244,169,58,.18),
    rgba(139,22,143,.10) 22%,
    transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out-quart);
  z-index: 0;
}
.m-spotlight:hover::before { opacity: 1; }
.m-spotlight > * { position: relative; z-index: 1; }

/* ============== 13. Scroll progress bar (page top) ============== */
.m-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0;
  background: linear-gradient(90deg, #f4a93a, #8b168f);
  z-index: 9999;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ============== 14. Hero parallax image (data-parallax) ============== */
[data-parallax] {
  will-change: transform;
  transition: transform .05s linear;
}

/* ============== 15. Number counter ============== */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ============== 16. Section title kinetic entry ============== */
.m-headline-mask {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}
.m-headline-mask > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur-4) var(--ease-out-quart);
  transition-delay: var(--reveal-delay, 0ms);
}
.m-headline-mask.is-in-view > span {
  transform: translateY(0);
}

/* ============== 17. Card lift-on-hover (Antigravity card style) ============== */
.m-lift {
  transition:
    transform var(--dur-3) var(--ease-out-back),
    box-shadow var(--dur-3) var(--ease-out-cubic);
}
.m-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(20, 20, 30, 0.18);
}

/* ============== 18. Subtle bg-noise grain ============== */
.m-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.7'/></svg>");
  z-index: 1;
}

/* ============== 19. Pill-hover (CTA in hero) ============== */
.m-pill {
  position: relative;
  overflow: hidden;
}
.m-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 200% at 50% 110%, rgba(244,169,58,.45), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out-quart);
  pointer-events: none;
}
.m-pill:hover::after,
.m-pill:focus-visible::after { opacity: 1; }