/* CROWNSHIFT – Heraldik: Wortmarke, House Banner, House Crest. Setzt tokens.css voraus. */

/* ------------------------------------------------------------------ Wortmarke ---------------- */
/* Buchstaben: in Schiefer geschlagen (Steinfläche), mit Bronze eingefasst (Kante), tiefer Schlagschatten.
   Drei deckungsgleiche Ebenen: logo-depth (Tiefe/Schatten) · logo-rim (Bronzefassung) · logo-face (Stein). */
.logo {
  --logo-fs: min(36px, 9.4vw);
  --logo-ls: 0.07em;
  --logo-crown: 34%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.logo-s {
  --logo-fs: 16.5px;
  --logo-crown: 32%;
}
.logo-m {
  --logo-fs: 26px;
}
.logo-l {
  --logo-fs: min(36px, 9.4vw);
}
.logo-xl {
  --logo-fs: clamp(36px, 11vw, 64px);
}

.logo-crown {
  display: block;
  width: var(--logo-crown);
  height: auto;
  margin-bottom: calc(var(--logo-fs) * 0.1);
  filter: drop-shadow(0 calc(var(--logo-fs) * 0.05) calc(var(--logo-fs) * 0.1) rgba(0, 0, 0, 0.7));
}
.logo-s .logo-crown {
  margin-bottom: calc(var(--logo-fs) * 0.14);
}

.logo-word {
  display: grid;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--logo-fs);
  letter-spacing: var(--logo-ls);
  /* Zentrierung trotz nachlaufendem Sperrsatz */
  margin-right: calc(var(--logo-ls) * -1);
  white-space: nowrap;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}
.logo-word > span {
  grid-area: 1 / 1;
  display: block;
  position: relative;
}
.logo-word > .logo-depth {
  z-index: 0;
}
.logo-word > .logo-rim {
  z-index: 1;
}
.logo-word > .logo-face {
  z-index: 2;
}

/* Tiefe: Schlagschatten der gemeißelten Platte + warmer Kerzenschein dahinter */
.logo-depth {
  color: #0a0806;
  text-shadow:
    0 0.07em 0 #0a0806,
    0 0.1em 0.12em rgba(0, 0, 0, 0.85),
    0 0.12em 0.45em rgba(0, 0, 0, 0.7),
    0 0 1.1em rgba(255, 190, 100, 0.1);
}
.logo-s .logo-depth {
  text-shadow:
    0 0.08em 0 #0a0806,
    0 0.12em 0.16em rgba(0, 0, 0, 0.85);
}

/* Bronzefassung: ein Ring aus gerichteten Schatten (oben Licht, unten Patina) – keine Gehrungs-Spitzen
   wie bei text-stroke, läuft identisch in WebKit und Blink. */
.logo-rim {
  --r: 0.048em;
  --a: 0.0416em; /* r·cos30 */
  --b: 0.024em; /* r·sin30 */
  --s: 0.012em; /* leichte Weichzeichnung gegen Treppen */
  color: #8f5f2c;
  text-shadow:
    0 calc(var(--r) * -1) var(--s) #f2d390,
    var(--b) calc(var(--a) * -1) var(--s) #e2b86f,
    calc(var(--b) * -1) calc(var(--a) * -1) var(--s) #e8c07a,
    var(--a) calc(var(--b) * -1) var(--s) #c99556,
    calc(var(--a) * -1) calc(var(--b) * -1) var(--s) #d4a462,
    var(--r) 0 var(--s) #a8743d,
    calc(var(--r) * -1) 0 var(--s) #b9824a,
    var(--a) var(--b) var(--s) #82552a,
    calc(var(--a) * -1) var(--b) var(--s) #8f5f2c,
    var(--b) var(--a) var(--s) #64411f,
    calc(var(--b) * -1) var(--a) var(--s) #6c4622,
    0 var(--r) var(--s) #4f3218,
    0 calc(var(--r) * 1.7) var(--s) #2c1b0c;
}
.logo-s .logo-rim {
  --r: 0.058em;
  --a: 0.0502em;
  --b: 0.029em;
  --s: 0;
}

/* Steinfläche: heller Kalkstein mit Licht von oben, feine Verwitterungspunkte (nur Verläufe, keine Bilder) */
.logo-face {
  color: #a9a59c;
  background:
    radial-gradient(circle at 23% 31%, rgba(40, 34, 28, 0.26) 0 0.45px, transparent 1.1px) 0 0 / 7px 6px,
    radial-gradient(circle at 71% 64%, rgba(255, 250, 240, 0.16) 0 0.45px, transparent 1.1px) 0 0 / 5px 7px,
    radial-gradient(ellipse 1.6px 1px at 46% 12%, rgba(40, 34, 28, 0.22) 0 40%, transparent 100%) 0 0 / 13px 11px,
    radial-gradient(ellipse 2.4px 1.2px at 62% 78%, rgba(40, 34, 28, 0.16) 0 35%, transparent 100%) 3px 2px / 17px 19px,
    linear-gradient(101deg, transparent 0 14%, rgba(30, 24, 18, 0.14) 21%, transparent 29% 57%, rgba(30, 24, 18, 0.11) 66%, transparent 74%),
    linear-gradient(180deg, #ebe6dc 0%, #c9c3b7 24%, #a39e94 48%, #85817a 56%, #96918a 76%, #6c6862 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-s .logo-face {
  background: linear-gradient(180deg, #eee9e0 0%, #c4beb2 42%, #928d85 72%, #716d66 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo-face {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

/* ------------------------------------------------------------------ House Banner ------------- */
.banner {
  display: block;
  overflow: visible;
}
.banner .banner-cloth,
.banner .banner-tassel {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.banner .banner-cloth {
  animation: banner-sway 7s ease-in-out infinite;
}
.banner .banner-tassel {
  animation: banner-tassel 5.2s ease-in-out infinite;
}
.banner .banner-tassel + .banner-tassel {
  animation-delay: -2.1s;
}
.banner-still .banner-cloth,
.banner-still .banner-tassel,
.banner.banner-still .banner-cloth,
.banner.banner-still .banner-tassel {
  animation: none;
}
@keyframes banner-sway {
  0%,
  100% {
    transform: rotate(0deg) skewX(0deg);
  }
  25% {
    transform: rotate(0.9deg) skewX(-0.7deg);
  }
  50% {
    transform: rotate(0.15deg) skewX(0.2deg);
  }
  75% {
    transform: rotate(-0.8deg) skewX(0.6deg);
  }
}
@keyframes banner-tassel {
  0%,
  100% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(3.5deg);
  }
  70% {
    transform: rotate(-2.5deg);
  }
}

/* Match-Intro: Banner gleiten von links/rechts ins Bild (Spec §13) */
.banner-enter-left {
  animation: banner-enter-left 0.9s var(--ease-heavy) both;
}
.banner-enter-right {
  animation: banner-enter-right 0.9s var(--ease-heavy) both;
}
@keyframes banner-enter-left {
  from {
    transform: translateX(-120%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes banner-enter-right {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

html.reduce-motion .banner-cloth,
html.reduce-motion .banner-tassel,
html.reduce-motion .banner-enter-left,
html.reduce-motion .banner-enter-right {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .banner-cloth,
  html:not(.force-motion) .banner-tassel,
  html:not(.force-motion) .banner-enter-left,
  html:not(.force-motion) .banner-enter-right {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------ House Crest -------------- */
.crest {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
}
.crest-fluid {
  width: 100%;
  height: auto;
}
/* Kerzenlicht-Schein für das aktive / eigene Wappen */
.crest-lit {
  filter: drop-shadow(0 0 6px var(--candle-soft)) drop-shadow(0 0 2px rgba(255, 201, 112, 0.35));
}
.crest-dim {
  filter: grayscale(0.85) brightness(0.6);
}

.house-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.6);
}