/**
 * 3D tabuľka v hero.
 *
 * Skutočný box z CSS transformácií: predná a zadná strana + steny + vrstvy
 * hrany. Rozmery sú v percentách scény, aby rovnaké pravidlá platili pre
 * 360 px na desktope aj 250 px na mobile. Perspektíva je na scéne, nie na
 * karte — inak by sa pri otáčaní menila.
 *
 * Načítava sa len na domovskej stránke (inc/enqueue.php).
 */

.tk-plate3d {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.tk-plate3d__scene {
    --tk-plate-r: 5%;      /* zaoblenie rohov, sedí s rohmi vyrezanými v obrázku */
    --tk-plate-d: 6px;     /* hrúbka akrylu; vrstvy hrany generuje plate3d.php od +2,5 do −2,5 px */
    width: min(66%, 360px);
    aspect-ratio: 1 / 1;
    perspective: 1500px;
    cursor: grab;
    outline: none;
    /* Zvislý ťah nechať stránke – inak by sa hero na mobile nedal preskrolovať. */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.tk-plate3d__scene:focus-visible {
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.tk-plate3d.is-dragging .tk-plate3d__scene { cursor: grabbing; }

.tk-plate3d__card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* Pokojové natočenie, aby bolo vidieť, že je to 3D. JS ho neskôr prepisuje. */
    transform: rotateX(15deg) rotateY(-20deg);
    will-change: transform;
}

.tk-plate3d__face,
.tk-plate3d__edge,
.tk-plate3d__wall {
    position: absolute;
    display: block;
}

/*
 * Strany NEMAJÚ overflow: hidden. Safari pri ňom ignoruje backface-visibility
 * a zadná strana presvitá cez prednú (zrkadlové „3M"). Zaoblenie preto nesie
 * každý prvok sám: obrázok vlastným border-radius, zadná strana pozadím.
 */
.tk-plate3d__face {
    inset: 0;
    border-radius: var(--tk-plate-r);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* O pol pixla pred krajnou vrstvou hrany, aby neležali v jednej rovine. */
.tk-plate3d__face--front { transform: translateZ(calc(var(--tk-plate-d) / 2 + .5px)); }

/*
 * Zadná strana: biela podložka s vodoznakom „3M" ako skutočná obojstranná
 * páska. Je to SVG vzor v data URI, nie obrázok – nič sa nesťahuje.
 */
.tk-plate3d__face--back {
    transform: rotateY(180deg) translateZ(calc(var(--tk-plate-d) / 2 + .5px));
    background-color: #fcfcfc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='70' height='40' patternUnits='userSpaceOnUse' patternTransform='rotate(-45)'%3E%3Ctext x='0' y='20' font-family='Arial, sans-serif' font-size='18' font-weight='800' fill='rgba(0,0,0,0.22)'%3E3M%3C/text%3E%3Ctext x='35' y='40' font-family='Arial, sans-serif' font-size='18' font-weight='800' fill='rgba(0,0,0,0.22)'%3E3M%3C/text%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E");
}

/* Predná strana má dve „kože", prepínajú sa priehľadnosťou. */
.tk-plate3d__skin {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--tk-plate-r);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    -webkit-user-drag: none;
}

.tk-plate3d__skin.is-active { opacity: 1; }

.tk-plate3d__shine {
    position: absolute;
    inset: 0;
    border-radius: var(--tk-plate-r);
    background: linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

/* Vrstvy hrany: šesť 1 px plátov dáva hrúbku aj zaobleným rohom. */
.tk-plate3d__edge {
    inset: 0;
    border-radius: var(--tk-plate-r);
    background: #e5e5e5;
}

.tk-plate3d__edge--rear {
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

/* Steny na rovných úsekoch medzi zaoblenými rohmi. */
.tk-plate3d__wall {
    background: #e5e5e5;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
}

.tk-plate3d__wall--left,
.tk-plate3d__wall--right {
    width: var(--tk-plate-d);
    top: var(--tk-plate-r);
    height: calc(100% - 2 * var(--tk-plate-r));
}

.tk-plate3d__wall--left  { left: 0;  transform-origin: left;  transform: translateZ(calc(var(--tk-plate-d) / 2)) rotateY(90deg); }
.tk-plate3d__wall--right { right: 0; transform-origin: right; transform: translateZ(calc(var(--tk-plate-d) / 2)) rotateY(-90deg); }

.tk-plate3d__wall--top,
.tk-plate3d__wall--bottom {
    height: var(--tk-plate-d);
    left: var(--tk-plate-r);
    width: calc(100% - 2 * var(--tk-plate-r));
}

.tk-plate3d__wall--top    { top: 0;    transform-origin: top;    transform: translateZ(calc(var(--tk-plate-d) / 2)) rotateX(-90deg); }
.tk-plate3d__wall--bottom { bottom: 0; transform-origin: bottom; transform: translateZ(calc(var(--tk-plate-d) / 2)) rotateX(90deg); }

/*
 * Prepínač a nápoveda: bez JS nemajú čo robiť, ukážu sa až s `is-ready`.
 * Skrývajú sa cez visibility, nie display, aby si držali miesto a tabuľka
 * po načítaní skriptu neposkočila.
 */
.tk-plate3d__switch { display: flex; gap: 8px; }
.tk-plate3d__hint { display: flex; }

.tk-plate3d__switch,
.tk-plate3d__hint {
    visibility: hidden;
}

.tk-plate3d.is-ready .tk-plate3d__switch,
.tk-plate3d.is-ready .tk-plate3d__hint {
    visibility: visible;
}

.tk-plate3d__btn {
    padding: 9px 16px;
    border-radius: var(--tk-r-pill);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 26, 53, .85);
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: var(--tk-fw-bold);
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.tk-plate3d__btn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

.tk-plate3d__btn.is-active {
    background: var(--tk-indigo);
    border-color: var(--tk-indigo);
    color: #fff;
}

.tk-plate3d__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.tk-plate3d__hint {
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--tk-fw-bold);
    color: #7C89A8;
}

.tk-plate3d__hint svg { color: var(--tk-green-soft); }

/* Svetlá scéna (detail produktu): tie isté tvary, farby z tokenov pre svetlé pozadie. */
.tk-plate3d--light .tk-plate3d__edge--rear { box-shadow: 0 24px 40px rgba(15, 23, 42, .22); }
.tk-plate3d--light .tk-plate3d__scene:focus-visible { box-shadow: 0 0 0 3px var(--tk-indigo-border); }

.tk-plate3d--light .tk-plate3d__btn {
    background: #fff;
    border-color: var(--tk-border);
    color: var(--tk-text-body);
}

.tk-plate3d--light .tk-plate3d__btn:hover { color: var(--tk-text); border-color: var(--tk-text-faint); }

.tk-plate3d--light .tk-plate3d__btn.is-active {
    background: var(--tk-indigo);
    border-color: var(--tk-indigo);
    color: #fff;
}

.tk-plate3d--light .tk-plate3d__btn:focus-visible { outline-color: var(--tk-indigo); }
.tk-plate3d--light .tk-plate3d__hint { color: var(--tk-text-faint); }
.tk-plate3d--light .tk-plate3d__hint svg { color: var(--tk-indigo); }

@media (max-width: 640px) {
    .tk-plate3d { gap: 14px; }
    .tk-plate3d__scene { width: min(70%, 240px); }
}

/* Bez pohybu: žiadny prechod kože, JS vypne auto-otáčanie a paralaxu. */
@media (prefers-reduced-motion: reduce) {
    .tk-plate3d__skin { transition: none; }
}