/* =========================================================
   ХОВАНКА — clean monochrome + single spotlight effect
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0908;
  --bg-2:#111010;
  --ink:#e6e2d5;
  --ink-2:#b6b1a2;
  --mute:#7a746a;
  --line:#23211e;
  --line-2:#33302c;
  --pad-x:clamp(22px, 3.5vw, 64px);

  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* spotlight position (updated from JS) */
  --x: 50vw;
  --y: 50vh;
}
html,body{background:var(--bg);color:var(--ink);overflow-x:hidden}
body{
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--ink);color:#000}

/* film grain */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:9000;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.65 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:260px 260px;
  animation:gr 1.3s steps(4) infinite}
@keyframes gr{0%{transform:translate(0,0)}33%{transform:translate(-5%,3%)}66%{transform:translate(4%,-4%)}100%{transform:translate(0,0)}}

/* =========================================================
   THE ONE EFFECT — FLASHLIGHT
   Two layers stacked at the same cursor position:
   1. .spot      — wide dark mask (multiply): keeps the edge weak
                   and drops the room back into darkness
   Both ride the same --x / --y CSS vars updated from JS.
   ========================================================= */
/* SPOTLIGHT
   Single matte mask: no bloom, only a soft reveal zone. */
.spot{
  position:fixed;inset:0;pointer-events:none;
  z-index:8000;will-change:background;
  mix-blend-mode:multiply;
  background:radial-gradient(
    circle 620px at var(--x) var(--y),
    rgba(236,232,220,.80)  0%,
    rgba(214,209,196,.76) 40%,
    rgba(200,194,180,.74) 56%,
    rgba(252,248,236,.92) 60.5%,
    rgba(120,114,104,.80) 63%,
    rgba(34,32,28,.93)    67%,
    rgba(26,24,21,.94)    80%,
    rgba(9,8,7,.98)      100%
  );
}
@media (hover:none){
  /* touch devices — disable spotlight, content fully visible */
  .spot{display:none}
}

/* =========================================================
   TOP BAR
   ========================================================= */
.top{position:fixed;top:0;left:0;right:0;z-index:9100;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:22px var(--pad-x);
  background:linear-gradient(180deg, rgba(10,9,8,.74), rgba(10,9,8,0));
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;font-size:14px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.top__brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:400;font-size:14px}
.top__brand img{width:24px;height:24px;border-radius:50%;mix-blend-mode:screen;
  filter:grayscale(1) brightness(1.5) contrast(1.1)}
.top__nav{display:flex;gap:24px}
.top__nav a:hover{color:var(--ink)}
.top__loc{color:var(--ink-2)}
@media(max-width:760px){.top__nav,.top__loc{display:none}}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:112px var(--pad-x) 84px;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch;align-items:center;overflow:hidden}

.hero__tl,.hero__tr,.hero__bl,.hero__br{position:absolute;font-family:var(--mono);font-size:13px;
  color:var(--ink-2);text-transform:lowercase;letter-spacing:.04em;display:flex;gap:14px;align-items:center}
.hero__tl{top:88px;left:var(--pad-x);flex-direction:column;align-items:flex-start;gap:6px}
.hero__tr{top:88px;right:var(--pad-x);flex-direction:column;align-items:flex-end;gap:6px;color:var(--ink)}
.hero__bl{bottom:40px;left:var(--pad-x);flex-direction:column;align-items:flex-start;gap:6px}
.hero__bl-l{color:var(--mute)}
.hero__bl-cd{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.hero__br{bottom:40px;right:var(--pad-x);color:var(--mute);animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(8px)}}

.hero__stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:clamp(18px,2.2vw,30px);
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding-top:clamp(14px,4vh,42px);
}
.hero__stage::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--line-2);
}
.hero__copy{position:relative;z-index:2}
.title{
  margin:0;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:clamp(72px, 15vw, 210px);
  line-height:.82;
  letter-spacing:-.075em;
  color:var(--ink);
  text-transform:uppercase;
  user-select:none;
}
.title__sub{
  margin:clamp(12px,1.6vw,20px) 0 0;
  max-width:none;
  padding:0;
  border:0;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:clamp(14px,1.35vw,19px);
  color:var(--ink-2);
  line-height:1.2;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.hero__media{
  position:relative;
  z-index:1;
  justify-self:start;
  width:min(58vw,760px);
  aspect-ratio:16 / 9;
  margin-top:clamp(10px,1.8vw,22px);
  margin-left:clamp(18px,11vw,150px);
  overflow:hidden;
  border:0;
  background:transparent;
  transform:rotate(-1.2deg);
}
.hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,9,8,.04), rgba(10,9,8,.2)),
    repeating-linear-gradient(0deg, rgba(230,226,213,.06) 0 1px, transparent 1px 8px);
  opacity:.34;
}
.hero__media iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  min-height:100%;
  transform:translate(-50%,-50%);
  border:0;
  filter:grayscale(1) contrast(1.12) brightness(.7);
  pointer-events:none;
}

@media(max-width:760px){
  .hero__tl,.hero__tr{font-size:11px}
  .hero__bl-cd{font-size:13px}
  .hero{padding:118px var(--pad-x) 104px}
  .hero__stage{
    grid-template-columns:1fr;
    gap:22px;
    padding-top:34px;
  }
  .hero__stage::before{top:0}
  .title{
    font-size:clamp(68px,22vw,122px);
  }
  .title__sub{
    width:min(100%, 340px);
  }
  .hero__media{
    width:min(92vw,520px);
    margin-left:0;
    transform:rotate(-.8deg) translateX(10px);
  }
  .hero__media iframe{
    width:100%;
    height:100%;
  }
}

/* =========================================================
   STRIP
   ========================================================= */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding:22px var(--pad-x);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:14px;color:var(--ink-2);text-transform:lowercase;letter-spacing:.02em}
.strip i{color:var(--mute);font-style:normal}

/* =========================================================
   SECTION HEADER
   ========================================================= */
.sec{display:flex;align-items:center;gap:24px;padding:0 var(--pad-x);margin-bottom:56px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--mute)}
.sec__no{color:var(--ink);font-weight:500}
.sec__name{color:var(--ink-2)}
.sec::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* =========================================================
   INFO / MANIFESTO
   ========================================================= */
.info{padding:160px 0 120px}
.info__body{padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:start}
.big{
  grid-column:1 / span 7;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;
  font-size:clamp(48px, 6.4vw, 132px);
  line-height:.92;letter-spacing:-.065em;
  min-width:0;
  text-transform:uppercase;color:var(--ink);
}
.big em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.info__side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:20px;padding-top:18px}
.info__side p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:420px}
.phrase{color:var(--ink);text-transform:uppercase}
.kv{display:grid;grid-template-columns:110px 1fr;gap:0;margin-top:16px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:13px;text-transform:lowercase;letter-spacing:.02em}
.kv dt,.kv dd{padding:12px 0;border-bottom:1px solid var(--line)}
.kv dt{color:var(--mute)}
.kv dd{color:var(--ink)}
@media(max-width:880px){
  .big{grid-column:1/-1}
  .info__side{grid-column:1/-1}
  .info{padding:80px 0 60px}
}

/* =========================================================
   BREAK — single phrase, no shader, no photo
   ========================================================= */
.break{padding:140px var(--pad-x);text-align:center;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:center;gap:32px}
.break__h{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;
  font-size:clamp(56px, 11vw, 180px);
  line-height:.9;letter-spacing:-.065em;color:var(--ink);text-transform:uppercase}
.break__meta{font-family:var(--mono);font-size:13px;color:var(--mute);text-transform:lowercase;letter-spacing:.04em}

/* =========================================================
   FIELD VIDEO
   ========================================================= */
.field{padding:140px 0;border-bottom:1px solid var(--line-2)}
.field__grid{
  display:grid;
  grid-template-columns:minmax(0, .74fr) minmax(220px, .26fr);
  gap:clamp(18px,3vw,44px);
  align-items:end;
  padding:0 var(--pad-x);
}
.field__media{
  position:relative;
  grid-column:1;
  justify-self:end;
  width:min(100%, 620px);
  overflow:visible;
  border:0;
  background:transparent;
  transform:rotate(1.4deg) translateX(clamp(0px,3vw,36px));
}
.field__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,8,.04), rgba(10,9,8,.18));
}
.field__media video{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:grayscale(1) contrast(1.08) brightness(.78);
}
@media(max-width:880px){
  .field{padding:80px 0}
  .field__grid{grid-template-columns:1fr}
  .field__media{justify-self:start;width:min(92vw,620px);transform:rotate(1deg)}
}

/* =========================================================
   LINEUP
   ========================================================= */
.lineup{padding:140px 0 100px}
.names{list-style:none}
.names li{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:24px;
  padding:28px var(--pad-x);border-top:1px solid var(--line-2)}
.names li:last-child{border-bottom:1px solid var(--line-2)}
.names li:hover{background:var(--bg-2)}
.names__idx{font-family:var(--mono);font-size:13px;color:var(--mute);text-transform:lowercase}
.names__n{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;
  font-size:clamp(36px,6.4vw,84px);
  line-height:1;letter-spacing:-.055em;color:var(--ink);text-transform:uppercase;
}
.names__role{font-family:var(--mono);font-size:13px;color:var(--mute);text-transform:lowercase;letter-spacing:.06em;
  text-align:right;white-space:nowrap}
@media(max-width:760px){
  .names li{grid-template-columns:40px 1fr;gap:14px;padding:22px var(--pad-x)}
  .names__role{grid-column:1/-1;text-align:left;padding-left:54px}
}

/* =========================================================
   TICKETS
   ========================================================= */
.tickets{padding:140px 0 120px}
.tix{width:calc(100% - var(--pad-x)*2);margin:0 var(--pad-x);border-collapse:collapse;
  font-family:var(--font);font-size:18px}
.tix th{font-family:var(--mono);font-weight:500;font-size:13px;text-transform:lowercase;
  letter-spacing:.06em;color:var(--mute);text-align:left;padding:16px 0;border-bottom:1px solid var(--line-2)}
.tix td{padding:28px 0;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
.tix td:nth-child(1){font-weight:500;text-transform:lowercase}
.tix td:nth-child(2){font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums;width:18%;letter-spacing:.01em}
.tix td:nth-child(3){font-family:var(--mono);font-size:14px;color:var(--ink-2);text-transform:lowercase;letter-spacing:.04em;width:22%}
.tix td:nth-child(4){text-align:right;width:16%}
.tix td a{font-family:var(--mono);font-size:14px;color:var(--ink);text-transform:lowercase;letter-spacing:.06em;
  border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s, color .2s}
.tix td a:hover{border-color:var(--ink)}
.tix--dead td{color:var(--mute)}
.tix--dead td s{text-decoration:line-through;text-decoration-thickness:1px}
.tix--hot td:nth-child(3)::before{content:"●";color:var(--ink);margin-right:8px;font-size:9px;vertical-align:middle}

@media(max-width:760px){
  .tix th:nth-child(3),.tix td:nth-child(3){display:none}
  .tix td:nth-child(2){width:32%}
}

/* =========================================================
   RULES
   ========================================================= */
.rules{padding:80px 0 140px}
.rules__list{list-style:none;padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(12,1fr);gap:32px 24px}
.rules__list li{grid-column:span 3;padding:28px 0 0;border-top:1px solid var(--line-2)}
.rules__no{font-family:var(--mono);font-size:13px;color:var(--mute);letter-spacing:.06em;display:block;margin-bottom:40px}
.rules__list h4{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;font-size:26px;text-transform:uppercase;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:14px}
.rules__list p{font-size:16px;color:var(--ink-2);line-height:1.55;max-width:260px}
@media(max-width:880px){.rules__list li{grid-column:span 6}}
@media(max-width:540px){.rules__list li{grid-column:span 12}}

/* =========================================================
   CTA
   ========================================================= */
.cta{padding:180px var(--pad-x);text-align:center;border-top:1px solid var(--line-2);position:relative}
.cta__h{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;
  font-size:clamp(96px, 19vw, 280px);
  line-height:.85;letter-spacing:-.065em;color:var(--ink);
  text-transform:uppercase;margin-bottom:64px;
}
.cta__btn{display:inline-block;border:1px solid var(--ink);color:var(--ink);
  font-family:var(--mono);font-size:14px;text-transform:lowercase;letter-spacing:.08em;
  padding:20px 38px;transition:background .2s, color .2s}
.cta__btn:hover{background:var(--ink);color:#000}
.cta__meta{margin-top:56px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  font-family:var(--mono);font-size:13px;color:var(--mute);text-transform:lowercase;letter-spacing:.04em}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:28px var(--pad-x);border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:13px;color:var(--mute);text-transform:lowercase;letter-spacing:.04em}
.foot__col{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot__col img{width:20px;height:20px;border-radius:50%}
.foot__col--end{justify-content:flex-end}
.foot__nav{gap:22px}
.foot__nav a:hover{color:var(--ink)}

/* =========================================================
   MOBILE — ліхтарик завжди посередині екрана;
   світловий риг (промені + стробо в ритмі техно 130 BPM)
   лише на самому початку і в самому кінці сторінки
   ========================================================= */
body{position:relative}
.rig{display:none;position:absolute;left:0;width:100%;pointer-events:none;z-index:9150;mix-blend-mode:screen}
.rig--top{top:0;height:120px;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.rig--bottom{bottom:0;height:120px;
  -webkit-mask-image:linear-gradient(0deg,#000 30%,transparent);mask-image:linear-gradient(0deg,#000 30%,transparent)}
@media (hover:none), (max-width:760px){
  .rig{display:block}
  .spot{
    display:block;
    background:radial-gradient(
      circle min(78vw,420px) at 50% 50%,
    rgba(236,232,220,.80)  0%,
    rgba(214,209,196,.76) 40%,
    rgba(200,194,180,.74) 56%,
    rgba(252,248,236,.92) 60.5%,
    rgba(120,114,104,.80) 63%,
    rgba(34,32,28,.93)    67%,
    rgba(26,24,21,.94)    80%,
    rgba(9,8,7,.98)      100%
  );
  }
}

/* =========================================================
   ПІДКАЗКИ В ТЕМРЯВІ — деталь поза світлом зрідка блимає,
   як стара лампа (hints.js додає .is-flicker)
   ========================================================= */
.is-flicker{position:relative;z-index:8500;animation:oldlamp 1.1s linear both}
@keyframes oldlamp{
  0%  {color:inherit;text-shadow:none}
  6%  {color:#ffe2b0;text-shadow:0 0 6px rgba(255,190,110,.9),0 0 18px rgba(255,150,60,.45)}
  9%  {color:inherit;text-shadow:none}
  22% {color:inherit;text-shadow:none}
  25% {color:#ffdca4;text-shadow:0 0 5px rgba(255,190,110,.8),0 0 14px rgba(255,150,60,.35)}
  31% {color:#fff1d6;text-shadow:0 0 8px rgba(255,200,120,1),0 0 22px rgba(255,150,60,.5)}
  34% {color:inherit;text-shadow:none}
  38% {color:#ffd79a;text-shadow:0 0 4px rgba(255,180,100,.6)}
  52% {color:#c9b38e;text-shadow:0 0 3px rgba(255,170,90,.3)}
  70%,100%{color:inherit;text-shadow:none}
}

/* телефон: великі слова не мають вилазити за край */
@media (max-width:760px){
  .title{font-size:clamp(56px,19vw,122px)}
  .cta__h{font-size:clamp(48px,16vw,96px);margin-bottom:44px}
  .break__h{font-size:clamp(44px,13vw,96px)}
}

/* маніфест: на середніх екранах заголовок і текст — одне під одним, щоб «ВПЕРШЕ» не налізало на колонку */
@media (max-width:1180px){
  .big{grid-column:1/-1;font-size:clamp(48px, 9vw, 120px)}
  .info__side{grid-column:1/-1;max-width:640px}
}

/* =========================================================
   ЛАЙНАП — при наведенні на діджея правіше від центру
   зʼявляється невелике ЧБ відео (lineup.js)
   ========================================================= */
.lineup{position:relative}
.dj-clip{--rot:0deg;--k:1.2;position:absolute;left:56%;top:0;z-index:8500;pointer-events:none;
  width:clamp(200px,18vw,320px);aspect-ratio:16/9;overflow:hidden;background:#000;
  opacity:0;transform:translateY(-50%) rotate(var(--rot)) scale(calc(var(--k) * .94));
  transition:opacity .16s ease, transform .22s cubic-bezier(.2,.7,.2,1)}
.dj-clip.is-on{opacity:1;transform:translateY(-50%) rotate(var(--rot)) scale(var(--k))}
.dj-clip video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.15) brightness(.85)}
@media (hover:none), (max-width:760px){.dj-clip{display:none}}
@media (prefers-reduced-motion:reduce){.dj-clip{transition:opacity .01s}}

/* лайнап у версії з глюками: при наведенні — квадратне фото обличчя діджея на всю висоту його рядка */
.names li{position:relative}
.dj-photo{position:absolute;top:0;bottom:0;left:56%;aspect-ratio:1/1;height:100%;width:auto;
  object-fit:cover;z-index:8500;pointer-events:none;opacity:0;filter:grayscale(1) contrast(1.1);
  transition:opacity .14s ease}
.names li:hover .dj-photo{opacity:1}
@media (hover:none), (max-width:760px){.dj-photo{display:none}}