/* M4 — Motion: parallax + micro-animations (reduced-motion safe) */

:root {
  --pc-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pc-parallax-shift: 0px;
  --pc-band-min: 11rem;
  --pc-band-vh: 36vh;
  --pc-band-max: 20rem;
  --pc-layer-top: -70%;
  --pc-layer-height: 240%;
}

/* Scenery bands — driven by CSS vars (config tool / pc-motion.js) */
.wsite-section.wsite-section-effect-parallax {
  height: clamp(var(--pc-band-min), var(--pc-band-vh), var(--pc-band-max)) !important;
  min-height: clamp(var(--pc-band-min), var(--pc-band-vh), var(--pc-band-max)) !important;
  box-sizing: border-box;
}

/*
 * Scroll-driven parallax (mobile + desktop): taller ::before layer,
 * JS sets --pc-parallax-shift. Gated by html.pc-parallax (reduced-motion off).
 */
html.pc-parallax .wsite-section-wrap:has(> .wsite-section-effect-parallax) {
  overflow: hidden;
}

html.pc-parallax .wsite-section-effect-parallax {
  position: relative;
  background-image: none !important;
  background-attachment: scroll !important;
}

html.pc-parallax .wsite-section-effect-parallax::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--pc-layer-top);
  height: var(--pc-layer-height);
  z-index: 0;
  pointer-events: none;
  background-image: var(--pc-parallax-bg);
  background-repeat: no-repeat;
  background-position: var(--pc-bg-pos-x, 50%) var(--pc-bg-pos-y, 50%);
  background-size: cover;
  will-change: transform;
  /* Instant — CSS transition on scroll-driven shift causes rubber-band lag */
  transition: none;
  transform: translate3d(0, var(--pc-parallax-shift), 0);
}

html.pc-parallax .wsite-section-effect-parallax > .wsite-section-content {
  position: relative;
  z-index: 1;
}

.wsite-section-wrap.pc-band-hidden {
  display: none !important;
}

/* Hero pixel field — canvas sits behind brand stack */
.wsite-header-section.pc-hero-pixels {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Slightly lifted so black pixels read against the field */
  background-color: var(--pc-hero-pixels-bg, #222) !important;
}

.pc-hero-pixels__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.wsite-header-section.pc-hero-pixels--applied {
  outline: 2px solid #da8044;
  outline-offset: -2px;
}

.pc-hero-logo {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

/* Hero entrance — only when motion is allowed; otherwise fully visible */
@media (prefers-reduced-motion: no-preference) {
  .pc-hero-brand .wsite-image img {
    animation: pc-hero-logo-in 900ms var(--pc-motion-ease) both;
  }

  .pc-hero-brand .pc-hero-title {
    animation: pc-hero-type-in 700ms var(--pc-motion-ease) 160ms both;
  }

  .pc-hero-brand .pc-hero-tagline {
    animation: pc-hero-type-in 700ms var(--pc-motion-ease) 280ms both;
  }
}

@keyframes pc-hero-logo-in {
  from {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pc-hero-type-in {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Selective reveals: visible by default.
 * JS adds .pc-will-reveal only when motion is allowed; then .pc-revealed on enter.
 */
@media (prefers-reduced-motion: no-preference) {
  .pc-reveal.pc-will-reveal {
    transition:
      opacity 650ms var(--pc-motion-ease),
      transform 650ms var(--pc-motion-ease);
    transition-delay: calc(var(--pc-stagger, 0) * 50ms);
  }

  .pc-reveal.pc-will-reveal:not(.pc-revealed) {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  .pc-reveal.pc-will-reveal.pc-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /*
   * Scroll-scrubbed typewriter: visible by default.
   * JS adds .pc-will-type only when motion is allowed; chars stay in flow (opacity).
   */
  .pc-type.pc-will-type .pc-ch {
    opacity: 0;
  }

  .pc-type.pc-will-type .pc-ch.pc-ch-on {
    opacity: 1;
  }

  .pc-type.pc-will-type .pc-ch.pc-ch-caret {
    box-shadow: 0.12em 0 0 currentColor;
  }
}

/*
 * WHO ARE WE — fighting-game character select.
 * Hover / focus / .pc-fighter-on → gold corner brackets + name plate.
 */
#who .galleryImageHolder {
  --pc-fighter-gold: #dab844;
  --pc-fighter-orange: #da8044;
  --pc-fighter-arm: clamp(0.7rem, 8%, 1.15rem);
  --pc-fighter-thick: 3px;
  background: #080808;
  isolation: isolate;
}

/* Aspect-ratio cells collapse the inner link — fill so the name plate anchors to the tile */
#who .galleryInnerImageHolder,
#who .galleryInnerImageHolder > a {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

/* Dark orange → black panel behind the sprite */
#who .galleryImageHolder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 85% 80% at 50% 40%,
    var(--pc-fighter-orange) 0%,
    #6b2e10 48%,
    #080808 100%
  );
}

/* Punch out baked-in PNG black so the panel shows behind the character */
#who .galleryImageHolder:hover .galleryImage,
#who .galleryImageHolder:focus-within .galleryImage,
#who .galleryImageHolder.pc-fighter-on .galleryImage {
  mix-blend-mode: lighten;
}

/* Inset L-brackets (8 gradient segments) */
#who .galleryImageHolder::before {
  content: "";
  position: absolute;
  inset: 0.4rem;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--pc-fighter-gold), var(--pc-fighter-gold)) 0 0 /
      var(--pc-fighter-arm) var(--pc-fighter-thick) no-repeat,
    linear-gradient(var(--pc-fighter-gold), var(--pc-fighter-gold)) 0 0 /
      var(--pc-fighter-thick) var(--pc-fighter-arm) no-repeat,
    linear-gradient(var(--pc-fighter-gold), var(--pc-fighter-gold)) 100% 0 /
      var(--pc-fighter-arm) var(--pc-fighter-thick) no-repeat,
    linear-gradient(var(--pc-fighter-gold), var(--pc-fighter-gold)) 100% 0 /
      var(--pc-fighter-thick) var(--pc-fighter-arm) no-repeat,
    linear-gradient(var(--pc-fighter-gold), var(--pc-fighter-gold)) 0 100% /
      var(--pc-fighter-arm) var(--pc-fighter-thick) no-repeat,
    linear-gradient(var(--pc-fighter-gold), var(--pc-fighter-gold)) 0 100% /
      var(--pc-fighter-thick) var(--pc-fighter-arm) no-repeat,
    linear-gradient(var(--pc-fighter-gold), var(--pc-fighter-gold)) 100% 100% /
      var(--pc-fighter-arm) var(--pc-fighter-thick) no-repeat,
    linear-gradient(var(--pc-fighter-gold), var(--pc-fighter-gold)) 100% 100% /
      var(--pc-fighter-thick) var(--pc-fighter-arm) no-repeat;
  filter: drop-shadow(0 0 0.35rem rgba(218, 128, 68, 0.55));
}

/* Name plate — bottom bar, not full-bleed Weebly overlay */
#who .galleryCaptionHolder.fullImageGalleryCaption {
  height: auto !important;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

#who .galleryCaptionHolder.fullImageGalleryCaption > .galleryCaptionHolderInner,
#who .galleryCaptionHolder.fullImageGalleryCaption .galleryCaptionInnerTextHolder {
  height: auto !important;
  display: block;
  margin-bottom: 0 !important;
}

#who .galleryCaptionHolderInnerBg {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(8, 8, 8, 0.55) 35%,
    rgba(8, 8, 8, 0.92) 100%
  ) !important;
  opacity: 1 !important;
}

#who .galleryCaptionInnerTextHolder {
  padding: 1.1rem 0.4rem 0.45rem;
}

#who .galleryCaptionInnerText {
  color: var(--pc-fighter-gold) !important;
  font: 700 clamp(0.8rem, 2.2vw + 0.55rem, 1.05rem) / 1.15 var(--pc-font-display, "Pixelify Sans", sans-serif) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 0.5rem rgba(218, 128, 68, 0.45);
}

@media (max-width: 767px) {
  #who .galleryCaptionInnerText {
    letter-spacing: 0.05em;
  }
}

#who .galleryImageHolder:hover::before,
#who .galleryImageHolder:focus-within::before,
#who .galleryImageHolder.pc-fighter-on::before,
#who .galleryImageHolder:hover::after,
#who .galleryImageHolder:focus-within::after,
#who .galleryImageHolder.pc-fighter-on::after {
  opacity: 1;
}

#who .galleryImageHolder:hover .galleryCaptionHolder,
#who .galleryImageHolder:focus-within .galleryCaptionHolder,
#who .galleryImageHolder.pc-fighter-on .galleryCaptionHolder {
  opacity: 1 !important;
  display: block !important;
}

/* Micro polish — gallery select + partner logos */
@media (prefers-reduced-motion: no-preference) {
  #who .galleryImageHolder::before,
  #who .galleryImageHolder::after,
  #who .galleryCaptionHolder {
    transition: opacity 160ms var(--pc-motion-ease);
  }

  #who .galleryImageHolder:hover::before,
  #who .galleryImageHolder:focus-within::before,
  #who .galleryImageHolder.pc-fighter-on::before {
    animation: pc-fighter-pulse 1.1s ease-in-out infinite;
  }

  #who .galleryImageHolder .galleryInnerImageHolder {
    transition: transform 200ms var(--pc-motion-ease);
  }

  #who .galleryImageHolder:hover .galleryInnerImageHolder,
  #who .galleryImageHolder:focus-within .galleryInnerImageHolder,
  #who .galleryImageHolder.pc-fighter-on .galleryInnerImageHolder {
    transform: scale(1.03);
  }

  #supported .pc-logo-grid .wsite-image img {
    transition:
      opacity 180ms var(--pc-motion-ease),
      transform 180ms var(--pc-motion-ease);
  }

  #supported .pc-logo-grid .wsite-image:hover img,
  #supported .pc-logo-grid .wsite-image:focus-within img {
    opacity: 0.85;
    transform: scale(1.04);
  }
}

@keyframes pc-fighter-pulse {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 0.35rem rgba(218, 128, 68, 0.55));
  }
  50% {
    opacity: 0.72;
    filter: drop-shadow(0 0 0.55rem rgba(218, 184, 68, 0.85));
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  /* Marquee owns motion — don't fight it with hover scale */
  #supported .pc-logo-grid .wsite-image:hover img,
  #supported .pc-logo-grid .wsite-image:focus-within img {
    transform: none;
  }
}

/* Kill-switch: no entrance / reveal / hover motion */
@media (prefers-reduced-motion: reduce) {
  .wsite-section-effect-parallax {
    background-attachment: scroll !important;
  }

  .pc-hero-pixels__canvas {
    display: none !important;
  }

  .pc-hero-brand .wsite-image img,
  .pc-hero-brand .pc-hero-title,
  .pc-hero-brand .pc-hero-tagline {
    animation: none !important;
  }

  .pc-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .pc-type.pc-will-type .pc-ch {
    opacity: 1 !important;
    box-shadow: none !important;
  }

  #who .galleryImageHolder::before,
  #who .galleryImageHolder::after,
  #who .galleryCaptionHolder,
  #who .galleryImageHolder .galleryInnerImageHolder,
  #supported .pc-logo-grid .wsite-image img {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  #supported .pc-logo-grid .wsite-multicol-tr {
    animation: none !important;
  }
}