:root{--epic-ratio:56.25%;/* 16:9 = 56.25% */ --epic-radius:1rem; --epic-shadow:0 10px 30px rgba(0,0,0,.15); --epic-dot-size:10px; --brush-size:120px}
	/* Eksplicitne visine slidera po breakpoint-ima (usklađeno sa live) */
:root{ --epic-h: 870px }
@media (max-width: 1400px){ :root{ --epic-h: 830px } }
@media (max-width: 1200px){ :root{ --epic-h: 790px } }
@media (max-width: 992px) { :root{ --epic-h: 680px } }
@media (max-width: 820px) { :root{ --epic-h: 500px } }  /* -40px */
@media (max-width: 768px) { :root{ --epic-h: 480px } }  /* -40px */
@media (max-width: 640px) { :root{ --epic-h: 460px } }  /* -40px */
@media (max-width: 560px) { :root{ --epic-h: 440px } }  /* -40px */
@media (max-width: 480px){  :root{ --epic-h: 520px } }  /* -40px */
    .epic-slider{position:relative;overflow:hidden;border-radius:var(--epic-radius);box-shadow:var(--epic-shadow);background:#111;color:#fff}
.epic-viewport{position:relative;isolation:isolate;height:var(--epic-h, 720px);
  touch-action: pan-x pinch-zoom;
}
.epic-viewport::before{content:"";display:block;padding-top:0}
    .epic-track{position:absolute;inset:0;display:flex;will-change:transform}
    .epic-slide{position:relative;flex:0 0 100%;height:100%;contain:paint;}
    .epic-slide{z-index:0}
    .epic-slide[aria-current="true"]{z-index:2}
    .epic-slide.is-leaving{z-index:1}
    .epic-slide[hidden]{display:none}
    /* Background media */
    .epic-media{position:absolute;inset:0;z-index:0}
    .epic-media img, .epic-media picture{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;max-width:100%;max-height:100%;
}

/* Safety: ako neki eksterni CSS vrati ratio padding, poništi ga */
.epic-viewport::before{ padding-top: 0 !important }
    /* Ken Burns (optional) */
    @keyframes epic-kenburns {from{transform:scale(1) translateZ(0)} to{transform:scale(1.08) translateZ(0)}}
    .epic-kenburns img{animation:none}

    /* Layers */
    .epic-layer{position:absolute;z-index:2;max-width:min(90%, 960px)}
    /* Let pointer events pass through text so paintbrush keeps working under text */
    .epic-layer{ pointer-events:none; }
    .epic-badge, .epic-title, .epic-sub{ pointer-events:none; }
    .epic-cta{ pointer-events:auto; }
    .epic-layer{
      background: transparent;
      padding: 0;
      border-radius: 0;
      box-shadow: none;
      backdrop-filter: none;
    }
    .epic-badge, .epic-title, .epic-sub{
      display:inline-block;
      background:#000; /* 100% black */
      padding:.35rem .7rem;
      border-radius:.65rem;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }
.epic-layer[data-pos="center"]{
  left:50%; top:50%; right:auto; bottom:auto;
  transform:translate(-50%,-50%);
  position:absolute; width:min(92%, 1060px); max-width:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; text-align:center;
}
    /* Push sub + button lower on centered layouts */
    .epic-layer[data-pos="center"] .epic-sub{ margin-top: 160px; }
    .epic-layer[data-pos="left"]{left:6%;bottom:12%}
    .epic-layer[data-pos="right"]{right:6%;bottom:12%}
    .epic-badge{display:inline-block;padding:.35rem .55rem;border-radius:.5rem;background:rgba(0,0,0,.55);backdrop-filter:saturate(1.2) blur(4px);font:600 0.85rem/1.1 system-ui, sans-serif;letter-spacing:.02em}
    .epic-title{
  margin:.4rem 0 0;
  font:800 clamp(1.6rem, 2.7vw + .6rem, 3.4rem)/1.06 system-ui, sans-serif;
  text-shadow:0 8px 35px rgba(0,0,0,.45);
  transform-origin:center; will-change:transform,filter; backface-visibility:hidden; transform:translateZ(0);
}
    .epic-sub{
  margin:.6rem 0 1.2rem;
  font:600 clamp(1rem, 1.25vw + .45rem, 1.35rem)/1.32 system-ui,sans-serif;
  opacity:.98;
}
    /* Uppercase for text rows (exclude CTA) */
    .epic-layer .epic-badge,
    .epic-layer .epic-title,
    .epic-layer .epic-sub{ text-transform: uppercase; }
    .epic-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:.75rem;background:transparent;color:#fff;text-decoration:none;font:700 1rem/1 system-ui,sans-serif;border:2px solid #fff;text-transform:uppercase;box-shadow:none}
    .epic-cta:hover{background:rgba(255,255,255,.1);color:#fff}
    .epic-cta:focus{outline:2px solid #fff;outline-offset:2px}

    /* Animations for layers */
    @keyframes epic-in-up { from{opacity:0;transform:translate3d(0,18px,0) scale(.98)} to{opacity:1;transform:none} }
    @keyframes epic-in-left { from{opacity:0;transform:translate3d(-24px,0,0) scale(.98)} to{opacity:1;transform:none} }
    @keyframes epic-in-right { from{opacity:0;transform:translate3d(24px,0,0) scale(.98)} to{opacity:1;transform:none} }
    @keyframes epic-in-down { from{opacity:0;transform:translate3d(0,-18px,0) scale(.98)} to{opacity:1;transform:none} }
    /* Depth/zoom-in entrance for titles */
 @keyframes epic-in-depth {
  0%   { opacity:0; transform:scale(.6);  filter:blur(12px) }
  80%  { opacity:1; transform:scale(1);   filter:blur(0) }
  100% { opacity:1; transform:scale(1);   filter:blur(0) }
}

    /* Idle drift for titles (runs after entrance finishes) */
    @keyframes epic-idle-drift-left {
      0%,100% { transform: translateX(0) }
      50%     { transform: translateX(-16px) }
    }
    @keyframes epic-idle-drift-right {
      0%,100% { transform: translateX(0) }
      50%     { transform: translateX(16px) }
    }

    /* Depth + gentle horizontal drift for titles */
    @keyframes epic-in-depth-left { /* ends slightly left */
      0%   { opacity:0; transform:scale(.6) translateX(0);   filter:blur(12px) }
      80%  { opacity:1; transform:scale(1)  translateX(-16px); filter:blur(0) }
      100% { opacity:1; transform:scale(1)  translateX(-16px); filter:blur(0) }
    }
    @keyframes epic-in-depth-right { /* ends slightly right */
      0%   { opacity:0; transform:scale(.6) translateX(0);   filter:blur(12px) }
      80%  { opacity:1; transform:scale(1)  translateX(16px);  filter:blur(0) }
      100% { opacity:1; transform:scale(1)  translateX(16px);  filter:blur(0) }
    }

    @keyframes epic-out-down { from{opacity:1;transform:none} to{opacity:0;transform:translate3d(0,14px,0) scale(.98)} }
    @keyframes epic-out-left { from{opacity:1;transform:none} to{opacity:0;transform:translate3d(-18px,0,0) scale(.98)} }
    @keyframes epic-out-right { from{opacity:1;transform:none} to{opacity:0;transform:translate3d(18px,0,0) scale(.98)} }
    @keyframes epic-out-up { from{opacity:1;transform:none} to{opacity:0;transform:translate3d(0,-14px,0) scale(.98)} }

    /* Slide crossfade to sync with text */
    @keyframes epic-slide-in { from{opacity:0} to{opacity:1} }
    @keyframes epic-slide-out{ from{opacity:1} to{opacity:0} }

    /* Base opacity in fade mode; entering/leaving get animations */
    .epic-slider[data-transition="fade"] .epic-slide{ opacity:0; }
    .epic-slider[data-transition="fade"] .epic-slide[aria-current="true"]{
      opacity:1;
      animation: epic-slide-in var(--slide-in-dur, .65s) ease var(--slide-in-delay, 0s) both;
    }
    .epic-slider[data-transition="fade"] .epic-slide.is-leaving{
      animation: epic-slide-out var(--slide-out-dur, .65s) ease var(--slide-out-delay, 0s) both;
    }

    @keyframes epic-idle-float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
    @keyframes epic-idle-float-x { 0%,100%{transform:translateX(0)} 50%{transform:translateX(2px)} }
    .epic-anim{opacity:0}
    /* Enter animation (configurable via CSS vars per element) */
    .epic-slide[aria-current="true"] .epic-anim{
      animation: var(--in-name, epic-in-up) var(--in-dur, .65s) cubic-bezier(.2,.8,.2,1) var(--in-delay,.1s) both;
    }
    /* Exit animation plays on the slide that is leaving */
    .epic-slide.is-leaving .epic-anim{
      animation: var(--out-name, epic-out-down) var(--out-dur, .5s) ease-in var(--out-delay, 0s) both;
    }
    /* Force per-element OUT when toggled from JS */
    .epic-anim.epic-out{
      animation: var(--out-name, epic-out-down) var(--out-dur, .5s) ease-in var(--out-delay, 0s) both;
    }
    /* Make sure OUT wins over current-slide ENTER when both apply */
    .epic-slide[aria-current="true"] .epic-anim.epic-out{
      animation: var(--out-name, epic-out-down) var(--out-dur, .5s) ease-in var(--out-delay, 0s) both;
    }
    /* Idle micro-motion while slide is active */
    .epic-layer.is-idle .epic-title:nth-of-type(1){animation: epic-idle-drift-left 6s ease-in-out .0s infinite}
    .epic-layer.is-idle .epic-title:nth-of-type(2){animation: epic-idle-drift-right 6s ease-in-out .0s infinite}
    .epic-layer.is-idle .epic-sub{animation: epic-idle-float-y 6s ease-in-out .2s infinite}
    .epic-layer.is-idle .epic-badge{animation: epic-idle-float-x 7s ease-in-out .15s infinite}
    /* Keep text visible while idle animations run (avoid opacity reset when animation property changes) */
    .epic-layer.is-idle .epic-anim{opacity:1}

    /* Controls */
    .epic-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);display:grid;place-items:center;background:transparent;border:none;width:auto;height:auto;padding:20px 8px;/* larger vertical hit-area */cursor:pointer;touch-action:manipulation;pointer-events:auto}
    .epic-viewport{pointer-events:auto}
    .epic-arrow:hover{background:transparent}
.epic-prev{left:36px}
.epic-next{right:36px}

@media (max-width: 480px){
  .epic-prev{ left:12px }
  .epic-next{ right:12px }
}
@media (max-width: 480px){
  /* Less crop on mobile: show full image without over-zoom */
  /* .epic-media{ background:#000; } */
  .epic-media img, .epic-media picture{ object-fit: cover !important; }
}
@media (max-width: 480px){
  /* Ukloni filter (blur) iz keyframe ulaza + forsiraj lakši ulaz (bez filtera) */
  .epic-title{ filter:none !important; --in-name: epic-in-up !important; }
}
    .epic-arrow svg{width:56px;height:56px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
    .epic-arrow::before{content:"";position:absolute;inset:auto 0;top:50%;transform:translateY(-50%);height:72px;/* taller vertical hit area */}

    .epic-dots{position:absolute;z-index:3;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:10px}
    .epic-dot{width:var(--epic-dot-size);height:var(--epic-dot-size);border-radius:50%;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.6);cursor:pointer}
    .epic-dot[aria-current="true"]{background:#fff}

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .epic-kenburns img{animation:none}
      .epic-slide,.epic-track{transition:none!important}
    }

    /* Responsive tweaks */
    @media (max-width: 640px){
      :root{--epic-radius:.75rem}
      :root{--brush-size:90px}
      .epic-layer[data-pos="left"], .epic-layer[data-pos="right"]{left:5%;right:5%;bottom:8%}
      .epic-cta{padding:.7rem 1rem}
    }

    /* Paintbrush reveal — canvas-based (slides 1 & 2) */
    .epic-media[data-paintbrush]{position:absolute;inset:0}
    .epic-media[data-paintbrush] .epic-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    /* Sharp image is now drawn via canvas, keep it out of layout */
    .epic-media[data-paintbrush] .epic-alt{display:none !important}
    .epic-media[data-paintbrush] canvas.epic-pb{
      position:absolute; inset:0; width:100%; height:100%;
      touch-action:none; pointer-events:auto; z-index:1;
    }

    /* Scratch-card (slide 3) — unchanged */
    .epic-media[data-scratch]{ position:absolute; inset:0; }
    .epic-media[data-scratch] picture,
    .epic-media[data-scratch] img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
    .epic-media[data-scratch] canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; z-index:1; }

    /* On focus/hover of the slide, enable the mask follow effect; otherwise hide the alt image for perf */
    .epic-slide:not(:hover) .epic-media[data-paintbrush]:not(.epic-painted) .epic-alt{opacity:0}
    /* Touch: a tap toggles reveal (class added via JS) */
    .epic-slide.reveal .epic-media[data-paintbrush] .epic-alt{opacity:1}

    /* Safety: keep SVG mask out of layout (legacy) */
    .epic-mask-svg{ position:absolute; width:0; height:0; overflow:hidden; }

    /* Utilities for front layers */
    .epic-blur{filter: blur(8px) saturate(1.05); transform: translateZ(0);}
    .epic-colorcover{position:absolute;inset:0;background:#FFA300}

    /* Epic transparent button with white border and uppercase text */
    .epic-btn {
      display: inline-block;
      padding: 12px 28px;
      border: 2px solid #fff;   /* beli stroke */
      background: transparent;  /* providna unutrašnjost */
      color: #fff;              /* beli tekst */
      text-transform: uppercase;/* velika slova */
      font-weight: 600;
      letter-spacing: 1px;
      pointer-events: auto;     /* ostaje klikabilno */
      transition: all 0.3s ease;
    }

    .epic-btn:hover {
      background: #fff;     /* hover efekat: ispuni belo */
      color: #000;          /* tekst postane crn */
    }
	    /* Responsive font size for epic-slide h2 titles on mobile */
    @media (max-width: 767px) {
      .epic-slide h2 {
        font-size: 1.4rem;
      }
    }