/* The front door (docs/briefs/the-website.md). One room, lit from the die. The die is the one
   moving thing on the page: it sits where each part of an evening happens, and the light goes
   with it. Everything else is quiet so that this is not (BRAND, "Signature element"). */

/* ---------- The die and its light ---------- */
/* Two sheets the size of the whole page, one under the words for the light and one over them for the
   die. They clip what they hold, so a pool of light near an edge never makes the page wider than the phone. */
.under, .over { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.under { z-index: 1; } .over { z-index: 4; }
.die { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform; opacity: 0; transition: opacity .9s ease; }
html.live .die { opacity: 1; }
.pool { position: absolute; left: 0; top: 0; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(242,179,61,.36) 0%, rgba(242,179,61,.19) 11%, rgba(242,179,61,.085) 25%, rgba(242,179,61,.03) 42%, rgba(242,179,61,.008) 56%, rgba(242,179,61,0) 68%); transition: opacity .7s ease; }
.pool.cold { opacity: 0; background: radial-gradient(circle, rgba(93,224,240,.32) 0%, rgba(93,224,240,.16) 11%, rgba(93,224,240,.07) 25%, rgba(93,224,240,.025) 42%, rgba(93,224,240,.006) 56%, rgba(93,224,240,0) 68%); }
html.listening .pool.warm { opacity: .12; }
html.listening .pool.cold { opacity: 1; }

/* Where the die rests in a scene. The die itself is one canvas that travels between these. */
.anchor { position: relative; aspect-ratio: 332 / 402; flex: none; }
.anchor .still { position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); transition: opacity .6s ease; }
html.live .anchor .still { opacity: 0; }

main { position: relative; z-index: 2; }
.scene { position: relative; margin: 0 auto; max-width: var(--measure); padding: clamp(84px, 13vh, 150px) var(--gutter); }
.scene h2 { margin: 16px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; }
.scene h2 .where { color: var(--lantern); }
.scene .say { margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.58; color: var(--bone-70); max-width: 27em; text-wrap: pretty; }
.scene .say.more { margin-top: 14px; color: var(--bone-55); }

/* Two halves: the words, and the thing itself. The thing changes sides, so the die has somewhere to go. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 96px); min-height: min(86vh, 820px); }
.pair.flip .words { order: 2; }
.thing { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.words { min-width: 0; }

/* Things arrive once, when they are first seen. Without script nothing is hidden. */
html.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
html.js .rise.seen { opacity: 1; transform: none; }
html.js .rise.d1 { transition-delay: .12s; } html.js .rise.d2 { transition-delay: .24s; } html.js .rise.d3 { transition-delay: .36s; }

/* ---------- 0. The door ---------- */
.hero { min-height: 100vh; min-height: 100svh; max-width: none; padding: calc(30px + env(safe-area-inset-top)) var(--gutter) calc(30px + env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; }
.hero .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 0 10px; }
.hero .anchor { width: clamp(240px, min(46vh, 74vw), 470px); margin: -6% 0 -4.5%; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; border-radius: 40%; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(64px, min(12.5vw, 17vh), 148px); line-height: .98; letter-spacing: -.034em; color: var(--bone); }
.hero .promise { margin: clamp(16px, 2.6vh, 28px) 0 0; font-family: var(--serif); font-size: clamp(21px, 2.7vw, 31px); line-height: 1.28; letter-spacing: -.008em; color: var(--bone-85); max-width: 19em; text-wrap: balance; }
.hero .what { margin: 16px 0 0; font-size: clamp(15px, 1.4vw, 17px); color: var(--bone-55); max-width: 30em; text-wrap: balance; }
.hero .hint { height: 44px; display: flex; align-items: center; gap: 10px; transition: color .3s ease; }
.hero .hint i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------- 1. Before the night: the table and its seats ---------- */
.table { position: relative; width: min(100%, 500px); aspect-ratio: 1; }
.table .ring, .table .disc { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.table .ring { width: 78%; height: 78%; border: 1px solid var(--bone-07); }
.table .disc { width: 60%; height: 60%; background: var(--surface); border: 1px solid rgba(237,230,214,.09); box-shadow: inset 0 0 44px rgba(0,0,0,.6), 0 0 70px rgba(242,179,61,.08); }
.table .anchor { position: absolute; left: 33%; top: 27.5%; width: 34%; }   /* placed by offsets, never a transform: the die is aimed at where this is laid out */
.seat { position: absolute; left: 50%; top: 50%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: default;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--seat-r) * -1)) rotate(calc(var(--a) * -1)); }
.table { --seat-r: min(39vw, 196px); }
.pill { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; white-space: nowrap; background: var(--wall); border: 1px solid transparent;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--bone); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lantern); }
.seat.in .pill { border-color: rgba(242,179,61,.45); }
.seat.wait .pill { border-color: rgba(237,230,214,.1); color: var(--bone-55); animation: wait 3.2s ease-in-out infinite; }
.seat.open { cursor: pointer; }
.seat.open .pill { border: 1px dashed var(--lantern); background: rgba(14,17,27,.85); color: var(--lantern); animation: pick 1.8s ease-in-out infinite; }
.seat.you .pill { height: 38px; padding: 0 16px; background: var(--lantern); color: var(--floor); animation: pop .6s cubic-bezier(.3,1.6,.5,1) both, glow 2.8s ease-in-out .6s infinite; }
html.js .seat { opacity: 0; }
html.js .seat.here { opacity: 1; }
html.js .seat.here .pill { animation-name: pop; animation-duration: .55s; animation-timing-function: cubic-bezier(.3,1.6,.5,1); animation-fill-mode: both; }
html.js .seat.here.wait .pill { animation: pop .55s cubic-bezier(.3,1.6,.5,1) both, wait 3.2s ease-in-out .6s infinite; }
html.js .seat.here.open .pill { animation: pop .55s cubic-bezier(.3,1.6,.5,1) both, pick 1.8s ease-in-out .6s infinite; }
html.js .seat.here.you .pill { animation: pop .6s cubic-bezier(.3,1.6,.5,1) both, glow 2.8s ease-in-out .6s infinite; }
.ripple { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid rgba(242,179,61,.7); pointer-events: none; animation: ripple 1.1s ease-out both; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes wait { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes pick { 0%, 100% { box-shadow: 0 0 0 3px rgba(242,179,61,.10); } 50% { box-shadow: 0 0 0 9px rgba(242,179,61,.20); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(242,179,61,.45); } 50% { box-shadow: 0 0 36px rgba(242,179,61,.75); } }
@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(.5); opacity: .8; } 100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; } }
.answer { margin-top: 10px; min-height: 86px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.answer .ask { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--bone); }
.answer .ask.yes { font-size: 34px; color: var(--lantern); }
.answer .with { margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--bone-55); }
.answer .tap { margin: 0; font-size: 14px; color: var(--bone-40); }

/* ---------- 2. During: the ruling and the sentence it rests on ---------- */
.asking { width: min(100%, 470px); display: flex; flex-direction: column; align-items: center; }
.heard { margin: 0; min-height: 56px; display: block; text-align: center; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.28; color: var(--circle); text-wrap: balance; }
.heard span { opacity: 0; transition: opacity .25s ease; }
.heard span.on { opacity: 1; }
.asking .anchor { width: clamp(128px, 15vw, 158px); margin: -4px 0 -8px; }
.asking .status { height: 28px; transition: color .3s ease, opacity .3s ease; }
.slab { position: relative; width: 100%; margin-top: 10px; padding: 20px 24px 22px; border-radius: 24px; background: rgba(26,33,48,.94); border: 1px solid rgba(242,179,61,.16);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.2); }
html.js .slab { opacity: 0; transform: translateY(26px) scale(.985); }
html.js .slab.up { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s cubic-bezier(.2,1.25,.3,1); }
.slab .q { margin: 0; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slab .verdict { margin: 14px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 5vw, 54px); line-height: 1; color: var(--lantern); transform-origin: 0 60%; }
.slab .reason { margin: 8px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.3vw, 26px); line-height: 1.26; color: var(--bone); text-wrap: pretty; }
.slab .quote { margin: 18px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--lantern); font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--bone-85); }
.slab .source { margin: 10px 0 0 18px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lantern); }
.slab .sides { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--bone-07); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-55); line-height: 1.7; }
.slab .sides b { color: var(--lantern); font-weight: 600; }
html.js .slab .beat { opacity: 0; transform: translateY(8px); }
html.js .slab .beat.on { opacity: 1; transform: none; transition: opacity .45s ease, transform .5s ease; }
html.js .slab .verdict.on { animation: stampIn .6s cubic-bezier(.3,1.7,.45,1) both, lit 1.4s ease-out both; transition: none; }
@keyframes stampIn { 0% { opacity: 0; transform: scale(1.5); } 55% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lit { 0% { text-shadow: 0 0 34px rgba(255,231,176,.9); } 100% { text-shadow: 0 0 0 rgba(255,231,176,0); } }
.again { margin-top: 16px; height: 36px; padding: 0 14px; border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .5s ease, color .2s ease; }
.again.on { opacity: 1; }
.again:hover { color: var(--bone); }
.candour { margin: 14px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--bone-40); max-width: 30em; }

/* ---------- 3. After: the record ---------- */
.record { width: min(100%, 480px); }
.years { display: flex; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 100%); justify-content: flex-end; }
.years li { flex: none; padding: 7px 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--bone-40); }
.years li.now { background: var(--lantern); color: var(--floor); }
.ago { position: relative; padding: 22px 24px 22px; border-radius: 24px; background: rgba(26,33,48,.94); border: 1px solid rgba(242,179,61,.28); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.ago .head { display: flex; align-items: center; gap: 4px; margin: -14px 0 -6px -18px; }
.ago .anchor { width: 82px; }
.ago h3 { margin: 4px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.08; letter-spacing: -.015em; }
.ago .won { margin: 8px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.35; color: var(--bone-85); }
.faces { display: flex; margin: 16px 0 0; padding: 0; list-style: none; }
.faces li { width: 38px; height: 38px; margin-right: -8px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 16px; color: rgba(237,230,214,.92); box-shadow: 0 0 0 2.5px var(--wall); }
.faces .p { background: #7A5A1F; } .faces .s { background: #8A6424; } .faces .m { background: #55806B; } .faces .l { background: #6A3F8E; }
.ago .note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--bone-07); font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--bone-70); }
.ago .note b { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--bone-40); margin-right: 8px; }
.diary { margin: 20px 0 0; padding: 0 6px; }
.diary .month { margin: 0 0 4px; }
.diary ol { margin: 0; padding: 0; list-style: none; }
.diary li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 4px 12px; padding: 13px 0; border-top: 1px solid var(--bone-07); }
.diary .day { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1; color: var(--bone-55); font-variant-numeric: lining-nums; }
.diary .game { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--bone); }
.diary .game small { font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--bone-40); margin-left: 8px; }
.diary .line { grid-column: 2; font-size: 14px; color: var(--bone-55); }

/* ---------- 4. One app, two ways to be at a table ---------- */
.roles { text-align: center; }
.roles .lamp { display: flex; justify-content: center; margin-bottom: 6px; }
.roles .lamp .anchor { width: 124px; }
.roles h2 { max-width: 15em; margin-left: auto; margin-right: auto; }
.roles .say { margin-left: auto; margin-right: auto; }
.ways { margin: clamp(34px, 5vh, 54px) auto 0; max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.way { padding: 26px 28px 28px; border-radius: 26px; background: rgba(26,33,48,.6); border: 1px solid var(--bone-07); }
.way.yours { background: rgba(26,33,48,.94); border-color: rgba(242,179,61,.34); box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 60px rgba(242,179,61,.07); }
.way h3 { margin: 10px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3vw, 32px); line-height: 1.1; letter-spacing: -.012em; }
.way ul { margin: 18px 0 0; padding: 0; list-style: none; }
.way li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--bone-07); color: var(--bone-70); font-size: 16px; line-height: 1.4; }
.way li::before { content: ""; position: absolute; left: 2px; top: 1.18em; width: 7px; height: 7px; border-radius: 50%; background: var(--bone-40); }
.way.yours li::before { background: var(--lantern); }
.way .also { margin: 14px 0 0; font-size: 14px; color: var(--bone-40); }

/* ---------- 5. What it will not do ---------- */
.never { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.never .lamp .anchor { width: 104px; margin: 0 0 2px -24px; }
.never h2 { font-size: clamp(32px, 4.2vw, 50px); }
.never ol { margin: 0; padding: 0; list-style: none; }
.never li { padding: 24px 0 26px; border-top: 1px solid var(--bone-12); }
.never li:last-child { border-bottom: 1px solid var(--bone-12); }
.never li b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.16; letter-spacing: -.012em; color: var(--bone); }
.never li span { display: block; margin-top: 8px; color: var(--bone-55); max-width: 30em; }
.never .full { display: inline-block; margin-top: 26px; font-size: 16px; color: var(--bone); text-decoration: underline; text-decoration-color: rgba(242,179,61,.55); text-underline-offset: 5px; }
.never .full:hover { text-decoration-color: var(--lantern); }

/* ---------- The foot: the die comes to rest beside the name ---------- */
.close { text-align: center; padding-top: clamp(40px, 8vh, 90px); padding-bottom: clamp(70px, 12vh, 130px); }
.close .lockup { font-size: clamp(44px, 6vw, 72px); gap: 6px; letter-spacing: -.025em; }
.close .lockup .anchor { width: clamp(64px, 8vw, 100px); margin: 0 -6px 0 -18px; }
.close .soon { margin: 22px 0 0; }

@media (max-width: 860px) {
  .pair { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 44px; }
  .pair .words { order: 0 !important; }
  .never { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .scene { padding-top: 76px; padding-bottom: 76px; }
  .hero { padding-top: calc(24px + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) {
  .die, .pool { display: none; }
  html.live .anchor .still { opacity: 1; }
  html.js .rise, html.js .seat, html.js .slab, html.js .slab .beat { opacity: 1 !important; transform: none !important; }
  html.js .seat { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--seat-r) * -1)) rotate(calc(var(--a) * -1)) !important; }
  .again { display: none; }
}