/* ══ 3D hero „Pet stranica u prostoru", samostalna verzija (28. 9. 2026., Ari)
   Prave snimke klijentskih stranica kao predmeti u CSS 3D prostoru. Bez WebGL-a i bez
   biblioteka; pokret samo transform/opacity; bez JS-a ostaje nagnuta kompozicija;
   prefers-reduced-motion gasi pokret. Tamna (.hero3d.dark) i svijetla (.hero3d.light) verzija. ══ */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700 800; font-display: swap; src: url(fontovi/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700 800; font-display: swap; src: url(fontovi/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fontovi/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fontovi/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.hero3d {
  --paper: #f3f4f1; --ink: #171c19; --ink-2: #454c47; --white: #fbfbf9;
  --accent: #b34e14; --accent-ink: #8f3d0f;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --frame: #1d2320; --shadow: rgba(23, 28, 25, 0.6);
  position: relative; overflow: clip; isolation: isolate;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55;
  min-height: 100svh; display: grid; align-content: center;
  padding: clamp(28px, 5vh, 64px) 20px;
}
.hero3d.dark { --bg: #0f1311; --fg: #f3f4f1; --fg-2: rgba(243, 244, 241, 0.78); --frame: #05070a; --shadow: rgba(0, 0, 0, 0.9); }
.hero3d * { box-sizing: border-box; }
.hero3d .wrap { width: min(1360px, 100%); margin-inline: auto; position: relative; z-index: 1; }

/* naslov: linije izlaze iz maske; uvod i gumbi slijede */
.hero3d h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 10.6vw, 11.5rem); line-height: 0.9; letter-spacing: -0.045em; margin: 0 0 clamp(20px, 3vh, 36px); text-wrap: balance; }
.hero3d h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero3d h1 .line > span { display: block; }
.hero3d .row { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .hero3d .row { grid-template-columns: 5fr 7fr; gap: 48px; } }
.hero3d .lead { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.45; color: var(--fg-2); max-width: 40ch; margin: 0 0 26px; }
.hero3d .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero3d .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #fbfbf9; font: inherit; font-weight: 600; text-decoration: none; transition: background 160ms ease-out, transform 120ms ease-out; }
.hero3d .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.hero3d .btn:active { transform: translateY(1px); }
.hero3d .btn.ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.hero3d .btn.ghost:hover { border-color: var(--fg); background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .hero3d h1 .line > span { animation: h3d-lineUp 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }
  .hero3d .copy { animation: h3d-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 420ms; }
  .hero3d .stage { animation: h3d-rise 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 520ms; }
}
@keyframes h3d-lineUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes h3d-rise { from { opacity: 0; transform: translateY(0.55em); } to { opacity: 1; transform: none; } }

/* 3D scena: laptop iza, tri telefona ispred; mjere u % kvadratne scene */
.hero3d .stage { width: min(720px, 100%); justify-self: end; }
.hero3d .scene { position: relative; width: 100%; aspect-ratio: 16 / 11; perspective: 1300px; perspective-origin: 50% 40%; }
.hero3d .scene-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -16deg)); }
.hero3d .scene-drift { position: absolute; inset: 0; transform-style: preserve-3d; animation: h3d-drift 11s ease-in-out infinite alternate; }
@keyframes h3d-drift { from { transform: rotateY(-3deg) translateY(0); } to { transform: rotateY(3deg) translateY(-1.5%); } }
.hero3d .obj { position: absolute; margin: 0; transform-style: preserve-3d; }
.hero3d .obj img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--white); }
.hero3d .laptop { left: 10%; top: 0; width: 80%; height: 62%; transform: translateZ(-160px) rotateY(8deg); }
.hero3d .laptop img { border: clamp(4px, 1.6vw, 8px) solid var(--frame); border-bottom-width: clamp(8px, 3.4vw, 16px); border-radius: clamp(5px, 1.8vw, 9px); box-shadow: 0 60px 90px -40px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hero3d .ph { width: 20%; height: 58%; }
.hero3d .ph img { border: clamp(3px, 1.1vw, 5px) solid var(--frame); border-radius: clamp(12px, 4.2vw, 20px); box-shadow: 0 50px 70px -34px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.hero3d .ph-1 { left: 2%; top: 38%; transform: translateZ(60px) rotateY(-10deg); }
.hero3d .ph-2 { left: 40%; top: 42%; transform: translateZ(170px) rotateY(3deg); }
.hero3d .ph-3 { left: 78%; top: 34%; transform: translateZ(20px) rotateY(16deg); }
.hero3d .stage-note { margin: 10px 0 0; font-size: 0.86rem; color: var(--fg-2); }
@media (max-width: 899px) {
  .hero3d .stage { width: 100%; }
  .hero3d .scene { aspect-ratio: 1 / 1; }
  .hero3d .laptop { left: 6%; width: 84%; height: 55%; }
  .hero3d .ph { width: 26%; height: 50%; }
  .hero3d .ph-1 { left: 1%; top: 40%; } .hero3d .ph-2 { left: 36%; top: 46%; } .hero3d .ph-3 { left: 71%; top: 36%; }
}
/* mobitel: scena se okreće dok se lista (bez JS-a) */
@media (hover: none) {
  @supports (animation-timeline: view()) {
    .hero3d .scene-in { animation: h3d-turn linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes h3d-turn { from { transform: rotateX(10deg) rotateY(-30deg); } to { transform: rotateX(4deg) rotateY(6deg); } }
  }
}

/* tamna verzija: reflektori (statični gradijenti), pod, zrno filma */
.hero3d .light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; display: none; }
.hero3d.dark .light { display: block; }
.hero3d .light i { position: absolute; display: block; border-radius: 50%; }
.hero3d .light .l1 { width: 90vmax; height: 90vmax; right: -30vmax; top: -45vmax; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 18%, transparent) 28%, rgba(0,0,0,0) 62%); }
.hero3d .light .l2 { width: 70vmax; height: 70vmax; left: -30vmax; bottom: -35vmax; background: radial-gradient(circle at 50% 50%, rgba(120, 150, 140, 0.28) 0%, rgba(0,0,0,0) 62%); }
.hero3d .light .l3 { width: 120vw; height: 34vh; left: -10vw; bottom: -8vh; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(243, 244, 241, 0.16) 0%, rgba(0,0,0,0) 65%); }
@media (prefers-reduced-motion: no-preference) {
  .hero3d .light .l1 { animation: h3d-breathe 9s ease-in-out infinite alternate; }
  .hero3d .light .l2 { animation: h3d-breathe 12s ease-in-out infinite alternate-reverse; }
}
@keyframes h3d-breathe { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-3vmax, 2vmax, 0); } }
.hero3d.dark::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* trag pravih snimki iza miša (JS puni samo na uređajima s mišem) */
.hero3d .trail { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero3d .trail img { position: absolute; width: clamp(160px, 18vw, 260px); height: auto; border-radius: 6px; box-shadow: 0 30px 60px -24px var(--shadow); opacity: 0; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) { .hero3d *, .hero3d *::before { animation: none !important; } }