/* ========================================
   HOME PAGE STYLES
   Landing page with avatar, intro, and call-to-action
   ======================================== */

/* ========================================
   PAGE STRUCTURE & LAYOUT
   ======================================== */

/* ---- MAIN PAGE GRID ---- */
/* Main page grid and shared section shells */
.home-page {
  display: grid;
  width: 100%;
  max-width: none;
  gap: clamp(0.75rem, 2.5vw, 1.4rem);
  align-content: start;
  justify-items: stretch;
  justify-self: stretch;
  margin-inline: 0;
}

/* ========================================
   PAGE TOKENS & THEME
   Home-specific scene, copy, and theme variables
   ======================================== */

/* ---- PAGE TOKENS ---- */
body.page-home {
  --home-scene-tail: 13.5rem;
  --home-scene-tail-mobile: 10.8rem;
}

/* ---- DAY THEME TOKENS ---- */
html:not([data-shell-theme]) body.page-home,
html[data-shell-theme="day"] body.page-home,
body.page-home[data-shell-theme="day"] {
  --home-heading-fill-top: rgba(231, 180, 171);
  --home-heading-fill-bottom: rgba(231, 180, 171);
  --home-heading-text: #634335;
  --home-heading-shadow: #5b3029;
  --home-heading-border: rgba(182, 128, 95, 0.98);
  --home-copy-surface: rgb(232, 178, 178);
  --home-copy-text: #693331;
  --home-copy-shadow: rgba(185, 102, 91, 0.938);
  --home-copy-border: rgba(112, 59, 42, 0.98);
  --page-depth-mid-glow: rgba(134, 164, 160, 0.13);
  --page-depth-shadow-soft: rgba(11, 43, 28, 0.18);
  --page-depth-shadow-strong: rgba(8, 35, 19, 0.48);
  --page-depth-warm-glow: rgba(122, 183, 118, 0.42);
  --page-depth-forest-filter: saturate(154%) contrast(138%) brightness(1.05);
  --page-depth-scroll-rgb: 121 181 102;
  --page-depth-forest-base-rgb: 17 58 34;
  --page-depth-forest-light-rgb: 121 181 102;
  --page-depth-forest-travel: -1.8rem;
  --page-depth-forest-inner-travel: -4.6rem;
  --home-start-surface: rgb(231, 180, 171);
  --home-start-surface-strong: rgb(245, 213, 205);
  --home-start-copy: #502828a5;
  --home-start-border: rgba(81, 54, 27, 0.546);
  --home-start-button-bg: rgb(244, 216, 213);
  --home-start-button-bg-hover: rgb(236, 183, 194);
  --home-start-button-shadow: rgba(58, 19, 19, 0.279);
  --home-lantern-frame: #5f3d2b;
  --home-lantern-metal: #d5aa70;
  --home-lantern-glass: rgba(203, 238, 255, 0.46);
  --home-lantern-flame: #ffe0a3;
  --home-lantern-cord: rgba(82, 58, 43, 0.88);
  --home-lantern-shadow: rgba(24, 15, 15, 0.28);
  --home-lantern-halo: rgba(255, 226, 170, 0.16);
  --home-lantern-halo-soft: rgba(143, 189, 255, 0.18);
}

/* ---- NIGHT THEME TOKENS ---- */
html[data-shell-theme="night"] body.page-home,
body.page-home[data-shell-theme="night"] {
  --home-heading-fill-top: rgba(97, 102, 126, 0.9);
  --home-heading-fill-bottom: rgba(54, 58, 78, 0.84);
  --home-heading-text: #f3f0ffd5;
  --home-heading-shadow: #291722;
  --home-heading-border: rgb(51, 30, 72);
  --home-copy-surface: rgb(56, 60, 84);
  --home-copy-text: #eef1ff;
  --home-copy-shadow: rgba(10, 12, 26, 0.42);
  --home-copy-border: rgba(38, 21, 62, 0.98);
  --page-depth-mid-glow: rgba(78, 104, 110, 0.17);
  --page-depth-shadow-soft: rgba(6, 28, 20, 0.18);
  --page-depth-shadow-strong: rgba(4, 18, 14, 0.54);
  --page-depth-warm-glow: rgba(58, 132, 114, 0.38);
  --page-depth-forest-filter: saturate(160%) contrast(148%) brightness(1.04);
  --page-depth-scroll-rgb: 74 149 133;
  --page-depth-forest-base-rgb: 10 43 34;
  --page-depth-forest-light-rgb: 74 149 133;
  --page-depth-forest-travel: -1.55rem;
  --page-depth-forest-inner-travel: -3.9rem;
  --home-start-surface: rgb(54, 58, 78);
  --home-start-surface-strong: rgb(97, 102, 126);
  --home-start-copy: #f3f0ffa7;
  --home-start-border: rgba(24, 20, 39, 0.95);
  --home-start-button-bg: rgb(41, 45, 63);
  --home-start-button-bg-hover: rgb(66, 71, 94);
  --home-start-button-shadow: rgba(7, 8, 20, 0.28);
  --home-lantern-frame: #6e432f;
  --home-lantern-metal: #efbe78;
  --home-lantern-glass: rgba(179, 232, 255, 0.52);
  --home-lantern-flame: #ffd774;
  --home-lantern-cord: rgba(83, 63, 49, 0.92);
  --home-lantern-shadow: rgba(0, 0, 0, 0.44);
  --home-lantern-halo: rgba(255, 211, 116, 0.92);
  --home-lantern-halo-soft: rgba(232, 129, 255, 0.557);
}

/* ---- CONTENT AREA ---- */
body.page-home .content-safe {
  padding-bottom: calc(var(--content-safe-pad-bottom) + var(--home-scene-tail));
}

/* ---- SECTION CONTAINERS ---- */
.home-avatar-section,
.home-about-section,
.home-start-section,
.home-announcement-section {
  display: grid;
  justify-items: center;
  width: 100%;
}

/* ---- HOMEPAGE BULLETIN ---- */
.home-announcement-section[hidden] {
  display: none;
}

.home-announcement-carousel {
  width: min(100%, 44rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.home-announcement-slot {
  display: grid;
  justify-items: center;
}

.home-announcement-dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.home-announcement-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--home-start-border) 70%, white 12%);
  background: color-mix(in srgb, var(--home-start-surface-strong) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 18%, transparent);
  opacity: 0.6;
  cursor: pointer;
}

.home-announcement-dot.is-active {
  opacity: 1;
  background: color-mix(in srgb, var(--home-start-button-bg) 80%, white 20%);
}

.home-announcement-nav {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--home-start-border) 70%, white 10%);
  background: color-mix(in srgb, var(--home-start-button-bg) 76%, var(--home-copy-surface) 24%);
  color: var(--home-copy-text);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 14%, transparent);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.home-announcement-nav:hover,
.home-announcement-nav:focus-visible {
  transform: translateY(-0.08rem);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 20%, transparent), 0 0.4rem 0.85rem rgba(24, 15, 14, 0.16);
}

.home-announcement-nav:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--home-heading-border) 76%, white 24%);
  outline-offset: 0.15rem;
}

.home-announcement-card {
  width: min(100%, 41rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.95rem;
  padding: 0.85rem 1.05rem 0.92rem;
  border: 3px solid color-mix(in srgb, var(--home-start-border) 82%, var(--home-copy-border) 18%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--home-start-surface-strong) 72%, var(--home-copy-surface) 28%),
      color-mix(in srgb, var(--home-start-surface) 72%, var(--home-copy-surface) 28%)
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 14%, transparent),
    0 0.7rem 1.45rem rgba(24, 15, 14, 0.16);
  color: var(--home-copy-text);
  text-decoration: none;
}

.home-announcement-card:is(a) {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.home-announcement-card:is(a):hover,
.home-announcement-card:is(a):focus-visible {
  transform: translateY(-0.12rem);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 18%, transparent),
    0 0.95rem 1.9rem rgba(24, 15, 14, 0.2);
}

.home-announcement-card:is(a):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--home-heading-border) 76%, white 24%);
  outline-offset: 0.18rem;
}

.home-announcement-medallion {
  width: 4.1rem;
  height: 4.1rem;
  display: grid;
  place-items: center;
  padding: 0.28rem;
  border: 2px solid color-mix(in srgb, var(--home-start-border) 64%, white 16%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 36%),
    color-mix(in srgb, var(--home-start-button-bg) 78%, var(--home-copy-surface) 22%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 18%, transparent),
    0 0.45rem 0.9rem rgba(28, 20, 18, 0.16);
}

.home-announcement-medallion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.18rem 0.28rem rgba(37, 25, 22, 0.18));
}

.home-announcement-copy {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.home-announcement-kicker {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--home-copy-text) 72%, var(--home-heading-border) 28%);
}

.home-announcement-text {
  font-family: "DenDisplay", cursive;
  font-size: clamp(1.08rem, 2.2vw, 1.34rem);
  line-height: 1.12;
  color: var(--home-copy-text);
  text-wrap: balance;
}

.home-announcement-hint {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--home-copy-text) 62%, transparent);
}

.home-avatar-box,
.home-about-box {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.home-avatar-box {
  display: grid;
  place-items: center;
  min-height: auto;
}

/* ========================================
   START SECTION
   Call-to-action with quick navigation links
   ======================================== */

/* ---- START BOX STYLING ---- */
/* Start-here callout and quick links */
.home-start-box {
  position: relative;
  width: min(100%, 46rem);
  display: grid;
  gap: 0.85rem;
  padding: 0.75rem 1.1rem 2rem;
  border: 3px solid var(--home-start-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 30%),
    linear-gradient(180deg, var(--home-start-surface-strong), var(--home-start-surface));
  box-shadow: 0 0.75rem 1.4rem rgba(24, 15, 14, 0.18);
  overflow: visible;
   transform:translateY(-0.95rem);
}

.home-start-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--home-start-border) 48%, rgba(255, 255, 255, 0.18));
  pointer-events: none;
  transform: translate(0.22rem, 0.22rem);
  opacity: 0.48;
  z-index: -1;
}

.home-start-label {
  margin: 0;
  color: var(--home-start-copy);
  font-family: "DenDisplay", cursive;
  font-size: clamp(1.35rem, 4.1vw, 1.9rem);
  line-height: 0.92;
  text-align: center;
  position: relative;
  padding-bottom: 0.5rem;
}

.home-start-label::after {
  content: "";
  justify-self: center;
  display: block;
  width: min(6.4rem, 52%);
  height: 0.14rem;
  margin: 0.42rem auto 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--home-start-border) 84%, rgba(255, 255, 255, 0.26)) 18%, color-mix(in srgb, var(--home-start-border) 84%, rgba(255, 255, 255, 0.26)) 82%, transparent);
  opacity: 0.82;
}

.home-start-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.home-start-linkbox {
  position: relative;
  min-height: 3.45rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--home-start-border);
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--home-start-copy);
  font-size: clamp(0.98rem, 1vw + 0.38rem, 1.15rem);
  font-weight: 700;
  line-height: 1.08;
  background:
    linear-gradient((180deg, rgba(255, 0, 0, 0.797)55, 255, 255, 0.06) 60%, transparent),
    var(--home-start-button-bg);
  border-radius: 0.6rem;
  transform-style: preserve-3d;
  transition: all 175ms cubic-bezier(0.215, 0.61, 0.355, 1);
  cursor: pointer;

  box-shadow:
    0 10px 0 color-mix(in srgb, var(--home-start-button-bg) 60%, rgb(87, 19, 70) 40%),
    0 11px 0px rgba(0, 0, 0, 0.4),
    0 12px 0px rgba(0, 0, 0, 0.5);
}

.home-start-linkbox::before {
  display: none;
}

.home-start-linkbox::after {
  display: none;
}

.home-start-linkbox:hover,
.home-start-linkbox:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 60%, transparent),
    var(--home-start-button-bg-hover);
  box-shadow: none;

  transform: translateY(0.8rem);
}



/* Intermediate overrides (700px-979px) */
@media (min-width: 700px) and (max-width: 979px) {
  .home-start-box {
    width: min(100%, clamp(31rem, 74vw, 40rem));
  }

  .home-announcement-card {
    width: min(100%, clamp(29rem, 72vw, 38rem));
  }

  .home-about-box {
    width: min(100%, clamp(30rem, 70vw, 38rem));
  }

  .home-about-heading {
    width: min(100%, clamp(22rem, 53vw, 27rem));
    margin-inline: auto;
  }

  .home-about-copy {
    width: min(100%, clamp(25rem, 60vw, 31rem));
    height: auto;
    min-height: 19.5rem;
    margin-inline: auto;
  }

  .home-about-box p {
    width: min(100%, clamp(22rem, 52vw, 26rem));
  }
}

/* Mobile overrides (max-width: 699px) */
@media (max-width: 699px) {
  .home-announcement-carousel {
    width: min(100%, calc(100vw - 2.2rem));
    grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem;
    gap: 0.45rem;
  }

  .home-announcement-dots {
    margin-top: 0.35rem;
  }

  .home-announcement-nav {
    width: 2.05rem;
    height: 2.05rem;
    font-size: 1rem;
  }

  .home-announcement-card {
    width: min(100%, clamp(18.4rem, calc(100vw - 2.8rem), 23rem));
    grid-template-columns: 3.45rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.72rem 0.82rem 0.78rem;
  }

  .home-announcement-medallion {
    width: 3.45rem;
    height: 3.45rem;
  }

  .home-announcement-text {
    font-size: clamp(0.98rem, 3.8vw, 1.16rem);
  }

  .home-start-box {
    width: min(100%, clamp(18rem, calc(100vw - 3rem), 22.6rem));
    gap: 0.5rem;
    padding: 0.9rem clamp(0.74rem, 3vw, 0.95rem) 0.9rem;
    transform: translateY(-0.95rem);
  }

  .home-start-label {
    font-size: clamp(1.02rem, 4vw, 1.28rem);
    padding-bottom: 0.18rem;
  }

  .home-start-label::after {
    width: min(5.2rem, 48%);
    margin-top: 0.18rem;
  }

  .home-start-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    align-items: stretch;
  }

  .home-start-linkbox {
    min-height: 4.15rem;
    padding: 0.52rem 0.34rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.8rem, 3.2vw, 0.94rem);
    line-height: 1.04;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
}

/* ========================================
   AVATAR SYSTEM
   Layered sprite rig with interactive animations
   ======================================== */

/* ---- AVATAR FRAME & STAGE ---- */
/* Layered avatar rig and facial interaction pieces */
.home-avatar-frame {
  width: 35rem;
}

.home-avatar-stage {
  --avatar-back-x: 0px;
  --avatar-back-y: 0px;
  --avatar-back-hair-x: 0px;
  --avatar-back-hair-y: 0px;
  --avatar-back-hair-roll: 0deg;
  --avatar-head-x: 0px;
  --avatar-head-y: 0px;
  --avatar-front-x: 0px;
  --avatar-front-y: 0px;
  --avatar-roll: 0deg;
  --avatar-iris-left-x: 0px;
  --avatar-iris-left-y: 0px;
  --avatar-iris-right-x: 0px;
  --avatar-iris-right-y: 0px;
  --avatar-shine-left-x: 0px;
  --avatar-shine-left-y: 0px;
  --avatar-shine-right-x: 0px;
  --avatar-shine-right-y: 0px;
  --avatar-shine-lock-x: 0px;
  --avatar-shine-lock-y: 0px;
  --avatar-shine-roll: 0deg;
  --avatar-shine-opacity: 0.96;
  --avatar-glint-left-x: 0px;
  --avatar-glint-left-y: 0px;
  --avatar-glint-right-x: 0px;
  --avatar-glint-right-y: 0px;
  --avatar-glint-opacity: 0.82;
  position: relative;
  width: 100%;
  aspect-ratio: 1021 / 1092;
  overflow: visible;
  --avatar-night-art-filter: none;
  --avatar-night-art-opacity: 1;
  --avatar-night-eye-filter: none;
}

/* Intermediate overrides (700px-979px) */
@media (min-width: 700px) and (max-width: 979px) {
  .home-avatar-box {
    width: clamp(19rem, 34vw, 21rem);
  }

  .home-avatar-frame {
    width: 100%;
  }
}

/* Mobile overrides (max-width: 699px) */
@media (max-width: 699px) {
  .home-avatar-frame {
    width: 18rem;
  }
}

.home-avatar-backdrop {
  display: none;
}

/* ---- AVATAR RIG & LAYER GROUPS ---- */
.home-avatar-rig {
  position: absolute;
  inset: 0;
  isolation: isolate;
  filter: drop-shadow(0 0.55rem 0.8rem rgba(23, 16, 24, 0.2));}
.home-avatar-layer-group {
  position: absolute;
  inset: 0;
  transform-origin: 50% 52%;
  will-change: transform;}
.home-avatar-layer-group-back {transform: translate(var(--avatar-back-x), var(--avatar-back-y));}
.home-avatar-back-hair {
  transform:
    translate(var(--avatar-back-hair-x), var(--avatar-back-hair-y))
    rotate(var(--avatar-back-hair-roll));
  transform-origin: 50% 58%;
  will-change: transform;}
.home-avatar-layer-group-head {transform: translate(var(--avatar-head-x), var(--avatar-head-y)) rotate(var(--avatar-roll));}
.home-avatar-layer-group-front {
  transform: translate(var(--avatar-front-x), var(--avatar-front-y)) rotate(var(--avatar-roll));
  transform-origin: 50% 36%;}
.home-avatar-layer-group-face {transform: translate(var(--avatar-head-x), var(--avatar-head-y)) rotate(var(--avatar-roll));}

/* ---- AVATAR LAYER SLOTS & IMAGES ---- */
.home-avatar-layer-slot,.home-avatar-eye {
  position: absolute;
  inset: 0;}
.home-avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;}
.home-avatar-layer-slot .home-avatar-layer,
.home-avatar-eye-lashes,
.home-avatar-eye-blink,
.home-avatar-eye-brow {
  filter: var(--avatar-night-art-filter);
  opacity: var(--avatar-night-art-opacity);
  transition: filter 240ms ease, opacity 240ms ease;
}
.home-avatar-layer-slot {
  z-index: var(--avatar-layer-z, 0);
  pointer-events: none;}

/* ---- AVATAR EAR ANIMATIONS ---- */
.home-avatar-ear {will-change: transform;}
.home-avatar-ear-left {transform-origin: 78% 46%;}
.home-avatar-ear-right {transform-origin: 22% 46%;}
.home-avatar-ear-left.is-flicking { animation: home-avatar-ear-flick-left 640ms ease-out;}
.home-avatar-ear-right.is-flicking {animation: home-avatar-ear-flick-right 640ms ease-out;}
.home-avatar-eye {
  z-index: var(--avatar-layer-z, 0);
  pointer-events: none;}
.home-avatar-eye-white,.home-avatar-eye-clip,.home-avatar-eye-lashes,.home-avatar-eye-blink,.home-avatar-eye-brow,.home-avatar-eye-hit {z-index: 0;}
.home-avatar-eye-white {z-index: 1;}
.home-avatar-eye-clip .home-avatar-eye-white {z-index: 0;}
.home-avatar-eye-clip {z-index: 2;}
.home-avatar-eye-lashes {z-index: 3;}
.home-avatar-eye-blink {z-index: 4;}
.home-avatar-eye-brow {z-index: 5;}
.home-avatar-eye-hit {z-index: 6;}
.home-avatar-eye-open,.home-avatar-eye-brow {transition: opacity 90ms linear;}
.home-avatar-eye.is-blinking .home-avatar-eye-open,.home-avatar-eye.is-blinking .home-avatar-eye-clip {opacity: 1;}
.home-avatar-eye.is-blinking .home-avatar-eye-blink {opacity: 0;}
.home-avatar-eye-clip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;}
.home-avatar-iris-layer,.home-avatar-shine-layer {will-change: transform;}
.home-avatar-iris-layer,
.home-avatar-shine-layer,
.home-avatar-cursor-glint {
  transition: filter 240ms ease, opacity 240ms ease;
}
.home-avatar-iris-layer {z-index: 1;}
.home-avatar-shine-layer {
  z-index: 2;
  opacity: var(--avatar-shine-opacity);}
.home-avatar-iris-layer,
.home-avatar-shine-layer,
.home-avatar-cursor-glint {
  filter: var(--avatar-night-eye-filter);
}
.home-avatar-iris-layer-left {transform: translate(var(--avatar-iris-left-x), var(--avatar-iris-left-y));}
.home-avatar-iris-layer-right {transform: translate(var(--avatar-iris-right-x), var(--avatar-iris-right-y));}
.home-avatar-shine-layer-left {
  transform:
    translate(
      calc(var(--avatar-shine-lock-x) + var(--avatar-shine-left-x)),
      calc(var(--avatar-shine-lock-y) + var(--avatar-shine-left-y))
    )
    rotate(var(--avatar-shine-roll));
  transform-origin: 50% 50%;}
.home-avatar-shine-layer-right {
  transform:
    translate(
      calc(var(--avatar-shine-lock-x) + var(--avatar-shine-right-x)),
      calc(var(--avatar-shine-lock-y) + var(--avatar-shine-right-y))
    )
    rotate(var(--avatar-shine-roll));
  transform-origin: 50% 50%;}
.home-avatar-cursor-glint {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  width: 2.15%;
  aspect-ratio: 0.72;
  pointer-events: none;
  z-index: 3;
  opacity: var(--avatar-glint-opacity);
  background: rgba(255, 255, 255, 0.95);
  clip-path: polygon(0 0, 0 84%, 23% 66%, 37% 100%, 48% 95%, 35% 62%, 69% 62%);
  box-shadow: none;
  will-change: transform;
  mix-blend-mode: screen;}
.home-avatar-cursor-glint-left {
  transform:
    translate(
      calc(-50% + var(--avatar-glint-left-x)),
      calc(-50% + var(--avatar-glint-left-y))
    )
    rotate(-17deg);}
.home-avatar-cursor-glint-right {
  transform:
    translate(
      calc(-50% + var(--avatar-glint-right-x)),
      calc(-50% + var(--avatar-glint-right-y))
    )
    rotate(-17deg);}
.home-avatar-eye-blink {display: none; opacity: 0;}
.home-avatar-eye-hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;}

html[data-shell-theme="night"] .home-avatar-stage,
body[data-shell-theme="night"] .home-avatar-stage {
  --avatar-night-art-filter: brightness(0.7) saturate(0.95) sepia(0.0) hue-rotate(5deg);
  --avatar-night-art-opacity: 0.98;
  --avatar-night-eye-filter:
    drop-shadow(0 0 0.34rem rgba(178, 202, 255, 0.28))
    drop-shadow(0 0 0.72rem rgba(123, 140, 255, 0.22))
    brightness(1.1)
    saturate(1.12);
  --avatar-shine-opacity: 1;
  --avatar-glint-opacity: 0.92;
}
@keyframes home-avatar-ear-flick-left {
  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-4deg) translateY(-0.12%);
  }

  42% {
    transform: rotate(2deg);
  }

  64% {
    transform: rotate(-2.35deg);
  }

  82% {
    transform: rotate(0.7deg);
  }}
@keyframes home-avatar-ear-flick-right {
  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(4deg) translateY(-0.12%);
  }

  42% {
    transform: rotate(-2deg);
  }

  64% {
    transform: rotate(2.35deg);
  }

  82% {
    transform: rotate(-0.7deg);
  }}


/* ========================================
   ABOUT SECTION
   Welcome text panel with styled heading
   ======================================== */

/* ---- ABOUT BOX LAYOUT ---- */
/* Welcome copy panel */
.home-about-box {
  gap: 0;
  width: min(100%, 40rem);
}

/* ---- HEADING STYLING ---- */
.home-about-heading {
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem;
  border: 3px solid;
  border-color: var(--home-heading-border);
  background:
    linear-gradient(180deg, rgba(244, 206, 188, 0.12), transparent 30%),
    linear-gradient(180deg, var(--home-heading-fill-top), var(--home-heading-fill-bottom));
  z-index: 1;
   transform:translateY(-1rem);
}

/* ---- HEADING TITLE ---- */
.home-about-box h1 {
  margin: 0;
  font-family: "DenDisplay", cursive;
  font-size: 3rem;
  font-weight: 100;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--home-heading-text);
}

/* ---- COPY TEXT ---- */
.home-about-copy {
  margin-top: -0.08rem;
  padding: 1.95rem 2.75rem 1.55rem;
  border: 3px solid;
  border-color: var(--home-copy-border);
  border-top-width: 2px;
  background:
    linear-gradient(180deg, rgba(123, 96, 96, 0.08), transparent 24%),
    var(--home-copy-surface);
  box-shadow: 0 0.65rem 1.25rem rgba(24, 17, 20, 0.18);
  transform:translateY(-2rem);
  height:22rem;
}

.home-about-box p {
  margin: 0;
  color: var(--home-copy-text);
  font-family: "DenDisplay", cursive;
  font-size: clamp(1.15rem, 4.8vw, 1.5rem);
  line-height: 1.22;
  text-align: center;
  text-shadow: 0 1px 0 var(--home-copy-shadow);
  width: 25rem;
  margin-inline: auto;
  font-size: 1.3rem;
  line-height: 1.18;
  transform:translateY(-0.5rem);
}

.home-about-text + .home-about-text {
  margin-top: 0.9rem;
}

/* Intermediate overrides (700px-979px) */
@media (min-width: 700px) and (max-width: 979px) {
  .home-about-box {
    width: min(100%, 38rem);
  }

  .home-about-heading {
    width: min(100%, 27rem);
  }
}

/* Mobile overrides (max-width: 699px) */
@media (max-width: 699px) {
  .home-page {
    justify-items: center;
  }

  .home-avatar-box,
  .home-about-box,
  .home-start-box {
    margin-inline: auto;
  }

  .home-about-box {
    width: min(100%, clamp(18.8rem, calc(100vw - 2rem), 22rem));
  }

  .home-about-heading {
    width: min(100%, clamp(18.25rem, calc(100vw - 2.8rem), 21.2rem));
    padding: 0.42rem 0rem 0.82rem;
    min-height: 4.35rem;
    height: auto;
    margin-inline: auto;
    transform: translateY(-1rem);
  }

  .home-about-copy {
    width: min(100%, clamp(18rem, calc(100vw - 3.6rem), 20.8rem));
    padding: 1.8rem clamp(0.95rem, 3.2vw, 1.2rem) 1.15rem;
    margin-inline: auto;
    min-height: 22.6rem;
    height: auto;
  }

  .home-about-box h1 {
    font-size: 2rem;
    margin:0.9rem;
  }

  .home-about-box p {
    width: min(100%, clamp(16.1rem, calc(100vw - 5rem), 18.6rem));
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1.15rem, 4.8vw, 1.5rem);
    line-height: 1.22;
  }
}

/* Small screen adjustments */
@media (max-width: 599px) {
  .home-about-box {
    width: min(100%, 100%);
    padding: 0;
  }

  .home-about-heading {
    width: min(100%, clamp(17.9rem, calc(100vw - 2.8rem), 20.6rem));
    padding: 0.42rem 0rem 0.82rem;
    min-height: 4.15rem;
    height: auto;
    margin-inline: auto;
    transform: translateY(-1rem);
  }

  .home-about-copy {
    width: min(100%, clamp(17.5rem, calc(100vw - 3.9rem), 20.2rem));
    padding: 1.65rem 0.95rem 1rem;
    margin-inline: auto;
    min-height: 21.8rem;
  }
}

/* ========================================
   SCENE DECORATIONS
   Lantern and visual effects
   ======================================== */

/* ---- LANTERN STRUCTURE ---- */
/* Scene lantern */
.home-scene-lantern {
  position: fixed;
  top: calc(var(--top-shell-height) - 5.5rem);
  right: calc(var(--page-pillar-inset) + 0em);
  width: clamp(3.8rem, 6.5vw, 4.9rem);
  height: clamp(8.35rem, 12vw, 9.9rem);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 4;
  color: inherit;
  transform-origin: 50% 0;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}

/* ---- LANTERN PARTS ---- */
.home-scene-lantern::before,
.home-scene-lantern::after,
.home-scene-lantern-body,
.home-scene-lantern-body::before,
.home-scene-lantern-body::after {
  position: absolute;
  left: 50%;
  display: block;
  content: "";
}

/* Lantern cord */
.home-scene-lantern::before {
  top: 0;
  width: 0.18rem;
  height: 3rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-lantern-cord) 88%, #000 12%), var(--home-lantern-cord));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 -0.16rem 0 0 var(--home-lantern-frame);
}

/* Lantern glow halo */
.home-scene-lantern::after {
  top: 2.7rem;
  width: 5.5rem;
  height: 5.5rem;
  transform: translateX(-50%) scale(0.9);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--home-lantern-halo) 0, color-mix(in srgb, var(--home-lantern-halo-soft) 54%, transparent) 32%, transparent 72%);
  opacity: 0.3;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  pointer-events: none;
}

/* Lantern main body */
.home-scene-lantern-body {
  top: 3rem;
  width: 2.75rem;
  height: 4.25rem;
  transform: translateX(-50%);
  border-radius: 1rem 1rem 0.8rem 0.8rem;
  border: 0.16rem solid var(--home-lantern-frame);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-lantern-glass) 86%, white 14%), color-mix(in srgb, var(--home-lantern-glass) 68%, transparent));
  box-shadow:
    inset 0 0 0 0.14rem rgba(255, 255, 255, 0.08),
    inset 0 -0.42rem 0.7rem rgba(0, 0, 0, 0.12),
    0 0.22rem 0.48rem rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Lantern top cap (metal) */
.home-scene-lantern-body::before {
  top: -0.82rem;
  width: 1.6rem;
  height: 1.05rem;
  transform: translateX(-50%);
  border-radius: 0.85rem 0.85rem 0.28rem 0.28rem;
  border: 0.16rem solid var(--home-lantern-frame);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-lantern-metal) 94%, white 6%), color-mix(in srgb, var(--home-lantern-metal) 72%, black 28%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Lantern flame */
.home-scene-lantern-body::after {
  top: 1.05rem;
  width: 1rem;
  height: 1.55rem;
  transform: translateX(-50%);
  border-radius: 55% 55% 50% 50%;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.84) 0 10%, transparent 26%),
    radial-gradient(circle at 50% 68%, var(--home-lantern-flame) 0 38%, color-mix(in srgb, var(--home-lantern-flame) 84%, #ff9c49 16%) 58%, transparent 78%);
  opacity: 0.22;
  filter: blur(0.03rem);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    filter 220ms ease;
}
/* ---- LANTERN INTERACTIONS ---- */.home-scene-lantern:hover,
.home-scene-lantern:focus-visible {
  transform: translateY(-0.12rem) rotate(-2deg);
  filter: drop-shadow(0 0.6rem 1rem var(--home-lantern-shadow));
}

.home-scene-lantern:focus-visible {
  outline: none;
}

.home-scene-lantern:focus-visible .home-scene-lantern-body {
  box-shadow:
    inset 0 0 0 0.14rem rgba(255, 255, 255, 0.08),
    inset 0 -0.42rem 0.7rem rgba(0, 0, 0, 0.12),
    0 0 0 0.22rem rgba(255, 236, 170, 0.36),
    0 0.22rem 0.48rem rgba(0, 0, 0, 0.12);
}

/* ---- LANTERN THEME VARIANTS ---- */
html[data-shell-theme="night"] body.page-home .home-scene-lantern::after,
body.page-home[data-shell-theme="night"] .home-scene-lantern::after {
  opacity: 0.96;
  transform: translateX(-50%) scale(1);
}

html[data-shell-theme="night"] body.page-home .home-scene-lantern-body::after,
body.page-home[data-shell-theme="night"] .home-scene-lantern-body::after {
  opacity: 0.92;
  transform: translateX(-50%) scale(1.04);
  filter: blur(0.02rem) drop-shadow(0 0 0.8rem var(--home-lantern-halo));
}

html:not([data-shell-theme]) body.page-home .home-scene-lantern-body,
html[data-shell-theme="day"] body.page-home .home-scene-lantern-body,
body.page-home[data-shell-theme="day"] .home-scene-lantern-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-lantern-glass) 72%, white 28%), color-mix(in srgb, var(--home-lantern-glass) 56%, transparent));
}

/* Intermediate overrides (700px-979px) */
@media (min-width: 700px) and (max-width: 979px) {
  .home-scene-lantern {
    width: clamp(3.5rem, 5.8vw, 4.2rem);
    height: clamp(7.7rem, 11vw, 8.8rem);
  }
}

/* Mobile overrides (max-width: 699px) */
@media (max-width: 699px) {
  .home-scene-lantern {
    top: 3.2rem;
    right: calc(var(--page-pillar-inset) + 0.1rem);
    width: 3.45rem;
    height: 7.5rem;
  }

  .home-scene-lantern::before {
    height: 2rem;
  }

  .home-scene-lantern::after {
    top: 1.85rem;
    width: 4.2rem;
    height: 4.2rem;
  }

  .home-scene-lantern-body {
    top: 1.95rem;
    width: 2.25rem;
    height: 3.55rem;
  }

  body.page-home.is-shell-mini .home-scene-lantern {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
  }
}

/* ========================================
   PAGE-LEVEL RESPONSIVE ADJUSTMENTS
   Global layout changes across breakpoints
   ======================================== */

/* ---- INTERMEDIATE LAYOUT (700px-979px) ---- */
@media (min-width: 700px) and (max-width: 979px) {
  .home-page {
    gap: clamp(0.85rem, 1.6vw, 1.3rem);
  }
}

/* ---- MOBILE LAYOUT (max-width: 699px) ---- */
@media (max-width: 699px) {
  body.page-home .content-safe {
    padding-bottom: calc(var(--content-safe-pad-bottom-mobile) + var(--home-scene-tail-mobile));
  }

  .home-page {
    gap: 0.9rem;
  }

  .home-avatar-section {
    margin-top: 0.35rem;
  }
}

/* ========================================
   ACCESSIBILITY & REDUCED MOTION
   Motion and animation preferences
   ======================================== */

/* ---- PREFERS REDUCED MOTION ---- */