/* Arka Books · stiluri 3D (cărți, înclinări, apariții). Vezi arka-3d.js */
@property --by { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --bx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --lift { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ── carte 3D ─────────────────────────────────────────── */
.scene3d { position: relative; perspective: 1500px; perspective-origin: 50% 40%; transform-style: preserve-3d; }
.book3d { --w: 260px; --d: 30px; --h: calc(var(--w) * 1.42); --spine: #173e33; --spine-ink: #e8d3a4;
  position: absolute; display: block; width: var(--w); height: var(--h); transform-style: preserve-3d; text-decoration: none; color: inherit;
  transform: rotateX(calc(var(--bx) - var(--py, 0) * 9deg)) rotateY(calc(var(--by) + var(--px, 0) * 16deg + var(--spin, 0deg))) rotateZ(var(--bz, 0deg));
  transition: --by .7s cubic-bezier(.2, .7, .2, 1), --bx .7s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.book3d .b3 { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book3d .b3-front, .book3d .b3-back { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px 7px 7px 2px; background: #f3ecdc; }
.book3d .b3-front { transform: translateZ(calc(var(--d) / 2)); box-shadow: inset 6px 0 10px -4px #0006; }
.book3d .b3-front-wrap { left: 0; top: 0; width: 100%; height: 100%; transform: translateZ(calc(var(--d) / 2)); border-radius: 2px 7px 7px 2px; overflow: hidden; }
.book3d .b3-front-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book3d .b3-front-wrap::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, #00000040, #ffffff1f 35%, #0000 70%); z-index: 1; }
.book3d .b3-front-wrap::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55;
  background: linear-gradient(calc(110deg + var(--px, 0) * 40deg), #fff0 30%, #ffffff3a 48%, #fff0 62%); }
.book3d .b3-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.book3d .b3-back.plain { display: grid; place-items: center; text-align: center; padding: 20px; background: var(--back, #f4ecd8); color: #2d5a49; font: 15px/1.4 Serif, Georgia, serif; }
.book3d .b3-spine { top: 0; left: calc(50% - var(--d) / 2); width: var(--d); height: 100%; background: linear-gradient(90deg, #0000003d, #ffffff14 30%, #0000 60%, #00000033), var(--spine);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px 0 0 3px; }
.book3d .b3-spine span { writing-mode: vertical-rl; color: var(--spine-ink); font: 600 calc(var(--d) * .36)/1 Serif, Georgia, serif; letter-spacing: .06em; white-space: nowrap; }
.book3d .b3-spine small { writing-mode: vertical-rl; color: var(--spine-ink); opacity: .7; font: calc(var(--d) * .24)/1 Sans, Arial, sans-serif; letter-spacing: .2em; margin-top: auto; padding: 10px 0; }
.book3d .b3-spine b { writing-mode: vertical-rl; margin-top: auto; padding: 14px 0 0; }
.book3d .b3-edge { top: 3px; left: calc(50% - var(--d) / 2); width: var(--d); height: calc(100% - 6px); transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
  background: repeating-linear-gradient(90deg, #f6f1e4 0 1px, #ddd3bd 1px 2px), #efe8d6; box-shadow: inset 0 0 12px #0002; }
.book3d .b3-top, .book3d .b3-bot { left: 0; top: calc(50% - var(--d) / 2); width: calc(100% - 3px); height: var(--d);
  background: repeating-linear-gradient(0deg, #f6f1e4 0 1px, #ddd3bd 1px 2px), #efe8d6; }
.book3d .b3-top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 3px)); }
.book3d .b3-bot { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 3px)); }
.shadow3d { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, #0009, #0000); filter: blur(6px); pointer-events: none;
  transform: translateX(calc(var(--px, 0) * -18px)) scaleX(calc(1 - var(--py, 0) * .08)); }
html.m3d .float3d { animation: float3d 7s ease-in-out infinite; }
html.m3d .float3d.late { animation-delay: -3.5s; }
@keyframes float3d { 50% { translate: 0 -12px; } }
a.book3d:hover, a.book3d:focus-visible { --by: -6deg; --bx: 4deg; }
a.book3d:focus-visible { outline: none; }
a.book3d:focus-visible .b3-front-wrap { outline: 3px solid #d6bb84; outline-offset: 4px; }

/* ── eroul paginii de start Arka ───────────────────── */
.a-hero.with3d .wrap { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 30px; align-items: center; text-align: left; }
.a-hero.with3d svg.ark { margin: 0 0 18px; width: 96px; height: 72px; }
.a-hero.with3d p.lead { margin: 0 0 30px; }
.a-hero.with3d h1 { font-size: clamp(40px, 4.7vw, 66px); }
.a-hero.with3d .actions { justify-content: flex-start; }
.a-hero .scene3d { height: 500px; }
.a-hero .glow3d { position: absolute; inset: 8% 6% 14%; border-radius: 50%; background: radial-gradient(closest-side, #d6bb8433, #0000); pointer-events: none;
  transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px)); }
.a-hero .ring3d { position: absolute; left: 50%; top: 46%; width: 430px; height: 430px; margin: -215px 0 0 -215px; border: 1px solid #d6bb8433; border-radius: 50%; pointer-events: none;
  transform: rotateX(68deg) translateZ(-60px) rotateZ(calc(var(--px, 0) * 30deg)); }
.a-hero .b-rec { --w: 250px; --d: 40px; --by: -24deg; --bx: 4deg; --bz: 3deg; right: 4%; top: 26px; }
.a-hero .b-lum { --w: 200px; --d: 18px; --by: 26deg; --bx: 3deg; --bz: -5deg; left: 4%; bottom: 52px; --spine: #f3ead3; --spine-ink: #2d5a49; z-index: 2; }
.a-hero .tag3d { position: absolute; z-index: 3; font: 600 12px/1.2 Sans, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--green); background: var(--gold2);
  border-radius: 999px; padding: 8px 13px; box-shadow: 0 8px 22px #0004; pointer-events: none; transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px)); }
.a-hero .tag3d.t1 { right: 2%; bottom: 40px; }
.a-hero .tag3d.t2 { left: 0; top: 50px; }
@media (max-width: 900px) {
  .a-hero.with3d .wrap { grid-template-columns: 1fr; text-align: center; gap: 0; }
  .a-hero.with3d svg.ark { margin: 0 auto 18px; }
  .a-hero.with3d .actions { justify-content: center; }
  .a-hero.with3d p.lead { margin: 0 auto 26px; }
  .a-hero .scene3d { height: 400px; max-width: 460px; width: 100%; margin: 26px auto -20px; }
  .a-hero .b-rec { --w: 200px; --d: 32px; right: 8%; top: 10px; }
  .a-hero .b-lum { --w: 160px; --d: 15px; left: 6%; bottom: 40px; }
  .a-hero .ring3d { width: 330px; height: 330px; margin: -165px 0 0 -165px; }
}
@media (max-width: 420px) {
  .a-hero .scene3d { height: 340px; }
  .a-hero .b-rec { --w: 170px; --d: 28px; right: 4%; }
  .a-hero .b-lum { --w: 136px; --d: 13px; left: 2%; bottom: 34px; }
  .a-hero .tag3d { font-size: 11px; padding: 7px 10px; }
}

/* ── cartea de pe pagina Cărții reconstrucției, care se întoarce ── */
.cover3d { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.cover3d .scene3d { height: 560px; }
.cover3d .book3d { --w: 330px; --d: 52px; --by: -22deg; --bx: 3deg; left: calc(50% - var(--w) / 2); top: 34px; cursor: grab; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.cover3d .book3d.grabbing { cursor: grabbing; }
.cover3d .book3d:focus-visible .b3-front-wrap { outline: 3px solid #d6bb84; outline-offset: 4px; }
.cover3d .badge { position: absolute; left: -10px; bottom: 60px; z-index: 3; background: var(--gold2); color: var(--green); border-radius: 999px; padding: 14px 20px; font: 600 15px/1.2 Sans, sans-serif;
  box-shadow: 0 10px 26px #0005; transform: rotate(-4deg) translate(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 10px)); text-align: center; pointer-events: none; }
.cover3d .badge b { display: block; font: 30px Serif, Georgia, serif; }
.cover3d .hint3d { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 13px; color: #d5ddd4cc; transition: opacity .6s; pointer-events: none; }
.cover3d.used .hint3d { opacity: 0; }
html.m3d-off .cover3d .hint3d { display: none; }
@media (max-width: 860px) {
  .cover3d { order: -1; max-width: 340px; }
  .cover3d .scene3d { height: 410px; }
  .cover3d .book3d { --w: 236px; --d: 38px; top: 20px; }
  .cover3d .badge { left: -4px; bottom: 44px; padding: 10px 15px; font-size: 13px; }
  .cover3d .badge b { font-size: 24px; }
}

/* ── carduri înclinate și apariții la derulare ────────── */
html.m3d .tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)); transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s, --lift .3s; }
html.m3d .tilt.tilting { transition: transform .12s linear, box-shadow .3s, border-color .3s, --lift .3s; }
html.m3d .col.tilt:hover, html.m3d .free a.tilt:hover { --lift: -4px; }
html.m3d .nk-banner.tilt:hover { --lift: -3px; }
html.m3d .rv { opacity: 0; translate: 0 36px; scale: .97; transition: opacity .8s ease, translate .9s cubic-bezier(.2, .7, .2, 1), scale .9s cubic-bezier(.2, .7, .2, 1); }
html.m3d .rv.in { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) { .book3d { transition: none; } }
html.m3d .gallery button.tilt:hover { --lift: -3px; }
/* magazinul Lumina: copertele „ies” din cadru când le înclini */
html.m3d .book-cover-wrap.tilt { transform-style: preserve-3d; }
html.m3d .book-cover-wrap.tilt > img { transform: translateZ(26px) rotate(-3deg); }
html.m3d .book-cover-wrap.tilt:hover > img { transform: translateZ(40px) rotate(0); }
html.m3d .hero-art { transform: perspective(1200px) rotateY(calc(var(--px, 0) * 5deg)) rotateX(calc(var(--py, 0) * -4deg)); transform-style: preserve-3d; }
html.m3d .hero-art .hero-book { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); }
html.m3d .hero-art .floating-note { translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 10px); }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }