@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron/orbitron-1.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron/orbitron-2.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #130A25;
  --bg-darker: #0B0617;
  --fg: #F9CDF6;
  --cyan: #54DDFF;
  --pink: #FF40B9;
  --yellow: #FFC102;
  --purple: #7F4CD6;
  --violet-deep: #54368E;
  --magenta-deep: #80205D;
  --cyan-glitch: #54DDFF4D;
  --purple-glitch: #7F4CD640;
}

.reveal {
  background: radial-gradient(ellipse at 50% 20%, var(--violet-deep) 0%, var(--bg) 45%, var(--bg-darker) 100%);
}

.reveal .slides section {
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  text-align: left;
}

/*
  Real document flow instead of absolute-positioned percentage math: a
  two-column grid (text | photo rail). The photo rail stacks photos with
  flex + gap, so overlap is structurally impossible instead of something
  to calculate. Rotation is cosmetic only (small angles), it doesn't
  affect layout.
*/
.reveal .slides section .slide-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 6%;
  align-items: center;
}

.reveal .slides section .photo-rail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.reveal .slides section .photo-slot {
  border: 2px solid var(--magenta-deep);
  border-radius: 0.4rem;
  background: hsla(265 60% 20% / 0.4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple);
}

/* Photo rail: no forced crop, but capped so a tall portrait photo can't
   blow past the slide height and push everything else down. The photo
   still keeps its own real aspect ratio, just scaled to fit. */
.reveal .slides section .photo-rail .photo-slot {
  width: auto;
  max-width: 100%;
}

.reveal .slides section .photo-rail .photo-slot img {
  max-width: 100%;
  max-height: 280px;
  width: auto;
  height: auto;
  display: block;
}

/* Collage grid: cells have a fixed height (see below), so images are
   letterboxed (contain) instead of cropped (cover) to avoid cutting
   off faces/text in a tight cell. */
.reveal .slides section .collage-grid .photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --rot feeds the photoIn animation below (transform is a single
   property, so the tilt has to ride along inside the same keyframe
   as the entrance scale instead of being set separately, or the
   animation's "to" state would wipe the tilt out). */
.reveal .slides section .photo-slot.rot-1 { --rot: -4deg; }
.reveal .slides section .photo-slot.rot-2 { --rot: 3deg; }
.reveal .slides section .photo-slot.rot-3 { --rot: -2deg; }
.reveal .slides section .photo-slot.rot-4 { --rot: 5deg; }
.reveal .slides section .photo-slot.rot-5 { --rot: -5deg; }
.reveal .slides section .photo-slot.rot-6 { --rot: 2deg; }

.reveal .slides section .collage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 130px);
  gap: 24px;
  margin-top: 30px;
}

.reveal .slides section .collage-grid .photo-slot {
  width: 100%;
  height: 100%;
}

.reveal .slides section .collage-grid .photo-slot:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.reveal .slides section h1,
.reveal .slides section h2 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 1.6em;
  font-weight: 600;
  color: var(--cyan);
  text-shadow: 0 0 4px var(--cyan);
  text-transform: none;
  margin-bottom: 0.8em;
}

/* Rotate the heading + photo-border accent per slide so the deck doesn't
   read as one repeated cyan template. Matches the border tint to the
   heading color for each slide. */
.reveal .slides > section:nth-of-type(4n+2) h1,
.reveal .slides > section:nth-of-type(4n+2) h2 {
  color: var(--pink);
  text-shadow: 0 0 4px var(--pink);
}
.reveal .slides > section:nth-of-type(4n+2) .photo-slot {
  border-color: var(--pink);
}

.reveal .slides > section:nth-of-type(4n+3) h1,
.reveal .slides > section:nth-of-type(4n+3) h2 {
  color: var(--yellow);
  text-shadow: 0 0 4px var(--yellow);
}
.reveal .slides > section:nth-of-type(4n+3) .photo-slot {
  border-color: var(--yellow);
}

.reveal .slides > section:nth-of-type(4n+4) h1,
.reveal .slides > section:nth-of-type(4n+4) h2 {
  color: var(--purple);
  text-shadow: 0 0 4px var(--purple);
}
.reveal .slides > section:nth-of-type(4n+4) .photo-slot {
  border-color: var(--purple);
}

.reveal .slides section .line {
  font-size: 0.55em;
  line-height: 1.5;
  margin: 0.3em 0;
  color: var(--fg);
}

.reveal .slides section .accent-cyan { color: var(--cyan); }
.reveal .slides section .accent-pink { color: var(--pink); }
.reveal .slides section .accent-yellow { color: var(--yellow); }

/*
  Automatic entrance animation, no clicks needed: title, lines, and
  photos animate in on their own once a slide has finished transitioning
  into place. Reveal's own slide transition takes ~0.8s (its default
  transition-duration), so these can't just fire on display:none -> block
  like a naive version would -- that runs the entrance animation AT THE
  SAME TIME as reveal's transition, so by the time the transition finishes
  everything already looks fully loaded. Instead js/slide-animations.js
  adds the .content-in class only after reveal's transition completes,
  and removes it up front so it can replay next time the slide is shown.
*/
.reveal .slides section h1,
.reveal .slides section h2,
.reveal .slides section .line,
.reveal .slides section .photo-slot {
  opacity: 0;
}

.reveal .slides section.content-in h1,
.reveal .slides section.content-in h2 {
  animation: titleIn 0.6s ease forwards;
}

.reveal .slides section.content-in .line {
  animation: lineIn 0.6s ease forwards;
  animation-delay: 0.35s;
}

.reveal .slides section.content-in .line:nth-of-type(2) { animation-delay: 0.6s; }
.reveal .slides section.content-in .line:nth-of-type(3) { animation-delay: 0.85s; }
.reveal .slides section.content-in .line:nth-of-type(4) { animation-delay: 1.1s; }

.reveal .slides section.content-in .photo-rail .photo-slot {
  animation: photoIn 0.7s ease forwards;
  animation-delay: 0.25s;
}

.reveal .slides section.content-in .photo-rail .photo-slot:nth-child(2) { animation-delay: 0.5s; }

.reveal .slides section.content-in .collage-grid .photo-slot {
  animation: photoIn 0.6s ease forwards;
  animation-delay: 0.2s;
}

.reveal .slides section.content-in .collage-grid .photo-slot:nth-child(2) { animation-delay: 0.4s; }
.reveal .slides section.content-in .collage-grid .photo-slot:nth-child(3) { animation-delay: 0.6s; }
.reveal .slides section.content-in .collage-grid .photo-slot:nth-child(4) { animation-delay: 0.8s; }
.reveal .slides section.content-in .collage-grid .photo-slot:nth-child(5) { animation-delay: 1s; }

@keyframes titleIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lineIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes photoIn {
  from { opacity: 0; transform: scale(0.9) rotate(var(--rot, 0deg)); }
  to { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .slides section h1,
  .reveal .slides section h2,
  .reveal .slides section .line {
    animation: none;
    opacity: 1;
  }
  .reveal .slides section .photo-slot {
    animation: none;
    opacity: 1;
    transform: rotate(var(--rot, 0deg));
  }
}

body::before,
body::after {
  content: '';
  position: fixed;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

body::before {
  height: 2px;
  background-color: var(--cyan-glitch);
  left: 0;
  top: 20%;
  animation: subtleLineGlitch 25s infinite;
}

body::after {
  height: 4px;
  background-color: var(--purple-glitch);
  left: 0;
  top: 60%;
  animation: subtleBlockGlitch 35s infinite;
}

@keyframes subtleLineGlitch {
  0%, 0.4%, 100% { opacity: 0; transform: translateX(0); top: 20%; }
  0.1% { opacity: 1; top: 20%; transform: translateX(-5px); }
  0.2% { opacity: 1; top: 22%; transform: translateX(5px); }
  0.3% { opacity: 0; top: 18%; transform: translateX(-2px); }
}

@keyframes subtleBlockGlitch {
  0%, 0.6%, 100% {
    opacity: 0;
    transform: scaleY(1) translateY(0);
  }
  0.1% {
    opacity: 0.3;
    transform: scaleY(0.8) translateY(10px);
  }
  0.3% {
    opacity: 0;
    transform: scaleY(1.1) translateY(-5px);
  }
}