/* Home hero with the Key Master fox (Web Designer mock-up, 2026-11-05; Scott: "3. do it", the fox as the main look, "more game-like").
   The hero turns from the gold slab to a warm dark base with game colour in it: violet, coral and teal glows behind the fox, a fan of three painted
   posters, and the gold kept as the accent (eyebrow, ROOM, the slanted edge, the Play button). Loaded on the home page only, after bright.css.
   Everything here is scoped to .kg-hero. Sign-in, the code box, the launcher, the card and its Locksmith are untouched.
   ONE IMAGE PATH PER SLOT: img/fox-hero.webp (+ -420) is the hero fox, img/fox-avatar.webp is the avatar. The hero canvas is 4:5 (760 x 950): feet on the
   bottom edge, the pointing hand at the right edge, so a Blender render with the same framing drops in with no CSS change. */

.kg-hero { --fx-ink: #f6efdc; --fx-mute: #e6dec9; --fx-gold: #f0c25a; --card-w: min(25rem, 38vw); color: var(--fx-ink); }

/* ---------- the base: warm dark, a gold ember low left, the slanted gold edge kept ---------- */
.kg-hero::before {
  background:
    radial-gradient(34rem 18rem at 0% 100%, rgba(227, 167, 47, 0.26), transparent 70%),
    radial-gradient(40rem 22rem at 100% 0%, rgba(79, 176, 255, 0.10), transparent 70%),
    radial-gradient(120% 100% at 30% 0%, #2a1f12, #17181a 62%);
  background-blend-mode: normal;
  box-shadow: none;
}
.kg-hero::after { content: ""; position: absolute; z-index: -1; left: 50%; width: 130vw; transform: translateX(-50%); top: 0; bottom: 0; pointer-events: none;
  background: linear-gradient(90deg, #b9831c, #f6d878 40%, #e3a72f 70%, #b9831c);
  clip-path: polygon(0 calc(100% - 7px), 100% calc(100% - 3.5vw - 7px), 100% calc(100% - 3.5vw), 0 100%); }

/* ---------- text on the dark base (each pair AA, measured in the report) ---------- */
.kg-hero .eyebrow { color: var(--fx-gold); }
.kg-hero h1 { color: var(--fx-ink); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6); }
.kg-hero h1 .gold { color: var(--fx-gold); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 28px rgba(240, 194, 90, 0.28); }
.kg-hero h1 .row-pin svg { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
.kg-hero .lede { color: var(--fx-mute); }
.kg-hero .ticks { color: var(--fx-mute); }
.kg-hero .ticks li::before { border-color: var(--fx-gold); }

/* the two big actions on the dark base: a visible edge so they are not dark on dark */
.kg-hero .kg-big-join { border: 2px solid #f0c25a; background: linear-gradient(180deg, #2c3234, #14181a); box-shadow: 0 5px 0 #6b4d10, 0 14px 22px rgba(0, 0, 0, 0.45); }
.kg-hero .kg-big-host { border: 2px solid #fff6dc; box-shadow: 0 5px 0 #a8802c, 0 14px 22px rgba(0, 0, 0, 0.4); }
.kg-hero .kg-big:active { transform: translateY(4px); }
.kg-hero .kg-today { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 0 3px rgba(240, 194, 90, 0.55), 0 24px 46px rgba(0, 0, 0, 0.55); }

/* ---------- the Key Master fox ---------- */
.kg-fox-stage { position: relative; pointer-events: none; width: 100%; aspect-ratio: 4 / 5; }   /* no stacking context: the glow sits behind the card, the fox in front of it */
.kg-fox-stage::before { content: ""; position: absolute; z-index: -1; inset: -10% -4% -2% -24%;
  background:
    radial-gradient(48% 40% at 52% 34%, rgba(183, 155, 255, 0.55), transparent 72%),
    radial-gradient(40% 36% at 70% 66%, rgba(255, 107, 94, 0.45), transparent 72%),
    radial-gradient(44% 36% at 26% 70%, rgba(47, 217, 201, 0.34), transparent 72%),
    radial-gradient(50% 30% at 50% 96%, rgba(255, 179, 71, 0.34), transparent 75%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.kg-fox-stage::after { content: ""; position: absolute; z-index: -1; left: 8%; width: 70%; bottom: 0.5%; height: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); }
.kg-fox { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)); }
.fx .kg-fox { animation: kgfox-bob 6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes kgfox-bob { 50% { transform: translateY(-1.2%) rotate(-0.4deg); } }
html.calm .kg-fox, html.calm .kg-fox-fan li { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .kg-fox, .kg-fox-fan li { animation: none !important; } }

/* the poster fan behind him: real game art in each game's colour, only on wide screens */
.kg-fox-fan { list-style: none; margin: 0; padding: 0; display: none; }
.kg-fox-fan li { position: absolute; z-index: 0; width: 33%; transform: rotate(var(--r)); transform-origin: 50% 90%; }
.kg-fox-fan li:nth-child(1) { --r: -9deg; left: 8%; top: -6%; width: 30%; }
.kg-fox-fan li:nth-child(2) { --r: 7deg; left: 44%; top: -10%; width: 32%; }
.kg-fox-fan li:nth-child(3) { --r: 14deg; left: 66%; top: 2%; width: 25%; }
.fx .kg-fox-fan li { animation: kgfan-sway 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2.3s); }
@keyframes kgfan-sway { 50% { transform: rotate(calc(var(--r) + 2deg)) translateY(-1.5%); } }
.kg-fox-fan a { display: block; line-height: 0; border: 3px solid var(--ga); border-radius: 0.8rem; overflow: hidden; background: #101416;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ga) 45%, #000), 0 0 30px color-mix(in srgb, var(--ga) 55%, transparent), 0 14px 22px rgba(0, 0, 0, 0.5); }
.kg-fox-fan img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 646; object-fit: cover; filter: saturate(1.15); }

/* ---------- wide screens: copy | fox | card ---------- */
@media (min-width: 1060px) {
  .kg-hero .hero-grid { position: relative; grid-template-columns: minmax(0, 1fr) var(--card-w); gap: 2rem; }
  .kg-hero .kg-launcher { max-width: none; width: var(--card-w); justify-self: end; }
  .kg-hero h1 { font-size: clamp(3.2rem, 5vw, 4rem); }
  .kg-hero .lede { max-width: 19rem; }
  .kg-hero .ticks { max-width: 21rem; }
  .kg-fox-stage { position: absolute; bottom: -0.6rem; width: clamp(18rem, 29vw, 24rem); right: calc(var(--card-w) - 2.4rem); }
  .kg-fox-fan { display: block; }
  /* the card is a little narrower beside the fox, so the brass cylinder is too */
  .kg-hero .kg-today { --rh: 3.2rem; }
  .kg-hero .kgt-ring { width: 2.05rem; } .kg-hero .kgt-strip b { font-size: 1.65rem; } .kg-hero .kgt-cap { width: 0.9rem; }
}

/* ---------- tablets and phones: the fox stands beside the lede and points at it ---------- */
@media (max-width: 1059px) {
  .kg-hero-copy { display: grid !important; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.9rem !important; align-items: center; }
  .kg-hero-copy > .eyebrow, .kg-hero-copy > h1, .kg-hero-copy > .ticks { grid-column: 1 / -1; }
  .kg-hero-copy > .eyebrow { grid-row: 1; } .kg-hero-copy > h1 { grid-row: 2; }
  .kg-hero-copy > .lede { grid-column: 2; grid-row: 3; margin: 0; max-width: none; }
  .kg-hero-copy > .kg-fox-stage { grid-column: 1; grid-row: 3; align-self: end; max-width: 13rem; }
  .kg-hero-copy > .ticks { grid-row: 4; }
  .kg-fox-stage::before { inset: -6% -18% 0 -12%; }
}
@media (max-width: 600px) {
  .kg-hero-copy > .lede { font-size: 0.98rem; line-height: 1.42; }
  .kg-hero-copy > .kg-fox-stage { margin-left: -0.5rem; }
}

/* ---------- the finale on the same dark base: the light still floods from the keyhole, now as a gold glow on warm dark (2026-11-05) ---------- */
.kg-finale .fin-flood { color: var(--fx-ink, #f6efdc);
  background-image: radial-gradient(34rem 26rem at 50% 34%, rgba(246, 216, 120, 0.42), rgba(227, 167, 47, 0.14) 60%, transparent 100%), radial-gradient(120% 100% at 50% 0%, #2a1f12, #15171a 70%); }
.kg-finale .fin-flood h2 { color: #f6efdc; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 34px rgba(240, 194, 90, 0.25); }
.kg-finale .fin-flood p { color: #e6dec9; }
.kg-finale .fin-ctas .btn { border: 2px solid #f0c25a; color: #f0c25a; background: linear-gradient(180deg, #2c3234, #14181a); box-shadow: 0 4px 0 #6b4d10, 0 10px 16px rgba(0, 0, 0, 0.4); }
.kg-finale .fin-ctas .btn.dark { color: #2a1c04; border-color: #fff6dc; background: linear-gradient(180deg, #fff6dc, #f1e1b6); box-shadow: 0 4px 0 #a8802c, 0 10px 16px rgba(0, 0, 0, 0.35); }
/* the rays fade out before the headline, so cream text never sits on cream rays */
.kg-finale .kgf-rays { -webkit-mask: radial-gradient(circle, #000 8%, transparent 42%); mask: radial-gradient(circle, #000 8%, transparent 42%); }