/* =========================================================
   TRY MORE — animované vizuály (len index.html)
   Načítava sa po style.css. Inline SVG + CSS/SMIL animácie,
   žiadne knižnice. Rešpektuje prefers-reduced-motion.
   ========================================================= */

/* ---------- zdieľané ---------- */
.viz-label{
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: rgba(245,245,240,.6);
}
.hero-viz .viz-label{ font-size: 13px; }
.viz-label--accent{ fill: #4fb2c9; }

.dash-drift{ animation: vizDashDrift 9s linear infinite; }
@keyframes vizDashDrift{ to{ stroke-dashoffset: -120px; } }

.pulse-halo{
  transform-box: fill-box;
  transform-origin: center;
  animation: vizHalo 3.4s ease-out infinite;
}
@keyframes vizHalo{
  0%   { opacity:.55; transform: scale(.35); }
  100% { opacity:0;   transform: scale(1.7); }
}
.pulse-node{ animation: vizNode 3.4s ease-in-out infinite; }
@keyframes vizNode{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* =========================================================
   1) HERO — širokouhlá sieťová schéma cez celú šírku hore
   ========================================================= */
.hero-viz{
  position: absolute;
  top: 40px; left: 0; right: 0;
  height: 52vh;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
}
.hero-viz svg{ width: 100%; height: 100%; display: block; }

@media (max-width: 900px){
  .hero-viz{ height: 40vh; top: 54px; }
}

/* text hero nižšie — začína na koncových bodoch siete */
.hero .hero-inner{ padding-bottom: 12px; }

/* brand — len prvé písmená veľké */
.brand-word{ text-transform: none; letter-spacing: .12em; }

/* =========================================================
   2) STATEMENT — kalibračná krivka (model vs. meranie)
   ========================================================= */
.statement-viz{ max-width: 760px; margin: 3.5em auto 0; }
.statement-viz svg{ width: 100%; height: auto; display: block; }

/* stredn\u00e1 statement sekcia \u2014 krivka prech\u00e1dza medzi nadpisom a podtitulom */
.statement-mid{ padding: 60px 0 20px; }
.statement-mid + .section.tight{ padding-top: 40px; padding-bottom: 30px; }
/* medzery okolo širokého banneru */
.wide-banner + .section{ padding-top: 30px; }
.statement-mid p{ position: relative; z-index: 1; }
.statement-mid p:not(.statement-sub){
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.statement-mid .statement-viz{ margin: -3.6em auto 0.4em; position: relative; z-index: 0; }
.statement-mid .statement-sub{
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--white-dim);
  max-width: none;
}

/* =========================================================
   3) KARTY SLUŽIEB — úzke animované bannery
   ========================================================= */
.card-viz{
  margin-top: 2em;
  border: 1px solid var(--line);
  opacity: .95;
  transition: opacity .5s var(--ease), border-color .5s var(--ease);
}
.card-viz .viz-label{ fill: rgba(245,245,240,.8); }
.card-viz svg{ display: block; width: 100%; height: 120px; }
.card:hover .card-viz{ opacity: 1; border-color: var(--line-strong); }
/* výraznejší hover na kartách */
.card:hover{ background: #212121; }
a.card{ cursor: pointer; }
/* hover na riadkoch Služby / Riešenia */
.index-row:hover{ background: #212121; padding-right: 10px; }
.card:hover .card-viz .pulse-halo{ animation-duration: 2s; }
.card:hover .card-viz .pulse-node{ animation-duration: 2s; }

/* 02 GIS — plávajúca vrchná vrstva */
.v02-top{ animation: v02float 5.5s ease-in-out infinite alternate; }
@keyframes v02float{ from{ transform: translateY(0); } to{ transform: translateY(-7px); } }

/* 03 Monitoring — bežiaca čítacia línia */
.v03-scan{ animation: v03scan 7s linear infinite; }
@keyframes v03scan{
  0%   { transform: translateX(30px);  opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(370px); opacity: 0; }
}

/* 04 Digital twin — dýchajúce dvojča */
.v04-ghost{ animation: v04sync 4.5s ease-in-out infinite; }
@keyframes v04sync{ 0%,100%{ opacity: .5; } 50%{ opacity: 1; } }

/* 06 Reality capture — skenovací lúč + point cloud */
.v06-beam{
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: v06sweep 6.5s ease-in-out infinite alternate;
}
@keyframes v06sweep{ from{ transform: rotate(-7deg); } to{ transform: rotate(8deg); } }
.v06-a{ animation: vizNode 4s ease-in-out infinite; }
.v06-b{ animation: vizNode 4s ease-in-out 2s infinite; }

/* =========================================================
   4) ŠIROKOÚHLY BANNER — panoráma terénu s dátami
   ========================================================= */
.wide-banner{
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--black);
}
.wide-banner svg{ display: block; width: 100%; height: 200px; }
.wide-banner .viz-label{ fill: rgba(245,245,240,.8); }
.wb-drift{ animation: wbDrift 90s linear infinite; }
@keyframes wbDrift{ to{ transform: translateX(-1600px); } }
@media (max-width: 700px){
  .wide-banner svg{ height: 150px; }
}

/* =========================================================
   5) CTA — dátové toky zbiehajúce sa do bodu
   ========================================================= */
.cta-viz{ max-width: 1100px; margin: 0 auto 3em; padding: 0 var(--gutter); }
.cta-viz svg{ width: 100%; height: auto; display: block; }
.cta-viz .viz-label{ font-size: 16px; }
/* CTA sekcia bez veľkej hornej medzery */
section.statement:has(.cta-viz){ padding-top: 30px; }

/* =========================================================
   PREFERS-REDUCED-MOTION — statický fallback
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .m-anim{ display: none; }
  .hero-viz *, .statement-viz *, .card-viz *, .wide-banner *, .cta-viz *{
    animation: none !important;
  }
  .wb-drift{ transform: none; }
  .v03-scan{ transform: translateX(200px); opacity: .6; }
  .pulse-halo{ opacity: .25; }
}