/* ==========================================================================
   Наша Дискотека — flyer landing page
   Sections: tokens · reset · stage backdrop · masthead · schedule · pricing
             · perks · features · venue · footer · responsive
   Fonts are self-hosted; see assets/fonts/fonts.css.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --pink:        #ff3fc9;
  --pink-soft:   #ff93de;
  --pink-pale:   #f7c9ec;
  --purple:      #8b3ffb;
  --blue:        #35d0ff;
  --blue-soft:   #8fe8ff;

  --bg:          #05010c;
  --panel:       rgba(255, 255, 255, .022);
  --text:        #f6f3ff;
  --text-dim:    #a9a2c4;

  --edge-pink:   rgba(255, 63, 201, .5);
  --edge-blue:   rgba(53, 208, 255, .5);
  --edge-faint:  rgba(255, 255, 255, .16);

  --glow-pink:   0 0 12px rgba(255, 63, 201, .55);
  --glow-blue:   0 0 12px rgba(53, 208, 255, .55);

  --display: 'Montserrat', 'Arial Black', sans-serif;   /* heavy, has Cyrillic */
  --ui:      'Oswald', 'Arial Narrow', sans-serif;      /* condensed caps      */
  --script:  'Kaushan Script', cursive;

  --poster-w: 880px;
  --gutter:   clamp(16px, 4vw, 34px);
}

/* ---------------------------------------------------------------- reset -- */
* { box-sizing: border-box; }

/* Default <p>/<h*> margins are em-based, so they explode at poster type
   sizes. Zero them and set spacing explicitly per element. */
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.icon {
  width: 1em;
  height: 1em;
  display: block;
  flex: none;
}

/* Shared neon-outline container. */
.neon-box {
  border: 1px solid var(--edge-faint);
  border-radius: 12px;
  background: var(--panel);
}

.poster {
  max-width: var(--poster-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 26px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* --------------------------------------------------------------- stage -- */
/* Everything from the date badge down to the hours badge sits over one
   shared backdrop: nebula · starfield · vinyl disc · rim light · crowd.   */
.stage {
  position: relative;
  margin: 0 calc(-1 * var(--gutter));
  padding: 18px var(--gutter) 0;
  container-type: inline-size;   /* title is sized off this, not the viewport */
}

.stage > *:not(.stage__backdrop) {
  position: relative;
  z-index: 2;
}

.stage__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage__backdrop::before {                      /* nebula wash */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 66% 48% at 20% 14%, rgba(139,  63, 251, .55), transparent 62%),
    radial-gradient(ellipse 58% 44% at 86% 22%, rgba( 53, 208, 255, .32), transparent 60%),
    radial-gradient(ellipse 74% 38% at 50% 70%, rgba(255,  63, 201, .26), transparent 66%);
}

.stage__backdrop::after {                       /* starfield */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 10%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78%  6%, #fff, transparent),
    radial-gradient(1px   1px   at 58% 15%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 31% 22%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 91% 29%, #fff, transparent),
    radial-gradient(1px   1px   at 44%  4%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 66% 37%, #fff, transparent),
    radial-gradient(1px   1px   at  6% 33%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 24% 45%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 88% 52%, #fff, transparent);
  opacity: .7;
}

/* The record: concentric grooves on a dark disc, centred behind the title. */
.stage__vinyl,
.stage__rimlight {
  position: absolute;
  left: 50%;
  width: min(116%, 1020px);
  aspect-ratio: 1 / .64;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
}

.stage__vinyl {
  top: 2%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, .045) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 50%,
      #3d1657 0 8%, #1d0b30 9% 40%, rgba(12, 4, 23, .78) 56%,
      rgba(10, 3, 20, .38) 68%, transparent 80%);
  /* Mask the grooves along with the disc so the rim has no hard edge. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 79%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 79%);
}

.stage__rimlight {                              /* light streak across the rim */
  top: 0;
  border: 3px solid transparent;
  border-top-color: rgba(255, 255, 255, .92);
  filter: blur(5px) drop-shadow(0 0 14px rgba(160, 210, 255, .85));
}

.stage__crowd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: clamp(120px, 30%, 215px);
  background: url("assets/crowd.svg") repeat-x bottom center / auto 100%;
}

.stage__fade {                                  /* blend backdrop into page */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: clamp(60px, 14%, 120px);
  background: linear-gradient(to bottom, transparent, var(--bg) 96%);
}

/* ------------------------------------------------------------- masthead -- */
.masthead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.masthead__date {
  background: var(--pink-pale);
  color: #260033;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 5px;
  font-size: .84rem;
  white-space: nowrap;
}

.masthead__kicker {
  color: var(--text-dim);
  letter-spacing: .13em;
  font-size: .82rem;
  text-transform: uppercase;
  font-style: italic;
}

.title {
  font-family: var(--display);
  font-weight: 900;
  /* Sized in cqw so the longest line ("ДИСКОТЕКА") fills the poster width
     without overflowing, independent of viewport width. The vw line above
     is the fallback for browsers without container queries, which discard
     the cqw declaration as invalid. */
  font-size: clamp(2.4rem, 13vw, 7rem);
  font-size: clamp(2.4rem, 14.3cqw, 8rem);
  line-height: .86;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -.015em;
  background: linear-gradient(177deg,
    #ffffff 3%, #ffdaf3 19%, var(--pink-soft) 38%, var(--pink) 60%, #b44ef4 82%, #7f63ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 3px 0 rgba(52, 6, 62, .9))
    drop-shadow(0 0 26px rgba(255, 63, 201, .5))
    drop-shadow(0 0 46px rgba(139, 63, 251, .35));
}

.title__line { display: block; }
.title__line:first-child { letter-spacing: .11em; }   /* track out to fill */

.subtitle {
  text-align: center;
  margin-top: 8px;
  font-size: clamp(.9rem, 3.1vw, 1.55rem);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #efe9ff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}

/* ------------------------------------------------------------- schedule -- */
.schedule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 4vw, 44px);
  margin-top: clamp(16px, 3.4vw, 30px);
}

/* Each slot centres within its half, as on the flyer. */
.slot { text-align: center; }

.slot__time {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 6.4vw, 2.85rem);
  line-height: 1;
  color: var(--pink-soft);
  text-shadow: var(--glow-pink), 0 2px 8px rgba(0, 0, 0, .9);
}

.slot--right .slot__time {
  color: var(--blue-soft);
  text-shadow: var(--glow-blue), 0 2px 8px rgba(0, 0, 0, .9);
}

.slot__label {
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: clamp(.85rem, 2.6vw, 1.12rem);
  line-height: 1.15;
  margin-top: 3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

.slot__sub {
  color: var(--text-dim);
  font-size: clamp(.7rem, 2.1vw, .86rem);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.25;
  margin-top: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

.schedule__play {
  font-size: clamp(38px, 9vw, 60px);
  color: var(--pink-soft);
  filter: drop-shadow(0 0 10px rgba(255, 63, 201, .85));
}

.dj {
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 4.6vw, 1.95rem);
  color: var(--pink);
  text-shadow: var(--glow-pink), 0 2px 8px rgba(0, 0, 0, .9);
  margin-top: clamp(10px, 2vw, 16px);
}

.hours {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  padding: 9px clamp(26px, 7vw, 54px);
  border: 1.5px solid var(--edge-blue);
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .09em;
  font-size: clamp(1.05rem, 4vw, 1.65rem);
  color: #fff;
  text-decoration: none;
  background: rgba(6, 2, 16, .55);
  box-shadow: inset 0 0 14px rgba(53, 208, 255, .18), 0 0 16px rgba(53, 208, 255, .3);
  transition: box-shadow .18s ease;
}

.hours:hover { box-shadow: inset 0 0 20px rgba(53, 208, 255, .3), 0 0 26px rgba(53, 208, 255, .5); }
.hours:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

/* -------------------------------------------------------------- pricing -- */
/* One framed box split by a vertical rule, mirroring the flyer. */
.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--edge-pink);
  border-radius: 14px;
  overflow: hidden;
  margin-top: clamp(18px, 3.4vw, 28px);
  box-shadow: inset 0 0 26px rgba(139, 63, 251, .14);
}

.tier-group { padding: clamp(14px, 2.6vw, 20px); }
.tier-group + .tier-group { border-left: 1.5px solid var(--edge-blue); }

.tier-group--men   { --accent: var(--pink-soft); --accent-edge: var(--edge-pink); }
.tier-group--women { --accent: var(--blue-soft); --accent-edge: var(--edge-blue); }

.tier-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.tier-group__icon {
  font-size: clamp(30px, 5vw, 38px);
  color: var(--accent);
  filter: drop-shadow(0 0 8px currentColor);
}

.tier-group__title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .07em;
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px currentColor;
}

/* A tier row carries the flyer's one-line typography. The two online prices
   share one row and one BUY chip; the door price is text, so only the online
   row is a link and only it reacts to the pointer. */
.tier {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
  transition: background-color .16s ease;
}

.tier--online { align-items: center; }

.tier__rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tier__row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

a.tier:hover,
a.tier:focus-visible { background: rgba(255, 255, 255, .07); }
a.tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tier__label {
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(.75rem, 1.85vw, .92rem);
  color: #ece7ff;
}

.tier__price {
  font-weight: 700;
  font-size: clamp(.86rem, 2.1vw, 1.05rem);
  color: var(--accent);
  text-shadow: 0 0 9px currentColor;
}

.tier__buy {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  color: var(--accent);
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}

a.tier:hover .tier__buy,
a.tier:focus-visible .tier__buy {
  background: var(--accent);
  color: #1a0026;
}

/* ---------------------------------------------------------------- perks -- */
.perk {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  text-align: center;
  font-size: clamp(.74rem, 1.9vw, .86rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #ece7ff;
}

.perk__choose {
  display: block;
  margin: 7px 0 5px;
  font-size: .67rem;
  letter-spacing: .11em;
  color: var(--accent);
}

.perk__options {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.6vw, 20px);
}

.perk__option {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  letter-spacing: .05em;
  color: var(--text-dim);
  line-height: 1.1;
}

.perk__option .icon {
  font-size: 27px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px currentColor);
}

.perk__roll {
  display: block;
  margin: 10px auto 0;
  font-size: 40px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px currentColor);
}

/* ------------------------------------------------------------- features -- */
.features {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.features__pair { display: grid; grid-template-columns: 1fr 1fr; }
.features__pair .feature + .feature { border-left: 1px solid var(--edge-faint); }

.feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-size: clamp(.68rem, 1.8vw, .8rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.25;
  text-wrap: balance;   /* avoid a lone trailing word like "11 PM" */
}

.feature .icon { font-size: clamp(24px, 4vw, 31px); }
.feature--photo   .icon { color: var(--pink); filter: drop-shadow(var(--glow-pink)); }
.feature--parking .icon { color: var(--blue); filter: drop-shadow(var(--glow-blue)); }
.feature--kitchen { text-align: center; }

/* ---------------------------------------------------------------- venue -- */
.venue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--edge-pink);
  margin-top: clamp(18px, 3.2vw, 26px);
  padding-top: clamp(14px, 2.6vw, 20px);
}

.venue__name {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2rem, 6.5vw, 2.9rem);
  line-height: 1.05;
  color: var(--pink-soft);
  text-shadow: var(--glow-pink);
}

.venue__cuisine {
  display: block;
  font-family: var(--ui);
  font-weight: 600;
  font-size: clamp(.68rem, 1.9vw, .82rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 2px;
  color: var(--pink);
  text-shadow: none;
}

.venue__cuisine em { font-style: normal; color: var(--blue-soft); }

.venue__address {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(.78rem, 2vw, .93rem);
  color: #ded8f5;
  text-decoration: none;
  max-width: 240px;
  line-height: 1.3;
}

.venue__address .icon { font-size: 26px; color: var(--pink); filter: drop-shadow(var(--glow-pink)); }
.venue__address:hover { color: #fff; }

/* --------------------------------------------------------------- footer -- */
.vibes {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2.8vw, 22px);
  margin-top: clamp(18px, 3.2vw, 26px);   /* gap the contact line used to hold */
  border-top: 1px solid var(--edge-pink);
  padding-top: 13px;
  font-size: clamp(.62rem, 1.7vw, .76rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.vibes li { position: relative; }

.vibes li + li::before {
  content: "•";
  position: absolute;
  left: clamp(-14px, -1.6vw, -7px);
  color: var(--pink);
}

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 560px) {
  .pricing,
  .features { grid-template-columns: 1fr; }

  .tier-group + .tier-group {
    border-left: 0;
    border-top: 1.5px solid var(--edge-blue);
  }

  .schedule { gap: 8px; }
  .venue { justify-content: center; text-align: center; }
  .venue__address { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}