/*
 * drehkarten.css — Messestand-Seite, feste Full-HD-Bühne (1920 x 1080)
 * Baut auf cd.css auf (Reutlingen Sans + offizielle CD-Farben).
 *
 * Mirko Psak, MP Media
 */

/* ---------------------------------------------
   BÜHNE
   Alles wird in einem 1920x1080-Raster gebaut und
   per JS (--fit) passend in den Viewport skaliert.
   Dadurch sieht die Seite auf jedem Screen exakt
   gleich aus — egal ob 1080p-Messe-Display oder Laptop.
--------------------------------------------- */

:root {
    /* Tempo der Drehung. Einzige Stelle — das JS liest den Wert hier aus. */
    --flip-dauer: 650ms;

    /* Charakter der Drehung. Zum Ausprobieren einfach eine Zeile aktivieren:
         anholen, durchziehen, einrasten (aktuell)  cubic-bezier(0.66, 0, 0.24, 1.03)
         weicher, ohne Einrasten                    cubic-bezier(0.65, 0, 0.35, 1)
         gleichmaessig durchgezogen                 cubic-bezier(0.4, 0.1, 0.6, 0.9)
         satter Schwung mit deutlichem Einrasten    cubic-bezier(0.76, 0, 0.2, 1.08)  */
    --flip-kurve: cubic-bezier(0.66, 0, 0.24, 1.03);
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    display: grid;
    place-items: center;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.buehne {
    width: 1920px;
    transform: scale(var(--fit, 1));
    transform-origin: center center;
    will-change: transform;
}

.stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 410px);
    grid-auto-rows: 400px;
    column-gap: 40px;
    row-gap: 40px;
    width: 1920px;
    min-height: 1080px;
    box-sizing: border-box;
    padding: 122px 80px 118px;
    align-content: start;
}


/* ---------------------------------------------
   KOPFBEREICH
--------------------------------------------- */

.kopf {
    grid-column: span 2;
    align-self: start;
    padding-top: 4px;
}

.kopf__headline {
    font-size: 126px;
    line-height: 0.9;
    letter-spacing: -0.035em;
    margin: 0 0 44px;
    max-width: 800px;
    /* Zeilenweiser Einflug beim Laden */
    animation: kopf-rein 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.kopf__subline {
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 680px;
    animation: kopf-rein 1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

@keyframes kopf-rein {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------
   KARTE — Aufbau
   .karte          Rasterplatz, Schweben, Perspektive
   .karte__flaeche Button, 3D-Neigung zum Zeiger
   .karte__innen   die eigentliche Drehung
   .seite          Vorder-/Rückseite
--------------------------------------------- */

/* Karten in Ruhe auf einer Ebene; wer sich bewegt, kommt nach vorn */
.karte {
    position: relative;
    z-index: 1;
    perspective: 1800px;
    animation: karte-rein 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.25s + var(--verzoegerung, 0s));
}

.karte.ist-anvisiert { z-index: 5; }
.karte.ist-offen    { z-index: 6; }
.karte.flippt       { z-index: 20; }   /* waehrend der Drehung immer obenauf */

@keyframes karte-rein {
    from { opacity: 0; transform: translateY(46px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

/* Sanftes Schweben — startet erst, wenn der Einflug durch ist */
.schweben-an .karte.ist-ruhig {
    animation: schweben var(--schwebedauer, 7s) ease-in-out infinite;
    animation-delay: calc(var(--verzoegerung, 0s) * -11);   /* Phasenversatz statt Startverzögerung */
}

@keyframes schweben {
    0%, 100% { transform: translate3d(0, 0, 0)      rotate(0deg); }
    33%      { transform: translate3d(3px, -9px, 0) rotate(0.22deg); }
    66%      { transform: translate3d(-3px, -4px, 0) rotate(-0.18deg); }
}

.karte__flaeche {
    all: unset;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: rotateX(var(--neig-x, 0deg)) rotateY(var(--neig-y, 0deg)) scale(var(--hebung, 1));
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    touch-action: manipulation;
}

.karte__flaeche:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 6px;
}

/* Zeiger drüber: Karte kommt leicht entgegen */
.hat-hover .karte .karte__flaeche:hover,
.karte.ist-anvisiert .karte__flaeche {
    --hebung: 1.045;
}

.karte__innen {
    position: relative;
    will-change: transform;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Ruhezustand / Endzustand der Drehung */
.karte.ist-offen .karte__innen { transform: rotateY(180deg); }

/* Die Drehung selbst. Die Klasse .flippt setzt das JS nur für die Dauer der Animation.
 *
 * Wichtig: Drehung und "Pop nach vorne" liegen auf ZWEI Ebenen.
 * Stecken beide in einer Keyframe-Spur, bremst die Drehung in der Mitte
 * zwangsläufig ab (sie teilt sich die Zeit mit der Z-Bewegung) — das wirkt
 * stockend. Getrennt kann die Drehung ihre eigene Kurve fahren, während der
 * Pop unabhängig darüber schwingt.
 */
.karte.flippt.ist-offen      .karte__innen { animation: flip-auf var(--flip-dauer) var(--flip-kurve) both; }
.karte.flippt:not(.ist-offen) .karte__innen { animation: flip-zu  var(--flip-dauer) var(--flip-kurve) both; }
.karte.flippt .karte__flaeche { animation: karte-pop var(--flip-dauer) ease-in-out both; }

/* Anholen, durchziehen, einrasten. Der Überschwung am Ende (y > 1 in der Kurve)
   lässt die Karte einrasten statt austrudeln — ohne ihn wirkt Ease-in-out
   am Schluss wie Bremsen. Siehe --flip-kurve in :root für Alternativen. */
@keyframes flip-auf {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

@keyframes flip-zu {
    0%   { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}

/* Der Pop erreicht seinen Scheitel genau dann, wenn die Karte hochkant steht.
   Das leichte rotateZ gibt der Bewegung Drall, als würde die Karte von Hand
   angestoßen. --hebung wird mitgeführt, sonst schnappt eine Karte unter dem
   Zeiger beim Start der Drehung zurück auf 1.0. */
@keyframes karte-pop {
    0%, 100% { transform: translateZ(0)     rotateZ(0deg)    scale(var(--hebung, 1)); }
    50%      { transform: translateZ(130px) rotateZ(-2.4deg) scale(calc(var(--hebung, 1) * 1.04)); }
}


/* ---------------------------------------------
   SEITEN
--------------------------------------------- */

.seite {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Flach wie im CD — Schatten kommt nur während der Bewegung dazu */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.45s ease;
}

.karte.flippt .seite,
.karte.ist-anvisiert .seite {
    box-shadow: 0 48px 90px -30px rgba(0, 0, 0, 0.45);
}

.seite--vorn   { background: #e9eef2; }
.seite--hinten { background: var(--farbe); transform: rotateY(180deg); }

.seite__bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--bildpos, 50% 25%);
    display: block;
    /* Minimaler Ken-Burns, damit das Foto nie ganz still steht */
    animation: ken-burns 24s ease-in-out infinite alternate;
    animation-delay: var(--verzoegerung, 0s);
}

@keyframes ken-burns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.055); }
}

/* Lichtreflex, der während der Drehung über die Fläche wandert */
.seite__glanz {
    position: absolute;
    inset: -40%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0) 62%);
    transform: translateX(-120%);
}

.karte.flippt .seite__glanz {
    animation: glanz var(--flip-dauer) cubic-bezier(0.4, 0, 0.3, 1);
}

@keyframes glanz {
    0%   { opacity: 0;    transform: translateX(-120%); }
    30%  { opacity: 0.8; }
    70%  { opacity: 0.8; }
    100% { opacity: 0;    transform: translateX(120%); }
}


/* ---------------------------------------------
   VORDERSEITE — Nummer + Frage-Balken
--------------------------------------------- */

.karte__nummer {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--farbe);
    color: #000;
    font-size: 23px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    letter-spacing: -0.02em;
}

.karte__frage {
    position: absolute;
    z-index: 2;
    left: 60px;
    right: -10px;
    bottom: 35px;
    padding: 24px 20px;
    background: var(--farbe);
    color: #000;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.164;
    letter-spacing: -0.015em;
    transform: rotate(var(--balken-dreh, -5deg));
    transform-origin: center;
}

/* Winkel einheitlich -5deg laut CD; pro Karte unterscheidet sich nur der Einzug (Maße aus dem Entwurf) */
.karte--1 .karte__frage { left: 60px; }
.karte--2 .karte__frage { left: 62px; }
.karte--3 .karte__frage { left: 85px; }
.karte--4 .karte__frage { left: 85px; }
.karte--5 .karte__frage { left: 60px; }
.karte--6 .karte__frage { left: 89px; }


/* ---------------------------------------------
   RÜCKSEITE — Text + Person
--------------------------------------------- */

.seite--hinten {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px 28px 30px;
    box-sizing: border-box;
    color: #000;
}

.rueck__text,
.rueck__person {
    display: block;
    font-size: 22px;
    line-height: 1.36;
    letter-spacing: -0.005em;
    /* Inhalt läuft der Drehung leicht hinterher */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.karte.ist-offen .rueck__text   { opacity: 1; transform: none; transition-delay: 0.52s; }
.karte.ist-offen .rueck__person { opacity: 1; transform: none; transition-delay: 0.62s; }

.rueck__absatz { display: block; }
.rueck__absatz + .rueck__absatz { margin-top: 0.7em; }

.rueck__zeile {
    display: block;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.rueck__zeile--firma { font-weight: 700; }


/* ---------------------------------------------
   ATTRACT-MODE
   Nach Leerlauf wandert ein Puls durch die Karten,
   damit der Stand aus der Ferne auffällt.
--------------------------------------------- */

.ist-idle .karte:not(.ist-offen) .karte__flaeche {
    animation: locken 2.6s ease-in-out infinite;
    animation-delay: calc(var(--verzoegerung, 0s) * 2.4);
}

@keyframes locken {
    0%, 70%, 100% { transform: scale(1); }
    18%           { transform: scale(1.055) rotateY(-9deg); }
    36%           { transform: scale(1.055) rotateY(9deg); }
}

.ist-idle .karte:not(.ist-offen) .seite--vorn .seite__glanz {
    animation: glanz 2.6s ease-in-out infinite;
    animation-delay: calc(var(--verzoegerung, 0s) * 2.4);
    opacity: 1;
}


/* ---------------------------------------------
   SONSTIGES
--------------------------------------------- */

.hinweis {
    grid-column: span 4;
    font-size: 28px;
    background: #fff;
    padding: 24px 28px;
}

.hinweis code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: var(--gelb);
    padding: 0 6px;
}

/* Kiosk: Mauszeiger ausblenden, sobald er still steht */
body.zeiger-aus,
body.zeiger-aus .karte__flaeche { cursor: none; }

@media (prefers-reduced-motion: reduce) {
    .karte, .kopf__headline, .kopf__subline,
    .seite__bild, .seite__glanz, .karte__flaeche {
        animation: none !important;
    }
    .karte.flippt .karte__innen { animation-duration: 420ms; }
}