/* The Climb theme for the home page: the game's climbing wall, pixel type and neon, layered over
   style.css (which the other pages keep using as they are). Loaded only by index.html.
   Pixel art (stars, ridges, the two ravers) comes from the game and is scaled with
   image-rendering: pixelated so it stays crisp. */
:root {
  --pixel: 'Silkscreen', 'Courier New', monospace;
  --violet: #9b3aff;
  --panel: rgba(6, 6, 8, 0.72);
  --edge: rgba(255, 255, 255, 0.14);
}

/* Plain night background, like the social posts: the sky and the mountains carry the scene. */
body.home { background: var(--bg); }
body.home .about, body.home .home-events { background: transparent; }

.eyebrow {
  font-family: var(--pixel);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon-green);
  text-align: center;
  margin-bottom: 10px;
}
.about-inner .eyebrow { text-align: center; }

/* Pixel buttons: flat yellow with a hard violet shadow, like the game */
.btn-pixel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  color: #060608;
  background: var(--neon-green);
  padding: 16px 26px;
  box-shadow: 4px 4px 0 var(--violet);
  transition: transform 0.12s steps(2), box-shadow 0.12s steps(2), color 0.12s;
}
.btn-pixel:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--violet); }
.btn-pixel:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--violet); }
.btn-pixel:focus-visible, body.home .btn:focus-visible, body.home .nav-links a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.btn-pixel.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--edge); }
.btn-pixel.ghost:hover { transform: none; box-shadow: inset 0 0 0 2px var(--neon-green); color: var(--neon-green); }
body.home .btn { border-radius: 0; font-family: var(--pixel); text-transform: uppercase; font-size: 0.875rem; }
/* Hard pixel shadows instead of soft glows, as everywhere else in The Climb */
body.home .btn-primary { box-shadow: 4px 4px 0 var(--violet); }
body.home .btn-primary:hover { box-shadow: 6px 6px 0 var(--violet); }
body.home .btn-ghost { border: 2px solid var(--edge); background: var(--panel); }
body.home .btn-ghost:hover { border-color: var(--neon-green); color: var(--neon-green); }
body.home .nav-cta {
  border-radius: 0;
  font-family: var(--pixel);
  text-transform: uppercase;
  font-size: 0.875rem;
  box-shadow: 3px 3px 0 var(--violet);
}

/* HERO: the game's title screen */
.climb-hero {
  position: relative;
  min-height: min(100svh, 920px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 6vw 230px;
  overflow: hidden;
}
.hero-sky {
  position: absolute;
  inset: 0;
  background: url(photos/climb/stars.png) 0 0 / 720px 720px;
  image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 80%);
  mask-image: linear-gradient(#000 35%, transparent 80%);
}
.hero-ridges {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 360px;
  background: url(photos/climb/ridges.png) repeat-x left bottom / auto 360px;
  image-rendering: pixelated;
}
.climb-hero .hero-content { position: relative; z-index: 2; max-width: 860px; }
/* The BRAȘOV sign on the hillside, like the real one above the city: pixel letters on legs climbing
   gently on the face of the first purple mountain on the left, below its crest and above the left raver. */
.brasov-sign { position: absolute; left: 20px; bottom: 236px; width: 114px; height: auto; image-rendering: pixelated; }
/* the left raver's head reaches 226px (156px sprite + 70px), so the sign stays above it */
.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.lockup-impulse { height: 34px; width: auto; }
.lockup-ba { height: 38px; width: auto; }
.lockup-x { font-family: var(--pixel); color: var(--text-dim); font-size: 1.1rem; }
.climb-title {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: clamp(3.2rem, 12vw, 8.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--neon-green);
  text-shadow: 5px 5px 0 var(--violet), 10px 10px 0 rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}
.climb-lede {
  max-width: 34ch;
  margin: 26px auto 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--text);
}
.unlocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.unlocks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--pixel);
  font-size: 0.875rem;
  text-transform: uppercase;
  background: var(--panel);
  border: 2px solid var(--edge);
  color: var(--text-dim);
}
.unlocks b { color: var(--text); font-weight: 700; }
.unlocks small { color: var(--neon-green); font-size: 0.875rem; }
.lock { width: 14px; height: auto; color: var(--text-dim); display: block; }
.climb-hero .hero-actions { margin-top: 34px; gap: 18px; }
.hero-note { text-wrap: pretty; margin-top: 22px; color: var(--text-dim); font-size: 0.95rem; text-shadow: 0 1px 0 #060608, 0 0 14px #060608; }

/* The two ravers from the game, dancing on the beat (174 BPM: one pose per beat, 0-2-1-2) */
.raver {
  position: absolute;
  bottom: 70px;
  z-index: 2;
  width: 108px;
  height: 156px;
  background: url(photos/climb/ravers.png) 0 0 / 324px 312px;
  image-rendering: pixelated;
  animation: dance-boy 1.379s steps(1, end) infinite;
}
.raver-boy { left: max(5vw, 16px); }
.raver-girl { right: max(5vw, 16px); background-position: 0 -156px; animation-name: dance-girl; }
@keyframes dance-boy {
  0% { background-position: 0 0; } 25% { background-position: -216px 0; }
  50% { background-position: -108px 0; } 75% { background-position: -216px 0; }
}
@keyframes dance-girl {
  0% { background-position: -108px -156px; } 25% { background-position: -216px -156px; }
  50% { background-position: 0 -156px; } 75% { background-position: -216px -156px; }
}

/* Marquee in pixel type */
.marquee.pixel .marquee-track span { font-family: var(--pixel); font-weight: 700; font-size: 0.95rem; padding-right: 28px; }

/* HOW IT WORKS: three numbered holds */
.route {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 46px auto 0;
}
.route li {
  position: relative;
  padding: 30px 20px 24px;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: 6px 6px 0 rgba(155, 58, 255, 0.35);
}
.step-n {
  position: absolute;
  top: -15px; left: 16px;
  font-family: var(--pixel);
  font-weight: 700;
  background: var(--neon-green);
  color: #060608;
  padding: 3px 10px;
}
.step-icon { height: 52px; display: flex; align-items: flex-end; margin-bottom: 16px; }
.step-icon svg, .step-icon img { height: 100%; width: auto; image-rendering: pixelated; }
.step-icon svg[viewBox="0 0 14 9"] { height: 34px; }
.step-icon .lock { height: 40px; width: auto; color: var(--neon-green); }
.route h3 { font-family: var(--pixel); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; margin-bottom: 8px; }
.route p { color: var(--text-dim); line-height: 1.6; font-size: 0.95rem; }
.climb-how .section-more { margin-top: 46px; }

/* Event and DJ walls: square frames, pixel captions */
body.home .photo-wall.links .shot { border-radius: 0; border: 2px solid var(--edge); background: var(--panel); }
body.home .photo-wall.spot .shot.lit,
body.home .photo-wall.spot .shot:hover,
body.home .photo-wall.spot .shot.match { border-color: var(--neon-green); box-shadow: 6px 6px 0 var(--violet); }
body.home .photo-wall.spot .shot::after { border-radius: 0; font-family: var(--pixel); }
body.home .shot-cap { background: transparent; }
body.home .shot-cap b { font-family: var(--pixel); font-weight: 700; color: var(--neon-green); }

/* About */
body.home .ig-poster img { border-radius: 0; border: 2px solid var(--edge); box-shadow: 8px 8px 0 rgba(155, 58, 255, 0.35); }

@media (max-width: 760px) {
  .route { grid-template-columns: 1fr; gap: 30px; max-width: 460px; }
}
@media (max-width: 900px) {
  .raver { width: 72px; height: 104px; background-size: 216px 208px; bottom: 56px; }
  .raver-girl { background-position: 0 -104px; }
  @keyframes dance-boy { 0% { background-position: 0 0; } 25% { background-position: -144px 0; } 50% { background-position: -72px 0; } 75% { background-position: -144px 0; } }
  @keyframes dance-girl { 0% { background-position: -72px -104px; } 25% { background-position: -144px -104px; } 50% { background-position: 0 -104px; } 75% { background-position: -144px -104px; } }
}
@media (max-width: 560px) {
  .climb-hero { padding-bottom: 200px; }
  .hero-ridges { height: 240px; background-size: auto 240px; }
  .brasov-sign { left: calc(50% - 57px); bottom: 54px; width: 114px; }
  .hero-lockup { gap: 10px; }
  .lockup-impulse { height: 24px; }
  .lockup-ba { height: 27px; }
  .unlocks li { font-size: 0.875rem; padding: 8px 10px; }
  .btn-pixel { font-size: 0.9rem; padding: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .raver { animation: none; }
  .btn-pixel { transition: none; }
}