.mf3d { --navy: #0E4361; --gold: #B08D57; position: relative; height: calc(var(--mf3d-n, 6) * 100svh); background: linear-gradient(180deg, #faf6ef 0%, #f1ece2 100%); color: var(--navy); font-family: Montserrat, system-ui, sans-serif; }
.mf3d__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; outline-offset: -4px; }
.mf3d__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.mf3d__gl:active { cursor: grabbing; }
.mf3d__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .0; pointer-events: none; }
.mf3d--ready .mf3d__fallback { display: none; }
.mf3d:not(.mf3d--ready):not(.mf3d--nogl) .mf3d__fallback { opacity: .35; }

.mf3d__chapters { position: absolute; inset: 0; pointer-events: none; }
.mf3d__chapter { position: absolute; top: 50%; right: 6%; width: min(30rem, 38vw); transform: translateY(calc(-50% + 14px)); opacity: 0; transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .45s cubic-bezier(.23, 1, .32, 1);
  background: rgba(250, 246, 239, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(176, 141, 87, .35); border-radius: 14px; padding: 1.6rem 1.7rem; box-shadow: 0 18px 48px rgba(14, 67, 97, .12); }
.mf3d__chapter.is-on { opacity: 1; transform: translateY(-50%); }
.mf3d__chapter:nth-child(even) { right: auto; left: 6%; }
.mf3d__eyebrow { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.mf3d__chapter h3 { margin: 0 0 .6rem; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.15; font-weight: 600; color: var(--navy); }
.mf3d__chapter p:last-child { margin: 0; font-size: .95rem; line-height: 1.6; color: #35505f; }

.mf3d__tags { position: absolute; inset: 0; pointer-events: none; }
.mf3d__tag { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; font-size: .78rem; font-weight: 700; padding: .35rem .7rem; border-radius: 999px; color: #fff; background: rgba(14, 67, 97, .92); box-shadow: 0 6px 18px rgba(14, 67, 97, .25); will-change: transform, opacity; }

.mf3d__rail { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: flex; gap: .5rem; }
.mf3d__rail button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--navy); background: transparent; cursor: pointer; transition: transform .2s, background .2s; position: relative; }
.mf3d__rail button::after { content: ''; position: absolute; inset: -10px; } /* večja tipalna površina */
.mf3d__rail button.is-on { background: var(--navy); transform: scale(1.25); }
.mf3d__reset { position: absolute; top: 1rem; right: 1rem; font: 700 .75rem Montserrat, sans-serif; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--navy); background: rgba(255, 255, 255, .8); color: var(--navy); cursor: pointer; }
.mf3d__hint { position: absolute; top: 1.1rem; left: 1rem; margin: 0; font-size: .72rem; color: #5a6b77; letter-spacing: .04em; }
.mf3d__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* brez WebGL ali napaka skripta: statična slika + poglavja eno pod drugim */
.mf3d--nogl { height: auto; }
.mf3d--nogl .mf3d__stage { position: relative; height: auto; padding: 2rem 1rem; }
.mf3d--nogl .mf3d__gl, .mf3d--nogl .mf3d__tags, .mf3d--nogl .mf3d__rail, .mf3d--nogl .mf3d__reset, .mf3d--nogl .mf3d__hint { display: none; }
.mf3d--nogl .mf3d__fallback { position: static; opacity: 1; height: auto; max-height: 420px; margin: 0 auto 1.5rem; display: block; border-radius: 12px; }
.mf3d--nogl .mf3d__chapters { position: static; display: grid; gap: 1rem; }
.mf3d--nogl .mf3d__chapter { position: static; width: auto; opacity: 1; transform: none; }

@media (max-width: 700px) {
  .mf3d__chapter, .mf3d__chapter:nth-child(even) { top: auto; bottom: 2.6rem; left: 4%; right: 4%; width: auto; transform: translateY(14px); padding: 1rem 1.1rem; }
  .mf3d__chapter.is-on { transform: none; }
  .mf3d__chapter h3 { font-size: 1.25rem; }
  .mf3d__chapter p:last-child { font-size: .85rem; line-height: 1.5; }
  .mf3d__tag { font-size: .68rem; padding: .25rem .55rem; }
}
@media (prefers-reduced-motion: reduce) { .mf3d__chapter { transition: none; } }