/* Black Dynasty: eigene Marke in der Zentrale. Schwarz wie Drachenschuppen, sattes Gold statt Champagner.
   Gilt auf der Login- und Einladungsseite (dynasty.iamleogs.de) und in der App für Leute im Programm „dynasty“. */

:root[data-brand='dynasty'] {
  --vault: #000;
  --vault-2: #0b0908;
  --vault-3: #141110;
  --vault-4: #211c19;
  --line: rgba(230, 200, 140, 0.11);
  --line-strong: rgba(214, 170, 82, 0.38);
  --gold: #d6aa52;
  --gold-hi: #f7e0a4;
  --gold-lo: #8a6a2c;
  --paper: #f1e9da;
  --on-gold: #000;
  --metal: linear-gradient(100deg, #8a6a2c 0%, #d6aa52 24%, #fbeec6 40%, #d6aa52 54%, #a27f37 72%, #f7e0a4 88%, #d6aa52 100%);
}

/* Das eine auffällige Element: eine Fläche aus Schuppen, über die beim Laden einmal das Licht läuft und stehen bleibt */
:root[data-brand='dynasty'] .gate__art {
  background: #000;
  isolation: isolate;
}
:root[data-brand='dynasty'] .gate__art::before,
:root[data-brand='dynasty'] .gate__art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/assets/dynasty-scales.svg') 0 0 / 96px 48px;
}
/* Nach unten laufen die Schuppen aus, damit Schriftzug und Text auf ruhigem Schwarz stehen */
:root[data-brand='dynasty'] .gate__art::before {
  opacity: 0.2;
  -webkit-mask: linear-gradient(#000 25%, transparent 62%);
  mask: linear-gradient(#000 25%, transparent 62%);
}
:root[data-brand='dynasty'] .gate__art::after {
  -webkit-mask: linear-gradient(105deg, transparent 39%, #000 50%, transparent 61%) 40% 0 / 320% 100% no-repeat, linear-gradient(#000 25%, transparent 62%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(105deg, transparent 39%, #000 50%, transparent 61%) 40% 0 / 320% 100% no-repeat, linear-gradient(#000 25%, transparent 62%);
  mask-composite: intersect;
  animation: dy-light 2.8s var(--ease) 0.15s backwards;
}
@keyframes dy-light {
  from {
    -webkit-mask-position: 92% 0, 0 0;
    mask-position: 92% 0, 0 0;
  }
}

:root[data-brand='dynasty'] .gate__brand {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.01em;
}
:root[data-brand='dynasty'] .gate__claim {
  font-size: clamp(76px, 10.5vw, 176px);
}
/* Goldschrift auf den Zeilen; das i bewegt sich beim Hochfahren, darum liegt der Verlauf dort */
:root[data-brand='dynasty'] .gate__claim span > i {
  padding-bottom: 0.14em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-brand='dynasty'] .gate__claim span:nth-child(2) > i {
  animation-delay: 0.27s;
}
:root[data-brand='dynasty'] .gate__foot {
  max-width: 44ch;
  color: var(--paper);
  opacity: 0.72;
  font-size: 13.5px;
  line-height: 1.5;
}
:root[data-brand='dynasty'] .gate__panel {
  background: var(--vault-2);
  border-left: 1px solid var(--line-strong);
}

/* In der App: die Marke links oben im Gold, Rest kommt über die Farbwerte oben */
:root[data-brand='dynasty'] .side__brand b {
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 860px) {
  :root[data-brand='dynasty'] .gate__brand {
    margin-bottom: 22px;
  }
  :root[data-brand='dynasty'] .gate__claim {
    font-size: clamp(52px, 17vw, 96px);
  }
  :root[data-brand='dynasty'] .gate__foot {
    display: block;
    font-size: 12.5px;
  }
  :root[data-brand='dynasty'] .gate__panel {
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-brand='dynasty'] .gate__art::after {
    animation: none;
  }
}