/* ============================================================================
   Home V3 · HERO PROPOSAL (override layer)
   Load AFTER home-v3.css:  <link rel="stylesheet" href="./home-v3-hero-proposal.css">

   Idea: the roadmap map behaves like the old portal video. No frame, no box:
   it bleeds to the right edge of the viewport and dissolves into the page on
   its left, top and bottom edges. The copy column stays on the left. Every
   "window" (rainbow border on the map, chapter tag boxes, "Click a padlock"
   box, corner brackets, realm panel rectangle) becomes a floating element
   with a dark halo instead of a border.

   Geometry rule: .map keeps aspect-ratio 1672/941 and the img stays width:100%,
   so every % hotspot, cat sprite and the map-fx canvas stay aligned. The
   dissolve is a mask on the IMAGE + CANVAS + placeholder only, never on .map,
   so labels and cats near an edge are never faded.
   ========================================================================== */

/* ---- Shared dissolve geometry (desktop) ----------------------------------- */
.v3 {
  --map-fade-l: 9%;    /* left dissolve width: the map's dark cliffs, before the Arcade */
  --map-fade-t: 10%;   /* top dissolve: blends into the header area */
  --map-fade-b: 16%;   /* bottom dissolve: the houses melt into the page */
  --map-fade-r: 3%;    /* tiny softening at the viewport edge */
  --map-mask:
    linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) calc(var(--map-fade-l) * .5), #000 var(--map-fade-l), #000 calc(100% - var(--map-fade-r)), rgba(0, 0, 0, .6) 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--map-fade-t), #000 calc(100% - var(--map-fade-b)), transparent 100%);
}

/* ---- Hero grid: map column runs to the right edge of the viewport ---------- */
@media (min-width: 1101px) {
  .v3-hero {
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: center;
    gap: 0;                          /* the dissolve is the gap */
    padding-top: 0; padding-bottom: 40px;   /* room for the caption + the dissolve to settle before the doors */
    padding-right: 0;                /* the map owns the right edge */
    isolation: isolate;
    overflow: visible;
  }
  .v3-copy { position: relative; z-index: 2; padding: 56px 0 64px; }
  /* the title sits on the scene like in the old hero: a dark halo keeps it crisp
     where the map's dissolve zone passes behind it */
  .v3-copy h1, .v3-collection, .v3 .hero-actions { text-shadow: 0 2px 0 #0c0d0f, 0 0 18px rgba(12, 13, 15, .9); }
  .v3 .hero-actions { text-shadow: none; }
  .map-wrap {
    position: relative; z-index: 1;
    margin-left: -56px;              /* slides under the copy column's right edge; that zone is in the fade */
    margin-right: 0;
    align-self: center;
    justify-self: end;               /* always anchored to the viewport's right edge ... */
    width: min(calc(100% + 56px), calc(80vh * 1672 / 941)); /* ... and never taller than 80vh on short wide screens */
  }
}

/* ---- The map: no frame, no shadow, dissolved edges ------------------------ */
.v3 .map {
  position: relative;
  border: 0; border-image: none;
  box-shadow: none;
  background: none;                  /* the placeholder moves to ::before so it can be masked too */
  isolation: isolate;                /* keeps the ::before placeholder inside the map's stack */
  overflow: visible;
}
.v3 .map::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, #1b1f24, #0c0d0f 70%);
  -webkit-mask-image: var(--map-mask); -webkit-mask-composite: source-in;
  mask-image: var(--map-mask); mask-composite: intersect;
}
.v3 .map img,
.v3 .map-fx {
  -webkit-mask-image: var(--map-mask); -webkit-mask-composite: source-in;
  mask-image: var(--map-mask); mask-composite: intersect;
}
/* ambient glow behind the scene: the plaza's cyan + the rainbow's pink, very low,
   bleeding past the map so the edge never reads as a rectangle */
.map-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%);
}

/* ---- Hotspots: no corner brackets at rest, a soft light on hover ----------- */
.spot i { display: none; }                      /* the brackets are gone */
.spot::before { transition: backdrop-filter .18s, -webkit-backdrop-filter .18s; }
.spot:hover::before, .spot.on::before, .spot:focus-visible::before {
  -webkit-backdrop-filter: brightness(1.22) saturate(1.25);
  backdrop-filter: brightness(1.22) saturate(1.25);
}
.spot:focus-visible { outline: 0; }
.spot:focus-visible .tag strong { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Chapter tags: floating labels, no box ------------------------------- */
.spot .tag {
  margin-top: 4px;
  padding: 0;
  gap: 3px;
  background: none; border: 0; border-image: none; box-shadow: none;
  /* a dark halo instead of a plate: keeps the pixel type readable on the busy map */
  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));
}
.spot.up .tag { margin: 0 0 4px; }
.spot .tag b { font-size: 9px; letter-spacing: .14em; color: #e4e7ea; opacity: .85; }
/* the name is plain white at rest (readable on the busy scene); it turns rainbow on hover/open */
.spot .tag strong {
  font-size: 17px; line-height: 1.1; padding-bottom: 5px; position: relative;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f6f7f5;
}
.spot:hover .tag strong, .spot.on .tag strong, .spot:focus-visible .tag strong {
  background: var(--rainbow-nv); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* a 2 px rainbow underline with a glow is the only "ink" besides the type */
.spot .tag strong::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rainbow-nv); opacity: .75;
  box-shadow: 0 0 6px rgba(0, 234, 219, .45);
  transform-origin: left; transition: opacity .15s, transform .18s;
}
.spot:hover .tag strong::after, .spot.on .tag strong::after, .spot:focus-visible .tag strong::after { opacity: 1; box-shadow: 0 0 10px rgba(255, 73, 207, .6); }
.spot.plaza .tag strong::after { left: 50%; right: auto; width: 100%; transform: translateX(-50%) scaleX(.6); }
.spot.plaza:hover .tag strong::after, .spot.plaza.on .tag strong::after { transform: translateX(-50%) scaleX(1); }
.spot.plaza .tag { align-items: center; text-align: center; }
.spot .tag em { margin-top: 1px; font-size: 8px; letter-spacing: .1em; }

/* ---- "Click a padlock": a quiet caption, not a box ------------------------ */
.v3-hint {
  left: var(--map-fade-l); bottom: auto; top: 100%;
  margin-top: -10px;                  /* sits in the dissolved zone under the scene */
  padding: 0; gap: 8px;
  background: none; border: 0; border-image: none;
  color: #a1a6ad; letter-spacing: .12em;
  animation: none;
  filter: drop-shadow(0 1px 0 #0c0d0f);
}
.v3-hint svg { animation: v3-hint-pulse 2.2s ease-in-out infinite; }
@keyframes v3-hint-pulse { 50% { opacity: .45; transform: translateY(1px); } }
@media (prefers-reduced-motion: reduce) { .v3-hint svg { animation: none; } }

/* ---- Realm panel: dissolved edges, no rectangle -------------------------- */
.realm {
  padding: 6% 9% 8% 12%;              /* content stays inside the opaque core of the mask */
  background: rgba(8, 9, 10, .88);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: var(--map-mask); -webkit-mask-composite: source-in;
  mask-image: var(--map-mask); mask-composite: intersect;
}
.realm[hidden] { display: none; }
.realm-x {
  top: calc(var(--map-fade-t) + 6px); right: calc(var(--map-fade-r) + 14px);
  background: none; border: 0; border-image: none;
  color: #cfd3d7; font-size: 24px;
  filter: drop-shadow(0 1px 0 #000);
}
.realm-x:hover, .realm-x:focus-visible { color: var(--text); text-shadow: -1px 0 #00eadb, 1px 0 #ff49cf; }
.realm-art { filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .7)) drop-shadow(0 0 24px rgba(0, 234, 219, .12)); }

/* ---- Doors section (quick win): stickers float on a soft spotlight, no frames */
.v3-corridor { border-top: 0; position: relative; padding-top: 48px; }
/* a faint rainbow hairline that fades at both ends replaces the full-width grey rule */
.v3-corridor::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: var(--rainbow-nv); opacity: .28;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
}
.door-art {
  border: 0 !important; border-image: none !important;
  background: radial-gradient(ellipse 60% 55% at 50% 62%, rgba(255, 255, 255, .05), transparent 100%);
  overflow: visible;
}
.door-art::after { display: none; }                 /* the "peeled corner of the frame" needs a frame */
/* floor shadow so the sticker reads as lying on the corridor floor */
.door-art::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 2%; height: 10%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55), transparent 70%);
  transition: transform .22s, opacity .22s;
}
.door:hover .door-art::before, .door:focus-visible .door-art::before { transform: scaleX(1.1) translateY(4px); opacity: .8; }
.door:hover .door-art, .door:focus-visible .door-art, .door.is-glitch .door-art, .door.is-peeled .door-art {
  border: 0 !important; border-image: none !important;
  transform: none;                                   /* the sticker lifts, not the frame */
  background: radial-gradient(ellipse 62% 58% at 50% 62%, rgba(0, 234, 219, .09), transparent 100%);
}
.door:focus-visible { outline: 0; }
.door:focus-visible .door-name { text-decoration: underline; text-underline-offset: 4px; }
.v3-live { border: 0; padding: 0; text-shadow: 0 0 8px rgba(100, 255, 0, .6); }

/* ---- Tablet (761 - 1100): one column, the map runs edge to edge under the title */
@media (max-width: 1100px) {
  .v3 { --map-fade-l: 8%; --map-fade-r: 8%; --map-fade-t: 10%; --map-fade-b: 14%; }
  .v3-hero { gap: 8px; padding-bottom: 32px; }
  .map-wrap { margin-inline: calc(-1 * var(--edge)); }
  .v3-hint { margin-top: -8px; left: var(--edge); }
}

/* ---- Phone (<= 760): edge to edge, soft on all sides, list under the map ---- */
@media (max-width: 760px) {
  .v3 { --map-fade-l: 7%; --map-fade-r: 7%; --map-fade-t: 8%; --map-fade-b: 12%; }
  .v3-hero { gap: 14px; padding-bottom: 28px; }
  .map-wrap { margin-inline: -16px; }
  .map-wrap::before { inset: -6% 0 -8% 0; }
  /* the realm goes back to a plain block under the map: no mask, no rainbow border, a hairline top */
  .realm {
    padding: 16px; margin: 4px 16px 0;
    background: var(--surface); border: 0; border-image: none;
    -webkit-mask-image: none; mask-image: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .realm-x { top: 6px; right: 8px; }
  .map-list { margin-top: 12px; }
  .map-list button { border: 0; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
}

/* ---- Doors, loose stickers: no backdrop at all (the spotlight was clipped by the box and read
   as a faint square behind each door). Only the art, its floor shadow and the text remain. */
.door-art,
.door:hover .door-art, .door:focus-visible .door-art, .door.is-glitch .door-art, .door.is-peeled .door-art {
  background: none !important;
  box-shadow: none !important;
}