/* ALUMINIUM SYSTEMS – uvodni promo film. Sva pravila ograničena na #as-hero. */
#as-hero{--g:#c9a86a;--ink:#f4f1ea;--ash-end:0;position:relative;height:calc(100vh - var(--ash-top,0px));height:calc(100svh - var(--ash-top,0px));min-height:460px;max-height:1100px;overflow:hidden;background:#07080a;color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;isolation:isolate}
#as-hero *{box-sizing:border-box}
#as-hero .ash-back{position:absolute;inset:-8%;width:116%;height:116%;filter:blur(28px) brightness(.45) saturate(1.1);opacity:0}
#as-hero .ash-frame{position:absolute;inset:0;background:#07080a}
#as-hero .ash-video,#as-hero .ash-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* mobitel: fokus kadra malo iznad sredine – ograda ostaje vidljiva iznad teksta */
#as-hero .ash-video,#as-hero .ash-poster{object-position:50% 38%}
#as-hero .ash-poster{transition:opacity .6s}
#as-hero picture{display:block}
#as-hero[data-ash-state="playing"] .ash-poster,#as-hero[data-ash-state="hold"] .ash-poster,#as-hero[data-ash-state="ended"] .ash-poster{opacity:0}
#as-hero .ash-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0008,transparent 18%,transparent 58%,#000c 86%,#000e)}
#as-hero .ash-dim{position:absolute;inset:0;background:#07080a;opacity:calc(var(--ash-end) * .72);pointer-events:none}

/* V6: desktop film je 16:9 i puni cijeli kadar (bez uskog okvira) */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  #as-hero .ash-back{display:none}
  #as-hero .ash-video,#as-hero .ash-poster{object-position:50% 50%}
  #as-hero .ash-shade{background:linear-gradient(90deg,#000a 0%,#0004 42%,transparent 70%),linear-gradient(#0006,transparent 20%,transparent 70%,#000b)}
}

/* natpisi: na mobitelu u donjem dijelu (ispod ograde), na računaru lijevo od kadra – nikad preko ograde */
#as-hero .ash-cap{position:absolute;z-index:3;left:clamp(20px,6vw,90px);right:20px;bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:560px;opacity:0;pointer-events:none;will-change:opacity,transform}
#as-hero .ash-k{font-size:11px;letter-spacing:.32em;color:var(--g);font-weight:600;margin:0 0 8px}
#as-hero .ash-h{font:500 clamp(30px,5vw,72px)/1 "Cormorant Garamond",Georgia,serif;margin:0;text-shadow:0 2px 24px #000b}
#as-hero .ash-h em{font-style:italic}
#as-hero .ash-brand{font:600 clamp(20px,5.6vw,72px)/1 "Manrope",system-ui,sans-serif;letter-spacing:.16em;margin:0 -.16em 0 0;white-space:nowrap;text-shadow:0 2px 30px #000c}
#as-hero .ash-tag{font:italic 400 clamp(19px,2.4vw,32px) "Cormorant Garamond",Georgia,serif;margin:10px 0 0}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  #as-hero .ash-cap{bottom:auto;top:50%;translate:0 -50%;max-width:min(40vw,560px)}
  #as-hero .ash-brand{letter-spacing:.2em;font-size:clamp(28px,4vw,64px)}
}

#as-hero .ash-skip{position:absolute;z-index:6;right:clamp(14px,3vw,36px);top:calc(16px + env(safe-area-inset-top,0px));font:500 12px "Manrope",system-ui,sans-serif;color:var(--ink);background:#0009;border:1px solid #ffffff2e;padding:9px 15px;border-radius:99px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#as-hero[data-ash-state="ended"] .ash-skip{display:none}
#as-hero .ash-bar{position:absolute;z-index:3;left:clamp(18px,4vw,48px);right:clamp(18px,4vw,48px);bottom:calc(22px + env(safe-area-inset-bottom,0px));height:2px;background:#ffffff22;border-radius:2px;overflow:hidden}
#as-hero .ash-bar i{position:absolute;inset:0;background:var(--g);transform-origin:left;transform:scaleX(0)}
#as-hero .ash-play{position:absolute;z-index:6;left:50%;top:46%;transform:translate(-50%,-50%);display:none;align-items:center;gap:10px;padding:16px 24px;border-radius:99px;border:1px solid #ffffff44;background:#000a;color:var(--ink);font:600 15px "Manrope",system-ui,sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#as-hero .ash-play svg{width:18px;height:18px}
#as-hero[data-ash-state="paused"] .ash-play{display:inline-flex}

#as-hero .ash-end{position:absolute;z-index:5;inset:0;display:grid;place-items:center;text-align:center;padding:24px;opacity:var(--ash-end);pointer-events:none}
#as-hero.ash-end-on .ash-end{pointer-events:auto}
#as-hero .ash-endbrand{font:600 clamp(22px,4.4vw,52px) "Manrope",system-ui,sans-serif;letter-spacing:.24em;margin:0 -.24em 0 0}
#as-hero .ash-endh{font:italic 500 clamp(28px,4.6vw,60px)/1.05 "Cormorant Garamond",Georgia,serif;margin:12px 0 26px;color:#efe7d8}
#as-hero .ash-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
#as-hero .ash-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:99px;text-decoration:none;font-weight:600;font-size:15px;border:0;cursor:pointer;font-family:inherit}
#as-hero .ash-btn svg{width:18px;height:18px}
#as-hero .ash-calc{background:var(--ink);color:#111}
#as-hero .ash-wa{background:#1f8b4c;color:#fff}
#as-hero .ash-contact{margin:20px 0 0;color:#d3cfc8;font-size:14px;line-height:1.9}
#as-hero .ash-contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid #ffffff40}
#as-hero .ash-after{display:flex;gap:18px;justify-content:center;margin-top:18px}
#as-hero .ash-link{background:none;border:0;color:#d9d5ce;font:500 13px "Manrope",system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){
  #as-hero .ash-btn{padding:10px 15px;font-size:13.5px;gap:8px}
  #as-hero .ash-btn svg{width:15px;height:15px}
  #as-hero .ash-btns{gap:8px}
  #as-hero .ash-endbrand{font-size:20px}
  #as-hero .ash-endh{font-size:26px;margin:8px 0 18px}
  #as-hero .ash-contact{font-size:12.5px;margin-top:14px}
  #as-hero .ash-skip{padding:7px 12px;font-size:11.5px;top:12px;right:12px}
  #as-hero .ash-h{font-size:30px}
  #as-hero .ash-cap{bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  #as-hero .ash-bar{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  #as-hero .ash-play{padding:12px 18px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){#as-hero .ash-cap{transition:none}}

@media (max-width:640px){#as-hero{height:calc(88svh - var(--ash-top,0px));min-height:430px}}

/* mobitel: na stranicama s filmom zaglavlje je odmah u postojećem kompaktnom obliku (isti stil kao pri skrolanju) */
@media (max-width:620px){
  body:has(#as-hero) .site-header .nav-wrap{min-height:56px}
  body:has(#as-hero) .site-header .brand img{width:32px;height:32px}
  body:has(#as-hero) .site-header .brand small{display:none}
}

/* V6 PREMIUM: završni natpis je u samom filmu – HTML prikazuje samo dugmad; stalni kontakt tokom filma */
#as-hero .ash-endbrand,#as-hero .ash-endh{display:none}
#as-hero .ash-end{place-items:end center;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
#as-hero .ash-calc{background:#d4bd83;color:#18271f}
#as-hero .ash-quick{position:absolute;z-index:6;right:clamp(14px,3vw,36px);bottom:calc(40px + env(safe-area-inset-bottom,0px));display:flex;gap:8px}
#as-hero .ash-quick a{font:600 12.5px "Manrope",system-ui,sans-serif;color:#fff;text-decoration:none;background:#000a;border:1px solid #ffffff44;padding:10px 15px;border-radius:99px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#as-hero .ash-quick a:first-child{background:#1f8b4c;border-color:#1f8b4c}
#as-hero.ash-end-on .ash-quick{display:none}
#as-hero[data-ash-state="ended"] .ash-quick{display:none}
@media (max-width:640px){#as-hero .ash-quick{left:18px;right:18px;bottom:calc(30px + env(safe-area-inset-bottom,0px))}#as-hero .ash-quick a{flex:1;text-align:center;padding:9px 8px;font-size:12px}#as-hero .ash-cap{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
#as-hero .ash-dim{opacity:calc(var(--ash-end) * .15)}
#as-hero .ash-end{display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(46px + env(safe-area-inset-bottom,0px))}
#as-hero .ash-contact{margin-top:12px}
#as-hero .ash-after{margin-top:10px}
@media (max-width:640px){#as-hero .ash-end{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}#as-hero .ash-contact{display:none}}