/* Shang Garden – Leucht-Effekt beim Öffnen der Seite (13.10.2026)
   1. "Licht geht an": das Startbild ist zuerst dunkel und wird warm hell (wie die Kronleuchter)
   2. ein goldener Lichtschimmer zieht einmal schräg über das Bild
   3. der Titel "Shang Garden" leuchtet golden auf und behält einen leichten Schein
   Läuft einmal pro Seitenaufruf; bei "Bewegung reduzieren" (Betriebssystem) aus. */

.dl-hero { isolation: isolate; }

/* 1 + 2: Abdunklung und Lichtschimmer als Ebene über dem Bild, unter dem Text */
.dl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 214, 140, 0) 35%, rgba(255, 214, 140, .38) 50%, rgba(255, 214, 140, 0) 65%) no-repeat,
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(255, 196, 92, .55), rgba(255, 196, 92, 0) 70%),
    #0b0904;
  background-size: 250% 100%, 100% 100%, 100% 100%;
  background-position: 120% 0, 0 0, 0 0;
  animation: sg-licht-an 3.2s cubic-bezier(.33, .0, .2, 1) .15s both;
}
@keyframes sg-licht-an {
  0%   { background-color: rgba(11, 9, 4, .96); background-position: 120% 0, 0 0, 0 0; opacity: 1; }
  35%  { background-color: rgba(11, 9, 4, .35); }
  55%  { background-color: rgba(11, 9, 4, 0); }
  100% { background-color: rgba(11, 9, 4, 0); background-position: -20% 0, 0 0, 0 0; opacity: 0; }
}

/* 3: Titel leuchtet golden auf */
.dl-hero__title {
  animation: sg-titel-leuchten 2.8s ease-out .9s both;
  text-shadow: 0 0 18px rgba(255, 205, 120, .45), 0 2px 12px rgba(0, 0, 0, .35);
}
@keyframes sg-titel-leuchten {
  0%   { opacity: 0; transform: translateY(14px); letter-spacing: .12em;
         text-shadow: 0 0 0 rgba(255, 205, 120, 0), 0 2px 12px rgba(0, 0, 0, 0); }
  45%  { opacity: 1; transform: none;
         text-shadow: 0 0 28px rgba(255, 210, 130, 1), 0 0 60px rgba(255, 180, 70, .85), 0 2px 12px rgba(0, 0, 0, .35); }
  100% { opacity: 1; transform: none; letter-spacing: normal;
         text-shadow: 0 0 18px rgba(255, 205, 120, .45), 0 2px 12px rgba(0, 0, 0, .35); }
}

/* Untertitel, Linie, Text und Pfeil blenden nacheinander ein */
.dl-hero__subtitle { animation: sg-einblenden 1s ease-out 1.6s both; }
.dl-hero__rule     { animation: sg-linie 1s ease-out 1.9s both; }
.dl-hero__text,
.dl-hero__button   { animation: sg-einblenden 1s ease-out 2.1s both; }
.dl-hero__scroll   { animation: sg-einblenden 1s ease-out 2.6s both; }
@keyframes sg-einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sg-linie { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .dl-hero::after { display: none; }
  .dl-hero__title, .dl-hero__subtitle, .dl-hero__rule,
  .dl-hero__text, .dl-hero__button, .dl-hero__scroll { animation: none; }
}