/* ============================================================================
   LumenSpark - landing/hero.css   (v2)

   Kompozicija: puna visina ekrana, editorial copy lijevo, autenticni okvir
   proizvoda desno koji NAMJERNO izlazi izvan desnog ruba (bleed).
   Slojevi od dna prema vrhu:
     1. gradijent brand palete   (background heroja)
     2. ambijentalni video       (.lsw-hero-media, z -3, jako zamucen + maska)
     3. romb-lattice sidebara    (::before, z -2)
     4. zrno / grain             (.lsw-hero-grain, z -1)
     5. sadrzaj
   ============================================================================ */

.lsw-hero{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  min-height:clamp(580px,86svh,900px);
  padding:calc(var(--lsw-nav-h) + 54px) 0 62px;
  color:var(--lsw-on-dark);
  background:
    radial-gradient(circle at 78% 22%,rgba(204,120,92,.20),transparent 38%),
    radial-gradient(circle at 16% 76%,rgba(63,157,127,.09),transparent 34%),
    linear-gradient(135deg,var(--lsw-brand-mid) 0%,var(--lsw-brand) 46%,var(--lsw-brand-dark) 100%);
  overflow:hidden;
}

/* --- 3. lattice ---------------------------------------------------------- */
.lsw-hero::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    repeating-linear-gradient( 60deg,var(--lsw-lattice) 0,var(--lsw-lattice) 1px,transparent 1px,transparent var(--lsw-lattice-step)),
    repeating-linear-gradient(-60deg,var(--lsw-lattice) 0,var(--lsw-lattice) 1px,transparent 1px,transparent var(--lsw-lattice-step));
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.3) 68%,transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.3) 68%,transparent);
}
/* Meki prijelaz prema sljedecoj sekciji */
.lsw-hero::after{
  content:'';position:absolute;inset:auto 0 0 0;height:180px;z-index:-2;
  background:linear-gradient(180deg,transparent,rgba(15,14,12,.72));
  pointer-events:none;
}

/* --- 2. ambijentalni video ------------------------------------------------
   Snimka moze sadrzavati citljiv tekst, pa se NE koristi kao slika nego kao
   izvor svjetla: jak blur, uvecanje preko ruba i radijalna maska koja je gasi
   ispod stupca s tekstom. Ostaje samo pokret i boja.
   -------------------------------------------------------------------------- */
.lsw-hero-media{
  position:absolute;inset:0;z-index:-3;
  overflow:hidden;pointer-events:none;
}
.lsw-hero-media video{
  width:100%;height:100%;
  object-fit:cover;object-position:70% center;
  opacity:.42;
  filter:blur(26px) saturate(.45) contrast(1.06) brightness(.85);
  transform:scale(1.22);
  will-change:transform;
}
/* Maska: puna jacina oko okvira proizvoda, nula ispod copyja */
.lsw-hero-media{
  -webkit-mask-image:radial-gradient(120% 105% at 76% 46%,rgba(0,0,0,1) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.18) 58%,rgba(0,0,0,0) 76%);
  mask-image:radial-gradient(120% 105% at 76% 46%,rgba(0,0,0,1) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.18) 58%,rgba(0,0,0,0) 76%);
}
/* Topli veo - drzi kontrast teksta bez obzira na kadar */
.lsw-hero-scrim{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(24,23,21,.96) 0%,rgba(24,23,21,.86) 30%,rgba(20,19,17,.52) 62%,rgba(15,14,12,.66) 100%),
    linear-gradient(180deg,rgba(15,14,12,.5),transparent 24%,rgba(15,14,12,.42));
}

/* --- 4. zrno -------------------------------------------------------------
   Fina tekstura preko plohe: tamne povrsine bez nje izgledaju plasticno.
   SVG feTurbulence kao data-URI - nula mreznih zahtjeva.
   -------------------------------------------------------------------------- */
.lsw-hero-grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ==========================================================================
   RASTER
   ========================================================================== */
.lsw-hero .lsw-wrap{max-width:1320px}
.lsw-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  gap:56px;align-items:center;width:100%;
}

/* ==========================================================================
   LIJEVO: COPY
   ========================================================================== */
.lsw-hero-copy{max-width:620px}
.lsw-hero-copy .lsw-eyebrow{margin-bottom:20px}

.lsw-hero-title{
  font-family:var(--lsw-font);font-weight:700;
  font-size:clamp(2.3rem,3.45vw,3.5rem);
  line-height:1.04;letter-spacing:-.042em;
  max-width:21ch;margin-bottom:20px;
  text-wrap:balance;
}
.lsw-hero-title em{
  font-style:normal;color:var(--lsw-accent);
  position:relative;
}
.lsw-hero-sub{
  font-size:clamp(1rem,1.08vw,1.09rem);
  line-height:1.55;color:var(--lsw-on-dark-2);
  max-width:48ch;margin-bottom:24px;
}
.lsw-hero-cta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.lsw-hero-micro{
  font-family:var(--lsw-mono);font-size:11px;letter-spacing:.01em;
  color:var(--lsw-on-dark-4);max-width:46ch;
}

/* Cinjenicne oznake - bez izmisljenih brojki */
.lsw-hero-facts{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--lsw-on-dark-border);
}
.lsw-hero-fact{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--lsw-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lsw-on-dark-3);
  padding:4px 8px;border:1px solid var(--lsw-on-dark-border);
  border-radius:99px;background:var(--lsw-on-dark-surface);
  transition:border-color var(--motion-fast),color var(--motion-fast);
}
.lsw-hero-fact:hover{border-color:rgba(245,240,234,.26);color:var(--lsw-on-dark-2)}
.lsw-hero-fact i{width:5px;height:5px;border-radius:50%;flex:none;background:var(--lsw-accent)}
.lsw-hero-fact.is-green i{background:var(--lsw-green)}
.lsw-hero-fact.is-teal i{background:var(--lsw-teal)}

/* ==========================================================================
   DESNO: OKVIR PROIZVODA
   ========================================================================== */
.lsw-hero-visual{
  position:relative;
  /* namjeran bleed preko desnog ruba - okvir je odrezan po dizajnu, ne slucajno */
  width:calc(100% + 170px);
}
.lsw-hero-stage{
  position:relative;
  /* Sirok pojas lijevo i ispod: kartice zive u njemu i preklapaju SAMO
     52 px rail, nikad citljiv sadrzaj ploca. */
  padding:22px 0 66px 142px;
  transform:translate3d(0,0,0);
  transition:transform var(--motion-slow) var(--motion-ease);
  will-change:transform;
}
/* Topli sjaj iza okvira - dubina bez glassmorphizma */
.lsw-hero-stage::before{
  content:'';position:absolute;z-index:0;
  inset:8% -6% 14% 26%;
  background:radial-gradient(58% 62% at 46% 46%,rgba(204,120,92,.30),transparent 68%);
  filter:blur(48px);
  pointer-events:none;
}
/* Vrlo blagi pomak na pokazivac - translate, ne rotacija */
.lsw-hero-visual[data-lsw-parallax] .lsw-hero-stage{
  transform:translate3d(calc(var(--lsw-px,0) * -7px),calc(var(--lsw-py,0) * -5px),0);
}

/* Fina prstenasta linija oko okvira, pa ne "lebdi" bez rubа */
.lsw-hero-stage .lsw-app{
  box-shadow:
    0 0 0 1px rgba(245,240,234,.09),
    0 40px 90px -40px rgba(0,0,0,.85),
    var(--lsw-sh-4);
}

/* --- Lebdece operativne kartice -----------------------------------------
   Cetiri, po jedna uz svaki kut, i nijedna ne pokriva citljiv sadrzaj okvira:
   lijeve dvije padaju na uski 52 px rail, gornja desna na prazan dio topbara,
   donja desna izlazi ispod donjeg ruba.
   -------------------------------------------------------------------------- */
.lsw-float{
  position:absolute;z-index:3;
  min-width:168px;
  background:var(--lsw-surface);
  border:1px solid var(--lsw-border);
  border-radius:12px;
  padding:12px 12px;
  box-shadow:0 24px 60px -26px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.24);
  animation:lsw-drift var(--lsw-dur,11s) ease-in-out infinite;
  transition:transform var(--motion-fast) var(--motion-ease),
             box-shadow var(--motion-fast);
}
.lsw-float:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95),0 3px 12px rgba(0,0,0,.3);
}
.lsw-float-label{
  font-family:var(--lsw-mono);font-size:9px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--lsw-text-4);margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.lsw-float-val{
  font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.08;
  color:var(--lsw-text);white-space:nowrap;
}
.lsw-float-val.is-sm{font-size:14px;font-weight:650;letter-spacing:-.02em}
.lsw-float-note{
  font-family:var(--lsw-mono);font-size:10px;margin-top:4px;color:var(--lsw-text-3);
  white-space:nowrap;
}
.lsw-float-note.is-green{color:var(--lsw-green-ink)}
.lsw-float-note.is-red{color:var(--lsw-red)}
.lsw-float-note.is-accent{color:var(--lsw-accent-deep)}

/* Tri kartice. Lijeve dvije stoje u pojasu i zadiru najvise 26 px u rail,
   Spark stoji ISPOD okvira pa ne pokriva nista. Razlicita trajanja. */
.lsw-float-health {top:44px;left:0;--lsw-dur:12s;animation-delay:-2s}
.lsw-float-util   {top:196px;left:0;--lsw-dur:9.5s;animation-delay:-5s}
.lsw-float-spark  {bottom:0;left:88px;--lsw-dur:13.5s;animation-delay:-3s;min-width:268px}

/* Spark kartica - crna ploha s terracotta pulsom, jedini "junak" kompozicije */
.lsw-float-spark{
  background:linear-gradient(160deg,var(--lsw-brand-mid),var(--lsw-brand-dark));
  border-color:rgba(245,240,234,.16);
  box-shadow:0 28px 70px -24px rgba(0,0,0,.95),0 0 0 1px rgba(204,120,92,.14);
}
.lsw-float-spark .lsw-float-label{color:var(--lsw-on-dark-3)}
.lsw-float-spark .lsw-float-val{color:var(--lsw-on-dark);font-size:14px;font-weight:650}
.lsw-float-spark .lsw-float-note{color:var(--lsw-on-dark-3);white-space:normal}
.lsw-spark-pulse{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--lsw-accent);position:relative;
}
.lsw-spark-pulse::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--lsw-accent);
  animation:lsw-ping 2.6s ease-out infinite;
}

@keyframes lsw-drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-7px,0)}
}
@keyframes lsw-ping{
  0%  {transform:scale(1);opacity:.8}
  70% {transform:scale(2.6);opacity:0}
  100%{transform:scale(1);opacity:0}
}

/* ==========================================================================
   ULAZNA SEKVENCA (jedan orkestriran trenutak, ne razbacani efekti)
   ========================================================================== */
@keyframes lsw-rise{
  from{opacity:0;transform:translateY(15px)}
  to  {opacity:1;transform:none}
}
@keyframes lsw-rise-soft{
  from{opacity:0;transform:translateY(22px) scale(.985)}
  to  {opacity:1;transform:none}
}
.lsw-hero [data-lsw-in]{animation:lsw-rise .8s var(--motion-ease) both}
.lsw-hero [data-lsw-in="1"]{animation-delay:.05s}
.lsw-hero [data-lsw-in="2"]{animation-delay:.13s}
.lsw-hero [data-lsw-in="3"]{animation-delay:.22s}
.lsw-hero [data-lsw-in="4"]{animation-delay:.30s}
.lsw-hero [data-lsw-in="5"]{animation-delay:.38s}
.lsw-hero-visual[data-lsw-in]{animation:lsw-rise-soft 900ms var(--motion-ease) both;animation-delay:.20s}
.lsw-float[data-lsw-in="6"]{animation:lsw-rise .7s var(--motion-ease) .62s both,
                                      lsw-drift var(--lsw-dur,11s) ease-in-out .62s infinite}
.lsw-float[data-lsw-in="7"]{animation:lsw-rise .7s var(--motion-ease) .72s both,
                                      lsw-drift var(--lsw-dur,11s) ease-in-out .72s infinite}
.lsw-float[data-lsw-in="8"]{animation:lsw-rise .7s var(--motion-ease) .82s both,
                                      lsw-drift var(--lsw-dur,11s) ease-in-out .82s infinite}
.lsw-float[data-lsw-in="9"]{animation:lsw-rise .7s var(--motion-ease) .92s both,
                                      lsw-drift var(--lsw-dur,11s) ease-in-out .92s infinite}

/* ==========================================================================
   SCROLL OZNAKA
   ========================================================================== */
.lsw-hero-scroll{
  position:absolute;left:var(--lsw-gutter);bottom:26px;z-index:2;
  display:flex;align-items:center;gap:12px;
  font-family:var(--lsw-mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lsw-on-dark-4);
}
.lsw-hero-scroll i{
  width:44px;height:1px;background:var(--lsw-on-dark-border);position:relative;overflow:hidden;
}
.lsw-hero-scroll i::after{
  content:'';position:absolute;inset:0;width:14px;background:var(--lsw-accent);
  animation:lsw-scroll-run 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes lsw-scroll-run{
  0%  {transform:translateX(-16px)}
  100%{transform:translateX(46px)}
}