/* ============================================================
   🎨 COSMIC PASTA GAMES — THEME COLORS
   ------------------------------------------------------------
   🔧 CHANGE COLORS HERE WHEN YOU WANT A NEW WEBSITE THEME.

   Main palette:
   --color-bg       : deepest background
   --color-surface  : cards / panels
   --color-surface2 : secondary panels
   --color-primary  : main blue
   --color-primary2 : lighter blue
   --color-light    : light blue highlight
   --color-text     : main text
   --color-muted    : secondary text
   --color-line     : borders / dividers
   --color-shadow   : shadows
   --color-overlay  : transparent overlays
   --color-success  : success/status color
   --color-danger   : error/status color

   Change ONLY these values to retheme the site.
   ============================================================ */
:root {
  --color-bg: #071A2B;
  --color-bg-deep: #04111D;
  --color-surface: #0A2238;
  --color-surface-2: #0D2D4A;

  --color-primary: #2196F3;
  --color-primary-dark: #0D47A1;
  --color-primary-light: #90CAF9;
  --color-highlight: #E3F2FD;

  --color-text: #F4FAFF;
  --color-text-soft: #D6E8F7;
  --color-muted: #8FAFC8;

  --color-line: rgba(144, 202, 249, 0.18);
  --color-line-strong: rgba(144, 202, 249, 0.34);

  --color-shadow: rgba(4, 71, 161, 0.34);
  --color-shadow-strong: rgba(33, 150, 243, 0.28);

  --color-overlay: rgba(4, 17, 29, 0.72);
  --color-overlay-heavy: rgba(4, 17, 29, 0.92);

  --color-success: #90CAF9;
  --color-danger: #FF8A80;

  /* Backward-compatible aliases used by some components. */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --accent: var(--color-primary-light);
  --accent-2: var(--color-primary);
}

@import url("components.css");
body{background:var(--bg);color:var(--text);min-height:100vh}
.page-main{padding-top:150px;padding-bottom:120px}
.page-hero{padding-bottom:70px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{font-size:10px;letter-spacing:.22em;color:var(--accent);font-weight:700}
.page-hero h1{font-size:clamp(4rem,10vw,9rem);line-height:.84;letter-spacing:-.065em;margin:15px 0 0}
.page-hero p{max-width:560px;color:var(--muted);line-height:1.7;font-size:17px;margin-top:30px}
.page-section{padding-top:80px}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.filter-btn{background:none;border:1px solid var(--line);color:var(--muted);padding:10px 15px;font-size:9px;letter-spacing:.14em;cursor:pointer}
.filter-btn.active,.filter-btn:hover{border-color:var(--accent);color:var(--accent)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.content-card{border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:.3s}
.content-card:hover{transform:translateY(-5px);border-color:var(--color-line-strong);box-shadow:0 18px 50px var(--color-shadow)}
.card-art{height:300px;background:radial-gradient(circle at 50% 45%,rgba(139,233,213,.2),transparent 25%),linear-gradient(135deg,#101721,#1b2330);display:flex;align-items:end;padding:18px;color:#98a3b3;font-size:9px;letter-spacing:.18em}
.card-art.alt{background:radial-gradient(circle at 65% 30%,rgba(120,167,255,.22),transparent 28%),#18131f}
.card-art.green{background:radial-gradient(circle at 30% 60%,rgba(139,233,213,.22),transparent 25%),#111b18}
.card-body{padding:22px}.card-meta{font-size:9px;color:var(--accent);letter-spacing:.16em}.card-body h2{font-size:26px;letter-spacing:-.04em;margin:10px 0}.card-body p{color:var(--muted);font-size:13px;line-height:1.7}.card-link{display:inline-block;margin-top:12px;font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.news-stack{border-top:1px solid var(--line)}.article-row{display:grid;grid-template-columns:140px 1fr 30px;gap:25px;padding:28px 0;border-bottom:1px solid var(--line);align-items:center}.article-row .date{font-size:10px;color:var(--muted);letter-spacing:.12em}.article-row h2{font-size:clamp(1.3rem,2.5vw,2.2rem);margin:0;letter-spacing:-.04em}.article-row p{color:var(--muted);line-height:1.6;margin:8px 0 0;font-size:13px}.arrow{color:var(--accent);font-size:20px}
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}.gallery-item{height:280px;border:1px solid var(--line);position:relative;overflow:hidden;background:#151b25}.gallery-item:nth-child(1){grid-column:span 7}.gallery-item:nth-child(2){grid-column:span 5}.gallery-item:nth-child(3){grid-column:span 4}.gallery-item:nth-child(4){grid-column:span 8}.gallery-item:nth-child(5){grid-column:span 6}.gallery-item:nth-child(6){grid-column:span 6}.gallery-item:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 40%,rgba(139,233,213,.25),transparent 28%),linear-gradient(135deg,rgba(120,167,255,.1),transparent)}.gallery-item span{position:absolute;bottom:16px;left:16px;font-size:9px;letter-spacing:.18em}
.about-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:80px}.about-copy{font-size:clamp(1.7rem,3vw,3rem);line-height:1.2;letter-spacing:-.04em}.about-copy p{margin:0 0 35px}.about-copy em{color:var(--accent);font-style:normal}.about-aside{border-top:1px solid var(--line)}.fact{padding:20px 0;border-bottom:1px solid var(--line)}.fact span{display:block;font-size:9px;letter-spacing:.18em;color:var(--muted);margin-bottom:7px}.fact strong{font-size:15px}
.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.contact-info h2{font-size:42px;letter-spacing:-.04em;margin:0 0 20px}.contact-info p{color:var(--muted);line-height:1.7}.contact-method{padding:22px 0;border-bottom:1px solid var(--line)}.contact-method span{display:block;color:var(--muted);font-size:9px;letter-spacing:.16em;margin-bottom:7px}.contact-method a{font-size:15px}.contact-form{display:grid;gap:16px}.field{display:grid;gap:8px}.field label{font-size:9px;letter-spacing:.15em;color:var(--muted)}.field input,.field textarea{width:100%;background:#0d121b;border:1px solid var(--line);color:var(--text);padding:15px;font:inherit;outline:none}.field input:focus,.field textarea:focus{border-color:var(--accent)}.field textarea{min-height:180px;resize:vertical}.form-status{font-size:11px;color:var(--accent);min-height:20px}
.legal{max-width:850px}.legal h2{font-size:28px;margin:50px 0 14px}.legal p,.legal li{color:var(--muted);line-height:1.8;font-size:14px}.legal ul{padding-left:20px}
@media(max-width:850px){.card-grid{grid-template-columns:1fr 1fr}.about-layout,.contact-layout{grid-template-columns:1fr;gap:50px}.gallery-item,.gallery-item:nth-child(n){grid-column:span 6}.article-row{grid-template-columns:90px 1fr 20px}}
@media(max-width:560px){.page-main{padding-top:125px}.card-grid{grid-template-columns:1fr}.gallery-item,.gallery-item:nth-child(n){grid-column:span 12;height:240px}.article-row{grid-template-columns:1fr 20px}.article-row .date{grid-column:1/-1}.article-row h2{grid-column:1}.contact-info h2{font-size:34px}}


/* ============================================================
   🌊 SCROLL BACKGROUND ANIMATION
   ------------------------------------------------------------
   🔧 CHANGE THESE VALUES to control the atmosphere movement.
   --scroll-bg-strength : vertical movement multiplier
   --scroll-bg-blur     : glow softness
   --scroll-bg-opacity  : overall background intensity
   ============================================================ */
:root {
  --scroll-bg-strength: 0.12;
  --scroll-bg-blur: 70px;
  --scroll-bg-opacity: 0.72;
  --scroll-glow-size: 42vw;
}

body {
  --scroll-y: 0px;
  --scroll-progress: 0;
  --scroll-direction: 1;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, var(--color-surface-2), transparent 38%),
    var(--color-bg);
}

/* Three depth layers are created with pseudo-elements so no HTML
   structure has to change. The JavaScript only updates scroll values. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  pointer-events: none;
  width: var(--scroll-glow-size);
  height: var(--scroll-glow-size);
  border-radius: 50%;
  opacity: var(--scroll-bg-opacity);
  filter: blur(var(--scroll-bg-blur));
  transform: translate3d(0, calc(var(--scroll-y) * var(--scroll-bg-strength)), 0);
  will-change: transform;
}

body::before {
  top: -18vw;
  left: -12vw;
  background: radial-gradient(circle, rgba(33,150,243,.20) 0%, rgba(33,150,243,.07) 38%, transparent 70%);
  animation: scrollGlowA 16s ease-in-out infinite alternate;
}

body::after {
  right: -14vw;
  bottom: -22vw;
  background: radial-gradient(circle, rgba(144,202,249,.17) 0%, rgba(13,71,161,.08) 42%, transparent 72%);
  transform: translate3d(0, calc(var(--scroll-y) * -0.08), 0);
  animation: scrollGlowB 20s ease-in-out infinite alternate;
}

/* A moving light band follows the user's scroll position. */
body > main::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: -30vh -20vw;
  opacity: calc(.08 + (var(--scroll-progress) * .10));
  background:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(144,202,249,.10) 44%,
      rgba(33,150,243,.12) 50%,
      transparent 66%
    );
  transform: translate3d(calc(var(--scroll-progress) * 10vw), calc(var(--scroll-y) * -0.035), 0) rotate(-7deg);
  transition: opacity .25s ease;
  will-change: transform;
}

/* Home-page canvas gets its own depth movement while scrolling. */
.home-page #backgroundCanvas {
  transform: translate3d(0, calc(var(--scroll-y) * -0.055), 0) scale(1.035);
  transform-origin: center center;
  will-change: transform;
}

.home-page .hero-grid {
  transform: translate3d(0, calc(var(--scroll-y) * -0.025), 0);
  will-change: transform;
}

.home-page .hero-noise {
  transform: translate3d(0, calc(var(--scroll-y) * -0.015), 0);
  will-change: transform;
}

@keyframes scrollGlowA {
  from { transform: translate3d(0, calc(var(--scroll-y) * var(--scroll-bg-strength)), 0) scale(1); }
  to   { transform: translate3d(4vw, calc(var(--scroll-y) * var(--scroll-bg-strength) + 3vh), 0) scale(1.08); }
}

@keyframes scrollGlowB {
  from { transform: translate3d(0, calc(var(--scroll-y) * -0.08), 0) scale(1); }
  to   { transform: translate3d(-4vw, calc(var(--scroll-y) * -0.08 - 4vh), 0) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  body > main::before,
  .home-page #backgroundCanvas,
  .home-page .hero-grid,
  .home-page .hero-noise {
    animation: none !important;
    transform: none !important;
  }
}