/*
 * st-okay-theme.css — carries the /start landing look (st-landing-okay.css,
 * 2026-10-21) to the app's other pages WITHOUT changing their structure:
 * no layout, no markup, no routes. Only surface, type, buttons and motion.
 * Loaded last on: home, ae-mode, /st/v3/*, /st/style-run/*, /st/ae-template,
 * /start/auth|ask|checkout|rules, success, cancel. Remove the <link> to revert.
 * Motion (kinetic h1 + card reveal) comes from js/st_okay_motion.js.
 */
:root {
  --okt-ground: #0b0814;
  --okt-raise: #161026;
  --okt-raise-2: #211836;
  --okt-line: rgba(210, 187, 255, .12);
  --okt-ink: #f6f2ff;
  --okt-ink-2: #c9bedf;
  --okt-accent: #d2bbff;
  --okt-accent-ink: #1d0846;
  --okt-violet: #7c3aed;
  --okt-yellow: #ffe24a;
  --okt-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Same violet wash + faint pixel grid as the landing hero, behind every page */
body.st-okay { isolation: isolate; }
body.st-okay::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 18% 0%, rgba(124, 58, 237, .20), transparent 70%),
    radial-gradient(40% 35% at 100% 8%, rgba(210, 187, 255, .07), transparent 70%);
}
body.st-okay::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(210, 187, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 187, 255, .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 55% at 50% 0%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, #000 20%, transparent 80%);
}

/* Headings: tight, heavy, room for Thai tone marks */
body.st-okay h1 { letter-spacing: -.035em; font-weight: 800; }
body.st-okay h2 { letter-spacing: -.025em; }

/* Kinetic words (st_okay_motion.js wraps h1 words in .okk > span) */
.okk { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .32em 0 .16em; margin: -.32em 0 -.16em; }
.okk > span { display: inline-block; }
html.okt-motion .okk > span { transform: translateY(105%) rotate(4deg); transition: transform .9s var(--okt-ease); transition-delay: calc(var(--i, 0) * 55ms); }
html.okt-motion .okk-in .okk > span { transform: none; }

/* Primary buttons → landing pill (lavender, lift + tilt on hover) */
body.st-okay .v2-btn-primary,
body.st-okay .v2-btn-violet,
body.st-okay .st-btn-primary,
body.st-okay .st-acct-btn.primary,
body.st-okay .answers .yes {
  background: var(--okt-accent) !important;
  color: var(--okt-accent-ink) !important;
  border-radius: 999px !important;
  border-color: transparent !important;
  font-weight: 800;
  box-shadow: none;
  transition: transform .35s var(--okt-ease), box-shadow .35s var(--okt-ease), opacity .2s ease !important;
}
body.st-okay .v2-btn-primary:hover:not(:disabled),
body.st-okay .v2-btn-violet:hover:not(:disabled),
body.st-okay .st-btn-primary:hover:not(:disabled),
body.st-okay .answers .yes:hover {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 0 10px 0 -2px rgba(0, 0, 0, .35);
}
body.st-okay .v2-btn-primary:disabled,
body.st-okay .st-btn-primary:disabled { opacity: .55; }
body.st-okay .v2-btn-ghost,
body.st-okay .st-btn-ghost,
body.st-okay .answers .no {
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(246, 242, 255, .22);
}

/* Cards: tone step + hairline instead of heavy borders, softer radius */
body.st-okay .v2-card,
body.st-okay .st-account-card,
body.st-okay .st-acct-panel,
body.st-okay .st-create-card,
body.st-okay .st-onboard-card {
  border-radius: 22px !important;
  box-shadow: inset 0 0 0 1px var(--okt-line), 0 24px 60px -30px rgba(0, 0, 0, .7) !important;
}

/* Card reveal (st_okay_motion.js adds .okt-rv, then .okt-in when on screen) */
html.okt-motion .okt-rv { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s var(--okt-ease), transform .8s var(--okt-ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.okt-motion .okt-rv.okt-in { opacity: 1; transform: none; }

/* Small labels / kickers read as the landing's lavender kicker */
body.st-okay .kicker,
body.st-okay .v2-kicker { color: var(--okt-accent); font-weight: 700; letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.okt-motion .okt-rv, html.okt-motion .okk > span { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* Inline links inside forms/cards were the browser's default blue */
body.st-okay .st-account-card a:not([class]),
body.st-okay .st-account a:not([class]) { color: var(--okt-accent); text-underline-offset: 3px; }