/* ============================================================
   Sensus Communis — Motion "Horizont"
   ------------------------------------------------------------
   Idee: Jeder Erklaerblock ist ein kleiner Sonnenaufgang, wie der
   Hero. Ueber einem Raster zeichnet sich der Horizontbogen der
   Wortmarke, eine kleine Sonne wandert ihn entlang, und jede Karte
   steigt in dem Moment ueber den Horizont, in dem die Sonne ihre
   Spalte passiert. Danach legt sich der Bogen flach und verlischt.

   Alle Ausgangszustaende haengen an Klassen, die nur sc-motion.js
   setzt (.hz-cell, .hz-kid, .hz-armed). Ohne JavaScript oder bei "reduzierter Bewegung" bleibt die
   Seite unveraendert sichtbar. Nach dem Ablauf entfernt das Skript
   alle Hilfsklassen wieder, Hover und Layout sind dann wie vorher.
   ============================================================ */

:root{
  --hz-out: cubic-bezier(.16, 1, .3, 1);      /* expo out: ruhiges Ausschwingen */
  --hz-rise: 1100ms;
}

/* ---------- Karten steigen ueber den Horizont ---------- */
.hz-cell{
  clip-path: inset(100% 0 0 0);
}
.hz-cell.hz-in{
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--hz-rise) var(--hz-out);
}

/* Mehrspaltig: die Kachel wird nicht angehoben, sondern entfaltet sich
   unter der Sonne (Maske auf dem Raster, gesteuert von sc-motion.js) */
.hz-cell.hz-wipe,
.hz-cell.hz-wipe.hz-in{
  clip-path: none !important;
  transition: none;
}

/* Inhalt folgt leicht versetzt, Zeile fuer Zeile */
.hz-kid{
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.hz-in > .hz-kid{
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms ease calc(160ms + var(--k, 0) * 70ms),
    transform 1150ms var(--hz-out) calc(160ms + var(--k, 0) * 70ms);
}

/* Roemische Ziffern setzen sich aus weiter Sperrung zusammen */
.concept-roman.hz-kid{ letter-spacing: .32em; }
.hz-in > .concept-roman.hz-kid{
  letter-spacing: 0;
  transition:
    opacity 900ms ease 120ms,
    transform 1150ms var(--hz-out) 120ms,
    letter-spacing 1400ms var(--hz-out) 120ms;
}

/* ---------- Alpha / Omega: das Zeichen geht auf wie die Sonne ---------- */
.hz-armed.part-head .part-symbol{
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 38%, 0);
}
.hz-armed.part-head.hz-in .part-symbol{
  clip-path: inset(-20% -20% -20% -20%);
  transform: none;
  transition: clip-path 1200ms var(--hz-out), transform 1300ms var(--hz-out);
}
.hz-armed.part-head > div:not(.part-symbol){
  opacity: 0;
  transform: translate3d(-14px, 0, 0);
}
.hz-armed.part-head.hz-in > div:not(.part-symbol){
  opacity: 1;
  transform: none;
  transition: opacity 900ms ease 260ms, transform 1100ms var(--hz-out) 260ms;
}
.hz-armed.part-intro{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.hz-armed.part-intro.hz-in{
  opacity: .82;                      /* Deckkraft des Originals */
  transform: none;
  transition: opacity 1000ms ease 380ms, transform 1200ms var(--hz-out) 380ms;
}

/* ---------- Dunkle Glaskarten: erstes Licht streift das Glas ---------- */
.sc-glass-card > .hz-sheen{
  position: absolute !important;
  z-index: 1 !important;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 34%,
    rgba(255,236,214,.16) 47%,
    rgba(255,255,255,.26) 50%,
    rgba(255,236,214,.12) 53%,
    rgba(255,255,255,0) 66%);
  transform: translate3d(-110%, 0, 0);
  opacity: 0;
}
.hz-in > .hz-sheen{
  animation: hzSheen 1700ms var(--hz-out) 520ms 1 both;
}
@keyframes hzSheen{
  0%   { transform: translate3d(-110%, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate3d(110%, 0, 0); opacity: 0; }
}

/* ---------- Horizontbogen mit wandernder Sonne ---------- */
.hz-arc{
  position: absolute;
  z-index: 40;
  pointer-events: none;
  overflow: visible;
}
.hz-arc path{
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---------- Hover: die ganze Kachel hellt ruhig auf ----------
   Kein Licht, das dem Zeiger folgt, keine Bewegung. Unter einer gewoelbten
   Oberkante wuerde ein Anheben die Kante anschneiden, deshalb bleibt die
   Kachel an ihrem Platz. */
.fmt-grid .fmt-card{ transition: background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.fmt-grid .fmt-card:hover,
.fmt-grid .fmt-card:focus-within{
  transform: none !important;
  background: rgba(245, 241, 232, .13) !important;
  border-color: rgba(245, 241, 232, .34) !important;
}

@media (prefers-reduced-motion: reduce){
  .hz-arc, .hz-sheen{ display: none !important; }
}