/* =====================================================================
   NINJA FILM — štýly
   Paleta vychádza z loga (elektrická modrá) a plagátov (ružová, žltá).
   ===================================================================== */

:root{
  --ninja:   #2E29C4;   /* modrá z loga */
  --pink:    #FF4FA3;   /* ružová z plagátu Maturanti */
  --yellow:  #F2E84B;   /* žltá z titulku Lover, Not a Fighter */
  --paper:   #F4F3FE;   /* svetlý fialkastý papier */
  --sky:     #DCDAF7;   /* svetlá periwinkle na podfarbenie */
  --ink:     #16143A;   /* atramentová tmavá */
  --display: "Unbounded", system-ui, sans-serif;
  --body:    "Space Grotesk", system-ui, sans-serif;
  --pixel:   "Silkscreen", "Courier New", monospace;
  --pad: clamp(20px, 5vw, 72px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.pixel{ font-family:var(--pixel); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow{ font-family:var(--pixel); font-size:.75rem; color:var(--ninja); margin-bottom:1rem; text-transform:uppercase; letter-spacing:.1em; }

/* ------------------------------------------------ hlavička */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem var(--pad);
  background:color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ink);
}
.topbar__logo img{ height:34px; width:auto; }
.topbar__nav{ display:flex; gap:1.6rem; }
.topbar__nav a{
  font-weight:700; text-decoration:none; font-size:.95rem;
  border-bottom:3px solid transparent; padding-bottom:2px;
}
.topbar__nav a:hover{ border-color:var(--pink); }
.topbar__right{ display:flex; align-items:center; gap:.8rem; }
.lang{
  font-family:var(--pixel); font-size:.8rem; cursor:pointer;
  background:var(--ink); color:var(--paper); border:0;
  padding:.45rem .7rem; border-radius:0;
}
.lang [data-lang-opt].is-active{ color:var(--yellow); }
.lang__sep{ opacity:.5; margin:0 .25em; }
.burger{ display:none; background:none; border:0; cursor:pointer; }
.burger span{ display:block; width:24px; height:3px; background:var(--ink); margin:5px 0; }

/* ------------------------------------------------ hero */
.hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:center;
  padding:clamp(2.5rem,7vh,5.5rem) var(--pad);
}
.hero__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem, 4.6vw, 3.6rem);
  line-height:1.12; letter-spacing:-.01em;
  margin-bottom:1.6rem;
}
.hero__title .hl{ color:var(--ninja); }
.btn{
  display:inline-block; font-weight:700; text-decoration:none;
  background:var(--pink); color:var(--ink);
  border:3px solid var(--ink); padding:.7rem 1.4rem;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }

.hero__film{ text-decoration:none; display:block; }
.hero__film-frame{ border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ninja); }
.hero__film-caption{ display:block; margin-top:1rem; }
.hero__film-caption em{ font-style:normal; color:var(--pink); display:block; margin-bottom:.3rem; }
.hero__film-caption strong{ font-family:var(--display); font-weight:800; font-size:1.15rem; display:block; }
.hero__film-caption span{ font-size:.9rem; opacity:.8; }

/* „slice" — motív rozsekaného loga: obrázok zo 4 vodorovných pásov */
.slice-img{ display:block; overflow:hidden; aspect-ratio:16/9; position:relative; background:var(--sky); }
.slice-img i{
  display:block; height:25%; width:100%;
  background-size:100% 400%;   /* presné nadviazanie pásov pre ľubovoľný obrázok */
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.slice-img i:nth-child(1){ background-position:center 0%; }
.slice-img i:nth-child(2){ background-position:center 33.33%; }
.slice-img i:nth-child(3){ background-position:center 66.66%; }
.slice-img i:nth-child(4){ background-position:center 100%; }
a:hover .slice-img i:nth-child(1), .slice-img:hover i:nth-child(1){ transform:translateX(-3.5%); }
a:hover .slice-img i:nth-child(2), .slice-img:hover i:nth-child(2){ transform:translateX(2.5%); }
a:hover .slice-img i:nth-child(3), .slice-img:hover i:nth-child(3){ transform:translateX(-2%); }
a:hover .slice-img i:nth-child(4), .slice-img:hover i:nth-child(4){ transform:translateX(3%); }

/* ------------------------------------------------ bežiaci pás */
.ticker{
  background:var(--ninja); color:var(--paper);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  overflow:hidden; white-space:nowrap; padding:.55rem 0;
}
.ticker__track{
  display:inline-block; font-family:var(--pixel);
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  animation:ticker 28s linear infinite;
}
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ------------------------------------------------ sekcie */
.section{ padding:clamp(3rem,8vh,5.5rem) var(--pad); }
.section--tint{ background:var(--sky); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.section__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.7rem);
  margin-bottom:.6rem; position:relative; display:inline-block;
}
.section__title::after{
  content:""; display:block; height:.35em; margin-top:.18em;
  background:repeating-linear-gradient(90deg, var(--pink) 0 14px, transparent 14px 20px, var(--ninja) 20px 34px, transparent 34px 40px);
}
.section__intro{ margin-bottom:2.2rem; max-width:46ch; }

/* ------------------------------------------------ o nás */
.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:2rem; align-items:start; }
.about__photo{ border:3px solid var(--ink); box-shadow:8px 8px 0 var(--pink); aspect-ratio:4/3; }
.about__photo figcaption{ position:absolute; left:.6rem; bottom:.6rem; background:var(--ink); color:var(--yellow); padding:.3rem .55rem; }
.about__lead{ font-size:1.18rem; font-weight:700; margin-bottom:1rem; }
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.6rem; }
.team__card{ border:3px solid var(--ink); background:#fff; padding:1.2rem; box-shadow:5px 5px 0 var(--ninja); }
.team__card:nth-child(2){ box-shadow:5px 5px 0 var(--pink); }
.team__card:nth-child(3){ box-shadow:5px 5px 0 var(--yellow); }
.team__card h3{ font-family:var(--display); font-size:1.02rem; font-weight:800; }
.team__card .pixel{ color:var(--ninja); margin:.25rem 0 .6rem; display:block; }
.team__card p{ font-size:.92rem; }

/* ------------------------------------------------ projekty */
.projects{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.4rem; }
.project{
  text-decoration:none; background:#fff; border:3px solid var(--ink);
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.project:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink); }
.project--featured{ grid-column:span 2; }
.project__media{ aspect-ratio:3/2; }
.project--poster .project__media{ aspect-ratio:707/1000; } /* pomer plagátu */
.project__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.project__status{ align-self:flex-start; padding:.22rem .5rem; border:2px solid var(--ink); }
.project__status--done{ background:var(--yellow); }
.project__status--post{ background:var(--pink); color:#fff; }
.project__status--dev{ background:var(--sky); }
.project__status--copro{ background:#fff; }
.project__title{ font-family:var(--display); font-weight:800; font-size:1.05rem; line-height:1.25; }
.project__type{ font-size:.85rem; color:var(--ninja); font-weight:500; }
.project__blurb{ font-size:.9rem; opacity:.85; }

/* ------------------------------------------------ služby */
.services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem; margin-top:1.6rem; }
.service{ border:3px solid var(--ink); background:#fff; padding:1.3rem; position:relative; }
.service::before{
  content:""; position:absolute; inset:auto auto -3px -3px;
  width:34px; height:10px; background:var(--pink);
  border:3px solid var(--ink);
}
.service:nth-child(2n)::before{ background:var(--ninja); }
.service:nth-child(3n)::before{ background:var(--yellow); }
.service h3{ font-family:var(--display); font-size:1rem; font-weight:800; margin-bottom:.5rem; }
.service p{ font-size:.92rem; }

/* ------------------------------------------------ noviny */
.news{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem; }
.news__card{
  text-decoration:none; border:3px solid var(--ink); background:#fff;
  padding:1.2rem; display:flex; flex-direction:column; gap:.55rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.news__card:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--pink); }
.news__date{ color:var(--ninja); }
.news__card h3{ font-family:var(--display); font-size:.98rem; font-weight:800; line-height:1.3; }
.news__card p{ font-size:.9rem; opacity:.85; flex:1; }
.news__more{ font-weight:700; color:var(--pink); }

/* ------------------------------------------------ kontakt + pätička */
.section--contact{ background:var(--ninja); color:var(--paper); border-top:3px solid var(--ink); }
.section__title--light{ color:#fff; }
.contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; margin-top:2rem; }
.contact__label{ color:var(--yellow); margin-bottom:.7rem; }
.contact ul{ list-style:none; }
.contact li{ margin-bottom:.35rem; }
.contact a{ color:#fff; text-decoration-color:var(--pink); text-decoration-thickness:2px; }
.contact a:hover{ color:var(--yellow); }
.contact__phone{ margin-top:.7rem; }
.contact__address{ white-space:pre-line; }
.footer{ margin-top:3.5rem; padding-top:1.6rem; border-top:2px solid rgba(255,255,255,.3); display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.footer__logo{ height:30px; width:auto; }
.footer p{ font-size:.85rem; opacity:.85; }

/* ------------------------------------------------ detail projektu */
.detail[hidden]{ display:none; }
.detail{
  position:fixed; inset:0; z-index:90;
  background:rgba(22,20,58,.55); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:4vh var(--pad);
}
.detail__panel{
  background:var(--paper); border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--pink);
  max-width:860px; width:100%; margin-bottom:4vh;
}
.detail__back{
  font-family:var(--pixel); font-size:.78rem; cursor:pointer;
  background:var(--ink); color:var(--paper); border:0;
  padding:.7rem 1rem; width:100%; text-align:left;
}
.detail__back:hover{ color:var(--yellow); }
.detail__media img{ width:100%; max-height:420px; object-fit:cover; border-bottom:3px solid var(--ink); }
.detail__body{ padding:1.6rem clamp(1.2rem,4vw,2.4rem) 2.2rem; }
.detail__body > .pixel{ color:var(--pink); }
.detail__title{ font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,3vw,1.9rem); margin:.4rem 0 1.1rem; line-height:1.2; }
.detail__meta{ display:flex; gap:2rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.detail__meta dt{ font-family:var(--pixel); font-size:.68rem; text-transform:uppercase; color:var(--ninja); }
.detail__meta dd{ font-weight:700; }
.detail__text{ max-width:62ch; }

/* ------------------------------------------------ glitrový kurzor */
#sparkles{ position:fixed; inset:0; pointer-events:none; z-index:200; }

/* ------------------------------------------------ prístupnosť & mobil */
:focus-visible{ outline:3px solid var(--pink); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  #sparkles{ display:none; }
}

@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .team{ grid-template-columns:1fr; }
  .project--featured{ grid-column:auto; }
  .topbar__nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--paper);
    border-bottom:3px solid var(--ink);
  }
  .topbar__nav.is-open{ display:flex; }
  .topbar__nav a{ padding:1rem var(--pad); border-bottom:1px solid var(--sky); }
  .burger{ display:block; }
}