#denominator { padding-top: 160px; padding-bottom: 180px; background: radial-gradient(ellipse at 70% 0%, var(--night-2), var(--night) 70%) 0 4px / 100% calc(100% - 8px) no-repeat, var(--paper); }
#denominator::before, #denominator::after { content: ""; position: absolute; left: 0; right: 0; height: 154px; z-index: 2; pointer-events: none; }
#denominator::before { top: 0; background: linear-gradient(#f3ece0, #f3ece0) top / 100% 5px no-repeat, radial-gradient(62% 100% at 50% 100%, transparent 95.5%, rgba(111, 168, 255, .3) 98.4%, rgba(226, 183, 90, .9) 99.4%, #f3ece0 100%); }
#denominator::after { bottom: 0; background: linear-gradient(#f3ece0, #f3ece0) bottom / 100% 5px no-repeat, radial-gradient(62% 100% at 50% 0%, transparent 95.5%, rgba(111, 168, 255, .3) 98.4%, rgba(226, 183, 90, .9) 99.4%, #f3ece0 100%); }
@media (max-width: 700px) {
  #denominator::before, #denominator::after { height: 52px; }
  #denominator::before { background: linear-gradient(#f3ece0, #f3ece0) top / 100% 5px no-repeat, radial-gradient(62% 100% at 50% 100%, transparent 93%, rgba(111, 168, 255, .3) 97.5%, rgba(226, 183, 90, .9) 99%, #f3ece0 100%); }
  #denominator::after { background: linear-gradient(#f3ece0, #f3ece0) bottom / 100% 5px no-repeat, radial-gradient(62% 100% at 50% 0%, transparent 93%, rgba(111, 168, 255, .3) 97.5%, rgba(226, 183, 90, .9) 99%, #f3ece0 100%); }
}
#denominator canvas { opacity: .9; }
#denominator .wrap { z-index: 3; }

/* meter */
#denominator .meter { border-color: rgba(226, 183, 90, .3); box-shadow: 0 0 80px rgba(111, 168, 255, .08), inset 0 0 60px rgba(226, 183, 90, .04); }
#denominator .meter .value { display: flex; justify-content: center; align-items: baseline; text-shadow: 0 0 28px rgba(226, 183, 90, .45); }
.odometer { display: inline-flex; align-items: flex-start; height: 1.15em; line-height: 1.15; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.odometer .digit { display: block; height: 1.15em; width: .62em; overflow: hidden; position: relative; }
.odometer .digit span { display: block; will-change: transform; }
.odometer .digit span b { display: block; height: 1.15em; font-weight: 400; text-align: center; }
.odometer .digit.settled span { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.odometer .sep { display: block; height: 1.15em; width: .3em; text-align: center; opacity: .6; }
.equivalents { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 28px auto 0; max-width: 560px; background: rgba(232, 227, 216, .15); border: 1px solid rgba(232, 227, 216, .15); }
.equivalents li { background: rgba(7, 13, 31, .85); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.equivalents b { font-family: var(--mono); font-weight: 500; font-size: clamp(16px, 2.6vw, 22px); color: var(--electric); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.equivalents span { font-size: 12px; color: var(--night-soft); }
#denominator .meter .footnote { margin-top: 8px; font-size: 10.5px; opacity: .8; }

/* fraction */
#denominator .fraction { margin: 20px auto 96px; }
#denominator .fraction .num { display: grid; justify-items: center; font-size: clamp(44px, 8vw, 104px); line-height: 1.1; padding: 0 24px 10px; }
.fraction .word { grid-area: 1 / 1; opacity: 0; transform: translateY(40%); filter: blur(8px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1), filter .6s ease; }
.fraction .word.on { opacity: 1; transform: none; filter: none; }
.fraction .word.out { transform: translateY(-40%); }
.fraction .word[data-word="Intelligence"].on { color: var(--night-ink); text-shadow: 0 0 40px rgba(111, 168, 255, .35); }
#denominator .fraction .bar { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.3, .7, .2, 1); box-shadow: 0 0 18px rgba(226, 183, 90, .6); height: 2px; width: min(640px, 90%); }
#denominator .fraction.lit .bar { transform: scaleX(1); }
#denominator .fraction .den { font-size: clamp(56px, 10vw, 128px); line-height: 1; text-shadow: 0 0 0 rgba(226, 183, 90, 0); }
#denominator .fraction.lit .den { animation: j-glow 4s ease-in-out 1.2s infinite alternate; }
@keyframes j-glow { from { text-shadow: 0 0 14px rgba(226, 183, 90, .35); } to { text-shadow: 0 0 56px rgba(226, 183, 90, .95), 0 0 120px rgba(226, 183, 90, .4); } }

/* cards */
@property --trace { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#denominator .metrics { border-top: 0; gap: 16px; }
#denominator .metrics .metric { position: relative; border: 1px solid rgba(232, 227, 216, .14) !important; background: linear-gradient(160deg, rgba(13, 24, 52, .75), rgba(7, 13, 31, .6)); backdrop-filter: blur(4px); padding: 32px 24px; transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
#denominator .metric::before { content: ""; position: absolute; inset: -1px; padding: 1px; pointer-events: none; background: conic-gradient(from var(--trace), transparent 0 70%, var(--gold-bright) 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .7; animation: trace 8s linear infinite; }
#denominator .metric:nth-child(2)::before { animation-delay: -2s; }
#denominator .metric:nth-child(3)::before { animation-delay: -4s; }
#denominator .metric:nth-child(4)::before { animation-delay: -6s; }
#denominator .metric::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 0%), rgba(111, 168, 255, .22), transparent); opacity: 0; transition: opacity .35s; }
#denominator .metric:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(111, 168, 255, .18), 0 0 0 1px rgba(226, 183, 90, .35); }
#denominator .metric:hover::before { opacity: 1; animation-duration: 3s; }
#denominator .metric:hover::after { opacity: 1; }
#denominator .metric:last-child .unit { color: var(--gold-bright); }
@keyframes trace { to { --trace: 360deg; } }

/* closing */
#denominator .closing { margin-top: 120px; font-size: clamp(36px, 6vw, 84px); max-width: 16ch; text-wrap: balance; }
#denominator .closing em { position: relative; display: inline-block; padding: 0 .06em; font-style: italic; color: var(--gold-bright); background: linear-gradient(100deg, var(--gold) 30%, #fff3c9 50%, var(--gold) 70%) 100% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 0 rgba(226, 183, 90, 0)); }
#denominator .closing.lit em { animation: si-sweep 2.2s ease .5s forwards, si-glow 3.5s ease-in-out 2.7s infinite alternate; }
@keyframes si-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes si-glow { from { filter: drop-shadow(0 0 8px rgba(226, 183, 90, .4)); } to { filter: drop-shadow(0 0 26px rgba(226, 183, 90, .95)); } }

@media (max-width: 900px) { #denominator .metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  #denominator { padding-top: 120px; padding-bottom: 130px; }
  #denominator .metrics { grid-template-columns: 1fr; }
  #denominator .meter { padding: 32px 14px 24px; }
  .equivalents { grid-template-columns: 1fr; }
  #denominator .closing { margin-top: 80px; }
}

/* final states */
html.static #denominator .fraction .bar, html.static #denominator .fraction.lit .bar { transform: none; transition: none; }
html.static #denominator .metric::before, html.static #denominator .fraction .den, html.static #denominator .closing em { animation: none !important; }
html.static #denominator .closing em { background-position: 0% 0; filter: drop-shadow(0 0 14px rgba(226, 183, 90, .6)); }
html.static .fraction .word { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #denominator .fraction .bar { transform: none; transition: none; }
  #denominator .metric::before, #denominator .fraction .den, #denominator .closing em { animation: none !important; }
  #denominator .closing em { background-position: 0% 0; }
  .fraction .word, .odometer .digit.settled span { transition: none; }
}