/* ==========================================================================
   Kids Movie: comic-book superhero team-up styles
   Every movie page and card picks one theme class (.theme-<name>), which sets
   the custom properties below. To style a new sequel, add a .theme-<name>
   block and set `theme: <name>` in config/movies.yml.
   ========================================================================== */

:root {
  --ink: #0b0b1a;
  --paper: #fff8e7;
  --text: #ffffff;
  --body-font: "Nunito", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
}

/* ---------- Themes ---------- */

.theme-team {
  --hero: #ffcc00;
  --hero-2: #ff3b5c;
  --bg-1: #2a1d6e;
  --bg-2: #0b0b24;
  --display: "Bangers", "Impact", sans-serif;
  --tracking: 0.04em;
  --pattern: repeating-conic-gradient(from 0deg at 50% -20%, rgb(255 255 255 / 0.04) 0 6deg, transparent 6deg 12deg);
}

/* Movie 1: crackling storm, red and gold */
.theme-lightning {
  --hero: #ffd23f;
  --hero-2: #ff3b30;
  --bg-1: #c8161d;
  --bg-2: #3d050c;
  --display: "Bangers", "Impact", sans-serif;
  --tracking: 0.05em;
  --pattern: repeating-linear-gradient(115deg, rgb(255 210 63 / 0.13) 0 3px, transparent 3px 46px);
  --emblem-anim: flicker 3.2s infinite;
}

/* Movie 2: icy fortress, cyan and white */
.theme-frost {
  --hero: #e6fbff;
  --hero-2: #22b8f0;
  --bg-1: #0b7aa3;
  --bg-2: #061c3a;
  --display: "Russo One", "Arial Black", sans-serif;
  --tracking: 0.02em;
  --pattern:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.35) 0 1.5px, transparent 2.5px) 0 0 / 60px 60px,
    radial-gradient(circle at 70% 80%, rgb(255 255 255 / 0.25) 0 1px, transparent 2px) 0 0 / 40px 40px,
    repeating-linear-gradient(60deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-60deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 28px);
  --emblem-anim: spin 18s linear infinite;
}

/* Movie 3: wild jungle, lime and leaf green */
.theme-jungle {
  --hero: #d4f78a;
  --hero-2: #ff8a1f;
  --bg-1: #17803d;
  --bg-2: #04260f;
  --display: "Luckiest Guy", "Impact", sans-serif;
  --tracking: 0.03em;
  --pattern:
    radial-gradient(ellipse 40px 18px at 30% 40%, rgb(212 247 138 / 0.12) 60%, transparent 62%) 0 0 / 120px 90px,
    radial-gradient(ellipse 18px 40px at 75% 70%, rgb(0 0 0 / 0.16) 60%, transparent 62%) 0 0 / 120px 90px;
  --emblem-anim: sway 2.6s ease-in-out infinite;
}

/* Movie 4: deep space, violet and pink */
.theme-cosmic {
  --hero: #f7b5ff;
  --hero-2: #8b5cf6;
  --bg-1: #4a148c;
  --bg-2: #07021a;
  --display: "Orbitron", "Arial Black", sans-serif;
  --tracking: 0.04em;
  --pattern:
    radial-gradient(circle, rgb(255 255 255 / 0.85) 0 1px, transparent 1.5px) 0 0 / 97px 89px,
    radial-gradient(circle, rgb(247 181 255 / 0.7) 0 1px, transparent 1.5px) 31px 47px / 131px 113px,
    radial-gradient(circle, rgb(255 255 255 / 0.5) 0 0.8px, transparent 1.3px) 61px 13px / 53px 61px;
  --emblem-anim: pulse 2.4s ease-in-out infinite;
}

/* Sequels / unknown: classified, neon on slate */
.theme-mystery {
  --hero: #b6f24a;
  --hero-2: #64748b;
  --bg-1: #273244;
  --bg-2: #05070d;
  --display: "Bangers", "Impact", sans-serif;
  --tracking: 0.05em;
  --pattern:
    linear-gradient(rgb(182 242 74 / 0.07) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(182 242 74 / 0.07) 1px, transparent 1px) 0 0 / 32px 32px;
  --emblem-anim: pulse 3s ease-in-out infinite;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--body-font);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--pattern), radial-gradient(ellipse at 50% 0%, var(--bg-1), var(--bg-2) 75%) var(--bg-2);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Comic halftone dots over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(rgb(0 0 0 / 0.22) 1px, transparent 1.6px) 0 0 / 7px 7px;
  mask-image: linear-gradient(to bottom, black, transparent 60%);
  z-index: 0;
}

main { flex: 1; position: relative; z-index: 1; }

a { color: inherit; }

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

code {
  font-size: 0.9em;
  background: rgb(0 0 0 / 0.35);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

.icon { width: 1em; height: 1em; flex: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.2em;
  font-family: "Bangers", "Impact", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--hero);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.btn:hover,
.btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn-big { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.btn-small { font-size: 1.1rem; padding: 0.35em 0.9em; box-shadow: 3px 3px 0 var(--ink); }
.btn-ghost { background: transparent; color: var(--hero); border-color: var(--hero); box-shadow: none; }

:focus-visible { outline: 3px solid var(--hero); outline-offset: 3px; }

/* ---------- Header / footer ---------- */

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-shield {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--hero-2);
  filter: drop-shadow(3px 3px 0 var(--ink));
}

.logo-shield .icon { position: absolute; inset: 0; width: 100%; height: 100%; }

.logo-shield span {
  position: relative;
  margin-top: -4px;
  font-family: "Bangers", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--hero);
  -webkit-text-stroke: 1px var(--ink);
}

.logo-text {
  font-family: "Bangers", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  color: var(--text);
  text-shadow: 3px 3px 0 var(--ink);
}

.site-nav a {
  font-family: "Bangers", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.25em 0.8em;
  border: 3px solid var(--hero);
  border-radius: var(--radius);
  color: var(--hero);
}

.site-nav a:hover { background: var(--hero); color: var(--ink); }

.site-footer {
  position: relative;
  z-index: 1;
  padding: 32px var(--gutter);
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* ---------- Home: hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(56px, 9vw, 120px);
  isolation: isolate;
  overflow: hidden;
}

.hero-burst {
  position: absolute;
  inset: -50% -25%;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgb(255 204 0 / 0.22) 0 7deg, transparent 7deg 14deg);
  mask-image: radial-gradient(circle at 50% 45%, black 0, transparent 60%);
  animation: spin 90s linear infinite;
}

.kicker {
  margin: 0 0 8px;
  display: inline-block;
  padding: 0.2em 1em;
  font-family: "Bangers", sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--ink);
}

.hero-title {
  margin: 0.1em 0 0.2em;
  font-family: "Bangers", sans-serif;
  font-weight: 400;
  font-size: clamp(4rem, 17vw, 11rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--hero);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink), 12px 12px 0 var(--hero-2);
  transform: rotate(-4deg) skew(-4deg);
}

.hero-title span { display: inline-block; }
.hero-title span + span { color: var(--paper); }

.hero-sub {
  max-width: 34ch;
  margin: 0.6em 0 1.4em;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--ink);
}

.hero-icons { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero-icon {
  position: absolute;
  width: clamp(48px, 9vw, 110px);
  height: clamp(48px, 9vw, 110px);
  filter: drop-shadow(5px 5px 0 var(--ink));
  animation: float 5s ease-in-out infinite;
}

.hero-icon-1 { color: #ffd23f; top: 12%; left: 7%; transform: rotate(-12deg); }
.hero-icon-2 { color: #7dd8ff; top: 18%; right: 8%; animation-delay: -1.3s; }
.hero-icon-3 { color: #9be15d; bottom: 14%; left: 12%; animation-delay: -2.6s; }
.hero-icon-4 { color: #f7b5ff; bottom: 10%; right: 12%; animation-delay: -3.9s; }

/* ---------- Home: movie cards ---------- */

.missions { padding: 0 var(--gutter) 64px; max-width: 1280px; margin: 0 auto; }

.section-title {
  margin: 0 0 32px;
  text-align: center;
}

.section-title span {
  display: inline-block;
  padding: 0.1em 0.8em;
  font-family: "Bangers", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--hero);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--hero-2);
  transform: rotate(-2deg);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 36px 28px;
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  background: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--hero-2);
  overflow: hidden;
  transform: rotate(-1.2deg);
  transition: transform 0.18s, box-shadow 0.18s;
}

.card:nth-child(even) { transform: rotate(1.2deg); }

.card:hover,
.card:focus-visible {
  transform: translate(-4px, -6px) rotate(0deg) scale(1.02);
  box-shadow: 14px 14px 0 var(--hero-2);
}

.card-art {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--pattern), radial-gradient(circle at 50% 40%, var(--bg-1), var(--bg-2) 80%) var(--bg-2);
  border-bottom: 4px solid var(--ink);
}

.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.card-emblem {
  width: 46%;
  height: 46%;
  color: var(--hero);
  filter: drop-shadow(6px 6px 0 var(--ink));
  transition: transform 0.3s;
}

.card:hover .card-emblem { transform: scale(1.15) rotate(-8deg); }

.card-number {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0 0.45em;
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--ink);
  background: var(--hero);
  border: 3px solid var(--ink);
  transform: rotate(-6deg);
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  padding: 16px 18px 20px;
}

.card-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: var(--tracking);
  color: var(--hero);
}

.card-tagline { margin: 0 0 10px; font-weight: 700; opacity: 0.9; flex: 1; }

.is-coming-soon .card-art::after {
  content: "Top secret";
  position: absolute;
  padding: 0.1em 0.7em;
  font-family: "Bangers", sans-serif;
  font-size: 2rem;
  letter-spacing: 0.08em;
  color: #ff4d4d;
  border: 4px solid #ff4d4d;
  border-radius: 4px;
  transform: rotate(-14deg);
  background: rgb(0 0 0 / 0.4);
}

.is-coming-soon .card-emblem { opacity: 0.45; }

/* ---------- Movie page ---------- */

.movie-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 5vw, 56px) var(--gutter) 32px;
}

.movie-emblem {
  width: clamp(80px, 14vw, 130px);
  height: clamp(80px, 14vw, 130px);
  color: var(--hero);
  filter: drop-shadow(6px 6px 0 var(--ink)) drop-shadow(0 0 28px var(--hero-2));
  animation: var(--emblem-anim, none);
}

.movie-emblem .icon { width: 100%; height: 100%; }

.issue-badge {
  margin: 16px 0 4px;
  padding: 0.1em 0.9em;
  font-family: "Bangers", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--hero);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-3deg);
}

.movie-title {
  margin: 0.15em 0 0.1em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.8rem, 10vw, 6.5rem);
  line-height: 1;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--hero);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink), 10px 10px 0 var(--hero-2);
}

/* Orbitron is wide, so the cosmic title runs smaller and glows instead of stacking shadows */
.theme-cosmic .movie-title {
  font-size: clamp(2rem, 8vw, 5.2rem);
  text-shadow: 4px 4px 0 var(--ink), 0 0 28px var(--hero-2);
}

.movie-tagline {
  margin: 0.4em 0 0;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--ink);
}

.movie-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.movie-meta li {
  padding: 0.15em 0.8em;
  font-weight: 700;
  border: 2px solid var(--hero);
  border-radius: 999px;
}

.player-panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.player,
.player-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 6px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 12px 12px 0 var(--hero-2);
}

.player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
  background: var(--pattern), radial-gradient(circle, var(--bg-1), var(--bg-2) 80%) var(--bg-2);
}

.player-placeholder p { margin: 0; }

.placeholder-icon {
  width: clamp(56px, 10vw, 96px);
  height: clamp(56px, 10vw, 96px);
  color: var(--hero);
  filter: drop-shadow(4px 4px 0 var(--ink));
  animation: var(--emblem-anim, none);
}

.placeholder-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: var(--tracking);
  color: var(--hero);
  text-shadow: 3px 3px 0 var(--ink);
}

.placeholder-hint { margin-top: 12px !important; font-size: 0.85rem; opacity: 0.7; }

.resume-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 24px;
  padding: 10px 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
}

.resume-note[hidden] { display: none; }

.like-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 28px;
}

.like-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 1.1em 0.4em 0.8em;
  font-family: "Bangers", "Impact", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}

.like-button:hover,
.like-button:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.like-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.like-button:disabled { cursor: progress; }

.like-button .icon { width: 1.35em; height: 1.35em; color: #d9d2c3; }
.like-button[aria-pressed="true"] { background: var(--hero); }
.like-button[aria-pressed="true"] .icon { color: #ff2d55; }
.like-button.pop .icon { animation: heart-pop 0.45s ease-out; }

.like-count {
  font-size: 1.15rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--ink);
}

.card-likes {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.05em 0.65em 0.05em 0.45em;
  font-weight: 900;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
}

.card-likes .icon { width: 1.15em; height: 1.15em; color: #ff2d55; }

.briefing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px;
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 0 var(--gutter);
}

.panel {
  position: relative;
  padding: 36px 24px 24px;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--ink);
}

.panel p { margin: 0; font-size: 1.1rem; }

.panel-title {
  position: absolute;
  top: -22px;
  left: 16px;
  margin: 0;
  padding: 0.05em 0.7em;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--hero);
  border: 3px solid var(--ink);
  transform: rotate(-2deg);
}

.power-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.power-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.9em;
  font-weight: 900;
  color: var(--text);
  background: var(--bg-1);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
}

.power-list .icon { color: var(--hero); }

.saga-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1100px;
  margin: 64px auto 0;
  padding: 0 var(--gutter);
}

.saga-link {
  display: flex;
  flex-direction: column;
  min-width: min(100%, 260px);
  padding: 14px 20px;
  text-decoration: none;
  color: var(--text);
  background: var(--pattern), linear-gradient(135deg, var(--bg-1), var(--bg-2)) var(--bg-2);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.15s;
}

.saga-link:hover { transform: translate(-3px, -3px); }
.saga-next { margin-left: auto; text-align: right; }

.saga-dir { font-size: 0.85rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }

.saga-name {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: var(--tracking);
  color: var(--hero);
  text-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Animations ---------- */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: 0.35; }
}

@keyframes sway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

@keyframes heart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.6) rotate(-12deg); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@media (max-width: 560px) {
  .logo-text { display: none; }
  .hero-icon { opacity: 0.5; }
  .saga-link { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}