/* Home: Three doors. See design/DESIGN.md section 4.
   Door geometry is drawn on a 1440x900 grid and scaled by --u.
   DESKTOP BREAKPOINT: Home's desktop layout starts at 1000px. Under that (the
   999.98px queries below) Home uses its phone layout. Keep in step with
   DESK_QUERY in home.js. (The rest of the site still switches at 760px.) */

.hero {
  /* the same formula home.js uses, worked out here so the first paint is final (no layout shift) */
  --u: clamp(.5px, min(100vw / 1440, 100vh / 900), 1.4px);
  position: relative;
  height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden;
  background: var(--ground);
}
.hero-copy {
  position: absolute; left: var(--inset);
  top: calc(50% - 236 * var(--u));
  width: calc(520 * var(--u));
  will-change: transform;
}
.hero-title {
  font-size: calc(128 * var(--u));
  line-height: calc(106 * var(--u));
}
.hero-title .ln { display: block; overflow: hidden; padding-top: .06em; margin-top: -.06em; }
.hero-title .ln > span { display: block; }
.hero-lede {
  margin-top: calc(28 * var(--u));
  max-width: 360px; color: var(--muted);
}
.hero-foot {
  position: absolute; left: var(--inset); bottom: 44px;
  display: grid; gap: 6px;
}
.hero-proof { font-size: 15px; line-height: 22px; }
.hint-touch { display: none; }

/* ---------- the three doors ---------- */
.doors {
  position: absolute; right: var(--inset);
  top: calc(50% - 332 * var(--u));
  width: calc(792 * var(--u)); height: calc(664 * var(--u));
  will-change: transform;
}
.door {
  position: absolute; left: 0; top: 0;
  width: calc(320 * var(--u)); height: calc(664 * var(--u));
  transition: transform var(--dur-travel) var(--ease-travel);
  outline-offset: 6px;
}
/* A closed door's box is wider than the door you can see, and overlaps its neighbour.
   Only the visible window and the caption take the pointer, so a click always goes to the door under it. */
.door { pointer-events: none; }
.door-win, .door-cap { pointer-events: auto; }
/* resting places, so the doors are apart even before home.js has run */
@media (min-width: 1000px) {
  .door:nth-child(2) { transform: translateX(calc(236 * var(--u))); }
  .door:nth-child(3) { transform: translateX(calc(472 * var(--u))); }
}
.door-par { position: absolute; inset: 0; will-change: transform; }
.door-win {
  position: absolute; inset: 0; overflow: hidden; background: var(--panel);
  clip-path: inset(calc(82 * var(--u)) calc(60 * var(--u)));
  transition: clip-path var(--dur-travel) var(--ease-travel);
}
.door.is-open .door-win { clip-path: inset(0); }
.door-pic { position: absolute; inset: -4% -9%; will-change: transform; }
.door-pic img, .door-pic video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.door-colour, .door-pic video { opacity: 0; transition: opacity var(--dur-travel) var(--ease-travel); }
.door.is-open .door-colour { opacity: 1; }
.door.is-open .door-pic video.is-playing { opacity: 1; }
.door-dark { opacity: 0; transition: opacity .45s linear .3s; }
.door[data-room="witch"] .door-pic img, .door[data-room="witch"] .door-pic video { object-position: 54% 50%; }
.door[data-room="nether"] .door-pic img, .door[data-room="nether"] .door-pic video { object-position: 55% 50%; }
.door[data-room="escape"] .door-pic img, .door[data-room="escape"] .door-pic video { object-position: 44% 50%; }

.door-cap {
  position: absolute; left: 0; top: calc(688 * var(--u));
  width: calc(320 * var(--u));
  display: grid; gap: 6px;
  transform: translateX(calc(60 * var(--u)));
  transition: transform var(--dur-travel) var(--ease-travel);
}
.door.is-open .door-cap { transform: none; }
.door-cap .label { transition: color .3s linear; white-space: nowrap; }
.door.is-open .door-cap .label { color: var(--ink); font-weight: 600; }
.door-facts, .door-cap .ai-note { opacity: 0; transition: opacity .2s linear; white-space: nowrap; }
.door.is-open .door-facts { opacity: 1; transition: opacity .5s linear .3s; }
.door.is-open.has-clip .ai-note { opacity: 1; transition: opacity .5s linear .5s; }

/* go in: the chosen door grows to fill the screen, the lights go out */
.hero.is-going .hero-copy, .hero.is-going .hero-foot,
.hero.is-going .door:not(.is-chosen), .hero.is-going .door-cap { opacity: 0; transition: opacity .3s linear; }
.door.is-chosen { z-index: 5; }
/* the growing door may pass the bottom of the first screen (if the page was scrolled a little) */
.hero.is-going { overflow-x: clip; overflow-y: visible; z-index: 2; }
.door.is-chosen .door-win { clip-path: inset(0); }
.door.is-chosen .door-dark { opacity: 1; }

/* arrive: slits of light, then doors. html.pre is set before first paint (see index.html) */
.pre .door-win { clip-path: inset(calc(82 * var(--u)) calc(159 * var(--u))); }
.pre .hero-title .ln > span { transform: translateY(105%); }
.pre .hero-lede, .pre .hero-foot, .pre .door-cap { opacity: 0; }
.hero-title .ln > span { transition: transform var(--dur-enter) var(--ease-enter); }
.hero-lede, .hero-foot { transition: opacity var(--dur-enter) linear; }
.arriving .door-cap { transition: opacity var(--dur-enter) linear, transform var(--dur-travel) var(--ease-travel); }
.arriving .door:nth-child(2) .door-win { transition-delay: .09s; }
.arriving .door:nth-child(3) .door-win { transition-delay: .15s; }
.arriving .hero-title .ln:nth-child(1) > span { transition-delay: .3s; }
.arriving .hero-title .ln:nth-child(2) > span { transition-delay: .36s; }
.arriving .hero-title .ln:nth-child(3) > span { transition-delay: .44s; }
.arriving .hero-title .ln:nth-child(4) > span { transition-delay: .5s; }
.arriving .hero-lede { transition-delay: .7s; }
.arriving .door-cap { transition-delay: .8s; }
/* the hint comes last and is in place by 1.6s */
.arriving .hero-foot { transition: opacity .5s linear 1.1s; }
/* Back / back-forward cache: show the reset page at once */
.hero.is-resetting, .hero.is-resetting * { transition: none !important; }

/* ---------- facts strip ---------- */
.strip { padding: 120px var(--inset); border-top: 1px solid var(--hairline); }
.strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip-item { padding: 0 28px; border-left: 1px solid var(--hairline); display: grid; gap: 14px; align-content: start; }
.strip-item:first-child { padding-left: 0; border-left: 0; }
.strip-fig { font-weight: 800; font-size: clamp(40px, 5.6vw, 80px); line-height: .9; white-space: nowrap; letter-spacing: -0.04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.strip-item .meta { max-width: 220px; }

/* ---------- three rooms, sideways ---------- */
.rooms { position: relative; height: 340vh; }
/* clip, not hidden: a clipped box cannot be scrolled, so keyboard focus can never slide it sideways */
.rooms-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; overflow: clip; }
.rooms-track { display: flex; width: 300vw; height: 100%; will-change: transform; }
.room-panel { position: relative; flex: none; width: 100vw; height: 100%; }
.room-photo {
  position: absolute; right: 0; top: 0; bottom: 0; width: 64vw; overflow: hidden; background: var(--panel);
}
.room-photo img { position: absolute; top: 0; bottom: 0; left: -15%; width: 130%; max-width: none; height: 100%; object-fit: cover; will-change: transform; }
/* The fade into the black page is a mask, not a black overlay: an overlay is clipped at the
   same edge as the photo, so a 1px sliver of photo showed at the left. On black the look is
   the same (photo x 0, .45, 1 at 0%, 22%, 60%). */
.room-photo {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 22%, #000 60%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 22%, #000 60%);
}
.room-photo::after { content: ""; position: absolute; inset: 0; display: none; }
.room-text {
  position: absolute; left: var(--inset); top: 50%; width: min(56vw, 780px);
  display: grid; gap: 28px; will-change: transform;
}
.room-text .statement-serif { font-size: clamp(40px, 5.4vw, 80px); }
.room-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.rooms-dots { position: absolute; left: var(--inset); bottom: 44px; display: flex; gap: 8px; }
.rooms-dots span { width: 44px; height: 1px; background: var(--hairline); transition: background-color .3s linear; }
.rooms-dots span.is-on { background: var(--ink); }

/* ---------- quote ---------- */
.quote { padding: 160px var(--inset); border-top: 1px solid var(--hairline); }
.quote blockquote { max-width: 1100px; }
.quote .statement-serif { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; }
.quote-credit { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- prices and find us ---------- */
.info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.info-col { padding: 96px var(--inset); display: grid; gap: 28px; align-content: start; }
.info-col + .info-col { border-left: 1px solid var(--hairline); }
.info-col h2 { font-weight: 800; font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.price-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.price-rows li:last-child { border-bottom: 1px solid var(--hairline); }
.price-rows .meta { margin-left: 10px; }
.closer { padding: 140px var(--inset); border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 40px; }
.closer .statement-sans { font-size: clamp(52px, 8.9vw, 128px); }

/* ---------- phone layout: under the 1000px desktop breakpoint (see the top of this file) ---------- */
@media (max-width: 999.98px) {
  .hero { height: calc(100svh - var(--bar-space)); min-height: 0; display: flex; flex-direction: column; padding: 84px var(--inset) 14px; overflow: visible; }
  .hero-copy { position: static; width: auto; }
  .hero-title { font-size: clamp(40px, 11.7vw, 54px); line-height: .9; }
  .hero-title .ln { display: inline; overflow: visible; }
  .hero-title .ln > span { display: inline; }
  .hero-title .ln:nth-child(2)::after { content: "\A"; white-space: pre; }
  .hero-lede { margin-top: 12px; font-size: 15px; line-height: 22px; max-width: none; }
  .lede-long { display: none; }
  .doors { position: static; width: auto; height: auto; flex: 1; min-height: 150px; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .door { position: relative; width: auto; height: auto; display: flex; flex-direction: column; gap: 8px; transform: none !important; pointer-events: auto; }
  .door-par { position: relative; inset: auto; flex: 1; min-height: 0; transform: none !important; }
  .door-win, .door.is-open .door-win { clip-path: none; }
  .door-pic { inset: 0; transform: none !important; }
  .door-pic video { display: none; }
  .door-cap, .door.is-open .door-cap { position: static; width: auto; transform: none; min-height: 32px; }
  .door-cap .label { white-space: normal; letter-spacing: .05em; }
  .door-n { display: none; }
  .door-facts, .door-cap .ai-note { display: none; }
  .hero-foot { position: static; margin-top: 10px; }
  .hint-fine { display: none; }
  .hint-touch { display: inline; }
  .hero-proof { font-size: 13px; line-height: 18px; color: var(--muted); }
  .hero-hint { display: none; }
  .pre .door-win { clip-path: none; opacity: 0; }
  .door-win { transition: opacity var(--dur-enter) linear; }

  .strip { padding: 72px var(--inset); }
  .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
  .strip-item { padding: 0 0 0 16px; }
  .strip-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rooms { height: auto; }
  .rooms-pin { position: static; height: auto; overflow: visible; }
  .rooms-track { display: block; width: auto; transform: none !important; }
  .room-panel { width: auto; height: auto; padding-bottom: 56px; }
  .room-photo { position: relative; width: auto; height: 62vw; -webkit-mask-image: none; mask-image: none; }
  .room-photo img { left: 0; width: 100%; transform: none !important; }
  .room-photo::after { display: block; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, #000 100%); }
  .room-text { position: relative; left: auto; top: auto; width: auto; padding: 0 var(--inset); margin-top: -28px; transform: none !important; gap: 18px; }
  .rooms-dots { display: none; }
  .quote { padding: 88px var(--inset); }
  .info { grid-template-columns: 1fr; }
  .info-col { padding: 64px var(--inset); }
  .info-col + .info-col { border-left: 0; border-top: 1px solid var(--hairline); }
  .closer { padding: 80px var(--inset); }
}
/* 760 to 999px: the phone layout, but there is no bottom Book bar here and the header is the larger one */
@media (min-width: 760px) and (max-width: 999.98px) {
  /* clear the 115px desktop header; the hero is as tall as its content */
  .hero { height: auto; padding-top: 136px; padding-bottom: 32px; }
  /* doors fill the screen height that is left (about 370px goes to the rest), capped so a
     door is never taller than about 2.2 times its width */
  .doors { flex: none; height: max(260px, min(calc(100vh - 370px), calc((100vw - 128px) * .73 + 40px))); }
}
@media (max-width: 759.98px) and (max-height: 700px) {
  .hero { padding-top: 76px; }
  .hero-lede { margin-top: 8px; }
}
/* a phone on its side: too short to fit one screen, so the first screen is as tall as it needs */
@media (max-width: 759.98px) and (max-height: 520px) {
  .hero { height: auto; }
  .doors { flex: none; height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .door, .door-win, .door-cap, .hero-title .ln > span { transition-duration: .01s !important; transition-delay: 0s !important; }
  .door-pic video { display: none; }
}

/* Small laptops: the door numbers go, so the three names do not touch. */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .door-n { display: none; }
}