/* ══════════════════════════════════════════════════
   TRAP HOUSE — дневные вечеринки 14+, Оренбург
   Тёмная база + кислотный лайм с неоновых браслетов
   ══════════════════════════════════════════════════ */

:root{
  --bg:      #0A0A0B;
  --bg-2:    #121116;
  --bg-3:    #1A1820;
  --ink:     #F4F4F1;
  --mut:     #85858E;
  --lime:    #CCFF00;
  --lime-d:  #A8D400;
  --viol:    #B14BF4;
  --org:     #FF6A1A;
  --line:    rgba(244,244,241,.14);

  --disp: "Unbounded", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --body: "Golos Text", ui-sans-serif, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(18px, 5vw, 72px);
  --dock-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.05vw + 12px,18px);
  line-height:1.55;
  overflow-x:hidden;
  padding-bottom:var(--dock-h);
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

::selection{ background:var(--lime); color:#000; }

/* ── ЗЕРНО ────────────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:.24; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── ТИПОГРАФИКА ──────────────────────────────── */
.h-big{
  font-family:var(--disp);
  font-weight:900;
  font-size:clamp(44px, 11vw, 150px);
  line-height:.86;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0 0 .35em;
}
.outline{
  color:transparent;
  -webkit-text-stroke:clamp(2px,.3vw,5px) var(--lime);
  paint-order:stroke fill;
}
.dot{ color:var(--lime); }

.sec-num{
  font-family:var(--disp);
  font-size:12px; font-weight:700; letter-spacing:.22em;
  color:var(--mut); text-transform:uppercase;
  margin:0 0 clamp(20px,4vw,44px);
  display:flex; align-items:center; gap:14px;
}
.sec-num::after{ content:""; flex:1; height:1px; background:var(--line); }

section{ padding:clamp(64px,11vw,150px) var(--pad); position:relative; }

/* ── КНОПКИ ───────────────────────────────────── */
.btn{
  --bc:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:16px 26px;
  font-family:var(--disp); font-weight:700; font-size:13px;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  border:2px solid var(--bc); border-radius:0; background:transparent; color:var(--bc);
  cursor:pointer; white-space:nowrap;
  transition:background .18s, color .18s, transform .12s, box-shadow .18s;
}
.btn--lime{ --bc:var(--lime); background:var(--lime); color:#000; }
.btn--lime:hover{ box-shadow:0 0 0 4px rgba(204,255,0,.22), 0 0 34px rgba(204,255,0,.4); transform:translateY(-2px); }
.btn--ghost:hover{ background:var(--ink); color:#000; transform:translateY(-2px); }
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:12px 18px; font-size:11px; }
.btn--wide{ width:100%; padding:22px; font-size:16px; }

/* ══ АФИША СВЕРХУ ═════════════════════════════ */
.announce{
  position:sticky; top:0; z-index:90;
  background:var(--lime); color:#000;
  font-family:var(--disp); font-weight:700;
}
.announce__in{
  display:flex; align-items:center; gap:12px;
  padding:11px var(--pad); font-size:13px; letter-spacing:.05em;
}
.announce__dot{
  width:9px; height:9px; border-radius:50%; background:#000;
  animation:pulse 1.4s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.15} }
.announce__txt{ flex:1; text-transform:uppercase; }
.announce__cta{
  background:#000; color:var(--lime); padding:8px 14px;
  text-decoration:none; font-size:12px; white-space:nowrap;
}

/* ══ HERO ═════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad) var(--pad) calc(var(--pad) + 44px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img,.hero__video{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.12) saturate(.85) brightness(.72);
}
.hero__video{ position:absolute; inset:0; opacity:0; transition:opacity .6s; }
.hero__video.on{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 20%, rgba(10,10,11,.55) 75%),
    linear-gradient(180deg, rgba(10,10,11,.7) 0%, transparent 28%, rgba(10,10,11,.35) 55%, var(--bg) 97%);
}

.hero__top{
  position:absolute; z-index:3;
  display:flex; gap:10px; align-items:center;
  top:var(--pad); left:var(--pad); right:var(--pad);
}
.tag{
  font-family:var(--disp); font-size:11px; font-weight:700;
  letter-spacing:.16em; padding:7px 12px;
  border:1px solid var(--line); background:rgba(10,10,11,.5);
  backdrop-filter:blur(6px);
}
.tag--live{ border-color:var(--lime); color:var(--lime); margin-left:auto; }

.hero__body{ position:relative; z-index:2; }

.wordmark{ margin:0 0 22px; display:flex; flex-direction:column; }
.wordmark__l{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(58px, 19vw, 260px);
  line-height:.78; letter-spacing:-.045em; text-transform:uppercase;
  mix-blend-mode:difference;
  animation:rise .9s cubic-bezier(.2,.9,.2,1) both; animation-delay:var(--d);
}
.wordmark__l--alt{
  color:transparent; -webkit-text-stroke:clamp(1.5px,.4vw,4px) var(--lime);
  mix-blend-mode:normal;
}
@keyframes rise{ from{ opacity:0; transform:translateY(.28em) } to{ opacity:1; transform:none } }

.hero__rule{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--disp); font-size:clamp(11px,2.4vw,15px); font-weight:700;
  letter-spacing:.1em; margin:0 0 28px;
  animation:rise .8s cubic-bezier(.2,.9,.2,1) both; animation-delay:var(--d);
}
.hero__rule b{ font-weight:700; }
.hero__rule i{ color:var(--lime); font-style:normal; }

.hero__acts{
  display:flex; flex-wrap:wrap; gap:12px;
  animation:rise .8s cubic-bezier(.2,.9,.2,1) both; animation-delay:var(--d);
}

.hero__age{
  position:absolute; z-index:1; right:calc(var(--pad) - .05em); top:9vh;
  display:flex; align-items:flex-start;
  font-family:var(--disp); font-weight:900; line-height:.78;
  font-size:clamp(96px,27vw,210px); letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px rgba(244,244,241,.3);
  pointer-events:none; user-select:none;
}
.hero__age small{ font-size:.4em; -webkit-text-stroke-color:var(--lime); }

.hero__scroll{
  position:absolute; z-index:2; left:50%; bottom:12px; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid var(--line); border-radius:14px;
  display:none;
}
@media (min-width:900px){ .hero__scroll{ display:block; } }
.hero__scroll span{
  position:absolute; left:50%; top:9px; width:3px; height:7px; border-radius:2px;
  background:var(--lime); transform:translateX(-50%);
  animation:sc 1.6s ease-in-out infinite;
}
@keyframes sc{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,16px)} }

/* ══ БЕГУЩАЯ СТРОКА ═══════════════════════════ */
.ticker{
  background:var(--lime); color:#000; overflow:hidden;
  transform:rotate(-1.4deg) scale(1.04); margin:10px 0 -10px;
  border-block:2px solid #000;
}
.ticker__track{ display:flex; width:max-content; animation:slide 26s linear infinite; }
.ticker__track span{
  font-family:var(--disp); font-weight:900; font-size:clamp(20px,4.4vw,42px);
  letter-spacing:-.01em; padding:12px 0; white-space:nowrap; text-transform:uppercase;
}
.ticker__track i{ color:var(--bg); font-style:normal; padding:0 .5em; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ══ МАНИФЕСТ ═════════════════════════════════ */
.manifest{ background:var(--bg); }
.manifest__txt{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(21px,3.5vw,46px); line-height:1.24; letter-spacing:-.02em;
  max-width:20ch; margin:0 0 clamp(48px,8vw,96px);
}
.manifest__txt mark{ background:none; color:var(--lime); }

.facts{ display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.fact{ border-top:2px solid var(--lime); padding-top:20px; }
.fact__n{
  font-family:var(--disp); font-weight:900; line-height:.85;
  font-size:clamp(56px,9vw,104px); letter-spacing:-.05em; color:var(--lime);
}
.fact__n small{ font-size:.42em; color:var(--ink); }
.fact h3{ font-family:var(--disp); font-size:13px; letter-spacing:.14em; margin:14px 0 8px; }
.fact p{ margin:0; color:var(--mut); font-size:15px; }

/* ══ ПРОГРАММА ════════════════════════════════ */
.program{ background:var(--bg); }
.prog{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.prog li{
  display:grid; gap:6px 32px; grid-template-columns:1fr;
  padding:clamp(20px,3vw,30px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .25s, background .25s;
}
.prog li:hover{ padding-left:14px; background:linear-gradient(90deg,rgba(204,255,0,.07),transparent 60%); }
.prog b{
  font-family:var(--disp); font-weight:900; font-size:clamp(19px,3.2vw,34px);
  letter-spacing:-.02em; text-transform:uppercase; line-height:1.05;
}
.prog li:hover b{ color:var(--lime); }
.prog span{ color:var(--mut); font-size:15px; max-width:52ch; }
@media (min-width:800px){ .prog li{ grid-template-columns:1.1fr 1fr; align-items:baseline; } }

/* ══ ФОТО ═════════════════════════════════════ */
.gallery{ background:var(--bg-2); padding-inline:0; }
.gallery .sec-num,.gallery__hint{ padding-inline:var(--pad); }
.gallery__hint{
  font-family:var(--disp); font-size:11px; letter-spacing:.16em;
  color:var(--lime); margin:-24px 0 20px;
}
.strip{
  display:flex; gap:14px; overflow-x:auto; padding:0 var(--pad) 20px;
  scroll-snap-type:x mandatory; cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--lime) transparent;
}
.strip.drag{ cursor:grabbing; scroll-snap-type:none; }
.strip::-webkit-scrollbar{ height:4px; }
.strip::-webkit-scrollbar-thumb{ background:var(--lime); }
.shot{
  position:relative; margin:0; flex:0 0 auto;
  width:clamp(230px,66vw,420px); scroll-snap-align:center;
  transform:rotate(-.8deg); transition:transform .3s;
}
.shot:nth-child(even){ transform:rotate(1deg) translateY(12px); }
.shot:hover{ transform:rotate(0) scale(1.015); }
.shot img{
  width:100%; height:clamp(280px,44vw,440px); object-fit:cover;
  filter:contrast(1.08) saturate(.92);
}
.shot--tall img{ height:clamp(360px,58vw,560px); }
.shot figcaption{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--disp); font-size:10px; font-weight:700; letter-spacing:.14em;
  background:var(--lime); color:#000; padding:5px 9px;
}

/* ══ ВИДЕО ════════════════════════════════════ */
.videos{ background:var(--bg-2); }
.reels{ display:flex; gap:14px; overflow-x:auto; padding-bottom:16px; scroll-snap-type:x mandatory; }
.reel{
  position:relative; flex:0 0 auto; width:clamp(190px,52vw,280px); aspect-ratio:9/16;
  background:var(--bg-3); border:1px solid var(--line); scroll-snap-align:center;
  overflow:hidden; cursor:pointer;
}
.reel video,.reel img{ width:100%; height:100%; object-fit:cover; }
.reel__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6));
  font-family:var(--disp); font-size:12px; letter-spacing:.14em; color:var(--lime);
}
.reel--empty{
  display:grid; place-items:center; text-align:center; padding:20px;
  border-style:dashed; color:var(--mut);
  font-family:var(--disp); font-size:12px; letter-spacing:.12em; line-height:1.7;
}

/* ══ ФЕЙСКОНТРОЛЬ ═════════════════════════════ */
.fc{ background:var(--bg); }
.fc__box{
  border:2px solid var(--line); padding:clamp(26px,6vw,64px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(177,75,244,.16), transparent 60%),
    var(--bg-2);
}
.fc__q{
  font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:clamp(34px,8vw,86px); line-height:.88; letter-spacing:-.04em; margin:0 0 28px;
}
.fc__form{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
.fc__input{
  flex:0 1 180px; background:transparent; border:2px solid var(--ink); color:var(--ink);
  font-family:var(--disp); font-weight:900; font-size:34px; text-align:center;
  padding:8px 14px; min-width:0;
}
.fc__input:focus{ outline:none; border-color:var(--lime); color:var(--lime); }
.fc__input::-webkit-outer-spin-button,.fc__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.fc__input[type=number]{ -moz-appearance:textfield; }

.fc__result{ margin-top:34px; animation:rise .5s cubic-bezier(.2,.9,.2,1) both; }
.band{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  background:var(--lime); color:#000; padding:16px 22px;
  border-radius:999px; box-shadow:0 0 44px rgba(204,255,0,.35);
  font-family:var(--disp); text-transform:uppercase;
}
.band--no{ background:var(--org); box-shadow:0 0 44px rgba(255,106,26,.32); }
.band__brand{ font-weight:900; font-size:13px; letter-spacing:.14em; }
.band__verdict{ font-weight:900; font-size:clamp(17px,3.4vw,26px); letter-spacing:-.01em; margin-left:auto; }
.band__meta{ font-size:11px; letter-spacing:.14em; width:100%; opacity:.65; }
.fc__say{ font-size:17px; color:var(--ink); margin:22px 0 20px; max-width:46ch; }
.fc__acts{ display:flex; flex-wrap:wrap; gap:10px; }

/* ══ БЛИЖАЙШИЕ МЕРОПРИЯТИЯ ════════════════════ */
.upcoming{ background:var(--bg); border-top:1px solid var(--line); }
.noevent p{ color:var(--mut); max-width:46ch; margin:0 0 28px; font-size:17px; }

.event{ border:2px solid var(--lime); padding:clamp(24px,5vw,48px); }
.event__theme{
  font-family:var(--disp); font-size:12px; letter-spacing:.18em; color:var(--lime);
}
.event__date{
  font-family:var(--disp); font-weight:900; font-size:clamp(38px,9vw,96px);
  line-height:.9; letter-spacing:-.04em; margin:10px 0 14px; text-transform:uppercase;
}
.event__where{ font-family:var(--disp); font-size:14px; margin:0 0 6px; }
.event__time{ color:var(--mut); margin:0 0 28px; font-size:15px; }

/* ══ КАК ПОПАСТЬ ══════════════════════════════ */
.tickets{ background:var(--bg-2); }
.price{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:40px; }
.price__card{
  position:relative; border:1px solid var(--line); padding:26px 22px; background:var(--bg);
}
.price__card--hot{ border-color:var(--lime); background:linear-gradient(180deg,rgba(204,255,0,.09),transparent); }
.price__tag{
  position:absolute; top:-1px; right:-1px; background:var(--lime); color:#000;
  font-family:var(--disp); font-size:10px; font-weight:700; letter-spacing:.14em; padding:5px 10px;
}
.price__num{
  display:block; font-family:var(--disp); font-weight:900;
  font-size:clamp(40px,7vw,68px); line-height:1; letter-spacing:-.04em;
}
.price__card--hot .price__num{ color:var(--lime); }
.price__num i{ font-size:.45em; font-style:normal; opacity:.55; }
.price__what{ font-family:var(--disp); font-size:12px; letter-spacing:.12em; margin:12px 0 8px; }
.price__sub{ color:var(--mut); font-size:14px; margin:0; }
.price__note{ margin-top:26px; color:var(--mut); font-size:15px; }
.price__note a{ color:var(--lime); }

/* ══ ГАСТРОЛИ ═════════════════════════════════ */
.tour{ background:var(--bg); }
.tour__lead{ color:var(--mut); max-width:44ch; font-size:17px; margin:0 0 36px; }
.cities{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0 0 44px; padding:0; }
.city{
  font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.12em;
  border:1px solid var(--line); padding:11px 15px; color:var(--mut);
}
.city--done{ border-color:var(--lime); color:var(--lime); }
.city span{ margin-left:6px; }

.tform{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
.tform__input{
  flex:1 1 260px; min-width:0; background:transparent; border:2px solid var(--ink); color:var(--ink);
  font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.08em;
  padding:16px 18px; text-transform:uppercase;
}
.tform__input::placeholder{ color:var(--mut); }
.tform__input:focus{ outline:none; border-color:var(--lime); }
.tform__hint{ flex:1 0 100%; color:var(--mut); font-size:13px; margin:2px 0 0; transition:color .2s; }
.tform__hint.ok{ color:var(--lime); }
.tform__hint.err{ color:var(--org); }
.tform__trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ══ РОДИТЕЛЯМ ════════════════════════════════ */
.parents{ background:var(--bg-2); }
.parents__box{ border-left:3px solid var(--lime); padding-left:clamp(18px,4vw,40px); max-width:66ch; }
.parents__box h2{
  font-family:var(--disp); font-weight:700; font-size:clamp(20px,3.2vw,32px);
  line-height:1.2; letter-spacing:-.02em; margin:0 0 20px;
}
.parents__box p{ color:#C9C9CE; font-size:17px; }
.parents__box b{ color:var(--lime); }
.parents__ps{ font-size:15px !important; color:var(--mut) !important; }
.parents__ps a{ color:var(--lime); }

/* ══ FOOTER ═══════════════════════════════════ */
.foot{ background:var(--bg); padding:clamp(56px,9vw,110px) var(--pad) 48px; border-top:1px solid var(--line); }
.foot__top{ display:flex; align-items:center; gap:20px; margin-bottom:44px; }
.foot__logo{ width:76px; height:76px; object-fit:cover; border:1px solid var(--line); }
.foot__brand b{ font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:-.02em; display:block; }
.foot__brand span{ color:var(--mut); font-size:14px; }

.foot__links{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-bottom:44px; }
.foot__links a{
  font-family:var(--disp); font-weight:700; font-size:clamp(18px,4vw,34px);
  letter-spacing:-.02em; text-decoration:none; transition:color .2s;
}
.foot__links a:hover{ color:var(--lime); }

.foot__biz p{ margin:0 0 10px; font-size:15px; }
.foot__biz a{ color:var(--lime); }
.foot__legal{ color:var(--mut); font-size:12px !important; line-height:1.7; margin-top:22px !important; }

/* ══ ЛИПКАЯ ПАНЕЛЬ ════════════════════════════ */
.dock{
  position:fixed; z-index:100; left:0; right:0; bottom:0; display:flex;
  border-top:1px solid var(--line); background:rgba(10,10,11,.86); backdrop-filter:blur(12px);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock__b{
  flex:1; display:grid; place-items:center; height:var(--dock-h);
  font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.12em;
  text-decoration:none; text-transform:uppercase;
}
.dock__b--lime{ background:var(--lime); color:#000; }

/* на десктопе панель не нужна — есть кнопки в шапке */
@media (min-width:900px){
  .dock{ display:none; }
  body{ padding-bottom:0; }
  .hero{ padding-bottom:calc(var(--pad) + 48px); }
}

/* ══ ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ════════════════════ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}