/* ==========================================================================
   Footer - movie poster credits style
   Extracted from style.css. Depends on the Bangers and Inter web fonts.
   The palette variables are redeclared here so this file also works on its
   own; the values match style.css, so loading both is harmless.
   ========================================================================== */

:root {
  --comic-red: #FF3B3B;
  --comic-yellow: #FFD93D;
  --comic-black: #2C2C2C;
}

/* === FOOTER === */
/* === FOOTER - MOVIE POSTER CREDITS STYLE === */
footer {
  background: #0a0a0a;
  color: #d4d4d4;
  padding: 4rem 2rem 3rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #333;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.3) 50%,
      rgba(0,0,0,0.6) 100%
    );
  pointer-events: none;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 3rem;
  align-items: center;
}

.footer-left {
  flex: 0 0 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-right {
  flex: 1;
  text-align: center;
}

.burst-wrap-footer {
  position: relative;
  width: 100%;
  max-width: 280px;
  animation: pulseGlowFooter 3s ease-in-out infinite;
}

@keyframes pulseGlowFooter {
  0%, 100% {
    transform: scale(1) rotate(-8deg);
    filter: drop-shadow(8px 8px 0 rgba(0,0,0,.3));
  }
  50% {
    transform: scale(1.02) rotate(-8deg);
    filter: drop-shadow(10px 10px 0 rgba(0,0,0,.4));
  }
}

.burst-svg-footer {
  width: 100%;
  height: auto;
  display: block;
}

.tagline-footer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bangers', cursive;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--comic-red);
  text-shadow: 3px 3px 0 var(--comic-black);
  text-align: center;
  letter-spacing: 3px;
  line-height: 1.1;
  transform: rotate(-2deg);
  pointer-events: none;
  animation: taglinePulseFooter 3s ease-in-out infinite;
}

@keyframes taglinePulseFooter {
  0%, 100% {
    transform: rotate(-2deg) scale(1);
  }
  50% {
    transform: rotate(-2deg) scale(1.03);
  }
}

.credits-title {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: var(--comic-yellow);
  margin-bottom: 2rem;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  text-decoration: none;
  background: white;
  border: 2px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
  border-radius: 50%;
  position: relative;
}

.social-link:hover {
  background: var(--comic-yellow);
  border-color: var(--comic-yellow);
  transform: scale(1.1);
}

/* Credits block - movie poster style */
.credits-block {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.credits-line {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin: 0.75rem 0;
  line-height: 1.8;
}

.credits-copyright {
  font-weight: 700;
  color: #aaa;
  margin-top: 1.5rem;
}

.credits-tagline {
  font-size: 0.7rem;
  font-style: italic;
  color: #666;
  letter-spacing: 1px;
  margin-top: 1rem;
}

.backstage-link {
  color: var(--comic-yellow);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 3px;
  transition: all 0.2s;
  display: inline-block;
  padding: 0.5rem 0;
}

.backstage-link:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,217,61,0.5);
}

/* Footer bottom bar - black on white. Three equal-width columns rather than
   one centered line of bullet-separated links, so PRIVACY, the copyright and
   MISSION CONTROL can sit left/center/right without the copyright drifting
   off true center whenever the links either side of it change length. */
.footer-bottom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  color: var(--comic-black);
  padding: 0.75rem 2rem;
  margin-top: 3rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.backstage-link-bottom {
  color: var(--comic-black);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s;
}

.backstage-link-bottom:hover {
  color: var(--comic-red);
}

.footer-bottom-left,
.footer-bottom-center,
.footer-bottom-right {
  flex: 1 1 0;
}
.footer-bottom-left { text-align: left; }
.footer-bottom-center { text-align: center; }
.footer-bottom-right { text-align: right; }

.footer-copyright {
  font-weight: 400;
}

/* === MISSION CONTROL === */
/* The trigger sits among the <a> links either side of it and has to read as one
   of them - a <button> inherits none of that on its own in most browsers, so
   every property .backstage-link-bottom or .footer-bottom would otherwise have
   handed it for free is restated here. */
.mc-trigger {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.mc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
}
/* [hidden] is a browser default, not something a class selector normally
   beats on specificity - but author CSS always outranks the browser's own
   stylesheet regardless of specificity, so a plain display rule here would
   show this on every page load. Caught by actually loading the page rather
   than trusting the markup. */
.mc-overlay[hidden] { display: none; }

/* The box centers itself, rather than the overlay centering it with flex, so
   dragging only ever has to change left/top: nothing about the overlay's own
   layout has to change underneath it once a drag starts. */
.mc-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-0.6deg);
  width: min(360px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  box-sizing: border-box;

  /* Graph paper: two faint rules, one every 18px, so the box reads as a page
     torn out of a pad rather than a plain blue-tinted card. */
  background-color: #f4f8ff;
  background-image:
    linear-gradient(#c6d9f5 1px, transparent 1px),
    linear-gradient(90deg, #c6d9f5 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: -1px -1px;

  color: #1d3f91;
  border: 2px solid #1d3f91;
  border-radius: 1px;
  /* A line drawn twice, the way a ballpoint redraws an edge it was not quite
     happy with the first time - cheaper and steadier than an SVG wobble, and
     it reads the same way at a glance. */
  box-shadow: 2px 2px 0 0 #1d3f91, 1px -1px 0 0 #1d3f91;
  padding: 1.9rem 1.5rem 1.6rem;
  text-align: center;
}

.mc-close {
  position: absolute;
  top: 0.3rem;
  right: 0.85rem;
  background: none;
  border: none;
  color: #1d3f91;
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.mc-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 0 0.5rem 0.6rem;
}

.mc-msg {
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 0 0 1.1rem;
  text-transform: none;
  letter-spacing: normal;
}

.mc-btn {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-transform: none;
  background: #fff;
  color: #1d3f91;
  border: 2px solid #1d3f91;
  border-radius: 1px;
  box-shadow: 1.5px 1.5px 0 0 #1d3f91;
  padding: 0.45rem 1.2rem;
  cursor: pointer;
  transform: rotate(0.4deg);
  transition: background 0.15s;
}
/* Same [hidden]-vs-display trap as .mc-overlay above: an explicit display
   rule always beats the browser's own [hidden] default, so the signed-out
   mcSignOut button - empty of text, hidden set, but never actually hidden -
   was rendering as a blank outlined box next to Sign in with Google. */
.mc-btn[hidden] { display: none; }

.mc-btn:hover { background: #e3ecfc; }

.mc-btn-ghost { transform: rotate(-0.5deg); }

.mc-btn-ghost:hover { background: #e3ecfc; }

/* Footer mobile responsive */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-left {
    flex: 1 1 auto;
  }

  .burst-wrap-footer {
    max-width: 200px;
  }

  .tagline-footer {
    font-size: 1.5rem;
  }

  .credits-title {
    font-size: 1.2rem;
  }

  /* Three equal flex columns run out of room at phone width before the
     text does - PRIVACY held one line but the copyright and MISSION
     CONTROL both wrapped to two, each at a different ragged width. Stacked
     and centered reads as one clean block instead. */
  .footer-bottom {
    flex-direction: column;
    gap: 0.4rem;
  }
  .footer-bottom-left,
  .footer-bottom-center,
  .footer-bottom-right {
    text-align: center;
  }
}

/* Social icons enlarge on narrow screens */
@media (max-width: 768px) {
  .social-links {
    gap: 1rem;
  }

  .social-link {
    width: 60px;
    height: 60px;
  }
}

/* ==========================================================================
   Storefront menu
   Collapses the marketplace links so the social row stays scannable.
   ========================================================================== */

.shop-menu {
  margin-top: 2.5rem;
  position: relative;
}

.shop-toggle {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--comic-yellow);
  background: transparent;
  border: 2px solid var(--comic-yellow);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.shop-toggle:hover,
.shop-toggle[aria-expanded="true"] {
  background: var(--comic-yellow);
  color: var(--comic-black);
}

.shop-caret {
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.2s;
}

.shop-toggle[aria-expanded="true"] .shop-caret {
  transform: rotate(180deg);
}

.shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  max-width: 720px;
  margin: 1.25rem auto 0;
  text-align: left;
}

.shop-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  text-decoration: none;
  color: #d4d4d4;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.shop-item:hover {
  border-color: var(--comic-yellow);
  color: #fff;
  background: rgba(255, 217, 61, 0.08);
}

.shop-item img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 4px;
}

@media (max-width: 768px) {
  .shop-list {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* ==========================================================================
   Minimal footer
   Social icons over the white bottom bar, for pages that do not need the
   full credits block. Built by tools/build-footer.py from the same markup.
   ========================================================================== */

.footer-minimal {
  /* A shallow band - just the icons, evenly inset. The footer script rotates
     each icon up to 15deg, which pushes its corners about 6px past the 50px
     line box, so the visible space reads roughly 6px smaller than the padding
     on both sides. Keep the two values equal: splitting them looks like a
     mistake, and anything under 0.5rem lets overflow: hidden clip the corners. */
  padding: 0.75rem 2rem;
}

.footer-minimal::before { display: none; }

.footer-minimal .social-links {
  margin-bottom: 0;
}

/* The full footer wants space above the bar; this one is meant to close on it. */
.footer-minimal + .footer-bottom {
  margin-top: 0;
}