/* Johnny Quinn Alston — johnnyquinn.pro
   Rebuilt from Wix design. Cyan: #00F8FF on full-page video background. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cyan: #00F8FF;
  --teal: #3A8184;
}

html {
  /* fallback color sits behind the video (root background paints first) */
  background: #b8c4cc;
}
html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  min-height: 100vh;
}
body {
  /* must stay transparent so the fixed background video shows through */
  background: transparent;
}

/* ---- Full-page background video (washed-out mountain look) ---- */
.bg-video-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  /* fallback while media/background.mp4 loads/if it is missing */
  background: linear-gradient(180deg, #b8c4cc 0%, #dde4e8 45%, #aebbc4 100%);
}
.bg-video-wrap video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: -2;
  /* color grade: heavily desaturate so the blue is only faintly detectable,
     nudge remaining hue toward periwinkle (blue-violet), lift exposure */
  filter: saturate(0.32) hue-rotate(14deg) brightness(1.05) contrast(0.97);
}
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* soft periwinkle-tinted wash (was plain white) for the faint blue-violet cast */
  background: rgba(220, 222, 247, 0.52);
}

/* ---- Layout ---- */
.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- Header ---- */
header { padding-top: 56px; position: relative; }
.site-title {
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 0.5px;
  color: var(--cyan);
  text-transform: uppercase;
}
.site-sub {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 1px;
  margin-top: 6px;
  text-transform: uppercase;
}
.header-email {
  position: absolute;
  top: 48px;
  right: 20px;
  font-size: 14px;
  color: var(--cyan);
  text-decoration: none;
  white-space: nowrap;
}
.header-email .rule { letter-spacing: 0; }

/* ---- Nav ---- */
nav { margin-top: 78px; font-size: 16px; }
nav a, nav span.sep {
  color: var(--cyan);
  text-decoration: none;
  margin-right: 6px;
}
nav a:hover { text-decoration: underline; }

/* ---- Section labels / headings ---- */
.page-heading {
  margin-top: 58px;
  font-size: 16px;
  color: var(--cyan);
  text-transform: uppercase;
}
.gallery-label {
  margin: 26px 0 8px;
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---- Home: video reel ---- */
.reel {
  margin-top: 40px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--teal);
  overflow: hidden;
}
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.reel .play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.reel .play-btn::after {
  content: '';
  margin-left: 5px;
  border-left: 20px solid var(--cyan);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.reel.playing .play-btn { display: none; }

/* ---- Contact footer line ---- */
.contact-line {
  margin: 70px 0 90px;
  font-size: 14px;
  color: var(--cyan);
  text-transform: uppercase;
}
.contact-line a { color: var(--cyan); text-decoration: none; }

/* ---- Galleries (AI portfolio) ---- */
.gallery-wrap { position: relative; }
.gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }

/* VIDEOS: single row, large mixed-width tiles */
.gallery.videos .tile { height: 238px; flex: 0 0 auto; }
.gallery.videos .tile img { height: 100%; width: auto; display: block; }

/* CLIPS: two-row square grid */
.gallery.clips {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 110px);
  gap: 4px;
  overflow-x: auto;
}
.gallery.clips .tile { width: 110px; height: 110px; }
.gallery.clips .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tile {
  position: relative;
  cursor: pointer;
  background: #111;
}
.tile .mini-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}
.tile .mini-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-left: 12px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #222;
}
.gallery-arrow.prev { left: -6px; }
.gallery-arrow.next { right: -6px; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox video, .lightbox img {
  max-width: 92vw;
  max-height: 86vh;
}
.lightbox .close {
  position: absolute;
  top: 18px; right: 26px;
  font-size: 34px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}
.lightbox .missing-note {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  color: #bbb;
  font-size: 13px;
}

/* ---- About ---- */
.about-grid {
  margin-top: 64px;
  display: flex;
  gap: 56px;
  align-items: flex-start;
}
.about-text {
  flex: 1 1 60%;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
}
.about-text p { margin-bottom: 18px; }
.about-photo {
  flex: 0 0 283px;
}
.about-photo img { width: 100%; display: block; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .header-email { position: static; display: block; margin-top: 10px; }
  nav { margin-top: 40px; font-size: 14px; }
  .about-grid { flex-direction: column-reverse; }
  .about-photo { flex-basis: auto; max-width: 260px; }
}