/* Flair — the "wow" layer: sequenced page transitions, the letter wheel, the gold reveal, staggered results.
   Everything here is decorative; with reduced motion it settles instantly into the final state. */

@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* Page transitions: the old screen leaves before the new one arrives, so texts never overlap. */
::view-transition-old(root) { animation: vt-out 110ms ease-in both; }
::view-transition-new(root) { animation: vt-in 280ms var(--ease) 110ms both; }
::view-transition-old(card) { animation: vt-out 110ms ease-in both; }
::view-transition-new(card) { animation: vt-in 260ms var(--ease) 110ms both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* A calmer, more solid header: content scrolling under it never shows through as text. */
.app-header { background: var(--glass-strong); }

/* Hero: the 22 letters on a slowly turning wheel, as an emblem above the title (never behind text). */
.wheel {
  --r: 64px;
  position: relative; pointer-events: none; justify-self: center;
  width: calc(var(--r) * 2); aspect-ratio: 1; border-radius: 50%;
  animation: wheel 120s linear infinite;
}
.wheel::before { content: ""; position: absolute; inset: 22%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.wheel span {
  position: absolute; top: 50%; left: 50%; width: 2ch; margin: -.5em 0 0 -1ch; text-align: center;
  font: 700 calc(var(--r) * .2)/1 var(--font-display); color: color-mix(in srgb, var(--accent) 75%, transparent);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r) * .84)) rotate(calc(-1 * var(--a)));
}
@keyframes wheel { to { transform: rotate(360deg); } }
.hero > .hero-title {
  background: linear-gradient(100deg, var(--text) 0%, var(--text) 45%, var(--accent) 50%, var(--text) 55%, var(--text) 100%);
  background-size: 260% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sweep 1600ms var(--ease) 300ms both;
}
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Phone: emblem, title, the input right away; the feature list comes after the form. */
@media (max-width: 599px) {
  .layout-split { gap: var(--s-4); }
  .layout-split > .hero { display: contents; }
  .layout-split > .hero > .hero-title, .layout-split > .hero > .lead { text-align: center; justify-self: center; }
  .layout-split > .hero > .features { order: 2; }
  .layout-split > .hero > .trust { order: 3; }
  .layout-split > .stack { order: 1; }
}
@media (min-width: 1024px) { .wheel { --r: 84px; justify-self: start; } }

/* Result number: gold ink inside a turning halo ring; the text under it stays outside the ring. */
.big { padding-block: var(--s-3); }
.big__orb { position: relative; isolation: isolate; display: grid; place-items: center;
  width: clamp(150px, 44vw, 190px); aspect-ratio: 1; margin-bottom: var(--s-2); }
.big__orb::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: conic-gradient(from var(--spin), var(--accent), var(--info), var(--bg-glow-3), var(--accent));
  mask: radial-gradient(circle, transparent 66%, #000 67.5%, #000 70%, transparent 71.5%);
  opacity: .85; animation: halo 14s linear infinite;
}
.big__orb::after {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%);
}
@keyframes halo { to { --spin: 360deg; } }
.big__value {
  background: linear-gradient(110deg, var(--accent) 30%, color-mix(in srgb, var(--accent) 35%, white) 50%, var(--accent) 70%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 4px 24px color-mix(in srgb, var(--accent) 45%, transparent));
  animation: sweep 1200ms var(--ease) 900ms both;
}

/* Content scrolling past the floating header and tab bar fades out instead of peeking around them. */
body::before, body::after { content: ""; position: fixed; inset-inline: 0; z-index: 9; pointer-events: none; }
body::before { top: 0; height: 84px; background: linear-gradient(var(--bg) 55%, transparent); }
body::after { bottom: 0; height: 104px; background: linear-gradient(transparent, var(--bg) 60%); }
@media (min-width: 1024px) { body::after { display: none; } }

/* Narrow phones: the brand keeps its full name; header controls tighten instead. */
@media (max-width: 420px) {
  .app-header { gap: var(--s-1); padding-inline: var(--s-2) var(--s-1); }
  .brand { font-size: .95rem; gap: 6px; padding-inline: var(--s-1); }
  .header-actions .btn { padding-inline: var(--s-2); }
}

/* Results arrive one after another. */
.card > .section { animation: rise-in 420ms var(--ease) both; }
.card > .section:nth-of-type(1) { animation-delay: 150ms; }
.card > .section:nth-of-type(2) { animation-delay: 230ms; }
.card > .section:nth-of-type(3) { animation-delay: 310ms; }
.card > .section:nth-of-type(n+4) { animation-delay: 390ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
.pill--combo { animation: flip-in 450ms var(--ease) both; animation-delay: calc(500ms + var(--i, 0) * 90ms); transform-origin: 50% 0; }
@keyframes flip-in { from { opacity: 0; transform: perspective(800px) rotateX(-70deg); } }
.pill--combo:first-child { box-shadow: 0 0 0 1px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Primary button: a light glint on hover. */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .35) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 700ms var(--ease);
}
.btn--primary:hover::before { transform: translateX(120%); }

/* Slider check */
.slide-wrap { gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--info) 8%, transparent); border: 1px solid var(--glass-border); }
.slide__title { font-weight: 700; }
.slide__hint { color: var(--muted); font-size: var(--fs-sm); }
.slide { padding: var(--s-2) 28px; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--glass-border);
  touch-action: none; user-select: none; -webkit-user-select: none; }
.slide__rail { position: relative; height: 40px; }
.slide__fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--accent); opacity: .5; }
.slide__mark { position: absolute; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 2px dashed var(--accent); }
.slide__knob {
  position: absolute; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; cursor: grab; font-weight: 700; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, white));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); touch-action: none;
}
.slide__knob:active { cursor: grabbing; transform: scale(1.06); }
.slide__knob:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.slide[data-near] .slide__mark { border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.slide[data-miss] .slide__knob { transition: left 240ms var(--ease); }
.slide[data-ok] { border-color: var(--info); }
.slide[data-ok] .slide__knob { background: var(--info); }
.slide[data-ok] .slide__knob span { font-size: 0; }
.slide[data-ok] .slide__knob span::after { content: "✓"; font-size: var(--fs-lg); }

@media (prefers-reduced-motion: reduce) {
  .wheel, .big__orb::before { animation: none; }
  .hero > .hero-title, .big__value { animation: none; background-position: 0 0; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(card), ::view-transition-new(card) { animation: none; }
}
@media (forced-colors: active) {
  .hero > .hero-title, .big__value { background: none; color: CanvasText; }
  .wheel, .big__orb::before, .big__orb::after { display: none; }
}