/* ── Schriften ── */
@font-face {
  font-family: 'Space Bd BT';
  src: url('/assets/fonts/Space_Bd_BT_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Variablen ── */
:root {
  --nacht:    oklch(12% 0.01 270deg);
  --rubin:    oklch(43% 0.20  17deg);
  --altgold:  oklch(72% 0.13  88deg);
  --petrol:   oklch(52% 0.13 198deg);
  --mango:    oklch(72% 0.17  73deg);

  --mouse-x: 50%;
  --mouse-y: 50%;

  --bg:      oklch(10% 0.01 270deg);
  --glow-hi: oklch(37% 0.12 21.4);
  --border:  oklch(28% 0.03 270deg);
  --text:    oklch(90% 0.005 88deg);
  --text2:   oklch(62% 0.010 88deg);

  --sans:    'DM Sans', system-ui, sans-serif;
  --display: 'Space Bd BT', 'DM Sans', system-ui, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 17px; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    var(--glow-hi) 0%,
    transparent 65%
  );
  opacity: 0.37;
}

/* ── Canvas ── */
#foyer-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ── Sprachwahl ── */
.foyer-lang {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.foyer-lang-btn {
  color: var(--text2);
  text-decoration: none;
  transition: color .15s;
  padding: 0.1rem 0.2rem;
}
.foyer-lang-btn.active { color: var(--altgold); }
.foyer-lang-btn:not(.active):hover { color: var(--text); }
.foyer-lang-sep { color: var(--border); }

/* ── Hauptinhalt ── */
.foyer-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.4rem;
}

.foyer-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.foyer-logo img {
  width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 24px oklch(43% 0.20 17deg / 0.5));
  transition: transform .25s, filter .25s;
  cursor: pointer;
}
.foyer-logo img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 32px oklch(43% 0.20 17deg / 0.75));
}
.foyer-logo img.gong-ring {
  animation: gongRing 5s ease-out forwards;
}
@keyframes gongRing {
  0%    { transform: scale(1.06) rotate(0deg); }
  1.5%  { transform: scale(1.06) rotate(-3.5deg); }
  3%    { transform: scale(1.06) rotate(3.5deg); }
  4.5%  { transform: scale(1.06) rotate(-3deg); }
  6%    { transform: scale(1.06) rotate(3deg); }
  8%    { transform: scale(1.06) rotate(-2.5deg); }
  10%   { transform: scale(1.06) rotate(2.5deg); }
  12.5% { transform: scale(1.06) rotate(-2deg); }
  15%   { transform: scale(1.06) rotate(2deg); }
  18%   { transform: scale(1.06) rotate(-1.5deg); }
  21%   { transform: scale(1.06) rotate(1.5deg); }
  25%   { transform: scale(1.06) rotate(-1.2deg); }
  29%   { transform: scale(1.06) rotate(1.2deg); }
  34%   { transform: scale(1.06) rotate(-0.9deg); }
  39%   { transform: scale(1.06) rotate(0.9deg); }
  45%   { transform: scale(1.06) rotate(-0.6deg); }
  52%   { transform: scale(1.06) rotate(0.6deg); }
  60%   { transform: scale(1.06) rotate(-0.3deg); }
  70%   { transform: scale(1.06) rotate(0.3deg); }
  82%   { transform: scale(1.06) rotate(-0.1deg); }
  91%   { transform: scale(1.06) rotate(0.1deg); }
  100%  { transform: scale(1.06) rotate(0deg); }
}

/* ── Footer ── */
.foyer-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0.6rem 1.4rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text2);
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.foyer-footer a { color: var(--altgold); text-decoration: none; transition: color .15s; }
.foyer-footer a:hover { color: var(--mango); }
.foyer-footer span { color: var(--border); }

/* ── Pentagon-Portale ── */
.foyer-doors {
  display: flex;
  gap: 13rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: -3rem;
}

.portal {
  position: relative;
  width: 280px;
  height: 280px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, filter .25s;
  clip-path: polygon(50% 2%, 95.7% 35.2%, 78.2% 88.8%, 21.8% 88.8%, 4.3% 35.2%);
}
.portal:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}

.portal-frame {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 2%, 95.7% 35.2%, 78.2% 88.8%, 21.8% 88.8%, 4.3% 35.2%);
  background: linear-gradient(
    145deg,
    oklch(88% 0.16 88deg) 0%,
    oklch(65% 0.13 88deg) 30%,
    oklch(78% 0.15 88deg) 55%,
    oklch(52% 0.11 88deg) 80%,
    oklch(70% 0.14 88deg) 100%
  );
}

.portal-shape {
  position: absolute;
  inset: 7px;
  clip-path: polygon(50% 2%, 95.7% 35.2%, 78.2% 88.8%, 21.8% 88.8%, 4.3% 35.2%);
}
.portal--rubin .portal-shape {
  background: radial-gradient(ellipse at 50% 50%,
    oklch(68% 0.23 30)    0%,
    oklch(0%  0.23 30)   91%,
    oklch(0%  0.18 17deg) 100%);
}
.portal--petrol .portal-shape {
  background: radial-gradient(ellipse at 50% 50%,
    oklch(68% 0.15 198deg)  0%,
    oklch(0%  0.10 198)    91%,
    oklch(0%  0.10 198deg) 100%);
}

.portal-lock {
  position: absolute;
  inset: 7px;
  clip-path: polygon(50% 2%, 95.7% 35.2%, 78.2% 88.8%, 21.8% 88.8%, 4.3% 35.2%);
  background: oklch(0% 0 0 / 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.portal-lock svg {
  width: 190px;
  height: 190px;
  fill: var(--altgold);
  stroke: var(--altgold);
  opacity: 0.55;
  filter: drop-shadow(0 2px 8px oklch(0% 0 0 / 0.6));
}

.portal--soon { pointer-events: none; }
.portal-soon-label {
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: oklch(28% 0.15 198deg);
}


.portal-text {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: -1.5rem;
}
.portal-title {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--altgold);
  text-shadow: 0 2px 6px oklch(0% 0 0 / 0.5);
  line-height: 1.1;
  text-align: center;
}
.portal-title-fixed { display: block; }
.portal-title-cycle {
  display: grid;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--altgold);
  text-shadow: 0 2px 6px oklch(0% 0 0 / 0.5);
  text-align: center;
}
.portal-title-cycle span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: cycle-fade 7.5s infinite;
}
.portal-title-cycle span:nth-child(1) { animation-delay: 0s; }
.portal-title-cycle span:nth-child(2) { animation-delay: 2.5s; }
.portal-title-cycle span:nth-child(3) { animation-delay: 5s; }
@keyframes cycle-fade {
  0%   { opacity: 0; transform: translateY(4px); }
  8%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  36%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; }
}

/* ── Klangsymbole ── */
.kling-symbol {
  position: fixed;
  color: var(--altgold);
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
  user-select: none;
  text-shadow: 0 0 16px oklch(72% 0.13 88deg / 0.65);
  font-size: 2.6rem;
  will-change: transform, opacity;
  line-height: 1;
}

@keyframes symbolFlash {
  0%   { color: var(--altgold); text-shadow: 0 0 16px oklch(72% 0.13 88deg / 0.65); font-size: 2.6rem; }
  30%  { color: white;          text-shadow: 0 0 40px oklch(100% 0 0 / 1), 0 0 80px oklch(72% 0.13 88deg / 0.9); font-size: 1.5rem; }
  100% { color: var(--altgold); text-shadow: 0 0 16px oklch(72% 0.13 88deg / 0.65); font-size: 2.6rem; opacity: 0; }
}