/* RATCHeT website · iteration 16.1: the world layer.
   Additive on top of styles.css (the iteration-15 floor). Three jobs:
   1. The door: the rope checks you're 18+, and light and music come through a doorway behind it.
   2. The room: one ambient light that follows you (and the music) from room to room.
   3. Cause: the pull-up slip and the words-first hold in the lineup.
   Lighting rules (RATCHET_EXPERIENCE_LOCK.md §6): red = heat and arrival, orange = the function, warm key = where to look,
   dim cream = close and personal, house lights = plain talk. Nothing glows without a cause. */

/* ───────── 1. The door ───────── */
.entrance { gap: 18px; place-content: safe center; overflow-y: auto; padding-bottom: clamp(130px, 26vh, 250px); }
.entrance__doorway { position: absolute; left: 50%; bottom: 14%; width: min(58vw, 440px); height: min(74svh, 720px); transform: translateX(-50%);
  background: linear-gradient(180deg, #0B0504, #170907 80%, #1E0A07); border-radius: 6px 6px 0 0;
  box-shadow: 0 0 0 1px rgba(240,190,110,.08), inset 0 0 80px rgba(0,0,0,.8); pointer-events: none; overflow-x: clip; }
/* the seam of light between the two door leaves: the party is right there */
.entrance__doorway::before { content: ""; position: absolute; top: 52%; bottom: 0; left: 50%; width: var(--crack, 3px); transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,214,150,.0), rgba(255,190,120,.75) 40%, rgba(249,6,46,.9)); filter: blur(1.5px);
  box-shadow: 0 0 24px 6px rgba(249,6,46,.35); }
.entrance__spill { position: absolute; left: -30%; right: -30%; bottom: -46px; height: 92px;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(249,6,46,.5), rgba(249,6,46,.12) 55%, transparent 75%); filter: blur(6px); }
.entrance > *:not(.entrance__doorway):not(.entrance__glow):not(.entrance__rope) { position: relative; z-index: 2; }
.entrance__rope { z-index: 3; pointer-events: none; }
.entrance__ask { margin: 0; font-size: clamp(17px, 2.2vw, 22px); font-weight: 600; color: var(--cream); letter-spacing: .01em; }
.entrance__ask b { font-weight: 900; font-style: italic; color: var(--spark); }
.entrance__choices[hidden], .entrance__turned[hidden] { display: none; }
.entrance__choices, .entrance__turned { display: grid; justify-items: center; gap: 14px; max-width: 620px; }
.entrance__door { cursor: pointer; min-height: 44px; }
.entrance__door-small { font-size: 16px; }
.entrance__quiet, .entrance__under { min-height: 44px; padding: 10px 14px; cursor: pointer; }
.entrance__quiet { font-size: 15px; color: var(--cream); }
.entrance__under { background: none; border: 0; color: var(--cream-dim); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.entrance__terms { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--cream-dim); }
.entrance__turned-big { margin: 0; font-weight: 900; font-style: italic; font-size: clamp(44px, 9vw, 96px); line-height: 1; color: var(--cream); }
.entrance__turned p { margin: 0; max-width: 40ch; color: var(--cream-dim); }
/* focus: the door lights up instead of drawing a box around it */
.entrance__door:focus-visible { outline: none; }
.entrance__door:focus-visible .entrance__door-big { color: var(--dating-hi); text-shadow: .05em .06em 0 var(--dating-ext), 0 0 90px rgba(249,6,46,.85); }
.entrance__door:focus-visible .entrance__door-small { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.entrance__quiet:focus-visible, .entrance__under:focus-visible { outline: 2px solid var(--spark); outline-offset: 4px; border-radius: 6px; }
@media (min-width: 601px) {
  .entrance__choices { max-width: 1100px; }
  .entrance__door-big { font-size: clamp(52px, 7.4vw, 108px); }
  .entrance__rope { height: min(22vw, 210px); bottom: 5%; }
  .entrance__doorway { bottom: 9%; }
}
@media (max-width: 600px) {
  .entrance { padding: 20px 16px calc(40vw + 6%); gap: 14px; }
  .entrance__rope { height: 40vw; bottom: 5%; }
  .entrance__doorway { width: 74vw; bottom: 9%; height: 70svh; }
  .entrance__door-big { font-size: clamp(42px, 13vw, 64px); }
}

/* ───────── 2. The room ───────── */
@property --room { syntax: "<color>"; inherits: true; initial-value: rgba(249, 6, 46, .10); }
body { --room: rgba(249, 6, 46, .10); }
body[data-room="door"] { --room: rgba(249, 6, 46, .12); }
body[data-room="front"] { --room: rgba(231, 93, 29, .10); }
body[data-room="function"] { --room: rgba(240, 116, 38, .14); }
body[data-room="booth"] { --room: rgba(246, 235, 221, .05); }
body[data-room="key"] { --room: rgba(247, 211, 1, .07); }
body[data-room="house"] { --room: rgba(246, 235, 221, .03); }
.room { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.room__key, .room__floor { position: absolute; inset: 0; transition: --room 1.4s var(--ease-out); }
.room__key { background: radial-gradient(ellipse 70% 55% at 50% 22%, var(--room), transparent 70%); }
.room__floor { background: radial-gradient(ellipse 90% 40% at 50% 110%, var(--room), transparent 70%); }

/* Previously on your love life: the recognition line is the headline, the answer is quieter */
.ep__copy h3 { font-size: clamp(30px, 3.6vw, 56px); }
.ep__truth { margin: 0 0 18px !important; font-size: clamp(22px, 2.4vw, 32px) !important; line-height: 1.2; font-weight: 800; font-style: italic; color: var(--cream) !important; max-width: 24ch !important; }
.ep__copy p b { color: var(--spark); font-weight: 800; }

/* ───────── 3. Cause, in the lineup ───────── */
/* words before faces: the face comes up with the light, not a cut */
.card img { transition: filter 1s var(--ease-out), transform 1.4s var(--ease-out); }
.card.answer-first .card__line { font-size: 21px; line-height: 1.25; }
/* the pull-up slip: what you pulled up on, on the card, before it leaves */
.card__slip { position: absolute; left: 10%; right: 10%; top: 34%; z-index: 6; margin: 0; padding: 12px 16px; border-radius: 12px;
  background: var(--cream); color: var(--ink); font-weight: 800; font-style: italic; font-size: 16px; line-height: 1.3; text-align: center;
  box-shadow: 4px 4px 0 var(--ink); opacity: 0; transform: translateY(24px) rotate(-2deg); pointer-events: none;
  transition: opacity .2s, transform .3s var(--ease-snap); }
.card__slip small { display: block; font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.card.pulled .card__slip { opacity: 1; transform: rotate(-2deg); }

@media (prefers-reduced-motion: reduce) {
  .room__key, .room__floor { transition: none; }
  .card img { transition: none; }
}