/* Pixel Pearls marketing site.
   Palette is the fixed Arcade-Gold-sourced brand set from the app icon spec
   (docs/ux/mockups/app-icon-mockup.md). It must not follow the in-app theme. */
:root {
    --primary-color: #F5B800;
    --secondary-color: #38D7F7;
    --accent-color: #6558C9;

    /* Neutrals */
    --text-color: #F4F4F6;
    --text-color2: #B0B0BF;
    --text-color3: #82829B;

    --background-color0: #171522;
    --background-color1: #1E1850;
    --background-color2: #2C2470;
    --background-color3: #3A2F8F;
    --background-color4: #121216;
    --background-color5: #0E0C18;

    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);

    --bs-body-bg: var(--background-color0);
    --bs-primary-bg: var(--background-color0);
    --bs-secondary-bg: var(--background-color2);

    --bs-primary-color: var(--primary-color);
    --bs-secondary-color: var(--secondary-color);

    --bs-btn-border-color: var(--primary-color);

    /* Bootstrap modifications */
    --bs-border-color: var(--text-color);

    --bs-body-font-family: Inter, Arial, sans-serif;
    --bs-body-color: var(--text-color);
    --bs-modal-color: var(--text-color);
    --bs-danger: #FF4B63;
    --bs-danger-rgb: 255, 75, 99;
    --bs-progress-bg: var(--primary-color);
    --bs-border-radius: 0;
    --pp-background-primary-color: var(--primary-color);
    --pp-background-secondary-color: var(--secondary-color);
}

html {
  scroll-behavior: smooth;
  /* Keep section headings clear of the fixed header when anchor-navigating. */
  scroll-padding-top: 5.5rem;
}

.progress {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: 0;
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: var(--secondary-color);
  --bs-progress-bar-bg: var(--primary-color);
  --bs-progress-bar-transition: width 0.6s ease;
}

.alert-primary {
  --bs-alert-color: var(--text-color);
  --bs-alert-bg: var(--background-color1);
  --bs-alert-border-color: var(--primary-color);
  --bs-alert-link-color: var(--primary-color);
}

.btn {
  --bs-btn-color: var(--text-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--text-color);
  --bs-btn-border-radius: 0;
  --bs-btn-hover-border-color: var(--text-color);
  --bs-btn-hover-color: var(--text-color);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
}

.btn:focus-visible {
  --bs-btn-color: var(--text-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--text-color);
  --bs-btn-border-radius: 0;
  --bs-btn-hover-border-color: var(--text-color);
  --bs-btn-hover-color: var(--text-color);
  outline: 3px solid var(--secondary-color);
  outline-offset: 2px;
}

.btn-outline-primary {
  --bs-btn-color: var(--text-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: var(--background-color0);
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 245, 184, 0;
  --bs-btn-active-color: var(--background-color0);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-disabled-color: var(--primary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary-color);
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-color: var(--background-color0);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 56, 215, 247;
  --bs-btn-active-color: var(--background-color0);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-disabled-color: var(--secondary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--secondary-color);
  --bs-gradient: none;
}

.modal-backdrop {
  --bs-backdrop-opacity: 0.85;
}

.bg-fancy {
  background-image:
    radial-gradient(circle at top left,
      var(--background-color1) 0%, var(--background-color0) 35%,
      transparent 70%),
    linear-gradient(to top,
      var(--background-color1) 0%,
      var(--background-color0) 10%,
      var(--background-color0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.modal {
  --bs-modal-header-border-width: 0px;
}

.btn-close {
  --bs-btn-close-color: var(--text-color);
}

.btn-primary {
  --bs-btn-color: var(--background-color0);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: var(--background-color0);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 245, 184, 0;
  --bs-btn-active-color: var(--background-color0);
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-disabled-color: var(--text-color3);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--text-color3);
}

.btn-secondary {
  --bs-btn-color: var(--background-color0);
  --bs-btn-bg: var(--secondary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-color: var(--background-color0);
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 56, 215, 247;
  --bs-btn-active-color: var(--background-color0);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-disabled-color: var(--text-color3);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--text-color3);
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/Inter-VariableFont_opsz.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/Inter-Italic-VariableFont_opsz.ttf') format('truetype');
}

body {
  background-color: var(--background-color0);
}

/* Global links must meet WCAG contrast on the dark brand backgrounds.
   Bootstrap's default blue (#0d6efd) is ~4.0:1 here, so we pin links to the
   accessible cyan/gold brand colours. */
a {
  color: var(--secondary-color);
  text-decoration: underline;
}

a:hover {
  color: var(--primary-color);
}

a:focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 2px;
}

/* --- Skip link: only visible when focused --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background-color: var(--primary-color);
  color: var(--background-color0);
  padding: 0.7rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* --- Header: hidden on the fullscreen landing, revealed after scrolling.
   `scripting: enabled` applies before first paint, so there is no flash of the
   menu on load. Without JS the header stays static and the nav stays reachable.
   Keyboard focus still reveals the fixed header for accessibility. --- */
.site-header {
  position: static;
  background-color: var(--background-color0);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--background-color3);
}

@media (scripting: enabled) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    transform: translateY(-100%);
    transition: transform 0.3s ease, box-shadow 0.25s ease;
  }

  .site-header.visible,
  .site-header:focus-within {
    transform: translateY(0);
  }

  .site-header.scrolled {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.brand {
  font-weight: 700;
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  padding: 0.35rem 0.15rem;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--primary-color);
}

.site-nav a:focus-visible,
.brand:focus-visible,
.nav-toggle:focus-visible,
.preview-btn:focus-visible,
.preview-indicator:focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 2px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--text-color3);
  background-color: transparent;
  cursor: pointer;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: var(--text-color);
  content: "";
}

.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon::before {
  position: absolute;
  top: -0.4rem;
  left: 0;
}

.nav-toggle-icon::after {
  position: absolute;
  top: 0.4rem;
  left: 0;
}

/* Mobile hamburger, only when scripting is available. */
@media (scripting: enabled) and (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    width: 100%;
  }

  .site-nav.open {
    display: block;
    background-color: var(--background-color0);
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0.25rem;
  }
}

.pp-button-primary {
  background-color: var(--primary-color);
  color: var(--background-color0);
  border: none;
  border-radius: 0;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  display: inline-block;
  box-shadow: 4px 4px 0 var(--background-color5);
}

.pp-button-primary:hover {
  background-color: var(--secondary-color);
  color: var(--background-color0);
}

.pp-button-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--background-color5);
}

.pp-button-primary:focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 3px;
}

/* --- Hero: fullscreen landing --- */
.hero {
  position: relative;
  background: url('images/hero-desktop.png') no-repeat center center/cover;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 0 5rem;
}

.hero-inner {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.hero-tagline {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-color2);
}

/* Scrim keeps the headline readable and off the busy artwork/gem. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(14, 12, 24, 0.85) 0%,
    rgba(14, 12, 24, 0.6) 45%,
    rgba(14, 12, 24, 0.25) 100%
  );
}

.hero .container,
.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 30rem;
}

.hero h1 {
  color: var(--text-color);
  text-shadow: 0 0 10px var(--text-color3), 0 0 20px var(--text-color3), 0 0 30px var(--text-color3);
}

.hero-lead {
  font-size: 1.2rem;
  color: var(--text-color);
}

.hero-actions {
  margin-top: 1.75rem;
}

.hero-availability {
  margin-top: 1.5rem;
  color: var(--text-color2);
}

.hero-availability a {
  color: var(--secondary-color);
}

.hero-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.store-badge {
  display: block;
  width: auto;
  height: 3.5rem;
}

@media (max-width: 768px) {
  .hero {
    background: url('images/hero-mobile.png') no-repeat center center/cover;
    min-height: 100vh;
    min-height: 100svh;
    padding: 4rem 0 3rem;
  }

  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(14, 12, 24, 0.82) 0%,
      rgba(14, 12, 24, 0.4) 100%
    );
  }
}

/* --- How it works --- */
.step-card {
  background-color: var(--background-color0);
  border-top: 3px solid var(--primary-color);
  padding: 1.5rem;
  height: 100%;
}

.step-num {
  color: var(--primary-color);
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.family-note {
  background-color: var(--background-color1);
  border-left: 4px solid var(--primary-color);
  padding: 1.25rem 1.5rem;
}

/* --- Features --- */
#features {
  background-color: var(--background-color1);
  text-align: start;
}

#about3,
#why {
  background-color: var(--background-color1);
}

#testimonials {
  background-color: var(--background-color0);
}

/* Slow zoom behind the Why section artwork. */
@keyframes slowZoom {
  0%,
  100% {
    transform: scale(1);
    transform-origin: 25% 25%;
  }
  50% {
    transform: scale(1.2);
    transform-origin: 25% 25%;
  }
}

.image-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.image-container img {
  width: 120%;
  height: auto;
  animation: slowZoom 35s ease-in-out infinite;
}

.feature-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--background-color0);
  padding: 1.25rem;
  height: 100%;
}

.feature-ic {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
}

/* Responsive feature text: can shrink and wraps below the icon when space is
   tight (e.g. 200% text size) instead of overflowing the card. */
.feature-copy {
  flex: 1 1 8rem;
  min-width: 0;
}

/* --- Preview illustrations --- */
.previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.previews-enabled {
  display: block;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.preview-slide {
  margin: 0;
}

.preview-slide img {
  width: 100%;
  height: auto;
  border: 1px solid var(--background-color3);
}

.preview-slide figcaption {
  margin-top: 0.5rem;
  color: var(--text-color2);
}

.previews-controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.previews-enabled {
  display: block;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.previews-enabled .previews-controls {
  display: flex;
}

.previews-enabled .preview-slide:not(.active) {
  display: none;
}

.preview-indicators {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* 24px+ hit target for the indicator buttons. */
.preview-indicator {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background-color: var(--text-color3);
  cursor: pointer;
}

.preview-indicator.active {
  background-color: var(--primary-color);
}

/* --- FAQ --- */
.faq-list details {
  background-color: var(--background-color0);
  border: 1px solid var(--background-color3);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 600;
}

.faq-list p {
  margin-top: 0.75rem;
}

/* --- Footer --- */
.site-footer {
  background-color: var(--background-color0) !important;
}

.site-footer a {
  color: var(--primary-color);
}

.site-footer a:hover {
  color: var(--secondary-color);
}

.site-footer a:focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 2px;
}

/* 404 fills the space between the shared header and footer. */
.page-404 {
  min-height: calc(100vh - 12rem);
}

.text-notrelevant {
  opacity: 1;
  color: var(--text-color2);
}

/* Pixel-art generated artwork must never be smoothed by the browser. Imports
   such as store badges are NOT pixel art; do not force pixelated on them. */
.pixel-art,
img[src*="favicon/"] {
  image-rendering: pixelated;
}

/* Respect reduced-motion preferences: no smooth scroll, zoom, slide, or fade. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header,
  .nav-toggle,
  .pp-button-primary,
  .preview-slide {
    transition: none;
  }

  .image-container img {
    animation: none;
    width: 100%;
  }
}