/* ===========================
   CSS Custom Properties
   =========================== */
:root {
  --color-bg: #fdf6ec;
  --color-text: #2d2a24;
  --color-accent: #e86c3a;
  --color-accent-light: #f9a870;
  --color-muted: #8a8477;
  --color-card-bg: #fff;
  --color-card-shadow: rgba(45, 42, 36, 0.12);

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-fun: 'Caveat', cursive;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  --radius: 0.75rem;
  --radius-lg: 1.5rem;

  /* Slideshow: 5 slides, 5s each = 25s total cycle */
  --slide-count: 5;
  --slide-duration: 5s;
  --cycle: 25s;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1814;
    --color-text: #f0ebe3;
    --color-accent: #f09060;
    --color-accent-light: #c46830;
    --color-muted: #9a9488;
    --color-card-bg: #2a2620;
    --color-card-shadow: rgba(0, 0, 0, 0.3);
  }
}

/* ===========================
   Reset & Base
   =========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================
   Slideshow (fullscreen hero)
   =========================== */
.slideshow {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

.slideshow-container {
  position: absolute;
  inset: 0;
}

/* All slides are stacked */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
}

.slide-frame {
  width: 100%;
  height: 100%;
}

.slide-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  font-family: var(--font-fun);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: white;
  text-align: center;
  opacity: 0;
}

/* ===========================
   Slide 1: The Main Event (fade in, always first)
   =========================== */
.slide--main {
  animation: slideMain var(--cycle) ease-in-out infinite;
  z-index: 2;
}

.slide--main figcaption {
  animation: captionMain var(--cycle) ease-in-out infinite;
}

/*
  Timing per slide (20% of 25s = 5s each):
  Slide 1: 0%–20%    (0s–5s)
  Slide 2: 20%–40%   (5s–10s)
  Slide 3: 40%–60%   (10s–15s)
  Slide 4: 60%–80%   (15s–20s)
  Slide 5: 80%–100%  (20s–25s)
  Transition zone: ~3% ≈ 0.75s
*/

@keyframes slideMain {
  0%      { opacity: 1; transform: scale(1); }
  17%     { opacity: 1; transform: scale(1); }
  20%     { opacity: 0; transform: scale(1.05); }
  97%     { opacity: 0; transform: scale(0.95); }
  100%    { opacity: 1; transform: scale(1); }
}

@keyframes captionMain {
  0%      { opacity: 0; }
  3%      { opacity: 1; }
  17%     { opacity: 1; }
  20%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ===========================
   Slide 2: NEWSPAPER SPIN
   Spins in like a headline, 720° rotation + scale from 0
   =========================== */
.slide--spin {
  animation: slideSpin var(--cycle) ease-in-out infinite;
}

.slide--spin figcaption {
  animation: captionSpin var(--cycle) ease-in-out infinite;
}

@keyframes slideSpin {
  0%      { opacity: 0; transform: scale(0) rotate(0deg); }
  17%     { opacity: 0; transform: scale(0) rotate(0deg); }
  20%     { opacity: 1; transform: scale(1) rotate(720deg); }
  37%     { opacity: 1; transform: scale(1) rotate(720deg); }
  40%     { opacity: 0; transform: scale(0) rotate(1080deg); }
  100%    { opacity: 0; }
}

@keyframes captionSpin {
  0%      { opacity: 0; }
  23%     { opacity: 0; }
  26%     { opacity: 1; }
  37%     { opacity: 1; }
  40%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ===========================
   Slide 3: BOUNCE DROP
   Falls from above and bounces into place
   =========================== */
.slide--bounce {
  animation: slideBounce var(--cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.slide--bounce figcaption {
  animation: captionBounce var(--cycle) ease-in-out infinite;
}

@keyframes slideBounce {
  0%      { opacity: 0; transform: translateY(-120%) rotate(-8deg); }
  37%     { opacity: 0; transform: translateY(-120%) rotate(-8deg); }
  40%     { opacity: 1; transform: translateY(5%) rotate(2deg); }
  42%     { opacity: 1; transform: translateY(-3%) rotate(-1deg); }
  44%     { opacity: 1; transform: translateY(0%) rotate(0deg); }
  57%     { opacity: 1; transform: translateY(0%) rotate(0deg); }
  60%     { opacity: 0; transform: translateY(120%) rotate(10deg); }
  100%    { opacity: 0; }
}

@keyframes captionBounce {
  0%      { opacity: 0; }
  44%     { opacity: 0; }
  46%     { opacity: 1; }
  57%     { opacity: 1; }
  60%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ===========================
   Slide 4: 3D FLIP
   Flips in on the Y axis like a card
   =========================== */
.slide--flip {
  animation: slideFlip var(--cycle) ease-in-out infinite;
  backface-visibility: hidden;
}

.slide--flip figcaption {
  animation: captionFlip var(--cycle) ease-in-out infinite;
}

@keyframes slideFlip {
  0%      { opacity: 0; transform: perspective(1200px) rotateY(-180deg) scale(0.8); }
  57%     { opacity: 0; transform: perspective(1200px) rotateY(-180deg) scale(0.8); }
  60%     { opacity: 1; transform: perspective(1200px) rotateY(0deg) scale(1); }
  62%     { opacity: 1; transform: perspective(1200px) rotateY(10deg) scale(1); }
  64%     { opacity: 1; transform: perspective(1200px) rotateY(0deg) scale(1); }
  77%     { opacity: 1; transform: perspective(1200px) rotateY(0deg) scale(1); }
  80%     { opacity: 0; transform: perspective(1200px) rotateY(180deg) scale(0.8); }
  100%    { opacity: 0; }
}

@keyframes captionFlip {
  0%      { opacity: 0; }
  64%     { opacity: 0; }
  66%     { opacity: 1; }
  77%     { opacity: 1; }
  80%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ===========================
   Slide 5: WOBBLE ZOOM
   Zooms from huge + wobbles side to side
   =========================== */
.slide--wobble {
  animation: slideWobble var(--cycle) ease-in-out infinite;
}

.slide--wobble figcaption {
  animation: captionWobble var(--cycle) ease-in-out infinite;
}

@keyframes slideWobble {
  0%      { opacity: 0; transform: scale(3) rotate(15deg); }
  77%     { opacity: 0; transform: scale(3) rotate(15deg); }
  80%     { opacity: 1; transform: scale(1.1) rotate(-5deg); }
  82%     { opacity: 1; transform: scale(0.95) rotate(4deg); }
  84%     { opacity: 1; transform: scale(1.02) rotate(-2deg); }
  86%     { opacity: 1; transform: scale(1) rotate(0deg); }
  95%     { opacity: 1; transform: scale(1) rotate(0deg); }
  98%     { opacity: 0; transform: scale(0.5) rotate(-20deg); }
  100%    { opacity: 0; transform: scale(0.5) rotate(-20deg); }
}

@keyframes captionWobble {
  0%      { opacity: 0; }
  86%     { opacity: 0; }
  88%     { opacity: 1; }
  95%     { opacity: 1; }
  98%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ===========================
   Drifting "bennage.com" text
   =========================== */
.drift-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

.drift {
  position: absolute;
  white-space: nowrap;
  font-family: var(--font-fun);
  font-weight: 700;
  opacity: 0;
  will-change: transform, opacity;
}

/* Each instance has a unique size, color, vertical position, speed, and delay */
.drift--1 {
  font-family: 'Bangers', cursive;
  font-size: clamp(3rem, 8vw, 6rem);
  top: 12%;
  color: rgba(0, 210, 255, 0.25);
  animation: driftLTR 14s linear 2s infinite;
}

.drift--2 {
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.5rem, 4vw, 3rem);
  top: 55%;
  color: rgba(255, 56, 100, 0.2);
  animation: driftRTL 18s linear 7s infinite;
}

.drift--3 {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(4rem, 12vw, 9rem);
  top: 75%;
  color: rgba(170, 255, 0, 0.15);
  animation: driftLTR 22s linear 0s infinite;
  transform: rotate(-5deg);
}

.drift--4 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.8rem, 2vw, 1.4rem);
  top: 30%;
  color: rgba(255, 210, 0, 0.25);
  animation: driftRTL 11s linear 12s infinite;
}

.drift--5 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 6vw, 4.5rem);
  top: 88%;
  color: rgba(200, 80, 255, 0.2);
  animation: driftLTR 16s linear 5s infinite;
  transform: rotate(3deg);
}

.drift--6 {
  font-family: 'Silkscreen', monospace;
  font-size: clamp(1.5rem, 4vw, 3rem);
  top: 42%;
  color: rgba(255, 140, 50, 0.18);
  animation: driftRTL 25s linear 15s infinite;
  transform: rotate(-2deg);
}

.drift--7 {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.2rem, 3.5vw, 2.5rem);
  top: 5%;
  color: rgba(0, 255, 170, 0.22);
  animation: driftLTR 13s linear 9s infinite;
  transform: rotate(6deg);
}

@keyframes driftLTR {
  0%   { opacity: 0;   left: -30%; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0;   left: 110%; }
}

@keyframes driftRTL {
  0%   { opacity: 0;   left: 110%; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0;   left: -30%; }
}

/* ===========================
   Fun Facts
   =========================== */
.fun-facts {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.fun-facts h2 {
  font-family: var(--font-fun);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.facts-list {
  list-style: none;
  font-size: 1.2rem;
  line-height: 2.2;
}

.facts-list li {
  animation: fadeInUp 0.5s ease-out both;
}

.facts-list li:nth-child(1) { animation-delay: 0.3s; }
.facts-list li:nth-child(2) { animation-delay: 0.4s; }
.facts-list li:nth-child(3) { animation-delay: 0.5s; }
.facts-list li:nth-child(4) { animation-delay: 0.6s; }

/* ===========================
   Footer
   =========================== */
.site-footer {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.footer-small {
  font-family: var(--font-fun);
  font-size: 0.85rem;
  margin-top: var(--space-xs);
}

/* ===========================
   Animations
   =========================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 600px) {
  .slideshow-container {
    border-radius: 0;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Just show the main slide when motion is reduced */
  .slide--main {
    opacity: 1;
  }
}