/* Scavenger Hunt Atlanta — custom styles layered on top of Tailwind CDN.
   Brand: ink #0B0B0B, red #E11B17, cream #F7F3EC, gold #D4AB6D. */

:root {
  --ink: #0b0b0b;
  --red: #e11b17;
  --red-dark: #b3140f;
  --cream: #f7f3ec;
  --sand: #efe7d8;
  --gold: #d4ab6d;
}

html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background-color: var(--ink);
  background-image: url('images/skyline-atlanta.jpg');
  background-size: cover;
  background-position: center 45%; /* keep the downtown towers and SkyView wheel in frame */
  background-attachment: fixed; /* skyline stays put while the page scrolls over it */
  background-repeat: no-repeat;
}
/* iOS ignores fixed attachment and can jank; let it scroll on small screens */
@media (max-width: 768px) {
  body { background-attachment: scroll; }
}

/* Display type tracking to echo the bold condensed logo */
.font-display { letter-spacing: 0.01em; line-height: 0.92; }
.headline { text-wrap: balance; }

/* ---- Header scroll state ---- */
.site-header {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  transition: box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

/* ---- Hero ---- */
/* Hero is transparent so the fixed skyline backdrop shows through.
   A side-weighted scrim darkens the left where the copy sits while the
   right keeps the skyline and SkyView wheel bright; tight text-shadows
   give each letter crisp contrast without dimming the whole scene. */
.hero-photo {
  background:
    linear-gradient(100deg,
      rgba(11,11,11,.70) 0%, rgba(11,11,11,.40) 38%, rgba(11,11,11,0) 70%),
    linear-gradient(180deg,
      rgba(11,11,11,.34) 0%, rgba(11,11,11,.06) 48%, rgba(11,11,11,.46) 100%);
}
.hero-photo h1,
.hero-photo p,
.hero-photo a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 2px 14px rgba(0, 0, 0, .55);
}

/* ---- Marquee ribbon ---- */
/* Two identical groups slide left by exactly one group width (-50% of the
   track), so the reset is invisible. Symmetric padding on each item keeps the
   spacing uniform across the seam and the loop point. */
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.marquee__group { display: flex; flex: none; }
.marquee__group span { padding: 0 1.6rem; white-space: nowrap; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Adventure + gallery cards ---- */
.adv-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.adv-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(11,11,11,.45); }
.adv-card:hover .adv-card__img { transform: scale(1.06); }
.adv-card__img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }

.tile { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.tile img { transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.tile:hover img { transform: scale(1.08); filter: saturate(1.1); }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 80; display: none; place-items: center;
  background: rgba(8,8,8,.92); padding: 1.5rem; }
.lightbox.open { display: grid; }
.lightbox img { max-width: min(1100px, 94vw); max-height: 88vh; border-radius: .5rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox__close { position: absolute; top: 1.1rem; right: 1.3rem; color: #fff;
  font-size: 2rem; line-height: 1; background: none; border: 0; cursor: pointer; }

/* ---- Misc ---- */
.link-underline { background-image: linear-gradient(var(--red), var(--red));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s ease; }
.link-underline:hover { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  .adv-card:hover { transform: none; }
}