/* ==========================================================================
   Stamply 3D-Postkarte – wiederverwendbare Komponente (reines CSS-3D, kein WebGL)
   Struktur:
     .sx-pc-scene > .sx-pc > .sx-pc-face.sx-pc-front / .sx-pc-back / .sx-pc-edge×4
                  > .sx-pc-shadow
   Rotation kommt über --rx/--ry/--rz (gesetzt von sx-card3d.js).
   ========================================================================== */

.sx-pc-scene {
    --pc-paper: #fffdf8;
    --pc-edge: #e6dccb;
    --pc-ink: #23314f;
    --pc-radius: 5px;
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 3 / 2;
    margin: 0 auto;
    perspective: 1500px;
    -webkit-perspective: 1500px;
}

.sx-pc {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform:
        translateY(var(--ty, 0px))
        rotateX(var(--rx, 8deg))
        rotateY(var(--ry, -16deg))
        rotateZ(var(--rz, -2deg));
    will-change: transform;
}

.sx-pc-face {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: var(--pc-radius);
    overflow: hidden;
    background: var(--pc-paper);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    box-sizing: border-box;
}
.sx-pc-front { transform: translateZ(1.5px); }
.sx-pc-back  { transform: rotateY(180deg) translateZ(1.5px); }

/* Kartenstärke: vier schmale Seitenflächen */
.sx-pc-edge { position: absolute; background: var(--pc-edge); pointer-events: none; }
.sx-e-t { top: 0; left: 6px; right: 6px; height: 3px; transform-origin: top;    transform: translateZ(1.5px) rotateX(-90deg); }
.sx-e-b { bottom: 0; left: 6px; right: 6px; height: 3px; transform-origin: bottom; transform: translateZ(1.5px) rotateX(90deg); }
.sx-e-l { left: 0; top: 6px; bottom: 6px; width: 3px; transform-origin: left;   transform: translateZ(1.5px) rotateY(90deg); }
.sx-e-r { right: 0; top: 6px; bottom: 6px; width: 3px; transform-origin: right;  transform: translateZ(1.5px) rotateY(-90deg); }

/* Weicher Bodenschatten, reagiert auf Neigung */
.sx-pc-shadow {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -12%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(30, 24, 14, .32), rgba(30, 24, 14, 0));
    filter: blur(6px);
    transform: translateX(calc(var(--ry-num, -16) * -0.6px)) scaleX(calc(1 - var(--lift, 0) * .25));
    opacity: calc(.9 - var(--lift, 0) * .35);
    pointer-events: none;
}

/* ---------- Rückseite: echte Postkarten-Anmutung ---------- */
.sx-pc-back {
    display: flex;
    padding: 7% 6% 7% 7%;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .025) 1px, transparent 1px) 0 0 / 18px 100%,
        var(--pc-paper);
}
.sx-pc-msg {
    flex: 1.15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15em;
    padding-right: 6%;
    text-align: left;
}
.sx-hand {
    font-family: 'Caveat', 'Segoe Print', cursive;
    font-size: clamp(.95rem, 2.6vw, 1.45rem);
    line-height: 1.15;
    color: var(--pc-ink);
    transform: rotate(-2deg);
    white-space: nowrap;
}
.sx-pc-divider { width: 1px; background: rgba(0, 0, 0, .14); margin: 4% 0; }
.sx-pc-addr {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 13%;
    padding: 0 0 8% 8%;
}
.sx-pc-line { display: block; height: 1px; background: rgba(0, 0, 0, .28); width: 100%; }
.sx-pc-line.sx-short { width: 62%; }
.sx-pc-stamp {
    position: absolute;
    top: -2%;
    right: 0;
    width: 34%;
    aspect-ratio: 1;
    transform: rotate(7deg);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}
.sx-pc-stamp img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sx-pc-postmark {
    position: absolute;
    top: 8%;
    right: 20%;
    width: 34%;
    color: rgba(44, 36, 30, .42);
    transform: rotate(-11deg);
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ---------- Vorderseite: Foto-Platzhalter als Upload-Fläche ---------- */
.sx-pc-front { display: block; cursor: pointer; }
/* Beispielmotiv: echtes Foto (kein gemalter Verlauf) */
.sx-pc-sky {
    position: absolute;
    inset: 0;
    background: #dfe6ea url("sample-photo.jpg") center / cover no-repeat;
}
/* Upload-Platzhalter: leere Karte mit Fotorahmen in Tinte */
.sx-pc-upload {
    position: absolute;
    inset: 10px;
    border: 1.5px dashed rgba(22, 22, 22, .35);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: #161616;
    text-align: center;
    transition: background .2s ease, border-color .2s ease;
}
.sx-pc-cam { width: 34px; height: 34px; color: #161616; }
.sx-pc-upload > span { font-weight: 700; font-size: 1.05rem; }
.sx-pc-upload small { font-size: .78rem; color: #6e6a62; }
.sx-pc-front:hover .sx-pc-upload { background: rgba(39, 64, 107, .04); border-color: #27406b; }

/* Hotel-Logo, wie es gedruckt wird (oben rechts) */
.sx-pc-hotel {
    position: absolute;
    top: 6%;
    right: 5%;
    max-width: 30%;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    line-height: 0;
}
.sx-pc-hotel[hidden] { display: none; }
.sx-pc-hotel img { max-width: 100%; max-height: 38px; width: auto; height: auto; object-fit: contain; }

/* Foto-Vorderseite (Checkin, Erfolg, Versand-Animation) */
.sx-pc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Drag & Drop: Karte hebt sich und richtet sich auf */
.sx-pc-scene.sx-drag .sx-pc-upload { background: rgba(39, 64, 107, .06); border-color: #27406b; border-style: solid; }
.sx-pc-scene[data-flip] { cursor: pointer; }

/* ---------- Tinte: handschriftliche Notiz, die ein Füller schreibt (sx-ink.js) ---------- */
.sx-ink {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    font-family: 'Caveat', 'Segoe Print', cursive;
    color: #23314f;
    line-height: 1;
}
.sx-ink-text { display: inline-block; padding: 2px 2px 4px; }
.sx-ink-arrow { width: 46px; height: 40px; overflow: visible; flex: none; }
.sx-ink-arrow path { fill: none; stroke: #23314f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-ink-pen {
    position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0;
    transition: opacity .25s ease; will-change: transform; z-index: 2;
    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .18));
}
.sx-ink-pen.is-on { opacity: 1; }
.sx-ink-pen.is-off { opacity: 0; transition: opacity .45s ease .1s; }

/* Kringel in Königsblau um ein Element (SxInk.ring) */
.sx-ring { position: relative; display: inline-block; }
.sx-ring-svg { position: absolute; left: -18px; right: -18px; top: -13px; bottom: -13px; width: calc(100% + 36px); height: calc(100% + 26px); overflow: visible; pointer-events: none; z-index: 1; }
.sx-ring-svg path { fill: none; stroke: #2747a0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: reduce) {
    .sx-pc { transition: none !important; }
}