/* ===========================================================================
   Rusantech Shop — Karte, Handy und Tap-Bühne
   ---------------------------------------------------------------------------
   Die Karte (.nfc) und das Handy (.phone) sind reine HTML/CSS-Bauteile, kein Bild. Alle Maße
   laufen über Container-Einheiten (cqw): dieselbe Karte ist im Hero 480 px und im Warenkorb 80 px
   breit und sieht in beiden Größen gleich aus. Das Markup baut karten.js.

   Aufbau:
     1. Karte (Vorderseite, Rückseite, Materialien, Glanz)
     2. Handy (Sperrbildschirm, Ergebnis-Ansichten)
     3. Tap-Bühne (Karte + Handy, gesteuert über data-ph)
   =========================================================================== */

@property --ax {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --ay {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* --- 1. Karte -------------------------------------------------------------- */
.nfc {
  --paper-a: #1b1b1f;
  --paper-b: #0c0c0e;
  --paper-c: #151518;
  --paper-hi: rgba(255, 255, 255, 0.08);
  --kante: rgba(255, 255, 255, 0.09);
  --kante-hi: rgba(255, 255, 255, 0.14);
  --tinte: #f4efe5;
  --tinte-soft: rgba(244, 239, 229, 0.66);
  --folie: #dcb86e;
  --folie-hell: #f3deaa;
  --glanz-a: 0.11;
  --glanz-b: 0.05;
  --praege: rgba(255, 255, 255, 0.07);

  position: relative;
  width: 100%;
  aspect-ratio: 85.6 / 54;
  container-type: inline-size;
}

.nfc[data-finish='elfenbein'] {
  --paper-a: #f8f3e8;
  --paper-b: #e4d9c4;
  --paper-c: #f2eadb;
  --paper-hi: rgba(255, 255, 255, 0.8);
  --kante: rgba(0, 0, 0, 0.08);
  --kante-hi: rgba(255, 255, 255, 0.9);
  --tinte: #19191b;
  --tinte-soft: rgba(25, 25, 27, 0.62);
  --folie: #a67e33;
  --folie-hell: #c9a35a;
  --glanz-a: 0.38;
  --glanz-b: 0.16;
  --praege: rgba(255, 255, 255, 0.75);
}

.nfc__shadow {
  position: absolute;
  inset: 12% 4% -9%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  filter: blur(14px);
  opacity: 0.8;
  transform: translateY(5%) scale(0.92);
  pointer-events: none;
}
.nfc[data-finish='elfenbein'] .nfc__shadow {
  background: radial-gradient(closest-side, rgba(40, 28, 8, 0.42), transparent);
}

/* Neigung: Zeiger (--px/--py, -1 bis 1) plus leises Eigenleben (--ax/--ay) */
.nfc__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(calc((var(--py, 0) + var(--ay, 0)) * -10deg))
    rotateY(calc((var(--px, 0) + var(--ax, 0)) * 14deg));
  transition: transform 0.35s var(--ease-out, ease-out);
  will-change: transform;
}

.nfc__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-out, ease-out);
}
.nfc[data-side='back'] .nfc__flip {
  transform: rotateY(180deg);
}

.nfc__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4.6cqw;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: radial-gradient(120% 90% at 16% 0%, var(--paper-hi), transparent 56%),
    linear-gradient(150deg, var(--paper-a), var(--paper-b) 62%, var(--paper-c));
  box-shadow: inset 0 0 0 0.3cqw var(--kante), inset 0 0.35cqw 0 var(--kante-hi);
  color: var(--tinte);
}
.nfc__back {
  transform: rotateY(180deg);
}

/* Feines Korn wie bei einer Karte mit Soft-Touch-Oberfläche */
.nfc__face::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: url('/assets/shop/korn.svg');
  mix-blend-mode: overlay;
  pointer-events: none;
}
.nfc[data-finish='elfenbein'] .nfc__face::before {
  mix-blend-mode: multiply;
  opacity: 0.12;
}

.nfc__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 85% at var(--mx, 26%) var(--my, 16%), rgba(255, 255, 255, var(--glanz-a)), transparent 62%),
    linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, var(--glanz-b)) 47%, transparent 58%);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, calc(var(--px, 0) * 40% + 50%) 0;
  transition: background-position 0.4s var(--ease-out, ease-out);
}

.nfc__stars {
  position: absolute;
  left: 6.6cqw;
  top: 7cqw;
  display: flex;
  gap: 1.1cqw;
  color: var(--folie);
}
.nfc__stars svg {
  width: 5cqw;
  height: 5cqw;
  fill: currentColor;
  filter: drop-shadow(0 0.2cqw 0 var(--praege));
}

.nfc__icon {
  position: absolute;
  left: 6.6cqw;
  top: 6.4cqw;
  width: 7cqw;
  height: 7cqw;
  color: var(--folie);
}

.nfc__wave {
  position: absolute;
  right: 6.2cqw;
  top: 6.4cqw;
  width: 7.6cqw;
  height: 7.6cqw;
  color: var(--folie);
}

.nfc__title {
  position: absolute;
  left: 6.6cqw;
  top: 21cqw;
  margin: 0;
  font-size: 11.6cqw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--tinte);
  text-shadow: 0 0.2cqw 0 var(--praege);
}
.nfc__title em {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--folie);
}

.nfc__foil {
  position: absolute;
  left: 6.6cqw;
  right: 6.6cqw;
  bottom: 13.5cqw;
  height: 0.3cqw;
  background: linear-gradient(90deg, var(--folie), transparent 75%);
  opacity: 0.75;
}

.nfc__name {
  position: absolute;
  left: 6.6cqw;
  right: 6.6cqw;
  bottom: 5.6cqw;
  overflow: hidden;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 3.2cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tinte-soft);
  text-shadow: 0 0.2cqw 0 var(--praege);
}
.nfc__name:empty::before {
  content: 'Euer Name';
  opacity: 0.35;
}

/* Rückseite: Hinweis, wo das Handy hingehört */
.nfc__back-in {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3.2cqw;
  text-align: center;
}
.nfc__back-in svg {
  width: 15cqw;
  height: 15cqw;
  color: var(--folie);
}
.nfc__back-in span {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 3cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinte-soft);
}

/* Leises Eigenleben, wenn niemand den Zeiger darüber hat */
@keyframes nfc-schweben {
  0% { --ax: -0.34; --ay: 0.16; }
  50% { --ax: 0.34; --ay: -0.2; }
  100% { --ax: -0.34; --ay: 0.16; }
}
.nfc--lebt .nfc__tilt {
  animation: nfc-schweben 9s ease-in-out infinite;
}

/* --- 2. Handy ---------------------------------------------------------------- */
.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19;
  container-type: inline-size;
  filter: drop-shadow(0 4cqw 7cqw rgba(0, 0, 0, 0.55));
}
.phone__body {
  position: absolute;
  inset: 0;
  padding: 2.5cqw;
  border-radius: 15cqw;
  background: linear-gradient(150deg, #34343a, #0a0a0c 55%, #1c1c20);
  box-shadow: inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.1), inset 0 0 0 1.4cqw #060607;
}
.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12.6cqw;
  background: #05060a;
  color: #fff;
}
.phone__island {
  position: absolute;
  top: 3.4cqw;
  left: 50%;
  z-index: 5;
  width: 27cqw;
  height: 7.6cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #000;
}

/* Sperrbildschirm mit dem Hinweis „Karte erkannt“ */
.lock {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 70% at 25% 0%, #43557d 0%, #171c30 52%, #090b13 100%);
  transition: opacity 0.6s ease, transform 0.8s var(--ease-out, ease-out);
}
.lock__time {
  margin-top: 25cqw;
  text-align: center;
  font-size: 25cqw;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.lock__date {
  margin-top: 2cqw;
  text-align: center;
  font-size: 5.4cqw;
  color: rgba(255, 255, 255, 0.72);
}
.lock__banner {
  position: absolute;
  top: 4.6cqw;
  right: 4.6cqw;
  left: 4.6cqw;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  padding: 3.4cqw 4cqw;
  border-radius: 7cqw;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.35), inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  transform: translateY(-160%);
  opacity: 0;
  transition: transform 0.7s var(--ease-out, ease-out), opacity 0.5s;
}
.lock__ic {
  display: grid;
  flex: none;
  width: 11cqw;
  height: 11cqw;
  place-items: center;
  border-radius: 3cqw;
  background: linear-gradient(145deg, var(--acc, #e9b949), color-mix(in srgb, var(--acc, #e9b949) 55%, #000));
  color: #101012;
}
.lock__ic svg {
  width: 6.4cqw;
  height: 6.4cqw;
}
.lock__banner b {
  display: block;
  font-size: 4.4cqw;
  font-weight: 600;
}
.lock__banner small {
  display: block;
  margin-top: 0.4cqw;
  font-size: 3.7cqw;
  color: rgba(255, 255, 255, 0.72);
}

/* Ergebnis: schiebt von unten herein, wenn die Seite aufgeht */
.res {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 16cqw 6cqw 6cqw;
  background: #fbfaf6;
  color: #17171a;
  transform: translateY(102%);
  transition: transform 0.9s var(--ease-out, ease-out);
}
.res__bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 14cqw;
  background: #fbfaf6;
}
.res__h {
  font-size: 3.8cqw;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(23, 23, 26, 0.48);
}
.res__biz {
  margin-top: 2.2cqw;
  overflow: hidden;
  font-size: 8cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bewertung: fünf Sterne füllen sich nacheinander */
.res__stars {
  display: flex;
  gap: 1.6cqw;
  margin-top: 6cqw;
}
.res__stars svg {
  width: 10.4cqw;
  height: 10.4cqw;
  fill: #dedad0;
  transition: fill 0.35s ease, transform 0.5s var(--ease-out, ease-out);
}
[data-ph~='p4'] .res__stars svg {
  fill: #f2b624;
  transform: scale(1);
}
[data-ph~='p4'] .res__stars svg:nth-child(1) { transition-delay: 0.55s; }
[data-ph~='p4'] .res__stars svg:nth-child(2) { transition-delay: 0.7s; }
[data-ph~='p4'] .res__stars svg:nth-child(3) { transition-delay: 0.85s; }
[data-ph~='p4'] .res__stars svg:nth-child(4) { transition-delay: 1s; }
[data-ph~='p4'] .res__stars svg:nth-child(5) { transition-delay: 1.15s; }
.res__lines {
  display: grid;
  gap: 2.2cqw;
  margin-top: 6cqw;
}
.res__lines i {
  display: block;
  height: 2.6cqw;
  border-radius: 9px;
  background: #e9e5da;
}
.res__lines i:nth-child(1) { width: 92%; }
.res__lines i:nth-child(2) { width: 78%; }
.res__lines i:nth-child(3) { width: 60%; }
.res__btn {
  position: absolute;
  right: 6cqw;
  bottom: 7cqw;
  left: 6cqw;
  padding: 3.4cqw;
  border-radius: 99px;
  background: #17171a;
  color: #fff;
  text-align: center;
  font-size: 4.4cqw;
  font-weight: 600;
}

/* Speisekarte: Reiter und Gerichte */
.res__tabs {
  display: flex;
  gap: 1.6cqw;
  margin-top: 5cqw;
}
.res__tabs span {
  padding: 1.8cqw 3.4cqw;
  border-radius: 99px;
  background: #ece8dd;
  font-size: 3.5cqw;
  font-weight: 500;
}
.res__tabs span:first-child {
  background: #17171a;
  color: #fff;
}
.res__menu {
  display: grid;
  margin-top: 4cqw;
}
.res__menu div {
  display: flex;
  justify-content: space-between;
  gap: 3cqw;
  padding: 3.3cqw 0;
  border-bottom: 0.3cqw solid #e6e1d4;
  font-size: 4.1cqw;
  opacity: 0;
  transform: translateY(3cqw);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-out, ease-out);
}
.res__menu div span:last-child {
  font-variant-numeric: tabular-nums;
  color: rgba(23, 23, 26, 0.55);
}
[data-ph~='p4'] .res__menu div {
  opacity: 1;
  transform: none;
}
[data-ph~='p4'] .res__menu div:nth-child(1) { transition-delay: 0.5s; }
[data-ph~='p4'] .res__menu div:nth-child(2) { transition-delay: 0.62s; }
[data-ph~='p4'] .res__menu div:nth-child(3) { transition-delay: 0.74s; }
[data-ph~='p4'] .res__menu div:nth-child(4) { transition-delay: 0.86s; }
[data-ph~='p4'] .res__menu div:nth-child(5) { transition-delay: 0.98s; }

/* --- 3. Tap-Bühne ---------------------------------------------------------------
   Eine Bühne, drei Antriebe: im Hero läuft sie als Schleife, im Abschnitt „So funktioniert’s“ steuert
   der Scrollweg sie, auf der Produktseite startet der Knopf „Tap ansehen“. Der Zustand steht in
   data-ph als Liste: p1 Handy kommt, p2 Handy berührt, p3 Hinweis erscheint, p4 Seite geht auf,
   p5 Handy geht. Die Zustände sind kumulativ (p4 enthält p1 bis p3). */
.ts {
  --px: 0;
  --py: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
}

.ts__kartenhalter {
  position: absolute;
  top: 38%;
  left: 15%;
  width: 70%;
  perspective: 1500px;
  transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -9px), 0);
  transition: transform 0.6s var(--ease-out, ease-out), left 1.2s var(--ease-out, ease-out);
}
/* Liegt die Karte allein da, steht sie mittig; kommt das Handy, rutscht sie zur Seite */
[data-ph~='p1'] .ts__kartenhalter {
  left: 4%;
}
.ts__karte {
  transform: rotateX(20deg) rotateZ(-8deg) translateZ(0);
  transform-origin: 50% 60%;
  transition: transform 1.1s var(--ease-out, ease-out), opacity 0.5s ease;
}
[data-ph~='p2'] .ts__karte {
  transform: rotateX(8deg) rotateZ(-4deg) translateY(2.5%) scale(0.985);
}
.ts--wechsel .ts__karte {
  opacity: 0;
  transform: rotateX(20deg) rotateZ(-14deg) translateY(6%) scale(0.94);
}

.ts__handy {
  position: absolute;
  top: 3%;
  right: 3%;
  width: 33%;
  opacity: 0;
  transform: translate3d(70%, 60%, 0) rotate(18deg) scale(0.9);
  transition: transform 1.2s var(--ease-out, ease-out), opacity 0.6s ease;
}
[data-ph~='p1'] .ts__handy {
  opacity: 1;
  transform: translate3d(6%, 22%, 0) rotate(10deg) scale(1);
}
[data-ph~='p2'] .ts__handy {
  transform: translate3d(-16%, 38%, 0) rotate(5deg) scale(1);
}
[data-ph~='p3'] .lock__banner {
  opacity: 1;
  transform: none;
}
[data-ph~='p4'] .lock__banner {
  opacity: 0;
  transform: translateY(-30%);
}
[data-ph~='p4'] .res {
  transform: none;
}
[data-ph~='p4'] .lock {
  transform: scale(0.94);
  opacity: 0.5;
}
[data-ph~='p5'] .ts__handy {
  opacity: 0;
  transform: translate3d(34%, -20%, 0) rotate(14deg) scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .nfc--lebt .nfc__tilt {
    animation: none;
  }
  .nfc__flip,
  .ts__handy,
  .ts__karte,
  .res,
  .lock__banner {
    transition-duration: 0.01s;
  }
}