/* =========================================================
   FreshAir — hero.css
   Klima na zidu: unutrašnja jedinica (čist CSS), LCD, žaluzina,
   vazduh (SVG iz lcd.js), status, naslov i dugmad.
   Sve mere jedinice su u "u" = 1% širine zida, pa se klima
   skalira kao jedna celina (--u se postavlja na .hero-wall).
   ========================================================= */

.hero{
  position:relative;overflow:hidden;
  padding:clamp(22px,5vw,56px) 0 clamp(56px,9vw,110px);
  background:radial-gradient(80% 55% at 50% 0%,#fff 0%,rgba(255,255,255,0) 70%);
}

/* ---------- zid + jedinica ---------- */
.hero-wall{
  --w:min(88vw,660px);
  --u:calc(var(--w) / 100);
  position:relative;width:var(--w);margin-inline:auto;
}
.unit{
  --lcd-h:calc(var(--u) * 13.4);
  --slot-h:clamp(13px,calc(var(--u) * 3.34),22px);
  --tuck:calc(var(--u) * 1.3);
  --seg-off:rgba(127,230,255,.07);
  position:relative;perspective:900px;
}
/* senka koju jedinica baca na zid (iza tela i žaluzine) */
.unit::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:var(--slot-h);z-index:0;pointer-events:none;
  border-radius:clamp(14px,calc(var(--u) * 3.6),24px) clamp(14px,calc(var(--u) * 3.6),24px) 12px 12px;
  box-shadow:var(--shadow-3),0 calc(var(--u) * .5) calc(var(--u) * 1.2) calc(var(--u) * -.2) rgba(10,26,47,.16);
}

/* ---------- telo ---------- */
.unit-body{
  position:relative;z-index:2;aspect-ratio:3.55 / 1;
  border-radius:clamp(14px,calc(var(--u) * 3.6),24px) clamp(14px,calc(var(--u) * 3.6),24px) 12px 12px;
  background:
    linear-gradient(180deg,rgba(10,26,47,0) 83%,rgba(10,26,47,.05) 83.6%,rgba(10,26,47,.085) 100%),
    linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 24%),
    linear-gradient(104deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.7) 38%,rgba(255,255,255,0) 56%),
    linear-gradient(90deg,rgba(10,26,47,.075) 0%,rgba(10,26,47,0) 4.5%,rgba(10,26,47,0) 95%,rgba(10,26,47,.09) 100%),
    var(--plastic);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -8px 14px -10px rgba(10,26,47,.18),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 0 0 1px rgba(10,26,47,.07);
}
/* rešetka usisnika vazduha — tanki vertikalni prorezi pri vrhu */
.unit-body::before{
  content:"";position:absolute;left:6%;right:6%;top:7.5%;height:8.5%;
  background:repeating-linear-gradient(90deg,rgba(10,26,47,.2) 0 max(1px,calc(var(--u) * .3)),rgba(10,26,47,0) max(1px,calc(var(--u) * .3)) calc(var(--u) * 1.15));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.9);
  opacity:.8;
}
/* šav prednje maske pri dnu */
.unit-body::after{
  content:"";position:absolute;left:0;right:0;bottom:16.4%;height:1px;
  background:linear-gradient(90deg,rgba(10,26,47,0),rgba(10,26,47,.17) 7%,rgba(10,26,47,.17) 93%,rgba(10,26,47,0));
  box-shadow:0 1px 0 rgba(255,255,255,.95);
}

.unit-logo{
  position:absolute;left:6.3%;bottom:26%;
  font:600 clamp(9px,2.3vw,14px)/1 var(--f-display);letter-spacing:-.02em;
  color:rgba(18,54,107,.52);text-shadow:0 1px 0 #fff;
  user-select:none;
}
.unit-logo b{font-weight:600;color:rgba(30,111,217,.62)}

/* ---------- LCD ---------- */
.unit-lcd{
  position:absolute;right:6%;top:21.5%;
  height:var(--lcd-h);aspect-ratio:2.4 / 1;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;
  column-gap:calc(var(--u) * .6);
  padding:calc(var(--lcd-h) * .13) calc(var(--lcd-h) * .12) calc(var(--lcd-h) * .12) calc(var(--lcd-h) * .14);
  border-radius:clamp(6px,calc(var(--u) * 1.5),10px);
  background:linear-gradient(180deg,var(--lcd-bg-2),var(--lcd-bg));
  box-shadow:
    0 0 0 max(1px,calc(var(--u) * .22)) #04090F,
    0 0 0 calc(var(--u) * .6) #EDF1F5,
    0 0 0 calc(var(--u) * .6 + 1px) rgba(10,26,47,.14),
    0 calc(var(--u) * .5) 0 calc(var(--u) * .6) rgba(255,255,255,.9),
    inset 0 2px 7px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(127,230,255,.1),
    inset 0 0 0 1px rgba(127,230,255,.06);
  color:var(--lcd-on);
  transition:box-shadow .7s ease;
}
.unit-lcd::before{ /* svetlost ekrana koja se "preliva" po staklu */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 100% at 76% 50%,rgba(34,184,240,.2),rgba(34,184,240,0) 70%);
  opacity:1;transition:opacity .7s ease;
}
.unit-lcd::after{ /* odsjaj stakla */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:
    linear-gradient(118deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 34.4%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 28%);
}
.unit-lcd-mode,.unit-lcd-label,.unit-lcd-temp{position:relative;z-index:1;transition:opacity .45s ease}

.unit-lcd-mode{
  grid-column:1;grid-row:1;align-self:start;justify-self:start;
  font-size:calc(var(--lcd-h) * .2);line-height:0;
  color:var(--lcd-on);filter:drop-shadow(0 0 3px rgba(127,230,255,.6));
}
.unit-lcd-mode svg{display:block;width:1em;height:1em;max-width:none}
.unit-lcd-label{
  grid-column:1;grid-row:2;align-self:end;
  font:500 max(6.6px,calc(var(--u) * 1.18))/1.28 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(127,230,255,.62);text-shadow:0 0 6px rgba(127,230,255,.35);
  white-space:normal;
}
.unit-lcd-temp{
  grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;
  font-size:calc(var(--lcd-h) * .62);
  color:var(--lcd-on);
}
.unit-lcd-temp.is-wait{animation:lcd-wait 1.1s steps(1,end) infinite}
@keyframes lcd-wait{0%,100%{opacity:1}50%{opacity:.12}}

/* ---------- LED + IR prozor ---------- */
.unit-led{
  position:absolute;right:calc(var(--u) * 6.9);bottom:6.6%;
  width:max(4px,calc(var(--u) * 1.05));aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#D6DDE5,#A9B4C0);
  box-shadow:0 0 0 1px rgba(10,26,47,.13),inset 0 -1px 1px rgba(10,26,47,.25);
  transition:background-color .5s,box-shadow .5s;
}
.unit-led::before{
  content:"";position:absolute;right:calc(100% + var(--u) * 1.9);top:50%;
  width:calc(var(--u) * 3.6);height:max(3px,calc(var(--u) * 1.3));transform:translateY(-50%);
  border-radius:999px;background:linear-gradient(180deg,#324156,#0A141F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(10,26,47,.2),0 1px 0 rgba(255,255,255,.95);
}

/* ---------- izlaz vazduha ---------- */
.unit-slot{
  position:relative;z-index:1;overflow:hidden;
  width:94%;height:calc(var(--slot-h) + var(--tuck));margin:calc(var(--tuck) * -1) auto 0;
  border-radius:0 0 clamp(8px,calc(var(--u) * 1.7),13px) clamp(8px,calc(var(--u) * 1.7),13px);
  background:linear-gradient(180deg,#070E16 0%,#101D2B 52%,#1A2C40 100%);
  box-shadow:inset 0 0 0 1px rgba(10,26,47,.55),inset 0 -2px 4px rgba(127,230,255,.1),
    0 calc(var(--u) * 1.4) calc(var(--u) * 2.6) calc(var(--u) * -1) rgba(10,26,47,.5);
}
.unit-vanes{
  position:absolute;inset:var(--tuck) 0 0;
  background:
    linear-gradient(180deg,rgba(127,230,255,0) 40%,rgba(127,230,255,.14) 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 calc(var(--u) * 1),rgba(176,205,228,.24) calc(var(--u) * 1) calc(var(--u) * 1 + 1px),rgba(0,0,0,.4) calc(var(--u) * 1 + 1px) calc(var(--u) * 1.2));
}
.unit-slot::after{ /* senka žaluzine na lamelama */
  content:"";position:absolute;left:0;right:0;top:0;height:78%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0));
  opacity:0;transition:opacity .9s cubic-bezier(.2,.8,.2,1);
}
.unit-flap{
  position:absolute;z-index:2;left:-1px;right:-1px;top:calc(var(--tuck) - 1px);bottom:-1px;
  transform-origin:50% 0;
  transform:perspective(520px) rotateX(0deg);
  background:linear-gradient(180deg,#FBFCFD 0%,#F0F3F7 52%,#DBE2EA 100%);
  border-radius:0 0 clamp(8px,calc(var(--u) * 1.7),13px) clamp(8px,calc(var(--u) * 1.7),13px);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(10,26,47,.16),inset 0 -3px 0 rgba(255,255,255,.7);
  transition:transform 900ms cubic-bezier(.2,.8,.2,1),filter 900ms cubic-bezier(.2,.8,.2,1);
  backface-visibility:hidden;
}
.unit.is-open .unit-flap{transform:perspective(520px) rotateX(-62deg);filter:brightness(.93)}
.unit.is-open .unit-slot::after{opacity:1}

/* ---------- stanja paljenja (bez JS = klima već radi) ---------- */
.js .unit:not(.is-on) .unit-lcd-temp,
.js .unit:not(.is-on) .unit-lcd-mode,
.js .unit:not(.is-on) .unit-lcd-label{opacity:0}
.js .unit:not(.is-on) .unit-lcd::before{opacity:0}
.js .unit:not(.is-on) .unit-lcd{box-shadow:
    0 0 0 max(1px,calc(var(--u) * .22)) #04090F,
    0 0 0 calc(var(--u) * .6) #EDF1F5,
    0 0 0 calc(var(--u) * .6 + 1px) rgba(10,26,47,.14),
    0 calc(var(--u) * .5) 0 calc(var(--u) * .6) rgba(255,255,255,.9),
    inset 0 2px 7px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(127,230,255,.03);}
.unit.is-on .unit-lcd{box-shadow:
    0 0 0 max(1px,calc(var(--u) * .22)) #04090F,
    0 0 0 calc(var(--u) * .6) #EDF1F5,
    0 0 0 calc(var(--u) * .6 + 1px) rgba(10,26,47,.14),
    0 calc(var(--u) * .5) 0 calc(var(--u) * .6) rgba(255,255,255,.9),
    0 calc(var(--u) * 1.2) calc(var(--u) * 5) calc(var(--u) * -.4) rgba(34,184,240,.5),
    inset 0 2px 7px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(127,230,255,.12),
    inset 0 0 0 1px rgba(127,230,255,.07);}
.unit.is-on .unit-led{
  background:radial-gradient(circle at 40% 35%,#E6FBFF,#7FE6FF 60%);
  box-shadow:0 0 0 1px rgba(10,26,47,.1),0 0 6px 1px rgba(127,230,255,.95),0 0 18px 4px rgba(34,184,240,.5);
}
.unit.is-on.is-fetching .unit-led{animation:led-blink 1.7s ease-in-out infinite}
@keyframes led-blink{0%,100%{opacity:1}50%{opacity:.28}}

.js .unit:not(.is-open) .unit-flap{transform:perspective(520px) rotateX(0deg);filter:none}
.js .unit:not(.is-open) .unit-slot::after{opacity:0}
/* bez JS: žaluzina otvorena */
.unit:not(.is-open) .unit-flap{transform:perspective(520px) rotateX(-62deg)}

.unit-lcd.is-pending .unit-lcd-label{opacity:0}

/* ---------- vazduh ---------- */
.airflow{
  --air-1:#9BEBFF;--air-2:#22B8F0;--air-haze:34,184,240;
  position:absolute;top:100%;left:-12%;right:-12%;
  height:clamp(240px,46vw,460px);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);
  transition:opacity 1.3s ease;
}
.js .airflow:not(.is-on){opacity:0}
.airflow::before{ /* hladna izmaglica ispod izlaza */
  content:"";position:absolute;inset:0;
  background:radial-gradient(54% 80% at 50% 0%,rgba(var(--air-haze),.22),rgba(var(--air-haze),.07) 52%,rgba(var(--air-haze),0) 78%);
}
.airflow[data-mode="heat"]{--air-1:#FFD9B8;--air-2:#FF7A45;--air-haze:255,122,69}
.airflow svg{position:relative;display:block;width:100%;height:100%;max-width:none;overflow:visible}
.airflow path{vector-effect:non-scaling-stroke}
.airflow .af-base{stroke-opacity:.3}
.airflow .af-dash{animation:air-flow var(--dur,4.5s) linear var(--del,0s) infinite}
@keyframes air-flow{to{stroke-dashoffset:var(--cyc,-200)}}
.airflow.is-paused .af-dash{animation-play-state:paused}

/* ---------- tekst ispod klime ---------- */
.hero-copy{position:relative;z-index:1;text-align:center}

.hero-status{
  display:flex;gap:10px;
  width:fit-content;max-width:min(100%,560px);
  margin:clamp(38px,6vw,46px) auto 26px;
  padding:9px 16px 9px 12px;border-radius:18px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--line),var(--shadow-1);
  font:400 14.5px/1.45 var(--f-text);color:var(--ink-2);
  text-align:left;
  min-height:calc(18px + 3 * 1.45 * 14.5px);   /* 3 reda: bez skoka kad stigne živa temperatura */
  align-items:center;
}
.hero-status [data-status-text]{display:grid;gap:3px}
.hero-status [data-status-text] span{text-wrap:balance;color:var(--ink-2)}
.hero-status [data-status-text] strong{font-size:1.04em;letter-spacing:-.005em}
.hero-status-dot{
  position:relative;flex:none;width:8px;height:8px;border-radius:50%;
  background:#A9B5C2;box-shadow:inset 0 -1px 1px rgba(10,26,47,.2);
}
.hero-status-dot::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid var(--cyan);opacity:0;
}
.hero-status.is-live .hero-status-dot{background:var(--cyan);box-shadow:0 0 8px rgba(34,184,240,.8)}
.hero-status.is-live .hero-status-dot::after{animation:dot-ring 2.3s ease-out infinite}
.hero-status.is-live[data-mode="heat"] .hero-status-dot{background:#FF7A45;box-shadow:0 0 8px rgba(255,122,69,.8)}
.hero-status.is-live[data-mode="heat"] .hero-status-dot::after{border-color:#FF7A45}
@keyframes dot-ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.4);opacity:0}}
.hero-status strong{font-weight:700;color:var(--ink)}
.hero-status.is-live[data-mode="cool"] strong{color:var(--blue-deep)}
.hero-status.is-live[data-mode="heat"] strong{color:#C84B16}

.hero-eyebrow{margin:0 0 16px}
@media (max-width:359px){.hero-eyebrow{font-size:10.5px;letter-spacing:.1em}}

.hero h1{
  max-width:13ch;margin-inline:auto;text-wrap:balance;
}
.hero h1 span{
  display:inline-block;
  padding:.04em .12em .14em .1em;margin:-.04em -.12em -.14em -.1em;   /* ne odseca ivice slova (K, j) */
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.hero-sub{
  max-width:46ch;margin:18px auto 0;
  color:var(--muted);font-size:clamp(16.5px,4.2vw,19px);line-height:1.55;text-wrap:pretty;
}

.hero-cta{
  display:grid;gap:12px;margin-top:28px;
}
.hero-cta .btn{width:100%}

.hero-note{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:24px 0 0;
  font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}
.hero-note span{display:inline-flex;align-items:center;gap:10px}
.hero-note span::before{
  content:"";width:4px;height:4px;border-radius:50%;flex:none;
  background:var(--cyan);box-shadow:0 0 6px rgba(34,184,240,.7);
}

/* ---------- mobilni (primarno platno 390 × 844) ---------- */
@media (max-width:599px){
  .hero-wall{--w:min(94vw,660px)}
  .unit{--lcd-h:calc(var(--u) * 16)}
  .unit-body{aspect-ratio:3.05 / 1}
  .unit-lcd{top:19.5%}
  .unit-logo{bottom:23%}
  .unit-led{bottom:6%}
}

/* ---------- ≥ 600px ---------- */
@media (min-width:600px){
  .hero-status{min-height:calc(18px + 2 * 1.45 * 14.5px);font-size:15px}
  .hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px}
  .hero-cta .btn{width:auto}
  .hero-note{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:28px}
  .hero-note span::before{display:none}
  .hero-note span + span::before{display:block}
}
/* desktop: poruka u jednom-dva reda, vazduh se gasi pre naslova */
@media (min-width:900px){
  .hero-status{max-width:min(100%,720px)}
  .airflow{height:clamp(240px,24vw,340px)}
}

/* ---------- reduced motion: završna stanja, bez petlji ---------- */
@media (prefers-reduced-motion:reduce){
  .airflow .af-dash{display:none}
  .airflow .af-base{stroke-opacity:.5!important}
  .unit-lcd-temp.is-wait,.unit.is-on.is-fetching .unit-led,.hero-status.is-live .hero-status-dot::after{animation:none!important}
  .hero-status-dot::after{display:none}
}