/* Moghaol — Havre's design language, carried over.
   One black plane. EB Garamond speaks (the wordmark, titles, the numbers that
   matter); Gill Sans operates (fields, buttons, names). Square edges.

   NO LINES. Nothing on this site is drawn with a border or an outline, and no
   hover or focus state recolours one. Things separate by tone: fields are solid
   navy blocks that lift a shade while you type in them, the photo slot is a
   charcoal block, portraits sit bare on black. Words answer the pointer by
   brightening and underlining; filled buttons answer by changing their fill.

   Motion is kept for the moments that pay off: a photo being read and
   developing into a portrait, the next match sharpening out of the dark, a
   percentage climbing through its tiers to gold. */

@property --tier-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #b9b9b9;
}

@property --aura {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0);
}

@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0);
}

:root {
  --plane: #000000;
  --paper: #FBFAF8;
  --tone-1: #111111;         /* the photo slot, portraits still loading */
  --tone-2: #181818;         /* …lifted */
  --surface: #131B33;        /* Havre dark blue — every text field */
  --surface-focus: #1D2848;
  --red: #C8102E;
  --ink-1: #FFFFFF;
  --ink-2: #D7D7D7;
  --ink-3: #8E8E8E;
  --ink-4: #6B6B6B;

  --font-ui: "Gill Sans", "Gill Sans MT", Cabin, "Trebuchet MS", -apple-system, sans-serif;
  --font-voice: "EB Garamond", Garamond, Baskerville, Georgia, serif;

  --fast: 90ms;
  --med: 140ms;
  --turn: 560ms;
  --ease: cubic-bezier(0.3, 0, 0, 1);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* the wheel's neighbours run off the edges */
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--plane);
  color: var(--ink-1);
  font: 400 15px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* Focus is shown by each element's own tone or underline — never a drawn ring. */
:focus-visible {
  outline: none;
}

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

/* ── Masthead: the wordmark as a quiet ident ── */

.mast {
  display: flex;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 20px 0;
}

.wordmark {
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-indent: 0.12em; /* re-centres the tracking */
  text-transform: uppercase;
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.3em;
  color: var(--ink-1);
}

.wordmark:focus-visible {
  text-decoration-color: currentColor;
}

/* ── Page ── */

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 64px 20px max(56px, env(safe-area-inset-bottom));
}

.page--wide {
  max-width: 1120px;
}

.page--bare {
  padding-top: 32px;
  /* mirrors .mast's own top padding, so the foot sits as far below as the
     wordmark sits above — symmetric top/bottom framing. */
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.page--center {
  justify-content: center;
}

.display {
  margin: 0 0 36px;
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-align: center;
  text-wrap: balance;
}

.display--hero {
  font-size: clamp(26px, 9.5vw, 80px); /* the line is 7.2em wide, so this always fits */
  white-space: nowrap;
  margin-bottom: 52px;
}

.display--wordmark {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-indent: 0.12em; /* matches .wordmark's tracking, just at hero scale */
}

.eyebrow {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

.name-display {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-1);
  text-align: center;
}

.lede {
  margin: -12px 0 32px;
  color: var(--ink-2);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* The equation: the page's one big statement, everything else is footnotes to it. */

.equation {
  margin: 8px 0 40px;
  padding: 32px 24px;
  background: var(--tone-1);
  color: var(--ink-1);
  font-family: var(--font-voice);
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.7;
  text-align: center;
}

.equation__rule {
  display: block;
  width: 40px;
  height: 1px;
  margin: 16px auto;
  background: var(--ink-4);
}

.key {
  margin: 0 0 32px;
}

.key dt {
  margin: 22px 0 6px;
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-1);
}

.key dt:first-child {
  margin-top: 0;
}

.key dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 280px;
}

/* ── Forms ── */

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form--narrow {
  width: 100%;
  max-width: 340px;
  align-self: center;
  gap: 20px;
}

.form__mark {
  display: block;
  margin-bottom: 28px;
  font-size: 30px;
  text-align: center;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none;
  background: var(--surface);
  color: var(--ink-1);
  caret-color: var(--red);
  font: 16px var(--font-ui);
  transition: background-color var(--med) var(--ease);
}

.field::placeholder {
  color: rgba(247, 249, 249, 0.38);
}

.field:focus {
  background: var(--surface-focus);
}

.field:disabled {
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
  opacity: 1;
  cursor: not-allowed;
}

.field:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-1);
  box-shadow: 0 0 0 100px var(--surface) inset;
  caret-color: var(--red);
}

/* Woman · Man — two words; the chosen one goes bright and underlines. */
.choice {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 14px 0 8px;
  font-size: 16px;
}

.choice label {
  position: relative;
  cursor: pointer;
}

.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.choice span {
  color: var(--ink-3);
  text-decoration: underline 1.5px transparent;
  text-underline-offset: 0.3em;
  transition:
    color var(--fast) var(--ease),
    text-decoration-color var(--fast) var(--ease);
}

.choice label:hover span,
.choice input:focus-visible + span {
  color: var(--ink-1);
}

.choice input:checked + span {
  color: var(--ink-1);
  font-weight: 600;
  text-decoration-color: currentColor;
}

/* ── Buttons: the one primary control is solid paper; everything else is a word. ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  font: 600 15px var(--font-ui);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--fast) var(--ease),
    opacity var(--fast) var(--ease);
}

.form .btn {
  margin-top: 8px;
}

.btn--primary {
  background: var(--paper);
  color: #000;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: #FFFFFF;
}

.btn--danger {
  background: var(--red);
  color: #fff;
}

.btn--danger:hover,
.btn--danger:focus-visible {
  background: #A90D26;
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: underline 1.5px transparent;
  text-underline-offset: 0.26em;
  transition:
    color var(--fast) var(--ease),
    text-decoration-color var(--fast) var(--ease);
}

.link:hover,
.link:focus-visible {
  color: var(--ink-1);
  text-decoration-color: currentColor;
}

.link--danger,
.link--danger:hover,
.link--danger:focus-visible {
  color: var(--red);
}

.note {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
}

.note--quiet {
  margin: -2px 0 4px;
  font-size: 13px;
  color: var(--ink-3);
}

.note--error {
  font-weight: 600;
  color: var(--red);
}

.fine {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-4);
  text-align: center;
  text-wrap: balance;
}

.aside {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 32px 0 0;
}

.aside .link {
  color: var(--ink-3);
}

.aside .link:hover,
.aside .link:focus-visible {
  color: var(--ink-1);
}

.aside--stack {
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.aside--stack form {
  margin: 0;
}

/* ── The photo slot: a charcoal block. It reads, then the portrait develops. ── */

.pick {
  position: relative;
  display: grid;
  place-items: center;
  width: min(340px, 100%);
  aspect-ratio: 4 / 5;
  margin: 4px auto 32px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--tone-1);
  color: var(--ink-3);
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}

.pick:not(:disabled):hover,
.pick:not(:disabled):focus-visible {
  background: var(--tone-2);
  color: var(--ink-1);
}

.pick:disabled {
  cursor: default;
}

.pick img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.pick__hint {
  position: relative;
  text-decoration: underline 1.5px transparent;
  text-underline-offset: 0.26em;
}

.pick__hint:empty {
  display: none;
}

.pick:not(:disabled):hover .pick__hint,
.pick:not(:disabled):focus-visible .pick__hint {
  text-decoration-color: currentColor;
}

/* Over a finished portrait the hint sits at the foot, on a fade of shadow. */
.pick[data-state="ready"] .pick__hint {
  position: absolute;
  inset: auto 0 0;
  padding: 48px 0 16px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
  font-size: 13px;
  color: var(--ink-2);
}

.pick[data-state="ready"]:not(:disabled):hover .pick__hint {
  color: var(--ink-1);
}

.pick[data-state="reading"] img {
  filter: grayscale(1) brightness(0.4);
}

.pick[data-state="reading"]::after {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(251, 250, 248, 0.12) 75%, rgba(251, 250, 248, 0.55) 97%, transparent);
  animation: scan 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes scan {
  to {
    transform: translateY(350%);
  }
}

.pick[data-state="ready"] img {
  animation: develop 1s var(--ease) both;
}

@keyframes develop {
  from {
    filter: grayscale(1) brightness(0.4);
  }
  to {
    filter: none;
  }
}

.pick[data-state="problem"] img {
  opacity: 0.3;
}

/* ── The ten ──

   Tiers: the percentage (and the rank above the portrait) warm as the number
   climbs — grey, white, champagne, rose gold, gold. The top two are metal with
   a travelling gleam and a glow, and they light the space behind the portrait;
   at 90 and above that light breathes. ten.js sets data-tier as it counts. */

.wheel {
  --tier-color: #B9B9B9;
  --aura: rgba(0, 0, 0, 0);
  --glow: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  transition:
    --tier-color 450ms var(--ease),
    --aura 1.1s var(--ease),
    --glow 600ms var(--ease);
}

.wheel[data-tier="good"] {
  --tier-color: #F2F2F2;
}

.wheel[data-tier="strong"] {
  --tier-color: #EADBB8;
  --aura: rgba(234, 219, 184, 0.08);
}

.wheel[data-tier="high"] {
  --tier-color: #EDB29D;
  --aura: rgba(232, 150, 128, 0.2);
  --glow: rgba(237, 160, 138, 0.35);
  --metal: linear-gradient(100deg, #C98572 0%, #DC9F8B 30%, #F3CDBF 44%, #FFF0EA 50%, #F3CDBF 56%, #DC9F8B 70%, #C98572 100%);
}

.wheel[data-tier="rare"] {
  --tier-color: #E6BC5C;
  --aura: rgba(230, 176, 72, 0.3);
  --glow: rgba(242, 196, 96, 0.55);
  --metal: linear-gradient(100deg, #C8962F 0%, #D9A94A 30%, #F4DC98 44%, #FFF6DC 50%, #F4DC98 56%, #D9A94A 70%, #C8962F 100%);
}

.wheel__rank {
  margin: 0 0 20px;
  font-family: var(--font-voice);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--tier-color);
}

.wheel__stage {
  --card-w: clamp(180px, min(62vw, 40vh), 400px);
  --step: calc(var(--card-w) * 0.9 + 36px);
  /* the arrows sit just past the neighbours — or near the screen's edge, if that comes first */
  --reach: min(50vw - 28px, var(--step) + var(--card-w) * 0.4 + 44px);
  position: relative;
  width: 100%;
  height: calc(var(--card-w) * 1.25);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* The light behind the portrait, coloured by the tier. */
.wheel__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--card-w) * 2.3);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, var(--aura), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.wheel[data-tier="rare"] .wheel__stage::before {
  animation: breathe 5s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.1;
  }
}

.wheel__strip {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every card shares one filter list so the changes between states are smooth. */
.wheel__card {
  --d: 0; /* set per card by ten.js: 0 = centre, −1 = the one before, +1 = the one after */
  --s: 0.8;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  height: 100%;
  overflow: hidden;
  background: var(--tone-1);
  opacity: 0;
  filter: grayscale(1) brightness(0.3) blur(18px);
  transform: translateX(calc(-50% + var(--d) * var(--step))) scale(var(--s));
  pointer-events: none;
  transition:
    transform var(--turn) var(--ease),
    opacity var(--turn) var(--ease),
    filter 1s var(--ease);
}

/* The match you've already seen stays in plain view. */
.wheel__card[data-offset="-1"],
.wheel__card[data-offset="1"][data-seen] {
  opacity: 0.8;
  filter: grayscale(1) brightness(0.78) blur(0px);
  pointer-events: auto;
  cursor: pointer;
}

/* The next one waits in the dark — a shape, not yet a face. */
.wheel__card[data-offset="1"]:not([data-seen]) {
  opacity: 0.45;
  filter: grayscale(1) brightness(0.3) blur(18px);
  pointer-events: auto;
  cursor: pointer;
}

.wheel__card[data-current] {
  --s: 1;
  z-index: 1;
  opacity: 1;
  filter: grayscale(0) brightness(1) blur(0px);
}

.wheel:not(.wheel--live) .wheel__card:not([data-current]) {
  display: none;
}

.wheel:not(.wheel--live) :is(.wheel__pct, [data-hush]) {
  visibility: hidden;
}

.wheel__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-voice);
  font-size: calc(var(--card-w) * 0.16);
  letter-spacing: 0.06em;
  color: var(--ink-4);
}

.wheel__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 64px;
  height: 128px;
  margin: -64px 0 0 -32px;
  padding: 0 0 10px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: 400 76px/1 var(--font-voice);
  cursor: pointer;
  transition:
    color var(--fast) var(--ease),
    opacity 500ms var(--ease);
}

.wheel__nav--prev {
  left: calc(50% - var(--reach));
}

.wheel__nav--next {
  left: calc(50% + var(--reach));
  color: var(--ink-1);
}

.wheel__nav:hover,
.wheel__nav:focus-visible {
  color: var(--ink-1);
}

/* The next arrow waits out each reveal, then leans forward a few times. */
.wheel[data-revealing] .wheel__nav--next {
  opacity: 0;
  pointer-events: none;
}

.wheel:not([data-revealing]) .wheel__nav--next:not(:hover) {
  animation: beckon 2.4s ease-in-out 3;
}

@keyframes beckon {
  0%,
  100% {
    translate: 0 0;
    opacity: 1;
  }
  50% {
    translate: 7px 0;
    opacity: 0.6;
  }
}

.wheel__pct {
  margin: clamp(20px, 3.5vh, 36px) 0 0;
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: clamp(64px, min(12vw, 13vh), 124px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tier-color);
  filter: drop-shadow(0 0 24px var(--glow));
  transition: scale 320ms var(--ease);
}

.wheel[data-tier="high"] .wheel__pct,
.wheel[data-tier="rare"] .wheel__pct {
  color: transparent;
  background: var(--metal) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gleam 7s var(--ease) 2s infinite;
}

/* Crossing into a higher tier while counting: a small lift. */
.wheel.is-levelling .wheel__pct {
  scale: 1.08;
  transition-duration: 110ms;
}

/* Landing in rose gold or gold: one fast gleam and a flare of light. */
.wheel[data-tier="high"].is-landing .wheel__pct,
.wheel[data-tier="rare"].is-landing .wheel__pct {
  animation:
    gleam-once 1.1s var(--ease),
    flare 1.5s var(--ease);
}

@keyframes gleam {
  0%,
  70% {
    background-position: 100% 0;
  }
  95%,
  100% {
    background-position: 0 0;
  }
}

@keyframes gleam-once {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes flare {
  0%,
  100% {
    filter: drop-shadow(0 0 24px var(--glow)) brightness(1);
  }
  35% {
    filter: drop-shadow(0 0 52px var(--glow)) brightness(1.2);
  }
}

.wheel__sign {
  margin-left: 0.04em;
  font-size: 0.42em;
  letter-spacing: 0;
  vertical-align: 0.95em;
}

.wheel__name {
  margin: 24px 0 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-1);
}

/* The email is the next step, so it always reads as something to press. */
.wheel__email {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-3);
  text-decoration: underline 1px color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.28em;
  transition:
    color var(--fast) var(--ease),
    text-decoration-color var(--fast) var(--ease);
}

.wheel[data-tier="high"] .wheel__email,
.wheel[data-tier="rare"] .wheel__email {
  color: var(--tier-color);
}

.wheel__email:hover,
.wheel__email:focus-visible {
  text-decoration-color: currentColor;
}

.wheel:not([data-tier="high"]):not([data-tier="rare"]) .wheel__email:is(:hover, :focus-visible) {
  color: var(--ink-1);
}

.wheel [data-swap] {
  transition: opacity 500ms var(--ease);
}

.wheel.is-changing [data-swap] {
  opacity: 0;
  transition-duration: 150ms;
}

/* On a first reveal, the name and email wait for the number to land. */
.wheel.is-hushed [data-hush] {
  opacity: 0;
  transition-duration: 0ms;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
  margin-top: auto;
  padding-top: 56px;
}

.foot form {
  margin: 0;
}

.foot .link {
  color: var(--ink-4);
}

.foot .link:hover,
.foot .link:focus-visible {
  color: var(--ink-1);
}

.foot .link--danger,
.foot .link--danger:hover,
.foot .link--danger:focus-visible {
  color: var(--red);
}

@media (max-width: 480px) {
  .page {
    padding-top: 48px;
  }

  .page--bare {
    padding-top: 24px;
  }

  .display:not(.display--hero) {
    font-size: 34px;
  }

  .wheel__nav {
    width: 44px;
    margin-left: -22px;
    font-size: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}