/* ==========================================================================
   MyQuitPal — core design system
   Shared by the homepage (styles.css) and every subpage (legal.css).
   Light-first. Purple accent only. No blue.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- ink / paper ------------------------------------------------------ */
  --ink: #0e0b14;
  --ink-soft: #1a1526;
  --paper: #ffffff;
  --paper-2: #fbfaff;
  --paper-3: #f5f2ff;

  /* --- violet scale ----------------------------------------------------- */
  --v-50: #f7f4ff;
  --v-100: #eee8ff;
  --v-200: #ddd2ff;
  --v-300: #c3aeff;
  --v-400: #a582ff;
  --v-500: #8b5cf6;
  --v-600: #7442ed;
  --v-700: #5b2cc9;
  --v-800: #45209c;

  /* --- text ------------------------------------------------------------- */
  --text: #120f1a;
  --text-2: #4e4759;
  --text-3: #6d6579;
  --text-on-dark: #ffffff;
  --text-on-dark-2: rgba(255, 255, 255, 0.72);
  --text-on-dark-3: rgba(255, 255, 255, 0.52);

  /* --- lines ------------------------------------------------------------ */
  --line: rgba(16, 13, 22, 0.1);
  --line-strong: rgba(16, 13, 22, 0.16);
  --line-violet: rgba(116, 66, 237, 0.16);
  --line-on-dark: rgba(255, 255, 255, 0.14);

  /* --- radii ------------------------------------------------------------ */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-2xl: 56px;
  --r-pill: 999px;

  /* --- elevation -------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(20, 12, 45, 0.04), 0 4px 12px rgba(20, 12, 45, 0.05);
  --sh-2: 0 2px 6px rgba(20, 12, 45, 0.05), 0 12px 28px rgba(20, 12, 45, 0.08);
  --sh-3: 0 4px 12px rgba(20, 12, 45, 0.06), 0 28px 64px rgba(20, 12, 45, 0.11);
  --sh-4: 0 8px 20px rgba(20, 12, 45, 0.07), 0 48px 100px rgba(20, 12, 45, 0.14);
  --sh-violet: 0 10px 24px rgba(116, 66, 237, 0.22), 0 24px 56px rgba(116, 66, 237, 0.16);
  --sh-violet-lg: 0 16px 36px rgba(116, 66, 237, 0.26), 0 40px 90px rgba(116, 66, 237, 0.2);

  /* --- motion ----------------------------------------------------------- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);

  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 620ms;
  --t-reveal: 1000ms;

  /* --- layout ----------------------------------------------------------- */
  --max-w: 1180px;
  --max-w-narrow: 760px;
  --gutter: 24px;
  --header-h: 74px;

  /* --- type ------------------------------------------------------------- */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* --- scroll-driven values (written by motion.js) ---------------------- */
  --scroll-progress: 0;
  --pointer-x: 0.5;
  --pointer-y: 0.5;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Native smooth-scroll is steppy. motion.js drives an eased scroll instead
     and re-enables this as a fallback when JS is unavailable. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html.js {
  scroll-behavior: auto;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--paper-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--v-200);
  color: var(--ink);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max-w));
  margin-inline: auto;
}

.container-narrow {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max-w-narrow));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(88px, 11vw, 148px);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  color: var(--paper);
  background: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--t-mid) var(--ease-expo);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   Ambient surface — grain + glow
   ========================================================================== */

.grain {
  position: fixed;
  z-index: 1;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  will-change: transform;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--paper);
  background: var(--v-600);
  box-shadow: var(--sh-violet);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    box-shadow var(--t-mid) var(--ease-expo),
    background var(--t-mid) var(--ease-expo),
    transform 120ms var(--ease-quart);
}

/* Sheen that wipes across on hover. */
.btn::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.26) 48%,
    transparent 76%
  );
  content: "";
  transform: translateX(-120%);
  transition: transform 720ms var(--ease-expo);
}

.btn:hover {
  background: var(--v-700);
  box-shadow: var(--sh-violet-lg);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn:active {
  transform: scale(0.972);
  transition-duration: 90ms;
}

.btn-ghost {
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-1);
}

.btn-ghost:hover {
  color: var(--v-700);
  background: var(--paper);
  border-color: var(--line-violet);
  box-shadow: var(--sh-2);
}

.btn-sm {
  min-height: 44px;
  padding-inline: 20px;
  font-size: 0.9rem;
}

/* Text link with an arrow that leans on hover. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.text-link > span[aria-hidden] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--v-600);
  background: var(--v-100);
  font-size: 0.82em;
  transition:
    transform var(--t-mid) var(--ease-spring),
    background var(--t-mid) var(--ease-expo),
    color var(--t-mid) var(--ease-expo);
}

.text-link:hover > span[aria-hidden] {
  color: var(--paper);
  background: var(--v-600);
  transform: translate(3px, -3px);
}

/* Animated underline for nav-style links. */
.link-wipe {
  position: relative;
  text-decoration: none;
}

.link-wipe::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-mid) var(--ease-expo);
}

.link-wipe:hover::after,
.link-wipe[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ==========================================================================
   Small type utilities
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  color: var(--v-600);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transform-origin: left center;
  transform: scaleX(var(--eyebrow-scale, 1));
  transition: transform var(--t-slow) var(--ease-expo) 240ms;
}

[data-reveal] .eyebrow::before,
.eyebrow[data-reveal]::before {
  --eyebrow-scale: 0;
}

.is-in .eyebrow::before,
.eyebrow.is-in::before {
  --eyebrow-scale: 1;
}

.eyebrow-light {
  color: var(--v-300);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line-violet);
  border-radius: var(--r-pill);
  color: var(--v-700);
  background: var(--v-50);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ==========================================================================
   Motion system
   --------------------------------------------------------------------------
   Elements opt in with `data-reveal="<variant>"`. motion.js adds `.is-in`
   when they cross the viewport, and sets `--rv-i` for index-based stagger.
   ========================================================================== */

/* Reveals animate the independent `translate` / `scale` properties, never
   `transform` — so cards can keep their own persistent transforms
   (tilt, perspective, editorial offsets) after entering. */

.js [data-reveal] {
  --rv-i: 0;
  --rv-stagger: 70ms;
  --rv-dur: var(--t-reveal);
  opacity: 0;
  transition:
    opacity var(--rv-dur) var(--ease-expo),
    translate var(--rv-dur) var(--ease-expo),
    scale var(--rv-dur) var(--ease-expo),
    filter var(--rv-dur) var(--ease-expo),
    clip-path var(--rv-dur) var(--ease-expo);
  transition-delay: calc(var(--rv-i) * var(--rv-stagger) + var(--rv-delay, 0ms));
  will-change: translate, opacity;
}

.js [data-reveal=""],
.js [data-reveal="up"] {
  translate: 0 32px;
}

.js [data-reveal="down"] {
  translate: 0 -28px;
}

.js [data-reveal="left"] {
  translate: -38px 0;
}

.js [data-reveal="right"] {
  translate: 38px 0;
}

.js [data-reveal="scale"] {
  translate: 0 26px;
  scale: 0.93;
}

.js [data-reveal="rise"] {
  translate: 0 64px;
  scale: 0.97;
}

.js [data-reveal="blur"] {
  filter: blur(12px);
  translate: 0 20px;
}

.js [data-reveal="clip"] {
  clip-path: inset(0 0 100% 0);
  translate: 0 24px;
}

.js [data-reveal].is-in {
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
  translate: 0 0;
  scale: 1;
}

/* Once the entrance is done, drop the compositor hint. */
.js [data-reveal].is-settled {
  will-change: auto;
}

/* --- headline line masks -------------------------------------------------
   motion.js wraps each rendered line of `[data-split]` in .ln > .ln-i so the
   text can rise out from behind a mask. Authors can also write it by hand. */

.ln {
  display: block;
  overflow: hidden;
  /* Descenders (g, y, p) would otherwise be clipped by the mask. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.ln-i {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition:
    transform 1150ms var(--ease-expo),
    opacity 900ms var(--ease-expo);
  transition-delay: calc(var(--ln-i, 0) * 95ms + var(--ln-delay, 0ms));
  opacity: 0;
  will-change: transform;
}

.is-in .ln-i,
.ln-i.is-in {
  transform: none;
  opacity: 1;
}

/* --- pointer-reactive card ----------------------------------------------
   motion.js writes --mx/--my (0-1) and --tilt-x/--tilt-y (deg). */

.tilt {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
    translate3d(0, var(--tilt-lift, 0px), 0);
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease-expo);
}

.tilt.is-tracking {
  transition: transform 90ms linear;
}

/* Soft spotlight that follows the pointer across a card. */
.spotlight::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    460px circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%),
    var(--spot-color, rgba(255, 255, 255, 0.16)),
    transparent 62%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-expo);
}

.spotlight:hover::before {
  opacity: 1;
}

/* --- scroll progress ---------------------------------------------------- */

.progress-rail {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.progress-rail span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--v-400), var(--v-600));
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

/* --- marquee ------------------------------------------------------------ */

.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  user-select: none;
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  animation: marquee-scroll var(--marquee-dur, 42s) linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

/* --- ambient float ------------------------------------------------------ */

@keyframes float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotate(-1.1deg);
  }
}

@keyframes pulse-ring {
  0% {
    opacity: 0.5;
    transform: scale(0.86);
  }
  70% {
    opacity: 0;
    transform: scale(1.18);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

/* ==========================================================================
   Focus
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--v-400);
  outline-offset: 3px;
  border-radius: 6px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   Reduced motion — everything above degrades to a plain, static page.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html,
  html.js {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal],
  .js [data-reveal].is-in {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }

  .ln-i {
    opacity: 1 !important;
    transform: none !important;
  }

  .tilt {
    transform: none !important;
  }

  .marquee-track {
    animation: none !important;
  }
}