/* bg-pattern.css — site-wide animated background: diagonal stripes,
   metallic shine, and SVG icon pattern overlay.
   Opacity-driven: starts transparent, fades in with body.reveal. */

/* hidden until .reveal triggers the transition */
body::before,
body::after,
.bg-icons {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ── diagonal stripes ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--bg) 0px,
    var(--bg) 32px,
    var(--surface) 32px,
    var(--surface) 64px
  );
  animation: stripe-pan 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes stripe-pan {
  0% { background-position: 0 0; }
  50%   { background-position: 0vh 3vh; }
  100% { background-position: 0 0; }
}

/* ── metallic shine ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0.06) 44%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 56%,
    rgba(255,255,255,0) 75%
  );
  background-size: 250% 250%;
  animation: metallic-shine 100s linear infinite;
  pointer-events: none;
}

@keyframes metallic-shine {
  0%, 100% { background-position: 0% 50%; }
  25%      { background-position: 100% 0%; }
  50%      { background-position: 100% 100%; }
  75%      { background-position: 0% 100%; }
}

/* ── SVG icon pattern overlay ── */
.bg-icons {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 10vh 10vh;
  animation: icon-pan 100s linear infinite;

}

@keyframes icon-pan {
  0% { background-position: 0 0; }
  100% { background-position: 100vh 100vh; }
}
.page-gaming    .bg-icons { background-image: var(--bg-icon-gamepad-sky); }
.page-about     .bg-icons { background-image: var(--bg-icon-person-violet); }
.page-devlog    .bg-icons { background-image: var(--bg-icon-devlog-orange); }
.page-devlog-post .bg-icons { background-image: var(--bg-icon-devlog-orange); }
.page-tra       .bg-icons { background-image: var(--bg-icon-envelope-indigo); }
.page-press     .bg-icons { background-image: var(--bg-icon-megaphone-gray); }
.page-support   .bg-icons { background-image: var(--bg-icon-heart-teal); }

/* ── reveal: backgrounds fade in to target opacities ── */
body.reveal::before  { opacity: 1; }
body.reveal::after   { opacity: 1; }
body.reveal .bg-icons { opacity: 0.06; }

/* ── content sits above backgrounds ── */
body > header,
body > main,
body > footer,
.env-badge,
.page-placeholder { position: relative; z-index: 1; }

/* ── SVG icon data URIs ── */
:root {
  --bg-icon-gamepad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232a3a92' stroke-width='1.5'%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3Ccircle cx='12' cy='10' r='1'/%3E%3Ccircle cx='16' cy='10' r='1'/%3E%3C/svg%3E");

  --bg-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232a3a92' stroke-width='1.5'%3E%3Cpath d='M16 24H3v-4.71c0-.46-.16-.91-.46-1.26C.67 15.78-.22 12.92.05 9.98.5 4.95 4.46.79 9.45.11c4.04-.55 7.91 1.06 10.35 4.31 1.18 1.46 2.3 4.02 3.48 6.72l.72 1.65v2.21h-2.33l-.45 3.39c-.2 1.49-1.47 2.61-2.97 2.61h-2.25v3Z'/%3E%3C/svg%3E");

  --bg-icon-devlog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232a3a92' stroke-width='1.5'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3C/svg%3E");

  --bg-icon-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232a3a92' stroke-width='1.5'%3E%3Cpath d='M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z'/%3E%3C/svg%3E");

  --bg-icon-megaphone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232a3a92' stroke-width='1.5'%3E%3Cpath d='M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");

  /* per-page filled variants — fill='color' stroke='none' reads at low opacity */
  --bg-icon-gamepad-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%232f9be8' fill-opacity='1' stroke='none'%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z M12 10 A1 1 0 1 0 12.01 10 M16 10 A1 1 0 1 0 16.01 10'/%3E%3C/svg%3E");

  --bg-icon-person-violet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%236a67ac' fill-opacity='1' stroke='none'%3E%3Cpath d='M16 24H3v-4.71c0-.46-.16-.91-.46-1.26C.67 15.78-.22 12.92.05 9.98.5 4.95 4.46.79 9.45.11c4.04-.55 7.91 1.06 10.35 4.31 1.18 1.46 2.3 4.02 3.48 6.72l.72 1.65v2.21h-2.33l-.45 3.39c-.2 1.49-1.47 2.61-2.97 2.61h-2.25v3Z'/%3E%3C/svg%3E");

  --bg-icon-devlog-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f2945a' fill-opacity='1' stroke='none'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3C/svg%3E");

  --bg-icon-megaphone-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%239aa2b1' fill-opacity='1' stroke='none'%3E%3Cpath d='M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");

  --bg-icon-envelope-indigo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%232a3a92' fill-opacity='1' stroke='none'%3E%3Cpath d='M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z'/%3E%3C/svg%3E");

  --bg-icon-heart-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%232f9e8f' fill-opacity='1' stroke='none'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* home page: no pattern */
.page-home::before,
.page-home::after { display: none; }
.page-home .bg-icons { display: none; }