/* ==========================================================================
   house.css: the rooms are the site (house.js). Picture coordinates are the
   stills' own 1344×752 pixels; house.js scales the canvas to the screen.
   ========================================================================== */

/* ---------------- Rooms ---------------- */
:root { --hdr: 62px; }
.room { position: relative; background: #0b0907; overflow: hidden; }
.room-img { display: block; }
.room-card .kicker { color: var(--amber); margin: 0 0 6px; }
.room-title {
  font-family: var(--font-giant); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.01em;
  font-size: clamp(30px, 4.6vw, 58px); margin: 0 0 10px;
}
.room-title span { display: block; }
.room-title .gold { color: var(--gold); }
.room-hint { margin: 0; color: var(--muted); font-size: 15px; }
.room-back { color: var(--amber); white-space: nowrap; margin-left: 6px; }

.house-js .room { display: none; height: calc(100svh - var(--hdr)); min-height: 420px; }
.house-js .room.is-here { display: block; }
.house-js .room-stage { position: absolute; inset: 0; overflow: hidden; }
.house-js .room.is-portrait .room-stage { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.house-js .room.is-portrait .room-stage::-webkit-scrollbar { display: none; }
.house-js .room-sizer { position: relative; }
.house-js .room-canvas { position: absolute; left: 0; top: 0; width: 1344px; height: 752px; transform-origin: 0 0; }
.house-js .room-zoom { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.house-js .room-img { width: 1344px; height: 752px; }

/* The title card sits over the floor, bottom left. */
.house-js .room-card {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none;
  padding: 80px max(16px, 4vw) 22px;
  background: linear-gradient(transparent, rgba(8, 6, 4, .78) 45%, rgba(8, 6, 4, .92));
}
.house-js .room-card a { pointer-events: auto; }
.house-js .room.is-portrait .room-card { padding-top: 60px; }
.house-js .room.is-portrait .room-title { font-size: 30px; }

/* ---------------- Hot spots ---------------- */
.tv-hot, .plaque-hot, .door-hot, .spot-hot { position: absolute; display: block; color: inherit; text-decoration: none; }
.tv-hot { left: 0; top: 0; width: 0; height: 0; }
.tv-live {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; box-sizing: border-box;
  background: radial-gradient(ellipse at 40% 30%, #1b2230, #07090d 75%);
  color: #f4ecdc; font-family: var(--font-mono); padding: 18px 22px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .8);
  transition: filter .2s ease, box-shadow .2s ease; cursor: pointer;
}
.tv-live::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 4px); pointer-events: none; }
.tv-hot:hover .tv-live, .tv-hot:focus-visible .tv-live { filter: brightness(1.25); box-shadow: inset 0 0 0 4px #f2691b, 0 0 40px rgba(242, 105, 27, .5); }
.tv-hot:focus-visible { outline: none; }
.tv-tag, .door-tag, .spot-tag {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: #f4ecdc; background: rgba(11, 9, 7, .78); border: 1px solid rgba(242, 105, 27, .7); border-radius: 999px; padding: 4px 12px;
  box-shadow: 0 0 18px rgba(242, 105, 27, .25);
}
.tv-hot:hover .tv-tag, .tv-hot:focus-visible .tv-tag, .door-hot:hover .door-tag, .door-hot:focus-visible .door-tag,
.spot-hot:hover .spot-tag, .spot-hot:focus-visible .spot-tag { background: #f2691b; color: #0b0907; }
.door-tag { left: 50%; bottom: -36px; }
.spot-tag { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.door-hot, .spot-hot { border-radius: 8px; }
.door-hot:hover, .door-hot:focus-visible, .spot-hot:hover, .spot-hot:focus-visible { box-shadow: 0 0 0 3px rgba(242, 105, 27, .8), 0 0 60px rgba(242, 105, 27, .35); outline: none; }
.plaque-hot { left: calc(var(--cx) - var(--r)); top: calc(var(--cy) - var(--r)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; }
.plaque-hot img { width: 100%; height: 100%; display: block; opacity: .92; filter: sepia(.35) brightness(.9) drop-shadow(0 0 6px rgba(242, 105, 27, .35)); }

/* Screen content */
.tv-idle { height: 100%; display: grid; place-items: center; }
.tv-idle img { height: 70%; opacity: .55; }
.tv-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; border-bottom: 2px solid #f2691b; padding-bottom: 6px; }
.tv-head b { font-size: 22px; text-transform: uppercase; letter-spacing: 1px; color: #f2691b; }
.tv-head i { font-style: normal; font-size: 13px; color: rgba(244, 236, 220, .6); }
.tv-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 19px; line-height: 1.6; white-space: nowrap; }
.tv-row.mk { grid-template-columns: 1fr auto auto; font-size: 18px; line-height: 1.5; }
.tv-row.vd { grid-template-columns: 90px 1fr; font-size: 20px; line-height: 1.7; }
.tv-lg { font-size: 12px; color: rgba(244, 236, 220, .55); text-transform: uppercase; }
.tv-teams { overflow: hidden; text-overflow: ellipsis; }
.tv-row em { font-style: normal; font-size: 14px; color: rgba(244, 236, 220, .7); }
.tv-row em.live, .tv-row em.vd-bust { color: #ff5a3c; }
.tv-row em.up, .tv-row em.vd-start { color: #5fd28a; }
.tv-row em.down, .tv-row em.vd-sit { color: #ff6a55; }
.tv-row em.vd-sleeper { color: #f2c14b; }
.tv-note { font-size: 20px; line-height: 1.4; margin: 18px 0 0; color: rgba(244, 236, 220, .85); }
.tv-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.tv-video { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.tv-video i { font-style: normal; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #f2691b; }
.tv-video b { font-family: var(--font-giant); font-size: 30px; line-height: 1.02; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------- Panels: a screen opened up ---------------- */
.house-js .panels { position: fixed; left: 0; right: 0; top: var(--hdr); bottom: 0; z-index: 60; pointer-events: none; }
.house-js .panel {
  position: absolute; inset: clamp(10px, 3vh, 28px) max(10px, 5vw); overflow: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: scale(.94); pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s;
  background: radial-gradient(ellipse at 30% 0%, rgba(40, 52, 72, .35), transparent 60%), rgba(7, 8, 11, .97);
  border: 10px solid #101012; border-radius: 16px;
  box-shadow: 0 0 0 1px #2b2b2e, 0 0 90px rgba(242, 105, 27, .28), inset 0 0 40px rgba(0, 0, 0, .6);
  padding: 22px clamp(16px, 4vw, 48px) 36px;
}
.house-js .panel.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.panel[hidden] { display: none !important; }
.panel-close {
  display: inline-block; margin: 0 0 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber); text-decoration: none; border: 1px solid rgba(242, 105, 27, .5); border-radius: 999px; padding: 6px 14px;
}
.panel-close:hover, .panel-close:focus-visible { background: #f2691b; color: #0b0907; }
.panel .j-head { margin-top: 4px; }
.panel h2:focus, .panel h3:focus { outline: none; }
.house.panel-open .room-card { opacity: 0; transition: opacity .2s; }

/* Without JavaScript the rooms are pictures and the panels an ordinary page. */
html:not(.house-js) .room-canvas { position: relative; }
html:not(.house-js) .room-img { width: 100%; height: auto; max-height: 80vh; object-fit: cover; }
html:not(.house-js) .tv-hot, html:not(.house-js) .plaque-hot, html:not(.house-js) .door-hot, html:not(.house-js) .spot-hot, html:not(.house-js) .walk-layer { display: none; }
html:not(.house-js) .room-card { padding: 20px 16px; }
html:not(.house-js) .panel { max-width: 1100px; margin: 0 auto; padding: 40px 16px; }

/* ---------------- The walk ---------------- */
.walk-layer { display: none; }
.house-js .walk-layer.is-walking { display: block; position: fixed; left: 0; right: 0; top: var(--hdr); bottom: 0; z-index: 55; background: #000; }
.walk-layer video { width: 100%; height: 100%; object-fit: cover; display: block; }
.walk-skip {
  position: absolute; right: 18px; bottom: 18px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #f4ecdc; background: rgba(11, 9, 7, .7); border: 1px solid rgba(242, 105, 27, .7); border-radius: 999px; padding: 8px 16px; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .house-js .room-zoom, .house-js .panel, .tv-live { transition: none !important; }
}

/* The Heat inside its panel: a small heater beside the list, not the full-width scene. */
.house-js .panel.heat-zone { display: block; }
.house-js .panel.heat-zone .heater { display: none; }

/* Phones: a compact title card, and a nudge that the walls scroll sideways. */
.swipe-hint { display: none; }
.house-js .room.is-portrait .swipe-hint {
  display: block; margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber);
  animation: swipe-nudge 2.4s ease-in-out infinite;
}
@keyframes swipe-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.house-js .room.is-portrait .room-card { padding: 48px 16px 14px; }
.house-js .room.is-portrait .room-card .kicker { display: none; }
.house-js .room.is-portrait .room-title { font-size: 24px; margin-bottom: 6px; }
.house-js .room.is-portrait .room-title span { display: inline; }
.house-js .room.is-portrait .room-hint { font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .swipe-hint { animation: none !important; } }

/* ---------------- Depth and motion (motion.js) ---------------- */
.room-gl { position: absolute; left: 0; top: 0; width: 1344px; height: 752px; display: block; pointer-events: none; }
.has-depth .room-img { visibility: hidden; }
.tv-hot, .plaque-hot, .door-hot, .spot-hot { will-change: translate; }
/* The screens are alive: a slow glow, a rolling scan line, a soft flicker on. */
.tv-live { animation: tv-on .9s ease-out both, tv-glow 5s ease-in-out 1s infinite; }
.tv-live::before {
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none;
  background: linear-gradient(transparent, rgba(160, 200, 255, .06), transparent);
  animation: tv-scan 6s linear infinite;
}
@keyframes tv-on { 0% { opacity: 0; filter: brightness(3) saturate(0); } 40% { opacity: .7; } 100% { opacity: 1; filter: none; } }
@keyframes tv-glow { 0%, 100% { box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), 0 0 18px rgba(120, 160, 220, .10); } 50% { box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), 0 0 34px rgba(120, 160, 220, .22); } }
@keyframes tv-scan { to { top: 130%; } }
.tv-row em.live::before { content: "● "; animation: live-dot 1.2s steps(2, start) infinite; }
@keyframes live-dot { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .tv-live, .tv-live::before, .tv-row em.live::before { animation: none !important; }
}

/* ---------------- The 3D rooms (world-boot.js / world.js) ---------------- */
.world-3d main.house > .room { display: none !important; }
.world {
  position: relative; height: calc(100svh - var(--hdr)); min-height: 420px; overflow: hidden;
  background: #0b0907 url(/assets/house/training.webp) center / cover no-repeat;
  touch-action: pan-y; /* phones: up/down swipes scroll the page; sideways swipes turn you */
}
.world-canvas { touch-action: pan-y; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; cursor: grab; outline: none; }
.world-ready .world-canvas { opacity: 1; }
.world-canvas:active { cursor: grabbing; }
.world .room-card .room-hint, .world .room-card .swipe-hint { display: none; }
.world .room-card { padding-bottom: 64px; }
.world-ui { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.world-tags a {
  position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  color: #f4ecdc; background: rgba(11, 9, 7, .72); border: 1px solid rgba(242, 105, 27, .7); border-radius: 999px; padding: 4px 12px;
  box-shadow: 0 0 18px rgba(242, 105, 27, .25);
}
.world-tags a:hover, .world-tags a:focus-visible { background: #f2691b; color: #0b0907; }
.world-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px);
  font-size: 14px; color: #f4ecdc; background: rgba(11, 9, 7, .78); border: 1px solid rgba(242, 105, 27, .5); border-radius: 12px; padding: 8px 14px;
  text-align: center; transition: opacity .6s ease; pointer-events: none;
}
.world-hint b { color: var(--amber); font-weight: 700; }
.world-ui .tc { display: none; }
.world-ui.touch .kb { display: none; }
.world-ui.touch .tc { display: inline; }
.world-ui.hint-gone .world-hint { opacity: 0; }
.world-stick {
  display: none; position: absolute; left: 22px; bottom: 26px; width: 104px; height: 104px; border-radius: 50%;
  background: rgba(11, 9, 7, .45); border: 2px solid rgba(242, 105, 27, .6); pointer-events: auto; touch-action: none;
}
.world-stick span { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(242, 105, 27, .85); box-shadow: 0 0 18px rgba(242, 105, 27, .6); }
.world-ui.touch .world-stick { display: block; }
.world-ui.touch .world-hint { bottom: 140px; }
.world-tilt {
  position: absolute; right: 14px; top: 14px; pointer-events: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #f4ecdc; background: rgba(11, 9, 7, .72); border: 1px solid rgba(242, 105, 27, .7); border-radius: 999px; padding: 7px 12px;
}
.world-tilt.on { background: #f2691b; color: #0b0907; }
.world-ui.touch ~ .room-card { padding-bottom: 140px; }
.world-on .world .room-card { z-index: 4; }

.world .room-card { padding: 40px max(16px, 4vw) 16px; background: linear-gradient(transparent, rgba(8, 6, 4, .7)); }
.world .room-card .kicker { display: none; }
.world .room-title { font-size: clamp(22px, 3vw, 36px); margin: 0; transition: opacity .6s ease; }
.world.moved .room-card { opacity: .55; }
.world-ui.touch ~ .room-card { padding-bottom: 136px; }

.world-ui.touch .world-hint { font-size: 13px; bottom: 136px; padding: 6px 10px; }