/* Filipinci.cz cinematic interaction layer
   Drop-in enhancement: no framework, no WebGL, no external dependency. */

.cinematic-hero {
  --p: 0;
  --hero-copy: 1;
  --hud-o: 0;
  --route-o: 0;
  --route-dash: 1;
  --arrival-o: 0;
  --mx: 0;
  --my: 0;
  --glow-x: 68%;
  --glow-y: 50%;
  --primary-x: 0px;
  --primary-y: 0px;
  --primary-scale: 1.04;
  --arrival-x: 0px;
  --arrival-y: 0px;
  --arrival-scale: 1.1;
  --light-o: .15;
  --light-x: 0px;
  --light-y: 0px;
  --speed-o: 0;
  --speed-x: 8%;
  --copy-y: 0px;
  --mobile-copy-y: 0px;
  --hud-x: 0px;
  --hud-y: 0px;
  --cue-o: 1;
  height: 440vh;
  min-height: 0;
  display: block;
  overflow: visible;
  background: #06131f;
  color: #fff;
}

.cinematic-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background: #06131f;
}

.cinematic-media,
.cinematic-media::before,
.cinematic-media::after {
  position: absolute;
  inset: 0;
}

.cinematic-media { z-index: 0; overflow: hidden; }

.cinematic-media::before {
  content: "";
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(246,167,26,.19), transparent 24%),
    linear-gradient(90deg, rgba(5,18,29,.98) 0%, rgba(5,18,29,.82) 31%, rgba(5,18,29,.26) 64%, rgba(5,18,29,.1) 100%),
    linear-gradient(180deg, rgba(5,18,29,.08) 38%, rgba(5,18,29,.84) 100%);
}

.cinematic-media::after {
  content: "";
  z-index: 9;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, transparent 1px 86px);
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

.cinematic-bg {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: 66% 55%;
}

.cinematic-bg-primary {
  z-index: 1;
  object-position: center;
  opacity: calc(1 - var(--arrival-o));
  transform: translate3d(var(--primary-x), var(--primary-y), 0) scale(var(--primary-scale));
}

.cinematic-bg-arrival {
  z-index: 2;
  object-position: 58% center;
  opacity: var(--arrival-o);
  filter: saturate(.92) contrast(1.03) brightness(.73);
  transform: translate3d(var(--arrival-x), var(--arrival-y), 0) scale(var(--arrival-scale));
}

.cinematic-light {
  position: absolute;
  z-index: 3;
  width: 46vw;
  height: 46vw;
  right: -7vw;
  bottom: -20vw;
  border-radius: 50%;
  opacity: var(--light-o);
  pointer-events: none;
  background: radial-gradient(circle, rgba(246,167,26,.31), rgba(246,167,26,.08) 28%, transparent 68%);
  transform: translate3d(var(--light-x), var(--light-y), 0);
}

.cinematic-speed-lines {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  opacity: var(--speed-o);
  background: repeating-linear-gradient(102deg, transparent 0 9%, rgba(255,255,255,.11) 9.1% 9.16%, transparent 9.25% 16%);
  transform: translateX(var(--speed-x));
  mask-image: linear-gradient(90deg, transparent 0 58%, #000 85% 100%);
}

.cinematic-route {
  position: absolute;
  z-index: 7;
  inset: 9vh 3vw 8vh 3vw;
  width: calc(100% - 6vw);
  height: calc(100% - 17vh);
  opacity: var(--route-o);
  pointer-events: none;
  filter: drop-shadow(0 0 20px rgba(246,167,26,.16));
}

.cinematic-route .route-grid { opacity: .09; }
.cinematic-route .route-base {
  fill: none;
  stroke: rgba(255,255,255,.2);
  stroke-width: 2;
  stroke-dasharray: 5 11;
}
.cinematic-route .route-live {
  fill: none;
  stroke: #f6a71a;
  stroke-width: 5;
  stroke-linecap: round;
  path-length: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--route-dash);
}
.cinematic-route .route-dot { fill: #f6a71a; }
.cinematic-route .route-dot-halo { fill: rgba(246,167,26,.12); stroke: rgba(246,167,26,.5); stroke-width: 1; }
.cinematic-route text { fill: #fff; font: 800 19px Arial, Helvetica, sans-serif; letter-spacing: .12em; }
.cinematic-route .route-small { fill: rgba(255,255,255,.58); font-size: 11px; letter-spacing: .18em; }

.cinematic-copy {
  position: absolute;
  z-index: 12;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(calc(-43% + var(--copy-y)));
  opacity: var(--hero-copy);
  padding-top: 48px;
  pointer-events: auto;
  will-change: opacity, transform;
}

.cinematic-copy .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.cinematic-copy .eyebrow::before {
  content: "";
  width: 29px;
  height: 1px;
  background: var(--amber);
  box-shadow: 0 0 14px rgba(246,167,26,.7);
}

.cinematic-copy h1 {
  text-shadow: 0 13px 44px rgba(0,0,0,.26);
}

.cinematic-copy .button { backdrop-filter: blur(8px); }

.cinematic-mini-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 220px;
  margin-top: 30px;
  color: rgba(255,255,255,.58);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cinematic-mini-progress i {
  display: block;
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.22);
  overflow: hidden;
}
.cinematic-mini-progress i::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--amber);
  transform-origin: left;
  transform: scaleX(var(--p));
}

.cinematic-hud {
  position: absolute;
  z-index: 11;
  inset: 0;
  opacity: var(--hud-o);
  pointer-events: none;
}

.hud-chip {
  position: absolute;
  min-width: 156px;
  padding: 12px 14px 12px 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-left: 2px solid var(--amber);
  background: rgba(5,18,29,.68);
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 45px rgba(0,0,0,.2);
  transform: translate3d(var(--hud-x), var(--hud-y), 0);
}
.hud-chip::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, rgba(246,167,26,.8), transparent);
}
.hud-chip strong { display: block; color: #fff; font-size: 13px; letter-spacing: .04em; }
.hud-chip span { display: block; margin-top: 5px; color: #9fb0bb; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }
.hud-chip:nth-child(1) { right: 39%; top: 25%; }
.hud-chip:nth-child(2) { right: 18%; top: 35%; }
.hud-chip:nth-child(3) { right: 29%; bottom: 26%; }
.hud-chip:nth-child(4) { right: 9%; bottom: 18%; }
.hud-chip:nth-child(1)::before,
.hud-chip:nth-child(3)::before { left: 100%; }
.hud-chip:nth-child(2)::before,
.hud-chip:nth-child(4)::before { right: 100%; transform: rotate(180deg); }

.cinematic-story {
  position: absolute;
  z-index: 13;
  inset: 0;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  pointer-events: none;
}

.cinematic-story-card {
  position: absolute;
  left: 0;
  top: 50%;
  width: min(520px, 44vw);
  padding: 28px 30px 30px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(4,17,27,.85), rgba(4,17,27,.54));
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0,0,0,.24);
  opacity: 0;
  transform: translate3d(0, calc(-50% + 34px), 0) scale(.985);
  transition: opacity .34s ease, transform .55s cubic-bezier(.2,.75,.15,1);
}

.cinematic-story-card.is-active {
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(1);
  pointer-events: auto;
}

.cinematic-story-card .story-kicker {
  margin: 0 0 16px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.cinematic-story-card h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 59px);
  line-height: .98;
  letter-spacing: -.045em;
}
.cinematic-story-card p:not(.story-kicker) {
  margin: 20px 0 0;
  max-width: 470px;
  color: #c1ced5;
  font-size: 15px;
  line-height: 1.7;
}
.cinematic-story-card .button-row { margin-top: 25px; }

.story-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 24px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}
.story-metrics span {
  padding: 13px 10px;
  background: rgba(4,17,27,.84);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story-metrics span::before { content: "✓"; color: var(--amber); margin-right: 6px; }

.cinematic-progress-rail {
  position: absolute;
  z-index: 14;
  right: max(24px, calc((100vw - 1180px) / 2));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 16px;
  color: rgba(255,255,255,.42);
}
.cinematic-progress-rail::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(255,255,255,.18);
}
.cinematic-progress-rail::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 1px;
  height: calc(100% - 16px);
  background: var(--amber);
  transform-origin: top;
  transform: scaleY(var(--p));
  box-shadow: 0 0 16px rgba(246,167,26,.7);
}
.cinematic-progress-rail span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cinematic-progress-rail span::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #0a1c2a;
  border: 1px solid rgba(255,255,255,.38);
  z-index: 1;
}
.cinematic-progress-rail span.is-active { color: #fff; }
.cinematic-progress-rail span.is-active::before { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 0 5px rgba(246,167,26,.1); }

.cinematic-hero .scroll-cue {
  position: absolute;
  right: 28px;
  bottom: 40px;
  opacity: var(--cue-o);
}

/* Scroll reveal + micro-interaction layer */
.cinematic-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .8s cubic-bezier(.2,.75,.15,1);
}
.cinematic-reveal.is-visible { opacity: 1; transform: translateY(0); }
.cinematic-reveal:nth-child(2) { transition-delay: .06s; }
.cinematic-reveal:nth-child(3) { transition-delay: .12s; }
.cinematic-reveal:nth-child(4) { transition-delay: .18s; }

.service-card.cinematic-tilt {
  --rx: 0deg;
  --ry: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  position: relative;
  overflow: hidden;
  transform: perspective(950px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .25s;
}
.service-card.cinematic-tilt::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  opacity: .17;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(246,167,26,.68), transparent 28%);
  transform: translateZ(1px);
}
.service-card.cinematic-tilt:hover { box-shadow: 0 28px 70px rgba(7,24,39,.12); }

@media (min-width: 901px) {
  .process-section .process-grid { position: relative; border-top: 0; }
  .process-section .process-grid::before,
  .process-section .process-grid::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
  }
  .process-section .process-grid::before { right: 0; background: #d6d9da; }
  .process-section .process-grid::after {
    width: 100%;
    background: var(--amber);
    transform-origin: left;
    transform: scaleX(var(--process-fill, 0));
    box-shadow: 0 0 10px rgba(246,167,26,.25);
  }
}

@media (max-width: 1100px) {
  .hud-chip:nth-child(1) { right: 31%; }
  .hud-chip:nth-child(2) { right: 8%; }
  .hud-chip:nth-child(3) { right: 25%; }
  .hud-chip:nth-child(4) { right: 5%; }
  .cinematic-progress-rail { right: 18px; }
  .cinematic-progress-rail span { font-size: 0; gap: 0; }
}

@media (max-width: 900px) {
  .cinematic-hero { height: 330vh; }
  .cinematic-stage { min-height: 620px; }
  .cinematic-bg-primary { object-position: 61% center; }
  .cinematic-media::before {
    background:
      radial-gradient(circle at 70% 40%, rgba(246,167,26,.15), transparent 28%),
      linear-gradient(90deg, rgba(5,18,29,.92), rgba(5,18,29,.57) 52%, rgba(5,18,29,.22)),
      linear-gradient(180deg, rgba(5,18,29,.06) 35%, rgba(5,18,29,.92));
  }
  .cinematic-copy { top: 48%; }
  .cinematic-story { width: min(100% - 40px, 1180px); }
  .cinematic-story-card { width: min(560px, 76vw); }
  .cinematic-hud { display: none; }
  .cinematic-route { inset: 13vh -11vw 12vh 5vw; width: 112vw; }
}

@media (max-width: 620px) {
  .cinematic-hero { height: 285vh; }
  .cinematic-stage { height: 100svh; min-height: 610px; }
  .cinematic-bg { inset: -2% -18%; width: 136%; height: 104%; }
  .cinematic-bg-primary { object-position: 63% center; }
  .cinematic-bg-arrival { object-position: 56% center; }
  .cinematic-media::before {
    background:
      radial-gradient(circle at 72% 37%, rgba(246,167,26,.12), transparent 27%),
      linear-gradient(180deg, rgba(5,18,29,.34) 0%, rgba(5,18,29,.6) 45%, rgba(5,18,29,.96) 100%),
      linear-gradient(90deg, rgba(5,18,29,.78), rgba(5,18,29,.17));
  }
  .cinematic-copy {
    top: auto;
    bottom: 42px;
    transform: translateY(var(--mobile-copy-y));
    padding-top: 0;
  }
  .cinematic-copy .hero-intro { max-width: 92%; }
  .cinematic-copy .button-row { gap: 9px; }
  .cinematic-copy .button { min-height: 47px; padding: 0 16px; }
  .cinematic-copy .hero-note { display: none; }
  .cinematic-mini-progress { margin-top: 20px; width: 170px; }
  .cinematic-story { width: calc(100% - 32px); }
  .cinematic-story-card {
    left: 0;
    top: auto;
    bottom: 28px;
    width: 100%;
    padding: 21px 21px 23px;
    transform: translate3d(0, 28px, 0) scale(.99);
  }
  .cinematic-story-card.is-active { transform: translate3d(0, 0, 0) scale(1); }
  .cinematic-story-card h2 { font-size: clamp(31px, 10.5vw, 45px); }
  .cinematic-story-card p:not(.story-kicker) { font-size: 13px; margin-top: 14px; }
  .story-metrics { margin-top: 17px; }
  .story-metrics span { padding: 10px 6px; font-size: 8px; }
  .cinematic-route { inset: 9vh -40vw 20vh -10vw; width: 150vw; height: 62vh; opacity: var(--route-o); }
  .cinematic-progress-rail { right: 10px; top: 44%; gap: 13px; }
  .cinematic-progress-rail span::before { width: 9px; height: 9px; }
  .cinematic-progress-rail::before,
  .cinematic-progress-rail::after { left: 4px; }
  .cinematic-light { width: 80vw; height: 80vw; right: -25vw; bottom: -19vw; }
  .cinematic-hero + .trust-strip { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-hero { height: auto; min-height: 760px; overflow: hidden; }
  .cinematic-stage { position: relative; min-height: 760px; height: auto; }
  .cinematic-bg-primary { inset: 0; width: 100%; height: 100%; transform: none; opacity: 1; }
  .cinematic-bg-arrival,
  .cinematic-route,
  .cinematic-hud,
  .cinematic-story,
  .cinematic-progress-rail,
  .cinematic-speed-lines,
  .cinematic-mini-progress { display: none !important; }
  .cinematic-copy { position: relative; top: auto; transform: none; opacity: 1; padding-top: 190px; padding-bottom: 110px; }
  .cinematic-reveal { opacity: 1; transform: none; }
  .service-card.cinematic-tilt { transform: none !important; }
}