/* Home V3 + the Weirdlist room (offline preview, make-home-room.py). Loaded after home-v3.css. */

/* the site rule is no purple: the shared rainbow (dark-preview.css) loses its violet stop on this page */
:root { --rainbow: linear-gradient(100deg, #ff453a 0%, #ff9f0a 16%, #ffe900 31%, #64ff00 46%, #00eadb 62%, #008cff 78%, #008cff 86%, #ff49cf 86%, #ff49cf 100%);
  --rainbow-nv: linear-gradient(100deg, #ff49cf 0%, #ff453a 14%, #ff9f0a 30%, #ffe900 46%, #64ff00 62%, #00eadb 80%, #008cff 100%); }   /* no blue next to pink: their seam is violet */

/* ---- spots left under the hero title -------------------------------------------------------- */
.v3r-spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; max-width: 460px; }
.v3r-spots[hidden] { display: none; }
.v3r-spot { --c: #ffe900; display: grid; gap: 3px; padding: 10px 12px 11px; background: rgba(12, 16, 25, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.v3r-spot[data-k="gtd"] { --c: #00eadb; }
.v3r-spot[data-k="fcfs"] { --c: #64ff00; }
.v3r-spot .k { font: 400 10px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.v3r-spot b { font: 700 28px/1 var(--px); color: var(--text, #f6f7f5); font-variant-numeric: tabular-nums; }
.v3r-spot .of { font: 500 12px/1.1 var(--px); color: var(--muted, #8f959c); }
.v3r-spot .bar { display: block; height: 3px; margin-top: 4px; background: rgba(255, 255, 255, .12); }
.v3r-spot .bar i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 6px var(--c); }

/* ---- the room in the hero (same frame as the map was) -------------------------------------- */
.v3r-room-wrap { position: relative; display: grid; gap: 10px; }
.v3r-room { --mx: 52%; --my: 36%; position: relative; display: block; aspect-ratio: 1672 / 941; overflow: hidden; line-height: 0;
  border: 1px solid transparent; border-image: var(--rainbow-nv) 1; background: #05070c; cursor: pointer;
  box-shadow: 0 30px 80px -30px rgba(0, 234, 219, .25), 0 20px 60px -20px rgba(255, 73, 207, .2); }
.v3r-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }
/* lit like the room (its lights start on); a soft light follows the mouse */
.v3r-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: screen;
  background: radial-gradient(ellipse 16% 28% at var(--mx) var(--my), rgba(255, 238, 205, .17), rgba(255, 238, 205, 0) 72%); }
.v3r-room.touched .v3r-glow { opacity: 1; }
/* Smoke on the beanbag (room.js: x 632, y 668, 98 px; 3 x 3 look sheet, 4 = front) */
.v3r-cat { --f: 4; position: absolute; left: 34.87%; top: 60.57%; width: 5.86%; aspect-ratio: 1; background: var(--sheet) no-repeat;
  background-size: 900% 100%; background-position: calc(var(--f) * 12.5%) 0; image-rendering: pixelated; transition: filter .2s; pointer-events: none; }
/* what is happening, said in the room itself */
.v3r-hint { position: absolute; left: 50%; top: 4%; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 12px;
  font: 500 13px/1.2 var(--px); color: #f6f7f5; background: rgba(8, 11, 18, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); pointer-events: none; }
.v3r-hint i { width: 8px; height: 8px; background: #64ff00; box-shadow: 0 0 8px #64ff00; animation: v3r-live 1.6s steps(1) infinite; }
@keyframes v3r-live { 50% { opacity: .25; } }
.v3r-go { position: absolute; left: 50%; bottom: 5%; translate: -50% 0; line-height: 1.2; pointer-events: none; }
.v3r-go .px-cta-face { display: block; padding: 12px 18px; font: 700 15px/1 var(--px); color: #101722; background: #edf4f2;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #9aabb8; }
.v3r-room:hover .v3r-go .px-cta-face, .v3r-room:focus-visible .v3r-go .px-cta-face { background: #fff; }
.v3r-room:hover .v3r-go, .v3r-room:focus-visible .v3r-go { animation-duration: .9s, 2.4s; }
.v3r-room:focus-visible { outline: 2px solid #f6f7f5; outline-offset: 3px; }

/* the room is alive (owner 16/10: "o quarto animado... meu bonequinho se mexendo"): the TV and the arcade play Weird Cats TV
   on the room's own glass (room-v2/tv.js, the same quads as the room, a 1672 x 941 stage scaled to the picture), Smoke breathes
   and looks around (home-v3-room.js), the frame glows */
.v3r-stage { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; pointer-events: none; }
.v3r-stage .tv-screen { position: absolute; overflow: hidden; background: #000; opacity: 0; transition: opacity .3s; }
.v3r-stage .tv-screen.on { opacity: 1; }
.v3r-stage .wc-tv video, .v3r-stage .wc-tv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v3r-stage .wc-tv video:not([src]), .v3r-stage .wc-tv img:not([src]), .v3r-stage .wc-tv-bg, .v3r-stage .wc-tv-osd { display: none; }
.v3r-stage .tv-screen::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, .38) 100%), linear-gradient(112deg, rgba(255, 255, 255, .1), transparent 38%); }
.v3r-stage .tv-scan { position: absolute; inset: 0; z-index: 3; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .28) 2px 4px); box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, .55); }
.v3r-stage .arcade-screen video { inset: -24%; width: 148%; height: 148%; }
.v3r-stage .arcade-screen .tv-scan { background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .35) 2px 4px); box-shadow: none; }
.v3r-stage .arcade-screen::after { background: radial-gradient(ellipse at 50% 48%, transparent 46%, rgba(0, 0, 0, .7) 100%), linear-gradient(112deg, rgba(255, 255, 255, .08), transparent 38%); }
.v3r-cat { transform-origin: 50% 100%; animation: v3r-breathe 1.8s steps(1) infinite; }
@keyframes v3r-breathe { 50% { transform: scaleY(.975); } }
.v3r-room { animation: v3r-frame 3.2s ease-in-out infinite; }
@keyframes v3r-frame {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 73, 207, .25), 0 0 34px -6px rgba(255, 73, 207, .45), 0 30px 80px -30px rgba(0, 234, 219, .3); }
  50% { box-shadow: 0 0 0 1px rgba(0, 234, 219, .3), 0 0 44px -4px rgba(0, 234, 219, .5), 0 30px 80px -30px rgba(255, 73, 207, .3); }
}
.v3r-hint { font-size: 15px; padding: 9px 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 22px rgba(0, 234, 219, .3); }

/* ---- the Weirdlist in the main menu: first, bigger, the room's flowing rim + glow, "Open" ------------------------------ */
.v3-header .menu > .v3r-menu-wl { --loop: linear-gradient(90deg, #ff453a 0%, #ff9f0a 14%, #ffe900 28%, #64ff00 42%, #00eadb 56%, #008cff 68%, #008cff 75%, #ff49cf 75%, #ff49cf 87%, #ff453a 100%);
  position: relative; display: inline-block; min-height: 0; margin: -6px 0; padding: 2px; background: var(--loop) 0 0 / 200% 100%;
  animation: v3r-rim 2.4s linear infinite, v3r-glow 2.4s ease-in-out infinite; white-space: nowrap;
  clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)); }
.v3r-menu-face { display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 12px; color: #fff; background: #0b0e16; font: 700 19px/1 var(--px); transition: background .14s; }
.v3r-menu-face i { width: 8px; height: 8px; flex: none; background: #64ff00; box-shadow: 0 0 8px #64ff00; animation: v3r-live 1.6s steps(1) infinite; }
.v3r-open { padding: 4px 6px 3px; font: 400 10px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: #0c0d0f; background: #64ff00; }
.v3-header .menu > .v3r-menu-wl:hover, .v3-header .menu > .v3r-menu-wl:focus-visible { animation-duration: .9s, 2.4s; }
.v3r-menu-wl:hover .v3r-menu-face, .v3r-menu-wl:focus-visible .v3r-menu-face { background: #151b29; }
@media (min-width: 761px) and (max-width: 1240px) { .v3r-menu-face { font-size: 16px; padding: 8px 10px; gap: 7px; } }
@media (max-width: 760px) {   /* phones: the menu wraps and the Weirdlist takes the whole line under the others */
  .v3-header .menu { flex-wrap: wrap; row-gap: 10px; }
  .v3-header .menu > .v3r-menu-wl { order: 9; flex: 1 1 100%; margin: 0 0 6px; }
  .v3r-menu-face { justify-content: center; padding: 12px 14px; font-size: 18px; }
}

/* ---- Pick a reality: three doors now (the Weirdlist is the room up top) ---- */
.doors { grid-template-columns: repeat(3, minmax(0, 220px)); }
@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr 1fr; }
  .doors > .door:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}

/* ---- the room's bottom menu, under the picture --------------------------------------------- */
.v3r-dock { display: flex; justify-content: center; gap: 2px; padding: 6px; background: rgba(12, 16, 25, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); border: 1px solid transparent; border-image: var(--rainbow-nv) 1; }
.v3r-dock a { flex: 1 1 0; display: grid; justify-items: center; gap: 4px; padding: 6px 4px 7px; color: rgba(255, 255, 255, .78); text-decoration: none;
  font: 500 13px/1 var(--px); transition: background .14s; }
.v3r-dock a:hover, .v3r-dock a:focus-visible { background: rgba(255, 255, 255, .11); color: #fff; outline: none; }
.v3r-dock .ico { width: 40px; height: 40px; background: var(--ico-sheet) no-repeat; background-size: 160px 160px;
  background-position: calc(var(--x) * -40px) calc(var(--y) * -40px); image-rendering: pixelated; }
.v3r-dock a:hover .ico { filter: drop-shadow(-2px 0 0 #fb2190) drop-shadow(2px 0 0 #00e7fc); }

/* ---- the arrival pop-up ----------------------------------------------------------------------- */
.v3r-pop { width: min(520px, calc(100vw - 32px)); padding: 22px 22px 18px; color: #f6f7f5; background: rgba(8, 11, 18, .94); border: 1px solid transparent;
  border-image: var(--rainbow-nv) 1; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.v3r-pop::backdrop { background: rgba(4, 5, 7, .72); backdrop-filter: blur(3px); }
.v3r-pop[open] { animation: v3r-in .35s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes v3r-in { from { transform: translateY(24px) scale(.96); opacity: 0; } }
.v3r-pop-x { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border: 0; background: none; color: #8f959c; font: 400 26px/1 var(--px); cursor: pointer; }
.v3r-pop-x:hover { color: #fff; }
.v3r-pop .v3r-pop-k { margin: 0 0 6px; font: 400 10px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: #8f959c; }
.v3r-pop h2 { margin: 0 0 10px; font: 700 26px/1.1 var(--px); }
.v3r-pop .v3r-pop-lead { margin: 0 0 16px; font: 400 15.5px/1.45 var(--read); color: #cfd3d7; }
.v3r-pop-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3r-tier { --c: #ffe900; display: grid; gap: 3px; padding: 11px 12px 12px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.v3r-tier[data-k="gtd"] { --c: #00eadb; }
.v3r-tier[data-k="fcfs"] { --c: #64ff00; }
.v3r-tier .t-k { font: 400 10px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.v3r-tier b { font: 700 30px/1 var(--px); font-variant-numeric: tabular-nums; }
.v3r-tier .t-of { font: 500 12px/1.1 var(--px); color: #8f959c; }
.v3r-tier .t-why { margin-top: 6px; padding-top: 6px; border-top: 1px dotted rgba(255, 255, 255, .18); font: 500 12px/1.25 var(--px); color: #cfd3d7; }
.v3r-pop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.v3r-pop-later { border: 0; background: none; color: #8f959c; font: 500 14px/1 var(--px); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.v3r-pop-later:hover { color: #fff; }
.v3r-pop .v3r-pop-fine { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .09); font: 500 12.5px/1.45 var(--px); color: #a3a9b0; }
.v3r-pop:focus, .v3r-pop:focus-visible { outline: none; }

/* ---- the engagement keys: the room's hype (a rim that flows, glow, shine, a rare RGB jolt). No violet (site rule). ---- */
.v3r-hype, .v3r-go { --loop: linear-gradient(90deg, #ff453a 0%, #ff9f0a 14%, #ffe900 28%, #64ff00 42%, #00eadb 56%, #008cff 68%, #008cff 75%, #ff49cf 75%, #ff49cf 87%, #ff453a 100%); }
.px-cta.v3r-hype { background: var(--loop) 0 0 / 200% 100%; animation: v3r-rim 2.4s linear infinite, v3r-glow 2.4s ease-in-out infinite; }
.v3r-go { display: inline-block; padding: 3px; background: var(--loop) 0 0 / 200% 100%; animation: v3r-rim 2.4s linear infinite, v3r-glow 2.4s ease-in-out infinite;
  clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); }
.v3r-hype .px-cta-face, .v3r-go .px-cta-face { position: relative; overflow: hidden; animation: v3r-jolt 6s steps(1) infinite; }
.v3r-hype .px-cta-face::after, .v3r-go .px-cta-face::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .14) 52%, transparent 56%) -160% 0 / 250% 100% no-repeat; animation: v3r-shine 4.6s steps(14) infinite; }
.v3r-go .px-cta-face::after { background-image: linear-gradient(100deg, transparent 0 42%, rgba(0, 234, 219, .45) 46%, rgba(255, 73, 207, .3) 52%, transparent 56%); }
.px-cta.v3r-hype:hover, .px-cta.v3r-hype:focus-visible { animation-duration: .9s, 2.4s; }
@keyframes v3r-rim { to { background-position: 200% 0; } }
@keyframes v3r-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 73, 207, .45)); } 50% { filter: drop-shadow(0 0 16px rgba(0, 234, 219, .6)); } }
@keyframes v3r-shine { 0%, 64% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
@keyframes v3r-jolt {
  0%, 89%, 100% { translate: 0 0; text-shadow: none; }
  90% { translate: -2px 0; text-shadow: -2px 0 #00eadb, 2px 0 #ff49cf; }
  91% { translate: 2px 0; text-shadow: 2px 0 #00eadb, -2px 0 #ff49cf; }
  92% { translate: -1px 0; text-shadow: -1px 0 #00eadb, 1px 0 #ff49cf; }
  93% { translate: 0 0; text-shadow: none; }
}

@media (max-width: 760px) {
  .v3r-spot b { font-size: 22px; }
  .v3r-dock a { font-size: 11px; }
  .v3r-dock .ico { width: 32px; height: 32px; background-size: 128px 128px; background-position: calc(var(--x) * -32px) calc(var(--y) * -32px); }
  .v3r-hint { font-size: 11px; padding: 5px 9px; gap: 6px; }
  .v3r-go .px-cta-face { padding: 8px 12px; font-size: 12px; }
  .v3r-tier { padding: 9px 8px 10px; }
  .v3r-tier b { font-size: 23px; }
  .v3r-pop h2 { font-size: 22px; }
}
@media (max-width: 480px) { .v3r-hint .more { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .v3r-go, .v3r-go .px-cta-face, .px-cta.v3r-hype, .v3r-hype .px-cta-face, .v3r-hint i, .v3r-pop[open] { animation: none; }
  .v3r-cat, .v3r-room, .v3-header .menu > .v3r-menu-wl, .v3r-menu-face i { animation: none; }
  .v3r-hype .px-cta-face::after, .v3r-go .px-cta-face::after { animation: none; opacity: 0; }
}

/* the Weirdlist docs, one tap from the pop-up (owner 16/10: "sempre um linkzinho para acessar o doc") */
.v3r-pop .v3r-pop-fine a { color: #ffe900; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.v3r-pop .v3r-pop-fine a:hover { color: #fff; }

/* ---- the room like the old roadmap video (owner 16/10: "tira aquele quadrado... o mesmo estilo que estava antes", "essas bordas"):
   no frame, no box, no glow; it bleeds to the right edge and dissolves into the page (home-v3-hero-proposal.css .map rules, same mask) ---- */
@media (min-width: 1101px) {
  .v3r-room-wrap { z-index: 1; margin-left: -56px; align-self: center; justify-self: end; width: min(calc(100% + 56px), calc(80vh * 1672 / 941)); }
}
.v3r-room { border: 0; border-image: none; box-shadow: none; background: none; animation: none; overflow: visible; }
.v3r-art, .v3r-stage, .v3r-glow { -webkit-mask-image: var(--map-mask); -webkit-mask-composite: source-in; mask-image: var(--map-mask); mask-composite: intersect; }
.v3r-stage { -webkit-mask-size: 1672px 941px; mask-size: 1672px 941px; }
.v3r-room-wrap::before { content: ""; position: absolute; inset: -12% -6% -14% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 58% 46%, rgba(0, 234, 219, .14), transparent 70%), radial-gradient(34% 36% at 26% 70%, rgba(255, 73, 207, .09), transparent 70%), radial-gradient(30% 30% at 80% 28%, rgba(255, 233, 0, .06), transparent 70%); }
/* the labels float with a dark halo instead of a plate, like the old chapter tags */
.v3r-hint { background: none; box-shadow: none; padding: 0;
  filter: drop-shadow(0 1px 0 #0c0d0f) drop-shadow(0 0 2px #0c0d0f) drop-shadow(0 0 7px rgba(12, 13, 15, .95)) drop-shadow(0 0 14px rgba(12, 13, 15, .8)); }
.v3r-dock { background: none; box-shadow: none; border: 0; border-image: none; }
.v3r-dock a { filter: drop-shadow(0 0 6px rgba(12, 13, 15, .9)); }
/* "Enter the District" under the main key: no rainbow line under it either (owner 16/10, the borders on the home) */
.v3-cta2 { border-bottom: 0; border-image: none; }
/* the Weirdlist ticket card: back in the row like before, first of the four, glowing, open (owner 16/10: "como estava antes, mas com o ticket na frente") */
.doors { grid-template-columns: repeat(4, minmax(0, 220px)); }
.doors > .door-wl { order: -1; }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr 1fr; } }
.door-wl .door-art { border-color: transparent; border-image: var(--rainbow-nv) 1; animation: v3r-glow 2.4s ease-in-out infinite; }
.door-wl .door-art img { filter: none; }
@media (prefers-reduced-motion: reduce) { .door-wl .door-art { animation: none; } }

/* the room's menu under the picture, like the one inside the room (owner 16/10: "igual que tá no quarto"): one ticket strip
   (room-v2 skins.css, the Astra Ticket kit), close together, icon + word side by side, a key under the finger or the mouse */
.v3r-dock { justify-self: end; width: max-content; max-width: 100%; gap: 2px; padding: 0; margin-top: -4px; border-style: solid; border-width: 8px 24px;
  border-image: url(./weirdlist/printer/art/opt/tk-strip.png) 16 48 16 48 fill / 8px 24px 8px 24px stretch; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.v3r-dock a { flex: none; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0 12px 0 6px; min-height: 44px; color: #f6f7f5; filter: none;
  border: solid transparent; border-width: 5px 7px 7.5px 7px; background: none; font-size: 14px; }
.v3r-dock a:hover, .v3r-dock a:focus-visible { background: none; border-image: url(./weirdlist/printer/art/opt/tk-key.png) 10 14 15 14 fill / 5px 7px 7.5px 7px stretch; }
.v3r-dock .ico { width: 32px; height: 32px; background-size: 128px 128px; background-position: calc(var(--x) * -32px) calc(var(--y) * -32px); }
@media (max-width: 760px) {
  .v3r-dock { justify-self: stretch; width: auto; border-width: 7px 16px; border-image-width: 7px 16px 7px 16px; }
  .v3r-dock a { flex: 1 1 0; flex-direction: column; gap: 2px; padding: 2px 1px 0; min-height: 52px; font-size: 10px; }
  .v3r-dock .ico { width: 28px; height: 28px; background-size: 112px 112px; background-position: calc(var(--x) * -28px) calc(var(--y) * -28px); }
}
@media (min-width: 761px) { .v3r-dock { margin-right: 16px; } }