/*
Theme Name: RiotCels
Theme URI: https://riotcels.com
Author: Abd As-Sami
Author URI: https://riotcels.com
Description: Anime graffiti streetwear — print-on-demand store built on WooCommerce.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: riotcels
*/

/* ═══════════════════════════════════════════
   GOOGLE FONTS
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ═══════════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════════ */
:root {
  --navy:       #0b0f1a;
  --charcoal:   #12192a;
  --slate:      #1c2640;
  --orange:     #e8593c;
  --amber:      #e8b84b;
  --blue:       #3a7bd5;
  --text:       #e8e4d8;
  --muted:      #7a8099;
  --border:     rgba(255, 255, 255, 0.07);

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Barlow Condensed', sans-serif;
  --font-mono:    'Space Mono', monospace;
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--navy);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400; /* Bebas Neue is always bold by design */
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--text);
}

p {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

.text-orange  { color: var(--orange); }
.text-amber   { color: var(--amber); }
.text-muted   { color: var(--muted); }
.text-display { font-family: var(--font-display); }
.text-mono    { font-family: var(--font-mono); }

.section {
  padding: 80px 48px;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn-primary {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 14px 32px;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.1em;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:hover        { transform: translateY(-2px); }

.btn-ghost {
  display: inline-block;
  background: none;
  color: var(--text);
  padding: 14px 32px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.1em;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.rc-footer {
    padding: 40px 48px 24px;
    border-top: 1px solid var(--border);
}

.rc-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.rc-footer__logo {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.rc-footer__note {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   ANIMATIONS — KEYFRAMES
═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gridDrift {
  to { background-position: 48px 48px; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.7; transform: translateY(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateY(-50%) scale(1.08); }
}

@keyframes linePulse {
  0%, 100% { opacity: 0.4; height: 120px; }
  50%       { opacity: 1;   height: 180px; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes tickerReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}