/* ============================================================
   InsanityCraft homepage v4 "Golden Hour"
   Dusk-glass overhaul: warm sunset artwork, lantern glow
   accents, chunky Lilita One display type, birds + chimney smoke.
   Background is fixed to bg10 "Morning Meadow" (flameless — fire is fully animated).
   ============================================================ */

:root {
  --gold: #ffb347;
  --gold-deep: #f28c1e;
  --coral: #ff5e8a;
  --cyan: #54d8f2;
  --blurple: #6874ff;
  --ink: #241333;
  --ink-deep: #180b24;
  --cream: #fff4e0;
  --cream-dim: rgba(255, 244, 224, .72);
  --glass: rgba(36, 19, 51, .58);
  --glass-deep: rgba(26, 12, 39, .72);
  --line: rgba(255, 214, 150, .22);
  --line-strong: rgba(255, 214, 150, .4);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(18, 6, 28, .4);
  --font-display: "Lilita One", "Nunito", sans-serif;
  --font-body: "Nunito", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--cream);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

@media (min-width: 781px) {
  body.home { height: 100vh; height: 100dvh; overflow: hidden; }
}

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ---------- Hero + switchable backgrounds ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ink);
  overflow: hidden;
}

/* The artwork + all its ambient actors (birds, chimney smoke) live on one
   layer that carries the soft blur together, so the animations sit UNDER
   the background blur exactly like the art. Oversized past the viewport so
   the blur never shows a soft transparent fringe at the edges. */
.hero-bg {
  position: absolute;
  inset: -14px;
  z-index: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center 40%;
  background-image: url("../assets/bg10.webp?v=1");
  filter: blur(5px);
  pointer-events: none;
}

@media (max-width: 700px) {
  .hero-bg { background-image: url("../assets/bg10-sm.webp?v=1"); }
}

/* ---------- Birds (cross the sky inside the blurred bg layer) ---------- */
.bird-layer { position: absolute; inset: 0; pointer-events: none; }
.bird {
  position: absolute;
  left: 0;
  pointer-events: none;
  animation: bird-fly var(--dur, 26s) linear infinite;
  animation-delay: var(--bd, 0s);
  transform: translateX(-10vw);
}
.bird img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
/* 3-frame wingbeat: up -> mid -> down -> mid */
.bird .f1 { animation: bird-frame1 .52s linear infinite; }
.bird .f2 { animation: bird-frame2 .52s linear infinite; }
.bird .f3 { animation: bird-frame3 .52s linear infinite; }
@keyframes bird-frame1 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes bird-frame2 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes bird-frame3 { 0%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes bird-fly {
  0%   { transform: translate(-10vw, 0); }
  25%  { transform: translate(20vw, -14px); }
  50%  { transform: translate(48vw, 6px); }
  75%  { transform: translate(76vw, -10px); }
  100% { transform: translate(112vw, 0); }
}

/* ---------- Foreground trees (occlude the birds) ----------
   A masked duplicate of the artwork keeping only the two big corner trees
   (left green + right pink). Painted OVER the birds with the SAME cover +
   center-40% framing as the base art, so the trees line up exactly and any
   bird crossing a canopy passes BEHIND it. Same blur as the bg (it lives in
   .hero-bg), so it stays visually identical to the underlying art. */
.hero-trees {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center 40%;
  background-image: url("../assets/bg10-trees.webp?v=1");
}
@media (max-width: 700px) {
  .hero-trees { background-image: url("../assets/bg10-trees-sm.webp?v=1"); }
}

/* ---------- Campfire glow (bottom-right) ----------
   Anchored warm light behind the flames. Screen blend so it ADDS ambient
   firelight to the pit/grass; lives in .hero-bg so it shares the blur. */
.fire-glow {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
  pointer-events: none;
}
.fire-glow i {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}
.fire-glow .ember-broad {
  left: 0; top: 0;
  width: 150px; height: 150px;
  background: radial-gradient(circle,
    rgba(255, 170, 70, .55) 0%,
    rgba(255, 130, 40, .28) 38%,
    rgba(255, 100, 30, .1) 62%,
    rgba(255, 90, 20, 0) 100%);
  animation: fire-breathe 4.3s ease-in-out infinite;
}
.fire-glow .ember-core {
  left: 0; top: -10px;
  width: 66px; height: 84px;
  background: radial-gradient(circle at 50% 60%,
    rgba(255, 244, 200, .9) 0%,
    rgba(255, 200, 90, .7) 34%,
    rgba(255, 140, 50, .35) 62%,
    rgba(255, 110, 30, 0) 100%);
  /* opacity + movement on SEPARATE animations with mismatched (prime-ish)
     durations so they drift out of phase and never settle into an obvious
     repeating pulse — reads as a random firelight flicker. */
  animation: glow-flick 2.7s ease-in-out infinite, glow-move 1.9s ease-in-out infinite;
}
/* broad halo: irregular breath, odd duration so it doesn't lock to the core */
@keyframes fire-breathe {
  0%   { opacity: .8;  transform: translate(-50%, -50%) scale(1); }
  28%  { opacity: .95; transform: translate(-50%, -50%) scale(1.06); }
  45%  { opacity: .82; transform: translate(-50%, -50%) scale(1.02); }
  67%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.09); }
  100% { opacity: .86; transform: translate(-50%, -50%) scale(1.03); }
}
@keyframes glow-flick {
  0%   { opacity: .82; }
  8%   { opacity: 1; }
  15%  { opacity: .88; }
  26%  { opacity: .97; }
  33%  { opacity: .77; }
  44%  { opacity: .95; }
  51%  { opacity: 1; }
  59%  { opacity: .84; }
  68%  { opacity: .93; }
  77%  { opacity: .75; }
  85%  { opacity: .9; }
  94%  { opacity: 1; }
  100% { opacity: .86; }
}
@keyframes glow-move {
  0%   { transform: translate(-50%, -50%) scale(1, 1); }
  13%  { transform: translate(-50%, -51%) scale(1.03, 1.05); }
  27%  { transform: translate(-50%, -50%) scale(.98, .99); }
  39%  { transform: translate(-50%, -51.5%) scale(1.02, 1.07); }
  52%  { transform: translate(-50%, -50%) scale(1, 1.01); }
  66%  { transform: translate(-50%, -50.5%) scale(1.04, 1.03); }
  79%  { transform: translate(-50%, -50%) scale(.99, 1); }
  90%  { transform: translate(-50%, -51%) scale(1.02, 1.04); }
  100% { transform: translate(-50%, -50%) scale(1, 1.02); }
}

/* ---------- Campfire flames ----------
   bg10 has NO painted flames, so the fire is now fully animated: soft flame
   tongues licking up from the pit, warm gradient, each flickering on its own
   phase. Lives in .hero-bg (blurred) between the glow (behind) and the smoke
   (above). Flame bottoms sit at the anchor and grow upward. */
.fire-flames {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
  pointer-events: none;
  animation: smoke-fadein 1.6s ease-out both;
}
.fire-flames .flame {
  position: absolute;
  bottom: 0;
  left: var(--fx, 0px);
  width: var(--fw, 26px);
  height: var(--fh, 52px);
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 63% 22%, 80% 50%, 72% 76%, 86% 100%, 14% 100%, 28% 76%, 20% 50%, 37% 22%);
  background: linear-gradient(to top,
    rgba(255, 244, 200, .96) 0%,
    rgba(255, 198, 88, .95) 24%,
    rgba(255, 138, 44, .88) 52%,
    rgba(236, 86, 28, .5) 78%,
    rgba(206, 58, 24, 0) 100%);
  animation: flame-flicker var(--ff, .5s) ease-in-out infinite alternate;
  animation-delay: var(--fdl, 0s);
}
@keyframes flame-flicker {
  0%   { transform: translateX(-50%) scale(1, .96) skewX(-1.5deg); opacity: .95; }
  50%  { transform: translateX(-50.5%) scale(.98, 1.05) skewX(1deg); opacity: 1; }
  100% { transform: translateX(-49.5%) scale(1.02, .99) skewX(-.5deg); opacity: .97; }
}

/* ---------- Chimney smoke ----------
   Puffs anchored to the artwork's chimney mouth by JS (imageToScreen), the
   layer scaled to the bg cover scale so puff size/travel track the artwork.
   Soft white puffs; the bg layer's own blur does the atmospheric softening
   (no per-puff blur needed). One radial gradient with a halving-alpha tail,
   no box-shadows (rings/discs otherwise). */
.smoke-layer {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
  pointer-events: none;
  animation: smoke-fadein 1.6s ease-out both;
}
@keyframes smoke-fadein { from { opacity: 0; } to { opacity: 1; } }
.smoke-layer .puff {
  position: absolute;
  left: -31px;
  top: -31px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, .92) 30%,
    rgba(255, 255, 255, .6) 55%,
    rgba(255, 255, 255, .3) 72%,
    rgba(255, 255, 255, .14) 84%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  animation: puff-rise var(--pd, 6s) linear infinite;
  animation-delay: var(--pdl, 0s);
}
/* rise, drift, grow and thin out — per-puff --px AND --py endpoints so the
   plume fans out at the top instead of clumping into one blob. Starts right
   at the chimney rim (no downward offset) so the smoke reads as leaving the
   top of the stack. */
@keyframes puff-rise {
  0%   { transform: translate(0, 0) scale(.14); opacity: 0; }
  8%   { opacity: var(--po, .5); }
  55%  { transform: translate(calc(var(--px, -22px) * .4), calc(var(--py, -132px) * .5)) scale(.85); }
  80%  { opacity: calc(var(--po, .5) * .55); }
  100% { transform: translate(var(--px, -22px), var(--py, -132px)) scale(1.6); opacity: 0; }
}

/* Fire smoke: reuses the .smoke-layer puff mechanism but smaller + smoky-grey
   (campfire smoke, not white steam). Must come AFTER .smoke-layer .puff so the
   equal-specificity overrides win. */
.fire-smoke .puff {
  width: 62px;
  height: 62px;
  left: -31px;
  top: -31px;
  background: radial-gradient(circle,
    rgba(124, 116, 109, .58) 0%,
    rgba(140, 132, 125, .42) 32%,
    rgba(154, 146, 139, .22) 60%,
    rgba(164, 156, 149, 0) 100%);
  animation-name: fire-rise;
}
/* Fire smoke billows, it does NOT start as a chimney point. Each puff is born
   already LARGE and spread across the fire base (--bx) so the plume is wide at
   the BOTTOM as well as the top, then drifts up and grows a little more. */
@keyframes fire-rise {
  0%   { transform: translate(var(--bx, 0px), 8px) scale(.9); opacity: 0; }
  12%  { opacity: var(--po, .7); }
  55%  { transform: translate(calc((var(--bx, 0px) + var(--px, -14px)) * .5), calc(var(--py, -120px) * .5)) scale(1.2); opacity: calc(var(--po, .7) * .82); }
  100% { transform: translate(var(--px, -14px), var(--py, -120px)) scale(1.55); opacity: 0; }
}

/* ---------- Falling leaves (left green tree) ----------
   Sparse leaves drifting down from the left canopy. Anchored + scaled by JS
   like the smoke; lives in .hero-bg so it shares the blur. Small because the
   tree sits further back in the scene. parent = fall+fade (visible only the
   first half of the cycle, so leaves are occasional not a stream); inner <i>
   = pendulum sway + tumble. */
.leaf-layer {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
  pointer-events: none;
  animation: smoke-fadein 1.6s ease-out both;
}
.leaf {
  position: absolute;
  left: var(--lx, 0);
  top: var(--ly, 0);
  opacity: 0;
  animation: leaf-fall var(--ld, 12s) linear infinite;
  animation-delay: var(--ldl, 0s);
}
.leaf i {
  display: block;
  width: 9px;
  height: 7px;
  background: #5f7d2b;
  border-radius: 0 100% 0 100%;
  animation: leaf-sway var(--ls, 1.7s) ease-in-out infinite alternate;
}
@keyframes leaf-fall {
  0%   { transform: translate(0, 0); opacity: 0; }
  4%   { opacity: 1; }
  40%  { opacity: 1; }
  50%  { transform: translate(var(--lxd, -40px), 250px); opacity: 0; }
  100% { transform: translate(var(--lxd, -40px), 250px); opacity: 0; }
}
@keyframes leaf-sway {
  from { transform: translateX(-9px) rotate(-24deg); }
  to   { transform: translateX(9px) rotate(38deg); }
}

/* ---------- Butterflies (left flower bed) ----------
   Live INSIDE .hero-bg so they share the background blur like the birds and
   smoke (owner wanted them under the filter, not sharp foreground). JS
   anchors each layer to a flower spot and scales it to the cover scale. */
.butterfly-layer {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
  z-index: 1;
  pointer-events: none;
  animation: smoke-fadein 1.6s ease-out both;
}
.butterfly {
  position: absolute;
  animation: flutter-path var(--bp, 16s) ease-in-out infinite alternate;
  animation-delay: var(--bdl, 0s);
}
.butterfly i {
  display: block;
  position: relative;
  width: 13px;
  height: 10px;
  animation: flutter-bob 1.1s ease-in-out infinite alternate;
}
.butterfly i::before,
.butterfly i::after {
  content: "";
  position: absolute;
  top: 0;
  width: 6px;
  height: 10px;
  background: var(--bc, #fff);
  border-radius: 60% 60% 45% 45%;
  opacity: .95;
  box-shadow: 0 1px 3px rgba(20, 6, 30, .35);
}
.butterfly i::before { left: 0; transform-origin: 100% 50%; animation: wing-flap .18s ease-in-out infinite alternate; }
.butterfly i::after { right: 0; transform-origin: 0% 50%; animation: wing-flap .18s ease-in-out infinite alternate; }
@keyframes wing-flap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
@keyframes flutter-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes flutter-path {
  0%   { transform: translate(0, 0); }
  22%  { transform: translate(calc(44px * var(--bs, 1)), -20px); }
  45%  { transform: translate(calc(-12px * var(--bs, 1)), -34px); }
  70%  { transform: translate(calc(-48px * var(--bs, 1)), -8px); }
  100% { transform: translate(calc(18px * var(--bs, 1)), 6px); }
}

/* ---------- Bees (around the hanging beehive, left tree) ----------
   Deliberately a DIFFERENT shape from the butterflies: a small OVAL striped
   body with fast-buzzing wings, wandering a more erratic path plus a rapid
   jitter so they read as sporadic buzzing. Blurred inside .hero-bg like the
   rest of the ambience. */
.bee-layer {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
  pointer-events: none;
  animation: smoke-fadein 1.6s ease-out both;
}
.bee {
  position: absolute;
  animation: bee-path var(--bep, 9s) ease-in-out infinite alternate;
  animation-delay: var(--bedl, 0s);
}
.bee i {
  display: block;
  position: relative;
  width: 11px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg,
    #3a2c12 0 16%, #f0c23a 16% 40%, #3a2c12 40% 58%, #f0c23a 58% 82%, #3a2c12 82% 100%);
  box-shadow: 0 1px 2px rgba(20, 10, 0, .3);
  animation: bee-jitter .5s ease-in-out infinite alternate;
  animation-delay: var(--bejl, 0s);
}
.bee i::before,
.bee i::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 6px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  animation: bee-wing .09s ease-in-out infinite alternate;
}
.bee i::before { left: 1px; transform-origin: 50% 100%; }
.bee i::after  { right: 1px; transform-origin: 50% 100%; }
@keyframes bee-wing { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes bee-jitter {
  from { transform: translate(-1.5px, -1px) rotate(-7deg); }
  to   { transform: translate(2px, 1.5px) rotate(9deg); }
}
@keyframes bee-path {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(calc(34px * var(--bes, 1)), -16px); }
  24%  { transform: translate(calc(-12px * var(--bes, 1)), -32px); }
  38%  { transform: translate(calc(40px * var(--bes, 1)), -6px); }
  52%  { transform: translate(calc(8px * var(--bes, 1)), -40px); }
  66%  { transform: translate(calc(-30px * var(--bes, 1)), -22px); }
  80%  { transform: translate(calc(24px * var(--bes, 1)), -44px); }
  100% { transform: translate(calc(-8px * var(--bes, 1)), -8px); }
}

/* Black vignette veil: nearly clear in the centre, darkening
   radially toward the edges so the art glows through the middle.
   TEMPORARILY OFF (display:none) so the owner can compare with
   the raw art. Delete that one line to bring the vignette back */
.hero::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 100% at 50% 45%,
    rgba(0, 0, 0, .1) 0%,
    rgba(0, 0, 0, .26) 52%,
    rgba(0, 0, 0, .58) 80%,
    rgba(0, 0, 0, .78) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1060px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 54px 20px 116px;
}

/* ---------- Breathing logo ----------
   The served image MUST be exactly 2x the CSS display width
   (1120px for 560px) or the animated layer shimmers */
/* The clickable anchor is sized to the logo (not the full row) and centred,
   so the hit area hugs the artwork instead of spanning the whole hero. */
.hero-inner > a {
  display: block;
  width: min(560px, 88%);
  margin: 0 auto;
}

.hero-logo-wrap {
  display: block;
  width: 100%;
  animation: logo-breathe 5.5s ease-in-out infinite;
  filter: drop-shadow(0 12px 34px rgba(255, 157, 46, .38)) drop-shadow(0 3px 10px rgba(30, 8, 44, .55));
}
.hero-logo { width: 100%; height: auto; display: block; }

@keyframes logo-breathe {
  0%, 100% { transform: scale(.95); }
  50% { transform: scale(1); }
}

/* Slogan sits in its own long frosted-glass bar styled like the action cards
   below: black display-font text (matches the button titles), no outline. */
.tagline {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 8px 18px 6px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .68));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(18, 6, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  font-family: var(--font-body);
  font-weight: 700;
  /* viewport-scaled so the whole line always fits on ONE line */
  font-size: clamp(0.42rem, 1.5vw, 0.9rem);
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--ink);
}
/* top accent banner like the action cards, but a green -> orange -> red
   gradient running left to right (overflow:hidden clips it to the rounded corners) */
.tagline::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4cc94c 0%, #ffd633 50%, #ff4d4d 100%);
}

/* ---------- Action cards ---------- */

.actions {
  margin-top: 34px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(155px, 225px));
  justify-content: center;
  gap: 16px;
}

.action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 14px 17px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .68));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(18, 6, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

/* glowing accent seam along the top of each card */
.action-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 4%, var(--accent), transparent 96%);
  opacity: .95;
}

.action-card:hover, .action-card:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 55%, #fff);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .8));
  box-shadow: 0 18px 40px rgba(18, 6, 28, .32);
  box-shadow: 0 18px 40px rgba(18, 6, 28, .32), 0 0 30px color-mix(in srgb, var(--accent) 30%, transparent);
}

.action-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent2));
  background: radial-gradient(120% 120% at 32% 26%, color-mix(in srgb, var(--accent) 80%, #fff 20%), var(--accent2));
  box-shadow: 0 6px 16px rgba(18, 6, 28, .28), inset 0 2px 4px rgba(255, 255, 255, .45);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent2) 45%, transparent), inset 0 2px 4px rgba(255, 255, 255, .45);
  /* A pure vertical lift + uniform scale (NO rotate, NO x-shift) so there is
     no lateral component that can pixel-snap on the way out. Explicit identity
     base (not "none") + own compositor layer keeps the return perfectly smooth. */
  transform: translateY(0) scale(1);
  backface-visibility: hidden;
  will-change: transform;
  transition: transform .22s ease;
}
.action-icon svg { width: 27px; height: 27px; }
.action-card:hover .action-icon, .action-card:focus-visible .action-icon { transform: translateY(-4px) scale(1.12); }

.action-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: .03em;
  color: var(--ink);
}

.action-sub { font-size: .8rem; font-weight: 700; color: rgba(36, 19, 51, .6); }

/* ---------- Floating nav (top right) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px clamp(14px, 3vw, 30px) 0;
  pointer-events: none;
}
.nav-inner { display: flex; align-items: center; }
.nav-spacer { flex: 1; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  pointer-events: auto;
}

/* Light frosted-glass chips, matching the main action cards' look */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .68));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(18, 6, 28, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.chip svg { width: 17px; height: 17px; }
.chip:hover {
  border-color: rgba(255, 255, 255, .95);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .8));
  box-shadow: 0 11px 26px rgba(18, 6, 28, .26), inset 0 1px 0 rgba(255, 255, 255, .95);
  transform: translateY(-1px);
}

/* ---------- Dropdown ---------- */

.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  min-width: 208px;
  padding: 8px;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .78));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(18, 6, 28, .26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dropdown-menu { top: calc(100% + 10px); right: 0; }
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- join modal (after the Join card copies the IP) ----------
   Outlined in the footer's rainbow (padding-box white over a border-box
   gradient, so the ring follows the rounded corners). */
.modal.join-modal {
  /* 430px = owner pick. Tried: 420px (first), 380px (thinner), 520px (every line fits),
     480px (smallest where "Paste the IP..." ~403px + "On Bedrock?..." stay on one line), 450px. */
  position: relative; width: min(430px, 100%); padding: 30px 26px 24px;
  border: 3px solid transparent; border-radius: 24px;
  background:
    linear-gradient(180deg, #ffffff, #f8f5fb) padding-box,
    linear-gradient(90deg, #ff5e5e, #ff9a2e, #ffd633, #4cc94c, #35b8e8, #6874ff, #b06bff) border-box;
  box-shadow: 0 24px 60px rgba(18, 6, 28, .45);
}
/* outline tick: ring + check drawn on each open (base state = fully drawn,
   so the close fade never snaps it back to empty) */
.join-modal .modal-icon.join-tick {
  width: 78px; height: 78px; margin-bottom: 14px;
  background: none; color: #3aa637; border-radius: 0;
}
/* scoped to beat the later generic .modal-icon svg 28px rule */
.join-modal .join-tick svg { width: 78px; height: 78px; overflow: visible; stroke-width: 2.2; }
.join-tick circle, .join-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.join-tick circle { transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.modal-backdrop.open .join-tick circle { animation: join-draw .5s cubic-bezier(.65, 0, .35, 1) both; }
.modal-backdrop.open .join-tick path { animation: join-draw .32s cubic-bezier(.65, 0, .35, 1) .38s both; }
@keyframes join-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.join-modal h3 { margin-bottom: 14px; }
.join-modal .join-ip {
  display: block; margin: 0 0 10px; padding: 12px 16px;
  font-family: var(--font-body); font-weight: 800; font-size: 1.12rem; letter-spacing: .01em;
  color: var(--ink); word-break: break-all; user-select: all;
  background: #f3eff7; border: 1px solid rgba(36, 19, 51, .1); border-radius: 12px;
}
.join-modal .join-lead { font-size: .9rem; font-weight: 600; line-height: 1.5; color: rgba(36, 19, 51, .62); margin-bottom: 18px; }
.join-modal .join-note {
  font-size: .86rem; font-weight: 600; line-height: 1.5; color: rgba(36, 19, 51, .72);
  text-align: center; background: rgba(53, 184, 232, .1); border: 1px solid rgba(53, 184, 232, .35);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 18px;
}
.join-note strong { font-weight: 800; color: var(--ink); }
.join-modal .join-alt {
  font-size: .82rem; font-weight: 600; line-height: 1.5; color: rgba(36, 19, 51, .56);
  padding-top: 16px; border-top: 1px solid rgba(36, 19, 51, .08); margin-bottom: 12px;
}
.join-discord {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px;
  font-family: var(--font-body); font-weight: 800; font-size: .95rem; text-decoration: none; color: #fff;
  background: #5865f2; border-radius: 12px; padding: 12px 18px;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.join-discord svg { width: 22px; height: 22px; flex: none; }
.join-discord:hover { background: #4752c4; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(88, 101, 242, .3); }
.join-discord:focus-visible { outline: 3px solid rgba(88, 101, 242, .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.open .join-tick circle, .modal-backdrop.open .join-tick path { animation: none; }
}

/* the More menu offers Home only when you are not already on it */
body.route-home .menu-home { display: none; }
.dropdown-menu a, .dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease;
}
.dropdown-menu a:hover, .dropdown-menu button:hover {
  background: rgba(36, 19, 51, .09);
}
.dropdown-menu svg { width: 17px; height: 17px; flex: 0 0 auto; }

.dropdown-toggle svg:last-child { transition: transform .2s ease; }
.dropdown.open .dropdown-toggle svg:last-child { transform: rotate(180deg); }

/* ---- Account dropdown (signed-in nav) ---- */
#acctDropdown .acct-name { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-menu li.dd-sep { height: 1px; margin: 6px; padding: 0; background: rgba(36, 19, 51, .12); }
.dropdown-menu button.dd-logout { color: #c0392b; }
.dropdown-menu button.dd-logout:hover { background: rgba(192, 57, 43, .1); }

/* ---------- Hover-reveal footer (desktop home) ---------- */

.footer {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .88));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 -10px 30px rgba(18, 6, 28, .16);
}
/* rainbow bar along the very top edge — stays visible in the collapsed 14px strip */
.footer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #ff5e5e, #ff9a2e, #ffd633, #4cc94c, #35b8e8, #6874ff, #b06bff);
}
.footer-inner {
  max-width: 1060px;
  margin: 0 auto;
  /* extra 5px top (= rainbow bar height) so content centres in the WHITE area
     below the gradient, not the full footer */
  padding: 19px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-copy { font-size: .82rem; font-weight: 600; color: rgba(36, 19, 51, .6); }
.footer-links { display: flex; gap: 16px; list-style: none; }
.footer-links a, .footer-links button {
  background: none;
  border: 0;
  padding: 0;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(36, 19, 51, .72);
  text-decoration: none;
  cursor: pointer;
  transition: color .16s ease;
}
.footer-links a:hover, .footer-links button:hover { color: var(--gold-deep); }

@media (min-width: 781px) {
  body.home .footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    transform: translateY(calc(100% - 14px));
    transition: transform .3s ease;
  }
  body.home .footer::before {
    content: "";
    position: absolute;
    top: 7.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(36, 19, 51, .28);
  }
  body.home .footer:hover, body.home .footer:focus-within { transform: translateY(0); }
}

/* ---------- Login modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(14, 5, 22, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }

.modal {
  width: min(400px, 100%);
  padding: 30px 26px 26px;
  border-radius: 22px;
  border: 1px solid rgba(36, 19, 51, .08);
  background: linear-gradient(180deg, #ffffff, #f7f3fb);
  box-shadow: 0 24px 60px rgba(18, 6, 28, .45);
  text-align: center;
  transform: translateY(10px) scale(.97);
  transition: transform .22s ease;
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }

.modal-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(120% 120% at 32% 26%, #ffd06b, var(--gold-deep));
}
.modal-icon svg { width: 28px; height: 28px; }

.modal h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: .02em;
  margin-bottom: 8px;
  color: var(--ink);
}
.modal p { font-size: .93rem; font-weight: 600; color: rgba(36, 19, 51, .62); margin-bottom: 20px; }

.btn-solid {
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffc95e, var(--gold-deep));
  color: #3a1d08;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .18s ease;
}
.btn-solid:hover { transform: translateY(-2px); }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .82));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 12px 30px rgba(18, 6, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: translate(-50%, 16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { width: 17px; height: 17px; color: #33962c; }

/* ---------- Burger + mobile sheet ---------- */

.burger {
  display: none;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(30, 14, 44, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cream);
  cursor: pointer;
  place-items: center;
}
.burger svg { width: 22px; height: 22px; }

@media (max-width: 780px) {
  .burger { display: grid; margin-left: auto; }
  .nav-links {
    position: fixed;
    top: 70px;
    right: 14px;
    flex-direction: column;
    align-items: stretch;
    min-width: 210px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .7);
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .8));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 34px rgba(18, 6, 28, .26);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links .chip { width: 100%; justify-content: flex-start; border-radius: 12px; }
  .dropdown-menu {
    position: static;
    min-width: 0;
    margin-top: 6px;
    opacity: 1;
    visibility: hidden;
    display: none;
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 214, 150, .14);
  }
  .dropdown.open .dropdown-menu { display: block; visibility: visible; }
}

/* ---------- Responsive layout ---------- */

@media (max-width: 900px) {
  .actions { grid-template-columns: repeat(2, minmax(150px, 230px)); }
  .hero-inner { padding-bottom: 70px; }
}
@media (max-width: 380px) {
  .actions { grid-template-columns: minmax(150px, 260px); }
}
@media (max-width: 780px) {
  .hero-inner { padding-top: 84px; }
}

/* Short viewports: shrink the logo so nothing ever clips.
   If the display width changes, re-export the logo at 2x */
@media (max-height: 760px) and (min-width: 781px) {
  .hero-inner > a { width: min(470px, 80%); }
  .hero-inner { padding-bottom: 92px; }
  .actions { margin-top: 24px; }
}
@media (max-height: 640px) and (min-width: 781px) {
  .hero-inner > a { width: min(390px, 68%); }
  .tagline { margin-top: 6px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-logo-wrap { animation: none; }
  .bird-layer, .smoke-layer, .fire-glow, .fire-flames, .butterfly-layer, .leaf-layer, .bee-layer { display: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==== Auth popup modal (login / register / forgot), added 2026-08-27 ==== */
.modal.auth-modal { position: relative; width: min(420px, 100%); text-align: left; }
.auth-modal .modal-icon { margin: 0 auto 12px; }
.auth-modal h3 { text-align: center; }
.auth-modal > .auth-view > p { text-align: center; }
.modal-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(36, 19, 51, .06);
  color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .15s ease;
}
.modal-x:hover { background: rgba(36, 19, 51, .12); }
.modal-x svg { width: 15px; height: 15px; }
.auth-view[hidden] { display: none; }
.auth-form .fld { margin-top: 12px; }
.auth-form label { display: block; font-family: var(--font-body); font-weight: 700; font-size: .78rem; color: var(--ink); margin-bottom: 4px; }
.auth-form input {
  width: 100%; font-family: var(--font-body); font-size: .95rem; padding: 10px 12px;
  border: 1.5px solid rgba(36, 19, 51, .16); border-radius: 10px; color: var(--ink); background: #fff;
}
.auth-form input:focus { outline: none; border-color: var(--gold-deep); }
.auth-form .hint { display: block; font-family: var(--font-body); font-size: .72rem; color: rgba(36, 19, 51, .5); margin-top: 4px; }
.auth-form .btn-solid { width: 100%; margin-top: 18px; border-radius: 12px; }
.auth-form .m-msg { margin-top: 10px; font-family: var(--font-body); font-size: .82rem; font-weight: 700; text-align: center; line-height: 1.45; }
.auth-form .m-msg.err { color: #c0392b; }
.auth-form .m-msg.ok { color: #2f8f3e; }
.auth-form .m-msg a { color: var(--gold-deep); font-weight: 800; }
.auth-modal .m-links { text-align: center; margin-top: 12px; font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: rgba(36, 19, 51, .62); }
.auth-modal .m-links a { color: var(--gold-deep); font-weight: 800; text-decoration: none; }
.auth-modal .m-links a:hover { text-decoration: underline; }
.auth-state { text-align: center; padding: 4px 0 2px; }
.auth-state .big { font-size: 34px; line-height: 1; margin-bottom: 6px; }
.auth-state h3 { margin-bottom: 8px; }
.auth-state p { text-align: center; font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: rgba(36, 19, 51, .66); line-height: 1.55; }
.auth-state p b { color: var(--ink); word-break: break-all; }