/*
  GOOM WEBSITE STYLES — deep-clean base
  Bereinigt auf die aktuell verwendete Seite: tote Altbereiche entfernt,
  aktive Klassen/Animationen erhalten, spätere Erweiterungen bleiben möglich.
*/

@font-face {
  font-family: "GoomAdventuring";
  src: url("https://goom-assets.pages.dev/fonts/Adventuring.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GoomElmsSans";
  src: url("https://goom-assets.pages.dev/fonts/ElmsSans-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: "GoomAdventuring", Georgia, "Times New Roman", serif;
  --font-body: "GoomElmsSans", Arial, sans-serif;
  --bg: #080b0d;
  --bg-deep: #050607;
  --panel: rgba(18, 21, 20, 0.7);
  --panel-soft: rgba(25, 28, 24, 0.56);
  --panel-strong: rgba(18, 21, 20, 0.84);
  --panel-border: rgba(239, 222, 184, 0.22);
  --text: #f5ead4;
  --muted: #d9ccb3;
  --muted-soft: #bdae92;
  --accent: #d49a4a;
  --accent-bright: #f0bf73;
  --accent-soft: rgba(212, 154, 74, 0.14);
  --green: #97d447;
  --shadow: rgba(0, 0, 0, 0.38);
  --radius: 1.15rem;
  --max-width: 1160px;
  --time-tint: rgba(5, 6, 7, 0.18);
  --time-glow: rgba(240, 191, 115, 0.12);
  --time-accent: #f0bf73;
  --time-brightness: 0.98;
  --time-saturation: 1.06;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  -ms-overflow-style: none;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
}

body::selection {
  background: var(--accent);
  color: #160f07;
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: auto;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-999px, -999px, 0);
  transition: opacity 120ms ease;
  will-change: transform;
}

.custom-cursor img {
  width: auto;
  height: 76px;
  display: block;
  user-select: none;
  filter: drop-shadow(0 0.25rem 0.3rem rgba(0, 0, 0, 0.35));
}

body.custom-cursor-ready,
body.custom-cursor-ready * {
  cursor: none !important;
}

body.custom-cursor-visible .custom-cursor {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .custom-cursor {
    display: none;
  }

  body.custom-cursor-ready,
  body.custom-cursor-ready * {
    cursor: auto !important;
  }
}

body[data-time="sunrise"] {
  --time-tint: rgba(32, 14, 10, 0.14);
  --time-glow: rgba(255, 168, 88, 0.2);
  --time-accent: #ffb36b;
  --time-brightness: 1;
  --time-saturation: 1.1;
}

body[data-time="morning"] {
  --time-tint: rgba(7, 17, 20, 0.12);
  --time-glow: rgba(255, 218, 135, 0.15);
  --time-accent: #f4c778;
  --time-brightness: 1.02;
  --time-saturation: 1.08;
}

body[data-time="noon"] {
  --time-tint: rgba(5, 12, 15, 0.14);
  --time-glow: rgba(255, 232, 160, 0.12);
  --time-accent: #f0bf73;
  --time-brightness: 1;
  --time-saturation: 1.04;
}

body[data-time="afternoon"] {
  --time-tint: rgba(22, 14, 8, 0.18);
  --time-glow: rgba(255, 184, 96, 0.17);
  --time-accent: #e8aa5f;
  --time-brightness: 0.96;
  --time-saturation: 1.05;
}

body[data-time="evening"] {
  --time-tint: rgba(20, 8, 18, 0.26);
  --time-glow: rgba(255, 128, 92, 0.18);
  --time-accent: #d98a5f;
  --time-brightness: 0.88;
  --time-saturation: 1;
}

body[data-time="night"] {
  --time-tint: rgba(2, 4, 9, 0.34);
  --time-glow: rgba(104, 132, 255, 0.14);
  --time-accent: #9fb5ff;
  --time-brightness: 0.8;
  --time-saturation: 0.95;
}

body[data-time] {
  --accent-bright: var(--time-accent);
}

.background-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130vw;
  height: 130vh;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  user-select: none;
  filter: brightness(var(--time-brightness)) saturate(var(--time-saturation))
    contrast(1.03);
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1.05);
  transition: opacity 1200ms ease;
  animation: slowBackgroundMove 42s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.background-image.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .background-image {
    animation: none;
  }

  .nav a {
    transition: none;
  }
}

.site-header,
main {
  position: relative;
  z-index: 1;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: min(1380px, calc(100% - 2rem));
  margin: 0.55rem auto 0;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border: 1px solid rgba(239, 222, 184, 0.14);
  border-radius: 1.2rem;
  background: rgba(8, 11, 10, 0.44);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  color: var(--text);
  text-decoration: none;
  flex: 0 0 auto;
}

.brand-icon {
  width: clamp(4.1rem, 5.6vw, 5.4rem);
  height: auto;
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 0.65rem 1rem rgba(0, 0, 0, 0.48));
  transition: transform 180ms ease,
    filter 180ms ease;
}

.brand-title {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3.65rem);
  line-height: 1;
  letter-spacing: 0.035em;
  color: #9bbf34;
  text-shadow: 0 2px 0 rgba(45, 70, 18, 0.75),
    0 0.55rem 0.9rem rgba(0, 0, 0, 0.45);
  transition: color 160ms ease,
    transform 160ms ease,
    text-shadow 160ms ease;
}

.brand:hover .brand-icon,
.brand:hover .brand-title {
  transform: translateY(-1px) scale(1.03);
}

.brand:hover .brand-title {
  color: #a9cf3b;
  text-shadow: 0 2px 0 rgba(45, 70, 18, 0.8),
    0 0 0.7rem rgba(169, 207, 59, 0.22),
    0 0.65rem 0.95rem rgba(0, 0, 0, 0.48);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.8rem, 2vw, 1.75rem);
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.15rem 0.1rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.75vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.035em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55),
    0 0.55rem 0.65rem rgba(0, 0, 0, 0.45);
  transition: color 160ms ease,
    transform 160ms ease,
    text-shadow 160ms ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0.1rem;
  height: 2px;
  border-radius: 999px;
  background: #a9cf3b;
  opacity: 0;
  transform: scaleX(0.25);
  transition: opacity 160ms ease,
    transform 160ms ease;
}

.nav a:hover {
  color: #a9cf3b;
  transform: translateY(-2px);
  text-shadow: 0 1px 0 rgba(35, 55, 12, 0.85),
    0 0 0.7rem rgba(169, 207, 59, 0.26),
    0 0.62rem 0.78rem rgba(0, 0, 0, 0.48);
}

.nav a:hover::after {
  opacity: 0.85;
  transform: scaleX(1);
}

main {
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
}

.section {
  margin: 1.05rem 0;
  scroll-margin-top: 7rem;
}

.eyebrow {
  color: var(--accent-bright);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0 0 0.85rem;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 400;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(3.45rem, 8vw, 7.45rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.55);
}

h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
}

h3 {
  margin: 0.75rem 0 0.55rem;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.12;
}

p {
  line-height: 1.72;
}

.hero-story {
  min-height: calc(100vh - 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 24rem);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 5.4rem 0 5.6rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 2.1rem;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.3rem;
  width: 2.4rem;
  height: 2.4rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: var(--text);
  text-decoration: none;
}

.scroll-cue span {
  width: 0.9rem;
  height: 0.9rem;
  border-right: 2px solid var(--accent-bright);
  border-bottom: 2px solid var(--accent-bright);
  transform: rotate(45deg);
  animation: cueMove 1.4s ease-in-out infinite;
}

@media (max-width: 1160px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav {
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  .arc-showcase-copy {
    width: clamp(27rem, 48vw, 34rem);
    padding-left: clamp(1rem, 3vw, 2rem);
  }

  .arc-copy-inner h2 {
    font-size: clamp(1.18rem, 1.75vw, 1.55rem);
  }

  .arc-copy-inner p,
  .arc-copy-points li {
    font-size: 0.92rem;
    line-height: 1.5;
  }
}

@media (max-width: 980px) {
  .hero-story {
    grid-template-columns: 1fr;
  }

  .hero-story {
    min-height: auto;
    padding-top: 4.2rem;
  }
}

@media (max-width: 760px) {
  .site-header,
  main {
    width: min(var(--max-width), calc(100% - 1.25rem));
  }

  .actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .background-image {
    width: 150vw;
    height: 130vh;
  }

  .brand-icon {
    width: 4.1rem;
  }

  .brand-title {
    font-size: 2.35rem;
  }

  .nav {
    gap: 0.75rem;
  }

  .nav a {
    font-size: 1.25rem;
  }

  .hero-story {
    padding: 3.2rem 0 3.5rem;
  }
}

@media (max-width: 420px) {
  .nav {
    gap: 0.55rem;
  }

  .nav a {
    font-size: 1.08rem;
  }
}

:root {
  --text: #f2f2f2;
  --muted: #d2d2d2;
  --muted-soft: #ababab;
  --accent: #b8b8b8;
  --accent-bright: #ededed;
  --accent-soft: rgba(255, 255, 255, 0.1);
  --panel-border: rgba(255, 255, 255, 0.2);
  --green: #cfcfcf;
}

body[data-time] {
  --time-accent: #ededed;
  --accent-bright: #ededed;
  --green: #cfcfcf;
}

.background-image {
  filter: grayscale(1) brightness(var(--time-brightness)) saturate(0)
    contrast(1.1) !important;
}

.brand-icon {
  filter: grayscale(1);
  transition: filter 180ms ease,
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.brand-title,
.nav a {
  color: #f2f2f2;
}

.nav a::after {
  background: #a9cf3b;
}

.brand:hover .brand-icon {
  filter: grayscale(0) brightness(1.04) saturate(1.05);
}

.brand:hover .brand-title,
.nav a:hover {
  color: #a9cf3b;
}

.custom-cursor img {
  filter: grayscale(1) drop-shadow(0 0.25rem 0.3rem rgba(0, 0, 0, 0.35));
}

body {
  background: #000 !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: min(1380px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0.55rem 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.brand-icon {
  filter: grayscale(1) drop-shadow(0 0.55rem 0.8rem rgba(0, 0, 0, 0.5));
}

.brand:hover .brand-icon {
  filter: grayscale(0) drop-shadow(0 0.65rem 0.9rem rgba(0, 0, 0, 0.52));
}

.brand-title {
  color: #f2f2f2 !important;
}

.brand:hover .brand-title {
  color: #a9cf3b !important;
}

.nav a {
  color: #f2f2f2 !important;
}

.nav a:hover {
  color: #a9cf3b !important;
}

main {
  width: min(1380px, calc(100% - 2rem));
}

.hero-story {
  min-height: auto !important;
  display: block !important;
  padding: 0 0 1.15rem !important;
}

.hero-frame {
  position: relative;
  min-height: clamp(34rem, 72vh, 48rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: #111;
  isolation: isolate;
}

.hero-frame-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.hero-frame .background-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  user-select: none;
  filter: grayscale(1) brightness(0.92) saturate(0) contrast(1.15) !important;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1.02);
  transition: opacity 1200ms ease,
    filter 260ms ease,
    transform 260ms ease;
  animation: slowBackgroundMove 42s ease-in-out infinite alternate;
  will-change: transform, opacity, filter;
}

.hero-frame:hover .background-image {
  filter: grayscale(0) brightness(var(--time-brightness))
    saturate(var(--time-saturation)) contrast(1.03) !important;
  transform: translate(-50%, -50%) scale(1.055);
}

.hero-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(255, 255, 255, 0.22),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.34),
      rgba(255, 255, 255, 0.03),
      rgba(0, 0, 0, 0.34)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42));
  transition: background 260ms ease,
    opacity 260ms ease;
}

.hero-frame:hover .hero-frame-overlay {
  background: radial-gradient(
      circle at 50% 42%,
      rgba(240, 191, 115, 0.14),
      transparent 32%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.24),
      rgba(0, 0, 0, 0.06),
      rgba(0, 0, 0, 0.24)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.36));
}

.hero-frame-content {
  position: relative;
  z-index: 2;
  width: min(850px, calc(100% - 2rem));
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) 1rem;
}

.hero-frame .eyebrow {
  color: #f2f2f2 !important;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0.5rem 0.65rem rgba(0, 0, 0, 0.65);
  transition: color 220ms ease;
}

.hero-frame:hover .eyebrow {
  color: #a9cf3b !important;
}

.hero-frame h1 {
  max-width: 850px;
  font-size: clamp(3.3rem, 7.8vw, 7.4rem);
  line-height: 0.92;
  color: #f2f2f2;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85),
    0 1.2rem 2.2rem rgba(0, 0, 0, 0.72);
  transition: color 220ms ease,
    text-shadow 220ms ease,
    transform 220ms ease;
}

.hero-frame:hover h1 {
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.88),
    0 0 1.1rem rgba(169, 207, 59, 0.12),
    0 1.2rem 2.2rem rgba(0, 0, 0, 0.72);
  transform: translateY(-2px);
}

.hero-frame .actions {
  justify-content: center;
  margin-top: 1.6rem;
}

.hero-frame .scroll-cue {
  z-index: 3;
  bottom: 1.6rem;
}

.hero-frame:hover .scroll-cue span {
  border-color: #a9cf3b;
}

.section {
  scroll-margin-top: 6.5rem;
}

@media (max-width: 980px) {
  .hero-frame {
    min-height: 34rem;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: min(1380px, calc(100% - 1.25rem));
  }

  main {
    width: min(1380px, calc(100% - 1.25rem));
  }

  .hero-frame {
    min-height: 31rem;
  }

  .hero-frame .background-image {
    width: 145%;
    height: 125%;
  }
}

.custom-cursor img {
  filter: drop-shadow(0 0.25rem 0.3rem rgba(0, 0, 0, 0.35)) !important;
}

.hero-story {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 0 1.15rem !important;
}

.hero-frame {
  --hero-reveal-x: 50%;
  --hero-reveal-y: 50%;
  --hero-reveal-size: 0px;
  width: 100%;
  min-height: clamp(34rem, 70vh, 48rem);
  border-left: 0 !important;
  border-right: 0 !important;
}

.hero-frame-background {
  overflow: hidden;
}

.hero-frame .background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  user-select: none;
  will-change: opacity, clip-path;
  animation: none !important;
  transform: none !important;
  transition: opacity 1200ms ease;
}

.hero-frame .background-image.is-visible {
  opacity: 1;
}

.hero-frame .background-image-gray {
  filter: grayscale(1) brightness(0.92) saturate(0) contrast(1.12) !important;
}

.hero-frame .background-image-color {
  filter: brightness(var(--time-brightness)) saturate(var(--time-saturation))
    contrast(1.03) !important;
  clip-path: circle(
    var(--hero-reveal-size) at var(--hero-reveal-x) var(--hero-reveal-y)
  );
  transition: opacity 1200ms ease,
    clip-path 240ms ease-out;
}

.hero-frame-overlay {
  transition: background 240ms ease,
    opacity 240ms ease;
}

.hero-frame:hover .hero-frame-overlay,
.hero-frame.is-color-active .hero-frame-overlay {
  background: radial-gradient(
      circle at var(--hero-reveal-x) var(--hero-reveal-y),
      rgba(240, 191, 115, 0.1),
      transparent 18%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.24),
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.24)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.34));
}

@media (max-width: 760px) {
  .hero-story {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .hero-frame {
    min-height: 30rem;
  }

  .hero-frame .background-image {
    object-position: center center;
  }
}

.site-header {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  padding: 0.55rem max(1rem, calc((100vw - 1380px) / 2)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: #000 !important;
}

.hero-frame h1 {
  max-width: 980px !important;
  font-size: clamp(2.65rem, 5.8vw, 5.65rem) !important;
  line-height: 1.02 !important;
  white-space: normal;
}

@media (max-width: 760px) {
  .site-header {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .hero-frame h1 {
    font-size: clamp(2.35rem, 10vw, 4rem) !important;
  }
}

.hero-frame:hover .background-image-gray,
.hero-frame.is-color-active .background-image-gray {
  filter: grayscale(1) brightness(0.92) saturate(0) contrast(1.12) !important;
  transform: none !important;
}

.hero-frame .background-image-color {
  filter: brightness(var(--time-brightness)) saturate(var(--time-saturation))
    contrast(1.03) !important;
  clip-path: circle(
    var(--hero-reveal-size) at var(--hero-reveal-x) var(--hero-reveal-y)
  );
  transition: opacity 1200ms ease,
    clip-path 1150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-frame:hover .background-image-color,
.hero-frame.is-color-active .background-image-color {
  transform: none !important;
}

.hero-frame .actions {
  justify-content: center;
}

.hero-frame h1 {
  max-width: min(1120px, calc(100% - 2rem)) !important;
  font-size: clamp(2.35rem, 4.85vw, 5.15rem) !important;
  line-height: 1.04 !important;
}

.hero-line {
  display: block;
  white-space: nowrap;
}

.hero-frame .background-image-color {
  transition: opacity 1200ms ease,
    clip-path 1650ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 760px) {
  .hero-frame h1 {
    font-size: clamp(2rem, 8.5vw, 3.4rem) !important;
  }

  .hero-line {
    white-space: normal;
  }
}

.hero-frame .background-image-color {
  transition: opacity 1200ms ease,
    clip-path 2600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body,
p,
li {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
.brand-title,
.nav a {
  font-family: var(--font-heading) !important;
}

.hero-frame .background-image-gray {
  filter: grayscale(1) brightness(0.92) saturate(0) contrast(1.12) !important;
  transform: none !important;
}

.hero-frame .background-image-color {
  clip-path: circle(
    var(--hero-reveal-size) at var(--hero-reveal-x) var(--hero-reveal-y)
  ) !important;
  -webkit-mask-image: radial-gradient(
      circle at var(--hero-reveal-x) var(--hero-reveal-y),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.98) 30%,
      rgba(0, 0, 0, 0.68) 47%,
      rgba(0, 0, 0, 0.28) 62%,
      rgba(0, 0, 0, 0) 78%
    ),
    radial-gradient(
      ellipse at calc(var(--hero-reveal-x) - 11vw)
        calc(var(--hero-reveal-y) + 7vh),
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.36) 38%,
      rgba(0, 0, 0, 0) 68%
    ),
    radial-gradient(
      ellipse at calc(var(--hero-reveal-x) + 13vw)
        calc(var(--hero-reveal-y) - 5vh),
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.3) 34%,
      rgba(0, 0, 0, 0) 70%
    ),
    radial-gradient(
      ellipse at calc(var(--hero-reveal-x) + 5vw)
        calc(var(--hero-reveal-y) + 14vh),
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.22) 35%,
      rgba(0, 0, 0, 0) 72%
    );
  mask-image: radial-gradient(
      circle at var(--hero-reveal-x) var(--hero-reveal-y),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.98) 30%,
      rgba(0, 0, 0, 0.68) 47%,
      rgba(0, 0, 0, 0.28) 62%,
      rgba(0, 0, 0, 0) 78%
    ),
    radial-gradient(
      ellipse at calc(var(--hero-reveal-x) - 11vw)
        calc(var(--hero-reveal-y) + 7vh),
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.36) 38%,
      rgba(0, 0, 0, 0) 68%
    ),
    radial-gradient(
      ellipse at calc(var(--hero-reveal-x) + 13vw)
        calc(var(--hero-reveal-y) - 5vh),
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.3) 34%,
      rgba(0, 0, 0, 0) 70%
    ),
    radial-gradient(
      ellipse at calc(var(--hero-reveal-x) + 5vw)
        calc(var(--hero-reveal-y) + 14vh),
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.22) 35%,
      rgba(0, 0, 0, 0) 72%
    );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  transition: opacity 1200ms ease,
    clip-path 4300ms cubic-bezier(0.12, 0.76, 0.18, 1) !important;
}

.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--hero-reveal-x) var(--hero-reveal-y),
    rgba(169, 207, 59, 0.1),
    rgba(240, 191, 115, 0.06) 28%,
    rgba(0, 0, 0, 0) 58%
  );
  mix-blend-mode: soft-light;
  transition: opacity 900ms ease,
    background-position 300ms ease;
}

.hero-frame.is-color-active::after,
.hero-frame:hover::after {
  opacity: 1;
}

.hero-frame:hover .hero-frame-overlay,
.hero-frame.is-color-active .hero-frame-overlay {
  background: radial-gradient(
      circle at var(--hero-reveal-x) var(--hero-reveal-y),
      rgba(240, 191, 115, 0.07),
      transparent 24%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.24),
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.24)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.34)) !important;
}

.hero-frame::after {
  transition: opacity 1400ms ease,
    background-position 300ms ease !important;
}

.hero-frame-overlay {
  transition: background 1200ms ease,
    opacity 1200ms ease !important;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-family: var(--font-heading) !important;
  font-size: clamp(0.82rem, 1.1vw, 1.05rem) !important;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.eyebrow-mark {
  width: clamp(2.1rem, 4.4vw, 4rem);
  height: 1px;
  display: inline-block;
  position: relative;
  background: currentColor;
  opacity: 0.88;
  box-shadow: 0 0 0.45rem rgba(255, 255, 255, 0.12);
}

.eyebrow-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.eyebrow-mark:first-child::after {
  right: -0.05rem;
}

.eyebrow-mark:last-child::after {
  left: -0.05rem;
  transform: translateY(-50%) rotate(225deg);
}

.discord-nav-link {
  width: 2.45rem;
  height: 2.45rem;
  min-height: 0 !important;
  padding: 0 !important;
}

.discord-icon {
  width: 1.72rem;
  height: 1.72rem;
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 0.55rem 0.55rem rgba(0, 0, 0, 0.42));
  transition: fill 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}

.discord-nav-link:hover .discord-icon {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 0 0.55rem rgba(169, 207, 59, 0.25))
    drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.48));
}

.hero-frame .background-image-color {
  clip-path: none !important;
  -webkit-mask-image: radial-gradient(
      circle,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.98) 25%,
      rgba(0, 0, 0, 0.76) 43%,
      rgba(0, 0, 0, 0.36) 61%,
      rgba(0, 0, 0, 0.12) 75%,
      rgba(0, 0, 0, 0) 88%
    ),
    radial-gradient(
      ellipse,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.38) 43%,
      rgba(0, 0, 0, 0) 78%
    ),
    radial-gradient(
      ellipse,
      rgba(0, 0, 0, 0.58) 0%,
      rgba(0, 0, 0, 0.34) 38%,
      rgba(0, 0, 0, 0) 78%
    ),
    radial-gradient(
      ellipse,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.25) 42%,
      rgba(0, 0, 0, 0) 82%
    );
  mask-image: radial-gradient(
      circle,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.98) 25%,
      rgba(0, 0, 0, 0.76) 43%,
      rgba(0, 0, 0, 0.36) 61%,
      rgba(0, 0, 0, 0.12) 75%,
      rgba(0, 0, 0, 0) 88%
    ),
    radial-gradient(
      ellipse,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.38) 43%,
      rgba(0, 0, 0, 0) 78%
    ),
    radial-gradient(
      ellipse,
      rgba(0, 0, 0, 0.58) 0%,
      rgba(0, 0, 0, 0.34) 38%,
      rgba(0, 0, 0, 0) 78%
    ),
    radial-gradient(
      ellipse,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.25) 42%,
      rgba(0, 0, 0, 0) 82%
    );
  -webkit-mask-size: var(--hero-reveal-size) var(--hero-reveal-size),
    var(--hero-reveal-size) var(--hero-reveal-size),
    var(--hero-reveal-size) var(--hero-reveal-size),
    var(--hero-reveal-size) var(--hero-reveal-size);
  mask-size: var(--hero-reveal-size) var(--hero-reveal-size),
    var(--hero-reveal-size) var(--hero-reveal-size),
    var(--hero-reveal-size) var(--hero-reveal-size),
    var(--hero-reveal-size) var(--hero-reveal-size);
  -webkit-mask-position: calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2)
      calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2),
    calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2 - 14vw)
      calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2 + 8vh),
    calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2 + 16vw)
      calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2 - 7vh),
    calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2 + 7vw)
      calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2 + 16vh);
  mask-position: calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2)
      calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2),
    calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2 - 14vw)
      calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2 + 8vh),
    calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2 + 16vw)
      calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2 - 7vh),
    calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2 + 7vw)
      calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2 + 16vh);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  transition: opacity 1200ms ease,
    -webkit-mask-size 5200ms cubic-bezier(0.12, 0.76, 0.18, 1),
    mask-size 5200ms cubic-bezier(0.12, 0.76, 0.18, 1) !important;
}

.hero-frame::after {
  transition: opacity 2200ms ease,
    background 1200ms ease !important;
}

.hero-frame-overlay {
  transition: background 1800ms ease,
    opacity 1800ms ease !important;
}

@media (max-width: 760px) {
  .eyebrow-mark {
    width: 1.5rem;
  }

  .discord-nav-link {
    width: 2rem;
    height: 2rem;
  }

  .discord-icon {
    width: 1.35rem;
    height: 1.35rem;
  }
}

.brand-icon {
  filter: grayscale(0) drop-shadow(0 0.65rem 1rem rgba(0, 0, 0, 0.48)) !important;
}

.brand-title {
  color: #a9cf3b !important;
  text-shadow: 0 2px 0 rgba(45, 70, 18, 0.8),
    0 0 0.7rem rgba(169, 207, 59, 0.16),
    0 0.65rem 0.95rem rgba(0, 0, 0, 0.48) !important;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: var(--font-heading) !important;
  font-size: clamp(0.82rem, 1.1vw, 1.05rem) !important;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.eyebrow-mark {
  width: clamp(2.4rem, 4.8vw, 4.6rem);
  height: 3px;
  display: inline-block;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.86;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 0.45rem rgba(255, 255, 255, 0.1);
}

.eyebrow-mark::after {
  content: none !important;
}

.discord-nav-link {
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0 !important;
  min-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.discord-icon {
  position: absolute;
  width: 2.05rem;
  height: 2.05rem;
  object-fit: contain;
  display: block;
  transition: opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.discord-icon-normal {
  opacity: 1;
  filter: grayscale(1) brightness(1.15)
    drop-shadow(0 0.55rem 0.55rem rgba(0, 0, 0, 0.42));
}

.discord-icon-hover {
  opacity: 0;
  filter: grayscale(0) drop-shadow(0 0 0.55rem rgba(88, 101, 242, 0.22))
    drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.48));
}

.discord-nav-link:hover .discord-icon-hover {
  opacity: 1;
  transform: translateY(-1px) scale(1.08);
}

@media (max-width: 760px) {
  .hero-eyebrow {
    gap: 0.55rem;
    font-size: 0.72rem !important;
    letter-spacing: 0.075em;
  }

  .eyebrow-mark {
    width: 1.7rem;
    height: 2px;
  }

  .discord-nav-link {
    width: 2.05rem;
    height: 2.05rem;
  }

  .discord-icon {
    width: 1.55rem;
    height: 1.55rem;
  }
}

.discord-nav-link::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
  background: transparent !important;
}

.discord-nav-link:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

.discord-icon-normal {
  opacity: 1;
  filter: drop-shadow(0 0.55rem 0.55rem rgba(0, 0, 0, 0.42)) !important;
}

.discord-icon-hover {
  opacity: 0;
  filter: grayscale(0) drop-shadow(0 0 0.55rem rgba(88, 101, 242, 0.25))
    drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.48)) !important;
}

.discord-nav-link:hover .discord-icon-normal {
  opacity: 0;
  transform: translateY(-1px) scale(0.96);
}

.discord-nav-link:hover .discord-icon-hover {
  opacity: 1;
  transform: translateY(-1px) scale(1.06);
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.72rem !important;
  color: var(--text);
  text-decoration: none;
  flex: 0 0 auto;
}

.brand-icon {
  width: clamp(4.1rem, 5.6vw, 5.4rem) !important;
  height: auto !important;
  display: block !important;
  flex: 0 0 auto;
  filter: grayscale(0) drop-shadow(0 0.65rem 1rem rgba(0, 0, 0, 0.48)) !important;
  transition: transform 180ms ease,
    filter 180ms ease;
}

.brand-title {
  display: inline-block !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(2.25rem, 4vw, 3.65rem) !important;
  line-height: 1;
  letter-spacing: 0.035em;
  color: #a9cf3b !important;
  text-shadow: 0 2px 0 rgba(45, 70, 18, 0.8),
    0 0 0.7rem rgba(169, 207, 59, 0.16),
    0 0.65rem 0.95rem rgba(0, 0, 0, 0.48) !important;
  transition: color 160ms ease,
    transform 160ms ease,
    text-shadow 160ms ease;
}

.brand:hover .brand-icon,
.brand:hover .brand-title {
  transform: translateY(-1px) scale(1.02);
}

.discord-nav-link {
  position: relative;
  width: 2.95rem !important;
  height: 2.95rem !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.discord-icon {
  position: absolute;
  width: 2.38rem !important;
  height: 2.38rem !important;
  object-fit: contain;
  display: block;
  transition: opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.discord-icon-normal {
  opacity: 1 !important;
  filter: drop-shadow(0 0.55rem 0.55rem rgba(0, 0, 0, 0.42)) !important;
}

.discord-icon-hover {
  opacity: 0 !important;
  filter: grayscale(0) drop-shadow(0 0 0.55rem rgba(88, 101, 242, 0.25))
    drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.48)) !important;
}

.discord-nav-link:hover .discord-icon-normal {
  opacity: 0 !important;
  transform: translateY(-1px) scale(0.96);
}

.discord-nav-link:hover .discord-icon-hover {
  opacity: 1 !important;
  transform: translateY(-1px) scale(1.06);
}

.discord-nav-link::after,
.discord-nav-link:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

@media (max-width: 760px) {
  .brand-icon {
    width: 4.1rem !important;
  }

  .brand-title {
    font-size: 2.35rem !important;
  }

  .discord-nav-link {
    width: 2.35rem !important;
    height: 2.35rem !important;
  }

  .discord-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
  }
}

.hero-play-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 180ms ease,
    filter 180ms ease;
}

.hero-play-icon {
  width: clamp(3.8rem, 5.2vw, 4.8rem);
  height: auto;
  display: block;
  filter: drop-shadow(0 0.55rem 0.85rem rgba(0, 0, 0, 0.4));
  transition: transform 180ms ease,
    filter 180ms ease;
}

.hero-play-text {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #7a4a29;
  text-shadow: 0 1px 0 rgba(239, 221, 190, 0.35),
    0 0.2rem 0.35rem rgba(0, 0, 0, 0.18);
  transition: color 180ms ease,
    transform 180ms ease,
    text-shadow 180ms ease;
}

.hero-play-cta:hover .hero-play-icon {
  transform: scale(1.05);
  filter: drop-shadow(0 0 0.55rem rgba(201, 151, 92, 0.18))
    drop-shadow(0 0.65rem 0.95rem rgba(0, 0, 0, 0.44));
}

.hero-play-cta:hover .hero-play-text {
  transform: translateY(-1px);
  color: #8d5732;
  text-shadow: 0 1px 0 rgba(248, 229, 196, 0.42),
    0 0.25rem 0.4rem rgba(0, 0, 0, 0.2);
}

@media (max-width: 760px) {
  .hero-play-cta {
    gap: 0.7rem;
  }

  .hero-play-text {
    font-size: 1.28rem;
  }
}

.hero-play-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 220ms ease;
  overflow: visible;
}

.hero-play-icon {
  width: clamp(3.9rem, 5.3vw, 4.95rem);
  height: auto;
  display: block;
  flex: 0 0 auto;
  filter: grayscale(1) brightness(1.08) contrast(0.95)
    drop-shadow(0 0.55rem 0.85rem rgba(0, 0, 0, 0.4));
  transition: transform 220ms ease,
    filter 220ms ease;
}

.hero-play-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  transform: translateX(-0.45rem);
  visibility: hidden;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #c89767;
  text-shadow: 0 1px 0 rgba(245, 228, 198, 0.28),
    0 0.18rem 0.3rem rgba(0, 0, 0, 0.16);
  transition: max-width 320ms ease,
    opacity 220ms ease,
    margin-left 220ms ease,
    transform 220ms ease,
    color 220ms ease,
    text-shadow 220ms ease;
}

.hero-play-cta:hover .hero-play-text {
  max-width: 18rem;
  opacity: 1;
  visibility: visible;
  margin-left: 0.85rem;
  transform: translateX(0);
  color: #d7a171;
  text-shadow: 0 1px 0 rgba(250, 235, 208, 0.34),
    0 0.22rem 0.35rem rgba(0, 0, 0, 0.18);
}

@media (max-width: 760px) {
  .hero-play-icon {
    width: 3.35rem;
  }

  .hero-play-text {
    font-size: 1.24rem;
  }

  .hero-play-cta:hover .hero-play-text {
    max-width: 12.5rem;
    margin-left: 0.65rem;
  }
}

.hero-play-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 260ms ease,
    filter 260ms ease;
  overflow: visible;
}

.hero-play-icon {
  width: clamp(3.95rem, 5.35vw, 5rem);
  height: auto;
  display: block;
  flex: 0 0 auto;
  filter: grayscale(1) brightness(1.08) contrast(0.96)
    drop-shadow(0 0.55rem 0.85rem rgba(0, 0, 0, 0.4));
  transition: transform 260ms ease,
    filter 520ms ease;
}

.hero-play-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  padding-right: 0.35rem;
  transform: translateX(-0.55rem);
  visibility: hidden;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2vw, 2.05rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #d7a876;
  text-shadow: 0 1px 0 rgba(250, 235, 208, 0.26),
    0 0.2rem 0.32rem rgba(0, 0, 0, 0.16);
  transition: max-width 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 480ms ease,
    margin-left 480ms ease,
    transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 260ms ease,
    text-shadow 260ms ease;
}

.hero-play-cta:hover {
  transform: translateY(-2px);
}

.hero-play-cta:hover .hero-play-icon {
  transform: scale(1.04);
  filter: grayscale(0) brightness(1)
    drop-shadow(0 0 0.55rem rgba(201, 151, 92, 0.16))
    drop-shadow(0 0.65rem 0.95rem rgba(0, 0, 0, 0.44));
}

.hero-play-cta:hover .hero-play-text {
  max-width: 21rem;
  opacity: 1;
  visibility: visible;
  margin-left: 0.95rem;
  transform: translateX(0);
  color: #dfb487;
  text-shadow: 0 1px 0 rgba(250, 235, 208, 0.34),
    0 0.24rem 0.36rem rgba(0, 0, 0, 0.18);
}

.sound-toggle {
  position: fixed;
  right: clamp(1rem, 2vw, 1.7rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 1200;
  width: clamp(4rem, 5.1vw, 4.8rem);
  height: clamp(4rem, 5.1vw, 4.8rem);
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  pointer-events: auto;
}

.sound-toggle-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.sound-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: grayscale(1) brightness(1.2) contrast(0.95)
    drop-shadow(0 0.55rem 0.8rem rgba(0, 0, 0, 0.34));
  opacity: 0;
  transform: scale(1);
  transition: opacity 520ms ease,
    transform 320ms ease,
    filter 820ms ease;
}

.sound-toggle.is-playing .sound-icon-on,
.sound-toggle.is-muted .sound-icon-off {
  opacity: 1;
}

.sound-toggle:hover .sound-icon {
  filter: grayscale(0) brightness(1) contrast(1)
    drop-shadow(0 0 0.45rem rgba(212, 154, 74, 0.18))
    drop-shadow(0 0.65rem 0.95rem rgba(0, 0, 0, 0.44));
  transform: translateY(-2px) scale(1.03);
}

.sound-toggle:focus-visible {
  outline: none;
}

.sound-toggle:focus-visible .sound-icon,
.sound-toggle:hover .sound-icon {
  opacity: 1;
}

.sound-toggle.is-playing:hover .sound-icon-on,
.sound-toggle.is-muted:hover .sound-icon-off {
  opacity: 1;
}

.sound-toggle:not(.is-playing) .sound-icon-on,
.sound-toggle:not(.is-muted) .sound-icon-off {
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero-play-text {
    font-size: 1.26rem;
  }

  .hero-play-cta:hover .hero-play-text {
    max-width: 13.8rem;
    margin-left: 0.7rem;
  }

  .sound-toggle {
    width: 3.65rem;
    height: 3.65rem;
    right: 0.8rem;
    bottom: 0.85rem;
  }
}

.sound-toggle .sound-icon {
  opacity: 0 !important;
}

.sound-toggle.is-playing .sound-icon-on,
.sound-toggle.is-playing:hover .sound-icon-on,
.sound-toggle.is-playing:focus-visible .sound-icon-on {
  opacity: 1 !important;
}

.sound-toggle.is-playing .sound-icon-off,
.sound-toggle.is-playing:hover .sound-icon-off,
.sound-toggle.is-playing:focus-visible .sound-icon-off {
  opacity: 0 !important;
}

.sound-toggle.is-muted .sound-icon-off,
.sound-toggle.is-muted:hover .sound-icon-off,
.sound-toggle.is-muted:focus-visible .sound-icon-off {
  opacity: 1 !important;
}

.sound-toggle.is-muted .sound-icon-on,
.sound-toggle.is-muted:hover .sound-icon-on,
.sound-toggle.is-muted:focus-visible .sound-icon-on {
  opacity: 0 !important;
}

.floating-controls {
  position: fixed;
  right: clamp(1rem, 2vw, 1.7rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 1200;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  pointer-events: none;
}

.floating-controls button,
.floating-controls a {
  pointer-events: auto;
}

.quick-menu-toggle,
.quick-menu-item {
  width: clamp(3.25rem, 4.25vw, 4rem);
  height: clamp(3.25rem, 4.25vw, 4rem);
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  text-decoration: none;
}

.quick-menu {
  display: grid;
  justify-items: center;
  gap: 0.42rem;
  opacity: 0;
  transform: translateY(0.55rem) scale(0.96);
  pointer-events: none;
  transition: opacity 260ms ease,
    transform 260ms ease;
}

.floating-controls.is-open .quick-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.quick-menu-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  filter: grayscale(1) brightness(1.16) contrast(0.96)
    drop-shadow(0 0.55rem 0.8rem rgba(0, 0, 0, 0.34));
  transition: filter 820ms ease,
    transform 260ms ease,
    opacity 260ms ease;
}

.quick-menu-toggle:hover .quick-menu-icon,
.quick-menu-toggle[aria-expanded="true"] .quick-menu-icon,
.quick-menu-item:hover .quick-menu-icon,
.quick-menu-item:focus-visible .quick-menu-icon {
  filter: grayscale(0) brightness(1) contrast(1)
    drop-shadow(0 0 0.45rem rgba(212, 154, 74, 0.18))
    drop-shadow(0 0.65rem 0.95rem rgba(0, 0, 0, 0.44));
  transform: translateY(-2px) scale(1.04);
}

.quick-menu-toggle:focus-visible,
.quick-menu-item:focus-visible {
  outline: none;
}

.quick-menu-toggle {
  margin-bottom: -0.08rem;
}

@media (max-width: 760px) {
  .floating-controls {
    right: 0.8rem;
    bottom: 0.85rem;
    gap: 0.32rem;
  }

  .quick-menu-toggle,
  .quick-menu-item {
    width: 3.05rem;
    height: 3.05rem;
  }
}

.floating-controls {
  --side-button-size: clamp(2.72rem, 3.1vw, 3.18rem);
  --side-gap: 0.34rem;
  right: clamp(0.72rem, 1.4vw, 1.05rem) !important;
  bottom: clamp(0.72rem, 1.4vw, 1.05rem) !important;
  width: var(--side-button-size);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--side-gap) !important;
  pointer-events: auto;
}

.sound-toggle,
.quick-menu-toggle,
.quick-menu-item {
  width: var(--side-button-size) !important;
  height: var(--side-button-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.sound-toggle {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
}

.sound-icon,
.quick-menu-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.quick-menu-toggle {
  order: 1;
  transform: translateY(calc(var(--side-button-size) + var(--side-gap)));
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 260ms ease;
  z-index: 3;
}

.quick-menu {
  order: 2;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--side-gap) !important;
  height: 0;
  opacity: 0;
  transform: translateY(0.35rem) scale(0.96);
  overflow: hidden;
  pointer-events: none;
  transition: height 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 260ms ease,
    transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sound-toggle {
  order: 3;
  z-index: 2;
}

.floating-controls.is-open .quick-menu-toggle {
  transform: translateY(0);
}

.floating-controls.is-open .quick-menu {
  height: calc(var(--side-button-size) + var(--side-gap));
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.floating-controls::before {
  content: "";
  position: absolute;
  inset: -0.35rem -0.55rem;
  border-radius: 999px;
  pointer-events: none;
}

.floating-controls.is-open::after {
  content: "";
  position: absolute;
  inset: -0.28rem -0.34rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  z-index: -1;
  opacity: 0.55;
}

.sound-icon,
.quick-menu-icon {
  transition: opacity 520ms ease,
    transform 300ms ease,
    filter 900ms ease !important;
}

@media (max-width: 760px) {
  .floating-controls {
    --side-button-size: 2.55rem;
    --side-gap: 0.26rem;
    right: 0.62rem !important;
    bottom: 0.7rem !important;
  }
}

.floating-controls {
  gap: var(--side-gap) !important;
}

.quick-menu-toggle {
  transform: translateY(0) !important;
}

.floating-controls.is-open .quick-menu-toggle {
  transform: translateY(0) !important;
}

.quick-menu {
  height: 0 !important;
}

.floating-controls.is-open .quick-menu {
  height: calc(var(--side-button-size) + var(--side-gap)) !important;
}

html,
body,
body * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

img,
svg,
video,
canvas,
button,
a {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

.hero-play-text {
  line-height: 1.28 !important;
  padding-top: 0.12rem !important;
  padding-bottom: 0.34rem !important;
  padding-right: 0.55rem !important;
  margin-bottom: -0.18rem !important;
}

.hero-frame-overlay {
  background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.34),
      rgba(255, 255, 255, 0.02),
      rgba(0, 0, 0, 0.34)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)) !important;
}

.hero-frame:hover .hero-frame-overlay,
.hero-frame.is-color-active .hero-frame-overlay {
  background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.24),
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.24)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.34)) !important;
}

.hero-frame::after {
  display: none !important;
}

.hero-frame .background-image-gray {
  filter: brightness(1.01) contrast(1.02) saturate(0) !important;
}

.hero-frame:hover .background-image-gray,
.hero-frame.is-color-active .background-image-gray {
  filter: brightness(1.01) contrast(1.02) saturate(0) !important;
}

.hero-frame .background-image-color {
  clip-path: none !important;
}

.hero-frame.is-color-active .background-image-color {
  opacity: 1 !important;
}

.hero-frame .background-image-gray {
  opacity: 1 !important;
  filter: none !important;
  transition: opacity 900ms ease !important;
}

.hero-frame.is-color-active .background-image-gray,
.hero-frame:hover .background-image-gray {
  opacity: 0.9 !important;
}

.hero-frame .background-image-color {
  opacity: 1 !important;
  clip-path: none !important;
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 34%,
    rgba(0, 0, 0, 0.96) 48%,
    rgba(0, 0, 0, 0.82) 62%,
    rgba(0, 0, 0, 0.52) 76%,
    rgba(0, 0, 0, 0.18) 90%,
    transparent 100%
  ) !important;
  mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 34%,
    rgba(0, 0, 0, 0.96) 48%,
    rgba(0, 0, 0, 0.82) 62%,
    rgba(0, 0, 0, 0.52) 76%,
    rgba(0, 0, 0, 0.18) 90%,
    transparent 100%
  ) !important;
  -webkit-mask-size: var(--hero-reveal-size) var(--hero-reveal-size) !important;
  mask-size: var(--hero-reveal-size) var(--hero-reveal-size) !important;
  -webkit-mask-position: calc(
      var(--hero-reveal-x) - var(--hero-reveal-size) / 2
    )
    calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2) !important;
  mask-position: calc(var(--hero-reveal-x) - var(--hero-reveal-size) / 2)
    calc(var(--hero-reveal-y) - var(--hero-reveal-size) / 2) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-composite: source-over !important;
  mask-composite: add !important;
  transition: -webkit-mask-size 1180ms cubic-bezier(0.2, 0.78, 0.2, 1),
    mask-size 1180ms cubic-bezier(0.2, 0.78, 0.2, 1),
    -webkit-mask-position 90ms linear,
    mask-position 90ms linear,
    opacity 280ms ease !important;
}

.hero-frame::after {
  opacity: 0 !important;
  background: radial-gradient(
    circle at var(--hero-reveal-x) var(--hero-reveal-y),
    rgba(250, 225, 183, 0.18),
    transparent 23%
  ) !important;
  transition: opacity 260ms ease !important;
}

.hero-frame.is-color-active::after,
.hero-frame:hover::after {
  opacity: 1 !important;
}

.hero-frame-overlay {
  transition: background 280ms ease !important;
}

.hero-frame:hover .hero-frame-overlay,
.hero-frame.is-color-active .hero-frame-overlay {
  background: radial-gradient(
      circle at var(--hero-reveal-x) var(--hero-reveal-y),
      rgba(240, 191, 115, 0.06),
      transparent 22%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.38)) !important;
}

.hero-frame {
  --hero-reveal-size: 0px;
}

.hero-frame .background-image-gray {
  opacity: 1 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transition: opacity 850ms ease !important;
}

.hero-frame .background-image-color {
  opacity: 0 !important;
  filter: brightness(var(--time-brightness)) saturate(var(--time-saturation))
    contrast(1.03) !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-size: auto !important;
  mask-size: auto !important;
  -webkit-mask-position: initial !important;
  mask-position: initial !important;
  transition: opacity 950ms ease !important;
}

.hero-frame.is-color-active .background-image-gray.is-visible {
  opacity: 0 !important;
}

.hero-frame.is-color-active .background-image-color.is-visible.is-ready {
  opacity: 1 !important;
}

.hero-frame::after {
  display: none !important;
  opacity: 0 !important;
}

.hero-frame-overlay {
  background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.3)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.34)) !important;
  transition: background 500ms ease !important;
}

.hero-frame:hover .hero-frame-overlay,
.hero-frame.is-color-active .hero-frame-overlay {
  background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.22),
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.22)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)) !important;
}

.hero-frame-content {
  text-align: center;
}

.hero-title-main {
  margin-bottom: 0.9rem !important;
}

.hero-eyebrow-below {
  margin-top: 0 !important;
  margin-bottom: clamp(1.15rem, 2vw, 1.75rem) !important;
  justify-content: center;
  font-family: var(--font-heading) !important;
  font-size: clamp(1.05rem, 1.35vw, 1.42rem) !important;
  letter-spacing: 0.045em;
  opacity: 0.94;
}

.hero-eyebrow-below .eyebrow-mark {
  width: clamp(2.3rem, 4vw, 3.6rem);
  height: 0.22rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.78;
  transform: translateY(-0.03rem);
}

.hero-frame .actions {
  margin-top: clamp(0.95rem, 1.7vw, 1.45rem) !important;
}

.welcome-black {
  position: relative;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(4.2rem, 7vw, 7rem) clamp(1.2rem, 4vw, 4rem)
    clamp(4.8rem, 7vw, 7.4rem) !important;
  background: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  text-align: center;
}

.welcome-black::before,
.welcome-black::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(78rem, calc(100% - 2rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.42),
    transparent
  );
  opacity: 0.55;
}

.welcome-black::before {
  top: 0;
}

.welcome-black::after {
  bottom: 0;
}

.welcome-inner {
  width: min(920px, 100%);
  margin: 0 auto;
}

.welcome-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.6vw, 1.15rem);
  margin: 0 0 clamp(1.35rem, 2.4vw, 2rem);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.2vw, 4rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #f5ead4;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75),
    0 0 1.2rem rgba(245, 234, 212, 0.12);
}

.welcome-caro {
  font-size: 0.42em;
  color: #a9cf3b;
  opacity: 0.88;
  text-shadow: 0 0 0.8rem rgba(169, 207, 59, 0.22);
  transform: translateY(-0.06em);
}

.welcome-description {
  margin: 0 auto;
  max-width: 820px;
  font-family: var(--font-body);
  font-size: clamp(1.04rem, 1.35vw, 1.28rem);
  line-height: 1.78;
  color: rgba(245, 234, 212, 0.88);
  text-shadow: 0 0.45rem 0.75rem rgba(0, 0, 0, 0.55);
}

.welcome-description + .welcome-description {
  margin-top: clamp(1rem, 1.7vw, 1.35rem);
}

.welcome-description-soft {
  color: rgba(217, 204, 179, 0.78);
}

@media (max-width: 760px) {
  .hero-title-main .hero-line {
    white-space: normal;
  }

  .hero-eyebrow-below {
    font-size: 0.98rem !important;
  }

  .hero-eyebrow-below .eyebrow-mark {
    width: 1.55rem;
  }

  .welcome-title {
    flex-wrap: wrap;
    row-gap: 0.45rem;
  }

  .welcome-description {
    font-size: 1rem;
    line-height: 1.68;
  }
}

.welcome-title,
.welcome-caro {
  transition: color 520ms ease,
    text-shadow 520ms ease,
    transform 220ms ease;
}

.welcome-title {
  color: rgba(245, 234, 212, 0.92) !important;
}

.welcome-caro {
  color: rgba(245, 234, 212, 0.72) !important;
}

.welcome-black:hover .welcome-caro {
  color: #a9cf3b !important;
  text-shadow: 0 0 0.9rem rgba(169, 207, 59, 0.38),
    0 0.45rem 0.75rem rgba(0, 0, 0, 0.52);
  transform: translateY(-0.06em) scale(1.12);
}

body[data-time="noon"] {
  --time-tint: rgba(5, 12, 15, 0.12);
  --time-glow: rgba(255, 232, 160, 0.12);
  --time-accent: #f0bf73;
  --time-brightness: 1;
  --time-saturation: 1.04;
}

.arc-showcase-section {
  position: relative;
  width: 100vw;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 0 !important;
  background: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.arc-showcase-section::before,
.arc-showcase-section::after {
  display: none !important;
}

.arc-showcase-inner {
  position: relative;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.arc-showcase-copy {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
  width: clamp(31rem, 38vw, 38rem);
  padding-left: clamp(1.25rem, 4.8vw, 4.75rem);
  padding-right: 1rem;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease,
    transform 320ms ease;
}

.arc-copy-inner {
  width: 100%;
  color: #fff;
  text-shadow: 0 0.15rem 0.55rem rgba(0, 0, 0, 0.58);
}

.arc-copy-inner h2 {
  margin: 0 0 1.1rem;
  color: #536477;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1.8vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.arc-copy-inner p {
  width: 100%;
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(0.92rem, 1.08vw, 1.05rem);
  line-height: 1.6;
}

.arc-copy-highlight {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.arc-copy-points {
  width: 100%;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.arc-copy-points li {
  margin: 0 0 0.46rem;
  color: #fff;
  font-size: clamp(0.92rem, 1.08vw, 1.02rem);
  line-height: 1.45;
}

.arc-showcase-section:hover .arc-showcase-copy,
.arc-showcase-section:focus-within .arc-showcase-copy {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.arc-showcase-section:hover .arc-showcase-copy,
.arc-showcase-section:focus-within .arc-showcase-copy {
  pointer-events: auto;
}

.arc-lore-cta {
  margin-top: 1.15rem;
  max-width: min(100%, 18rem) !important;
}

.arc-lore-icon {
  width: clamp(3.2rem, 4.4vw, 4.2rem);
}

.arc-lore-text {
  color: #d7a876;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
}

.arc-lore-cta:hover .arc-lore-text,
.arc-lore-cta:focus-visible .arc-lore-text {
  max-width: 14rem;
}

.arc-showcase-visual {
  width: 100vw;
  max-width: 100vw;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  padding: 0;
}

.arc-scene {
  --lantern-left: 86.08%;
  --lantern-top: 15.28%;
  --lantern-width: clamp(2rem, 3.12vw, 3.28rem);
  --lantern-glow-size: clamp(4.56rem, 7.84vw, 7.28rem);
  --lantern-swing-angle: 8deg;
  --lantern-duration: 3.8s;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 0 auto;
  padding: 0;
  isolation: isolate;
  cursor: pointer;
}

.arc-scene-media {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0 auto;
  padding: 0;
}

.arc-scene-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  user-select: none;
  pointer-events: none;
  transition: opacity 520ms ease;
}

.arc-scene-img-color {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.arc-scene-ship:hover .arc-scene-img-color,
.arc-scene-ship:focus-within .arc-scene-img-color {
  opacity: 1;
}

.arc-lantern-anchor {
  position: absolute;
  left: var(--lantern-left);
  top: var(--lantern-top);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}

.arc-scene-ship:hover .arc-lantern-anchor,
.arc-scene-ship:focus-within .arc-lantern-anchor {
  opacity: 1;
}

.arc-lantern-swing {
  position: relative;
  width: var(--lantern-width);
  transform-origin: 50% 0%;
  transform: translateX(-50%) rotate(calc(var(--lantern-swing-angle) * -1));
  animation: arcLanternSwing var(--lantern-duration) ease-in-out infinite;
  will-change: transform;
}

.arc-lantern-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.arc-lantern-glow {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 0;
  width: var(--lantern-glow-size);
  height: var(--lantern-glow-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 226, 132, 0.98) 0%,
    rgba(255, 190, 82, 0.72) 22%,
    rgba(255, 146, 42, 0.36) 44%,
    rgba(224, 112, 20, 0.16) 60%,
    transparent 76%
  );
  filter: blur(13px);
  mix-blend-mode: screen;
  opacity: 0.98;
  animation: arcLanternPulse 2.8s ease-in-out infinite,
    arcLanternFlicker 4.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .arc-lantern-swing,
  .arc-lantern-glow {
    animation: none !important;
  }
}

@media (max-width: 980px) {
  .arc-scene {
    width: 100vw;
    max-width: 100vw;
    --lantern-width: clamp(1.72rem, 5.04vw, 2.68rem);
    --lantern-glow-size: clamp(3.84rem, 11.04vw, 5.76rem);
  }
}

@media (max-width: 640px) {
  .arc-showcase-section {
    width: 100vw;
    margin: 0 calc(50% - 50vw) !important;
    padding: 0 !important;
  }

  .arc-scene {
    width: 100vw;
    max-width: 100vw;
    --lantern-left: 84.18%;
    --lantern-top: 14.45%;
    --lantern-width: clamp(1.44rem, 5.44vw, 2.16rem);
    --lantern-glow-size: clamp(3.2rem, 10.24vw, 4.48rem);
    --lantern-swing-angle: 7deg;
  }
}

.sketch-box-section {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding: clamp(2.8rem, 5vw, 5rem) clamp(1rem, 3.5vw, 3.2rem)
    clamp(3.2rem, 5.5vw, 5.4rem) !important;
  background: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sketch-box-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(245, 234, 212, 0.26);
  border-bottom: 1px solid rgba(245, 234, 212, 0.22);
}

.sketch-info-box {
  position: relative;
  min-height: 13.2rem;
  padding: clamp(1.2rem, 2vw, 1.7rem) clamp(1rem, 2vw, 1.55rem);
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(245, 234, 212, 0.055),
    rgba(245, 234, 212, 0.018)
  );
  color: rgba(245, 234, 212, 0.78);
  overflow: hidden;
  isolation: isolate;
  transition: color 520ms ease,
    background 520ms ease,
    transform 220ms ease;
}

.sketch-info-box::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(245, 234, 212, 0.28),
    transparent
  );
}

.sketch-info-box:nth-child(3n)::before {
  display: none;
}

.sketch-info-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
      circle at 50% 25%,
      rgba(169, 207, 59, 0.18),
      transparent 38%
    ),
    linear-gradient(180deg, rgba(169, 207, 59, 0.07), rgba(245, 234, 212, 0.02));
  transition: opacity 620ms ease;
}

.sketch-icon {
  margin: 0 auto 0.62rem;
  min-height: 2.8rem;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.4vw, 3.25rem);
  line-height: 1;
  color: rgba(245, 234, 212, 0.68);
  text-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.5);
  transition: color 520ms ease,
    text-shadow 520ms ease,
    transform 240ms ease;
}

.sketch-info-box h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-size: clamp(1.16rem, 1.55vw, 1.58rem);
  line-height: 1;
  letter-spacing: 0.045em;
  color: rgba(245, 234, 212, 0.84);
  text-shadow: 0 0.45rem 0.75rem rgba(0, 0, 0, 0.55);
  transition: color 520ms ease,
    text-shadow 520ms ease;
}

.sketch-info-box p {
  margin: 0 auto;
  max-width: 20rem;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1vw, 1.04rem);
  line-height: 1.55;
  color: rgba(217, 204, 179, 0.72);
  transition: color 520ms ease;
}

.sketch-info-box:hover {
  color: #a9cf3b;
  transform: translateY(-2px);
}

.sketch-info-box:hover::after {
  opacity: 1;
}

.sketch-info-box:hover .sketch-icon,
.sketch-info-box:hover h3 {
  color: #a9cf3b;
  text-shadow: 0 0 0.85rem rgba(169, 207, 59, 0.34),
    0 0.55rem 0.8rem rgba(0, 0, 0, 0.52);
}

.sketch-info-box:hover .sketch-icon {
  transform: translateY(-2px) scale(1.07);
}

.sketch-info-box:hover p {
  color: rgba(245, 234, 212, 0.92);
}

@media (max-width: 980px) {
  .sketch-box-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sketch-info-box:nth-child(3n)::before {
    display: block;
  }

  .sketch-info-box:nth-child(2n)::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .sketch-box-grid {
    grid-template-columns: 1fr;
  }

  .sketch-info-box {
    min-height: auto;
    padding: 1.25rem 1rem 1.45rem;
  }

  .sketch-info-box::before {
    top: auto;
    left: 12%;
    right: 12%;
    bottom: 0;
    width: auto;
    height: 1px;
    display: block !important;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(245, 234, 212, 0.26),
      transparent
    );
  }

  .sketch-info-box:last-child::before {
    display: none !important;
  }
}

.sketch-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: none;
}

.sketch-info-box p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sketch-read-more {
  margin-top: auto;
  padding: 0.45rem 0.85rem 0.36rem;
  border: 1px solid rgba(245, 234, 212, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(245, 234, 212, 0.78);
  font-family: var(--font-heading);
  font-size: clamp(0.94rem, 1.1vw, 1.08rem);
  line-height: 1;
  letter-spacing: 0.035em;
  text-shadow: 0 0.35rem 0.6rem rgba(0, 0, 0, 0.55);
  cursor: none;
  transition: color 420ms ease,
    border-color 420ms ease,
    background 420ms ease,
    transform 180ms ease,
    box-shadow 420ms ease;
}

.sketch-info-box:hover .sketch-read-more,
.sketch-read-more:hover {
  color: #a9cf3b;
  border-color: rgba(169, 207, 59, 0.72);
  background: rgba(169, 207, 59, 0.08);
  box-shadow: 0 0 0.75rem rgba(169, 207, 59, 0.12);
}

.sketch-read-more:hover {
  transform: translateY(-1px);
}

.sketch-card-full {
  display: none;
}

.card-reader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.card-reader.is-open {
  opacity: 1;
  pointer-events: auto;
}

.card-reader-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 50% 40%,
      rgba(169, 207, 59, 0.08),
      transparent 34%
    ),
    rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(7px);
}

.card-reader-panel {
  position: relative;
  width: min(880px, 100%);
  max-height: min(76vh, 780px);
  overflow: auto;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  border: 2px solid rgba(245, 234, 212, 0.62);
  border-radius: 0.34rem;
  background: linear-gradient(
    180deg,
    rgba(18, 12, 7, 0.96),
    rgba(8, 7, 6, 0.98)
  );
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(169, 207, 59, 0.16) inset;
  transform: translateY(1rem) scale(0.98);
  transition: transform 300ms ease;
}

.card-reader.is-open .card-reader-panel {
  transform: translateY(0) scale(1);
}

.card-reader-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.card-reader-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 234, 212, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(245, 234, 212, 0.78);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1;
  cursor: none;
  transition: color 300ms ease,
    border-color 300ms ease,
    transform 180ms ease;
}

.card-reader-close:hover {
  color: #a9cf3b;
  border-color: rgba(169, 207, 59, 0.72);
  transform: rotate(4deg) scale(1.05);
}

.card-reader-icon {
  margin: 0 auto 0.4rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  color: #a9cf3b;
  text-shadow: 0 0 1rem rgba(169, 207, 59, 0.25);
}

.card-reader-panel h2 {
  margin: 0 0 clamp(1rem, 2vw, 1.55rem);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.045em;
  color: #a9cf3b;
  text-shadow: 0 2px 0 rgba(35, 55, 12, 0.85),
    0 0 1rem rgba(169, 207, 59, 0.26);
}

.card-reader-body {
  width: min(720px, 100%);
  margin: 0 auto;
}

.card-reader-body p {
  margin: 0;
  color: rgba(245, 234, 212, 0.88);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.72;
  text-align: left;
}

.card-reader-body p + p {
  margin-top: 0.9rem;
}

body.card-reader-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .card-reader {
    padding: 0.8rem;
  }

  .card-reader-panel {
    max-height: 82vh;
    padding: 1.35rem 1rem 1.55rem;
  }

  .card-reader-close {
    top: 0.55rem;
    right: 0.55rem;
  }

  .card-reader-body p {
    text-align: center;
  }
}

.sketch-read-more-icon {
  width: clamp(3.2rem, 4vw, 4rem);
  height: clamp(3.2rem, 4vw, 4rem);
  margin-top: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-grid;
  place-items: center;
  opacity: 0.72;
  filter: grayscale(1) brightness(1.08) contrast(0.96)
    drop-shadow(0 0.45rem 0.62rem rgba(0, 0, 0, 0.34));
  transition: opacity 520ms ease,
    filter 650ms ease,
    transform 180ms ease;
}

.sketch-read-more-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.sketch-info-box:hover .sketch-read-more-icon,
.sketch-read-more-icon:hover,
.sketch-read-more-icon:focus-visible {
  opacity: 1;
  filter: grayscale(0) brightness(1) contrast(1)
    drop-shadow(0 0 0.48rem rgba(169, 207, 59, 0.16))
    drop-shadow(0 0.55rem 0.75rem rgba(0, 0, 0, 0.4));
  transform: translateY(-2px) scale(1.06);
}

.card-reader {
  padding: clamp(0.8rem, 3.5vw, 2.2rem);
}

.card-reader-backdrop {
  background: radial-gradient(
      circle at 50% 40%,
      rgba(169, 207, 59, 0.08),
      transparent 34%
    ),
    rgba(0, 0, 0, 0.74) !important;
}

.card-reader-panel {
  width: min(920px, calc(100vw - 1.2rem)) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(4.1rem, 6vw, 5.9rem) clamp(3rem, 7vw, 6.4rem)
    clamp(5.5rem, 8vw, 7.4rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #382515;
}

.card-reader-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("https://goom-assets.pages.dev/clouds/Cloud_01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 1rem rgba(169, 207, 59, 0.08));
  pointer-events: none;
}

.card-reader-icon {
  margin-bottom: 0.2rem !important;
  color: #7c4d29 !important;
  text-shadow: 0 1px 0 rgba(255, 242, 212, 0.65) !important;
}

.card-reader-panel h2 {
  color: #6d3f21 !important;
  text-shadow: 0 1px 0 rgba(255, 242, 212, 0.72),
    0 0.45rem 0.65rem rgba(77, 43, 20, 0.18) !important;
}

.card-reader-body {
  max-height: min(44vh, 390px);
  overflow-y: auto;
  padding: 0 0.35rem 0 0;
  scrollbar-width: none;
}

.card-reader-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.card-reader-body p {
  color: #3e2a18 !important;
  text-shadow: none !important;
}

.card-reader-close {
  top: clamp(2.2rem, 4vw, 3.45rem) !important;
  right: clamp(2.4rem, 5vw, 4.6rem) !important;
  border-color: rgba(109, 63, 33, 0.34) !important;
  color: #6d3f21 !important;
  background: rgba(255, 242, 212, 0.32) !important;
  text-shadow: none !important;
}

.card-reader-close:hover {
  color: #9bbf34 !important;
  border-color: rgba(155, 191, 52, 0.7) !important;
}

@media (max-width: 640px) {
  .card-reader-panel {
    width: min(96vw, 620px) !important;
    padding: 3.9rem 1.9rem 4.8rem !important;
  }

  .card-reader-panel h2 {
    font-size: 2rem;
  }

  .card-reader-body {
    max-height: 46vh;
  }

  .card-reader-body p {
    text-align: center !important;
    font-size: 0.96rem;
    line-height: 1.58;
  }

  .card-reader-close {
    top: 1.95rem !important;
    right: 1.85rem !important;
  }
}

.card-reader {
  padding: clamp(1rem, 3vw, 2rem) !important;
  align-items: center !important;
}

.card-reader-panel {
  width: min(760px, calc(100vw - 2rem)) !important;
  padding: clamp(2.95rem, 4.4vw, 4.25rem) clamp(2.25rem, 5vw, 4.35rem)
    clamp(4.15rem, 5.8vw, 5.45rem) !important;
}

.card-reader-icon {
  font-size: clamp(1.65rem, 2.6vw, 2.45rem) !important;
  margin-bottom: 0.15rem !important;
}

.card-reader-panel h2 {
  margin-bottom: clamp(0.75rem, 1.55vw, 1.1rem) !important;
  font-size: clamp(1.55rem, 3.15vw, 2.65rem) !important;
  letter-spacing: 0.035em !important;
}

.card-reader-body {
  width: min(560px, 100%) !important;
  max-height: min(34vh, 300px) !important;
}

.card-reader-body p {
  font-size: clamp(0.88rem, 1vw, 0.98rem) !important;
  line-height: 1.56 !important;
}

.card-reader-body p + p {
  margin-top: 0.68rem !important;
}

.card-reader-close {
  top: clamp(1.75rem, 3.2vw, 2.75rem) !important;
  right: clamp(1.9rem, 4.1vw, 3.65rem) !important;
  width: 1.85rem !important;
  height: 1.85rem !important;
  font-size: 1.35rem !important;
}

.sketch-read-more-icon {
  width: clamp(2.85rem, 3.45vw, 3.45rem) !important;
  height: clamp(2.85rem, 3.45vw, 3.45rem) !important;
}

@media (max-width: 640px) {
  .card-reader-panel {
    width: min(94vw, 620px) !important;
    padding: 3rem 1.65rem 4.2rem !important;
  }

  .card-reader-panel h2 {
    font-size: 1.7rem !important;
  }

  .card-reader-icon {
    font-size: 1.75rem !important;
  }

  .card-reader-body {
    max-height: 39vh !important;
  }

  .card-reader-body p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  .card-reader-close {
    top: 1.55rem !important;
    right: 1.5rem !important;
  }
}

.card-reader {
  align-items: start !important;
  padding-top: clamp(6rem, 11vh, 8.2rem) !important;
  padding-bottom: clamp(1rem, 3vh, 2rem) !important;
}

.card-reader-panel {
  padding: clamp(2.95rem, 4.4vw, 4.25rem) clamp(2.25rem, 5vw, 4.35rem)
    clamp(5.25rem, 7vw, 6.8rem) !important;
  transform: translateY(1.6rem) scale(0.98) !important;
}

.card-reader-panel::before {
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
}

.card-reader.is-open .card-reader-panel {
  transform: translateY(1.25rem) scale(1) !important;
}

.card-reader-body {
  max-height: min(30vh, 265px) !important;
  padding-bottom: 0.35rem !important;
}

.card-reader-body p:last-child {
  margin-bottom: 0.45rem !important;
}

@media (max-width: 640px) {
  .card-reader {
    padding-top: 5.4rem !important;
  }

  .card-reader-panel {
    padding: 3rem 1.65rem 5.15rem !important;
  }

  .card-reader.is-open .card-reader-panel {
    transform: translateY(0.9rem) scale(1) !important;
  }

  .card-reader-body {
    max-height: 34vh !important;
  }
}

.card-reader-panel::before {
  filter: grayscale(1) brightness(1.04) contrast(0.96)
    drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 1rem rgba(169, 207, 59, 0.04)) !important;
  transition: filter 720ms ease,
    transform 300ms ease !important;
}

.card-reader-panel:hover::before {
  filter: grayscale(0) brightness(1) contrast(1)
    drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 1rem rgba(169, 207, 59, 0.1)) !important;
}

.card-reader-icon,
.card-reader-panel h2,
.card-reader-body p {
  transition: color 620ms ease,
    text-shadow 620ms ease,
    filter 620ms ease !important;
}

.card-reader-icon {
  color: #6f6b62 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.card-reader-panel h2 {
  color: #625c54 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0.45rem 0.65rem rgba(0, 0, 0, 0.12) !important;
}

.card-reader-body p {
  color: #3f3d39 !important;
}

.card-reader-close {
  width: clamp(2.45rem, 3.3vw, 3rem) !important;
  height: clamp(2.45rem, 3.3vw, 3rem) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  display: inline-grid;
  place-items: center;
  filter: grayscale(1) brightness(1.08) contrast(0.96)
    drop-shadow(0 0.45rem 0.62rem rgba(0, 0, 0, 0.28)) !important;
  transition: filter 720ms ease,
    transform 180ms ease,
    opacity 420ms ease !important;
  opacity: 0.82;
}

.card-reader-close img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.card-reader-panel:hover .card-reader-close,
.card-reader-close:hover,
.card-reader-close:focus-visible {
  filter: grayscale(0) brightness(1) contrast(1)
    drop-shadow(0 0 0.48rem rgba(169, 207, 59, 0.14))
    drop-shadow(0 0.55rem 0.75rem rgba(0, 0, 0, 0.34)) !important;
  opacity: 1;
}

.card-reader-close:hover {
  transform: rotate(4deg) scale(1.06) !important;
}

@media (max-width: 640px) {
  .card-reader-close {
    width: 2.35rem !important;
    height: 2.35rem !important;
  }
}

.sketch-read-more-icon,
.sound-toggle,
.quick-menu-toggle,
.quick-menu-item,
.hero-play-cta,
.discord-nav-link {
  transition: transform 220ms ease,
    filter 720ms ease,
    opacity 420ms ease !important;
}

.sketch-read-more-icon:hover,
.sketch-read-more-icon:focus-visible {
  transform: translateY(-2px) rotate(-4deg) scale(1.07) !important;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  transform: translateY(-2px) rotate(4deg) scale(1.05) !important;
}

.quick-menu-toggle:hover,
.quick-menu-toggle:focus-visible {
  transform: translateY(0) rotate(-4deg) scale(1.06) !important;
}

.quick-menu-item:hover,
.quick-menu-item:focus-visible {
  transform: translateY(-2px) rotate(4deg) scale(1.06) !important;
}

.hero-play-cta:hover,
.hero-play-cta:focus-visible {
  transform: translateY(-2px) rotate(-2deg) scale(1.02) !important;
}

.discord-nav-link:hover,
.discord-nav-link:focus-visible {
  transform: translateY(-2px) rotate(3deg) scale(1.05) !important;
}

.floating-controls.is-open .quick-menu-toggle:hover,
.floating-controls.is-open .quick-menu-toggle:focus-visible {
  transform: translateY(0) rotate(-4deg) scale(1.06) !important;
}

.card-reader-close:hover,
.card-reader-close:focus-visible {
  transform: rotate(5deg) scale(1.07) !important;
}

.sketch-read-more-icon {
  width: clamp(2.35rem, 2.75vw, 2.85rem) !important;
  height: clamp(2.35rem, 2.75vw, 2.85rem) !important;
  margin-top: 1.05rem !important;
  margin-bottom: 0.05rem !important;
}

.sketch-info-box p {
  margin-bottom: 0 !important;
}

.sketch-info-box:hover .sketch-read-more-icon,
.sketch-read-more-icon:hover,
.sketch-read-more-icon:focus-visible {
  transform: translateY(-2px) rotate(-4deg) scale(1.06) !important;
}

@media (max-width: 640px) {
  .sketch-read-more-icon {
    width: 2.35rem !important;
    height: 2.35rem !important;
    margin-top: 0.9rem !important;
  }
}

.sketch-box-section {
  background: #000 !important;
}

.sketch-box-grid {
  background: transparent !important;
  border-top: 1px solid rgba(245, 234, 212, 0.28) !important;
  border-bottom: 1px solid rgba(245, 234, 212, 0.24) !important;
}

.sketch-info-box {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.sketch-info-box:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.sketch-info-box::after,
.sketch-info-box:hover::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

.sketch-info-box::before {
  opacity: 1 !important;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(245, 234, 212, 0.3),
    transparent
  ) !important;
}

.sketch-info-box:hover .sketch-icon,
.sketch-info-box:hover h3 {
  color: #a9cf3b !important;
  text-shadow: 0 0 0.38rem rgba(169, 207, 59, 0.18),
    0 0.45rem 0.7rem rgba(0, 0, 0, 0.45) !important;
}

.sketch-info-box:hover p {
  color: rgba(245, 234, 212, 0.86) !important;
}

.card-reader-body {
  padding-left: 0 !important;
  scrollbar-width: none !important;
}

.card-reader-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.sketch-icon-image {
  min-height: clamp(4.4rem, 5.4vw, 5.2rem) !important;
}

.icon-swap {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.sketch-icon .icon-swap {
  width: clamp(3.4rem, 4.8vw, 4.6rem);
  aspect-ratio: 3 / 4;
}

.card-reader-icon .icon-swap {
  width: clamp(3.9rem, 5.8vw, 5.6rem);
  aspect-ratio: 3 / 4;
}

.icon-swap-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
  transition: opacity 520ms ease,
    transform 520ms ease,
    filter 520ms ease;
}

.icon-swap-sketch {
  opacity: 1;
}

.icon-swap-color {
  opacity: 0;
  transform: translateY(3px) scale(0.98);
  filter: drop-shadow(0 0 0 rgba(169, 207, 59, 0));
}

.sketch-info-box:hover .icon-swap-sketch,
.card-reader-panel:hover .icon-swap-sketch {
  opacity: 0;
  transform: translateY(-2px) scale(0.98);
}

.sketch-info-box:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-color {
  opacity: 1;
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 0 0.46rem rgba(169, 207, 59, 0.16));
}

.card-reader-icon.has-image-icon {
  min-height: clamp(4.6rem, 6vw, 5.6rem);
  display: grid;
  place-items: center;
}

.card-reader-icon.has-image-icon img {
  text-shadow: none !important;
}

.card-reader-panel::before {
  filter: grayscale(1) brightness(0.16) contrast(1.08)
    drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.72)) !important;
}

.card-reader-panel:hover::before {
  filter: grayscale(0) brightness(1) contrast(1)
    drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.58)) !important;
}

.card-reader-icon {
  color: #f2f0ea !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0.6rem rgba(255, 255, 255, 0.08) !important;
}

.card-reader-panel h2 {
  color: #f7f4ec !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0.55rem 0.85rem rgba(0, 0, 0, 0.42) !important;
}

.card-reader-body p {
  color: #ece6dc !important;
}

.card-reader-panel:hover .card-reader-icon {
  color: #7c4d29 !important;
  text-shadow: 0 1px 0 rgba(255, 242, 212, 0.65) !important;
}

.card-reader-panel:hover h2 {
  color: #6d3f21 !important;
  text-shadow: 0 1px 0 rgba(255, 242, 212, 0.72),
    0 0.45rem 0.65rem rgba(77, 43, 20, 0.18) !important;
}

.card-reader-panel:hover .card-reader-body p {
  color: #3e2a18 !important;
}

.card-reader-close {
  filter: grayscale(1) brightness(1.38) contrast(0.96)
    drop-shadow(0 0.45rem 0.62rem rgba(0, 0, 0, 0.36)) !important;
  opacity: 0.9;
}

.card-reader-panel:hover .card-reader-close,
.card-reader-close:hover,
.card-reader-close:focus-visible {
  filter: grayscale(0) brightness(1) contrast(1)
    drop-shadow(0 0.55rem 0.75rem rgba(0, 0, 0, 0.34)) !important;
  opacity: 1;
}

.sketch-icon-image {
  min-height: clamp(5rem, 6.2vw, 6rem) !important;
}

.sketch-icon .icon-swap {
  width: clamp(3.9rem, 5.4vw, 5.2rem) !important;
}

.card-reader-icon .icon-swap {
  width: clamp(4.8rem, 6.9vw, 6.6rem) !important;
}

.card-reader-icon.has-image-icon {
  min-height: clamp(5.2rem, 7vw, 6.4rem) !important;
}

.card-reader-panel h2 {
  font-size: clamp(1.4rem, 2.75vw, 2.25rem) !important;
  margin-bottom: clamp(0.7rem, 1.4vw, 1rem) !important;
}

.card-reader-icon .icon-swap {
  width: clamp(7.4rem, 11.2vw, 10.5rem) !important;
}

.card-reader-icon.has-image-icon {
  min-height: clamp(7.6rem, 10.8vw, 10rem) !important;
}

.card-reader-icon .icon-swap {
  width: clamp(12.8rem, 18vw, 16rem) !important;
}

.card-reader-icon.has-image-icon {
  min-height: clamp(12rem, 16vw, 15rem) !important;
  margin-bottom: 0.6rem !important;
}

.icon-swap-world {
  aspect-ratio: 1 / 1 !important;
}

.sketch-icon .icon-swap.icon-swap-world {
  width: clamp(4.6rem, 6vw, 5.8rem) !important;
}

.card-reader-icon .icon-swap.icon-swap-world {
  width: clamp(7.1rem, 10vw, 8.8rem) !important;
  aspect-ratio: 1 / 1 !important;
}

.card-reader-icon.has-image-icon {
  min-height: auto !important;
  margin-bottom: 0.15rem !important;
  line-height: 0 !important;
}

.card-reader-icon.has-image-icon img {
  max-width: 100%;
  height: auto;
}

.icon-swap-img,
.icon-swap-sketch,
.icon-swap-color,
.sketch-info-box:hover .icon-swap-sketch,
.card-reader-panel:hover .icon-swap-sketch,
.sketch-info-box:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-color {
  filter: none !important;
}

.icon-swap-color {
  transform: translateY(3px) scale(0.98);
}

.sketch-info-box:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-color {
  transform: translateY(-1px) scale(1.02) !important;
  filter: none !important;
}

.sketch-icon-image,
.card-reader-icon.has-image-icon {
  text-shadow: none !important;
  filter: none !important;
}

.card-reader-icon.has-image-icon .icon-swap-sketch {
  opacity: 1;
  filter: none !important;
}

.card-reader-panel:hover .card-reader-icon.has-image-icon,
.sketch-info-box:hover .sketch-icon-image {
  text-shadow: none !important;
  filter: none !important;
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  padding: clamp(2.25rem, 3.6vw, 3.2rem) clamp(2.25rem, 5vw, 4.35rem)
    clamp(5.9rem, 8vw, 7.4rem) !important;
}

.card-reader-panel::before,
.card-reader-panel:hover::before {
  filter: grayscale(1) brightness(0.2) contrast(1.04)
    drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.7)) !important;
}

.card-reader-icon.has-image-icon {
  margin-top: -0.95rem !important;
  margin-bottom: 0.55rem !important;
}

.card-reader-body {
  padding-bottom: 0.95rem !important;
}

.card-reader-body p:last-child {
  margin-bottom: 1rem !important;
}

@media (max-width: 640px) {
  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    padding: 2.35rem 1.65rem 5.8rem !important;
  }

  .card-reader-icon.has-image-icon {
    margin-top: -0.65rem !important;
    margin-bottom: 0.45rem !important;
  }

  .card-reader-body {
    padding-bottom: 0.8rem !important;
  }
}

.card-reader-panel:hover .card-reader-body p {
  color: #f2f0ea !important;
}

.card-reader-panel:hover h2 {
  color: #a9cf3b !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.55rem 0.85rem rgba(0, 0, 0, 0.42) !important;
}

.icon-swap-sketch,
.icon-swap-color {
  visibility: visible;
  z-index: 1;
}

.icon-swap-color {
  z-index: 2;
}

.sketch-info-box:hover .icon-swap-sketch,
.card-reader-panel:hover .icon-swap-sketch {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-2px) scale(0.98) !important;
}

.sketch-info-box:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-color {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.card-reader-panel .icon-swap-sketch {
  opacity: 1 !important;
  visibility: visible !important;
}

.card-reader-panel .icon-swap-color {
  opacity: 0 !important;
  visibility: hidden !important;
}

.card-reader-panel:hover .card-reader-icon.has-image-icon,
.card-reader-panel:hover .card-reader-icon.has-image-icon img,
.card-reader-panel:hover .icon-swap-img {
  filter: none !important;
}

.icon-swap-color {
  transform: translateY(3px) !important;
}

.sketch-info-box:hover .icon-swap-sketch,
.card-reader-panel:hover .icon-swap-sketch {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-2px) !important;
}

.sketch-info-box:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-color {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-1px) !important;
}

.sketch-info-box:hover .sketch-read-more-icon,
.sketch-read-more-icon:hover,
.sketch-read-more-icon:focus-visible {
  transform: translateY(-2px) rotate(-4deg) !important;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  transform: translateY(-2px) rotate(4deg) !important;
}

.quick-menu-toggle:hover,
.quick-menu-toggle:focus-visible,
.floating-controls.is-open .quick-menu-toggle:hover,
.floating-controls.is-open .quick-menu-toggle:focus-visible {
  transform: translateY(0) rotate(-4deg) !important;
}

.quick-menu-item:hover,
.quick-menu-item:focus-visible {
  transform: translateY(-2px) rotate(4deg) !important;
}

.discord-nav-link:hover,
.discord-nav-link:focus-visible {
  transform: translateY(-2px) rotate(3deg) !important;
}

.discord-nav-link:hover .discord-icon-normal {
  transform: translateY(-1px) !important;
}

.discord-nav-link:hover .discord-icon-hover {
  transform: translateY(-1px) !important;
}

.hero-play-cta:hover,
.hero-play-cta:focus-visible {
  transform: translateY(-2px) rotate(-2deg) !important;
}

.hero-play-cta:hover .hero-play-icon {
  transform: none !important;
}

.brand:hover .brand-icon,
.brand:hover .brand-title,
.welcome-black:hover .welcome-caro,
.sketch-info-box:hover .sketch-icon {
  transform: translateY(-0.03em) !important;
}

.sketch-read-more-icon,
.sound-toggle,
.quick-menu-toggle,
.quick-menu-item,
.discord-nav-link,
.hero-play-cta,
.card-reader-close,
.sketch-icon .icon-swap,
.card-reader-icon .icon-swap {
  transform-origin: center center;
}

.sketch-read-more-icon:hover,
.sketch-read-more-icon:focus-visible {
  transform: rotate(-4deg) !important;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  transform: rotate(4deg) !important;
}

.quick-menu-toggle:hover,
.quick-menu-toggle:focus-visible,
.floating-controls.is-open .quick-menu-toggle:hover,
.floating-controls.is-open .quick-menu-toggle:focus-visible {
  transform: rotate(-4deg) !important;
}

.quick-menu-item:hover,
.quick-menu-item:focus-visible {
  transform: rotate(4deg) !important;
}

.discord-nav-link:hover,
.discord-nav-link:focus-visible {
  transform: rotate(3deg) !important;
}

.card-reader-close:hover,
.card-reader-close:focus-visible {
  transform: rotate(5deg) !important;
}

.hero-play-cta:hover,
.hero-play-cta:focus-visible {
  transform: rotate(-2deg) !important;
}

.discord-nav-link:hover .discord-icon-normal,
.discord-nav-link:hover .discord-icon-hover,
.hero-play-cta:hover .hero-play-text,
.hero-play-cta:hover .hero-play-icon,
.sound-toggle:hover .sound-icon,
.quick-menu-toggle:hover .quick-menu-icon,
.quick-menu-item:hover .quick-menu-icon {
  transform: none !important;
}

.brand:hover .brand-icon,
.brand:hover .brand-title,
.welcome-black:hover .welcome-title,
.welcome-black:hover .welcome-caro {
  transform: none !important;
}

.sketch-info-box:hover .sketch-icon {
  transform: none !important;
}

.sketch-info-box:hover .sketch-read-more-icon:not(:hover):not(:focus-visible) {
  opacity: 0.72 !important;
  filter: grayscale(1) brightness(1.08) contrast(0.96)
    drop-shadow(0 0.45rem 0.62rem rgba(0, 0, 0, 0.34)) !important;
  transform: none !important;
}

.sketch-read-more-icon:hover,
.sketch-read-more-icon:focus-visible {
  opacity: 1 !important;
  filter: grayscale(0) brightness(1) contrast(1)
    drop-shadow(0 0.55rem 0.75rem rgba(0, 0, 0, 0.4)) !important;
  transform: rotate(-4deg) !important;
}

.sketch-info-box:hover
  .sketch-read-more-icon:not(:hover):not(:focus-visible)
  img {
  filter: none !important;
}

.card-reader-panel::before,
.card-reader-panel:hover::before {
  filter: grayscale(1) brightness(0.28) contrast(1.08)
    drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.72)) !important;
}

.card-reader-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.38) 42%,
    rgba(0, 0, 0, 0.22) 63%,
    rgba(12, 12, 12, 0.08) 77%,
    rgba(210, 210, 210, 0.14) 89%,
    rgba(235, 235, 235, 0.22) 95%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask-image: url("https://goom-assets.pages.dev/clouds/Cloud_01.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-image: url("https://goom-assets.pages.dev/clouds/Cloud_01.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

.card-reader-panel::before {
  z-index: -2 !important;
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  filter: grayscale(1) brightness(0.38) contrast(1.06)
    drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.76)) !important;
}

.card-reader-panel:hover::before {
  z-index: -2 !important;
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  filter: grayscale(1) brightness(0.38) contrast(1.06)
    drop-shadow(0 1.45rem 2.4rem rgba(0, 0, 0, 0.76)) !important;
}

.card-reader-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0.6rem !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: rgba(7, 7, 9, 0.9) !important;
  -webkit-mask-image: url("https://goom-assets.pages.dev/clouds/Cloud_01.png") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-image: url("https://goom-assets.pages.dev/clouds/Cloud_01.png") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: 100% 100% !important;
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
}

.card-reader-close {
  filter: grayscale(1) saturate(0) brightness(1.12) contrast(0.9)
    drop-shadow(0 0.45rem 0.62rem rgba(0, 0, 0, 0.36)) !important;
  opacity: 0.92 !important;
}

.card-reader-panel:hover .card-reader-close {
  filter: grayscale(1) saturate(0) brightness(1.12) contrast(0.9)
    drop-shadow(0 0.45rem 0.62rem rgba(0, 0, 0, 0.36)) !important;
  opacity: 0.92 !important;
}

.card-reader-close:hover,
.card-reader-close:focus-visible {
  filter: grayscale(0) saturate(1) brightness(1) contrast(1)
    drop-shadow(0 0.55rem 0.75rem rgba(0, 0, 0, 0.34)) !important;
  opacity: 1 !important;
}

.card-reader-panel:hover .card-reader-close:hover,
.card-reader-panel:hover .card-reader-close:focus-visible {
  filter: grayscale(0) saturate(1) brightness(1) contrast(1)
    drop-shadow(0 0.55rem 0.75rem rgba(0, 0, 0, 0.34)) !important;
  opacity: 1 !important;
}

.icon-swap-roleplay {
  aspect-ratio: 1 / 1 !important;
}

.sketch-icon .icon-swap.icon-swap-roleplay {
  width: clamp(4.8rem, 6vw, 6rem) !important;
}

.card-reader-icon .icon-swap.icon-swap-roleplay {
  width: clamp(7.4rem, 10.5vw, 9.2rem) !important;
  aspect-ratio: 1 / 1 !important;
}

.card-reader-icon.has-image-icon {
  margin-bottom: 0.85rem !important;
}

.card-reader-panel h2 {
  margin-top: 0 !important;
}

.welcome-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-sticker {
  width: clamp(112px, 14vw, 190px);
  height: auto;
  margin: 0 auto clamp(0.85rem, 1.8vw, 1.3rem);
  filter: grayscale(0.38) saturate(0.8);
  opacity: 0.76;
  transition: filter 420ms ease,
    opacity 420ms ease,
    transform 420ms ease,
    drop-shadow 420ms ease;
}

.welcome-kicker {
  color: rgba(245, 234, 212, 0.72);
}

.welcome-description,
.welcome-description-soft,
.welcome-kicker {
  transition: color 420ms ease,
    text-shadow 420ms ease,
    opacity 420ms ease;
}

.welcome-black .welcome-description {
  color: rgba(245, 234, 212, 0.74);
}

.welcome-black .welcome-description-soft {
  color: rgba(217, 204, 179, 0.62);
}

.welcome-black:hover .welcome-sticker {
  filter: grayscale(0) saturate(1.08);
  opacity: 1;
  transform: translateY(-2px);
}

.welcome-black:hover .welcome-title {
  color: #a9cf3b !important;
  text-shadow: 0 2px 0 rgba(35, 55, 12, 0.85),
    0 0 0.95rem rgba(169, 207, 59, 0.32),
    0 0.75rem 1rem rgba(0, 0, 0, 0.55);
}

.welcome-black:hover .welcome-caro {
  color: #f0bf73 !important;
  text-shadow: 0 0 0.9rem rgba(240, 191, 115, 0.38),
    0 0.45rem 0.75rem rgba(0, 0, 0, 0.52);
}

.welcome-black:hover .welcome-description,
.welcome-black:hover .welcome-description-soft,
.welcome-black:hover .welcome-kicker {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 0.55rem 0.9rem rgba(0, 0, 0, 0.58);
}

@media (max-width: 760px) {
  .welcome-sticker {
    width: clamp(98px, 30vw, 150px);
  }
}

.welcome-sticker {
  filter: grayscale(1) contrast(2.8) brightness(1.18) !important;
  opacity: 0.9;
}

.welcome-black::after {
  display: none !important;
}

.welcome-black:hover .welcome-sticker {
  filter: grayscale(0) saturate(1.08) contrast(1.03) brightness(1.02) !important;
  opacity: 1;
}

.welcome-black::before {
  display: none !important;
}

.welcome-black:hover .welcome-caro {
  color: #a9cf3b !important;
  text-shadow: 0 2px 0 rgba(35, 55, 12, 0.85),
    0 0 0.95rem rgba(169, 207, 59, 0.32),
    0 0.75rem 1rem rgba(0, 0, 0, 0.55) !important;
}

.sketch-box-grid {
  position: relative;
  border-top: none !important;
}

.sketch-box-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.3),
    transparent
  ) !important;
  opacity: 1;
  pointer-events: none;
}

.welcome-sticker-wrap {
  position: relative;
  width: clamp(112px, 14vw, 190px);
  margin: 0 auto clamp(0.85rem, 1.8vw, 1.3rem);
}

.welcome-sticker-wrap .welcome-sticker {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  opacity: 1;
  filter: none !important;
  transition: opacity 420ms ease,
    transform 420ms ease;
}

.welcome-sticker-wrap .welcome-sticker-color {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.welcome-sticker-wrap .welcome-sticker-bw {
  position: relative;
  opacity: 1;
}

.welcome-black:hover .welcome-sticker-wrap .welcome-sticker-bw {
  opacity: 0;
  transform: translateY(-2px);
}

.welcome-black:hover .welcome-sticker-wrap .welcome-sticker-color {
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .welcome-sticker-wrap {
    width: clamp(98px, 30vw, 150px);
  }
}

.welcome-black {
  padding: clamp(2.1rem, 3.5vw, 3.5rem) clamp(1.2rem, 4vw, 4rem)
    clamp(2.4rem, 3.6vw, 3.7rem) !important;
}

.sketch-box-section {
  padding: clamp(1.4rem, 2.5vw, 2.5rem) clamp(1rem, 3.5vw, 3.2rem)
    clamp(3.2rem, 5.5vw, 5.4rem) !important;
}

.card-reader-icon .icon-swap-img,
.card-reader-icon.has-image-icon img {
  mix-blend-mode: lighten !important;
  filter: brightness(1.08) contrast(1.02) !important;
}

.card-reader {
  align-items: center !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  width: min(760px, 92vw) !important;
  max-height: min(74vh, 700px) !important;
  overflow: hidden !important;
  padding: clamp(2.2rem, 3.6vw, 3rem) clamp(1.8rem, 4vw, 3.2rem)
    clamp(4.2rem, 6vw, 5.2rem) !important;
  transform: translateY(0) scale(1) !important;
}

.card-reader-icon .icon-swap,
.card-reader-icon .icon-swap.icon-swap-roleplay,
.card-reader-icon .icon-swap.icon-swap-world,
.card-reader-icon .icon-swap.icon-swap-character,
.card-reader-icon .icon-swap.icon-swap-journey,
.card-reader-icon .icon-swap.icon-swap-guild,
.card-reader-icon .icon-swap.icon-swap-citylife,
.card-reader-icon .icon-swap.icon-swap-islands,
.card-reader-icon .icon-swap.icon-swap-progress,
.card-reader-icon .icon-swap.icon-swap-combat,
.card-reader-icon .icon-swap.icon-swap-building,
.card-reader-icon .icon-swap.icon-swap-goal,
.card-reader-icon .icon-swap.icon-swap-expect {
  width: clamp(6.6rem, 9vw, 8.4rem) !important;
  aspect-ratio: 1 / 1 !important;
}

.card-reader-icon.has-image-icon {
  min-height: auto !important;
  margin-top: -0.15rem !important;
  margin-bottom: 0.45rem !important;
  line-height: 0 !important;
}

.card-reader-panel h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem) !important;
  margin-bottom: clamp(0.65rem, 1.2vw, 0.95rem) !important;
}

.card-reader-body {
  width: min(620px, 100%) !important;
  max-height: min(33vh, 310px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 0.35rem !important;
  padding-bottom: 0.4rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(245, 234, 212, 0.34) transparent !important;
  -webkit-overflow-scrolling: touch;
}

.card-reader-body::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

.card-reader-body::-webkit-scrollbar-thumb {
  background: rgba(245, 234, 212, 0.28) !important;
  border-radius: 999px !important;
}

.card-reader-body::-webkit-scrollbar-track {
  background: transparent !important;
}

.card-reader-body p {
  font-size: clamp(0.98rem, 1.12vw, 1.08rem) !important;
  line-height: 1.62 !important;
}

.card-reader-body p + p {
  margin-top: 0.8rem !important;
}

@media (max-width: 640px) {
  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    width: min(94vw, 680px) !important;
    max-height: 78vh !important;
    padding: 2.1rem 1.2rem 4.3rem !important;
  }

  .card-reader-icon .icon-swap,
  .card-reader-icon .icon-swap.icon-swap-roleplay,
  .card-reader-icon .icon-swap.icon-swap-world,
  .card-reader-icon .icon-swap.icon-swap-character,
  .card-reader-icon .icon-swap.icon-swap-journey,
  .card-reader-icon .icon-swap.icon-swap-guild,
  .card-reader-icon .icon-swap.icon-swap-citylife,
  .card-reader-icon .icon-swap.icon-swap-islands,
  .card-reader-icon .icon-swap.icon-swap-progress,
  .card-reader-icon .icon-swap.icon-swap-combat,
  .card-reader-icon .icon-swap.icon-swap-building,
  .card-reader-icon .icon-swap.icon-swap-goal,
  .card-reader-icon .icon-swap.icon-swap-expect {
    width: clamp(5.5rem, 24vw, 7rem) !important;
  }

  .card-reader-body {
    max-height: 35vh !important;
    padding-right: 0.2rem !important;
  }
}

.card-reader {
  display: grid !important;
  place-items: center !important;
  padding: 1rem !important;
  align-items: center !important;
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(760px, 92vw) !important;
  height: min(540px, 80vh) !important;
  max-height: min(540px, 80vh) !important;
  overflow: hidden !important;
  padding: 1.15rem 2rem 2.1rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.card-reader-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: url("https://goom-assets.pages.dev/clouds/Cloud_01.png") center /
    100% 100% no-repeat !important;
  transform: none !important;
  filter: none !important;
  transition: background-image 120ms ease !important;
}

.card-reader-panel:hover::before {
  background-image: url("https://goom-assets.pages.dev/clouds/Cloud_01_c.png") !important;
  transform: none !important;
  filter: none !important;
}

.card-reader-panel::after,
.card-reader-panel:hover::after {
  display: none !important;
  content: none !important;
}

.card-reader-close {
  top: 0.9rem !important;
  right: 1.1rem !important;
  z-index: 3 !important;
}

.card-reader-icon {
  flex: 0 0 auto !important;
  margin: 0.2rem auto 0.2rem !important;
  min-height: auto !important;
  line-height: 0 !important;
  text-align: center !important;
}

.card-reader-icon .icon-swap,
.card-reader-icon .icon-swap.icon-swap-roleplay,
.card-reader-icon .icon-swap.icon-swap-world {
  width: clamp(4.9rem, 6.8vw, 6rem) !important;
  aspect-ratio: 1 / 1 !important;
}

.card-reader-icon .icon-swap-img,
.card-reader-icon.has-image-icon img {
  mix-blend-mode: normal !important;
  filter: none !important;
}

.card-reader-panel h2 {
  flex: 0 0 auto !important;
  width: min(88%, 620px) !important;
  margin: 0 0 0.65rem !important;
  font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
  line-height: 1.02 !important;
  text-align: center !important;
}

.card-reader-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: min(86%, 640px) !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 0.45rem 1.1rem 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.card-reader-body p {
  font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
  line-height: 1.62 !important;
  margin: 0 !important;
}

.card-reader-body p + p {
  margin-top: 0.82rem !important;
}

.card-reader-body p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    width: min(92vw, 720px) !important;
    height: min(520px, 78vh) !important;
    max-height: min(520px, 78vh) !important;
    padding: 1rem 1.45rem 1.9rem !important;
  }

  .card-reader-body {
    width: min(88%, 620px) !important;
  }
}

@media (max-width: 640px) {
  .card-reader {
    padding: 0.7rem !important;
  }

  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    width: min(95vw, 640px) !important;
    height: min(500px, 76vh) !important;
    max-height: min(500px, 76vh) !important;
    padding: 0.9rem 1rem 1.8rem !important;
  }

  .card-reader-icon {
    margin-top: 0.1rem !important;
    margin-bottom: 0.15rem !important;
  }

  .card-reader-icon .icon-swap,
  .card-reader-icon .icon-swap.icon-swap-roleplay,
  .card-reader-icon .icon-swap.icon-swap-world {
    width: clamp(4.5rem, 18vw, 5.5rem) !important;
  }

  .card-reader-panel h2 {
    width: min(92%, 560px) !important;
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    margin-bottom: 0.5rem !important;
  }

  .card-reader-body {
    width: min(90%, 560px) !important;
    padding-bottom: 0.95rem !important;
  }

  .card-reader-body p {
    text-align: left !important;
    font-size: 0.98rem !important;
    line-height: 1.56 !important;
  }
}

.card-reader {
  align-items: start !important;
  padding-top: clamp(4.75rem, 9vh, 6.4rem) !important;
  padding-bottom: 1rem !important;
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  margin-top: 0.75rem !important;
}

.card-reader-icon {
  margin-top: 0.55rem !important;
}

.card-reader-icon .icon-swap-img,
.card-reader-icon.has-image-icon img {
  mix-blend-mode: lighten !important;
  filter: brightness(1.02) contrast(1.02) !important;
}

.card-reader-panel:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-img.icon-swap-color {
  mix-blend-mode: normal !important;
  filter: none !important;
}

.welcome-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(920px, 100%) !important;
  margin: 0 auto !important;
}

.welcome-sticker-wrap {
  position: relative !important;
  width: clamp(112px, 14vw, 190px) !important;
  margin: 0 auto clamp(0.85rem, 1.8vw, 1.3rem) !important;
}

.welcome-sticker-wrap .welcome-sticker {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transition: opacity 420ms ease,
    transform 420ms ease !important;
}

.welcome-sticker-wrap .welcome-sticker-color {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
}

.welcome-sticker-wrap .welcome-sticker-bw {
  position: relative !important;
  opacity: 1 !important;
}

.welcome-kicker {
  color: rgba(245, 234, 212, 0.72) !important;
}

.welcome-black .welcome-description {
  color: rgba(245, 234, 212, 0.74) !important;
}

.welcome-black .welcome-description-soft {
  color: rgba(217, 204, 179, 0.62) !important;
}

.welcome-black:hover .welcome-sticker-wrap .welcome-sticker-bw {
  opacity: 0 !important;
  transform: translateY(-2px) !important;
}

.welcome-black:hover .welcome-sticker-wrap .welcome-sticker-color {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

.welcome-black:hover .welcome-description,
.welcome-black:hover .welcome-description-soft,
.welcome-black:hover .welcome-kicker {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 0.55rem 0.9rem rgba(0, 0, 0, 0.58) !important;
}

@media (max-width: 760px) {
  .welcome-sticker-wrap {
    width: clamp(98px, 30vw, 150px) !important;
  }

  .card-reader {
    padding-top: clamp(4.2rem, 8vh, 5.2rem) !important;
  }
}

.card-reader {
  padding-top: clamp(6rem, 11vh, 7.8rem) !important;
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  margin-top: 1.15rem !important;
}

.card-reader-icon {
  margin-top: 0.7rem !important;
}

.card-reader-icon .icon-swap-img,
.card-reader-icon.has-image-icon img,
.card-reader-panel:hover .icon-swap-img,
.card-reader-panel:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-img.icon-swap-color,
.card-reader-panel:hover .icon-swap-sketch {
  mix-blend-mode: lighten !important;
  filter: brightness(1.03) contrast(1.03) !important;
}

@media (max-width: 760px) {
  .card-reader {
    padding-top: clamp(5.4rem, 10vh, 6.6rem) !important;
  }

  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    margin-top: 0.95rem !important;
  }
}

.site-header {
  padding-top: 0.24rem !important;
  padding-bottom: 0.24rem !important;
}

.brand {
  gap: 0.55rem !important;
}

.brand-icon {
  width: clamp(3.35rem, 4.6vw, 4.35rem) !important;
}

.brand-title {
  font-size: clamp(1.95rem, 3.4vw, 3rem) !important;
}

.nav {
  gap: clamp(1rem, 2vw, 1.9rem) !important;
}

.nav a {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem) !important;
}

.discord-nav-link {
  width: 2.45rem !important;
  height: 2.45rem !important;
}

.discord-icon {
  width: 1.95rem !important;
  height: 1.95rem !important;
}

.card-reader-close {
  top: 1.35rem !important;
  right: 1.55rem !important;
}

@media (max-width: 760px) {
  .site-header {
    padding-top: 0.22rem !important;
    padding-bottom: 0.22rem !important;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }

  .brand-icon {
    width: 3.25rem !important;
  }

  .brand-title {
    font-size: 2rem !important;
  }

  .nav a {
    font-size: 0.92rem !important;
  }

  .discord-nav-link {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }

  .discord-icon {
    width: 1.7rem !important;
    height: 1.7rem !important;
  }

  .card-reader-close {
    top: 1.15rem !important;
    right: 1.2rem !important;
  }
}

.card-reader-close {
  top: 1.7rem !important;
  right: 2.15rem !important;
}

@media (max-width: 760px) {
  .card-reader-close {
    top: 1.45rem !important;
    right: 1.65rem !important;
  }
}

.card-reader-close {
  top: 1.95rem !important;
  right: 3.1rem !important;
}

@media (max-width: 760px) {
  .card-reader-close {
    top: 1.55rem !important;
    right: 2.15rem !important;
  }
}

.card-reader-close {
  right: 3.85rem !important;
}

@media (max-width: 760px) {
  .card-reader-close {
    right: 2.65rem !important;
  }
}

.card-reader-close {
  top: 2.35rem !important;
  right: 4.75rem !important;
}

@media (max-width: 760px) {
  .card-reader-close {
    top: 1.9rem !important;
    right: 3.15rem !important;
  }
}

.hero-character-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-time-character {
  position: absolute;
  left: clamp(1.2rem, 4vw, 5.5rem);
  bottom: 0;
  height: clamp(22rem, 72%, 34rem);
  width: auto;
  max-width: min(34vw, 420px);
  object-fit: contain;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 420ms ease,
    transform 420ms ease;
  filter: drop-shadow(0 0.8rem 1rem rgba(0, 0, 0, 0.42));
  user-select: none;
}

.hero-frame:hover .hero-time-character,
.hero-frame.is-color-active .hero-time-character {
  transform: translateY(0);
}

@media (max-width: 980px) {
  .hero-time-character {
    left: clamp(0.5rem, 2vw, 1.5rem);
    height: clamp(18rem, 58%, 28rem);
    max-width: 42vw;
  }
}

@media (max-width: 760px) {
  .hero-time-character {
    left: -0.5rem;
    height: clamp(14rem, 44%, 21rem);
    max-width: 48vw;
    opacity: 0 !important;
  }
}

.hero-time-character {
  left: clamp(2rem, 5vw, 6.4rem) !important;
}

@media (max-width: 980px) {
  .hero-time-character {
    left: clamp(1.2rem, 3.5vw, 3rem) !important;
  }
}

@media (max-width: 760px) {
  .hero-time-character {
    left: 0.25rem !important;
  }
}

.hero-time-character {
  left: clamp(2.7rem, 6vw, 7.6rem) !important;
}

@media (max-width: 980px) {
  .hero-time-character {
    left: clamp(1.6rem, 4.2vw, 3.8rem) !important;
  }
}

@media (max-width: 760px) {
  .hero-time-character {
    left: 0.55rem !important;
  }
}

.hero-time-character {
  left: clamp(3.2rem, 6.7vw, 8.4rem) !important;
}

@media (max-width: 980px) {
  .hero-time-character {
    left: clamp(2rem, 4.8vw, 4.4rem) !important;
  }
}

@media (max-width: 760px) {
  .hero-time-character {
    left: 0.7rem !important;
  }
}

.custom-cursor img {
  height: 84px !important;
  width: auto !important;
}

.sketch-read-more-icon,
.quick-menu-toggle,
.quick-menu-item,
.sound-toggle,
.hero-play-cta,
.card-reader-close,
.discord-nav-link {
  position: relative !important;
}

.sketch-read-more-icon img,
.quick-menu-icon,
.sound-icon,
.hero-play-icon,
.card-reader-close img,
.discord-icon,
.discord-icon-normal,
.discord-icon-hover {
  pointer-events: none !important;
}

.welcome-sticker-wrap .welcome-sticker-bw {
  filter: grayscale(1) brightness(1.05) contrast(1.02) !important;
  opacity: 1 !important;
}

.welcome-sticker-wrap .welcome-sticker-color {
  filter: none !important;
  opacity: 0 !important;
}

.welcome-black:hover .welcome-sticker-wrap .welcome-sticker-color {
  opacity: 1 !important;
}

.custom-cursor img {
  height: 101px !important;
  width: auto !important;
}

.card-reader-close {
  position: absolute !important;
  top: clamp(1.85rem, 3.4vw, 2.55rem) !important;
  right: clamp(3.25rem, 6vw, 5rem) !important;
  left: auto !important;
  z-index: 40 !important;
}

@media (max-width: 760px) {
  .card-reader-close {
    top: 1.65rem !important;
    right: 2.65rem !important;
  }
}

.discord-nav-link {
  overflow: visible !important;
}

.discord-nav-link:hover .discord-icon-normal,
.discord-nav-link:focus-visible .discord-icon-normal {
  opacity: 0 !important;
  transform: scale(1.2) !important;
}

.discord-nav-link:hover .discord-icon-hover,
.discord-nav-link:focus-visible .discord-icon-hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

.welcome-sticker-wrap .welcome-sticker-bw {
  z-index: 1 !important;
  opacity: 1 !important;
}

.welcome-sticker-wrap .welcome-sticker-color {
  z-index: 2 !important;
  opacity: 0 !important;
  filter: none !important;
}

.welcome-black:hover .welcome-sticker-wrap .welcome-sticker-bw {
  opacity: 0 !important;
}

.welcome-black:hover .welcome-sticker-wrap .welcome-sticker-color {
  opacity: 1 !important;
  filter: none !important;
}

.hero-time-character,
.welcome-sticker-wrap .welcome-sticker,
.sketch-info-box,
.sketch-read-more-icon,
.hero-play-cta,
.hero-play-icon,
.hero-play-text,
.sound-toggle,
.quick-menu,
.quick-menu-toggle,
.quick-menu-item,
.quick-menu-icon,
.sound-icon,
.discord-nav-link,
.discord-icon-normal,
.discord-icon-hover,
.card-reader,
.card-reader-panel,
.card-reader-close,
.card-reader-close img {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.hero-time-character,
.welcome-sticker-wrap .welcome-sticker,
.card-reader,
.card-reader-panel,
.quick-menu,
.quick-menu-toggle,
.hero-play-cta,
.sketch-read-more-icon {
  will-change: transform, opacity;
}

.discord-nav-link {
  transition: transform 180ms ease,
    opacity 180ms ease,
    filter 260ms ease !important;
}

.discord-nav-link:hover,
.discord-nav-link:focus-visible {
  transform: scale(1.2) rotate(3deg) !important;
}

.discord-nav-link:hover .discord-icon-normal,
.discord-nav-link:hover .discord-icon-hover,
.discord-nav-link:focus-visible .discord-icon-normal,
.discord-nav-link:focus-visible .discord-icon-hover {
  transform: none !important;
}

.card-reader {
  transition: opacity 260ms ease !important;
}

.card-reader-panel {
  transition: transform 300ms ease !important;
}

.quick-menu {
  transition: opacity 260ms ease,
    transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .hero-time-character,
  .welcome-sticker-wrap .welcome-sticker,
  .sketch-info-box,
  .sketch-read-more-icon,
  .hero-play-cta,
  .hero-play-icon,
  .hero-play-text,
  .sound-toggle,
  .quick-menu,
  .quick-menu-toggle,
  .quick-menu-item,
  .quick-menu-icon,
  .sound-icon,
  .discord-nav-link,
  .discord-icon-normal,
  .discord-icon-hover,
  .card-reader,
  .card-reader-panel,
  .card-reader-close,
  .card-reader-close img {
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }

  .quick-menu,
  .card-reader,
  .hero-time-character,
  .welcome-sticker-wrap .welcome-sticker {
    transition-property: opacity !important;
  }

  .custom-cursor {
    display: none !important;
  }

  body.custom-cursor-ready,
  body.custom-cursor-ready * {
    cursor: auto !important;
  }

  .hero-frame,
  .hero-frame::before,
  .hero-frame::after {
    transition: none !important;
  }

  .hero-play-text {
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 0.75rem !important;
  }
}

.sketch-icon .icon-swap::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(169, 207, 59, 0.24),
    rgba(240, 191, 115, 0.1) 42%,
    transparent 72%
  );
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  z-index: 0;
}

.sketch-icon .icon-swap-img {
  z-index: 1;
}

.sketch-info-box:hover .sketch-icon .icon-swap {
  animation: goomIconImpulse 720ms cubic-bezier(0.18, 0.82, 0.25, 1) both !important;
}

.sketch-info-box:hover .icon-swap-sketch {
  opacity: 0 !important;
  visibility: visible !important;
  transform: translateY(-1px) scale(1.01) !important;
  animation: goomIconLineAwaken 520ms ease both !important;
  transition: opacity 420ms ease 210ms,
    transform 520ms cubic-bezier(0.18, 0.82, 0.25, 1),
    filter 220ms ease !important;
}

.sketch-info-box:hover .icon-swap-color {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  animation: goomIconColorSettle 680ms cubic-bezier(0.18, 0.82, 0.25, 1) 90ms
    both !important;
  transition: opacity 360ms ease 90ms,
    transform 520ms cubic-bezier(0.18, 0.82, 0.25, 1),
    filter 520ms ease !important;
}

.sketch-info-box:hover .sketch-icon .icon-swap::after {
  animation: goomIconQuietAura 720ms ease-out both !important;
}

.card-reader-panel:hover .icon-swap-sketch,
.card-reader-panel:hover .icon-swap-color {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sketch-info-box:hover .sketch-icon .icon-swap,
  .sketch-info-box:hover .icon-swap-sketch,
  .sketch-info-box:hover .icon-swap-color,
  .sketch-info-box:hover .sketch-icon .icon-swap::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }

  .sketch-info-box:hover .icon-swap-sketch {
    opacity: 0 !important;
    visibility: hidden !important;
    filter: none !important;
  }

  .sketch-info-box:hover .icon-swap-color {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

.sketch-icon .icon-swap,
.sketch-icon .icon-swap-img,
.sketch-icon .icon-swap-sketch,
.sketch-icon .icon-swap-color {
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
}

.sketch-icon .icon-swap::after,
.sketch-info-box:hover .sketch-icon .icon-swap::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  animation: none !important;
}

.sketch-icon .icon-swap-color,
.sketch-info-box:hover .icon-swap-color,
.sketch-info-box:hover .icon-swap-img.icon-swap-color {
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sketch-info-box:hover .icon-swap-color {
  animation: goomIconColorSettleClean 680ms cubic-bezier(0.18, 0.82, 0.25, 1)
    90ms both !important;
}

.sketch-icon .icon-swap-color,
.sketch-info-box:hover .icon-swap-color,
.sketch-info-box:hover .icon-swap-img.icon-swap-color,
.card-reader-panel:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-img.icon-swap-color {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.sketch-icon .icon-swap-img,
.card-reader-icon .icon-swap-img {
  background-color: transparent !important;
  background-image: none !important;
}

.sketch-icon .icon-swap,
.sketch-icon .icon-swap-img,
.sketch-icon .icon-swap-sketch,
.sketch-icon .icon-swap-color,
.sketch-info-box:hover .icon-swap-sketch,
.sketch-info-box:hover .icon-swap-color,
.sketch-info-box:hover .icon-swap-img.icon-swap-sketch,
.sketch-info-box:hover .icon-swap-img.icon-swap-color {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  outline: 0 !important;
  border: 0 !important;
  transform-style: flat !important;
  backface-visibility: visible !important;
}

.sketch-icon .icon-swap::before,
.sketch-icon .icon-swap::after,
.sketch-info-box:hover .sketch-icon .icon-swap::before,
.sketch-info-box:hover .sketch-icon .icon-swap::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.sketch-info-box:hover .icon-swap-sketch {
  visibility: visible !important;
  opacity: 0 !important;
  animation: goomSketchFadeClean 520ms ease both !important;
  transition: none !important;
}

.sketch-info-box:hover .icon-swap-color {
  visibility: visible !important;
  opacity: 1 !important;
  animation: goomColorAwakenClean 700ms cubic-bezier(0.18, 0.82, 0.25, 1) 70ms
    both !important;
  transition: none !important;
}

.card-reader-panel:hover .icon-swap-sketch,
.card-reader-panel:hover .icon-swap-color,
.card-reader-panel:hover .icon-swap-img {
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.hero-time-character {
  opacity: 0 !important;
}

.hero-frame.is-color-active .hero-time-character.is-ready {
  opacity: 1 !important;
}

.hero-frame:not(.is-color-active) .hero-time-character {
  opacity: 0 !important;
}

@media (max-width: 760px) {
  .hero-frame.is-color-active .hero-time-character.is-ready {
    opacity: 0 !important;
  }
}

.hero-time-character {
  position: absolute !important;
  left: 27.2% !important;
  bottom: 2.6% !important;
  height: 74% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(0) !important;
  transform-origin: center bottom !important;
}

@media (max-width: 980px) {
  .hero-time-character {
    left: 27.2% !important;
    bottom: 2.4% !important;
    height: 72% !important;
  }
}

.hero-time-character {
  left: 18.9% !important;
  bottom: 2.6% !important;
  height: 74% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(0) !important;
  transform-origin: center bottom !important;
}

@media (max-width: 980px) {
  .hero-time-character {
    left: 18.9% !important;
    bottom: 2.4% !important;
    height: 72% !important;
  }
}

.hero-time-character {
  left: var(--hero-character-left-px, 18.9%) !important;
  bottom: var(--hero-character-bottom-px, 2.6%) !important;
  height: var(--hero-character-height-px, 74%) !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(0) !important;
  transform-origin: center bottom !important;
}

.hero-frame:hover .hero-time-character,
.hero-frame.is-color-active .hero-time-character,
.hero-frame.is-color-active .hero-time-character.is-ready {
  transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 980px) {
  .hero-time-character {
    left: var(--hero-character-left-px, 18.9%) !important;
    bottom: var(--hero-character-bottom-px, 2.6%) !important;
    height: var(--hero-character-height-px, 72%) !important;
  }
}

@media (max-width: 760px) {
  .hero-time-character,
  .hero-frame.is-color-active .hero-time-character.is-ready {
    opacity: 0 !important;
  }
}

.hero-time-character[data-character="aki"] {
  height: calc(var(--hero-character-height-px, 30rem) * 0.44) !important;
  left: calc(
    var(--hero-character-left-px, 20%) +
      (var(--hero-character-height-px, 30rem) * 0.1)
  ) !important;
  bottom: calc(
    var(--hero-character-bottom-px, 10%) +
      (var(--hero-character-height-px, 30rem) * 0.47)
  ) !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: translateX(-50%) translateY(0) rotate(-1deg) !important;
  transform-origin: center center !important;
  animation: heroAkiFloat 4.8s ease-in-out infinite,
    heroAkiGlow 3.9s ease-in-out infinite !important;
}

.hero-frame:hover .hero-time-character[data-character="aki"],
.hero-frame.is-color-active .hero-time-character[data-character="aki"],
.hero-frame.is-color-active
  .hero-time-character[data-character="aki"].is-ready {
  transform: translateX(-50%) translateY(0) rotate(-1deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-time-character[data-character="aki"] {
    animation: none !important;
  }
}

.hero-time-character[data-character="aki"] {
  left: var(--hero-character-left-px, 18.9%) !important;
  bottom: var(--hero-character-bottom-px, 2.6%) !important;
  height: var(--hero-character-height-px, 74%) !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(0) !important;
  transform-origin: center bottom !important;
  translate: 0 0;
  animation: heroAkiCanvasFloat 4.8s ease-in-out infinite,
    heroAkiCanvasGlow 3.9s ease-in-out infinite !important;
}

.hero-frame:hover .hero-time-character[data-character="aki"],
.hero-frame.is-color-active .hero-time-character[data-character="aki"],
.hero-frame.is-color-active
  .hero-time-character[data-character="aki"].is-ready {
  left: var(--hero-character-left-px, 18.9%) !important;
  bottom: var(--hero-character-bottom-px, 2.6%) !important;
  height: var(--hero-character-height-px, 74%) !important;
  transform: translateX(-50%) translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-time-character[data-character="aki"] {
    translate: 0 0 !important;
    animation: heroAkiCanvasGlow 3.9s ease-in-out infinite !important;
  }
}

:root {
  --goom-page-pad: clamp(0.75rem, 3vw, 2.4rem);
  --goom-reader-ratio: 1.4074;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

main,
section,
article,
div,
header,
nav,
p,
h1,
h2,
h3,
a,
button {
  min-width: 0;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.welcome-title,
.welcome-description,
.sketch-info-box h3,
.sketch-info-box p,
.card-reader-panel h2,
.card-reader-body,
.card-reader-body p,
.hero-title-main,
.hero-eyebrow {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.site-header {
  width: min(1380px, calc(100% - (var(--goom-page-pad) * 2))) !important;
  max-width: calc(100% - (var(--goom-page-pad) * 2)) !important;
  margin-inline: auto !important;
  gap: clamp(0.45rem, 1.6vw, 1.25rem) !important;
}

.brand {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.brand-title {
  white-space: nowrap !important;
}

.nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  row-gap: clamp(0.25rem, 1vw, 0.55rem) !important;
  column-gap: clamp(0.55rem, 1.8vw, 1.55rem) !important;
}

.nav a {
  flex: 0 1 auto !important;
  white-space: nowrap !important;
}

.hero-frame {
  width: 100% !important;
  min-height: clamp(29rem, 62dvh, 48rem) !important;
  max-height: none !important;
}

.hero-frame-content {
  width: min(92%, 880px) !important;
  max-width: 92% !important;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem) !important;
}

.hero-title-main {
  font-size: clamp(2.35rem, 7.2vw, 6.6rem) !important;
  line-height: 0.95 !important;
  text-wrap: balance;
}

.hero-eyebrow-below {
  max-width: min(100%, 48rem) !important;
  margin-inline: auto !important;
  text-wrap: balance;
}

.hero-play-cta {
  max-width: min(100%, 19rem) !important;
  white-space: nowrap !important;
}

.welcome-black {
  padding-inline: var(--goom-page-pad) !important;
}

.welcome-inner {
  width: min(920px, 100%) !important;
  max-width: 100% !important;
}

.welcome-title {
  max-width: 100% !important;
  flex-wrap: wrap !important;
  line-height: 0.95 !important;
  text-wrap: balance;
}

.welcome-description {
  max-width: min(820px, 100%) !important;
}

.sketch-box-section {
  padding-inline: var(--goom-page-pad) !important;
}

.sketch-box-grid {
  width: min(1180px, 100%) !important;
  max-width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.sketch-info-box {
  min-height: clamp(12.6rem, 18vw, 15.4rem) !important;
  height: auto !important;
  padding: clamp(1.05rem, 1.75vw, 1.55rem) clamp(0.85rem, 1.7vw, 1.35rem) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.sketch-icon-image {
  min-height: clamp(3.8rem, 5vw, 5rem) !important;
}

.sketch-icon .icon-swap {
  width: clamp(3.05rem, 4.4vw, 4.25rem) !important;
}

.sketch-info-box h3 {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(1.02rem, 1.45vw, 1.45rem) !important;
  line-height: 1.05 !important;
  text-wrap: balance;
}

.sketch-info-box p {
  width: 100% !important;
  max-width: min(22rem, 100%) !important;
  font-size: clamp(0.88rem, 0.98vw, 1rem) !important;
  line-height: 1.48 !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sketch-read-more-icon {
  flex: 0 0 auto !important;
  width: clamp(2.15rem, 2.55vw, 2.7rem) !important;
  height: clamp(2.15rem, 2.55vw, 2.7rem) !important;
}

.card-reader {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  padding: clamp(0.55rem, 2.2dvh, 1.25rem) clamp(0.55rem, 2.2dvw, 1.25rem) !important;
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  --reader-max-w-by-height: calc(
    (100dvh - clamp(1.2rem, 4dvh, 3rem)) * var(--goom-reader-ratio)
  );
  position: relative !important;
  width: min(760px, 92dvw, var(--reader-max-w-by-height)) !important;
  height: auto !important;
  aspect-ratio: 760 / 540 !important;
  max-width: calc(100dvw - 1rem) !important;
  max-height: calc(100dvh - 1rem) !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(0.72rem, 2.3vw, 1.18rem) clamp(1rem, 5.4vw, 2.55rem)
    clamp(1.35rem, 5.8vw, 2.7rem) !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.card-reader-close {
  top: 7.1% !important;
  right: 12.3% !important;
  width: clamp(1.7rem, 4.8vmin, 2.65rem) !important;
  height: clamp(1.7rem, 4.8vmin, 2.65rem) !important;
  z-index: 4 !important;
}

.card-reader-icon {
  flex: 0 0 auto !important;
  margin: clamp(0.05rem, 0.5vw, 0.3rem) auto clamp(0.05rem, 0.45vw, 0.25rem) !important;
  line-height: 0 !important;
}

.card-reader-icon .icon-swap,
.card-reader-icon .icon-swap.icon-swap-roleplay,
.card-reader-icon .icon-swap.icon-swap-world,
.card-reader-icon .icon-swap.icon-swap-character,
.card-reader-icon .icon-swap.icon-swap-journey,
.card-reader-icon .icon-swap.icon-swap-guild,
.card-reader-icon .icon-swap.icon-swap-citylife,
.card-reader-icon .icon-swap.icon-swap-islands,
.card-reader-icon .icon-swap.icon-swap-progress,
.card-reader-icon .icon-swap.icon-swap-combat,
.card-reader-icon .icon-swap.icon-swap-building,
.card-reader-icon .icon-swap.icon-swap-goal,
.card-reader-icon .icon-swap.icon-swap-expect {
  width: clamp(3.25rem, 8.2vmin, 5.35rem) !important;
  aspect-ratio: 1 / 1 !important;
}

.card-reader-panel h2 {
  flex: 0 0 auto !important;
  width: min(84%, 620px) !important;
  max-width: 84% !important;
  margin: 0 0 clamp(0.28rem, 1.1vw, 0.68rem) !important;
  font-size: clamp(1.15rem, 4.2vmin, 2.08rem) !important;
  line-height: 1.02 !important;
  text-align: center !important;
  text-wrap: balance;
}

.card-reader-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: min(78%, 590px) !important;
  max-width: 78% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 clamp(0.15rem, 0.7vw, 0.4rem) clamp(0.4rem, 1.5vw, 0.95rem) 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.card-reader-body p {
  max-width: 100% !important;
  font-size: clamp(0.78rem, 2.05vmin, 1.02rem) !important;
  line-height: clamp(1.36, 2.45vmin, 1.58) !important;
  text-align: left !important;
}

.card-reader-body p + p {
  margin-top: clamp(0.4rem, 1.1vmin, 0.78rem) !important;
}

.floating-controls {
  right: clamp(0.5rem, 1.8vw, 1.15rem) !important;
  bottom: clamp(0.5rem, 1.8vw, 1.15rem) !important;
  max-width: calc(100dvw - 1rem) !important;
}

.floating-controls button,
.floating-controls a {
  flex: 0 0 auto !important;
}

@media (max-width: 980px) {
  .site-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .nav {
    justify-content: flex-end !important;
  }

  .sketch-box-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sketch-info-box {
    min-height: clamp(12rem, 25vw, 14.8rem) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --goom-page-pad: clamp(0.7rem, 4.2vw, 1.1rem);
  }

  .site-header {
    width: calc(100% - (var(--goom-page-pad) * 2)) !important;
    max-width: calc(100% - (var(--goom-page-pad) * 2)) !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.35rem 0.65rem !important;
  }

  .brand {
    justify-content: center !important;
  }

  .brand-icon {
    width: clamp(2.65rem, 12vw, 3.35rem) !important;
  }

  .brand-title {
    font-size: clamp(1.65rem, 8vw, 2.15rem) !important;
  }

  .nav {
    width: 100% !important;
    justify-content: center !important;
    gap: 0.35rem 0.7rem !important;
  }

  .nav a {
    min-height: 1.8rem !important;
    font-size: clamp(0.78rem, 3.6vw, 0.96rem) !important;
  }

  .discord-nav-link {
    width: clamp(1.8rem, 8vw, 2.25rem) !important;
    height: clamp(1.8rem, 8vw, 2.25rem) !important;
  }

  .hero-frame {
    min-height: clamp(24rem, 72dvh, 36rem) !important;
  }

  .hero-title-main {
    font-size: clamp(2.05rem, 11vw, 3.7rem) !important;
  }

  .hero-eyebrow-below {
    font-size: clamp(0.78rem, 3.4vw, 0.98rem) !important;
    gap: 0.45rem !important;
  }

  .hero-play-cta {
    max-width: min(100%, 16rem) !important;
  }

  .welcome-title {
    font-size: clamp(1.85rem, 9vw, 2.75rem) !important;
  }

  .welcome-description {
    font-size: clamp(0.94rem, 3.4vw, 1.02rem) !important;
    line-height: 1.62 !important;
  }

  .sketch-box-grid {
    grid-template-columns: 1fr !important;
  }

  .sketch-info-box {
    min-height: auto !important;
    padding: 1.15rem 0.9rem 1.25rem !important;
  }

  .sketch-info-box h3 {
    font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
  }

  .sketch-info-box p {
    font-size: 0.94rem !important;
    line-height: 1.48 !important;
  }

  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    width: min(
      95dvw,
      calc((100dvh - 1rem) * var(--goom-reader-ratio))
    ) !important;
    max-width: 95dvw !important;
    padding: clamp(0.6rem, 2.8vw, 0.95rem) clamp(0.9rem, 7vw, 1.55rem)
      clamp(1.15rem, 8vw, 2.15rem) !important;
  }

  .card-reader-close {
    top: 6.8% !important;
    right: 11.4% !important;
  }

  .card-reader-icon .icon-swap,
  .card-reader-icon .icon-swap.icon-swap-roleplay,
  .card-reader-icon .icon-swap.icon-swap-world,
  .card-reader-icon .icon-swap.icon-swap-character,
  .card-reader-icon .icon-swap.icon-swap-journey,
  .card-reader-icon .icon-swap.icon-swap-guild,
  .card-reader-icon .icon-swap.icon-swap-citylife,
  .card-reader-icon .icon-swap.icon-swap-islands,
  .card-reader-icon .icon-swap.icon-swap-progress,
  .card-reader-icon .icon-swap.icon-swap-combat,
  .card-reader-icon .icon-swap.icon-swap-building,
  .card-reader-icon .icon-swap.icon-swap-goal,
  .card-reader-icon .icon-swap.icon-swap-expect {
    width: clamp(2.8rem, 14vmin, 4.6rem) !important;
  }

  .card-reader-panel h2 {
    width: 82% !important;
    max-width: 82% !important;
    font-size: clamp(1.05rem, 5.2vmin, 1.72rem) !important;
  }

  .card-reader-body {
    width: 76% !important;
    max-width: 76% !important;
  }

  .card-reader-body p {
    font-size: clamp(0.76rem, 3.05vmin, 0.94rem) !important;
    line-height: 1.42 !important;
  }
}

@media (max-width: 420px), (max-height: 560px) {
  .card-reader {
    padding: 0.45rem !important;
  }

  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    width: min(
      97dvw,
      calc((100dvh - 0.9rem) * var(--goom-reader-ratio))
    ) !important;
    padding: clamp(0.5rem, 2.2vmin, 0.75rem) clamp(0.75rem, 6vmin, 1.25rem)
      clamp(0.95rem, 7vmin, 1.75rem) !important;
  }

  .card-reader-icon .icon-swap,
  .card-reader-icon .icon-swap.icon-swap-roleplay,
  .card-reader-icon .icon-swap.icon-swap-world,
  .card-reader-icon .icon-swap.icon-swap-character,
  .card-reader-icon .icon-swap.icon-swap-journey,
  .card-reader-icon .icon-swap.icon-swap-guild,
  .card-reader-icon .icon-swap.icon-swap-citylife,
  .card-reader-icon .icon-swap.icon-swap-islands,
  .card-reader-icon .icon-swap.icon-swap-progress,
  .card-reader-icon .icon-swap.icon-swap-combat,
  .card-reader-icon .icon-swap.icon-swap-building,
  .card-reader-icon .icon-swap.icon-swap-goal,
  .card-reader-icon .icon-swap.icon-swap-expect {
    width: clamp(2.45rem, 12vmin, 3.9rem) !important;
  }

  .card-reader-panel h2 {
    font-size: clamp(0.95rem, 4.8vmin, 1.45rem) !important;
    margin-bottom: 0.25rem !important;
  }

  .card-reader-body p {
    font-size: clamp(0.7rem, 2.8vmin, 0.86rem) !important;
    line-height: 1.34 !important;
  }

  .card-reader-body p + p {
    margin-top: 0.35rem !important;
  }
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  min-height: clamp(5.8rem, 7.2vw, 7.35rem) !important;
  padding: clamp(0.72rem, 1.15vw, 1.05rem) clamp(1.05rem, 2.4vw, 2.6rem)
    clamp(0.82rem, 1.35vw, 1.18rem) clamp(0.55rem, 1.25vw, 1.35rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(1rem, 2.4vw, 2.8rem) !important;
  background: rgba(8, 11, 10, 0.66) !important;
  border-bottom: 1px solid rgba(239, 222, 184, 0.18) !important;
  box-shadow: 0 0.75rem 1.7rem rgba(0, 0, 0, 0.22) !important;
}

.brand {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: clamp(0.72rem, 1.05vw, 1.05rem) !important;
  margin-left: 0 !important;
  min-width: 0 !important;
}

.brand-icon {
  width: clamp(5.25rem, 7.1vw, 7.35rem) !important;
  height: auto !important;
}

.brand-title {
  font-size: clamp(3.05rem, 5vw, 4.75rem) !important;
  line-height: 0.9 !important;
  white-space: nowrap !important;
}

.nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(1.25rem, 3vw, 3.2rem) !important;
}

.nav a:not(.discord-nav-link) {
  min-height: clamp(3.05rem, 4.3vw, 3.85rem) !important;
  padding: 0.15rem 0.08rem !important;
  font-size: clamp(1.55rem, 2.55vw, 2rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.discord-nav-link {
  width: clamp(3.75rem, 5.2vw, 4.55rem) !important;
  height: clamp(3.75rem, 5.2vw, 4.55rem) !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.discord-icon {
  width: clamp(3rem, 4.25vw, 3.75rem) !important;
  height: clamp(3rem, 4.25vw, 3.75rem) !important;
}

.discord-nav-link:hover,
.discord-nav-link:focus-visible {
  transform: scale(1.12) rotate(2deg) !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: clamp(5.2rem, 9vw, 6.5rem) !important;
    padding: clamp(0.62rem, 1.6vw, 0.9rem) clamp(0.8rem, 2.5vw, 1.5rem)
      clamp(0.7rem, 1.8vw, 1rem) clamp(0.45rem, 1.8vw, 1rem) !important;
    flex-wrap: wrap !important;
    gap: clamp(0.7rem, 2vw, 1.3rem) !important;
  }

  .brand-icon {
    width: clamp(4.6rem, 10vw, 6rem) !important;
  }

  .brand-title {
    font-size: clamp(2.55rem, 7vw, 3.85rem) !important;
  }

  .nav {
    justify-content: flex-end !important;
    gap: clamp(0.9rem, 2.4vw, 1.8rem) !important;
  }

  .nav a:not(.discord-nav-link) {
    font-size: clamp(1.32rem, 3.2vw, 1.72rem) !important;
    min-height: 2.75rem !important;
  }

  .discord-nav-link {
    width: clamp(3.15rem, 7vw, 3.85rem) !important;
    height: clamp(3.15rem, 7vw, 3.85rem) !important;
  }

  .discord-icon {
    width: clamp(2.55rem, 5.8vw, 3.15rem) !important;
    height: clamp(2.55rem, 5.8vw, 3.15rem) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    padding: 0.55rem clamp(0.65rem, 3vw, 1rem) 0.7rem
      clamp(0.45rem, 2.4vw, 0.8rem) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.45rem !important;
  }

  .brand {
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }

  .brand-icon {
    width: clamp(3.75rem, 15vw, 4.75rem) !important;
  }

  .brand-title {
    font-size: clamp(2.05rem, 9.5vw, 2.9rem) !important;
  }

  .nav {
    width: 100% !important;
    justify-content: center !important;
    gap: clamp(0.55rem, 3vw, 0.95rem) !important;
  }

  .nav a:not(.discord-nav-link) {
    min-height: 2.15rem !important;
    font-size: clamp(1rem, 4.4vw, 1.28rem) !important;
  }

  .discord-nav-link {
    width: clamp(2.55rem, 10vw, 3.05rem) !important;
    height: clamp(2.55rem, 10vw, 3.05rem) !important;
  }

  .discord-icon {
    width: clamp(2.05rem, 8vw, 2.5rem) !important;
    height: clamp(2.05rem, 8vw, 2.5rem) !important;
  }
}

.site-header .brand-title {
  display: none !important;
}

.site-header .brand {
  gap: 0 !important;
}

.site-header .brand-icon {
  margin-left: 0 !important;
}

@media (min-width: 981px) {
  .site-header .brand-icon {
    width: clamp(5.85rem, 7.6vw, 7.8rem) !important;
  }
}

@media (max-width: 760px) {
  .site-header .brand {
    align-self: flex-start !important;
  }

  .site-header .brand-icon {
    width: clamp(4.8rem, 19.2vw, 6rem) !important;
  }
}

.hero.hero-story {
  padding-bottom: 0 !important;
}

.hero-frame {
  width: 100% !important;
  aspect-ratio: 1672 / 941 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

.hero-frame-background,
.hero-frame .background-image {
  width: 100% !important;
  height: 100% !important;
}

@media (max-height: 720px) and (min-width: 900px) {
  .hero-frame {
    aspect-ratio: auto !important;
    min-height: min(78dvh, 56.3vw) !important;
  }
}

@media (max-width: 760px) {
  .hero-frame {
    aspect-ratio: auto !important;
    min-height: clamp(31rem, 82dvh, 44rem) !important;
  }
}

.hero-frame {
  aspect-ratio: 1672 / 753 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

@media (max-height: 720px) and (min-width: 900px) {
  .hero-frame {
    aspect-ratio: 1672 / 753 !important;
    min-height: auto !important;
  }
}

@media (max-width: 760px) {
  .hero-frame {
    aspect-ratio: auto !important;
    min-height: clamp(28rem, 74dvh, 38rem) !important;
  }
}

.hero-frame {
  aspect-ratio: 1672 / 659 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.hero-frame-background {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.hero-frame .background-image {
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-height: 720px) and (min-width: 900px) {
  .hero-frame {
    aspect-ratio: 1672 / 659 !important;
    min-height: auto !important;
  }
}

@media (max-width: 760px) {
  .hero-frame {
    aspect-ratio: auto !important;
    min-height: clamp(26rem, 68dvh, 36rem) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

.hero.hero-story,
.hero-story,
.hero-frame,
.hero-frame-background,
.hero-frame .background-image {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.hero-frame {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

.hero-frame-background {
  inset: 0 !important;
  background: transparent !important;
}

.hero-frame::before,
.hero-frame::after,
.hero-frame-background::before,
.hero-frame-background::after,
.hero.hero-story::before,
.hero.hero-story::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.hero-frame::before,
.hero-frame-background::before,
.hero-frame-background::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

.hero-frame {
  position: relative !important;
  overflow: hidden !important;
}

.hero-frame::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: #000 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

.hero-frame-background {
  bottom: -1px !important;
}

.hero-frame .background-image {
  height: calc(100% + 2px) !important;
}

.hero-play-cta {
  width: auto !important;
  max-width: none !important;
  min-width: max-content !important;
  overflow: visible !important;
  white-space: nowrap !important;
  justify-content: center !important;
}

.hero-play-text {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.hero-play-cta:hover .hero-play-text,
.hero-play-cta:focus-visible .hero-play-text {
  max-width: 30rem !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  margin-left: 0.95rem !important;
}

@media (max-width: 760px) {
  .hero-play-cta {
    min-width: 0 !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .hero-play-cta:hover .hero-play-text,
  .hero-play-cta:focus-visible .hero-play-text {
    max-width: calc(100vw - 7rem) !important;
  }
}

.hero-frame {
  overflow: hidden !important;
  background: #000 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.hero-frame-background {
  position: absolute !important;
  inset: -4px !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  background: #000 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.hero-frame .background-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.hero-frame::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.hero-character-layer {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.hero-aki-sparkles {
  position: absolute !important;
  left: var(--hero-character-left-px, 18.9%) !important;
  bottom: calc(
    var(--hero-character-bottom-px, 2.6%) +
      (var(--hero-character-height-px, 30rem) * 0.21)
  ) !important;
  width: calc(var(--hero-character-height-px, 30rem) * 0.6) !important;
  height: calc(var(--hero-character-height-px, 30rem) * 0.62) !important;
  transform: translate(-50%, -27%) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: 3 !important;
  mix-blend-mode: lighten !important;
  transition: opacity 180ms ease !important;
}

.hero-aki-sparkles::before,
.hero-aki-sparkles::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  border-radius: 999rem !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
  filter: drop-shadow(0 0 0.24rem rgba(255, 246, 187, 0.78))
    drop-shadow(0 0 0.68rem rgba(145, 234, 255, 0.28)) !important;
}

.hero-aki-sparkles::before {
  background-image: radial-gradient(circle, rgba(255, 255, 232, 1) 0 1.45px, transparent 2.4px),
    radial-gradient(
      circle,
      rgba(255, 230, 145, 0.92) 0 1.25px,
      transparent 2.6px
    ),
    radial-gradient(
      circle,
      rgba(181, 246, 255, 0.88) 0 1.1px,
      transparent 2.3px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.85) 0 0.95px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      rgba(255, 238, 175, 0.78) 0 1.4px,
      transparent 2.7px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.9) 0 0.8px,
      transparent 1.7px
    ),
    radial-gradient(
      circle,
      rgba(255, 245, 210, 0.74) 0 0.55px,
      transparent 1.15px
    ),
    radial-gradient(
      circle,
      rgba(170, 239, 255, 0.7) 0 0.5px,
      transparent 1.1px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.62) 0 0.42px,
      transparent 0.95px
    );
  background-size: 0.62rem 0.62rem,
    0.72rem 0.72rem,
    0.54rem 0.54rem,
    0.64rem 0.64rem,
    0.76rem 0.76rem,
    0.48rem 0.48rem,
    0.28rem 0.28rem,
    0.24rem 0.24rem,
    0.2rem 0.2rem;
  background-position: 18% 42%,
    33% 23%,
    47% 58%,
    62% 35%,
    73% 49%,
    42% 14%,
    25% 60%,
    54% 27%,
    78% 28%;
  animation: akiSparkleMoveA 2.9s cubic-bezier(0.22, 0.61, 0.36, 1) infinite !important;
}

.hero-aki-sparkles::after {
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 236, 0.96) 0 1.22px,
      transparent 2.4px
    ),
    radial-gradient(
      circle,
      rgba(255, 225, 137, 0.84) 0 1.35px,
      transparent 2.7px
    ),
    radial-gradient(
      circle,
      rgba(174, 242, 255, 0.82) 0 1px,
      transparent 2.25px
    ),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 0.9px, transparent 2px),
    radial-gradient(
      circle,
      rgba(255, 238, 178, 0.76) 0 1.4px,
      transparent 2.75px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.84) 0 0.75px,
      transparent 1.65px
    ),
    radial-gradient(
      circle,
      rgba(255, 252, 235, 0.7) 0 0.55px,
      transparent 1.2px
    ),
    radial-gradient(
      circle,
      rgba(167, 239, 255, 0.72) 0 0.48px,
      transparent 1.05px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.58) 0 0.4px,
      transparent 0.92px
    );
  background-size: 0.58rem 0.58rem,
    0.78rem 0.78rem,
    0.52rem 0.52rem,
    0.68rem 0.68rem,
    0.8rem 0.8rem,
    0.42rem 0.42rem,
    0.26rem 0.26rem,
    0.22rem 0.22rem,
    0.19rem 0.19rem;
  background-position: 23% 63%,
    40% 44%,
    56% 20%,
    68% 64%,
    78% 30%,
    49% 55%,
    34% 18%,
    61% 24%,
    84% 40%;
  animation: akiSparkleMoveB 3.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    infinite -0.9s !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-frame.is-color-active
    .hero-character-layer.is-aki-active
    .hero-aki-sparkles::before {
    animation: akiSparkleMoveA 2.9s cubic-bezier(0.22, 0.61, 0.36, 1) infinite !important;
    animation-duration: 2.9s !important;
    animation-iteration-count: infinite !important;
  }

  .hero-frame.is-color-active
    .hero-character-layer.is-aki-active
    .hero-aki-sparkles::after {
    animation: akiSparkleMoveB 3.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
      infinite -0.9s !important;
    animation-duration: 3.35s !important;
    animation-iteration-count: infinite !important;
  }
}

.hero-character-layer .hero-aki-sparkles {
  opacity: 0 !important;
}

.hero-character-layer.is-aki-active .hero-aki-sparkles {
  opacity: 0 !important;
}

.hero-frame.is-color-active
  .hero-character-layer.is-aki-active
  .hero-aki-sparkles {
  opacity: 1 !important;
}

.hero-time-character[data-character="witch"] {
  left: var(--hero-witch-left-px, 89.5%) !important;
  bottom: var(--hero-witch-bottom-px, 16%) !important;
  height: var(--hero-witch-height-px, 20rem) !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(0) !important;
  transform-origin: center bottom !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  filter: drop-shadow(0 0.2rem 0.45rem rgba(0, 0, 0, 0.36));
}

.hero-frame.is-color-active
  .hero-time-character[data-character="witch"].is-ready {
  opacity: 1 !important;
}

.hero-witch-aura,
.hero-witch-lantern-glow {
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 260ms ease !important;
}

.hero-witch-aura {
  left: var(--hero-witch-left-px, 89.5%) !important;
  bottom: calc(
    var(--hero-witch-bottom-px, 16%) -
      (var(--hero-witch-height-px, 20rem) * 0.06)
  ) !important;
  width: calc(var(--hero-witch-height-px, 20rem) * 1.08) !important;
  height: calc(var(--hero-witch-height-px, 20rem) * 1.28) !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  background: radial-gradient(
    ellipse at center,
    rgba(10, 7, 18, 0) 0%,
    rgba(10, 7, 18, 0.18) 34%,
    rgba(6, 4, 12, 0.4) 56%,
    rgba(4, 3, 8, 0.56) 73%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  filter: blur(18px) !important;
  mix-blend-mode: multiply !important;
}

.hero-witch-lantern-glow {
  left: calc(
    var(--hero-witch-left-px, 89.5%) -
      (var(--hero-witch-height-px, 20rem) * 0.11)
  ) !important;
  bottom: calc(
    var(--hero-witch-bottom-px, 16%) +
      (var(--hero-witch-height-px, 20rem) * 0.34)
  ) !important;
  width: calc(var(--hero-witch-height-px, 20rem) * 0.52) !important;
  height: calc(var(--hero-witch-height-px, 20rem) * 0.52) !important;
  transform: translate(-50%, 50%) !important;
  z-index: 4 !important;
  border-radius: 999rem !important;
  background: radial-gradient(
    circle,
    rgba(255, 241, 185, 0.92) 0%,
    rgba(255, 203, 109, 0.58) 20%,
    rgba(255, 169, 76, 0.28) 42%,
    rgba(255, 125, 39, 0.12) 58%,
    rgba(255, 125, 39, 0) 74%
  ) !important;
  filter: blur(9px) !important;
  mix-blend-mode: lighten !important;
  animation: witchLanternPulse 2.8s ease-in-out infinite !important;
}

.hero-frame.is-color-active
  .hero-character-layer.is-witch-active:not(.is-witch-vanished)
  .hero-witch-aura,
.hero-frame.is-color-active
  .hero-character-layer.is-witch-active:not(.is-witch-vanished)
  .hero-witch-lantern-glow {
  opacity: 1 !important;
}

.hero-frame.is-color-active
  .hero-character-layer.is-witch-active.is-witch-awake:not(.is-witch-vanished)
  .hero-witch-aura {
  opacity: 1 !important;
  filter: blur(22px) !important;
}

.hero-frame.is-color-active
  .hero-character-layer.is-witch-active.is-witch-awake:not(.is-witch-vanished)
  .hero-witch-lantern-glow {
  opacity: 1 !important;
  animation: witchLanternPulse 1.8s ease-in-out infinite !important;
}

.hero-character-layer.is-witch-vanished
  .hero-time-character[data-character="witch"],
.hero-character-layer.is-witch-vanished .hero-witch-aura,
.hero-character-layer.is-witch-vanished .hero-witch-lantern-glow {
  opacity: 0 !important;
}

.hero-character-layer.is-witch-active {
  pointer-events: auto !important;
}

.hero-character-layer.is-witch-active
  .hero-time-character[data-character="witch"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.hero-witch-hitbox {
  position: absolute !important;
  left: var(--hero-witch-left-px, 95.5%) !important;
  bottom: var(--hero-witch-bottom-px, 22%) !important;
  width: calc(var(--hero-witch-height-px, 20rem) * 0.62) !important;
  height: calc(var(--hero-witch-height-px, 20rem) * 1.02) !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: pointer !important;
}

.hero-frame.is-color-active
  .hero-character-layer.is-witch-active:not(.is-witch-vanished)
  .hero-witch-hitbox {
  pointer-events: auto !important;
}

.hero-time-character[data-character="witch"] {
  left: var(--hero-witch-left-px, 95.5%) !important;
  bottom: var(--hero-witch-bottom-px, 22%) !important;
}

.hero-witch-aura {
  left: var(--hero-witch-left-px, 95.5%) !important;
  bottom: calc(
    var(--hero-witch-bottom-px, 22%) -
      (var(--hero-witch-height-px, 20rem) * 0.06)
  ) !important;
}

.hero-witch-lantern-glow {
  left: calc(
    var(--hero-witch-left-px, 95.5%) -
      (var(--hero-witch-height-px, 20rem) * 0.11)
  ) !important;
  bottom: calc(
    var(--hero-witch-bottom-px, 22%) +
      (var(--hero-witch-height-px, 20rem) * 0.34)
  ) !important;
}

.hero-frame-overlay {
  pointer-events: none !important;
}

.hero-witch-hitbox {
  bottom: var(--hero-witch-bottom-px, 25%) !important;
  width: calc(var(--hero-witch-height-px, 20rem) * 0.78) !important;
  height: calc(var(--hero-witch-height-px, 20rem) * 1.18) !important;
  z-index: 30 !important;
}

.hero-frame.is-color-active
  .hero-character-layer.is-witch-active:not(.is-witch-vanished)
  .hero-witch-hitbox,
.hero-character-layer.is-witch-active:not(.is-witch-vanished)
  .hero-witch-hitbox {
  pointer-events: auto !important;
}

.hero-time-character[data-character="witch"] {
  bottom: var(--hero-witch-bottom-px, 25%) !important;
}

.hero-witch-aura {
  bottom: calc(
    var(--hero-witch-bottom-px, 25%) -
      (var(--hero-witch-height-px, 20rem) * 0.06)
  ) !important;
}

.hero-witch-lantern-glow {
  bottom: calc(
    var(--hero-witch-bottom-px, 25%) +
      (var(--hero-witch-height-px, 20rem) * 0.34)
  ) !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-frame-background {
  filter: brightness(0.5) saturate(0.88) contrast(1.06);
}

.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-frame-overlay {
  background: radial-gradient(
      circle at 82% 54%,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.38) 26%,
      rgba(0, 0, 0, 0.62) 68%,
      rgba(0, 0, 0, 0.78) 100%
    ),
    linear-gradient(180deg, rgba(5, 7, 14, 0.52) 0%, rgba(4, 5, 10, 0.7) 100%);
  opacity: 1 !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-title-main,
.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-title-main
  .hero-line,
.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-play-text {
  color: #4b4f59 !important;
  text-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.38) !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-eyebrow,
.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-eyebrow
  span,
.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-eyebrow-below,
.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .eyebrow-mark {
  color: #e7a93a !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .eyebrow-mark {
  background: #e7a93a !important;
  box-shadow: 0 0 0.65rem rgba(231, 169, 58, 0.28);
}

.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-play-cta {
  filter: brightness(0.88);
}

.hero-time-character[data-character="witch"] {
  left: var(--hero-witch-left-px, 96.8%) !important;
}

.hero-witch-hitbox {
  left: var(--hero-witch-left-px, 96.8%) !important;
}

.hero-witch-aura {
  left: var(--hero-witch-left-px, 96.8%) !important;
}

.hero-witch-lantern-glow {
  left: calc(
    var(--hero-witch-left-px, 96.8%) -
      (var(--hero-witch-height-px, 20rem) * 0.11)
  ) !important;
  bottom: calc(
    var(--hero-witch-bottom-px, 25%) +
      (var(--hero-witch-height-px, 20rem) * 0.46)
  ) !important;
  width: calc(var(--hero-witch-height-px, 20rem) * 0.58) !important;
  height: calc(var(--hero-witch-height-px, 20rem) * 0.58) !important;
}

.hero-witch-lantern-glow {
  bottom: calc(
    var(--hero-witch-bottom-px, 25%) +
      (var(--hero-witch-height-px, 20rem) * 0.58)
  ) !important;
  width: calc(var(--hero-witch-height-px, 20rem) * 0.6) !important;
  height: calc(var(--hero-witch-height-px, 20rem) * 0.6) !important;
}

.hero-frame.is-color-active
  .hero-character-layer.is-witch-active.is-witch-awake:not(.is-witch-vanished)
  .hero-witch-lantern-glow {
  bottom: calc(
    var(--hero-witch-bottom-px, 25%) +
      (var(--hero-witch-height-px, 20rem) * 0.68)
  ) !important;
  animation: witchLanternPulse 1.8s ease-in-out infinite !important;
}

.hero-time-character[data-character="witch"],
.hero-witch-hitbox {
  left: var(--hero-witch-left-px, 97.2%) !important;
}

.hero-witch-lantern-glow {
  left: calc(
    var(--hero-witch-left-px, 97.2%) -
      (var(--hero-witch-height-px, 20rem) * 0.11)
  ) !important;
}

.hero-witch-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: opacity 260ms ease !important;
  filter: brightness(var(--time-brightness)) saturate(var(--time-saturation))
    contrast(1.03) !important;
}

.hero-frame.is-color-active:has(
    .hero-character-layer.is-witch-active:not(.is-witch-vanished)
  )
  .hero-witch-background {
  opacity: 1 !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active:not(.is-witch-vanished))
  .hero-frame-background {
  filter: none !important;
}

.hero-witch-aura {
  display: none !important;
  opacity: 0 !important;
}

.hero-character-layer {
  z-index: 3 !important;
}

.hero-frame-overlay {
  z-index: 2 !important;
}

.hero-frame-content,
.scroll-cue {
  z-index: 4 !important;
}

.hero-frame.is-color-active:has(.hero-character-layer.is-witch-active)
  .hero-witch-background {
  opacity: 1 !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active) .hero-frame-overlay {
  background: radial-gradient(
      circle at 82% 54%,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.38) 26%,
      rgba(0, 0, 0, 0.62) 68%,
      rgba(0, 0, 0, 0.78) 100%
    ),
    linear-gradient(180deg, rgba(5, 7, 14, 0.52) 0%, rgba(4, 5, 10, 0.7) 100%) !important;
  opacity: 1 !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active) .hero-title-main,
.hero-frame:has(.hero-character-layer.is-witch-active)
  .hero-title-main
  .hero-line,
.hero-frame:has(.hero-character-layer.is-witch-active) .hero-play-text {
  color: #4b4f59 !important;
  text-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.38) !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active) .hero-eyebrow,
.hero-frame:has(.hero-character-layer.is-witch-active) .hero-eyebrow span,
.hero-frame:has(.hero-character-layer.is-witch-active) .hero-eyebrow-below,
.hero-frame:has(.hero-character-layer.is-witch-active) .eyebrow-mark {
  color: #e7a93a !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active) .eyebrow-mark {
  background: #e7a93a !important;
  box-shadow: 0 0 0.65rem rgba(231, 169, 58, 0.28) !important;
}

.hero-frame:has(.hero-character-layer.is-witch-active) .hero-play-cta {
  filter: brightness(0.88) !important;
}

.hero-character-layer.is-witch-vanished
  .hero-time-character[data-character="witch"],
.hero-character-layer.is-witch-vanished .hero-witch-lantern-glow,
.hero-character-layer.is-witch-vanished .hero-witch-hitbox {
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-character-layer.is-witch-vanished .hero-witch-aura {
  display: none !important;
  opacity: 0 !important;
}

.hero-witch-lantern-glow {
  bottom: calc(
    var(--hero-witch-bottom-px, 25%) +
      (var(--hero-witch-height-px, 20rem) * 0.52)
  ) !important;
}

.hero-frame.is-color-active
  .hero-character-layer.is-witch-active.is-witch-awake
  .hero-witch-lantern-glow {
  bottom: calc(
    var(--hero-witch-bottom-px, 25%) +
      (var(--hero-witch-height-px, 20rem) * 0.72)
  ) !important;
}

.hero-character-layer.is-witch-vanished
  .hero-time-character[data-character="witch"] {
  visibility: hidden !important;
}

html:has(body.card-reader-open),
body.card-reader-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.card-reader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  padding: clamp(0.65rem, 2.2dvh, 1.25rem) clamp(0.65rem, 2.2dvw, 1.25rem) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: none;
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  --goom-cloud-ratio: 1.4074;
  position: relative !important;
  width: min(
    760px,
    92dvw,
    calc((100dvh - 2rem) * var(--goom-cloud-ratio))
  ) !important;
  height: auto !important;
  aspect-ratio: 760 / 540 !important;
  max-width: calc(100dvw - 1.25rem) !important;
  max-height: calc(100dvh - 1.25rem) !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(1.35rem, 4.8vmin, 2.85rem) clamp(1.75rem, 7.2vmin, 4.4rem)
    clamp(2.45rem, 8.4vmin, 5.25rem) !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overscroll-behavior: contain !important;
  touch-action: none;
}

.card-reader-panel::before {
  inset: 0 !important;
  background-size: 100% 100% !important;
}

.card-reader-icon {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin: clamp(0.1rem, 0.8vmin, 0.45rem) auto clamp(0.12rem, 0.7vmin, 0.4rem) !important;
  line-height: 0 !important;
}

.card-reader-icon .icon-swap,
.card-reader-icon .icon-swap.icon-swap-roleplay,
.card-reader-icon .icon-swap.icon-swap-world,
.card-reader-icon .icon-swap.icon-swap-character,
.card-reader-icon .icon-swap.icon-swap-journey,
.card-reader-icon .icon-swap.icon-swap-guild,
.card-reader-icon .icon-swap.icon-swap-citylife,
.card-reader-icon .icon-swap.icon-swap-islands,
.card-reader-icon .icon-swap.icon-swap-progress,
.card-reader-icon .icon-swap.icon-swap-combat,
.card-reader-icon .icon-swap.icon-swap-building,
.card-reader-icon .icon-swap.icon-swap-goal,
.card-reader-icon .icon-swap.icon-swap-expect {
  width: clamp(3.15rem, 8.2vmin, 5.1rem) !important;
  aspect-ratio: 1 / 1 !important;
}

.card-reader-panel h2 {
  flex: 0 0 auto !important;
  width: min(84%, 620px) !important;
  max-width: 84% !important;
  margin: 0 auto clamp(0.28rem, 1.1vmin, 0.72rem) !important;
  font-size: clamp(1.08rem, 3.8vmin, 1.95rem) !important;
  line-height: 1.02 !important;
  text-align: center !important;
  text-wrap: balance;
}

.card-reader-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: min(74%, 590px) !important;
  max-width: 74% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 clamp(0.12rem, 0.7vmin, 0.4rem) clamp(0.55rem, 1.4vmin, 0.95rem) 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.card-reader-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.card-reader-body p {
  font-size: clamp(0.74rem, 2.05vmin, 0.98rem) !important;
  line-height: clamp(1.34, 2.55vmin, 1.55) !important;
  text-align: left !important;
}

.card-reader-body p + p {
  margin-top: clamp(0.36rem, 1.05vmin, 0.72rem) !important;
}

@media (max-width: 760px), (max-height: 620px) {
  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    width: min(
      96dvw,
      calc((100dvh - 1rem) * var(--goom-cloud-ratio))
    ) !important;
    max-width: 96dvw !important;
    padding: clamp(0.95rem, 3.6vmin, 1.8rem) clamp(1.25rem, 6.6vmin, 2.7rem)
      clamp(1.95rem, 8vmin, 3.9rem) !important;
  }

  .card-reader-icon .icon-swap,
  .card-reader-icon .icon-swap.icon-swap-roleplay,
  .card-reader-icon .icon-swap.icon-swap-world,
  .card-reader-icon .icon-swap.icon-swap-character,
  .card-reader-icon .icon-swap.icon-swap-journey,
  .card-reader-icon .icon-swap.icon-swap-guild,
  .card-reader-icon .icon-swap.icon-swap-citylife,
  .card-reader-icon .icon-swap.icon-swap-islands,
  .card-reader-icon .icon-swap.icon-swap-progress,
  .card-reader-icon .icon-swap.icon-swap-combat,
  .card-reader-icon .icon-swap.icon-swap-building,
  .card-reader-icon .icon-swap.icon-swap-goal,
  .card-reader-icon .icon-swap.icon-swap-expect {
    width: clamp(2.55rem, 11.5vmin, 4.2rem) !important;
  }

  .card-reader-panel h2 {
    font-size: clamp(0.98rem, 4.6vmin, 1.55rem) !important;
    margin-bottom: 0.25rem !important;
  }

  .card-reader-body {
    width: 76% !important;
    max-width: 76% !important;
  }

  .card-reader-body p {
    font-size: clamp(0.69rem, 2.85vmin, 0.9rem) !important;
    line-height: 1.36 !important;
  }
}

.sketch-icon-image {
  min-height: clamp(4.6rem, 6vw, 5.8rem) !important;
}

.sketch-icon .icon-swap {
  width: clamp(4.6rem, 6vw, 5.8rem) !important;
  aspect-ratio: 1 / 1 !important;
}

.card-reader-icon .icon-swap {
  width: clamp(3.25rem, 8.2vmin, 5.35rem) !important;
  aspect-ratio: 1 / 1 !important;
}

.sketch-icon .icon-swap-img,
.sketch-info-box:hover .icon-swap-img,
.sketch-info-box:focus-within .icon-swap-img {
  scale: 1 !important;
  transform-origin: center center !important;
}

.sketch-info-box:hover .sketch-icon,
.sketch-info-box:focus-within .sketch-icon,
.sketch-icon:hover {
  transform: translateY(-0.03em) !important;
}

.sketch-info-box:hover .icon-swap,
.sketch-info-box:focus-within .icon-swap,
.sketch-info-box:hover .icon-swap-img,
.sketch-info-box:focus-within .icon-swap-img,
.sketch-icon:hover .icon-swap,
.sketch-icon:hover .icon-swap-img {
  transform: none !important;
}

.sketch-info-box:hover .sketch-icon .icon-swap,
.sketch-info-box:focus-within .sketch-icon .icon-swap,
.sketch-icon:hover .icon-swap {
  animation: goomInfoIconHoverPulse 540ms cubic-bezier(0.18, 0.82, 0.25, 1) both !important;
  transform-origin: center center !important;
}

.sketch-info-box:hover .icon-swap-sketch,
.sketch-info-box:focus-within .icon-swap-sketch {
  visibility: visible !important;
  opacity: 0 !important;
  animation: goomBoxSketchSwapClean 360ms ease both !important;
}

.sketch-info-box:hover .icon-swap-color,
.sketch-info-box:focus-within .icon-swap-color {
  visibility: visible !important;
  opacity: 1 !important;
  animation: goomBoxColorSwapClean 420ms ease 60ms both !important;
}

@media (prefers-reduced-motion: reduce) {
  .sketch-info-box:hover .sketch-icon .icon-swap,
  .sketch-info-box:focus-within .sketch-icon .icon-swap,
  .sketch-icon:hover .icon-swap,
  .sketch-info-box:hover .icon-swap-sketch,
  .sketch-info-box:focus-within .icon-swap-sketch,
  .sketch-info-box:hover .icon-swap-color,
  .sketch-info-box:focus-within .icon-swap-color {
    animation: none !important;
  }

  .sketch-info-box:hover .icon-swap-sketch,
  .sketch-info-box:focus-within .icon-swap-sketch {
    opacity: 0 !important;
  }

  .sketch-info-box:hover .icon-swap-color,
  .sketch-info-box:focus-within .icon-swap-color {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 760px), (max-height: 620px) {
  .card-reader-icon .icon-swap {
    width: clamp(2.8rem, 14vmin, 4.6rem) !important;
  }
}

@media (max-width: 420px), (max-height: 560px) {
  .card-reader-icon .icon-swap {
    width: clamp(2.45rem, 12vmin, 3.9rem) !important;
  }
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  padding-top: clamp(0.85rem, 3.6vmin, 2.15rem) !important;
  padding-bottom: clamp(3.15rem, 9.6vmin, 6.35rem) !important;
}

.card-reader-icon {
  margin-top: 0 !important;
  margin-bottom: clamp(0.02rem, 0.45vmin, 0.22rem) !important;
}

.card-reader-icon .icon-swap,
.card-reader-icon .icon-swap.icon-swap-roleplay,
.card-reader-icon .icon-swap.icon-swap-world,
.card-reader-icon .icon-swap.icon-swap-character,
.card-reader-icon .icon-swap.icon-swap-journey,
.card-reader-icon .icon-swap.icon-swap-guild,
.card-reader-icon .icon-swap.icon-swap-citylife,
.card-reader-icon .icon-swap.icon-swap-islands,
.card-reader-icon .icon-swap.icon-swap-progress,
.card-reader-icon .icon-swap.icon-swap-combat,
.card-reader-icon .icon-swap.icon-swap-building,
.card-reader-icon .icon-swap.icon-swap-goal,
.card-reader-icon .icon-swap.icon-swap-expect {
  width: clamp(3.75rem, 9.6vmin, 6.05rem) !important;
}

.card-reader-panel h2 {
  margin-bottom: clamp(0.2rem, 0.8vmin, 0.52rem) !important;
}

.card-reader-body {
  padding-bottom: clamp(0.9rem, 2.2vmin, 1.45rem) !important;
}

@media (max-width: 760px), (max-height: 620px) {
  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    padding-top: clamp(0.65rem, 2.7vmin, 1.25rem) !important;
    padding-bottom: clamp(2.65rem, 9.8vmin, 4.85rem) !important;
  }

  .card-reader-icon .icon-swap,
  .card-reader-icon .icon-swap.icon-swap-roleplay,
  .card-reader-icon .icon-swap.icon-swap-world,
  .card-reader-icon .icon-swap.icon-swap-character,
  .card-reader-icon .icon-swap.icon-swap-journey,
  .card-reader-icon .icon-swap.icon-swap-guild,
  .card-reader-icon .icon-swap.icon-swap-citylife,
  .card-reader-icon .icon-swap.icon-swap-islands,
  .card-reader-icon .icon-swap.icon-swap-progress,
  .card-reader-icon .icon-swap.icon-swap-combat,
  .card-reader-icon .icon-swap.icon-swap-building,
  .card-reader-icon .icon-swap.icon-swap-goal,
  .card-reader-icon .icon-swap.icon-swap-expect {
    width: clamp(3rem, 14vmin, 4.9rem) !important;
  }
}

@media (max-width: 420px), (max-height: 560px) {
  .card-reader-icon .icon-swap,
  .card-reader-icon .icon-swap.icon-swap-roleplay,
  .card-reader-icon .icon-swap.icon-swap-world,
  .card-reader-icon .icon-swap.icon-swap-character,
  .card-reader-icon .icon-swap.icon-swap-journey,
  .card-reader-icon .icon-swap.icon-swap-guild,
  .card-reader-icon .icon-swap.icon-swap-citylife,
  .card-reader-icon .icon-swap.icon-swap-islands,
  .card-reader-icon .icon-swap.icon-swap-progress,
  .card-reader-icon .icon-swap.icon-swap-combat,
  .card-reader-icon .icon-swap.icon-swap-building,
  .card-reader-icon .icon-swap.icon-swap-goal,
  .card-reader-icon .icon-swap.icon-swap-expect {
    width: clamp(2.65rem, 13vmin, 4.15rem) !important;
  }
}

.card-reader-panel,
.card-reader.is-open .card-reader-panel {
  padding-top: clamp(0.7rem, 2.9vmin, 1.7rem) !important;
  padding-bottom: clamp(4.6rem, 13.5vmin, 7.65rem) !important;
}

.card-reader-icon {
  margin-top: 0 !important;
  margin-bottom: clamp(0rem, 0.35vmin, 0.18rem) !important;
  transform: translateY(-0.25rem) !important;
}

.card-reader-panel h2 {
  margin-bottom: clamp(0.12rem, 0.62vmin, 0.42rem) !important;
  transform: translateY(-0.18rem) !important;
}

.card-reader-body {
  flex: 0 1 auto !important;
  max-height: clamp(10.2rem, 38dvh, 15.7rem) !important;
  padding-bottom: clamp(0.08rem, 0.65vmin, 0.38rem) !important;
  transform: translateY(-0.12rem) !important;
}

@media (max-width: 760px), (max-height: 620px) {
  .card-reader-panel,
  .card-reader.is-open .card-reader-panel {
    padding-top: clamp(0.55rem, 2.3vmin, 1.05rem) !important;
    padding-bottom: clamp(3.65rem, 13vmin, 5.6rem) !important;
  }

  .card-reader-icon {
    transform: translateY(-0.18rem) !important;
  }

  .card-reader-panel h2 {
    transform: translateY(-0.14rem) !important;
  }

  .card-reader-body {
    max-height: clamp(8.4rem, 34dvh, 12.8rem) !important;
    transform: translateY(-0.08rem) !important;
  }
}

@media (max-width: 420px), (max-height: 560px) {
  .card-reader-body {
    max-height: clamp(7.25rem, 32dvh, 10.4rem) !important;
  }
}

.card-reader-panel .icon-swap-sketch {
  mix-blend-mode: lighten !important;
  background: transparent !important;
}

.card-reader-panel .icon-swap-color {
  mix-blend-mode: normal !important;
}

.card-reader-panel .card-reader-icon.has-image-icon .icon-swap-sketch {
  mix-blend-mode: lighten !important;
  background: transparent !important;
}

.card-reader-panel .card-reader-icon.has-image-icon .icon-swap-color {
  mix-blend-mode: normal !important;
}

.card-reader-icon .card-reader-screen-icon {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.card-reader-icon .card-reader-sketch-screen,
.card-reader-icon .card-reader-color-screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  user-select: none !important;
  pointer-events: none !important;
  background: transparent !important;
  transition: opacity 520ms ease,
    visibility 520ms ease,
    transform 520ms ease !important;
}

.card-reader-icon .card-reader-sketch-screen {
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.08) contrast(1.08) !important;
}

.card-reader-icon .card-reader-color-screen {
  z-index: 2 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.card-reader-panel:hover .card-reader-icon .card-reader-sketch-screen {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-2px) !important;
}

.card-reader-panel:hover .card-reader-icon .card-reader-color-screen {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-1px) !important;
}

.card-reader-icon .card-reader-screen-icon,
.card-reader-icon .card-reader-screen-icon::before,
.card-reader-icon .card-reader-screen-icon::after {
  background-color: transparent !important;
}

.goom-svg-filters {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.card-reader-icon .card-reader-sketch-screen,
.card-reader-panel:hover .card-reader-icon .card-reader-sketch-screen {
  mix-blend-mode: normal !important;
  background: transparent !important;
  filter: url("#goomSketchTransparentBlack") brightness(1.08) contrast(1.08) !important;
}

.card-reader-icon .card-reader-color-screen,
.card-reader-panel:hover .card-reader-icon .card-reader-color-screen {
  mix-blend-mode: normal !important;
  filter: none !important;
  background: transparent !important;
}

.card-reader-icon.has-image-icon img.card-reader-sketch-screen {
  background-color: transparent !important;
}

.card-reader-icon .card-reader-sketch-screen,
.card-reader-panel:hover .card-reader-icon .card-reader-sketch-screen {
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: url(#goomSketchTransparentBlack) brightness(1.06) contrast(1.04) !important;
}

.hero-play-cta:hover,
.hero-play-cta:focus-visible {
  transform: none !important;
}

.hero-play-cta:hover .hero-play-icon,
.hero-play-cta:focus-visible .hero-play-icon {
  transform: rotate(-2deg) !important;
}

.hero-play-cta:hover .hero-play-text,
.hero-play-cta:focus-visible .hero-play-text {
  transform: translateX(0) !important;
}

.arc-showcase-copy {
  width: clamp(42rem, 52vw, 56rem) !important;
  top: 48% !important;
}

.arc-copy-inner {
  width: 100% !important;
  max-width: none !important;
}

.arc-copy-inner h2 {
  color: #536477 !important;
  white-space: nowrap !important;
  font-size: clamp(1.25rem, 1.65vw, 1.72rem) !important;
  line-height: 1.08 !important;
  margin-bottom: 0.85rem !important;
}

.arc-copy-inner p {
  width: 100% !important;
  max-width: none !important;
  font-size: clamp(0.82rem, 0.92vw, 0.96rem) !important;
  line-height: 1.42 !important;
  margin-bottom: 0.72rem !important;
}

.arc-copy-points {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0.8rem !important;
}

.arc-copy-points li {
  font-size: clamp(0.82rem, 0.92vw, 0.94rem) !important;
  line-height: 1.32 !important;
  margin-bottom: 0.28rem !important;
}

.arc-lore-cta {
  margin-top: 0.75rem !important;
}

@media (max-width: 1200px) {
  .arc-showcase-copy {
    width: min(58vw, calc(100vw - 2.5rem)) !important;
    padding-left: clamp(1rem, 3.8vw, 2.4rem) !important;
  }

  .arc-copy-inner h2 {
    font-size: clamp(1.05rem, 1.75vw, 1.35rem) !important;
  }

  .arc-copy-inner p,
  .arc-copy-points li {
    font-size: clamp(0.76rem, 1.12vw, 0.9rem) !important;
  }
}

@media (max-width: 760px) {
  .arc-showcase-copy {
    width: calc(100vw - 2rem) !important;
    top: 50% !important;
    padding-left: 1rem !important;
  }

  .arc-copy-inner h2 {
    white-space: normal !important;
  }
}

.arc-showcase-section:hover .arc-scene-img-color,
.arc-showcase-section:focus-within .arc-scene-img-color {
  opacity: 1 !important;
}

.arc-showcase-section:hover .arc-lantern-anchor,
.arc-showcase-section:focus-within .arc-lantern-anchor {
  opacity: 1 !important;
}

.arc-showcase-section {
  --arc-magic-start-left: 51.8%;
  --arc-magic-start-top: 52%;
  --arc-spark-flight-duration: 5800ms;
}

.arc-showcase-section .arc-showcase-copy {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) translateX(-1.2rem) !important;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2350ms cubic-bezier(0.19, 1, 0.22, 1),
    opacity 1350ms ease,
    transform 1600ms ease !important;
}

.arc-showcase-section.is-arc-text-revealed .arc-showcase-copy {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) translateX(0) !important;
  clip-path: inset(0 0 0 0);
}

.arc-showcase-section .arc-scene {
  cursor: default !important;
}

.arc-showcase-section .arc-scene-img {
  transition: opacity 3600ms ease,
    filter 4600ms ease,
    transform 4200ms ease !important;
}

.arc-showcase-section .arc-scene-img-color,
.arc-showcase-section:hover .arc-scene-img-color,
.arc-showcase-section:focus-within .arc-scene-img-color {
  opacity: 1 !important;
  filter: brightness(0.3) contrast(1.14) saturate(0.86) !important;
}

.arc-showcase-section .arc-lantern-anchor,
.arc-showcase-section:hover .arc-lantern-anchor,
.arc-showcase-section:focus-within .arc-lantern-anchor {
  opacity: 0 !important;
  transition: opacity 3200ms ease,
    filter 3800ms ease !important;
}

.arc-showcase-section.is-arc-lantern-lit .arc-lantern-anchor,
.arc-showcase-section.is-arc-lantern-lit:hover .arc-lantern-anchor,
.arc-showcase-section.is-arc-lantern-lit:focus-within .arc-lantern-anchor {
  opacity: 1 !important;
}

.arc-magic-light {
  position: absolute;
  left: var(--arc-magic-start-left);
  top: var(--arc-magic-start-top);
  z-index: 5;
  width: clamp(4.1rem, 7.2vw, 7.4rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: drop-shadow(0 0 1.3rem rgba(255, 143, 38, 0.82));
  opacity: 1;
  isolation: isolate;
}

.arc-magic-light::before,
.arc-magic-light::after,
.arc-magic-light-trail,
.arc-magic-light-core {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.arc-magic-light::before {
  background: radial-gradient(
    circle,
    rgba(255, 250, 218, 1) 0%,
    rgba(255, 196, 86, 0.95) 18%,
    rgba(255, 123, 38, 0.58) 43%,
    rgba(160, 67, 19, 0.24) 63%,
    transparent 78%
  );
  filter: blur(0.18rem);
  animation: arcMagicPulse 2.35s ease-in-out infinite;
}

.arc-magic-light::after {
  inset: 18%;
  border: 1px solid rgba(255, 210, 126, 0.62);
  box-shadow: 0 0 0.7rem rgba(255, 154, 48, 0.72),
    inset 0 0 0.8rem rgba(255, 244, 196, 0.5);
  animation: arcMagicRing 3.2s linear infinite;
}

.arc-magic-light-trail {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: clamp(6.2rem, 12vw, 13.2rem);
  height: clamp(1.55rem, 3vw, 3.2rem);
  border-radius: 999px;
  background: radial-gradient(
      ellipse at 92% 50%,
      rgba(255, 244, 190, 0.78) 0%,
      rgba(255, 174, 68, 0.48) 26%,
      rgba(255, 114, 31, 0.2) 52%,
      transparent 78%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 112, 30, 0.1) 24%,
      rgba(255, 188, 86, 0.38) 70%,
      rgba(255, 245, 190, 0.72) 100%
    );
  filter: blur(0.18rem);
  mix-blend-mode: screen;
  opacity: 0;
  display: none !important;
  transform: translate(-92%, -50%) rotate(0deg) scaleX(0.3);
  transform-origin: 92% 50%;
  z-index: 0;
}

.arc-magic-light::before,
.arc-magic-light::after,
.arc-magic-light-core {
  z-index: 2;
}

.arc-magic-light-core {
  inset: 32%;
  background: radial-gradient(
    circle,
    #fffaf0 0%,
    #ffd078 38%,
    rgba(255, 121, 38, 0.76) 70%,
    transparent 100%
  );
  box-shadow: 0 0 1.1rem rgba(255, 244, 201, 0.95),
    0 0 2rem rgba(255, 126, 38, 0.78);
}

.arc-magic-light:hover,
.arc-magic-light:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 1.65rem rgba(255, 181, 72, 0.98));
}

.arc-showcase-section.is-arc-spark-flying .arc-magic-light {
  pointer-events: none;
  animation: arcMagicFlyToLantern var(--arc-spark-flight-duration, 5800ms)
    cubic-bezier(0.2, 0.7, 0.24, 1) forwards;
}

.arc-showcase-section.is-arc-lantern-lit .arc-magic-light {
  opacity: 0;
  visibility: hidden;
}

.arc-showcase-section.is-arc-spark-flying .arc-magic-light-trail {
  animation: arcMagicTrailFollow var(--arc-spark-flight-duration, 5800ms)
    cubic-bezier(0.2, 0.7, 0.24, 1) forwards;
}

.arc-showcase-section.is-arc-lantern-lit .arc-magic-light-trail {
  opacity: 0;
}

.arc-magic-light-trail,
.arc-showcase-section.is-arc-spark-flying .arc-magic-light-trail,
.arc-showcase-section.is-arc-lantern-lit .arc-magic-light-trail {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .arc-magic-light,
  .arc-magic-light::before,
  .arc-magic-light::after,
  .arc-magic-light-trail,
  .arc-lantern-glow {
    animation: none !important;
  }

  .arc-showcase-section .arc-showcase-copy,
  .arc-showcase-section .arc-scene-img,
  .arc-showcase-section .arc-lantern-anchor {
    transition-duration: 1ms !important;
  }
}

.arc-showcase-section {
  --arc-spark-land-top: calc(var(--lantern-top) + 2.2%);
}

.arc-showcase-section:not(.is-arc-awakened) .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene-img-color {
  opacity: 0 !important;
}

.arc-scene {
  --lantern-left: 84.65%;
}

.arc-showcase-section {
  --arc-spark-land-top: calc(var(--lantern-top) + 5px);
}

@media (max-width: 640px) {
  .arc-scene {
    --lantern-left: 82.85%;
  }

  .arc-showcase-section {
    --arc-spark-land-top: calc(var(--lantern-top) + 3px);
  }
}

.arc-scene {
  --lantern-left: 85.65%;
  --arc-spark-land-left: calc(var(--lantern-left) + 0.12%);
  --arc-spark-land-top: calc(var(--lantern-top) + 0.22rem);
}

@media (max-width: 640px) {
  .arc-scene {
    --lantern-left: 84%;
    --arc-spark-land-left: calc(var(--lantern-left) + 0.1%);
    --arc-spark-land-top: calc(var(--lantern-top) + 0.16rem);
  }
}

.arc-scene {
  --lantern-left: 86.25%;
  --arc-spark-land-left: calc(var(--lantern-left) + 0.12%);
}

@media (max-width: 640px) {
  .arc-scene {
    --lantern-left: 84.55%;
    --arc-spark-land-left: calc(var(--lantern-left) + 0.1%);
  }
}

.arc-scene {
  --lantern-left: 87.25%;
  --arc-spark-land-left: calc(var(--lantern-left) + 0.12%);
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-sequence-started):not(
    .is-arc-awakened
  ):focus-within
  .arc-scene-img-color {
  opacity: 0 !important;
  filter: brightness(0) contrast(1) saturate(0) !important;
}

@media (max-width: 640px) {
  .arc-scene {
    --lantern-left: 85.55%;
    --arc-spark-land-left: calc(var(--lantern-left) + 0.1%);
  }
}

.arc-scene {
  --lantern-left: 88.25%;
  --arc-spark-land-left: calc(var(--lantern-left) + 0.12%);
}

@media (max-width: 640px) {
  .arc-scene {
    --lantern-left: 86.55%;
    --arc-spark-land-left: calc(var(--lantern-left) + 0.1%);
  }
}

.arc-scene-media {
  background: #000 !important;
  overflow: hidden !important;
}

.arc-scene .arc-scene-img-color {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened):focus-within
  .arc-scene-img-color {
  opacity: 1 !important;
  filter: brightness(0.34) contrast(1.13) saturate(0.88) !important;
}

.arc-scene-media {
  aspect-ratio: 16 / 9;
  min-height: clamp(18rem, 56.25vw, 56.25rem);
}

.arc-scene .arc-scene-img-color {
  aspect-ratio: 16 / 9;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-sequence-started):not(
    .is-arc-awakened
  ):focus-within
  .arc-scene-img-color {
  opacity: 1 !important;
  filter: brightness(0.38) contrast(1.12) saturate(0.88) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-scene-media {
  background: #000 !important;
}

.arc-showcase-section .arc-magic-light {
  z-index: 4 !important;
}

.arc-scene-media {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

.arc-scene .arc-scene-img-color {
  aspect-ratio: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

.arc-scene {
  --lantern-left: calc(88.25% - 5px);
  --lantern-top: calc(15.28% - 5px);
  --arc-spark-land-left: calc(var(--lantern-left) + 0.12%);
  --arc-spark-land-top: calc(var(--lantern-top) + 0.22rem);
}

@media (max-width: 640px) {
  .arc-scene {
    --lantern-left: calc(86.55% - 4px);
    --lantern-top: calc(14.45% - 4px);
    --arc-spark-land-left: calc(var(--lantern-left) + 0.1%);
    --arc-spark-land-top: calc(var(--lantern-top) + 0.16rem);
  }
}

.arc-scene {
  --lantern-left: calc(88.25% - 7px);
  --lantern-top: calc(15.28% - 3px);
  --arc-spark-land-left: calc(var(--lantern-left) + 0.12%);
  --arc-spark-land-top: calc(var(--lantern-top) + 0.22rem);
}

@media (max-width: 640px) {
  .arc-scene {
    --lantern-left: calc(86.55% - 6px);
    --lantern-top: calc(14.45% - 2px);
    --arc-spark-land-left: calc(var(--lantern-left) + 0.1%);
    --arc-spark-land-top: calc(var(--lantern-top) + 0.16rem);
  }
}

.arc-showcase-section:not(.is-arc-awakened) .arc-scene-media,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene-media,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene-media {
  background: #000 !important;
}

.arc-showcase-section:not(.is-arc-awakened) .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened):focus-within
  .arc-scene-img-color {
  opacity: 0 !important;
  filter: brightness(0) contrast(1) saturate(0) !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-color {
  opacity: 1 !important;
  filter: brightness(1.02) contrast(1.04) saturate(1.05) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light {
  animation: arcMagicIdleFloat 4.9s ease-in-out infinite;
  will-change: transform;
}

.arc-showcase-section:not(.is-arc-awakened) .arc-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #000;
  opacity: 1;
}

.arc-showcase-section.is-arc-awakened .arc-scene::before {
  opacity: 0;
  visibility: hidden;
}

.arc-showcase-section:not(.is-arc-awakened) .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene-img-color {
  opacity: 0 !important;
  filter: brightness(0) contrast(1) saturate(0) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light {
  animation: arcMagicIdleFloat 5.8s ease-in-out infinite !important;
  will-change: transform;
}

.arc-magic-light-trail {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(7.2rem, 12vw, 13.8rem) !important;
  height: clamp(3.6rem, 6.4vw, 6.8rem) !important;
  border-radius: 999px !important;
  opacity: 0.54 !important;
  z-index: 1 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  transform: translate(-86%, -50%) rotate(-8deg) scaleX(0.72) !important;
  transform-origin: 88% 50% !important;
  filter: blur(0.03rem) drop-shadow(0 0 0.55rem rgba(255, 167, 55, 0.75)) !important;
  background: radial-gradient(
      circle at 92% 50%,
      rgba(255, 252, 220, 0.9) 0 4%,
      rgba(255, 201, 92, 0.52) 5% 9%,
      transparent 12%
    ),
    radial-gradient(
      circle at 74% 32%,
      rgba(255, 230, 148, 0.92) 0 2.5%,
      rgba(255, 151, 47, 0.58) 3% 7%,
      transparent 10%
    ),
    radial-gradient(
      circle at 60% 66%,
      rgba(255, 214, 104, 0.88) 0 2.2%,
      rgba(255, 136, 36, 0.48) 3% 6%,
      transparent 9%
    ),
    radial-gradient(
      circle at 44% 40%,
      rgba(255, 246, 190, 0.78) 0 1.9%,
      rgba(255, 159, 45, 0.42) 3% 6%,
      transparent 9%
    ),
    radial-gradient(
      circle at 26% 58%,
      rgba(255, 216, 105, 0.62) 0 1.6%,
      rgba(255, 122, 33, 0.32) 3% 6%,
      transparent 9%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 109, 23, 0.08) 28%,
      rgba(255, 171, 50, 0.22) 65%,
      rgba(255, 233, 156, 0.36) 100%
    ) !important;
  background-repeat: no-repeat !important;
  animation: arcMagicSparkleTwinkle 0.92s ease-in-out infinite alternate !important;
}

.arc-magic-light-trail::before,
.arc-magic-light-trail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
}

.arc-magic-light-trail::before {
  background: radial-gradient(
      circle at 84% 22%,
      rgba(255, 255, 232, 0.95) 0 1.6%,
      rgba(255, 178, 61, 0.72) 2.4% 4.4%,
      transparent 6.5%
    ),
    radial-gradient(
      circle at 68% 78%,
      rgba(255, 231, 140, 0.86) 0 1.4%,
      rgba(255, 126, 34, 0.54) 2.2% 4.2%,
      transparent 6.5%
    ),
    radial-gradient(
      circle at 49% 20%,
      rgba(255, 246, 192, 0.72) 0 1.2%,
      rgba(255, 146, 42, 0.44) 2.1% 4%,
      transparent 6.3%
    ),
    radial-gradient(
      circle at 31% 75%,
      rgba(255, 213, 96, 0.62) 0 1.2%,
      rgba(255, 117, 28, 0.34) 2.1% 4%,
      transparent 6.2%
    );
  opacity: 0.8;
  animation: arcMagicSparkleScatterA 1.18s linear infinite;
}

.arc-magic-light-trail::after {
  background: radial-gradient(
      circle at 78% 60%,
      rgba(255, 246, 205, 0.86) 0 1.3%,
      rgba(255, 164, 48, 0.58) 2.2% 4.1%,
      transparent 6.5%
    ),
    radial-gradient(
      circle at 56% 47%,
      rgba(255, 220, 113, 0.72) 0 1.2%,
      rgba(255, 123, 33, 0.44) 2.1% 4%,
      transparent 6.2%
    ),
    radial-gradient(
      circle at 36% 29%,
      rgba(255, 240, 174, 0.64) 0 1.1%,
      rgba(255, 143, 40, 0.36) 2% 3.8%,
      transparent 6%
    ),
    radial-gradient(
      circle at 18% 48%,
      rgba(255, 197, 72, 0.52) 0 1%,
      rgba(255, 113, 26, 0.28) 2% 3.7%,
      transparent 6%
    );
  opacity: 0.55;
  animation: arcMagicSparkleScatterB 1.46s linear infinite;
}

.arc-showcase-section.is-arc-spark-flying .arc-magic-light-trail {
  opacity: 0.96 !important;
  transform: translate(-90%, -50%) rotate(-10deg) scaleX(1) !important;
  animation: arcMagicSparkTrailOpacity var(--arc-spark-flight-duration, 5800ms) linear
      forwards,
    arcMagicSparkleTwinkle 0.58s ease-in-out infinite alternate !important;
}

.arc-showcase-section.is-arc-lantern-lit .arc-magic-light-trail {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
    .arc-magic-light,
  .arc-magic-light-trail,
  .arc-magic-light-trail::before,
  .arc-magic-light-trail::after {
    animation: none !important;
  }
}

.arc-showcase-section:not(.is-arc-awakened) .arc-showcase-visual,
.arc-showcase-section:not(.is-arc-awakened) .arc-scene,
.arc-showcase-section:not(.is-arc-awakened) .arc-scene-media,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-showcase-visual,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene-media,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-showcase-visual,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene-media {
  background: #000 !important;
}

.arc-showcase-section:not(.is-arc-awakened) .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened):focus-within
  .arc-scene-img-color {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
  transition: none !important;
}

.arc-showcase-section:not(.is-arc-awakened) .arc-scene-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  background: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-media::after,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-media::after,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-media::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-color {
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(1.02) contrast(1.04) saturate(1.05) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light {
  animation: arcMagicIdleFloat 6.2s ease-in-out infinite !important;
  will-change: transform;
}

.arc-scene {
  --arc-spark-land-top: calc(var(--lantern-top) + 0.22rem + 5px);
}

@media (max-width: 640px) {
  .arc-scene {
    --arc-spark-land-top: calc(var(--lantern-top) + 0.16rem + 4px);
  }
}

.arc-magic-light-trail,
.arc-showcase-section.is-arc-spark-flying .arc-magic-light-trail,
.arc-showcase-section.is-arc-lantern-lit .arc-magic-light-trail {
  display: block !important;
}

.arc-magic-light-trail {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(4.8rem, 7.4vw, 7.9rem) !important;
  height: clamp(4.8rem, 7.4vw, 7.9rem) !important;
  border-radius: 999rem !important;
  opacity: 0.78 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  filter: none !important;
  background: none !important;
  animation: none !important;
}

.arc-magic-light-trail::before,
.arc-magic-light-trail::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 0 0.18rem rgba(255, 230, 128, 0.64)) !important;
  will-change: transform, opacity !important;
}

.arc-magic-light-trail::before {
  background-image: radial-gradient(
      circle,
      rgba(255, 252, 222, 1) 0 1.25px,
      transparent 2.35px
    ),
    radial-gradient(
      circle,
      rgba(255, 212, 104, 0.92) 0 1.15px,
      transparent 2.45px
    ),
    radial-gradient(circle, rgba(255, 157, 54, 0.82) 0 1px, transparent 2.2px),
    radial-gradient(
      circle,
      rgba(255, 242, 174, 0.82) 0 0.85px,
      transparent 1.95px
    ),
    radial-gradient(
      circle,
      rgba(255, 187, 74, 0.74) 0 1.18px,
      transparent 2.55px
    ),
    radial-gradient(
      circle,
      rgba(255, 249, 211, 0.82) 0 0.75px,
      transparent 1.65px
    ),
    radial-gradient(
      circle,
      rgba(255, 171, 52, 0.62) 0 0.58px,
      transparent 1.25px
    ),
    radial-gradient(
      circle,
      rgba(255, 238, 162, 0.58) 0 0.48px,
      transparent 1.1px
    );
  background-size: 0.62rem 0.62rem,
    0.72rem 0.72rem,
    0.54rem 0.54rem,
    0.64rem 0.64rem,
    0.76rem 0.76rem,
    0.48rem 0.48rem,
    0.3rem 0.3rem,
    0.24rem 0.24rem;
  background-position: 18% 48%,
    33% 27%,
    48% 62%,
    63% 36%,
    76% 52%,
    44% 16%,
    27% 66%,
    58% 28%;
  animation: arcAkiSparkleMoveA 2.75s cubic-bezier(0.22, 0.61, 0.36, 1) infinite !important;
}

.arc-magic-light-trail::after {
  background-image: radial-gradient(
      circle,
      rgba(255, 253, 232, 0.96) 0 1.18px,
      transparent 2.35px
    ),
    radial-gradient(
      circle,
      rgba(255, 198, 83, 0.82) 0 1.28px,
      transparent 2.7px
    ),
    radial-gradient(
      circle,
      rgba(255, 139, 42, 0.74) 0 0.95px,
      transparent 2.2px
    ),
    radial-gradient(
      circle,
      rgba(255, 238, 166, 0.78) 0 0.85px,
      transparent 1.95px
    ),
    radial-gradient(
      circle,
      rgba(255, 219, 117, 0.72) 0 1.25px,
      transparent 2.65px
    ),
    radial-gradient(
      circle,
      rgba(255, 250, 220, 0.76) 0 0.7px,
      transparent 1.6px
    ),
    radial-gradient(
      circle,
      rgba(255, 172, 51, 0.56) 0 0.52px,
      transparent 1.18px
    ),
    radial-gradient(circle, rgba(255, 229, 140, 0.52) 0 0.44px, transparent 1px);
  background-size: 0.58rem 0.58rem,
    0.78rem 0.78rem,
    0.52rem 0.52rem,
    0.68rem 0.68rem,
    0.8rem 0.8rem,
    0.42rem 0.42rem,
    0.28rem 0.28rem,
    0.22rem 0.22rem;
  background-position: 22% 66%,
    39% 45%,
    56% 22%,
    69% 66%,
    80% 31%,
    50% 57%,
    36% 19%,
    63% 25%;
  animation: arcAkiSparkleMoveB 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    infinite -0.88s !important;
}

.arc-showcase-section.is-arc-spark-flying .arc-magic-light-trail {
  opacity: 0.9 !important;
  animation: arcAkiSparkleFadeOut var(--arc-spark-flight-duration, 5800ms)
    linear forwards !important;
}

.arc-showcase-section.is-arc-lantern-lit .arc-magic-light-trail,
.arc-showcase-section.is-arc-lantern-lit .arc-magic-light-trail::before,
.arc-showcase-section.is-arc-lantern-lit .arc-magic-light-trail::after {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .arc-magic-light-trail,
  .arc-magic-light-trail::before,
  .arc-magic-light-trail::after {
    animation: none !important;
  }
}

.arc-scene {
  --arc-spark-land-top: calc(var(--lantern-top) + 0.22rem + 9px);
}

@media (max-width: 640px) {
  .arc-scene {
    --arc-spark-land-top: calc(var(--lantern-top) + 0.16rem + 8px);
  }
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light {
  filter: drop-shadow(0 0 1.2rem rgba(226, 232, 242, 0.78)) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light:hover,
.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light:focus-visible {
  filter: drop-shadow(0 0 1.55rem rgba(244, 247, 252, 0.92)) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light::before {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(238, 242, 248, 0.9) 20%,
    rgba(190, 199, 213, 0.44) 45%,
    rgba(108, 116, 132, 0.18) 64%,
    transparent 78%
  ) !important;
  filter: blur(0.16rem) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light::after {
  border-color: rgba(231, 236, 246, 0.58) !important;
  box-shadow: 0 0 0.62rem rgba(220, 228, 240, 0.64),
    inset 0 0 0.72rem rgba(255, 255, 255, 0.42) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light-core {
  background: radial-gradient(
    circle,
    #ffffff 0%,
    #edf1f7 38%,
    rgba(180, 190, 205, 0.74) 70%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.88),
    0 0 1.75rem rgba(202, 211, 226, 0.66) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light-trail::before,
.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light-trail::after {
  filter: drop-shadow(0 0 0.16rem rgba(235, 240, 248, 0.58)) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light-trail::before {
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.98) 0 1.25px,
      transparent 2.35px
    ),
    radial-gradient(
      circle,
      rgba(232, 237, 246, 0.9) 0 1.15px,
      transparent 2.45px
    ),
    radial-gradient(circle, rgba(176, 186, 202, 0.76) 0 1px, transparent 2.2px),
    radial-gradient(
      circle,
      rgba(246, 248, 252, 0.8) 0 0.85px,
      transparent 1.95px
    ),
    radial-gradient(
      circle,
      rgba(207, 216, 230, 0.72) 0 1.18px,
      transparent 2.55px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.8) 0 0.75px,
      transparent 1.65px
    ),
    radial-gradient(
      circle,
      rgba(174, 184, 200, 0.58) 0 0.58px,
      transparent 1.25px
    ),
    radial-gradient(
      circle,
      rgba(230, 236, 246, 0.56) 0 0.48px,
      transparent 1.1px
    ) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-awakened)
  .arc-magic-light-trail::after {
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.94) 0 1.18px,
      transparent 2.35px
    ),
    radial-gradient(
      circle,
      rgba(218, 226, 238, 0.8) 0 1.28px,
      transparent 2.7px
    ),
    radial-gradient(
      circle,
      rgba(159, 171, 190, 0.68) 0 0.95px,
      transparent 2.2px
    ),
    radial-gradient(
      circle,
      rgba(241, 245, 250, 0.76) 0 0.85px,
      transparent 1.95px
    ),
    radial-gradient(
      circle,
      rgba(224, 231, 241, 0.7) 0 1.25px,
      transparent 2.65px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.74) 0 0.7px,
      transparent 1.6px
    ),
    radial-gradient(
      circle,
      rgba(175, 186, 205, 0.52) 0 0.52px,
      transparent 1.18px
    ),
    radial-gradient(circle, rgba(229, 235, 245, 0.5) 0 0.44px, transparent 1px) !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-img-color {
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0.82) contrast(1.06) saturate(1.02) !important;
  transition: opacity 1500ms ease,
    filter 1700ms ease !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-media::after,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-media::after,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-media::after {
  opacity: 0.72 !important;
  visibility: visible !important;
  transition: opacity 1500ms ease !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-media::after,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-media::after,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-media::after {
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity 1200ms ease !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-color {
  transition: opacity 1200ms ease,
    filter 1500ms ease !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-sequence-started):not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-sequence-started):not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):focus-within
  .arc-scene-img-color {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
  transition: none !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-img-color {
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0.86) contrast(1.05) saturate(0.98) !important;
  transition: opacity 5200ms ease,
    filter 5400ms ease !important;
}

.arc-showcase-section:not(.is-arc-image-revealing):not(.is-arc-awakened)
  .arc-scene-media::after {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-media::after,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-media::after,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-media::after {
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity 5350ms ease !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-media::after,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-media::after,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-media::after {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 900ms ease !important;
}

.arc-showcase-section .arc-lantern-anchor,
.arc-showcase-section:hover .arc-lantern-anchor,
.arc-showcase-section:focus-within .arc-lantern-anchor {
  opacity: 0 !important;
  transition: opacity 700ms ease,
    filter 850ms ease !important;
}

.arc-showcase-section.is-arc-sequence-started:not(.is-arc-lantern-lit)
  .arc-lantern-anchor,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-lantern-lit):hover
  .arc-lantern-anchor,
.arc-showcase-section.is-arc-sequence-started:not(
    .is-arc-lantern-lit
  ):focus-within
  .arc-lantern-anchor {
  opacity: 0.92 !important;
  filter: grayscale(1) brightness(0.28) contrast(1.2) !important;
}

.arc-showcase-section:not(.is-arc-lantern-lit) .arc-lantern-image {
  filter: grayscale(1) brightness(0.26) contrast(1.22) !important;
  opacity: 0.82 !important;
  transition: filter 900ms ease,
    opacity 900ms ease !important;
}

.arc-showcase-section:not(.is-arc-lantern-lit) .arc-lantern-glow {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.arc-showcase-section.is-arc-lantern-lit .arc-lantern-anchor,
.arc-showcase-section.is-arc-lantern-lit:hover .arc-lantern-anchor,
.arc-showcase-section.is-arc-lantern-lit:focus-within .arc-lantern-anchor {
  opacity: 1 !important;
  filter: none !important;
}

.arc-showcase-section.is-arc-lantern-lit .arc-lantern-image {
  filter: none !important;
  opacity: 1 !important;
}

.arc-showcase-section.is-arc-lantern-lit .arc-lantern-glow {
  opacity: 0.98 !important;
  visibility: visible !important;
  animation: arcLanternPulse 2.8s ease-in-out infinite,
    arcLanternFlicker 4.6s linear infinite !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-color {
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(1.02) contrast(1.04) saturate(1.05) !important;
  transition: opacity 900ms ease,
    filter 1000ms ease !important;
}

.arc-showcase-section .arc-scene-media {
  position: relative !important;
  background: #000 !important;
}

.arc-showcase-section .arc-scene-media::after,
.arc-showcase-section:not(.is-arc-awakened) .arc-scene-media::after,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-media::after,
.arc-showcase-section.is-arc-awakened .arc-scene-media::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transition: none !important;
}

.arc-showcase-section .arc-soft-reveal-cover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: block !important;
  pointer-events: none !important;
  background: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

.arc-showcase-section:not(.is-arc-image-revealing):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-image-revealing):not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-image-revealing):not(
    .is-arc-awakened
  ):focus-within
  .arc-scene-img-color {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
  transition: none !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying:not(.is-arc-awakened):focus-within
  .arc-scene-img-color {
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0.95) contrast(1.04) saturate(1) !important;
  transition: none !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-soft-reveal-cover {
  opacity: 1 !important;
  visibility: visible !important;
  animation: arcRealSoftRevealCover 5400ms cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards !important;
}

.arc-showcase-section.is-arc-awakened .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:hover .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:focus-within .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.arc-scene {
  --arc-spark-land-top: calc(var(--lantern-top) + 0.22rem + 13px);
}

@media (max-width: 640px) {
  .arc-scene {
    --arc-spark-land-top: calc(var(--lantern-top) + 0.16rem + 12px);
  }
}

.arc-showcase-section .arc-scene-media {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  background: #000 !important;
}

.arc-showcase-section .arc-scene::before,
.arc-showcase-section:not(.is-arc-awakened) .arc-scene::before,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene::before,
.arc-showcase-section.is-arc-awakened .arc-scene::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.arc-showcase-section .arc-scene-img-color {
  position: relative !important;
  z-index: 1 !important;
}

.arc-showcase-section:not(.is-arc-image-reveal-ready):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-image-reveal-ready):not(
    .is-arc-awakened
  ):hover
  .arc-scene-img-color,
.arc-showcase-section:not(.is-arc-image-reveal-ready):not(
    .is-arc-awakened
  ):focus-within
  .arc-scene-img-color {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
  transition: none !important;
}

.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):focus-within
  .arc-scene-img-color {
  opacity: 0 !important;
  visibility: visible !important;
  filter: brightness(0.78) contrast(1.05) saturate(0.98) !important;
  transition: opacity 5600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 5600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started.is-arc-image-revealing:not(
    .is-arc-awakened
  )
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying.is-arc-image-revealing:not(
    .is-arc-awakened
  )
  .arc-scene-img-color {
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0.9) contrast(1.04) saturate(0.99) !important;
  transition: opacity 5600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 5600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section .arc-soft-reveal-cover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: block !important;
  pointer-events: none !important;
  background: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: opacity 5600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-soft-reveal-cover,
.arc-showcase-section:not(.is-arc-image-reveal-ready):not(.is-arc-awakened)
  .arc-soft-reveal-cover {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 5600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: visible !important;
  animation: none !important;
  transition: opacity 5600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-awakened .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:hover .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:focus-within .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transition: opacity 900ms ease !important;
}

.arc-showcase-section .arc-magic-light {
  z-index: 8 !important;
}

.arc-showcase-section .arc-lantern-anchor {
  z-index: 7 !important;
}

.arc-scene {
  --arc-spark-land-top: calc(var(--lantern-top) + 0.22rem + 17px) !important;
}

@media (max-width: 640px) {
  .arc-scene {
    --arc-spark-land-top: calc(var(--lantern-top) + 0.16rem + 16px) !important;
  }
}

.arc-showcase-section .arc-soft-reveal-cover {
  transition: opacity 7600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-soft-reveal-cover,
.arc-showcase-section:not(.is-arc-image-reveal-ready):not(.is-arc-awakened)
  .arc-soft-reveal-cover {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 7600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity 7600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started.is-arc-image-revealing:not(
    .is-arc-awakened
  )
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying.is-arc-image-revealing:not(
    .is-arc-awakened
  )
  .arc-scene-img-color {
  transition: opacity 7600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 7600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-awakened .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:hover .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:focus-within .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: visible !important;
  animation: none !important;
  transition: opacity 1800ms ease !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-color {
  transition: opacity 1800ms ease,
    filter 1800ms ease !important;
}

.arc-scene {
  --arc-spark-land-top: calc(var(--lantern-top) + 0.22rem + 20px) !important;
}

@media (max-width: 640px) {
  .arc-scene {
    --arc-spark-land-top: calc(var(--lantern-top) + 0.16rem + 19px) !important;
  }
}

.arc-showcase-section .arc-soft-reveal-cover {
  transition: opacity 9600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-soft-reveal-cover,
.arc-showcase-section:not(.is-arc-image-reveal-ready):not(.is-arc-awakened)
  .arc-soft-reveal-cover {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 9600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity 9600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started.is-arc-image-revealing:not(
    .is-arc-awakened
  )
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying.is-arc-image-revealing:not(
    .is-arc-awakened
  )
  .arc-scene-img-color {
  transition: opacity 9600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 9600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-awakened .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:hover .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:focus-within .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: visible !important;
  animation: none !important;
  transition: opacity 2600ms ease !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-color {
  transition: opacity 2600ms ease,
    filter 2600ms ease !important;
}

.arc-showcase-section .arc-soft-reveal-cover {
  transition: opacity 12200ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-soft-reveal-cover,
.arc-showcase-section:not(.is-arc-image-reveal-ready):not(.is-arc-awakened)
  .arc-soft-reveal-cover {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 12200ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity 12200ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-reveal-ready:not(
    .is-arc-image-revealing
  ):not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened)
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):hover
  .arc-scene-img-color,
.arc-showcase-section.is-arc-image-revealing:not(.is-arc-awakened):focus-within
  .arc-scene-img-color,
.arc-showcase-section.is-arc-sequence-started.is-arc-image-revealing:not(
    .is-arc-awakened
  )
  .arc-scene-img-color,
.arc-showcase-section.is-arc-spark-flying.is-arc-image-revealing:not(
    .is-arc-awakened
  )
  .arc-scene-img-color {
  transition: opacity 12200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 12200ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section.is-arc-awakened .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:hover .arc-soft-reveal-cover,
.arc-showcase-section.is-arc-awakened:focus-within .arc-soft-reveal-cover {
  opacity: 0 !important;
  visibility: visible !important;
  animation: none !important;
  transition: opacity 4200ms ease !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-color {
  transition: opacity 4200ms ease,
    filter 4200ms ease !important;
}

@keyframes slowBackgroundMove {
  0% {
    transform: translate(-50%, -50%) translate3d(-0.8%, -0.5%, 0) scale(1.05);
  }

  100% {
    transform: translate(-50%, -50%) translate3d(0.8%, 0.5%, 0) scale(1.08);
  }
}

@keyframes arcLanternFlicker {
  0%,
  8%,
  14%,
  24%,
  36%,
  58%,
  100% {
    opacity: 0.94;
    filter: blur(13px);
  }

  10% {
    opacity: 0.72;
    filter: blur(11px);
  }

  12% {
    opacity: 1;
    filter: blur(14px);
  }

  27% {
    opacity: 0.82;
    filter: blur(12px);
  }

  29% {
    opacity: 1;
    filter: blur(13px);
  }

  61% {
    opacity: 0.76;
    filter: blur(11.5px);
  }

  63% {
    opacity: 1;
    filter: blur(14px);
  }
}

@keyframes cueMove {
  0%,
  100% {
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.55;
  }

  50% {
    transform: translateY(5px) rotate(45deg);
    opacity: 1;
  }
}

@keyframes arcLanternSwing {
  0% {
    transform: translateX(-50%) rotate(calc(var(--lantern-swing-angle) * -1));
  }

  50% {
    transform: translateX(-50%) rotate(var(--lantern-swing-angle));
  }

  100% {
    transform: translateX(-50%) rotate(calc(var(--lantern-swing-angle) * -1));
  }
}

@keyframes arcLanternPulse {
  0%,
  100% {
    opacity: 0.84;
    transform: translate(-50%, -50%) scale(0.96);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes goomIconImpulse {
  0% {
    transform: translateY(0) scale(1);
  }

  38% {
    transform: translateY(-4px) scale(2);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes goomIconLineAwaken {
  0% {
    filter: sepia(0) saturate(0.8) brightness(1) contrast(1)
      drop-shadow(0 0 0 rgba(169, 207, 59, 0));
  }

  38% {
    filter: sepia(0.75) saturate(2.1) hue-rotate(28deg) brightness(1.32)
      contrast(1.08) drop-shadow(0 0 0.34rem rgba(169, 207, 59, 0.42))
      drop-shadow(0 0 0.55rem rgba(240, 191, 115, 0.18));
  }

  100% {
    filter: sepia(0.45) saturate(1.55) hue-rotate(34deg) brightness(1.12)
      contrast(1.04) drop-shadow(0 0 0.18rem rgba(169, 207, 59, 0.18));
  }
}

@keyframes goomIconColorSettle {
  0% {
    opacity: 0;
    transform: translateY(2px) scale(0.985);
    filter: drop-shadow(0 0 0 rgba(169, 207, 59, 0));
  }

  45% {
    opacity: 1;
    transform: translateY(-3px) scale(1.18);
    filter: drop-shadow(0 0 0.42rem rgba(169, 207, 59, 0.18))
      drop-shadow(0 0.45rem 0.62rem rgba(0, 0, 0, 0.32));
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0.25rem rgba(169, 207, 59, 0.1))
      drop-shadow(0 0.38rem 0.55rem rgba(0, 0, 0, 0.28));
  }
}

@keyframes goomIconQuietAura {
  0% {
    opacity: 0;
    transform: scale(0.74);
  }

  35% {
    opacity: 0.42;
    transform: scale(1.08);
  }

  100% {
    opacity: 0;
    transform: scale(1.26);
  }
}

@keyframes goomIconColorSettleClean {
  0% {
    opacity: 0;
    transform: translateY(2px) scale(0.985);
  }

  45% {
    opacity: 1;
    transform: translateY(-3px) scale(1.18);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes goomSketchFadeClean {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  34% {
    opacity: 0.92;
    transform: translateY(-1px) scale(1.03);
  }

  100% {
    opacity: 0;
    transform: translateY(-1px) scale(1.01);
  }
}

@keyframes goomColorAwakenClean {
  0% {
    opacity: 0;
    transform: translateY(2px) scale(0.985);
  }

  26% {
    opacity: 0.62;
    transform: translateY(-1px) scale(1.08);
  }

  48% {
    opacity: 1;
    transform: translateY(-3px) scale(1.18);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroAkiFloat {
  0%,
  100% {
    transform: translateX(-50%) translateY(0px) rotate(-1.2deg);
  }

  50% {
    transform: translateX(-50%) translateY(-13px) rotate(1.2deg);
  }
}

@keyframes heroAkiGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 0.35rem rgba(255, 244, 180, 0.3));
  }

  50% {
    filter: drop-shadow(0 0 0.85rem rgba(255, 244, 180, 0.58));
  }
}

@keyframes heroAkiCanvasFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -13px;
  }
}

@keyframes heroAkiCanvasGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 0.35rem rgba(255, 244, 180, 0.3));
  }

  50% {
    filter: drop-shadow(0 0 0.95rem rgba(255, 244, 180, 0.62));
  }
}

@keyframes akiSparkleMoveA {
  0% {
    opacity: 0;
    transform: translate(-0.22rem, 0.55rem) scale(0.72) rotate(-4deg);
  }

  18% {
    opacity: 0.88;
  }

  42% {
    opacity: 1;
    transform: translate(0.08rem, -0.08rem) scale(0.92) rotate(2deg);
  }

  70% {
    opacity: 0.58;
    transform: translate(0.26rem, -0.82rem) scale(1.04) rotate(7deg);
  }

  100% {
    opacity: 0;
    transform: translate(0.38rem, -1.28rem) scale(1.14) rotate(11deg);
  }
}

@keyframes akiSparkleMoveB {
  0% {
    opacity: 0;
    transform: translate(-0.28rem, 0.42rem) scale(0.78) rotate(3deg);
  }

  24% {
    opacity: 0.76;
  }

  50% {
    opacity: 0.96;
    transform: translate(0.12rem, -0.14rem) scale(0.96) rotate(-2deg);
  }

  76% {
    opacity: 0.48;
    transform: translate(0.32rem, -0.78rem) scale(1.06) rotate(-6deg);
  }

  100% {
    opacity: 0;
    transform: translate(0.46rem, -1.12rem) scale(1.12) rotate(-10deg);
  }
}

@keyframes witchLanternPulse {
  0%,
  100% {
    transform: translate(-50%, 50%) scale(0.94) !important;
    filter: blur(8px) !important;
  }

  50% {
    transform: translate(-50%, 50%) scale(1.06) !important;
    filter: blur(11px) !important;
  }
}

@keyframes goomInfoIconHoverPulse {
  0% {
    scale: 1;
  }

  40% {
    scale: 1.22;
  }

  100% {
    scale: 1;
  }
}

@keyframes goomBoxSketchSwapClean {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-1px);
  }
}

@keyframes goomBoxColorSwapClean {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }

  45% {
    opacity: 1;
    transform: translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes arcMagicPulse {
  0%,
  100% {
    opacity: 0.76;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes arcMagicRing {
  0% {
    transform: rotate(0deg) scale(0.96);
    opacity: 0.45;
  }

  50% {
    opacity: 0.85;
  }

  100% {
    transform: rotate(360deg) scale(1.08);
    opacity: 0.45;
  }
}

@keyframes arcMagicTrailFollow {
  0% {
    opacity: 0;
    transform: translate(-92%, -50%) rotate(-35deg) scaleX(0.25);
  }

  6% {
    opacity: 0.66;
    transform: translate(-92%, -50%) rotate(-35deg) scaleX(0.58);
  }

  10% {
    opacity: 0.72;
    transform: translate(-92%, -50%) rotate(-35deg) scaleX(0.76);
  }

  23% {
    opacity: 0.7;
    transform: translate(-92%, -50%) rotate(95deg) scaleX(0.9);
  }

  40% {
    opacity: 0.74;
    transform: translate(-92%, -50%) rotate(-145deg) scaleX(1.04);
  }

  52% {
    opacity: 0.7;
    transform: translate(-92%, -50%) rotate(28deg) scaleX(0.88);
  }

  68% {
    opacity: 0.73;
    transform: translate(-92%, -50%) rotate(100deg) scaleX(1.04);
  }

  86% {
    opacity: 0.62;
    transform: translate(-92%, -50%) rotate(-164deg) scaleX(0.84);
  }

  100% {
    opacity: 0;
    transform: translate(-92%, -50%) rotate(-150deg) scaleX(0.22);
  }
}

@keyframes arcMagicSparkTrailOpacity {
  0% {
    opacity: 0.18;
  }

  8% {
    opacity: 0.98;
  }

  84% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
  }
}

@keyframes arcMagicSparkleTwinkle {
  0% {
    filter: blur(0.03rem) drop-shadow(0 0 0.42rem rgba(255, 142, 38, 0.62));
    background-position: 0 0,
      0.18rem -0.12rem,
      -0.1rem 0.14rem,
      0.12rem 0.08rem,
      -0.16rem -0.06rem,
      0 0;
  }

  100% {
    filter: blur(0.02rem) drop-shadow(0 0 0.9rem rgba(255, 197, 84, 0.92));
    background-position: 0.16rem -0.08rem,
      -0.14rem 0.12rem,
      0.18rem -0.16rem,
      -0.18rem 0.1rem,
      0.12rem 0.16rem,
      0 0;
  }
}

@keyframes arcMagicSparkleScatterA {
  0% {
    opacity: 0.28;
    transform: translate3d(0.1rem, -0.05rem, 0) scale(0.96);
  }

  45% {
    opacity: 0.95;
    transform: translate3d(-0.26rem, 0.16rem, 0) scale(1.04);
  }

  100% {
    opacity: 0.38;
    transform: translate3d(-0.54rem, -0.08rem, 0) scale(0.92);
  }
}

@keyframes arcMagicSparkleScatterB {
  0% {
    opacity: 0.72;
    transform: translate3d(-0.05rem, 0.12rem, 0) scale(1.02);
  }

  52% {
    opacity: 0.34;
    transform: translate3d(0.24rem, -0.18rem, 0) scale(0.94);
  }

  100% {
    opacity: 0.82;
    transform: translate3d(-0.34rem, 0.18rem, 0) scale(1.05);
  }
}

@keyframes arcMagicIdleFloat {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  10% {
    transform: translate(calc(-50% - 10px), calc(-50% + 5px)) scale(0.99);
  }

  24% {
    transform: translate(calc(-50% + 7px), calc(-50% - 11px)) scale(1.018);
  }

  40% {
    transform: translate(calc(-50% + 12px), calc(-50% + 3px)) scale(0.994);
  }

  57% {
    transform: translate(calc(-50% - 6px), calc(-50% - 12px)) scale(1.022);
  }

  73% {
    transform: translate(calc(-50% + 9px), calc(-50% + 9px)) scale(0.99);
  }

  88% {
    transform: translate(calc(-50% - 12px), calc(-50% - 3px)) scale(1.01);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes arcAkiSparkleMoveA {
  0% {
    opacity: 0;
    transform: translate(-0.18rem, 0.48rem) scale(0.74) rotate(-4deg);
  }

  18% {
    opacity: 0.82;
  }

  42% {
    opacity: 1;
    transform: translate(0.06rem, -0.08rem) scale(0.92) rotate(2deg);
  }

  70% {
    opacity: 0.54;
    transform: translate(0.24rem, -0.72rem) scale(1.02) rotate(7deg);
  }

  100% {
    opacity: 0;
    transform: translate(0.34rem, -1.08rem) scale(1.12) rotate(11deg);
  }
}

@keyframes arcAkiSparkleMoveB {
  0% {
    opacity: 0;
    transform: translate(-0.24rem, 0.36rem) scale(0.78) rotate(3deg);
  }

  24% {
    opacity: 0.72;
  }

  50% {
    opacity: 0.94;
    transform: translate(0.1rem, -0.12rem) scale(0.96) rotate(-2deg);
  }

  76% {
    opacity: 0.44;
    transform: translate(0.28rem, -0.68rem) scale(1.05) rotate(-6deg);
  }

  100% {
    opacity: 0;
    transform: translate(0.42rem, -0.98rem) scale(1.1) rotate(-10deg);
  }
}

@keyframes arcAkiSparkleFadeOut {
  0% {
    opacity: 0.86;
  }

  86% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
  }
}

@keyframes arcRealSoftRevealCover {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 0.94;
  }

  34% {
    opacity: 0.7;
  }

  62% {
    opacity: 0.38;
  }

  86% {
    opacity: 0.12;
  }

  100% {
    opacity: 0;
  }
}

@keyframes arcMagicFlyToLantern {
  0% {
    left: var(--arc-magic-start-left);
    top: var(--arc-magic-start-top);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  8% {
    left: 22%;
    top: 75%;
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 1;
  }

  27% {
    left: 35%;
    top: 13%;
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 1;
  }

  43% {
    left: 62%;
    top: 80%;
    transform: translate(-50%, -50%) scale(0.78);
    opacity: 1;
  }

  59% {
    left: 66%;
    top: 11%;
    transform: translate(-50%, -50%) scale(0.62);
    opacity: 0.98;
  }

  100% {
    left: var(--arc-spark-land-left);
    top: var(--arc-spark-land-top);
    transform: translate(-50%, -50%) scale(0.24);
    opacity: 0.92;
  }
}

/* --------------------------------------------------------------------------
   Start Your Journey — homepage step strip
   -------------------------------------------------------------------------- */

.join-flow-section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(3.1rem, 5.4vw, 5.8rem) clamp(1rem, 3.5vw, 3.2rem) !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.join-flow-inner {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}

.join-flow-inner::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  background: radial-gradient(
      circle at 50% 18%,
      rgba(245, 234, 212, 0.07),
      transparent 34%
    ),
    radial-gradient(circle at 50% 74%, rgba(169, 207, 59, 0.035), transparent 30%);
  filter: grayscale(1);
  transition: opacity 620ms ease,
    filter 620ms ease;
}

.join-flow-section:hover .join-flow-inner::before {
  opacity: 0.58;
  filter: grayscale(0);
}

.join-flow-heading {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  margin: 0 auto clamp(1.8rem, 3vw, 2.5rem);
  text-align: center;
}

.join-flow-kicker {
  margin: 0 0 0.38rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  color: rgba(245, 234, 212, 0.58);
  font-family: var(--font-heading);
  font-size: clamp(0.98rem, 1.32vw, 1.16rem);
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  transition: color 520ms ease,
    text-shadow 520ms ease;
}

.join-flow-heading h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.7rem, 5.3vw, 5rem);
  line-height: 0.92;
  letter-spacing: 0.045em;
  color: rgba(245, 234, 212, 0.92);
  text-shadow: 0 0.5rem 0.9rem rgba(0, 0, 0, 0.55);
  transition: color 520ms ease,
    text-shadow 520ms ease,
    transform 260ms ease;
}

.join-flow-heading p:not(.join-flow-kicker) {
  margin: 0.9rem auto 0;
  max-width: 47rem;
  color: rgba(217, 204, 179, 0.72);
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.18vw, 1.12rem);
  line-height: 1.64;
  transition: color 520ms ease;
}

.join-flow-section:hover .join-flow-kicker,
.join-flow-section:hover .join-flow-heading h2 {
  color: #a9cf3b;
  text-shadow: 0 0 0.9rem rgba(169, 207, 59, 0.28),
    0 0.55rem 0.85rem rgba(0, 0, 0, 0.56);
}

.join-flow-section:hover .join-flow-heading h2 {
  transform: translateY(-1px);
}

.join-flow-section:hover .join-flow-heading p:not(.join-flow-kicker) {
  color: rgba(245, 234, 212, 0.88);
}

.join-step-list {
  position: relative;
  z-index: 1;
  list-style: none;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(245, 234, 212, 0.24);
  border-bottom: 1px solid rgba(245, 234, 212, 0.2);
}

.join-step-card {
  position: relative;
  min-height: 12.7rem;
  padding: clamp(1.24rem, 2vw, 1.7rem) clamp(0.9rem, 1.5vw, 1.35rem)
    clamp(1.22rem, 2vw, 1.62rem);
  text-align: center;
  background: transparent;
  color: rgba(245, 234, 212, 0.76);
  overflow: visible;
  transition: color 520ms ease,
    transform 240ms ease,
    background 520ms ease;
}

.join-step-card + .join-step-card::before {
  content: "";
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(245, 234, 212, 0.22),
    transparent
  );
  transition: background 520ms ease;
}

.join-step-card::after {
  content: "→";
  position: absolute;
  top: clamp(2.08rem, 3vw, 2.7rem);
  right: -0.55rem;
  z-index: 2;
  color: rgba(245, 234, 212, 0.42);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1;
  text-shadow: 0 0.45rem 0.7rem rgba(0, 0, 0, 0.5);
  transition: color 520ms ease,
    text-shadow 520ms ease,
    transform 240ms ease;
}

.join-step-card:last-child::after {
  display: none;
}

.join-step-card:hover,
.join-step-card:focus-within {
  color: #a9cf3b;
  transform: translateY(-2px);
  background: radial-gradient(
    circle at 50% 18%,
    rgba(169, 207, 59, 0.12),
    transparent 44%
  );
}

.join-step-card:hover::before,
.join-step-card:focus-within::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(169, 207, 59, 0.38),
    transparent
  );
}

.join-step-card:hover::after,
.join-step-card:focus-within::after {
  color: #a9cf3b;
  transform: translateX(0.12rem);
  text-shadow: 0 0 0.75rem rgba(169, 207, 59, 0.34),
    0 0.45rem 0.7rem rgba(0, 0, 0, 0.52);
}

.join-step-number {
  width: clamp(2.5rem, 3.35vw, 3.15rem);
  height: clamp(2.5rem, 3.35vw, 3.15rem);
  margin: 0 auto 0.78rem;
  display: grid;
  place-items: center;
  color: rgba(245, 234, 212, 0.8);
  background: transparent;
  border: 1px solid rgba(245, 234, 212, 0.38);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: clamp(1.42rem, 1.95vw, 1.82rem);
  line-height: 1;
  box-shadow: 0 0.45rem 0.75rem rgba(0, 0, 0, 0.38);
  transition: color 520ms ease,
    border-color 520ms ease,
    box-shadow 520ms ease,
    transform 240ms ease;
}

.join-step-card:hover .join-step-number,
.join-step-card:focus-within .join-step-number {
  color: #a9cf3b;
  border-color: rgba(169, 207, 59, 0.7);
  box-shadow: 0 0 0.85rem rgba(169, 207, 59, 0.28),
    0 0.45rem 0.75rem rgba(0, 0, 0, 0.42);
  transform: scale(1.06);
}

.join-step-card h3 {
  margin: 0 0 0.52rem;
  color: rgba(245, 234, 212, 0.84);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.58vw, 1.48rem);
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 0.45rem 0.75rem rgba(0, 0, 0, 0.55);
  transition: color 520ms ease,
    text-shadow 520ms ease;
}

.join-step-card p {
  margin: 0 auto;
  max-width: 14.6rem;
  color: rgba(217, 204, 179, 0.7);
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1vw, 0.98rem);
  line-height: 1.5;
  transition: color 520ms ease;
}

.join-step-card:hover h3,
.join-step-card:focus-within h3 {
  color: #a9cf3b;
  text-shadow: 0 0 0.82rem rgba(169, 207, 59, 0.34),
    0 0.45rem 0.75rem rgba(0, 0, 0, 0.55);
}

.join-step-card:hover p,
.join-step-card:focus-within p {
  color: rgba(245, 234, 212, 0.92);
}

.join-flow-actions {
  position: relative;
  z-index: 1;
  margin: clamp(1.55rem, 3vw, 2.2rem) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.55rem);
  flex-wrap: wrap;
}

.join-flow-button {
  position: relative;
  min-height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  padding: 0.62rem 0.12rem 0.54rem;
  color: rgba(245, 234, 212, 0.78);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-heading);
  font-size: clamp(1.06rem, 1.28vw, 1.24rem);
  line-height: 1;
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: none;
  transition: transform 240ms ease,
    color 520ms ease,
    text-shadow 520ms ease;
}

.join-flow-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.28rem;
  height: 1px;
  background: rgba(245, 234, 212, 0.28);
  transform: scaleX(0.42);
  transform-origin: center;
  transition: transform 420ms ease,
    background 520ms ease,
    box-shadow 520ms ease;
}

.join-flow-discord-icon {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  object-fit: contain;
  filter: grayscale(1) brightness(1.25) contrast(0.9);
  opacity: 0.82;
  transition: filter 520ms ease,
    opacity 520ms ease,
    transform 240ms ease;
}

.join-flow-button:hover,
.join-flow-button:focus-visible {
  color: #a9cf3b;
  transform: translateY(-2px);
  text-shadow: 0 0 0.82rem rgba(169, 207, 59, 0.34),
    0 0.45rem 0.75rem rgba(0, 0, 0, 0.52);
}

.join-flow-button:hover::after,
.join-flow-button:focus-visible::after {
  transform: scaleX(1);
  background: rgba(169, 207, 59, 0.74);
  box-shadow: 0 0 0.55rem rgba(169, 207, 59, 0.32);
}

.join-flow-button:hover .join-flow-discord-icon,
.join-flow-button:focus-visible .join-flow-discord-icon {
  filter: grayscale(0) brightness(1.06) contrast(1);
  opacity: 1;
  transform: scale(1.06);
}

.join-flow-note {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  margin: clamp(1rem, 2vw, 1.35rem) auto 0;
  color: rgba(217, 204, 179, 0.58);
  font-size: clamp(0.84rem, 0.98vw, 0.96rem);
  line-height: 1.5;
  text-align: center;
  transition: color 520ms ease;
}

.join-flow-section:hover .join-flow-note {
  color: rgba(245, 234, 212, 0.78);
}

@media (max-width: 980px) {
  .join-step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .join-step-card {
    min-height: 12.2rem;
  }

  .join-step-card:nth-child(odd)::before {
    display: none;
  }

  .join-step-card:nth-child(n + 3) {
    border-top: 1px solid rgba(245, 234, 212, 0.16);
  }

  .join-step-card::after {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .join-flow-section {
    padding: 2.25rem 0.78rem 2.9rem !important;
  }

  .join-flow-heading p:not(.join-flow-kicker) {
    font-size: 0.94rem;
    line-height: 1.55;
  }

  .join-step-list {
    grid-template-columns: 1fr;
  }

  .join-step-card,
  .join-step-card + .join-step-card,
  .join-step-card:nth-child(n + 3) {
    min-height: auto;
    padding: 1.22rem 1rem 1.28rem;
    border-top: 1px solid rgba(245, 234, 212, 0.16);
  }

  .join-step-card:first-child {
    border-top: 0;
  }

  .join-step-card + .join-step-card::before {
    display: none;
  }

  .join-flow-actions {
    align-items: center;
    flex-direction: column;
    gap: 0.7rem;
  }

  .join-flow-button {
    width: auto;
    max-width: 100%;
  }
}

/* ARC I final image switch: ship_arc01 stays during the light flight. ship_arc02 only fades in when the lantern is lit. */
.arc-showcase-section .arc-scene-img-after {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  filter: brightness(0.92) contrast(1.04) saturate(0.98) !important;
  transition: opacity 4200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 4200ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.arc-showcase-section:not(.is-arc-awakened) .arc-scene-img-after,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene-img-after,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene-img-after {
  opacity: 0 !important;
  filter: brightness(0.88) contrast(1.04) saturate(0.92) !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-img-after,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-after,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-after {
  opacity: 1 !important;
  filter: brightness(1) contrast(1.04) saturate(1.08) !important;
}


/* ARC fix: reveal ship_arc02 during spark flight, then fade back to ship_arc01 when awakened. */
.arc-showcase-section.is-arc-awakened .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-img-color,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-img-color {
  opacity: 0 !important;
  visibility: visible !important;
  filter: brightness(0.94) contrast(1.03) saturate(0.96) !important;
  transition: opacity 900ms ease-out, filter 900ms ease-out !important;
}

/* ARC layer fix: keep the revealed image on top of the base image instead of below it. */
.arc-showcase-section .arc-scene-media {
  position: relative !important;
  overflow: hidden !important;
}

.arc-showcase-section .arc-scene-media > .arc-scene-img:first-of-type {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

.arc-showcase-section .arc-scene-media > .arc-scene-img-color,
.arc-showcase-section:hover .arc-scene-media > .arc-scene-img-color,
.arc-showcase-section:focus-within .arc-scene-media > .arc-scene-img-color {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
}

.arc-showcase-section .arc-soft-reveal-cover {
  z-index: 3 !important;
}

.arc-showcase-section .arc-magic-light {
  z-index: 8 !important;
}

.arc-showcase-section .arc-lantern-anchor {
  z-index: 7 !important;
}

/* ARC start/end visibility fix: ship_arc01 must stay hidden until the spark arrives. */
.arc-showcase-section:not(.is-arc-awakened) .arc-scene-media > .arc-scene-img:first-of-type,
.arc-showcase-section:not(.is-arc-awakened):hover .arc-scene-media > .arc-scene-img:first-of-type,
.arc-showcase-section:not(.is-arc-awakened):focus-within .arc-scene-media > .arc-scene-img:first-of-type {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 900ms ease-out, visibility 0s linear 900ms !important;
}

.arc-showcase-section.is-arc-awakened .arc-scene-media > .arc-scene-img:first-of-type,
.arc-showcase-section.is-arc-awakened:hover .arc-scene-media > .arc-scene-img:first-of-type,
.arc-showcase-section.is-arc-awakened:focus-within .arc-scene-media > .arc-scene-img:first-of-type {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 900ms ease-out !important;
}

/* ARC sparkle fine-tune: move only the glitter cluster slightly to the right of the light core. */
.arc-magic-light-trail,
.arc-showcase-section.is-arc-spark-flying .arc-magic-light-trail,
.arc-showcase-section.is-arc-lantern-lit .arc-magic-light-trail {
  --arc-sparkle-x-shift: clamp(0.16rem, 0.28vw, 0.34rem);
  transform: translate(calc(-50% + var(--arc-sparkle-x-shift)), -50%) !important;
}


/* Hero character credit: subtle top-left label, color only on hover/active state. */
.hero-character-credit {
  position: absolute;
  top: clamp(1rem, 2.2vw, 2rem);
  left: clamp(1rem, 2.8vw, 2.6rem);
  z-index: 3;
  display: grid;
  gap: 0.08rem;
  max-width: min(24rem, calc(100% - 2rem));
  pointer-events: none;
  color: rgba(238, 238, 238, 0.78);
  filter: grayscale(1) saturate(0);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9),
    0 0.75rem 1.2rem rgba(0, 0, 0, 0.72);
  transform: translateY(0);
  opacity: 0.82;
  transition: color 240ms ease, filter 240ms ease, opacity 240ms ease,
    text-shadow 240ms ease, transform 240ms ease;
}

.hero-character-credit[hidden] {
  display: none !important;
}

.hero-character-credit-name {
  display: block;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.75vw, 1.72rem);
  line-height: 1;
  letter-spacing: 0.045em;
}

.hero-character-credit-by {
  display: block;
  font-size: clamp(0.68rem, 0.9vw, 0.86rem);
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

.hero-frame:hover .hero-character-credit,
.hero-frame.is-color-active .hero-character-credit {
  color: #f4f4ed;
  filter: grayscale(0) saturate(1);
  opacity: 1;
  transform: translateY(-1px);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.92),
    0 0 1rem rgba(169, 207, 59, 0.14),
    0 0.75rem 1.2rem rgba(0, 0, 0, 0.72);
}

.hero-frame:hover .hero-character-credit-name,
.hero-frame.is-color-active .hero-character-credit-name {
  color: #a9cf3b;
}

.hero-frame:hover .hero-character-credit-by,
.hero-frame.is-color-active .hero-character-credit-by {
  color: rgba(244, 244, 237, 0.88);
  opacity: 0.88;
}

@media (max-width: 640px) {
  .hero-character-credit {
    top: 0.9rem;
    left: 1rem;
    max-width: calc(100% - 2rem);
  }

  .hero-character-credit-name {
    font-size: 1rem;
  }

  .hero-character-credit-by {
    font-size: 0.64rem;
    letter-spacing: 0.11em;
  }
}

/* Hero credit visibility fix: hide the label whenever the hero character is in grayscale/inactive state. */
.hero-character-credit,
.hero-character-credit:not([hidden]) {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-0.18rem) !important;
  transition: opacity 220ms ease, visibility 0s linear 220ms,
    color 240ms ease, filter 240ms ease, text-shadow 240ms ease,
    transform 240ms ease !important;
}

.hero-frame:hover .hero-character-credit:not([hidden]),
.hero-frame.is-color-active .hero-character-credit:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-1px) !important;
  transition: opacity 240ms ease, visibility 0s linear 0s,
    color 240ms ease, filter 240ms ease, text-shadow 240ms ease,
    transform 240ms ease !important;
}

/* Hero credit typography tweak: smaller and keep the character name on one line. */
.hero-character-credit {
  max-width: min(46rem, calc(100% - 2rem)) !important;
}

.hero-character-credit-name {
  font-size: clamp(0.82rem, 1.16vw, 1.12rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.038em !important;
  white-space: nowrap !important;
}

.hero-character-credit-by {
  font-size: clamp(0.52rem, 0.68vw, 0.68rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.12em !important;
}

@media (max-width: 640px) {
  .hero-character-credit {
    max-width: calc(100% - 1.5rem) !important;
  }

  .hero-character-credit-name {
    font-size: 0.72rem !important;
    letter-spacing: 0.022em !important;
    white-space: nowrap !important;
  }

  .hero-character-credit-by {
    font-size: 0.5rem !important;
    letter-spacing: 0.08em !important;
  }
}


/* Hero background fallback fix: gray layer uses the same real image, rendered grayscale. */
.hero-frame .background-image-gray,
.hero-frame:hover .background-image-gray,
.hero-frame.is-color-active .background-image-gray {
  filter: grayscale(1) brightness(0.92) saturate(0) contrast(1.12) !important;
}

.hero-frame .background-image:not(.is-visible) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-frame .background-image.is-visible {
  visibility: visible !important;
}


/* Hero sketch fix: keep the original sketch background as a CSS layer so failed image tags never show a broken icon. */
.hero-sketch-background {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 130vw !important;
  height: calc(100% + 2px) !important;
  min-height: 130vh !important;
  max-width: none !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
  transform-origin: center center !important;
  background-image: url("https://84fa341e.goom-assets.pages.dev/background_daytimes/scretch.png?v=ws308"),
    url("https://goom-assets.pages.dev/background_daytimes/scretch.png?v=ws308"),
    url("https://84fa341e.goom-assets.pages.dev/background_daytimes/sketch.png?v=ws308"),
    url("https://goom-assets.pages.dev/background_daytimes/sketch.png?v=ws308") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  animation: slowBackgroundMove 42s ease-in-out infinite alternate !important;
  z-index: 0 !important;
}

.hero-frame .background-image-gray {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-frame .background-image-color {
  z-index: 1 !important;
}

.hero-witch-background,
.hero-character-layer,
.hero-character-credit,
.hero-frame-overlay,
.hero-frame-content {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .hero-sketch-background {
    animation: none !important;
  }
}


/* Hero credit final fix: exact A Glitch In Time asset font + true top-left positioning. */
@font-face {
  font-family: "HeroCreditGlitch";
  src:
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.woff2") format("woff2"),
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.ttf") format("truetype"),
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.otf") format("opentype"),
    url("https://84fa341e.goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.woff2") format("woff2"),
    url("https://84fa341e.goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.ttf") format("truetype"),
    url("https://84fa341e.goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.otf") format("opentype"),
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time.ttf") format("truetype"),
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time.otf") format("opentype"),
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time") format("truetype"),
    url("https://84fa341e.goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time.ttf") format("truetype"),
    url("https://84fa341e.goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time.otf") format("opentype"),
    url("https://84fa341e.goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.hero-character-credit,
.hero-character-credit-name,
.hero-character-credit-by {
  font-family: "HeroCreditGlitch", "A Glitch In Time", var(--font-heading) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

.hero-character-credit {
  position: absolute !important;
  top: clamp(0.9rem, 2vw, 1.7rem) !important;
  left: clamp(0.9rem, 2.4vw, 2.2rem) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  display: grid;
  justify-items: start !important;
  justify-content: start !important;
  align-items: start !important;
  place-items: start !important;
  width: fit-content !important;
  max-width: min(46rem, calc(100% - 1.8rem)) !important;
  margin: 0 !important;
  transform-origin: top left !important;
}

.hero-character-credit-name,
.hero-character-credit-by {
  width: auto !important;
  max-width: none !important;
}

/* Hero credit readability + case fix: slightly larger, preserve exact uppercase/lowercase. */
@font-face {
  font-family: "A Glitch In Time";
  src:
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.woff2") format("woff2"),
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.ttf") format("truetype"),
    url("https://goom-assets.pages.dev/fonts/A%20Glitch%20In%20Time/A%20Glitch%20In%20Time.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.hero-character-credit,
.hero-character-credit-name,
.hero-character-credit-by {
  font-family: "A Glitch In Time", "HeroCreditGlitch", var(--font-heading) !important;
  text-transform: none !important;
}

.hero-character-credit-name {
  font-size: clamp(0.95rem, 1.35vw, 1.34rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
}

.hero-character-credit-by {
  font-size: clamp(0.62rem, 0.82vw, 0.8rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.075em !important;
}

@media (max-width: 640px) {
  .hero-character-credit-name {
    font-size: 0.86rem !important;
    letter-spacing: 0.02em !important;
  }

  .hero-character-credit-by {
    font-size: 0.58rem !important;
    letter-spacing: 0.055em !important;
  }
}


/* Hero credit 315: noticeably larger text + exact visible capitalization. */
.hero-character-credit,
.hero-character-credit-name,
.hero-character-credit-by {
  font-family: "A Glitch In Time", "HeroCreditGlitch", var(--font-heading) !important;
  text-transform: none !important;
  text-align: left !important;
}

.hero-character-credit {
  position: absolute !important;
  top: clamp(0.9rem, 2vw, 1.7rem) !important;
  left: clamp(0.9rem, 2.4vw, 2.2rem) !important;
  right: auto !important;
  bottom: auto !important;
  width: fit-content !important;
  max-width: min(54rem, calc(100% - 1.8rem)) !important;
  transform-origin: top left !important;
}

.hero-character-credit-name {
  font-size: clamp(1.35rem, 2.15vw, 2.25rem) !important;
  line-height: 1.03 !important;
  letter-spacing: 0.028em !important;
  white-space: nowrap !important;
}

.hero-character-credit-by {
  font-size: clamp(0.82rem, 1.08vw, 1.02rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .hero-character-credit-name {
    font-size: 1.12rem !important;
    letter-spacing: 0.018em !important;
  }

  .hero-character-credit-by {
    font-size: 0.72rem !important;
    letter-spacing: 0.045em !important;
  }
}


/* Goom logo easter egg: normal logo swaps to angry logo after repeated random clicks. Includes robust asset fallbacks. */
.site-header .brand-logo-stack {
  position: relative !important;
  display: grid !important;
  flex: 0 0 auto !important;
  width: clamp(7.02rem, 9.12vw, 9.36rem) !important;
  min-height: clamp(2.7rem, 3.72vw, 4.02rem) !important;
  line-height: 0 !important;
  cursor: pointer !important;
  place-items: center !important;
}


.site-header .brand-logo-stack::before {
  content: "G";
  grid-area: 1 / 1;
  width: clamp(2.82rem, 3.6vw, 3.9rem);
  height: clamp(2.82rem, 3.6vw, 3.9rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(169, 207, 59, 0.55);
  border-radius: 0.8rem;
  color: #a9cf3b;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 2.94vw, 3rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(45, 70, 18, 0.8),
    0 0 0.65rem rgba(169, 207, 59, 0.18);
  background: rgba(8, 11, 10, 0.24);
  filter: drop-shadow(0 0.65rem 1rem rgba(0, 0, 0, 0.48));
  opacity: 1;
  transition: opacity 120ms ease, transform 160ms ease;
}

.site-header .brand-logo-stack.is-logo-ready::before {
  opacity: 0;
  transform: scale(0.98);
}

.site-header .brand-logo-stack .brand-icon,
.site-header .brand-logo-image {
  grid-area: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(2.7rem, 3.72vw, 4.02rem) !important;
  display: block !important;
  object-fit: contain !important;
}

.site-header .brand-logo-image {
  opacity: 0 !important;
  transform: translateY(0) scale(1) !important;
  transition:
    opacity 120ms ease,
    transform 160ms ease,
    filter 160ms ease !important;
  pointer-events: none !important;
}

.site-header .brand-logo-image.is-visible {
  opacity: 1 !important;
}

.site-header .brand.is-logo-angy .brand-logo-normal {
  opacity: 0 !important;
}

.site-header .brand.is-logo-angy .brand-logo-angy {
  opacity: 1 !important;
  filter: drop-shadow(0 0.7rem 0.95rem rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 0.55rem rgba(255, 80, 40, 0.28)) !important;
  transform: translateY(-1px) scale(1.035) !important;
}

.site-header .brand:hover .brand-logo-image.is-visible {
  transform: translateY(-1px) scale(1.02) !important;
}

@media (max-width: 760px) {
  .site-header .brand-logo-stack {
    width: clamp(4.8rem, 19.2vw, 6rem) !important;
  }
}


/* v318: The logo is only an easter-egg button now, not a home/jump link. */
.site-header button.brand,
.site-header .brand#goomLogoTrigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  cursor: pointer !important;
  text-align: inherit !important;
}

.site-header .brand#goomLogoTrigger:focus-visible {
  outline: 2px solid rgba(169, 207, 59, 0.72) !important;
  outline-offset: 0.25rem !important;
  border-radius: 0.85rem !important;
}


/* v322: Header restored to the original pre-logo-change height/spacing.
   The logo remains visually about 20% larger, but the button/stack itself no longer controls header height. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  min-height: clamp(5.8rem, 7.2vw, 7.35rem) !important;
  padding: clamp(0.72rem, 1.15vw, 1.05rem) clamp(1.05rem, 2.4vw, 2.6rem)
    clamp(0.82rem, 1.35vw, 1.18rem) clamp(0.55rem, 1.25vw, 1.35rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(1rem, 2.4vw, 2.8rem) !important;
}

.site-header .brand,
.site-header button.brand,
.site-header .brand#goomLogoTrigger {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}

.site-header .brand-title {
  display: none !important;
}

.site-header .brand-logo-stack {
  width: clamp(5.85rem, 7.6vw, 7.8rem) !important;
  height: clamp(3.65rem, 4.75vw, 4.9rem) !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

.site-header .brand-logo-stack::before {
  width: clamp(2.82rem, 3.6vw, 3.9rem) !important;
  height: clamp(2.82rem, 3.6vw, 3.9rem) !important;
  font-size: clamp(2.1rem, 2.94vw, 3rem) !important;
}

.site-header .brand-logo-stack .brand-icon,
.site-header .brand-logo-image {
  grid-area: 1 / 1 !important;
  width: 120% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

.site-header .nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(1.25rem, 3vw, 3.2rem) !important;
}

.site-header .nav a:not(.discord-nav-link) {
  min-height: clamp(3.05rem, 4.3vw, 3.85rem) !important;
  padding: 0.15rem 0.08rem !important;
  font-size: clamp(1.55rem, 2.55vw, 2rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.site-header .discord-nav-link {
  width: clamp(3.75rem, 5.2vw, 4.55rem) !important;
  height: clamp(3.75rem, 5.2vw, 4.55rem) !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.site-header .discord-icon {
  width: clamp(3rem, 4.25vw, 3.75rem) !important;
  height: clamp(3rem, 4.25vw, 3.75rem) !important;
}

@media (min-width: 981px) {
  .site-header .brand-logo-stack {
    width: clamp(5.85rem, 7.6vw, 7.8rem) !important;
    height: clamp(3.65rem, 4.75vw, 4.9rem) !important;
  }
}

@media (max-width: 980px) {
  .site-header {
    min-height: clamp(5.2rem, 9vw, 6.5rem) !important;
    padding: clamp(0.62rem, 1.6vw, 0.9rem) clamp(0.8rem, 2.5vw, 1.5rem)
      clamp(0.7rem, 1.8vw, 1rem) clamp(0.45rem, 1.8vw, 1rem) !important;
    flex-wrap: wrap !important;
    gap: clamp(0.7rem, 2vw, 1.3rem) !important;
  }

  .site-header .brand-logo-stack {
    width: clamp(4.6rem, 10vw, 6rem) !important;
    height: clamp(3rem, 6.5vw, 3.9rem) !important;
  }

  .site-header .nav {
    justify-content: flex-end !important;
    gap: clamp(0.9rem, 2.4vw, 1.8rem) !important;
  }

  .site-header .nav a:not(.discord-nav-link) {
    font-size: clamp(1.32rem, 3.2vw, 1.72rem) !important;
    min-height: 2.75rem !important;
  }

  .site-header .discord-nav-link {
    width: clamp(3.15rem, 7vw, 3.85rem) !important;
    height: clamp(3.15rem, 7vw, 3.85rem) !important;
  }

  .site-header .discord-icon {
    width: clamp(2.55rem, 5.8vw, 3.15rem) !important;
    height: clamp(2.55rem, 5.8vw, 3.15rem) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    padding: 0.55rem clamp(0.65rem, 3vw, 1rem) 0.7rem
      clamp(0.45rem, 2.4vw, 0.8rem) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.45rem !important;
  }

  .site-header .brand {
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }

  .site-header .brand-logo-stack {
    width: clamp(4rem, 16vw, 5rem) !important;
    height: clamp(2.7rem, 10.8vw, 3.4rem) !important;
  }

  .site-header .nav {
    width: 100% !important;
    justify-content: center !important;
    gap: clamp(0.55rem, 3vw, 0.95rem) !important;
  }

  .site-header .nav a:not(.discord-nav-link) {
    min-height: 2.15rem !important;
    font-size: clamp(1rem, 4.4vw, 1.28rem) !important;
  }

  .site-header .discord-nav-link {
    width: clamp(2.55rem, 10vw, 3.05rem) !important;
    height: clamp(2.55rem, 10vw, 3.05rem) !important;
  }

  .site-header .discord-icon {
    width: clamp(2.05rem, 8vw, 2.5rem) !important;
    height: clamp(2.05rem, 8vw, 2.5rem) !important;
  }
}


/* v326: ONLY logo visual adjustment.
   Header stays unchanged. Logo is slightly smaller than v325 and still slightly lower. */
.site-header .brand-logo-stack .brand-icon,
.site-header .brand-logo-image {
  width: 126% !important;
  max-width: none !important;
  height: auto !important;
  transform: translateY(0.24rem) !important;
  transform-origin: center center !important;
}

.site-header .brand-logo-image.is-visible {
  transform: translateY(0.24rem) !important;
}

.site-header .brand.is-logo-angy .brand-logo-angy {
  transform: translateY(0.16rem) scale(1.035) !important;
}

.site-header .brand:hover .brand-logo-image.is-visible {
  transform: translateY(0.18rem) scale(1.02) !important;
}


/* v330: final logo fix.
   Keep the accepted v327 header/logo placement.
   Remove the green fallback placeholder completely.
   Normal and angry logo share exactly the same size and position. */
.site-header .brand-logo-stack::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

.site-header .brand-logo-stack .brand-icon,
.site-header .brand-logo-image {
  width: 126% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  transform: translateY(0.24rem) !important;
  transform-origin: center center !important;
}

.site-header .brand-logo-image.is-visible {
  transform: translateY(0.24rem) !important;
}

.site-header .brand.is-logo-angy .brand-logo-angy {
  width: 126% !important;
  max-width: none !important;
  height: auto !important;
  transform: translateY(0.24rem) !important;
  transform-origin: center center !important;
}

.site-header .brand:hover .brand-logo-image.is-visible {
  transform: translateY(0.24rem) !important;
}


/* v332: Hide the native mouse cursor over the Goom logo button.
   This prevents the saved/custom cursor and the normal mouse pointer from appearing together. */
.site-header #goomLogoTrigger,
.site-header #goomLogoTrigger *,
.site-header .brand-logo-stack,
.site-header .brand-logo-image {
  cursor: none !important;
}


/* v333: only enlarge the header by 10px and move the Goom logo 5px lower.
   No other layout changes. */
.site-header {
  min-height: calc(clamp(5.8rem, 7.2vw, 7.35rem) + 10px) !important;
}

.site-header .brand-logo-stack .brand-icon,
.site-header .brand-logo-image,
.site-header .brand.is-logo-angy .brand-logo-angy,
.site-header .brand-logo-image.is-visible,
.site-header .brand:hover .brand-logo-image.is-visible {
  transform: translateY(calc(0.24rem + 5px)) !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: calc(clamp(5.2rem, 9vw, 6.5rem) + 10px) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    min-height: calc(0px + 10px) !important;
  }
}


/* v334: logo/discord/header polish.
   - Keep normal and Angy Goom logos perfectly stacked.
   - Do not scale or shift Angy differently from the normal logo.
   - Make the “Gespielt von …” line a little larger.
   - Discord hover now shows the random class icon at about 160% size. */
.site-header .brand-logo-stack .brand-icon,
.site-header .brand-logo-image,
.site-header .brand-logo-image.is-visible,
.site-header .brand.is-logo-angy .brand-logo-normal,
.site-header .brand.is-logo-angy .brand-logo-angy,
.site-header .brand:hover .brand-logo-image.is-visible {
  width: 126% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  transform: translateY(calc(0.24rem + 5px)) scale(1) !important;
  transform-origin: center center !important;
}

.site-header .brand-logo-normal.is-visible {
  opacity: 1 !important;
}

.site-header .brand-logo-angy {
  opacity: 0 !important;
}

.site-header .brand.is-logo-angy .brand-logo-normal {
  opacity: 0 !important;
}

.site-header .brand.is-logo-angy .brand-logo-angy {
  opacity: 1 !important;
  filter: drop-shadow(0 0.7rem 0.95rem rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 0.55rem rgba(255, 80, 40, 0.28)) !important;
}

.hero-character-credit-by {
  font-size: clamp(1.1rem, 1.44vw, 1.38rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.055em !important;
}

.site-header .discord-nav-link {
  overflow: visible !important;
  transform: none !important;
}

.site-header .discord-nav-link:hover,
.site-header .discord-nav-link:focus-visible {
  transform: none !important;
}

.site-header .discord-nav-link:hover .discord-icon-normal,
.site-header .discord-nav-link:focus-visible .discord-icon-normal {
  opacity: 0 !important;
  transform: scale(1) !important;
}

.site-header .discord-nav-link:hover .discord-icon-hover,
.site-header .discord-nav-link:focus-visible .discord-icon-hover {
  opacity: 1 !important;
  transform: scale(1.72) rotate(10deg) !important;
}

.site-header .discord-icon-hover {
  transform-origin: center center !important;
}

@media (max-width: 640px) {
  .hero-character-credit-by {
    font-size: 0.98rem !important;
    letter-spacing: 0.04em !important;
  }
}

/* v334 safety: use the real Goom logo itself as a background fallback while the img source is resolving.
   This is not the old green placeholder; it is only an extra chance for the actual logo file to show. */
.site-header .brand-logo-stack {
  background-image:
    url("https://goom-assets.pages.dev/icons/Goom_Logo.png?v=339"),
    url("https://84fa341e.goom-assets.pages.dev/icons/Goom_Logo.png?v=339"),
    url("https://43d94174.goom-assets.pages.dev/icons/Goom_Logo.png?v=339"),
    url("https://goom-assets.pages.dev/goom-assets/icons/Goom_Logo.png?v=339"),
    url("https://goom-assets.pages.dev/Goom_Logo.png?v=339") !important;
  background-repeat: no-repeat !important;
  background-position: center calc(50% + 5px) !important;
  background-size: 126% auto !important;
}

.site-header .brand-logo-stack.is-logo-ready,
.site-header .brand.is-logo-angy .brand-logo-stack {
  background-image: none !important;
}

/* v337: Add Goom_Logo_Schrift beside the icon logo and keep the full brand group centered inside the black header bar. */
.site-header .brand-logo-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.25rem, 0.65vw, 0.55rem) !important;
  min-width: 0 !important;
  line-height: 0 !important;
}

.site-header .brand-wordmark-image {
  display: block !important;
  width: clamp(8.8rem, 13.5vw, 14.5rem) !important;
  max-width: min(44vw, 14.5rem) !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateY(calc(0.24rem + 5px)) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
  user-select: none !important;
}

.site-header .brand,
.site-header button.brand,
.site-header .brand#goomLogoTrigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 980px) {
  .site-header .brand-wordmark-image {
    width: clamp(6.8rem, 20vw, 10.5rem) !important;
    max-width: min(48vw, 10.5rem) !important;
  }
}

@media (max-width: 760px) {
  .site-header .brand-logo-group {
    gap: clamp(0.18rem, 1.4vw, 0.35rem) !important;
  }

  .site-header .brand-wordmark-image {
    width: clamp(5.6rem, 34vw, 8.6rem) !important;
    max-width: 52vw !important;
    transform: translateY(calc(0.18rem + 4px)) !important;
  }
}


/* v338: ensure the Goom_Logo_Schrift image actually appears next to the icon logo. */
.site-header .brand-logo-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.32rem, 0.75vw, 0.7rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}

.site-header .brand-wordmark-image {
  display: block !important;
  flex: 0 1 auto !important;
  width: clamp(7.8rem, 13vw, 14rem) !important;
  max-width: min(42vw, 14rem) !important;
  height: auto !important;
  min-width: 0 !important;
  object-fit: contain !important;
  transform: translateY(calc(0.24rem + 5px)) !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 0.55rem 0.85rem rgba(0, 0, 0, 0.45));
}

.site-header .brand:hover .brand-wordmark-image {
  transform: translateY(calc(0.24rem + 5px)) scale(1.01) !important;
}

@media (max-width: 980px) {
  .site-header .brand-wordmark-image {
    width: clamp(6.5rem, 18vw, 10.2rem) !important;
    max-width: min(45vw, 10.2rem) !important;
  }
}

@media (max-width: 760px) {
  .site-header .brand-logo-group {
    gap: clamp(0.18rem, 1.2vw, 0.35rem) !important;
  }

  .site-header .brand-wordmark-image {
    width: clamp(5.2rem, 32vw, 8rem) !important;
    max-width: 52vw !important;
    transform: translateY(calc(0.18rem + 4px)) !important;
  }

  .site-header .brand:hover .brand-wordmark-image {
    transform: translateY(calc(0.18rem + 4px)) scale(1.01) !important;
  }
}


/* v340: keep the accepted v339 sizing, but nudge the Goom logo stack a few pixels lower in the header. */
.site-header .brand-wordmark-image {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-header .brand-logo-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 0 !important;
}

.site-header .brand,
.site-header button.brand,
.site-header .brand#goomLogoTrigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  line-height: 0 !important;
}

.site-header .brand-logo-stack {
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  background-position: center calc(50% + 4px) !important;
  background-size: 119.7% auto !important;
}

.site-header .brand-logo-stack .brand-icon,
.site-header .brand-logo-image,
.site-header .brand-logo-image.is-visible,
.site-header .brand.is-logo-angy .brand-logo-normal,
.site-header .brand.is-logo-angy .brand-logo-angy,
.site-header .brand:hover .brand-logo-image.is-visible {
  width: 119.7% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  transform: translateY(4px) scale(1) !important;
  transform-origin: center center !important;
}

.site-header .brand-logo-normal.is-visible {
  opacity: 1 !important;
}

.site-header .brand-logo-angy {
  opacity: 0 !important;
}

.site-header .brand.is-logo-angy .brand-logo-normal {
  opacity: 0 !important;
}

.site-header .brand.is-logo-angy .brand-logo-angy {
  opacity: 1 !important;
  transform: translateY(4px) scale(1) !important;
}

@media (max-width: 760px) {
  .site-header .brand {
    align-self: center !important;
    justify-content: center !important;
  }

  .site-header .brand-logo-stack .brand-icon,
  .site-header .brand-logo-image,
  .site-header .brand-logo-image.is-visible,
  .site-header .brand.is-logo-angy .brand-logo-angy,
  .site-header .brand:hover .brand-logo-image.is-visible {
    width: 119.7% !important;
    transform: translateY(4px) scale(1) !important;
  }
}


/* v344: remove the blue hover glow behind the header Discord icon. Keep only a neutral dark shadow. */
.site-header .discord-nav-link::after,
.site-header .discord-nav-link:hover::after,
.site-header .discord-nav-link:focus-visible::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .discord-nav-link,
.site-header .discord-nav-link:hover,
.site-header .discord-nav-link:focus-visible {
  box-shadow: none !important;
  filter: none !important;
}

.site-header .discord-icon-normal {
  filter: drop-shadow(0 0.55rem 0.55rem rgba(0, 0, 0, 0.42)) !important;
}

.site-header .discord-icon-hover {
  filter: drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.48)) !important;
}


/* v345: remove all remaining shadows/glow from the header Discord icons. */
.site-header .discord-icon,
.site-header .discord-icon-normal,
.site-header .discord-icon-hover,
.site-header .discord-nav-link:hover .discord-icon-normal,
.site-header .discord-nav-link:hover .discord-icon-hover,
.site-header .discord-nav-link:focus-visible .discord-icon-normal,
.site-header .discord-nav-link:focus-visible .discord-icon-hover {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}


/* v346: Start Your Journey cleanup.
   - No green/glow hover effect on the heading or step cards.
   - Use the same soft fading section line style.
   - Remove inner divider lines between the numbered cards, keeping the arrows and top/bottom lines. */
.join-flow-section {
  position: relative !important;
  overflow: hidden !important;
}

.join-flow-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: min(78rem, calc(100% - 2rem)) !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.42),
    transparent
  ) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

.join-flow-inner::before,
.join-flow-section:hover .join-flow-inner::before,
.join-flow-section:focus-within .join-flow-inner::before {
  opacity: 0 !important;
  filter: none !important;
  background: none !important;
}

.join-flow-kicker,
.join-flow-heading h2,
.join-flow-heading p:not(.join-flow-kicker),
.join-flow-section:hover .join-flow-kicker,
.join-flow-section:focus-within .join-flow-kicker,
.join-flow-section:hover .join-flow-heading h2,
.join-flow-section:focus-within .join-flow-heading h2 {
  color: rgba(245, 234, 212, 0.92) !important;
  text-shadow: 0 0.5rem 0.9rem rgba(0, 0, 0, 0.55) !important;
  transform: none !important;
}

.join-flow-kicker,
.join-flow-section:hover .join-flow-kicker,
.join-flow-section:focus-within .join-flow-kicker {
  color: rgba(245, 234, 212, 0.58) !important;
  text-shadow: none !important;
}

.join-flow-heading p:not(.join-flow-kicker),
.join-flow-section:hover .join-flow-heading p:not(.join-flow-kicker),
.join-flow-section:focus-within .join-flow-heading p:not(.join-flow-kicker) {
  color: rgba(217, 204, 179, 0.72) !important;
  text-shadow: none !important;
}

.join-flow-lead {
  max-width: min(58rem, 100%) !important;
}

.join-flow-lead span {
  display: block !important;
}

.join-step-list {
  position: relative !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.join-step-list::before,
.join-step-list::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.32),
    transparent
  ) !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}

.join-step-list::before {
  top: 0 !important;
}

.join-step-list::after {
  bottom: 0 !important;
}

.join-step-card + .join-step-card::before,
.join-step-card:nth-child(odd)::before,
.join-step-card:nth-child(2n)::before,
.join-step-card:nth-child(3n)::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

.join-step-card,
.join-step-card:hover,
.join-step-card:focus-within {
  color: rgba(245, 234, 212, 0.76) !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.join-step-card:nth-child(n + 3),
.join-step-card + .join-step-card {
  border-top: 0 !important;
}

.join-step-card::after,
.join-step-card:hover::after,
.join-step-card:focus-within::after {
  color: rgba(245, 234, 212, 0.42) !important;
  text-shadow: 0 0.45rem 0.7rem rgba(0, 0, 0, 0.5) !important;
  transform: none !important;
}

.join-step-number,
.join-step-card:hover .join-step-number,
.join-step-card:focus-within .join-step-number {
  color: rgba(245, 234, 212, 0.8) !important;
  border-color: rgba(245, 234, 212, 0.38) !important;
  box-shadow: none !important;
  transform: none !important;
}

.join-step-card h3,
.join-step-card:hover h3,
.join-step-card:focus-within h3 {
  color: rgba(245, 234, 212, 0.84) !important;
  text-shadow: 0 0.45rem 0.75rem rgba(0, 0, 0, 0.55) !important;
}

.join-step-card p,
.join-step-card:hover p,
.join-step-card:focus-within p {
  color: rgba(217, 204, 179, 0.7) !important;
}

.join-flow-section:hover .join-flow-note,
.join-flow-section:focus-within .join-flow-note {
  color: rgba(217, 204, 179, 0.58) !important;
}

@media (max-width: 640px) {
  .join-flow-lead span {
    display: inline !important;
  }

  .join-flow-lead span + span::before {
    content: " " !important;
  }

  .join-step-card,
  .join-step-card + .join-step-card,
  .join-step-card:nth-child(n + 3) {
    border-top: 0 !important;
  }
}


/* v347: keep Start Your Journey hover color changes, but without glow.
   Also remove the older upper line above the new soft Start Your Journey separator. */
.sketch-box-section {
  padding-bottom: 0 !important;
}

.sketch-box-grid {
  border-bottom: 0 !important;
}

.join-flow-section {
  padding-top: clamp(3.1rem, 5.4vw, 5.8rem) !important;
}

.join-flow-section:hover .join-flow-kicker,
.join-flow-section:focus-within .join-flow-kicker,
.join-flow-section:hover .join-flow-heading h2,
.join-flow-section:focus-within .join-flow-heading h2 {
  color: #a9cf3b !important;
  text-shadow: none !important;
  transform: none !important;
}

.join-flow-section:hover .join-flow-heading p:not(.join-flow-kicker),
.join-flow-section:focus-within .join-flow-heading p:not(.join-flow-kicker) {
  color: rgba(245, 234, 212, 0.88) !important;
  text-shadow: none !important;
}

.join-step-card:hover,
.join-step-card:focus-within {
  color: #a9cf3b !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.join-step-card:hover .join-step-number,
.join-step-card:focus-within .join-step-number {
  color: #a9cf3b !important;
  border-color: rgba(169, 207, 59, 0.7) !important;
  box-shadow: none !important;
  transform: none !important;
}

.join-step-card:hover h3,
.join-step-card:focus-within h3 {
  color: #a9cf3b !important;
  text-shadow: none !important;
}

.join-step-card:hover p,
.join-step-card:focus-within p {
  color: rgba(245, 234, 212, 0.9) !important;
  text-shadow: none !important;
}

.join-step-card:hover::after,
.join-step-card:focus-within::after {
  color: #a9cf3b !important;
  text-shadow: none !important;
  transform: none !important;
}

.join-flow-section:hover .join-flow-note,
.join-flow-section:focus-within .join-flow-note {
  color: rgba(245, 234, 212, 0.78) !important;
}


/* v348: force the second journey step title onto two clean lines. */
.join-step-card h3 .join-title-line {
  display: block !important;
  line-height: 1.02 !important;
}


/* v350: separate Abenteuer page for Minecraft + optional KOB/DnD play. */
.abenteuer-page main {
  width: 100%;
  margin: 0;
}

.adventure-page-section {
  position: relative;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(4.4rem, 7vw, 7.2rem) clamp(1rem, 3.5vw, 3.2rem)
    clamp(4.8rem, 7vw, 7.6rem) !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.adventure-page-section::before,
.adventure-page-section::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(78rem, calc(100% - 2rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.42),
    transparent
  );
  opacity: 0.55;
  pointer-events: none;
}

.adventure-page-section::before {
  top: 0;
}

.adventure-page-section::after {
  bottom: 0;
}

.adventure-page-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  text-align: center;
  color: var(--text);
}

.adventure-page-kicker {
  margin: 0 0 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  color: rgba(245, 234, 212, 0.58);
  font-family: var(--font-heading);
  font-size: clamp(0.98rem, 1.32vw, 1.16rem);
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.adventure-page-section h1 {
  max-width: none;
  margin: 0 auto clamp(1.25rem, 2vw, 1.8rem);
  color: rgba(245, 234, 212, 0.94);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: 0.94;
  letter-spacing: 0.04em;
  text-shadow: none;
}

.adventure-page-lead {
  max-width: 820px;
  margin: 0 auto 1.05rem;
  color: rgba(217, 204, 179, 0.76);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.22vw, 1.18rem);
  line-height: 1.7;
}

.adventure-mode-grid {
  width: min(1080px, 100%);
  margin: clamp(2.1rem, 4vw, 3.4rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(245, 234, 212, 0.22);
  border-bottom: 1px solid rgba(245, 234, 212, 0.2);
}

.adventure-mode-card {
  position: relative;
  min-height: 18rem;
  padding: clamp(1.4rem, 2.3vw, 2rem) clamp(1rem, 2vw, 1.55rem);
  background: transparent;
  color: rgba(245, 234, 212, 0.78);
  text-align: center;
}

.adventure-mode-card + .adventure-mode-card::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(245, 234, 212, 0.24),
    transparent
  );
}

.adventure-mode-number {
  display: block;
  margin: 0 auto 0.7rem;
  color: rgba(169, 207, 59, 0.78);
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1;
  letter-spacing: 0.09em;
}

.adventure-mode-card h2 {
  margin: 0 0 0.35rem;
  color: rgba(245, 234, 212, 0.9);
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.045em;
  text-shadow: none;
  text-transform: uppercase;
}

.adventure-mode-tag {
  margin: 0 auto 0.9rem;
  color: rgba(169, 207, 59, 0.82);
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1;
  letter-spacing: 0.045em;
}

.adventure-mode-card p:not(.adventure-mode-tag) {
  max-width: 18.5rem;
  margin: 0 auto;
  color: rgba(217, 204, 179, 0.72);
  font-family: var(--font-body);
  font-size: clamp(0.94rem, 1.04vw, 1.04rem);
  line-height: 1.58;
}

.adventure-note {
  width: min(820px, 100%);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.25rem, 2.6vw, 2rem);
  position: relative;
}

.adventure-note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(38rem, 100%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.3),
    transparent
  );
}

.adventure-note h2 {
  margin: 0 0 0.75rem;
  color: rgba(245, 234, 212, 0.9);
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.7vw, 2.45rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: none;
}

.adventure-note p {
  margin: 0 auto;
  color: rgba(217, 204, 179, 0.74);
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.64;
}

.site-header .nav a[aria-current="page"] {
  color: #a9cf3b !important;
}

@media (max-width: 860px) {
  .adventure-mode-grid {
    grid-template-columns: 1fr;
  }

  .adventure-mode-card {
    min-height: auto;
    padding: 1.45rem 1rem 1.6rem;
  }

  .adventure-mode-card + .adventure-mode-card::before {
    top: 0;
    left: 12%;
    right: 12%;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(245, 234, 212, 0.22),
      transparent
    );
  }
}


/* v351: Abenteuer page uses the user's text as the main page content. */
.adventure-story-inner {
  width: min(980px, 100%) !important;
}

.adventure-story-inner .adventure-page-kicker {
  margin-bottom: clamp(0.75rem, 1.5vw, 1.15rem) !important;
}

.adventure-story-inner h1 {
  max-width: min(900px, 100%) !important;
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem) !important;
}

.adventure-story-text {
  width: min(860px, 100%);
  margin: 0 auto;
  text-align: center;
}

.adventure-story-text p {
  margin: 0 auto clamp(1rem, 1.9vw, 1.42rem);
  color: rgba(245, 234, 212, 0.82);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.24vw, 1.18rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
}

.adventure-story-text p:first-child {
  color: rgba(245, 234, 212, 0.95);
  font-size: clamp(1.1rem, 1.45vw, 1.32rem);
}

.adventure-summary-box {
  position: relative;
  width: min(760px, 100%);
  margin: clamp(1.6rem, 3vw, 2.35rem) auto;
  padding: clamp(1.1rem, 2.2vw, 1.65rem) clamp(1rem, 2.5vw, 2rem);
}

.adventure-summary-box::before,
.adventure-summary-box::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(38rem, 100%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.34),
    transparent
  );
  opacity: 0.85;
}

.adventure-summary-box::before {
  top: 0;
}

.adventure-summary-box::after {
  bottom: 0;
}

.adventure-story-text .adventure-summary-label {
  margin-bottom: 0.45rem;
  color: #a9cf3b;
  font-family: var(--font-heading);
  font-size: clamp(1.22rem, 1.8vw, 1.55rem);
  line-height: 1;
  letter-spacing: 0.05em;
}

.adventure-summary-box p:last-child {
  margin-bottom: 0;
  color: rgba(245, 234, 212, 0.9);
}

@media (max-width: 640px) {
  .adventure-story-text {
    text-align: left;
  }

  .adventure-story-inner h1,
  .adventure-story-inner .adventure-page-kicker {
    text-align: center;
  }

  .adventure-story-text p {
    font-size: 0.98rem;
    line-height: 1.62;
  }
}


/* v354: Treat the hero characters like part of the background.
   They now stay locked to the hero image plane instead of shifting with text/grid/viewport resizing. */
.hero-frame-background {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}

.hero-character-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.hero-time-character,
#heroCharacterImage {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: auto !important;
  height: 92% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(6px) !important;
  transform-origin: center bottom !important;
  pointer-events: none !important;
}

/* The special witch background/aura/hitbox should also stay locked to the same background plane. */
.hero-witch-background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  pointer-events: none !important;
}

.hero-witch-aura,
.hero-witch-lantern-glow,
.hero-aki-sparkles {
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Keep the character stable across breakpoints instead of changing its layout position. */
@media (max-width: 980px) {
  .hero-character-layer {
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
  }

  .hero-time-character,
  #heroCharacterImage {
    left: 50% !important;
    bottom: 0 !important;
    height: 92% !important;
    transform: translateX(-50%) translateY(6px) !important;
  }
}

@media (max-width: 640px) {
  .hero-character-layer {
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
  }

  .hero-time-character,
  #heroCharacterImage {
    left: 50% !important;
    bottom: 0 !important;
    height: 92% !important;
    transform: translateX(-50%) translateY(6px) !important;
  }
}


/* v355: restore the original left-side hero character position,
   while keeping the background-plane anchoring from v354.
   The character position now uses the same background-based JS variables as before,
   so it sits back at the old left placement instead of being centered. */
.hero-frame-background {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}

.hero-character-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.hero-time-character,
#heroCharacterImage {
  position: absolute !important;
  left: var(--hero-character-left-px, 18.9%) !important;
  bottom: var(--hero-character-bottom-px, 2.6%) !important;
  height: var(--hero-character-height-px, 74%) !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(0) !important;
  transform-origin: center bottom !important;
  pointer-events: none !important;
}

.hero-frame:hover .hero-time-character,
.hero-frame.is-color-active .hero-time-character,
.hero-frame.is-color-active .hero-time-character.is-ready,
.hero-frame:hover #heroCharacterImage,
.hero-frame.is-color-active #heroCharacterImage,
.hero-frame.is-color-active #heroCharacterImage.is-ready {
  left: var(--hero-character-left-px, 18.9%) !important;
  bottom: var(--hero-character-bottom-px, 2.6%) !important;
  height: var(--hero-character-height-px, 74%) !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Preserve the special Witch placement instead of letting the generic image ID center it. */
.hero-time-character[data-character="witch"],
#heroCharacterImage[data-character="witch"] {
  left: var(--hero-witch-left-px, 97.2%) !important;
  bottom: var(--hero-witch-bottom-px, 25%) !important;
  height: var(--hero-witch-height-px, 20rem) !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) translateY(0) !important;
  transform-origin: center bottom !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}

.hero-frame:hover .hero-time-character[data-character="witch"],
.hero-frame.is-color-active .hero-time-character[data-character="witch"],
.hero-frame.is-color-active .hero-time-character[data-character="witch"].is-ready,
.hero-frame:hover #heroCharacterImage[data-character="witch"],
.hero-frame.is-color-active #heroCharacterImage[data-character="witch"],
.hero-frame.is-color-active #heroCharacterImage[data-character="witch"].is-ready {
  left: var(--hero-witch-left-px, 97.2%) !important;
  bottom: var(--hero-witch-bottom-px, 25%) !important;
  height: var(--hero-witch-height-px, 20rem) !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Keep the position consistent across breakpoints; do not re-center on smaller screens. */
@media (max-width: 980px) {
  .hero-time-character,
  #heroCharacterImage {
    left: var(--hero-character-left-px, 18.9%) !important;
    bottom: var(--hero-character-bottom-px, 2.6%) !important;
    height: var(--hero-character-height-px, 72%) !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .hero-time-character[data-character="witch"],
  #heroCharacterImage[data-character="witch"] {
    left: var(--hero-witch-left-px, 97.2%) !important;
    bottom: var(--hero-witch-bottom-px, 25%) !important;
    height: var(--hero-witch-height-px, 20rem) !important;
  }
}

@media (max-width: 760px) {
  .hero-time-character,
  #heroCharacterImage,
  .hero-frame.is-color-active .hero-time-character.is-ready,
  .hero-frame.is-color-active #heroCharacterImage.is-ready {
    left: var(--hero-character-left-px, 18.9%) !important;
    bottom: var(--hero-character-bottom-px, 2.6%) !important;
    height: var(--hero-character-height-px, 72%) !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .hero-time-character[data-character="witch"],
  #heroCharacterImage[data-character="witch"] {
    left: var(--hero-witch-left-px, 97.2%) !important;
    bottom: var(--hero-witch-bottom-px, 25%) !important;
    height: var(--hero-witch-height-px, 20rem) !important;
  }
}


/* v356: ARC I initial white light hint.
   Only the unclicked magic light gets proximity sparkles. The golden click/flying/lantern sequence is untouched. */
.arc-magic-light {
  --arc-light-proximity: 0;
  --arc-light-sparkle-opacity: calc(var(--arc-light-proximity) * 0.95);
  --arc-light-sparkle-scale: calc(0.72 + (var(--arc-light-proximity) * 0.42));
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light.is-arc-light-near::before {
  filter: blur(calc(0.18rem - (var(--arc-light-proximity) * 0.04rem)))
    brightness(calc(1 + (var(--arc-light-proximity) * 0.16))) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light.is-arc-light-near
  .arc-magic-light-core {
  box-shadow:
    0 0 1.1rem rgba(255, 244, 201, 0.95),
    0 0 calc(2rem + (var(--arc-light-proximity) * 0.8rem)) rgba(255, 246, 214, 0.72) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light
  .arc-magic-light-core::before,
.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light
  .arc-magic-light-core::after {
  content: "";
  position: absolute;
  inset: -190%;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--arc-light-sparkle-opacity);
  transform: scale(var(--arc-light-sparkle-scale));
  transform-origin: center;
  mix-blend-mode: screen;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light
  .arc-magic-light-core::before {
  background:
    radial-gradient(circle at 20% 26%, rgba(255,255,255,0.98) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.9) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 88% 54%, rgba(255,255,255,0.88) 0 1.35px, transparent 2.4px),
    radial-gradient(circle at 34% 82%, rgba(255,255,255,0.82) 0 1.25px, transparent 2.3px),
    radial-gradient(circle at 58% 70%, rgba(255,250,220,0.8) 0 1.1px, transparent 2.2px);
  animation: arcWhiteLightSparkleNear 1100ms ease-in-out infinite;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light
  .arc-magic-light-core::after {
  inset: -250%;
  background:
    radial-gradient(circle at 46% 12%, rgba(255,255,255,0.82) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 34%, rgba(255,255,255,0.82) 0 1px, transparent 2px),
    radial-gradient(circle at 16% 58%, rgba(255,255,255,0.76) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 92%, rgba(255,255,255,0.72) 0 1px, transparent 2px);
  animation: arcWhiteLightSparkleFar 1450ms ease-in-out infinite;
}

.arc-showcase-section.is-arc-sequence-started .arc-magic-light .arc-magic-light-core::before,
.arc-showcase-section.is-arc-sequence-started .arc-magic-light .arc-magic-light-core::after,
.arc-showcase-section.is-arc-spark-flying .arc-magic-light .arc-magic-light-core::before,
.arc-showcase-section.is-arc-spark-flying .arc-magic-light .arc-magic-light-core::after,
.arc-showcase-section.is-arc-lantern-lit .arc-magic-light .arc-magic-light-core::before,
.arc-showcase-section.is-arc-lantern-lit .arc-magic-light .arc-magic-light-core::after,
.arc-showcase-section.is-arc-awakened .arc-magic-light .arc-magic-light-core::before,
.arc-showcase-section.is-arc-awakened .arc-magic-light .arc-magic-light-core::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

@keyframes arcWhiteLightSparkleNear {
  0%, 100% {
    opacity: calc(var(--arc-light-sparkle-opacity) * 0.42);
    transform: scale(calc(var(--arc-light-sparkle-scale) * 0.94)) rotate(0deg);
  }

  42% {
    opacity: calc(var(--arc-light-sparkle-opacity) * 1);
    transform: scale(calc(var(--arc-light-sparkle-scale) * 1.04)) rotate(10deg);
  }

  68% {
    opacity: calc(var(--arc-light-sparkle-opacity) * 0.62);
    transform: scale(calc(var(--arc-light-sparkle-scale) * 0.98)) rotate(18deg);
  }
}

@keyframes arcWhiteLightSparkleFar {
  0%, 100% {
    opacity: calc(var(--arc-light-sparkle-opacity) * 0.22);
    transform: scale(calc(var(--arc-light-sparkle-scale) * 0.96)) rotate(0deg);
  }

  50% {
    opacity: calc(var(--arc-light-sparkle-opacity) * 0.74);
    transform: scale(calc(var(--arc-light-sparkle-scale) * 1.08)) rotate(-12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-magic-light .arc-magic-light-core::before,
  .arc-magic-light .arc-magic-light-core::after {
    animation: none !important;
  }
}


/* v357: make only the initial white ARC I proximity sparkle much more visible. */
.arc-magic-light {
  --arc-light-sparkle-opacity: calc(var(--arc-light-proximity) * 1.35);
  --arc-light-sparkle-scale: calc(0.92 + (var(--arc-light-proximity) * 0.72));
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light.is-arc-light-near
  .arc-magic-light-core::before,
.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light.is-arc-light-near
  .arc-magic-light-core::after {
  filter: brightness(1.75)
    drop-shadow(0 0 0.22rem rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 0.48rem rgba(255, 246, 205, 0.78)) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light
  .arc-magic-light-core::before {
  background:
    radial-gradient(circle at 20% 26%, rgba(255,255,255,1) 0 2.8px, transparent 4.2px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.98) 0 2.4px, transparent 3.9px),
    radial-gradient(circle at 88% 54%, rgba(255,255,255,0.96) 0 2.6px, transparent 4.1px),
    radial-gradient(circle at 34% 82%, rgba(255,255,255,0.94) 0 2.4px, transparent 3.8px),
    radial-gradient(circle at 58% 70%, rgba(255,250,220,0.92) 0 2.2px, transparent 3.6px),
    radial-gradient(circle at 46% 38%, rgba(255,255,255,0.86) 0 1.9px, transparent 3.2px),
    radial-gradient(circle at 12% 62%, rgba(255,255,255,0.82) 0 1.8px, transparent 3.1px),
    radial-gradient(circle at 76% 84%, rgba(255,255,255,0.84) 0 1.8px, transparent 3.1px) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light
  .arc-magic-light-core::after {
  background:
    radial-gradient(circle at 46% 12%, rgba(255,255,255,0.94) 0 2px, transparent 3.5px),
    radial-gradient(circle at 82% 34%, rgba(255,255,255,0.94) 0 2px, transparent 3.5px),
    radial-gradient(circle at 16% 58%, rgba(255,255,255,0.9) 0 2px, transparent 3.5px),
    radial-gradient(circle at 64% 92%, rgba(255,255,255,0.88) 0 2px, transparent 3.4px),
    radial-gradient(circle at 28% 88%, rgba(255,250,220,0.82) 0 1.7px, transparent 3.1px),
    radial-gradient(circle at 92% 76%, rgba(255,250,220,0.8) 0 1.7px, transparent 3.1px) !important;
}

.arc-showcase-section:not(.is-arc-sequence-started):not(.is-arc-spark-flying):not(.is-arc-lantern-lit):not(.is-arc-awakened)
  .arc-magic-light.is-arc-light-near
  .arc-magic-light-core {
  box-shadow:
    0 0 1.35rem rgba(255, 255, 255, 0.95),
    0 0 calc(2.6rem + (var(--arc-light-proximity) * 1.25rem)) rgba(255, 246, 214, 0.92) !important;
}


/* v358: Header subcategory under Abenteuer + Character Builder page. */
.site-header .nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-header .nav-dropdown-main {
  position: relative;
  z-index: 2;
}

.site-header .nav-submenu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  z-index: 50;
  min-width: max(12rem, 100%);
  padding: 0.55rem 0.75rem;
  transform: translateX(-50%) translateY(-0.35rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.94);
  border-top: 1px solid rgba(245, 234, 212, 0.2);
  border-bottom: 1px solid rgba(245, 234, 212, 0.16);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.site-header .nav-dropdown:hover .nav-submenu,
.site-header .nav-dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.site-header .nav-submenu::before,
.site-header .nav-submenu::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(245, 234, 212, 0.28), transparent);
}

.site-header .nav-submenu::before { top: 0; }
.site-header .nav-submenu::after { bottom: 0; }

.site-header .nav-submenu a {
  min-height: auto !important;
  padding: 0.55rem 0.2rem !important;
  display: flex !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem) !important;
}

.site-header .nav-submenu a[aria-current="page"] {
  color: #a9cf3b !important;
}

.character-builder-page main {
  width: 100%;
  margin: 0;
}

.character-builder-section {
  position: relative;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(4.4rem, 7vw, 7.2rem) clamp(1rem, 3.5vw, 3.2rem)
    clamp(4.8rem, 7vw, 7.6rem) !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.character-builder-section::before,
.character-builder-section::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(78rem, calc(100% - 2rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(245, 234, 212, 0.42), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.character-builder-section::before { top: 0; }
.character-builder-section::after { bottom: 0; }

.character-builder-inner {
  width: min(900px, 100%);
  margin: 0 auto;
  text-align: center;
  color: var(--text);
}

.character-builder-kicker {
  margin: 0 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  color: rgba(245, 234, 212, 0.58);
  font-family: var(--font-heading);
  font-size: clamp(0.98rem, 1.32vw, 1.16rem);
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.character-builder-section h1 {
  max-width: none;
  margin: 0 auto clamp(1.2rem, 2.4vw, 1.9rem);
  color: rgba(245, 234, 212, 0.94);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: 0.94;
  letter-spacing: 0.04em;
  text-shadow: none;
}

.character-builder-lead,
.character-builder-text {
  max-width: 780px;
  margin: 0 auto 1rem;
  color: rgba(217, 204, 179, 0.76);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.22vw, 1.18rem);
  line-height: 1.7;
}


/* v359: Character Builder moved under its own Character Creation header category.
   Adventure is now a normal top-level page link. */
.site-header .nav-dropdown-character-creation {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-header .nav-dropdown-character-creation .nav-submenu {
  top: calc(100% + 0.3rem) !important;
  left: 50% !important;
  min-width: 13.5rem !important;
  padding: 0.52rem 0.8rem !important;
  transform: translateX(-50%) translateY(-0.28rem) !important;
}

.site-header .nav-dropdown-character-creation:hover .nav-submenu,
.site-header .nav-dropdown-character-creation:focus-within .nav-submenu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.site-header .nav-dropdown-character-creation .nav-submenu a {
  white-space: nowrap !important;
  text-align: center !important;
}

.site-header .nav-dropdown-main[aria-current="page"] {
  color: #a9cf3b !important;
}


/* v360: Make the Character Creation dropdown reliably clickable from Home.
   The invisible bridge prevents the submenu from closing while moving the mouse downward. */
.site-header .nav-dropdown-character-creation::after {
  content: "";
  position: absolute;
  left: -0.65rem;
  right: -0.65rem;
  top: 100%;
  height: 0.7rem;
  z-index: 49;
  background: transparent;
  pointer-events: auto;
}

.site-header .nav-dropdown-character-creation .nav-submenu {
  top: calc(100% + 0.08rem) !important;
}

.site-header .nav-dropdown-character-creation:hover .nav-submenu,
.site-header .nav-dropdown-character-creation:focus-within .nav-submenu,
.site-header .nav-dropdown-character-creation .nav-submenu:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.site-header .nav-dropdown-character-creation .nav-dropdown-main,
.site-header .nav-dropdown-character-creation .nav-submenu a {
  pointer-events: auto !important;
}


/* v361: Full site structure navigation. */
.site-header .nav {
  gap: clamp(0.55rem, 1.25vw, 1.45rem) !important;
}

.site-header .nav-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-header .nav-dropdown::after {
  content: "";
  position: absolute;
  left: -0.8rem;
  right: -0.8rem;
  top: 100%;
  height: 0.72rem;
  z-index: 49;
  background: transparent;
  pointer-events: auto;
}

.site-header .nav-dropdown-main {
  position: relative !important;
  z-index: 51 !important;
}

.site-header .nav-submenu {
  position: absolute !important;
  top: calc(100% + 0.08rem) !important;
  left: 50% !important;
  z-index: 50 !important;
  min-width: max(11.5rem, 100%) !important;
  padding: 0.52rem 0.82rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.04rem !important;
  transform: translateX(-50%) translateY(-0.25rem) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0.94) !important;
  border-top: 1px solid rgba(245, 234, 212, 0.22) !important;
  border-bottom: 1px solid rgba(245, 234, 212, 0.18) !important;
  box-shadow: none !important;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease !important;
}

.site-header .nav-dropdown:hover .nav-submenu,
.site-header .nav-dropdown:focus-within .nav-submenu,
.site-header .nav-submenu:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.site-header .nav-submenu::before,
.site-header .nav-submenu::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.28),
    transparent
  );
}

.site-header .nav-submenu::before {
  top: 0;
}

.site-header .nav-submenu::after {
  bottom: 0;
}

.site-header .nav-submenu a {
  min-height: auto !important;
  padding: 0.42rem 0.2rem !important;
  display: flex !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: clamp(0.94rem, 1.18vw, 1.12rem) !important;
  line-height: 1.05 !important;
  pointer-events: auto !important;
  text-align: center !important;
}

.site-header .nav-submenu-large {
  min-width: 15.5rem !important;
  max-height: min(72vh, 35rem) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
}

.site-header .nav-dropdown-main[aria-current="page"],
.site-header .nav-submenu a[aria-current="page"] {
  color: #a9cf3b !important;
}

.structure-page-section {
  position: relative;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(4.6rem, 7vw, 7.4rem) clamp(1rem, 3.5vw, 3.2rem)
    clamp(5rem, 7.5vw, 8rem) !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.structure-page-section::before,
.structure-page-section::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(78rem, calc(100% - 2rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 234, 212, 0.42),
    transparent
  );
  opacity: 0.55;
  pointer-events: none;
}

.structure-page-section::before {
  top: 0;
}

.structure-page-section::after {
  bottom: 0;
}

.structure-page-inner {
  width: min(900px, 100%);
  margin: 0 auto;
  text-align: center;
  color: var(--text);
}

.structure-page-kicker {
  margin: 0 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  color: rgba(245, 234, 212, 0.58);
  font-family: var(--font-heading);
  font-size: clamp(0.98rem, 1.32vw, 1.16rem);
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.structure-page-section h1 {
  max-width: none;
  margin: 0 auto clamp(1.2rem, 2.4vw, 1.9rem);
  color: rgba(245, 234, 212, 0.94);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: 0.94;
  letter-spacing: 0.04em;
  text-shadow: none;
}

.structure-page-lead,
.structure-page-text {
  max-width: 780px;
  margin: 0 auto 1rem;
  color: rgba(217, 204, 179, 0.76);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.22vw, 1.18rem);
  line-height: 1.7;
}

@media (max-width: 980px) {
  .site-header .nav {
    gap: clamp(0.42rem, 1vw, 0.75rem) !important;
  }

  .site-header .nav-submenu a {
    font-size: 0.95rem !important;
  }
}


/* v362: Beacons added as a Home subpage next to Team. */
.site-header .nav-dropdown-home .nav-submenu {
  min-width: 10.5rem !important;
}


/* v363: Header nav rebuilt to remove duplicated top-level categories. */
.site-header .nav {
  gap: clamp(0.55rem, 1.25vw, 1.45rem) !important;
}

.site-header .nav > .nav-dropdown {
  display: inline-flex !important;
}

.site-header .nav .nav-dropdown-main,
.site-header .nav .nav-submenu a {
  white-space: nowrap !important;
}


/* v375: Single header button system.
   Ziel: ein einziger Weg für alle Haupt-Header-Buttons.
   - Alle Hauptbuttons nutzen dieselbe feste Bildfläche.
   - Es wird ausschließlich das vorhandene graue Button-Asset verwendet.
   - Die Glyphe ist dauerhaft sichtbar und wird nicht über ein zweites Farbsystem erzeugt.
   - Keine gray→color-Reveal-Ebene, keine alten goom-rune-* Layer. */
.site-header .nav a.goom-header-button,
.site-header .nav a.goom-header-button:not(.discord-nav-link) {
  position: relative !important;
  display: block !important;
  width: clamp(12.1rem, 16.5vw, 17.2rem) !important;
  aspect-ratio: 762 / 169 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: #d8d0c8 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: none !important;
}

.site-header .nav a.goom-header-button::before,
.site-header .nav a.goom-header-button::after {
  content: none !important;
  display: none !important;
}

.site-header .goom-header-button-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("buttons/button01.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0.42rem 0.42rem rgba(0, 0, 0, 0.45)) !important;
}

.site-header .goom-header-button-glyph {
  position: absolute !important;
  left: 14.173% !important;
  top: 21.893% !important;
  width: 19.685% !important;
  height: 55.621% !important;
  z-index: 2 !important;
  display: block !important;
  background-image: url("buttons/glyph01-dark.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

.site-header .goom-header-button-text {
  position: absolute !important;
  left: 33% !important;
  right: 10% !important;
  top: 49% !important;
  z-index: 3 !important;
  display: block !important;
  transform: translateY(-50%) !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(0.95rem, 1.35vw, 1.42rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.045em !important;
  text-align: center !important;
  white-space: nowrap !important;
  color: #d8d0c8 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 2px rgba(0, 0, 0, 0.58) !important;
  pointer-events: none !important;
}

.site-header .goom-header-button:hover,
.site-header .goom-header-button:focus-visible {
  transform: none !important;
  color: #f2ede5 !important;
}

.site-header .goom-header-button:hover .goom-header-button-text,
.site-header .goom-header-button:focus-visible .goom-header-button-text,
.site-header .goom-header-button[aria-current="page"] .goom-header-button-text {
  color: #f2ede5 !important;
}

@media (max-width: 760px) {
  .site-header .nav a.goom-header-button,
  .site-header .nav a.goom-header-button:not(.discord-nav-link) {
    width: min(92vw, 18rem) !important;
  }

  .site-header .goom-header-button-text {
    font-size: clamp(0.9rem, 4.2vw, 1.25rem) !important;
  }
}


/* --------------------------------------------------------------------------
   GOOM v377 regression hotfix
   Restores the visual effects that were accidentally simplified in v376:
   - random Discord hover icon
   - header rune hover animation + final shine pass
   - unfiltered header button art
   - stable hero gray/color reveal
   - HeroCreditGlitch/A Glitch In Time credit font
   - faded separators for the multi-box grid
   -------------------------------------------------------------------------- */

/* Header buttons: keep the original button art clean. No darkening/filter layer. */
.site-header .nav a.goom-header-button,
.site-header .nav a.goom-header-button:not(.discord-nav-link),
.site-header .goom-header-button-bg,
.site-header .goom-header-button-glyph,
.site-header .goom-header-button-text {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.site-header .goom-header-button-bg {
  opacity: 1 !important;
  background-image: url("buttons/button01.png") !important;
  filter: none !important;
}

.site-header .goom-header-button-glyph {
  position: absolute !important;
  overflow: visible !important;
  opacity: 0.96 !important;
  background-image: url("buttons/glyph01-dark.png") !important;
  filter: none !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center center !important;
  transition: opacity 220ms ease, transform 260ms ease !important;
}

.site-header .goom-header-button-glyph::before,
.site-header .goom-header-button-glyph::after {
  content: "" !important;
  position: absolute !important;
  inset: -10% !important;
  display: block !important;
  pointer-events: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 0 !important;
}

.site-header .goom-header-button-glyph::before {
  background-image: url("buttons/glyph01-glow.png"), url("buttons/glyph01-highlight.png") !important;
  filter: none !important;
}

.site-header .goom-header-button-glyph::after {
  inset: -18% !important;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 34%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 247, 215, 0.88) 50%,
    rgba(255, 255, 255, 0.18) 58%,
    transparent 70%,
    transparent 100%
  ) !important;
  -webkit-mask: url("buttons/glyph01-mask.png") center / contain no-repeat !important;
  mask: url("buttons/glyph01-mask.png") center / contain no-repeat !important;
  transform: translateX(-135%) !important;
}

.site-header .goom-header-button:hover .goom-header-button-glyph,
.site-header .goom-header-button:focus-visible .goom-header-button-glyph {
  opacity: 1 !important;
  animation: goomRuneGlyphPulseV377 760ms ease both !important;
}

.site-header .goom-header-button:hover .goom-header-button-glyph::before,
.site-header .goom-header-button:focus-visible .goom-header-button-glyph::before {
  animation: goomRuneGlyphGlowV377 880ms ease both !important;
}

.site-header .goom-header-button:hover .goom-header-button-glyph::after,
.site-header .goom-header-button:focus-visible .goom-header-button-glyph::after {
  animation: goomRuneGlyphFinalShineV377 1180ms cubic-bezier(0.18, 0.82, 0.26, 1) 180ms both !important;
}

@keyframes goomRuneGlyphPulseV377 {
  0% { transform: translateZ(0) scale(1); }
  36% { transform: translateZ(0) scale(1.045); }
  100% { transform: translateZ(0) scale(1); }
}

@keyframes goomRuneGlyphGlowV377 {
  0% { opacity: 0; }
  34% { opacity: 0.55; }
  72% { opacity: 0.26; }
  100% { opacity: 0; }
}

@keyframes goomRuneGlyphFinalShineV377 {
  0% { opacity: 0; transform: translateX(-135%); }
  24% { opacity: 0.85; }
  58% { opacity: 0.55; }
  100% { opacity: 0; transform: translateX(135%); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .goom-header-button:hover .goom-header-button-glyph,
  .site-header .goom-header-button:focus-visible .goom-header-button-glyph,
  .site-header .goom-header-button:hover .goom-header-button-glyph::before,
  .site-header .goom-header-button:focus-visible .goom-header-button-glyph::before,
  .site-header .goom-header-button:hover .goom-header-button-glyph::after,
  .site-header .goom-header-button:focus-visible .goom-header-button-glyph::after {
    animation: none !important;
  }
}

/* Discord hover: two-layer icon swap with random hover image supplied by JS. */
.site-header .discord-nav-link {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.site-header .discord-icon,
.site-header .discord-icon-normal,
.site-header .discord-icon-hover {
  grid-area: 1 / 1 !important;
  display: block !important;
  filter: none !important;
  box-shadow: none !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

.site-header .discord-icon-normal {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.site-header .discord-icon-hover {
  opacity: 0 !important;
  transform: scale(1) rotate(0deg) !important;
  transform-origin: center center !important;
}

.site-header .discord-nav-link:hover .discord-icon-normal,
.site-header .discord-nav-link:focus-visible .discord-icon-normal {
  opacity: 0 !important;
  transform: scale(1) !important;
}

.site-header .discord-nav-link:hover .discord-icon-hover,
.site-header .discord-nav-link:focus-visible .discord-icon-hover {
  opacity: 1 !important;
  transform: scale(1.72) rotate(10deg) !important;
}

/* Hero box: keep gray/sketch visible until the color image is truly ready. */
.hero-frame .background-image-gray {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transition: opacity 850ms ease !important;
}

.hero-frame .background-image-color {
  opacity: 0 !important;
  visibility: visible !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transition: opacity 950ms ease !important;
}

.hero-frame:hover .background-image-color.is-visible.is-ready,
.hero-frame.is-color-active .background-image-color.is-visible.is-ready {
  opacity: 1 !important;
}

.hero-frame:hover:has(.background-image-color.is-visible.is-ready) .background-image-gray.is-visible,
.hero-frame.is-color-active:has(.background-image-color.is-visible.is-ready) .background-image-gray.is-visible {
  opacity: 0 !important;
}

.hero-character-credit,
.hero-character-credit-name,
.hero-character-credit-by {
  font-family: "A Glitch In Time", "HeroCreditGlitch", var(--font-heading) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  text-align: left !important;
}

.hero-character-credit-by {
  font-family: "A Glitch In Time", "HeroCreditGlitch", var(--font-heading) !important;
  font-size: clamp(0.82rem, 1.08vw, 1.02rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.06em !important;
}

/* Multi-box section: faded beginning/end separators instead of hard full-width lines. */
.sketch-box-grid {
  position: relative !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.sketch-box-grid::before,
.sketch-box-grid::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(245, 234, 212, 0.34), transparent) !important;
}

.sketch-box-grid::before { top: 0 !important; }
.sketch-box-grid::after { bottom: 0 !important; }


/* --------------------------------------------------------------------------
   GOOM v378 targeted hotfix
   - Header Discord icon scale restored/lifted.
   - Hero sketch image is shown without the bright overlay/filter stack.
   - "gespielt von ..." credit text is three visual steps larger.
   - ARC-I behavior is intentionally left untouched.
   -------------------------------------------------------------------------- */

/* Header Discord: larger normal and hover icons. Keep random hover swap intact. */
.site-header .discord-nav-link {
  width: clamp(4.75rem, 6.2vw, 6.05rem) !important;
  height: clamp(4.75rem, 6.2vw, 6.05rem) !important;
  min-width: clamp(4.75rem, 6.2vw, 6.05rem) !important;
  min-height: clamp(4.75rem, 6.2vw, 6.05rem) !important;
  padding: 0 !important;
  overflow: visible !important;
}

.site-header .discord-icon,
.site-header .discord-icon-normal,
.site-header .discord-icon-hover {
  width: clamp(4.35rem, 5.65vw, 5.55rem) !important;
  height: clamp(4.35rem, 5.65vw, 5.55rem) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  transform-origin: center center !important;
}

.site-header .discord-icon-normal {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

.site-header .discord-icon-hover {
  opacity: 0 !important;
  transform: scale(1.08) rotate(0deg) !important;
}

.site-header .discord-nav-link:hover .discord-icon-normal,
.site-header .discord-nav-link:focus-visible .discord-icon-normal {
  opacity: 0 !important;
  transform: scale(1.08) !important;
}

.site-header .discord-nav-link:hover .discord-icon-hover,
.site-header .discord-nav-link:focus-visible .discord-icon-hover {
  opacity: 1 !important;
  transform: scale(1.46) rotate(10deg) !important;
}

@media (max-width: 980px) {
  .site-header .discord-nav-link {
    width: clamp(4.05rem, 8.4vw, 5.05rem) !important;
    height: clamp(4.05rem, 8.4vw, 5.05rem) !important;
    min-width: clamp(4.05rem, 8.4vw, 5.05rem) !important;
    min-height: clamp(4.05rem, 8.4vw, 5.05rem) !important;
  }

  .site-header .discord-icon,
  .site-header .discord-icon-normal,
  .site-header .discord-icon-hover {
    width: clamp(3.65rem, 7.5vw, 4.55rem) !important;
    height: clamp(3.65rem, 7.5vw, 4.55rem) !important;
  }
}

@media (max-width: 760px) {
  .site-header .discord-nav-link {
    width: clamp(3.35rem, 12vw, 4.05rem) !important;
    height: clamp(3.35rem, 12vw, 4.05rem) !important;
    min-width: clamp(3.35rem, 12vw, 4.05rem) !important;
    min-height: clamp(3.35rem, 12vw, 4.05rem) !important;
  }

  .site-header .discord-icon,
  .site-header .discord-icon-normal,
  .site-header .discord-icon-hover {
    width: clamp(3rem, 10.5vw, 3.55rem) !important;
    height: clamp(3rem, 10.5vw, 3.55rem) !important;
  }

  .site-header .discord-nav-link:hover .discord-icon-hover,
  .site-header .discord-nav-link:focus-visible .discord-icon-hover {
    transform: scale(1.22) rotate(8deg) !important;
  }
}

/* Hero sketch: show the black/white sketch art exactly, without bright overlay/filter treatment. */
.hero-frame:not(.is-color-active):not(:hover) .hero-frame-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}

.hero-sketch-background {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  background-blend-mode: normal !important;
}

.hero-frame:not(.is-color-active):not(:hover) .background-image-gray {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.hero-frame:not(.is-color-active):not(:hover) .background-image-color {
  opacity: 0 !important;
}

/* Keep the color reveal stable on hover, but do not apply the old clipped/filter reveal stack. */
.hero-frame:hover .background-image-color.is-visible.is-ready,
.hero-frame.is-color-active .background-image-color.is-visible.is-ready {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero-frame:hover .hero-sketch-background,
.hero-frame.is-color-active .hero-sketch-background {
  opacity: 0 !important;
}

/* Hero credit: make only the by-line / "gespielt von ..." visibly larger. */
.hero-character-credit-by {
  font-size: clamp(1.08rem, 1.36vw, 1.3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.055em !important;
}

@media (max-width: 760px) {
  .hero-character-credit-by {
    font-size: clamp(0.96rem, 3.8vw, 1.16rem) !important;
  }
}

/* --------------------------------------------------------------------------
   GOOM v379 header button correction
   Source direction: uploaded hover demo index.html.
   Goal:
   - Use only buttons/button01.png for the header button base.
   - Normal state: button01 shown in grayscale only, without darkening/brightness filters.
   - Hover/focus state: button01 returns to full color.
   - Rune gets a colored birth/glow pass and a final shine sweep, matching the demo intent.
   - The existing visible header labels stay readable; they are not hidden in normal navigation.
   -------------------------------------------------------------------------- */
:root {
  --rune-gold: #ffd26a;
  --rune-orange: #ff8e3c;
  --rune-cyan: #83ffe7;
}

.site-header .nav a.goom-header-button:not(.discord-nav-link) {
  background: transparent !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.site-header .nav a.goom-header-button:not(.discord-nav-link)::before,
.site-header .nav a.goom-header-button:not(.discord-nav-link)::after {
  content: none !important;
  display: none !important;
}

.site-header .goom-header-button-bg {
  background-image: url("buttons/button01.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transform: translateY(0) translateZ(0) !important;
  transform-origin: center center !important;
  filter: grayscale(1) saturate(0) !important;
  -webkit-filter: grayscale(1) saturate(0) !important;
  transition: transform 220ms ease, filter 220ms ease !important;
}

.site-header .goom-header-button:hover .goom-header-button-bg,
.site-header .goom-header-button:focus-visible .goom-header-button-bg {
  transform: translateY(-2px) translateZ(0) !important;
  filter: grayscale(0) saturate(1) !important;
  -webkit-filter: grayscale(0) saturate(1) !important;
}

.site-header .goom-header-button-glyph {
  position: absolute !important;
  left: 14.173% !important;
  top: 21.893% !important;
  width: 19.685% !important;
  height: 55.621% !important;
  z-index: 4 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  background-image: url("buttons/glyph01-dark.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 0.78 !important;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) !important;
  -webkit-filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center center !important;
  transition: opacity 220ms ease, transform 260ms ease !important;
}

.site-header .goom-header-button-glyph::before,
.site-header .goom-header-button-glyph::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  -webkit-mask-image: url("buttons/glyph01-mask.png") !important;
  mask-image: url("buttons/glyph01-mask.png") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  opacity: 0 !important;
}

.site-header .goom-header-button-glyph::before {
  z-index: 2 !important;
  background: linear-gradient(115deg, var(--rune-orange), var(--rune-gold) 45%, var(--rune-cyan) 82%) !important;
  clip-path: inset(0 100% 0 0) !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 170, 62, 0.65))
    drop-shadow(0 0 10px rgba(255, 201, 90, 0.55)) !important;
  -webkit-filter:
    drop-shadow(0 0 3px rgba(255, 170, 62, 0.65))
    drop-shadow(0 0 10px rgba(255, 201, 90, 0.55)) !important;
}

.site-header .goom-header-button-glyph::after {
  inset: -18% !important;
  width: 136% !important;
  height: 136% !important;
  z-index: 3 !important;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.95) 48%,
    rgba(255, 210, 106, 0.95) 53%,
    transparent 70%,
    transparent 100%) !important;
  background-size: 230% 100% !important;
  background-position: 130% 0 !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 14px rgba(131, 255, 231, 0.65)) !important;
  -webkit-filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 14px rgba(131, 255, 231, 0.65)) !important;
}

.site-header .goom-header-button:hover .goom-header-button-glyph,
.site-header .goom-header-button:focus-visible .goom-header-button-glyph {
  opacity: 1 !important;
  animation: goomRunePulseV379 760ms ease both !important;
}

.site-header .goom-header-button:hover .goom-header-button-glyph::before,
.site-header .goom-header-button:focus-visible .goom-header-button-glyph::before {
  animation: goomRuneBirthV379 740ms cubic-bezier(0.22, 0.78, 0.28, 1) forwards !important;
}

.site-header .goom-header-button:hover .goom-header-button-glyph::after,
.site-header .goom-header-button:focus-visible .goom-header-button-glyph::after {
  animation: goomRuneWanderV379 960ms ease 180ms forwards !important;
}

.site-header .goom-header-button-text {
  z-index: 5 !important;
  opacity: 1 !important;
  color: #f9e6b8 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: translateY(-50%) translateX(0) !important;
  transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease !important;
}

.site-header .goom-header-button:hover .goom-header-button-text,
.site-header .goom-header-button:focus-visible .goom-header-button-text {
  color: #fff1c8 !important;
  transform: translateY(-50%) translateX(2px) !important;
  text-shadow:
    0 2px 0 rgba(50, 24, 8, 0.9),
    0 0 10px rgba(255, 196, 83, 0.58),
    0 0 18px rgba(255, 143, 60, 0.28) !important;
}

@keyframes goomRunePulseV379 {
  0% { transform: translateZ(0) scale(1); }
  36% { transform: translateZ(0) scale(1.045); }
  100% { transform: translateZ(0) scale(1); }
}

@keyframes goomRuneBirthV379 {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: scale(0.96);
  }
  22% { opacity: 0.65; }
  72% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1.025);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

@keyframes goomRuneWanderV379 {
  0% {
    opacity: 0;
    background-position: 130% 0;
  }
  25% { opacity: 0.95; }
  100% {
    opacity: 0;
    background-position: -95% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .goom-header-button:hover .goom-header-button-glyph,
  .site-header .goom-header-button:focus-visible .goom-header-button-glyph,
  .site-header .goom-header-button:hover .goom-header-button-glyph::before,
  .site-header .goom-header-button:focus-visible .goom-header-button-glyph::before,
  .site-header .goom-header-button:hover .goom-header-button-glyph::after,
  .site-header .goom-header-button:focus-visible .goom-header-button-glyph::after {
    animation: none !important;
  }

  .site-header .goom-header-button:hover .goom-header-button-glyph::before,
  .site-header .goom-header-button:focus-visible .goom-header-button-glyph::before {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
  }
}



/* --------------------------------------------------------------------------
   GOOM v380 header button animation fix
   Based on the uploaded demo structure, but adapted for real navigation.

   Fixes:
   - The rune/sign is not visible in the normal state.
   - Only buttons/button01.png is used; normal state is grayscale via CSS.
   - On hover/focus the same button image returns to full color.
   - The button anchor moves as one object, so background, text and rune travel together.
   - The rune animation now uses real child layers instead of pseudo-elements.
     This avoids the earlier issue where old !important opacity rules blocked keyframe animation.
   -------------------------------------------------------------------------- */
:root {
  --rune-gold: #ffd26a;
  --rune-orange: #ff8e3c;
  --rune-cyan: #83ffe7;
}

.site-header .nav a.goom-header-button:not(.discord-nav-link) {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  background: transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: translateY(0) translateZ(0) !important;
  transform-origin: center center !important;
  transition: transform 220ms ease !important;
}

.site-header .nav a.goom-header-button:not(.discord-nav-link):hover,
.site-header .nav a.goom-header-button:not(.discord-nav-link):focus-visible {
  transform: translateY(-2px) translateZ(0) !important;
}

.site-header .nav a.goom-header-button:not(.discord-nav-link)::before,
.site-header .nav a.goom-header-button:not(.discord-nav-link)::after {
  content: none !important;
  display: none !important;
}

.site-header .goom-header-button-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("buttons/button01.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  transform: none !important;
  filter: grayscale(1) saturate(0) !important;
  -webkit-filter: grayscale(1) saturate(0) !important;
  transition: filter 220ms ease !important;
}

.site-header .goom-header-button:hover .goom-header-button-bg,
.site-header .goom-header-button:focus-visible .goom-header-button-bg {
  transform: none !important;
  filter: grayscale(0) saturate(1) !important;
  -webkit-filter: grayscale(0) saturate(1) !important;
}

.site-header .goom-header-button-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}

/* Hide the old always-visible glyph image completely. The rune now appears only through the animated child layers. */
.site-header .goom-header-button-glyph {
  position: absolute !important;
  left: 14.173% !important;
  top: 21.893% !important;
  width: 19.685% !important;
  height: 55.621% !important;
  z-index: 2 !important;
  display: block !important;
  overflow: visible !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none !important;
}

.site-header .goom-header-button-glyph::before,
.site-header .goom-header-button-glyph::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.site-header .goom-rune-glow,
.site-header .goom-rune-core,
.site-header .goom-rune-sweep {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  -webkit-mask-image: url("buttons/glyph01-mask.png") !important;
  mask-image: url("buttons/glyph01-mask.png") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

.site-header .goom-rune-glow {
  z-index: 1 !important;
  background: radial-gradient(circle, rgba(255, 215, 110, 0.95), rgba(255, 139, 54, 0.65) 45%, transparent 78%) !important;
  opacity: 0;
  transform: scale(0.9);
  filter: blur(6px) !important;
  -webkit-filter: blur(6px) !important;
}

.site-header .goom-rune-core {
  z-index: 2 !important;
  background: linear-gradient(115deg, var(--rune-orange), var(--rune-gold) 45%, var(--rune-cyan) 82%) !important;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: scale(0.96);
  filter:
    drop-shadow(0 0 3px rgba(255, 170, 62, 0.65))
    drop-shadow(0 0 10px rgba(255, 201, 90, 0.55)) !important;
  -webkit-filter:
    drop-shadow(0 0 3px rgba(255, 170, 62, 0.65))
    drop-shadow(0 0 10px rgba(255, 201, 90, 0.55)) !important;
}

.site-header .goom-rune-sweep {
  z-index: 3 !important;
  inset: -18% !important;
  width: 136% !important;
  height: 136% !important;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.95) 48%,
    rgba(255, 210, 106, 0.95) 53%,
    transparent 70%,
    transparent 100%) !important;
  background-size: 230% 100% !important;
  background-position: 130% 0;
  opacity: 0;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 14px rgba(131, 255, 231, 0.65)) !important;
  -webkit-filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 14px rgba(131, 255, 231, 0.65)) !important;
}

.site-header .goom-header-button:hover .goom-rune-glow,
.site-header .goom-header-button:focus-visible .goom-rune-glow {
  animation: goomRuneGlowV380 1.15s ease forwards;
}

.site-header .goom-header-button:hover .goom-rune-core,
.site-header .goom-header-button:focus-visible .goom-rune-core {
  animation: goomRuneBirthV380 740ms cubic-bezier(0.22, 0.78, 0.28, 1) forwards;
}

.site-header .goom-header-button:hover .goom-rune-sweep,
.site-header .goom-header-button:focus-visible .goom-rune-sweep {
  animation: goomRuneWanderV380 960ms ease 180ms forwards;
}

.site-header .goom-header-button-text {
  position: absolute !important;
  left: 33% !important;
  right: 10% !important;
  top: 49% !important;
  z-index: 4 !important;
  display: block !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  color: #f9e6b8 !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow:
    0 2px 0 rgba(50, 24, 8, 0.9),
    0 0 12px rgba(255, 196, 83, 0.25) !important;
  transition: color 220ms ease, text-shadow 220ms ease !important;
  pointer-events: none !important;
}

.site-header .goom-header-button:hover .goom-header-button-text,
.site-header .goom-header-button:focus-visible .goom-header-button-text,
.site-header .goom-header-button[aria-current="page"] .goom-header-button-text {
  transform: translateY(-50%) !important;
  color: #fff1c8 !important;
  text-shadow:
    0 2px 0 rgba(50, 24, 8, 0.9),
    0 0 10px rgba(255, 196, 83, 0.58),
    0 0 18px rgba(255, 143, 60, 0.28) !important;
}

@keyframes goomRuneBirthV380 {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: scale(0.96);
  }
  22% { opacity: 0.65; }
  72% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1.025);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

@keyframes goomRuneWanderV380 {
  0% {
    opacity: 0;
    background-position: 130% 0;
  }
  25% { opacity: 0.95; }
  100% {
    opacity: 0;
    background-position: -95% 0;
  }
}

@keyframes goomRuneGlowV380 {
  0% {
    opacity: 0;
    transform: scale(0.86);
    filter: blur(8px);
  }
  32% { opacity: 0.52; }
  68% {
    opacity: 0.9;
    transform: scale(1.12);
    filter: blur(7px);
  }
  100% {
    opacity: 0.62;
    transform: scale(1.04);
    filter: blur(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .goom-header-button:hover .goom-rune-glow,
  .site-header .goom-header-button:focus-visible .goom-rune-glow,
  .site-header .goom-header-button:hover .goom-rune-core,
  .site-header .goom-header-button:focus-visible .goom-rune-core,
  .site-header .goom-header-button:hover .goom-rune-sweep,
  .site-header .goom-header-button:focus-visible .goom-rune-sweep {
    animation: none !important;
  }

  .site-header .goom-header-button:hover .goom-rune-core,
  .site-header .goom-header-button:focus-visible .goom-rune-core {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
  }
}


/* --------------------------------------------------------------------------
   GOOM v381 header button text color hotfix

   Request:
   - While the header button is NOT hovered/focused, the text should be white.
   - Hover/focus may keep the warmer gold/light effect.
   - Active/current page must not force gold in the normal state.
   -------------------------------------------------------------------------- */
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-text,
.site-header .goom-header-button:not(.discord-nav-link)[aria-current="page"] .goom-header-button-text,
.site-header .nav-dropdown-main .goom-header-button-text,
.site-header .nav-dropdown-main[aria-current="page"] .goom-header-button-text {
  color: #ffffff !important;
  text-shadow:
    0 2px 0 rgba(36, 28, 21, 0.92),
    0 0 8px rgba(255, 255, 255, 0.16) !important;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-header-button-text,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-header-button-text,
.site-header .nav-dropdown-main:hover .goom-header-button-text,
.site-header .nav-dropdown-main:focus-visible .goom-header-button-text {
  color: #fff1c8 !important;
  text-shadow:
    0 2px 0 rgba(50, 24, 8, 0.9),
    0 0 10px rgba(255, 196, 83, 0.58),
    0 0 18px rgba(255, 143, 60, 0.28) !important;
}

/* --------------------------------------------------------------------------
   GOOM v382 rune shine mask fix

   Request / bug:
   - During the rune hover animation, a second white shine appeared to the right
     of the glyph.

   Cause:
   - The v380 sweep layer was intentionally oversized with inset:-18% and
     drop-shadow filters. On the real header this allowed the animated white
     gradient and its shadow to escape the glyph slot / mask area.

   Fix:
   - The glyph slot now clips its own paint area.
   - The sweep layer is no longer oversized.
   - The sweep still uses glyph01-mask.png, but the animated gradient stays
     inside the same 100% glyph box.
   - The sweep shadow is removed; glow/core keep the magical brightness.
   -------------------------------------------------------------------------- */
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph,
.site-header .nav-dropdown-main .goom-header-button-glyph {
  overflow: hidden !important;
  clip-path: inset(0 0 0 0) !important;
  contain: paint !important;
}

.site-header .goom-header-button:not(.discord-nav-link) .goom-rune-sweep,
.site-header .nav-dropdown-main .goom-rune-sweep {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -webkit-mask-image: url("buttons/glyph01-mask.png") !important;
  mask-image: url("buttons/glyph01-mask.png") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 34%,
    rgba(255, 255, 255, 0.92) 48%,
    rgba(255, 219, 128, 0.82) 54%,
    transparent 68%,
    transparent 100%) !important;
  background-size: 230% 100% !important;
  background-position: 130% 0;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 0;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep,
.site-header .nav-dropdown-main:hover .goom-rune-sweep,
.site-header .nav-dropdown-main:focus-visible .goom-rune-sweep {
  animation: goomRuneWanderV382 920ms ease 180ms forwards !important;
}

@keyframes goomRuneWanderV382 {
  0% {
    opacity: 0;
    background-position: 130% 0;
  }
  24% {
    opacity: 0.78;
  }
  68% {
    opacity: 0.68;
  }
  100% {
    opacity: 0;
    background-position: -95% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep,
  .site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep,
  .site-header .nav-dropdown-main:hover .goom-rune-sweep,
  .site-header .nav-dropdown-main:focus-visible .goom-rune-sweep {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   GOOM v383 rune shine visibility fix

   Request:
   - The previous v382 fix stopped the stray white sweep next to the glyph,
     but the shine became too subtle / nearly invisible.

   Fix:
   - Keep the glyph slot clipped, so nothing can appear to the right of it.
   - Use a new local shine texture: buttons/glyph01-shine-local.png.
     This asset is already cropped to the 150x94 rune mask, so it cannot leak.
   - Run the shine later, after the rune birth is mostly visible, so it reads
     as a real final glint instead of disappearing into the birth animation.
   -------------------------------------------------------------------------- */
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph,
.site-header .nav-dropdown-main .goom-header-button-glyph {
  overflow: hidden !important;
  contain: paint !important;
}

.site-header .goom-header-button:not(.discord-nav-link) .goom-rune-sweep,
.site-header .nav-dropdown-main .goom-rune-sweep {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 6 !important;
  -webkit-mask-image: url("buttons/glyph01-mask.png") !important;
  mask-image: url("buttons/glyph01-mask.png") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background-image:
    linear-gradient(100deg,
      transparent 0%,
      transparent 26%,
      rgba(255, 255, 255, 1) 45%,
      rgba(255, 228, 126, 1) 54%,
      transparent 76%,
      transparent 100%),
    url("buttons/glyph01-shine-local.png") !important;
  background-size: 230% 100%, contain !important;
  background-position: 140% 0, center !important;
  background-repeat: no-repeat, no-repeat !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.35) saturate(1.15) !important;
  -webkit-filter: brightness(1.35) saturate(1.15) !important;
  opacity: 0;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep,
.site-header .nav-dropdown-main:hover .goom-rune-sweep,
.site-header .nav-dropdown-main:focus-visible .goom-rune-sweep {
  animation: goomRuneShineV383 820ms cubic-bezier(0.18, 0.82, 0.26, 1) 560ms forwards !important;
}

@keyframes goomRuneShineV383 {
  0% {
    opacity: 0;
    background-position: 140% 0, center;
    transform: scale(0.995);
  }
  20% {
    opacity: 0.9;
  }
  44% {
    opacity: 1;
    background-position: 45% 0, center;
    transform: scale(1.018);
  }
  72% {
    opacity: 0.78;
    background-position: -35% 0, center;
    transform: scale(1.004);
  }
  100% {
    opacity: 0;
    background-position: -95% 0, center;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep,
  .site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep,
  .site-header .nav-dropdown-main:hover .goom-rune-sweep,
  .site-header .nav-dropdown-main:focus-visible .goom-rune-sweep {
    animation: none !important;
    opacity: 0.88 !important;
    background-position: center, center !important;
  }
}


/* --------------------------------------------------------------------------
   GOOM v384 rune shine travel fix

   Request / bug:
   - v383 made the shine visible again, but it looked like the whole glyph
     flashed at once instead of a clean glint travelling from left to right.

   Fix:
   - Do not use the full glyph shine texture as a background anymore.
   - Keep the glyph-sized mask on .goom-rune-sweep.
   - Put a narrow light band into .goom-rune-sweep::before and animate only
     that band across the fixed glyph mask.
   - Result: one controlled left-to-right sweep, clipped inside the glyph.
   -------------------------------------------------------------------------- */
.site-header .goom-header-button:not(.discord-nav-link) .goom-rune-sweep,
.site-header .nav-dropdown-main .goom-rune-sweep {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 6 !important;
  overflow: hidden !important;
  contain: paint !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: screen !important;
  opacity: 0 !important;
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-mask-image: url("buttons/glyph01-mask.png") !important;
  mask-image: url("buttons/glyph01-mask.png") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

.site-header .goom-header-button:not(.discord-nav-link) .goom-rune-sweep::before,
.site-header .nav-dropdown-main .goom-rune-sweep::before {
  content: "" !important;
  position: absolute !important;
  top: -22% !important;
  left: -62% !important;
  width: 48% !important;
  height: 144% !important;
  display: block !important;
  background: linear-gradient(104deg,
    transparent 0%,
    transparent 25%,
    rgba(255, 255, 255, 0.00) 34%,
    rgba(255, 255, 255, 0.92) 48%,
    rgba(255, 230, 142, 0.78) 56%,
    rgba(131, 255, 231, 0.24) 64%,
    transparent 76%,
    transparent 100%) !important;
  opacity: 0 !important;
  transform: translateX(0) skewX(-10deg) !important;
  transform-origin: center !important;
  filter: blur(0.35px) brightness(1.14) !important;
  -webkit-filter: blur(0.35px) brightness(1.14) !important;
  pointer-events: none !important;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep,
.site-header .nav-dropdown-main:hover .goom-rune-sweep,
.site-header .nav-dropdown-main:focus-visible .goom-rune-sweep {
  animation: goomRuneShineWindowV384 720ms ease 600ms forwards !important;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep::before,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep::before,
.site-header .nav-dropdown-main:hover .goom-rune-sweep::before,
.site-header .nav-dropdown-main:focus-visible .goom-rune-sweep::before {
  animation: goomRuneShineTravelV384 720ms cubic-bezier(0.2, 0.82, 0.24, 1) 600ms forwards !important;
}

@keyframes goomRuneShineWindowV384 {
  0% { opacity: 0 !important; }
  12% { opacity: 0.92 !important; }
  58% { opacity: 0.98 !important; }
  100% { opacity: 0 !important; }
}

@keyframes goomRuneShineTravelV384 {
  0% {
    opacity: 0 !important;
    transform: translateX(0) skewX(-10deg) !important;
  }
  14% {
    opacity: 0.95 !important;
  }
  52% {
    opacity: 1 !important;
  }
  86% {
    opacity: 0.78 !important;
  }
  100% {
    opacity: 0 !important;
    transform: translateX(390%) skewX(-10deg) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep,
  .site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep,
  .site-header .nav-dropdown-main:hover .goom-rune-sweep,
  .site-header .nav-dropdown-main:focus-visible .goom-rune-sweep,
  .site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep::before,
  .site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep::before,
  .site-header .nav-dropdown-main:hover .goom-rune-sweep::before,
  .site-header .nav-dropdown-main:focus-visible .goom-rune-sweep::before {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   GOOM v385 rune shine visible travel fix

   Bug report:
   - v384 showed no visible shine.

   Actual cause:
   - The v384 travel strip was technically present, but the base rules used
     opacity/transform values with !important. Normal keyframe animation cannot
     reliably override those important declarations, so the strip stayed hidden
     or did not travel.

   Fix:
   - Keep the clipped glyph mask.
   - Make the sweep container visible only on hover/focus.
   - Animate CSS custom properties instead of directly animating opacity and
     transform. The important transform/opacity declarations now read from those
     variables, so the moving shine is not blocked by older important rules.
   - Result: a narrow, visible left-to-right glint inside the glyph only.
   -------------------------------------------------------------------------- */
@property --goom-rune-shine-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -125%;
}

@property --goom-rune-shine-a {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.site-header .goom-header-button:not(.discord-nav-link) .goom-rune-sweep,
.site-header .nav-dropdown-main .goom-rune-sweep {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 7 !important;
  overflow: hidden !important;
  contain: paint !important;
  opacity: 0 !important;
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: url("buttons/glyph01-mask.png") !important;
  mask-image: url("buttons/glyph01-mask.png") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  --goom-rune-shine-x: -125%;
  --goom-rune-shine-a: 0;
}

.site-header .goom-header-button:not(.discord-nav-link) .goom-rune-sweep::before,
.site-header .nav-dropdown-main .goom-rune-sweep::before {
  content: "" !important;
  position: absolute !important;
  top: -26% !important;
  left: 0 !important;
  width: 58% !important;
  height: 152% !important;
  display: block !important;
  pointer-events: none !important;
  opacity: var(--goom-rune-shine-a) !important;
  transform: translateX(var(--goom-rune-shine-x)) skewX(-13deg) !important;
  transform-origin: center !important;
  background: linear-gradient(103deg,
    transparent 0%,
    transparent 24%,
    rgba(255, 255, 255, 0.00) 32%,
    rgba(255, 255, 255, 0.98) 46%,
    rgba(255, 233, 150, 0.98) 52%,
    rgba(255, 193, 82, 0.50) 59%,
    rgba(131, 255, 231, 0.26) 65%,
    transparent 78%,
    transparent 100%) !important;
  filter:
    blur(0.15px)
    drop-shadow(0 0 3px rgba(255, 245, 190, 0.72))
    drop-shadow(0 0 6px rgba(255, 206, 92, 0.34)) !important;
  -webkit-filter:
    blur(0.15px)
    drop-shadow(0 0 3px rgba(255, 245, 190, 0.72))
    drop-shadow(0 0 6px rgba(255, 206, 92, 0.34)) !important;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep,
.site-header .nav-dropdown-main:hover .goom-rune-sweep,
.site-header .nav-dropdown-main:focus-visible .goom-rune-sweep {
  opacity: 1 !important;
  animation: goomRuneShineVarsV385 940ms cubic-bezier(0.18, 0.84, 0.22, 1) 520ms forwards !important;
}

@keyframes goomRuneShineVarsV385 {
  0% {
    --goom-rune-shine-x: -125%;
    --goom-rune-shine-a: 0;
  }
  12% {
    --goom-rune-shine-x: -92%;
    --goom-rune-shine-a: 0.95;
  }
  46% {
    --goom-rune-shine-x: 60%;
    --goom-rune-shine-a: 1;
  }
  78% {
    --goom-rune-shine-x: 180%;
    --goom-rune-shine-a: 0.74;
  }
  100% {
    --goom-rune-shine-x: 255%;
    --goom-rune-shine-a: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-sweep,
  .site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-sweep,
  .site-header .nav-dropdown-main:hover .goom-rune-sweep,
  .site-header .nav-dropdown-main:focus-visible .goom-rune-sweep {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   GOOM v386 header rune APNG hover playback

   Change:
   - Stop using CSS-built rune glow/core/sweep layers for the live header.
   - Use buttons/glyph01.png directly as an APNG image.
   - The rune is invisible in the resting state.
   - On hover/focus the APNG appears; JS restarts it so it plays from frame 1.
   - This intentionally overrides the old pseudo-element/mask/sweep attempts.
   -------------------------------------------------------------------------- */
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph,
.site-header .nav-dropdown-main .goom-header-button-glyph {
  position: absolute !important;
  left: 14.173% !important;
  top: 21.893% !important;
  width: 19.685% !important;
  height: 55.621% !important;
  z-index: 4 !important;
  display: block !important;
  overflow: hidden !important;
  contain: paint !important;
  pointer-events: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph::before,
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph::after,
.site-header .nav-dropdown-main .goom-header-button-glyph::before,
.site-header .nav-dropdown-main .goom-header-button-glyph::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.site-header .goom-rune-glow,
.site-header .goom-rune-core,
.site-header .goom-rune-sweep {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.site-header .goom-rune-apng {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  transition: opacity 90ms ease, visibility 90ms ease !important;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-apng,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-apng,
.site-header .nav-dropdown-main:hover .goom-rune-apng,
.site-header .nav-dropdown-main:focus-visible .goom-rune-apng {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep the APNG synced with the button's shared hover movement. */
.site-header .goom-header-button-content .goom-rune-apng {
  transform: none !important;
}

/* --------------------------------------------------------------------------
   GOOM v387 header rune APNG sizing fix

   glyph01.png is exported on the same full button canvas as button01.png
   (762x169). Therefore it must be rendered across the entire header button,
   not squeezed into the old small rune-slot. The APNG itself contains the
   transparent empty area; CSS only aligns that full canvas with button01.png.
   -------------------------------------------------------------------------- */
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph,
.site-header .nav-dropdown-main .goom-header-button-glyph {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4 !important;
  display: block !important;
  overflow: hidden !important;
  contain: paint !important;
  pointer-events: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.site-header .goom-rune-apng {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-apng,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-apng,
.site-header .nav-dropdown-main:hover .goom-rune-apng,
.site-header .nav-dropdown-main:focus-visible .goom-rune-apng {
  opacity: 1 !important;
  visibility: visible !important;
}


/* --------------------------------------------------------------------------
   GOOM v388 header rune APNG fit + cache-bust fix

   Why:
   - The previous HTML files still loaded style.css/script.js with the old
     v376 query string, so browsers could keep showing cached CSS/JS.
   - glyph01.png can be either a cropped APNG rune or the old full-button
     canvas (762x169). This layer supports both.

   How:
   - The visible rune area is the real rune slot again.
   - If JS detects a full-button-canvas APNG, it adds .goom-rune-full-canvas
     and the image is cropped/positioned into the slot instead of being
     squeezed tiny.
   - If JS detects a cropped rune APNG, it fills the slot normally.
   -------------------------------------------------------------------------- */
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph,
.site-header .nav-dropdown-main .goom-header-button-glyph {
  position: absolute !important;
  left: 14.173% !important;
  top: 21.893% !important;
  width: 19.685% !important;
  height: 55.621% !important;
  inset: auto auto auto auto !important;
  z-index: 4 !important;
  display: block !important;
  overflow: hidden !important;
  contain: paint !important;
  pointer-events: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph::before,
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph::after,
.site-header .nav-dropdown-main .goom-header-button-glyph::before,
.site-header .nav-dropdown-main .goom-header-button-glyph::after {
  content: none !important;
  display: none !important;
}

.site-header .goom-rune-apng {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* APNG cropped tightly around the rune: fill the rune slot. */
.site-header .goom-header-button-glyph.goom-rune-cropped .goom-rune-apng {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* APNG exported on the old 762x169 full button canvas: crop the rune bbox
   (approx. x108/y37/w150/h94) back into the rune slot. */
.site-header .goom-header-button-glyph.goom-rune-full-canvas .goom-rune-apng {
  inset: auto auto auto auto !important;
  left: -72% !important;
  top: -39.36% !important;
  width: 508% !important;
  height: 179.8% !important;
  object-fit: fill !important;
  object-position: left top !important;
}

.site-header .goom-header-button:not(.discord-nav-link):hover .goom-rune-apng,
.site-header .goom-header-button:not(.discord-nav-link):focus-visible .goom-rune-apng,
.site-header .nav-dropdown-main:hover .goom-rune-apng,
.site-header .nav-dropdown-main:focus-visible .goom-rune-apng {
  opacity: 1 !important;
  visibility: visible !important;
}


/* --------------------------------------------------------------------------
   GOOM v389 header rune APNG restart fix

   Why:
   - APNGs can stay on their final frame when the same image URL is merely
     shown/hidden or cloned from browser cache.
   - That looked like a white static rune with no visible animation.

   Fix:
   - The APNG is only made visible after JS has requested a fresh cache-busted
     image URL and the image has fired load.
   - This avoids showing the previous final frame before the replay starts.
   -------------------------------------------------------------------------- */
.site-header .goom-rune-apng {
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-header .goom-header-button.is-rune-apng-ready:not(.discord-nav-link):hover .goom-rune-apng,
.site-header .goom-header-button.is-rune-apng-ready:not(.discord-nav-link):focus-visible .goom-rune-apng,
.site-header .nav-dropdown-main.is-rune-apng-ready:hover .goom-rune-apng,
.site-header .nav-dropdown-main.is-rune-apng-ready:focus-visible .goom-rune-apng {
  opacity: 1 !important;
  visibility: visible !important;
}


/* --------------------------------------------------------------------------
   GOOM v390 header rune APNG full-canvas live fix

   Why:
   - v386-v389 still left older APNG sizing/restart systems in conflict.
   - Waiting for image.onload can show a final/static APNG frame instead of the
     actual playback.
   - The user's glyph01.png is intended to be the old full button canvas
     (same canvas as button01.png), not a tiny rune-slot image.

   Fix:
   - The live header no longer uses .goom-rune-apng at all.
   - It uses .goom-rune-apng-live on a full-button overlay.
   - The APNG is shown immediately when its src is assigned, so animation can
     actually be seen while it runs.
   - No crop math, no mask, no old CSS shine layer.

   Asset requirement:
   - buttons/glyph01.png should be an APNG on the same canvas as button01.png,
     ideally 762 x 169 px, with transparent empty space around the rune.
   -------------------------------------------------------------------------- */
.site-header .goom-header-button:not(.discord-nav-link) .goom-header-button-glyph.goom-header-button-glyph-apng,
.site-header .nav-dropdown-main .goom-header-button-glyph.goom-header-button-glyph-apng {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4 !important;
  display: block !important;
  overflow: hidden !important;
  contain: paint !important;
  pointer-events: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.site-header .goom-header-button-glyph.goom-header-button-glyph-apng::before,
.site-header .goom-header-button-glyph.goom-header-button-glyph-apng::after {
  content: none !important;
  display: none !important;
}

.site-header .goom-rune-apng-live {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  transition: none !important;
}

.site-header .goom-header-button.is-rune-apng-live-playing:not(.discord-nav-link):hover .goom-rune-apng-live,
.site-header .goom-header-button.is-rune-apng-live-playing:not(.discord-nav-link):focus-visible .goom-rune-apng-live,
.site-header .nav-dropdown-main.is-rune-apng-live-playing:hover .goom-rune-apng-live,
.site-header .nav-dropdown-main.is-rune-apng-live-playing:focus-visible .goom-rune-apng-live {
  opacity: 1 !important;
  visibility: visible !important;
}