/* Nanegate.TNG – Kartenszene „Über uns“: Travertin-Platte, darauf die Visitenkarte als 3D-Objekt
   (Vorder-/Rückseite, Papierkante, Goldfolie auf dem Wappen). Ohne JS: Endzustand, statisch.
   cardscene.js setzt .is-armed (Startpose, pausiert) → .is-in (Phase 1 Stein, Phase 2 Karte),
   schaltet aria-pressed (Umdrehen) und setzt --tx/--ty/--gx (Neigung, Glanz) per Maus.
   Alle Maße in cqw (Breite der Szene) → skaliert mit der Spalte. Nur transform/opacity/filter animiert. */
.cardscene {
  --t: .42cqw;                                   /* Papierdicke (für die Kante leicht übertrieben) */
  --ease: cubic-bezier(.16, .84, .24, 1);
  --plane: perspective(150cqw) rotateX(54deg) rotateZ(-11deg); /* Lage der Steinoberfläche */
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
}
.cardscene[data-flip-label] { margin-bottom: 2.4em; }
.cardscene[data-flip-label]::after {             /* Hinweis, Text aus i18n über data-flip-label */
  content: attr(data-flip-label);
  position: absolute; top: calc(100% + .9em); left: 0; right: 0;
  text-align: center; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #7a6f5c;
}

/* Untergrund */
.cardscene-stone {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  border-radius: 4px;
  box-shadow: 0 2.4cqw 5cqw -2cqw rgba(22, 61, 46, .38), 0 .6cqw 1.2cqw -.4cqw rgba(60, 42, 20, .25);
  transform-origin: 50% 100%;
  transition: translate .7s var(--ease);         /* Maus-Parallax (JS setzt translate) */
}

/* Karte + Schatten liegen auf derselben Ebene (Steinoberfläche), Blick schräg von vorn wie im Foto.
   Schatten bewusst außerhalb des 3D-Kontexts der Karte → Karte kann ihn beim Neigen nie schneiden. */
.cardscene-card { all: unset; transform-style: preserve-3d; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cardscene-card, .cardscene-shadow {
  position: absolute; left: 22cqw; top: 17.5cqw; width: 52cqw; aspect-ratio: 1200 / 786;
  transform: var(--plane);
}
.cardscene-card:focus-visible { outline: 2px solid #C9A24B; outline-offset: 1.2cqw; }
.cardscene-card span { position: absolute; inset: 0; display: block; }
.cardscene-drop, .cardscene-flip { transform-style: preserve-3d; }
.cardscene-drop { transform: translateZ(var(--lz, 0px)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .5s var(--ease); }
.cardscene-flip { transform: rotateY(calc(var(--flip, 0) * 180deg)); transition: transform .95s cubic-bezier(.5, 0, .2, 1); }
.cardscene-card[aria-pressed="true"] { --flip: 1; }

/* Seiten + Papierkante (zwei Zwischenlagen: grüner und cremefarbener Karton) */
.cardscene-card .cardscene-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: .3cqw; }
.cardscene-front { transform: translateZ(calc(var(--t) / 2)); }
.cardscene-back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.cardscene-face img { display: block; width: 100%; height: 100%; }
.cardscene-flip::before, .cardscene-flip::after { content: ""; position: absolute; inset: 0; border-radius: .3cqw; }
.cardscene-flip::before { background: #0e2d21; transform: translateZ(calc(var(--t) / 6)); }
.cardscene-flip::after { background: #cfc6b3; transform: translateZ(calc(var(--t) / -6)); }
/* Licht von links oben, leichte Papierstruktur */
.cardscene-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 248, 228, .13), transparent 38%, transparent 62%, rgba(8, 28, 18, .22)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* Goldfolie: nur das Wappen (auf karte-vorne ausgemessen), Spiegelbänder wandern mit --gx */
.cardscene-card .cardscene-foil {
  inset: auto; left: 37.54%; top: 17.5%; width: 24.92%; height: 45.36%; overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 124'%3E%3Cpath fill-rule='evenodd' d='M10 30 L90 30 L90 70 C90 95.85 66 111.36 50 117 C34 111.36 10 95.85 10 70 Z M15.50 35.50 L84.50 35.50 L84.50 70 C84.50 91.46 63.80 104.34 50 109.03 C36.20 104.34 15.50 91.46 15.50 70 Z'/%3E%3Cpath d='M29 24.50 L29 11 L39.50 17.50 L50 3 L60.50 17.50 L71 11 L71 24.50 Z'/%3E%3Cpath d='M12.53 84 L87.47 84 L84.94 89.50 L15.06 89.50 Z M50 95 L53.60 98.60 L50 102.20 L46.40 98.60 Z'/%3E%3Cpath d='M25 42 L33.50 42 L33.50 77 L25 77 Z M25 42 L36 42 L62 77 L51 77 Z M53.50 42 L62 42 L62 77 L53.50 77 Z M49.20 42 L76 42 L76 50.50 L49.20 50.50 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 124'%3E%3Cpath fill-rule='evenodd' d='M10 30 L90 30 L90 70 C90 95.85 66 111.36 50 117 C34 111.36 10 95.85 10 70 Z M15.50 35.50 L84.50 35.50 L84.50 70 C84.50 91.46 63.80 104.34 50 109.03 C36.20 104.34 15.50 91.46 15.50 70 Z'/%3E%3Cpath d='M29 24.50 L29 11 L39.50 17.50 L50 3 L60.50 17.50 L71 11 L71 24.50 Z'/%3E%3Cpath d='M12.53 84 L87.47 84 L84.94 89.50 L15.06 89.50 Z M50 95 L53.60 98.60 L50 102.20 L46.40 98.60 Z'/%3E%3Cpath d='M25 42 L33.50 42 L33.50 77 L25 77 Z M25 42 L36 42 L62 77 L51 77 Z M53.50 42 L62 42 L62 77 L53.50 77 Z M49.20 42 L76 42 L76 50.50 L49.20 50.50 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.cardscene-foil::before, .cardscene-foil::after { content: ""; position: absolute; inset: -10% -150%; transition: transform .6s var(--ease); }
.cardscene-foil::before {                        /* gespiegeltes Umfeld: dunkles Altgold bis fast Weiß */
  background: repeating-linear-gradient(118deg, #6b4f1b 0, #a07c2c 2%, #e9cf88 4.2%, #fffbea 5%, #f3dc9c 5.8%,
    #b48d38 7.5%, #75581e 9.5%, #c9a24b 11.8%, #f6e3a8 13.2%, #fffdf2 13.6%, #d6b465 14.6%, #8a6a26 16.6%);
  transform: translateX(calc(var(--gx, 0) * 1%));
}
.cardscene-foil::after {                         /* harter Spitzlicht-Streifen, wandert schneller */
  background: linear-gradient(112deg, transparent 44%, rgba(255, 252, 238, .5) 48.6%, #fffef8 49.6%, rgba(255, 252, 238, .5) 50.6%, transparent 55%);
  mix-blend-mode: screen;
  transform: translateX(calc(var(--gx, 0) * 2.4% + 6%));
}

/* Schatten auf der Steinoberfläche: weich (Umgebung) + hart (Kontakt), grün-warm getönt */
.cardscene-shadow::before, .cardscene-shadow::after { content: ""; position: absolute; inset: 0; border-radius: .6cqw; }
.cardscene-shadow::before { inset: 1.2cqw; background: rgba(42, 30, 12, .66); filter: blur(1.8cqw); transform: translate(2.2cqw, 3cqw); }
.cardscene-shadow::after { inset: .6cqw; background: rgba(16, 32, 20, .82); filter: blur(.45cqw); transform: translate(.75cqw, 1.1cqw); }

/* Ablauf: .is-armed = Startpose (pausiert), .is-in = abspielen */
.cardscene.is-armed .cardscene-stone { animation: cs-stone 1.05s var(--ease) both paused; }
.cardscene.is-armed .cardscene-drop { animation: cs-drop 1.3s .85s backwards paused; }
.cardscene.is-armed .cardscene-shadow { animation: cs-shadow 1.3s .85s backwards paused; }
.cardscene.is-armed .cardscene-face, .cardscene.is-armed .cardscene-flip::before,
.cardscene.is-armed .cardscene-flip::after { animation: cs-fade .35s .85s backwards paused; }
.cardscene.is-armed .cardscene-foil::before { animation: cs-sweep 1.5s 1.75s var(--ease) backwards paused; }
.cardscene.is-in *, .cardscene.is-in *::before, .cardscene.is-in *::after { animation-play-state: running !important; }

@keyframes cs-stone {
  from { opacity: 0; filter: blur(14px); transform: perspective(150cqw) translate3d(0, 9cqw, -40cqw) rotateX(34deg) scale(.94); }
  45% { opacity: 1; }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes cs-drop {                             /* fällt, dreht sich flach, setzt auf, federt kurz nach */
  from { transform: translate3d(-9cqw, -16cqw, 30cqw) rotateZ(-34deg) rotateX(24deg) rotateY(-30deg); animation-timing-function: cubic-bezier(.25, .1, .5, 1); }
  62% { transform: translate3d(.4cqw, .3cqw, .8cqw) rotateZ(3deg) rotateX(-2.5deg) rotateY(1.5deg); animation-timing-function: ease-out; }
  80% { transform: translate3d(0, 0, 1.3cqw) rotateZ(-.8deg) rotateX(1.2deg) rotateY(-.6deg); animation-timing-function: ease-in-out; }
  to { transform: translateZ(var(--lz, 0px)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); }
}
@keyframes cs-shadow {                           /* hoch = groß, hell, unscharf → beim Aufsetzen klein und dunkel */
  from { opacity: 0; filter: blur(3cqw); transform: var(--plane) translate(7cqw, 8cqw) scale(1.2) rotate(-20deg); animation-timing-function: cubic-bezier(.25, .1, .5, 1); }
  30% { opacity: .3; filter: blur(2.2cqw); }
  62% { opacity: .92; filter: blur(.2cqw); transform: var(--plane) translate(.4cqw, .5cqw) scale(1.01); animation-timing-function: ease-out; }
  80% { opacity: .8; filter: blur(.5cqw); transform: var(--plane) translate(.8cqw, 1cqw) scale(1.03); }
  to { opacity: 1; filter: blur(0); transform: var(--plane); }
}
@keyframes cs-fade { from { opacity: 0; } }
@keyframes cs-sweep { from { transform: translateX(-34%); } }

@media (max-width: 639px) { .cardscene-stone { border-radius: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cardscene *, .cardscene *::before, .cardscene *::after { animation: none !important; transition: none !important; }
}