
/* V19 – podmorniško okno (namizje): debel jeklen prirobnik, kazalec do 2,5 ATA, varovalo zmogljivosti */
@media (min-width:1024px){

@media (min-width:1024px){
.hero{min-height:clamp(760px,100svh,1100px);--pd:clamp(460px, min(51cqw - 40px, var(--cw) * .6, 100svh - var(--hh) - 36px), 900px)}
.hero-title{font-size:clamp(46px, 1.2vw + 42px, 68px)!important;text-wrap:pretty!important}
.hero-title,.hero-lead,.tiles,.hero-actions{max-width:calc(var(--cw) - var(--pd) * .93 - 56px)!important}
.hero-video{position:absolute;z-index:6;left:auto;bottom:auto;right:calc(var(--pr) - var(--pd) * .07 + var(--pd) / 2);top:calc(var(--hh) + (100% - var(--hh)) / 2 - 4px + var(--pd) * .25);transform:translate(50%,-50%);background:rgba(6,18,34,.5);border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px -18px rgba(0,0,0,.8)}
.hero-video:hover{transform:translate(50%,-50%) scale(1.04)}
.hero-video .play{box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:portPlay 2.4s ease-out 3s infinite}
@keyframes portPlay{70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.port{right:calc(var(--pr) - var(--pd) * .07);top:calc(var(--hh) + (100% - var(--hh)) / 2 - 4px);animation:portIn2 1.6s var(--x-ease) .05s backwards}
@keyframes portIn2{from{opacity:.35;transform:translateY(-50%) scale(.9) rotate(-8deg)}to{opacity:1;transform:translateY(-50%)}}
.port.tilt{transition:transform .5s var(--x-ease)}
/* svetlobni sij za oknom, ki diha */
.port::before{inset:-34%;background:radial-gradient(closest-side,rgba(56,182,255,.5) 0%,rgba(30,111,217,.2) 45%,rgba(30,111,217,0) 100%);animation:portGlow 6s ease-in-out infinite}
@keyframes portGlow{50%{opacity:.6;transform:scale(.96)}}
/* tlačni valovi */
.port-waves{position:absolute;inset:0;z-index:0;pointer-events:none}
.port-waves i{position:absolute;inset:-1%;border-radius:50%;border:1.5px solid rgba(127,219,255,.45);opacity:0;animation:portWave 5.4s cubic-bezier(.2,.6,.3,1) infinite}
.port-waves i:nth-child(2){animation-delay:1.8s}.port-waves i:nth-child(3){animation-delay:3.6s}
@keyframes portWave{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.42);opacity:0}}
/* slika: rahla »ribje oko« povečava + paralaksa */
.port .hero-media img{transform:scale(1.1) translate(var(--px,0px),var(--py,0px));transition:transform .6s var(--x-ease)}
/* globina stekla */
.port-glass{background:
  radial-gradient(120% 120% at 26% 14%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 32%),
  radial-gradient(closest-side,rgba(4,11,22,0) 62%,rgba(4,11,22,.62) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -40px 80px rgba(4,11,22,.5),inset 0 30px 60px rgba(169,233,255,.08)}
.port-glare{position:absolute;inset:8.5%;z-index:2;border-radius:50%;overflow:hidden;pointer-events:none}
.port-glare::before{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:38%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2) 45%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0));transform:skewX(-18deg);animation:portGlare 9s cubic-bezier(.4,0,.2,1) 2.6s infinite}
@keyframes portGlare{0%{left:-60%}22%,100%{left:130%}}
.port-glare::after{content:"";position:absolute;left:10%;top:6%;width:36%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,0));transform:rotate(-28deg);filter:blur(2px)}
/* kovinski lesk, ki kroži po jeklenem obroču */
.port-sheen{position:absolute;inset:2.4%;z-index:4;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.0) 20deg,rgba(255,255,255,.75) 40deg,rgba(255,255,255,0) 62deg,transparent 180deg,rgba(255,255,255,0) 200deg,rgba(169,233,255,.5) 214deg,rgba(255,255,255,0) 232deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 79.4%,#000 80.2%,#000 95%,transparent 95.8%);mask:radial-gradient(closest-side,transparent 79.4%,#000 80.2%,#000 95%,transparent 95.8%);
  mix-blend-mode:overlay;animation:portSpin 14s linear infinite}
@keyframes portSpin{to{transform:rotate(360deg)}}
/* polni lok 1,0–3,0 in igla */
.port-band{stroke-dasharray:1778;stroke-dashoffset:0;filter:drop-shadow(0 0 8px rgba(56,182,255,.95));animation:portSweep 2.6s cubic-bezier(.45,.05,.2,1) .7s backwards}
@keyframes portSweep{from{stroke-dashoffset:1778}}
.port-needle{transform-box:view-box;transform-origin:500px 500px;transform:rotate(67.5deg);animation:portNeedle 2.6s cubic-bezier(.45,.05,.2,1) .7s backwards}
@keyframes portNeedle{from{transform:rotate(-135deg)}}
.port-needle circle{fill:#fff;filter:drop-shadow(0 0 10px rgba(127,219,255,1)) drop-shadow(0 0 22px rgba(56,182,255,.9))}
.port-unit{display:none}
.port-labs text{font-size:25px}
/* odčitek */
.port-read{position:absolute;z-index:5;left:50%;bottom:-1.2%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 26px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(14,34,60,.92),rgba(5,14,27,.95));border:1px solid rgba(127,219,255,.32);box-shadow:0 18px 40px -16px rgba(0,0,0,.8),0 0 30px -6px rgba(56,182,255,.5),inset 0 1px 0 rgba(255,255,255,.1);animation:fadeUp .8s var(--x-ease) .5s backwards}
.port-read small{font:600 10.5px var(--x-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--x-cyan)}
.port-read span{font:700 30px/1 'Manrope',var(--x-sans);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.port-read span em{font-style:normal;font-size:.5em;font-weight:600;color:var(--x-on-2);margin-right:5px}
.port-read span i{font-style:normal;font-size:.5em;font-weight:600;color:var(--x-cyan);margin-left:5px;letter-spacing:.1em}
.port-read .pr-depth{font:500 12px var(--x-sans);letter-spacing:.02em;text-transform:none;color:var(--x-on-2);max-height:0;opacity:0;overflow:hidden;animation:prDepth .7s var(--x-ease) 3.6s forwards}
@keyframes prDepth{to{max-height:20px;opacity:1;margin-top:3px}}
/* globinski čip */
.port-depth{position:absolute;z-index:5;right:-1%;top:4%;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:999px;background:rgba(6,18,34,.66);border:1px solid rgba(127,219,255,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--x-on);font:500 14px var(--x-sans);white-space:nowrap;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);animation:fadeUp .9s var(--x-ease) 3.2s backwards, portFloat 7s ease-in-out 4s infinite}
.port-depth b{color:#fff;font-weight:700}
.port-depth .i3d{flex:0 0 34px;width:34px;height:34px}.port-depth .i3d .ico{width:17px;height:17px}
@keyframes portFloat{50%{transform:translateY(-6px)}}
.port-o2{position:absolute;z-index:5;left:auto;top:auto;right:3%;bottom:-1.5%;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:999px;background:rgba(6,18,34,.66);border:1px solid rgba(127,219,255,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--x-on);font:500 14px var(--x-sans);white-space:nowrap;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);animation:fadeUp .9s var(--x-ease) 3.5s backwards, portFloat 8s ease-in-out 5s infinite}
.port-o2 b{color:#fff;font-weight:700}
.port-o2 .i3d{flex:0 0 34px;width:34px;height:34px}.port-o2 .i3d .ico{width:17px;height:17px}
@media (max-width:1439px){.port-o2{bottom:-1.2%;right:0;font-size:13px;line-height:1.25;padding:8px 14px 8px 8px;gap:9px}.port-o2 b{display:block}.port-o2 .i3d{flex-basis:30px;width:30px;height:30px}} /* V27: na manjših zaslonih dvovrstična oznaka, da se ne prekriva z odčitkom tlaka */
@media (max-width:1279px){.port-o2{right:1.5%;padding:7px 11px;font-size:12px}.port-o2 .i3d{display:none}}
.hero-video{bottom:auto}
@media (prefers-reduced-motion:reduce){.port::before,.port-waves i,.port-glare::before,.port-sheen,.port-band,.port-needle,.port-depth,.port-o2,.port{animation:none}.port-waves{display:none}}
}

.port .hero-media,.port-glass,.port-bubbles,.port-glare{inset:12.4%!important}
.port-maxl{font:600 15px var(--x-sans);letter-spacing:.06em;fill:rgba(232,240,248,.55)}
.port-ring .tk-m{stroke-width:3.6}

/* PRODUKCIJSKA NASTAVITEV: neskončne zanke le, kjer so poceni */
.port::before{animation:none}
.port-sheen{mix-blend-mode:normal;opacity:.6;will-change:transform;animation:portSpin 4.5s cubic-bezier(.4,0,.2,1) 3.1s 1 backwards}
.port-glare::before{will-change:transform;animation:portGlare 11s cubic-bezier(.4,0,.2,1) 3.4s infinite}
.port-waves i{will-change:transform,opacity;animation:portWave 2.6s cubic-bezier(.2,.6,.3,1) 3.1s 2 backwards}
.port-waves i:nth-child(2){animation-delay:3.5s}.port-waves i:nth-child(3){display:none}
.port-o2{animation:fadeUp .9s var(--x-ease) 3.5s backwards}

/* VAROVALO: na šibkih napravah samodejno izklopi zanke in paralakso */
.hero.lite .port-glare,.hero.lite .port-waves,.hero.lite .port-bubbles{display:none}
.hero.lite .port-sheen{animation:none}
.hero.lite .hero-video .play{animation:none}

/* senca okna kot statičen sloj (ne filter na SVG) – cenejši uvod */
.port-ring{filter:none!important}
.port-shadow{position:absolute;inset:1.5%;z-index:0;border-radius:50%;box-shadow:0 34px 70px -10px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.port-band{filter:none!important}
.port-band-glow{stroke-dasharray:1778;opacity:.55;animation:portSweep 2.6s cubic-bezier(.45,.05,.2,1) .7s backwards}
/* premor neskončnih animacij, ko naslovnica ni vidna */
.hero.is-off .port::before,.hero.is-off .port-waves i,.hero.is-off .port-glare::before,.hero.is-off .port-sheen,.hero.is-off .port-bubbles i,.hero.is-off .port-o2,.hero.is-off .hero-video .play{animation-play-state:paused}

}
