/* ============================================================
   Aleksander Petković — shared theme
   Extracted from index.html <style> so every page (Domov,
   Storitve, O meni, Analiza, Paketi) shares one source of truth.
   ============================================================ */

html, body { background: #000; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: #fafafa; }
h1, h2, h3, h4 { letter-spacing: -0.035em; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* Subtle aura that doesn't dominate — pure white glow.
   Breathes slowly so the black never feels dead. GPU-only (transform/opacity). */
.aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aura::before {
  content: ""; position: absolute;
  width: 1100px; height: 1100px; border-radius: 50%;
  left: 50%; top: 0; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 30%, transparent 60%);
  filter: blur(40px);
  animation: aura-breathe 16s ease-in-out infinite;
  will-change: transform, opacity;
}
/* Accent (lime) glow that gently pulses — only on heroes that opt in via .aura-accent */
.aura.aura-accent::after {
  content: ""; position: absolute;
  width: 720px; height: 720px; border-radius: 50%;
  left: 50%; top: 10%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(163,230,53,0.10) 0%, rgba(163,230,53,0.03) 35%, transparent 65%);
  filter: blur(50px);
  animation: accent-pulse 9s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes aura-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -46%) scale(1.07); opacity: 0.78; }
}
@keyframes accent-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* Grid background — subtle structural feel (Linear / Vercel signature) */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}

/* Primary CTA — white on black, classic premium SaaS */
.btn-primary {
  background: #fafafa; color: #0a0a0a;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 24px -8px rgba(255,255,255,0.3);
}
.btn-primary:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 16px 40px -8px rgba(255,255,255,0.4);
}

/* Ghost CTA */
.btn-ghost {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.2s ease;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
}

/* Card with subtle border */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.3s ease;
}
.card:hover {
  border-color: rgba(255,255,255,0.2);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}

/* Display headline weight + tight tracking */
.display { font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }

/* Marquee */
.marquee { overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: inline-flex; gap: 4rem; animation: scroll 32s linear infinite; white-space: nowrap; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Underline highlight — single accent stroke */
.stroke {
  background-image: linear-gradient(180deg, transparent 65%, rgba(163, 230, 53, 0.35) 65%, rgba(163, 230, 53, 0.35) 92%, transparent 92%);
  padding: 0 4px;
}

/* Browser frame chrome */
.frame { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; background: #0a0a0a; }
.frame-bar { background: #18181b; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* FAQ accordion */
details[open] summary .chev { transform: rotate(45deg); }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* ============================================================
   Animation layer — scroll reveal + stagger + hero + micro.
   Drives the premium "alive" feel: elements ease up as they
   enter the viewport, hero choreographs on load, cards shine.
   Activated by site.js (IntersectionObserver + small helpers).
   Performance-safe: no scroll hijack, opacity/transform only.
   ============================================================ */

/* ---- No-JS / JS-failure fallback: if the .js flag never lands
   (scripts disabled or blocked), nothing stays hidden. ---- */
html:not(.js) [data-reveal],
html:not(.js) [data-reveal-group] > *,
html:not(.js) [data-hero] > *,
html:not(.js) [data-img-reveal] {
  opacity: 1 !important; transform: none !important; filter: none !important;
}

/* ---- Scroll reveal (stronger + reliable) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Staggered children: add data-reveal-group to a parent, children ease in one after another */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0) scale(1); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.00s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.09s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.18s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.27s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.36s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.45s; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 0.54s; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 0.63s; }

/* ---- Hero entrance choreography ----
   site.js adds .hero-ready on load; children ease up in sequence
   with a soft blur clearing. Order follows DOM order. */
[data-hero] > * {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
[data-hero].hero-ready > * { opacity: 1; transform: translateY(0); filter: blur(0); }
[data-hero].hero-ready > *:nth-child(1) { transition-delay: 0.05s; }
[data-hero].hero-ready > *:nth-child(2) { transition-delay: 0.17s; }
[data-hero].hero-ready > *:nth-child(3) { transition-delay: 0.29s; }
[data-hero].hero-ready > *:nth-child(4) { transition-delay: 0.41s; }
[data-hero].hero-ready > *:nth-child(5) { transition-delay: 0.53s; }
[data-hero].hero-ready > *:nth-child(6) { transition-delay: 0.65s; }

/* ---- Accent underline that draws itself left→right on the hero keyword ---- */
.accent-draw {
  background-image: linear-gradient(rgba(163,230,53,0.4), rgba(163,230,53,0.4));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.18em;
  transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: 0.04em;
}
[data-hero].hero-ready .accent-draw { background-size: 100% 0.18em; transition-delay: 0.7s; }

/* ---- Count-up numbers stay on one line, no layout shift ---- */
.count { font-variant-numeric: tabular-nums; }

/* ---- Grid background parallax: smoothed via JS-set transform ---- */
.grid-bg { transition: transform 0.25s ease-out; }

/* ---- Card: lift + diagonal shine sweep on hover ---- */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.07) 48%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.07) 52%, transparent 70%);
  transform: translateX(-120%); pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover { transform: translateY(-4px); }
.card:hover::after { transform: translateX(120%); }
/* Cards used as flex/link containers keep their own layout; shine sits above bg, below content */
.card > * { position: relative; z-index: 1; }

/* ---- Magnetic CTA: JS nudges --mx/--my; CSS applies the transform ---- */
.magnetic { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease; }

/* ---- Image reveal: blur-to-sharp as it enters the viewport ---- */
[data-img-reveal] {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(12px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
  will-change: opacity, transform, filter;
}
[data-img-reveal].is-visible { opacity: 1; transform: scale(1); filter: blur(0); }

/* ---- Nav scroll state: stronger blur + hairline once scrolled ---- */
nav { transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; }
nav.nav-scrolled { background-color: rgba(0,0,0,0.78) !important; border-bottom-color: rgba(255,255,255,0.12) !important; }

/* ---- Form fields: lime focus ring + subtle lift, so inputs feel responsive ---- */
input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(163,230,53,0.55);
  box-shadow: 0 0 0 3px rgba(163,230,53,0.15), 0 6px 20px -8px rgba(163,230,53,0.35);
  transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .aura::before, .aura.aura-accent::after { animation: none; }
  [data-reveal], [data-reveal-group] > *, [data-hero] > *, [data-img-reveal] {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .accent-draw { background-size: 100% 0.18em !important; transition: none !important; }
  .card::after { display: none; }
  .card:hover { transform: none; }
  input:focus, textarea:focus, select:focus { transform: none; }
}