/* Graphicsurfer Studio - site styles (home: gs-, press: pr-, citadel rush: cr-) */

/* ---------- Shared keyframes ---------- */
@keyframes gs-modal-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-modal-pop-in { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes gs-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gs-fade-up-rotate { from { opacity: 0; transform: translateY(16px) rotate(-1deg); } to { opacity: 1; transform: translateY(0) rotate(-1deg); } }
@keyframes gs-ken-burns { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.08) translate3d(-1%,-1%,0); } }
@keyframes pr-logo-glitch {
  0%,100% { transform: translate(0,0) skew(0deg); filter: drop-shadow(0 0 0 rgba(238,38,87,0)) drop-shadow(0 0 0 rgba(245,224,23,0)); }
  12% { transform: translate(-4px,2px) skew(-4deg); filter: drop-shadow(3px 0 0 rgba(238,38,87,0.85)) drop-shadow(-3px 0 0 rgba(245,224,23,0.85)); }
  24% { transform: translate(3px,-2px) skew(3deg); filter: drop-shadow(-3px 0 0 rgba(238,38,87,0.75)) drop-shadow(3px 0 0 rgba(245,224,23,0.75)); }
  36% { transform: translate(-3px,-1px) skew(-2deg); filter: drop-shadow(2px 0 0 rgba(238,38,87,0.6)) drop-shadow(-2px 0 0 rgba(245,224,23,0.6)); }
  48% { transform: translate(2px,2px) skew(2deg); filter: none; }
  60% { transform: translate(0,0) skew(0deg); filter: none; }
}

[hidden] { display: none !important; }

/* ---------- Home + Press base ---------- */
html { scroll-behavior: smooth; }
body.page-gs, body.page-pr { margin: 0; background: #0c0c0c; font-family: 'Poppins', sans-serif; }
.page-gs *, .page-pr * { box-sizing: border-box; }

/* Buttons shared by home + press */
.gs-btn, .pr-btn {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23,1,0.32,1), background 150ms ease, color 150ms ease, letter-spacing 220ms ease;
}
.gs-btn:active, .pr-btn:active { transform: scale(0.97); }
.gs-btn:hover, .pr-btn:hover { letter-spacing: 0.14em; }

/* ---------- Home ---------- */
.gs-root { position: relative; background: #0c0c0c; color: #fff; overflow: hidden; }

.gs-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 24px 48px; }
.gs-nav-logo { max-width: 30%; display: block; object-fit: cover; aspect-ratio: 1162 / 109; width: 100%; height: 100%; }
.gs-nav-links { display: flex; gap: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.gs-nav-links a { color: #fff; text-decoration: none; cursor: pointer; transition: color 150ms ease; }
.gs-nav-links a:hover { color: #F5E017; }

.gs-hero { position: relative; height: 820px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.gs-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.55; animation: gs-ken-burns 16s cubic-bezier(0.23,1,0.32,1) infinite alternate; transform-origin: 55% 40%; }
.gs-hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, #0c0c0c 8%, rgba(12,12,12,0.55) 55%, rgba(12,12,12,0.25) 80%); }
.gs-hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 48px 64px; width: 100%; }
.gs-hero-col { max-width: 900px; }
.gs-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: #FF3D6B; margin-bottom: 14px; position: relative; z-index: 3; text-shadow: 0 2px 12px rgba(0,0,0,0.9); animation: gs-fade-up 500ms cubic-bezier(0.23,1,0.32,1) both; }
.gs-hero-chip { margin: 0; animation: gs-fade-up-rotate 500ms cubic-bezier(0.23,1,0.32,1) 80ms both; }
.gs-hero-title { width: min(620px, 90%); height: auto; display: block; filter: drop-shadow(0 3px 0 rgba(11,8,6,.9)) drop-shadow(0 0 34px rgba(255,138,31,.45)) drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.gs-hero-desc { font-size: 18px; line-height: 1.5; color: #e8e6e0; max-width: 520px; margin: 24px 0 32px; font-family: Poppins; font-weight: 900; animation: gs-fade-up 500ms cubic-bezier(0.23,1,0.32,1) 160ms both; }
.gs-hero-actions { display: flex; gap: 18px; flex-wrap: wrap; animation: gs-fade-up 500ms cubic-bezier(0.23,1,0.32,1) 240ms both; }

.gs-btn--hero { padding: 16px 30px; }
.gs-btn--yellow { border: 2px solid #F5E017; color: #F5E017; }
.gs-btn--yellow:hover { background: #F5E017; color: #0c0c0c; }
.gs-btn--red-outline { border: 2px solid #EE2657; color: #EE2657; }
.gs-btn--red-outline:hover { background: #EE2657; color: #fff; }
.gs-btn--red { padding: 16px 30px; background: #EE2657; color: #fff; width: fit-content; }
.gs-btn--red:hover { background: #d41f4b; }
.gs-btn--ink { padding: 16px 30px; border: 2px solid #0c0c0c; color: #0c0c0c; width: fit-content; }
.gs-btn--ink:hover { background: #0c0c0c; color: #F5E017; }
.gs-btn--trailer { display: inline-flex; align-items: center; gap: 8px; }
.gs-btn--sm { padding: 14px 26px; border: 2px solid #0c0c0c; color: #0c0c0c; }
.gs-btn--sm:hover { background: #0c0c0c; color: #F5E017; }

.gs-dark { position: relative; background-image: url('../assets/noise-tv-dark.gif'); background-size: cover; background-repeat: repeat; border-top: 2px solid #F5E017; }
.gs-section { max-width: 1240px; margin: 0 auto; padding: 120px 48px; }
#studio { scroll-margin-top: 0; }
.gs-section-games { padding: 0 48px 130px; }

.gs-label-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.gs-label-row--tight { gap: 8px; margin-bottom: 10px; }
.gs-label { font-family: 'IBM Plex Mono', monospace; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; font-weight: 600; }
.gs-label--plain { letter-spacing: normal; text-transform: none; }
.gs-label--ink { color: #0c0c0c; }
.gs-rule { height: 1px; width: 100%; margin-bottom: 22px; background-color: #FFFFFF; }
.gs-rule--ink { background-color: #0c0c0c; }

.gs-h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 56px; line-height: 1; margin: 0 0 24px; max-width: 900px; color: #fff; width: 100%; }
.gs-h2--games { max-width: none; margin-bottom: 56px; animation: gs-fade-up 1ms linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
.gs-h2--connect { max-width: none; margin-bottom: 60px; color: #0c0c0c; }
.gs-h2-mark { background: rgb(245, 224, 23); color: rgb(12, 12, 12); padding: 2px 10px; display: inline-block; transform: rotate(-1deg); }

.gs-intro { font-family: 'Poppins', sans-serif; font-size: 16px; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); margin: 0 0 20px; max-width: 640px; }
.gs-location { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #F5E017; margin: 0 0 60px; }

.gs-studio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.gs-pillar { padding: 28px 28px 0; border-top: 2px solid #F5E017; }
.gs-pillar:first-child { padding: 28px 28px 0 0; }
.gs-pillar:last-child { padding: 28px 0 0 28px; }
.gs-pillar--red { border-top-color: #EE2657; }
.gs-pillar h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 24px; margin: 0 0 12px; color: #fff; text-transform: uppercase; }
.gs-pillar:first-child h3 { font-size: 26px; }
.gs-pillar p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0; font-family: Poppins; }

.gs-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 24px; }
.gs-feature-img { aspect-ratio: 16 / 10; display: block; transition: transform 160ms cubic-bezier(0.23,1,0.32,1); }
.gs-feature-img:hover { transform: scale(1.015); }
.gs-feature-img:active { transform: scale(0.985); }
.gs-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-feature-body { display: flex; flex-direction: column; justify-content: center; padding: 36px; color: #0c0c0c; background-image: url('../assets/noise-tv-light.gif'); background-size: cover; background-repeat: repeat; }
.gs-feature-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; color: #EE2657; }
.gs-feature-title { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 34px; margin: 0 0 14px; }
.gs-feature-body p { font-size: 16px; line-height: 1.6; margin: 0 0 20px; max-width: 380px; font-weight: 400; }
.gs-feature-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Trailer modal */
.gs-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(12,12,12,0.88); display: none; align-items: center; justify-content: center; padding: 24px; }
.gs-modal.is-open { display: flex; animation: gs-modal-bg-in 220ms ease both; }
.gs-modal-box { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
.gs-modal.is-open .gs-modal-box { animation: gs-modal-pop-in 320ms cubic-bezier(0.23,1,0.32,1) both; }
.gs-modal-close { position: absolute; top: -44px; right: 0; background: none; border: none; color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px; }
.gs-modal-close:hover { color: #F5E017; }
.gs-modal-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #101010; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.gs-modal-fallback a { color: #F5E017; text-decoration: none; border-bottom: 1px solid #F5E017; padding-bottom: 2px; }
.gs-modal-fallback a:hover { color: #fff; border-color: #fff; }
.gs-modal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; z-index: 1; }

/* Game cards */
.gs-games-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.12); }
.gs-card {
  background: #0c0c0c; padding: 26px; display: flex; flex-direction: column; border-top: 2px solid transparent;
  text-decoration: none; color: inherit; opacity: 0.85;
  transition: transform 200ms cubic-bezier(0.23,1,0.32,1), background 200ms ease, opacity 200ms ease, border-color 200ms ease;
  animation: gs-fade-up 1ms linear both; animation-timeline: view(); animation-range: entry 0% cover 25%;
  --accent: #F5E017;
}
.gs-card--red { --accent: #EE2657; }
.gs-card--live { opacity: 1; }
.gs-card:nth-child(2) { animation-delay: 60ms; }
.gs-card:nth-child(3) { animation-delay: 120ms; }
.gs-card:nth-child(4) { animation-delay: 180ms; }
.gs-card:hover { transform: translateY(-4px); background: #161616; opacity: 1; border-color: var(--accent, #F5E017); }
.gs-card:active { transform: translateY(-4px) scale(0.98); }
.gs-card-img { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 18px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.gs-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-card-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.gs-card h3 { font-family: Poppins, sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 8px; color: #fff; }
.gs-card p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.6); margin: 0; flex: 1; }
.gs-card--lg .gs-card-tag { font-weight: 700; }
.gs-card--lg h3 { font-size: 20px; }

/* Connect */
.gs-connect { background-image: url('../assets/noise-tv-light.gif'); background-size: cover; background-repeat: repeat; color: #0c0c0c; padding: 0; }
.gs-connect-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; }
.gs-connect-head { font-family: 'IBM Plex Mono', monospace; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; color: #EE2657; }
.gs-connect-grid p { font-size: 16px; line-height: 1.6; margin: 0 0 22px; color: rgba(12,12,12,0.7); font-family: Poppins; }
.gs-connect-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.gs-email-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.gs-email-link { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: 0.02em; color: #0c0c0c; text-decoration: none; border-bottom: 1px solid rgba(12,12,12,0.35); padding-bottom: 2px; transition: color 150ms ease, border-color 150ms ease; }
.gs-email-link:hover { border-color: #EE2657; color: #EE2657; }
.gs-copy { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: 1px solid rgba(12,12,12,0.35); color: #0c0c0c; padding: 6px 10px; cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.gs-copy:hover { background: #0c0c0c; color: #F5E017; border-color: #0c0c0c; }

/* Footers (home + press) */
.gs-footer, .pr-footer { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
.gs-footer { padding: 16px 48px; }
.pr-footer { padding: 16px 48px 36px; }
.gs-footer-logo, .pr-footer-logo { height: auto; display: block; object-fit: cover; aspect-ratio: 1222 / 310; width: 150px; animation: pr-logo-glitch 900ms steps(1,end) infinite; animation-play-state: paused; }
.gs-footer-logo { max-width: 30%; }
.gs-footer-logo:hover, .pr-footer-logo:hover { animation-play-state: running; }
.gs-footer-copy, .pr-footer-copy { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.5); }
.gs-footer-note, .pr-footer-note { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.4); }

@media (prefers-reduced-motion: reduce) {
  .gs-hero-bg { animation: none; }
  .gs-anim { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}

@media (max-width: 1024px) {
  .gs-nav-links { display: none; }
  .gs-hero { height: 620px; }
  .gs-hero-title { width: min(500px, 90%); }
  .gs-section { padding: 80px 32px; }
  .gs-section-games { padding: 0 32px 90px; }
  .gs-h2 { font-size: 42px; }
  .gs-studio-grid, .gs-games-grid, .gs-connect-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .gs-hero { height: 440px; }
  .gs-hero-inner { padding: 0 20px 40px; }
  .gs-hero-chip { margin-left: 0; padding: 12px 16px; }
  .gs-hero-title { width: 100%; }
  .gs-hero-desc { font-size: 15px; }
  .gs-nav { padding: 16px 20px; }
  .gs-section { padding: 56px 20px; }
  .gs-section-games { padding: 0 20px 60px; }
  .gs-h2 { font-size: 32px; margin-bottom: 32px; }
  .gs-studio-grid, .gs-games-grid, .gs-connect-grid, .gs-feature-grid { grid-template-columns: 1fr; }
  .gs-footer { flex-direction: column; text-align: center; padding: 28px 20px; }
}
@media (min-width: 1920px) {
  .gs-h2 { font-size: 64px; }
}

/* ---------- Press ---------- */
.pr-root { position: relative; background: #0c0c0c; color: #fff; }
.pr-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 24px 48px; }
.pr-nav-logo-link { display: block; max-width: 30%; }
.pr-nav-logo-link img { display: block; object-fit: cover; aspect-ratio: 1162 / 109; width: 100%; height: 100%; }
.pr-nav-links { display: flex; gap: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.pr-nav-links a { text-decoration: none; color: #fff; transition: color 150ms ease; }
.pr-nav-links a:hover { color: #F5E017; }

.pr-dark { background-image: url('../assets/noise-tv-dark.gif'); background-size: cover; background-repeat: repeat; position: relative; }
.pr-dark--ruled { border-top: 2px solid var(--accent, #F5E017); }
.pr-hero { max-width: 1240px; margin: 0 auto; padding: 60px 48px 90px; }
.pr-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: #EE2657; margin-bottom: 14px; }
.pr-h1-wrap { background: #F5E017; display: inline-block; padding: 16px 22px; transform: rotate(-1deg); margin-left: -22px; }
.pr-h1 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 96px; line-height: 0.9; margin: 0; color: #0c0c0c; }
.pr-lede { font-size: 17px; line-height: 1.6; color: #bab1a4; max-width: 640px; margin: 24px 0 0; }

.pr-section { max-width: 1240px; margin: 0 auto; padding: 90px 48px; }
.pr-label-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.pr-label { font-family: 'IBM Plex Mono', monospace; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; font-weight: 600; }
.pr-rule { height: 1px; width: 100%; margin-bottom: 32px; background: #fff; }
.pr-about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; }
.pr-about h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 40px; margin: 0 0 18px; color: #fff; }
.pr-text { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 560px; margin: 0 0 16px; }
.pr-text:last-child { margin-bottom: 0; }
.pr-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pr-logos--game { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
.pr-asset { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: #161616; border: 1px solid rgba(255,255,255,0.1); text-decoration: none; transition: border-color 150ms ease; }
.pr-asset:hover { border-color: var(--accent, #F5E017); }
.pr-asset img { width: 100%; object-fit: contain; height: 60px; }
.pr-asset img.pr-cover { object-fit: cover; }
.pr-asset span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, #F5E017); }

.pr-game-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.pr-game-id { display: flex; align-items: center; gap: 24px; }
.pr-game-id > img { height: 64px; object-fit: contain; }
.pr-game-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 700; }
.pr-game-id h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 38px; margin: 0; color: #fff; }
.pr-btn--game { padding: 14px 26px; border: 2px solid var(--accent); color: var(--accent, #F5E017); }
.pr-btn--game:hover { background: var(--accent); color: #0c0c0c; }
.pr-blurb { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 640px; margin: 0 0 36px; }
.pr-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.pr-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); }
.pr-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; }
.pr-shot:hover img { transform: scale(1.04); }
.pr-footer-logo-link { display: block; max-width: 150px; }

@media (max-width: 1024px) {
  .pr-nav-links { display: none; }
  .pr-h1 { font-size: 64px; }
  .pr-section { padding: 70px 32px; }
  .pr-about-grid, .pr-logos { grid-template-columns: repeat(2, 1fr); }
  .pr-shots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .pr-h1 { font-size: 42px; }
  .pr-nav { padding: 16px 20px; }
  .pr-section { padding: 50px 20px; }
  .pr-about-grid, .pr-logos { grid-template-columns: 1fr; }
  .pr-shots { grid-template-columns: 1fr; }
  .pr-game-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pr-game-id { flex-wrap: wrap; gap: 16px; max-width: 100%; }
  .pr-game-id > img { max-width: 100%; }
}

/* ---------- Citadel Rush ---------- */
body.page-cr { margin: 0; background: #100b09; }
.page-cr ::selection { background: #F5E017; color: #100b09; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(245,224,23,0.45), 0 0 32px rgba(245,224,23,0.22); } 50% { box-shadow: 0 0 0 10px rgba(245,224,23,0), 0 0 44px rgba(245,224,23,0.38); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes cr-ken-burns { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.08) translate3d(-1%,-1%,0); } }
@keyframes cr-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cr-glitch {
  0%,100% { text-shadow: 0 0 0 rgba(238,38,87,0), 0 0 0 rgba(245,224,23,0); transform: skew(0deg); }
  20% { text-shadow: -2px 0 rgba(238,38,87,0.85), 2px 0 rgba(245,224,23,0.85); transform: skew(-3deg); }
  40% { text-shadow: 2px 0 rgba(238,38,87,0.85), -2px 0 rgba(245,224,23,0.85); transform: skew(2deg); }
  60% { text-shadow: -1px 0 rgba(238,38,87,0.7), 1px 0 rgba(245,224,23,0.7); transform: skew(-1deg); }
  80% { text-shadow: 1px 0 rgba(238,38,87,0.6), -1px 0 rgba(245,224,23,0.6); transform: skew(1deg); }
}

.cr-root { font-family: 'Inter', sans-serif; background: #100b09; color: #f0eae2; overflow-x: hidden; }

.cr-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 40px; background: linear-gradient(180deg, rgba(16,11,9,0.97) 0%, rgba(16,11,9,0.7) 100%); backdrop-filter: blur(8px); border-bottom: 2px solid rgba(245,224,23,0.3); }
.cr-nav-logo { max-width: 100%; display: block; object-fit: cover; aspect-ratio: 558 / 194; width: 193px; height: 38px; }
.cr-nav-links { display: flex; align-items: center; gap: 30px; }
.cr-nav-link { font-family: 'Rajdhani', sans-serif; color: #cfc6ba; text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; transition: color 150ms ease; }
.cr-nav-link:hover { color: #F5E017; }
.cr-nav-link--studio { color: #8d8478; }
.cr-nav-link--studio:hover { color: #EE2657; }

.cr-clip-btn { font-family: 'Rajdhani', sans-serif; background: #F5E017; color: #100b09; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: background-color 150ms ease, transform 120ms cubic-bezier(0.23,1,0.32,1), letter-spacing 220ms ease; }
.cr-clip-btn:hover { background: #fff05e; }
.cr-clip-btn:active { transform: scale(0.96); }
.cr-nav-play { padding: 10px 22px; font-size: 16px; letter-spacing: 0.1em; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.cr-nav-play:hover { letter-spacing: 0.14em; }
.cr-play-btn { display: flex; align-items: center; letter-spacing: 0.04em; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); animation: pulseGlow 3.2s ease-in-out infinite; }
.cr-play-btn:hover { letter-spacing: 0.08em; }
.cr-play-btn--hero { gap: 12px; padding: 20px 40px; font-size: 20px; }
.cr-play-btn--join { padding: 22px 46px; font-size: 21px; }

.cr-hero-section { position: relative; min-height: 100vh; box-sizing: border-box; padding-top: 110px; display: flex; align-items: flex-end; overflow: hidden; }
.cr-hero-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: cr-ken-burns 16s cubic-bezier(0.23,1,0.32,1) infinite alternate; transform-origin: 55% 35%; }
.cr-hero-shade-a { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 70% 30%, transparent 0%, rgba(16,11,9,0.5) 60%, rgba(16,11,9,0.95) 100%); pointer-events: none; }
.cr-hero-shade-b { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, #100b09 0%, rgba(16,11,9,0.72) 22%, transparent 56%); pointer-events: none; }
.cr-hero-content { position: relative; z-index: 3; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 40px 90px; }
.cr-live { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 8px 14px; background: rgba(16,11,9,0.7); border-left: 3px solid #F5E017; animation: fadeUp 0.7s ease-out both; }
.cr-live span { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #F5E017; }
.cr-hero-logo { display: block; width: min(560px, 74vw); height: auto; margin-bottom: 24px; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.85)); animation: fadeUp 0.8s ease-out 0.1s both; }
.cr-hero-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; margin: 0 0 20px; max-width: 900px; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,0.6); animation: fadeUp 0.8s ease-out 0.2s both; }
.cr-hero-copy { font-size: 18px; line-height: 1.65; color: #cfc6ba; max-width: 640px; margin: 0 0 38px; animation: fadeUp 0.8s ease-out 0.3s both; }
.cr-hero-actions { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; animation: fadeUp 0.8s ease-out 0.4s both; }
.cr-code-box { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 26px; background: rgba(16,11,9,0.75); border: 1px solid rgba(245,224,23,0.4); }
.cr-code-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #8d8478; }
.cr-code-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; color: #f4eee2; }
.cr-scroll { position: absolute; bottom: 26px; left: 50%; z-index: 3; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #7d7468; animation: bob 2.6s ease-in-out infinite; }

.cr-ticker { position: relative; background: #F5E017; border-top: 3px solid #100b09; border-bottom: 3px solid #100b09; overflow: hidden; padding: 14px 0; }
.cr-ticker-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.cr-ticker-group { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.cr-ticker-group span { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: #100b09; white-space: nowrap; }

[data-cr-reveal] { animation: cr-reveal 1ms linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
.cr-glitch { animation: cr-glitch 420ms steps(2,end) infinite; animation-play-state: paused; }
.cr-glitch:hover { animation-play-state: running; }
.cr-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #EE2657; }

#story { position: relative; padding: 120px 40px; border-bottom: 1px solid rgba(245,224,23,0.16); }
.cr-story-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 64px; align-items: center; }
#story h2 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(32px, 4vw, 54px); line-height: 1.02; margin: 16px 0 20px; color: #F5E017; }
.cr-story-copy { font-size: 17px; line-height: 1.7; color: #bab1a4; margin: 0 0 30px; max-width: 540px; }
.cr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 540px; }
.cr-stat { padding: 16px; background: rgba(16,11,9,0.6); border-left: 3px solid #F5E017; }
.cr-stat-value { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 20px; color: #f4eee2; }
.cr-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8d8478; margin-top: 5px; }

.cr-torn { position: relative; width: 100%; aspect-ratio: 16 / 10; -webkit-mask-image: url('../assets/torn-mask.webp'); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-image: url('../assets/torn-mask.webp'); mask-size: 100% 100%; mask-repeat: no-repeat; overflow: visible; }
.cr-torn--story { aspect-ratio: 4 / 3; animation-delay: 80ms; }
.cr-torn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms cubic-bezier(0.23,1,0.32,1); }
.cr-torn img:hover { transform: scale(1.05); }

#features { position: relative; padding: 120px 40px 70px; }
.cr-features-inner { max-width: 1320px; margin: 0 auto; }
.cr-features-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 70px; }
#features h2 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(38px, 5vw, 72px); line-height: 0.95; margin: 0; color: #F5E017; }
.cr-features-note { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #8d8478; max-width: 280px; margin: 0; line-height: 1.9; }

.cr-feature-row { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 56px; align-items: center; padding: 46px 40px; border-top: 1px solid rgba(245,224,23,0.18); margin: 0 -40px; }
.cr-feature-row--wide { grid-template-columns: 1.15fr 1fr; padding: 60px 40px; }
.cr-focus-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(245,224,23,0.1), transparent); opacity: 0; transition: opacity 400ms ease; }
.cr-feature-media { position: relative; }
.cr-feature-media--right { order: 2; }
.cr-feature-text--left { order: 1; }
.cr-feature-num { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cr-feature-num > span:first-child { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 42px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(245,224,23,0.55); }
.cr-feature-row--wide .cr-feature-num > span:first-child { font-size: 64px; -webkit-text-stroke: 2px #F5E017; }
.cr-feature-text h3 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; margin: 0 0 18px; color: #F5E017; }
.cr-feature-row--wide h3 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; }
.cr-feature-text p { font-size: 17px; line-height: 1.7; color: #bab1a4; margin: 0 0 22px; max-width: 520px; }
.cr-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.cr-chips span { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #d8cdb8; padding: 7px 12px; background: rgba(245,224,23,0.09); border: 1px solid rgba(245,224,23,0.25); }

#join { position: relative; padding: 150px 40px; overflow: hidden; }
.cr-join-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cr-join-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #100b09 0%, rgba(16,11,9,0.72) 35%, rgba(16,11,9,0.8) 65%, #100b09 100%); pointer-events: none; }
.cr-join-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; text-align: center; }
#join h2 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; margin: 16px 0 20px; color: #F5E017; }
.cr-join-copy { font-size: 17px; line-height: 1.65; color: #cfc6ba; margin: 0 0 40px; }
.cr-join-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cr-discord-btn { display: flex; align-items: center; padding: 22px 40px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: #EE2657; border: 2px solid #EE2657; transition: background-color 150ms ease, color 150ms ease, transform 120ms cubic-bezier(0.23,1,0.32,1), letter-spacing 220ms ease; }
.cr-discord-btn:hover { background: #EE2657; color: #100b09; letter-spacing: 0.08em; }
.cr-discord-btn:active { transform: scale(0.96); }
.cr-island-code { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px; letter-spacing: 0.06em; color: #f4eee2; margin-top: 26px; }

.cr-footer { padding: 44px 40px; border-top: 2px solid rgba(245,224,23,0.25); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.cr-footer-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; width: 100%; justify-content: space-between; position: relative; }
.cr-footer-left { box-sizing: border-box; display: inline-block; }
.cr-footer-logo-link { display: block; max-width: 30%; transition: transform 200ms cubic-bezier(0.23,1,0.32,1), filter 200ms ease; }
.cr-footer-logo-link:hover { transform: scale(1.05); filter: brightness(1.15); }
.cr-footer-logo-link img { height: 100%; display: block; object-fit: cover; aspect-ratio: 1222 / 310; width: 100%; }
.cr-footer-studio { display: inline-block; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: #cfc6ba; text-decoration: none; transition: letter-spacing 220ms ease, color 150ms ease; animation: cr-glitch 420ms steps(2,end) infinite; animation-play-state: paused; }
.cr-footer-studio:hover { color: #F5E017; letter-spacing: 0.14em; animation-play-state: running; }
.cr-footer-legal { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #9a9284; text-align: center; }
.cr-footer-spacer { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #9a9284; max-width: 400px; }

.cr-mobile-playbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; padding: 12px 20px; background: rgba(16,11,9,0.97); backdrop-filter: blur(8px); border-top: 2px solid rgba(245,224,23,0.35); }
.cr-mobile-playbar a { display: flex; align-items: center; justify-content: center; background: #F5E017; color: #100b09; padding: 14px 0; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.cr-mobile-playbar a:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .cr-hero-fallback { animation: none; }
  .cr-focus-overlay { display: none; }
  [data-cr-reveal] { animation: none; opacity: 1; transform: none; }
  .cr-torn img, .cr-clip-btn, .cr-discord-btn, .cr-nav-link { transition: none !important; }
}
@media (max-width: 900px) {
  .cr-nav-links { display: none; }
  .cr-mobile-playbar { display: block; }
  .cr-root { padding-bottom: 68px; }
}
@media (max-width: 768px) {
  .cr-hero-section { min-height: 640px; padding-top: 90px; }
}
@media (max-width: 640px) {
  .cr-nav { padding: 12px 20px; }
  #story, #features, #join, .cr-footer { padding-left: 20px; padding-right: 20px; }
  #story { padding-top: 70px; padding-bottom: 70px; }
  #features { padding-top: 70px; padding-bottom: 40px; }
  #join { padding-top: 80px; padding-bottom: 80px; }
  .cr-footer { padding-top: 30px; padding-bottom: 30px; }
  .cr-hero-content { padding-bottom: 50px; }
  .cr-feature-row, .cr-feature-row--wide { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; grid-template-columns: 1fr; }
}
@media (min-width: 1920px) {
  .cr-hero-title { font-size: 60px; }
  #features h2 { font-size: 84px; }
}

/* kits section */
.gs-section-kits { padding: 0 48px 90px; }
.gs-kits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.12); }
.gs-kit-ph { position: relative; width: 100%; height: 100%; background: #0c0c0c url(/assets/noise-tv-dark.gif); border: 2px solid #F5E017; box-sizing: border-box; }
.gs-kit-ph > span { position: absolute; left: 10px; top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #F5E017; background: rgba(12,12,12,.85); padding: 5px 8px; max-width: calc(100% - 20px); }
@media (max-width: 1023px) { .gs-section-kits { padding: 0 32px 90px; } .gs-kits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .gs-section-kits { padding: 0 20px 60px; } .gs-kits-grid { grid-template-columns: 1fr; } }
.gs-kits-grid .gs-card:nth-child(n) { animation-delay: 0ms; }