/**
 * CHAOS INTERACTIVE — Joomla Cassiopeia
 * Place this file in:
 * media/templates/site/cassiopeia/css/user.css
 */

/* 1. DESIGN TOKENS */
:root {
  --chaos-bg: #060C11;
  --chaos-bg-2: #0B1219;
  --chaos-surface: #101820;
  --chaos-surface-2: #161E28;
  --chaos-surface-3: #222936;
  --chaos-border: #2A3440;
  --chaos-border-light: #404A56;

  --chaos-text: #F0F0EB;
  --chaos-text-secondary: #A9B1B9;
  --chaos-text-muted: #6B7480;

  --chaos-green: #8DFF68;
  --chaos-green-hover: #A5FF87;
  --chaos-blue: #438DDA;
  --chaos-purple: #9B63E8;
  --chaos-gold: #CDB68B;

  --chaos-radius: 6px;
  --chaos-radius-lg: 12px;
  --chaos-max-width: 1600px;
  --chaos-transition: .25s ease;
}

/* 2. GLOBAL */
html { scroll-behavior: smooth; }
body {
  background: var(--chaos-bg);
  color: var(--chaos-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
body .site { background: var(--chaos-bg); }
body .site-grid { margin-top: -1em; }
body.wrapper-fluid .site-grid { grid-gap: 0; }
body .container-component { padding-top: 0; padding-bottom: 0; }
.chaos-home .container,
.chaos-container {
  width: min(calc(100% - 3rem), var(--chaos-max-width));
  margin-inline: auto;
}
.chaos-home * { box-sizing: border-box; }
.chaos-home h1, .chaos-home h2, .chaos-home h3 {
  color: var(--chaos-text);
  font-weight: 800;
  letter-spacing: -.035em;
}
.chaos-home h1 { font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: .88; }
.chaos-home h2 { font-size: clamp(2.2rem, 3vw, 4rem); line-height: .98; margin: 0; }
.chaos-home h3 { margin: 0; }
.chaos-home p { color: var(--chaos-text-secondary); }
.chaos-home a { text-decoration: none; }

.back-to-top-link { bottom: 3rem; }

/* 3. HEADER / CASSIOPEIA */
.container-header,
.container-header .container-nav,
.container-header .grid-child {
  background: rgba(6,12,17,0);
  width: auto;
  display: inline-block;
}
.container-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--chaos-border);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.container-header .grid-child { padding-top: .85rem; padding-bottom: .85rem; }
.brand-logo img { max-height: 52px; width: auto; }
.metismenu.mod-menu > li > a {
  color: var(--chaos-text-secondary);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.metismenu.mod-menu > li > a:hover,
.metismenu.mod-menu > li.active > a { color: var(--chaos-green); }
.metismenu.mod-menu > li.active > a::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 6px;
  background: var(--chaos-green);
}
.container-header .mod-menu { color: var(--chaos-text); }

/* 4. REUSABLE ELEMENTS */
.chaos-section {
  padding: clamp(4.5rem, 9vw, 5rem) 0;
  border-top: 1px solid var(--chaos-border);
}
.chaos-section--alt {
  background: linear-gradient(180deg, var(--chaos-bg-2), var(--chaos-bg));
}
.chaos-eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: var(--chaos-green);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.chaos-eyebrow--blue { color: var(--chaos-blue); }
.chaos-eyebrow--purple { color: var(--chaos-purple); }
.chaos-eyebrow--gold { color: var(--chaos-gold); }
.chaos-lead {
  max-width: 650px;
  margin: 1.25rem 0 1.25rem;
  font-size: 1.05rem;
}
.chaos-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 48px;
  padding: .8rem 1.35rem;
  border: 1px solid var(--chaos-green);
  border-radius: var(--chaos-radius);
  background: var(--chaos-green);
  color: #060C11 !important;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform var(--chaos-transition), box-shadow var(--chaos-transition), background var(--chaos-transition);
}
.chaos-button:hover {
  background: var(--chaos-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(141,255,104,.18);
}
.chaos-button--outline {
  background: transparent;
  border-color: var(--chaos-border-light);
  color: var(--chaos-text) !important;
}
.chaos-button--outline:hover {
  background: rgba(141,255,104,.05);
  border-color: var(--chaos-green);
  color: var(--chaos-green) !important;
}
.chaos-button--blue { background: var(--chaos-blue); border-color: var(--chaos-blue); color: #fff !important; }

/* 5. HERO */
.chaos-hero {
  position: relative;
  min-height: min(600px, 84vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--chaos-bg);
}
.chaos-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(6,12,17,.99) 0%, rgba(6,12,17,.88) 35%, rgba(6,12,17,.25) 75%, rgba(6,12,17,.2) 100%),
    var(--chaos-hero-image, none);
  background-size: cover;
  background-position: center;
}
.chaos-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(transparent, var(--chaos-bg));
}
.chaos-hero__inner { position: relative; z-index: 2; padding: 7rem 0 5rem; }
.chaos-hero__content { max-width: 780px; }
.chaos-hero__title { margin: 0; text-transform: uppercase; }
.chaos-hero__title span { color: var(--chaos-green); }
.chaos-hero__subtitle {
  margin: 1.4rem 0 .5rem;
  color: var(--chaos-text);
  font-size: clamp(.85rem, 1.5vw, 1.1rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.chaos-hero__description { max-width: 590px; margin: 1rem 0 2rem; font-size: 1.05rem; }
.chaos-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* 6. STATS */
.chaos-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--chaos-border);
  border-bottom: 1px solid var(--chaos-border);
}
.chaos-stat { padding: 1.7rem 2rem; border-right: 1px solid var(--chaos-border); }
.chaos-stat:last-child { border-right: 0; }
.chaos-stat__number { display:block; color:var(--chaos-text); font-size:1.6rem; font-weight:900; }
.chaos-stat__label { color:var(--chaos-text-muted); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

/* 7. SECTION INTRO */
.chaos-split-intro {
  display: grid;
  grid-template-columns: minmax(240px,.9fr) minmax(0,2fr);
  gap: 4rem;
  align-items: start;
  margin-bottom: 3rem;
}

/* 8. GAMES */
.chaos-games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.chaos-game-card {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid var(--chaos-border);
  border-radius: var(--chaos-radius);
  background: var(--chaos-surface);
  transition: transform var(--chaos-transition), border-color var(--chaos-transition);
}
.chaos-game-card:hover { transform: translateY(-6px); border-color: var(--chaos-green); }
.chaos-game-card__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.chaos-game-card:hover .chaos-game-card__image { transform: scale(1.05); }
.chaos-game-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 25%, rgba(6,12,17,.96) 100%); }
.chaos-game-card__content { position:absolute; z-index:2; left:1.25rem; right:1.25rem; bottom:1.25rem; }
.chaos-game-card__content h3 { text-transform:uppercase; font-size:1.05rem; }
.chaos-game-card__content p { margin:.25rem 0 0; font-size:.78rem; }

/* 9. PORTFOLIO */
.chaos-portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.chaos-project {
  position:relative;
  min-height:220px;
  overflow:hidden;
  border:1px solid var(--chaos-border);
  border-radius:var(--chaos-radius);
  background:var(--chaos-surface);
}
.chaos-project--wide { grid-column:span 2; }
.chaos-project img { width:100%; height:100%; object-fit:cover; }
.chaos-project__overlay {
  position:absolute; inset:auto 0 0;
  padding:1rem 1.2rem;
  background:linear-gradient(transparent, rgba(6,12,17,.96) 45%);
}
.chaos-project__overlay h3 { font-size:1rem; text-transform:uppercase; }
.chaos-project__overlay p { margin:.2rem 0 0; font-size:.72rem; }
.chaos-project--more {
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--chaos-text-muted);
}

/* 10. SERVICES */
.chaos-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.chaos-service {
  padding:2rem;
  border:1px solid var(--chaos-border);
  border-radius:var(--chaos-radius-lg);
  background:linear-gradient(180deg, rgba(22,30,40,.92), rgba(10,16,22,.92));
  transition:transform var(--chaos-transition), border-color var(--chaos-transition);
}
.chaos-service:hover { transform:translateY(-5px); }
.chaos-service__icon { margin-bottom:1rem; font-size:2rem; font-weight:400; }
.chaos-service h3 { margin-bottom:1rem; font-size:1.15rem; text-transform:uppercase; }
.chaos-service ul { margin:1rem 0 1.6rem; padding-left:1.15rem; color:var(--chaos-text-secondary); font-size:.88rem; }
.chaos-service--gameplay { border-color:rgba(141,255,104,.38); }
.chaos-service--gameplay .chaos-service__icon,
.chaos-service--gameplay h3 { color:var(--chaos-green); }
.chaos-service--steam { border-color:rgba(67,141,218,.45); }
.chaos-service--steam .chaos-service__icon,
.chaos-service--steam h3 { color:var(--chaos-blue); }
.chaos-service--web { border-color:rgba(155,99,232,.45); }
.chaos-service--web .chaos-service__icon,
.chaos-service--web h3 { color:var(--chaos-purple); }

/* 11. TIMELINE */
.chaos-timeline { position:relative; display:grid; grid-template-columns:repeat(10,minmax(80px,1fr)); gap:1rem; margin-top:3rem; overflow-x:auto; padding:2rem 0 1rem; }
.chaos-timeline::before { content:""; position:absolute; top:2.45rem; left:0; right:0; height:1px; background:var(--chaos-border-light); }
.chaos-timeline__item { position:relative; min-width:80px; z-index:1; }
.chaos-timeline__dot { width:9px; height:9px; margin-bottom:1rem; border-radius:50%; background:var(--chaos-green); box-shadow:0 0 14px rgba(141,255,104,.5); }
.chaos-timeline__year { display:block; color:var(--chaos-text); font-size:.72rem; font-weight:900; }
.chaos-timeline__project { display:block; margin-top:.35rem; color:var(--chaos-text-muted); font-size:.68rem; line-height:1.25; }

/* 12. CTA */
.chaos-cta {
  position:relative;
  overflow:hidden;
  padding:clamp(4rem,8vw,7rem) 0;
  background:linear-gradient(90deg, rgba(6,12,17,.96), rgba(6,12,17,.58)),
             var(--chaos-cta-image, none);
  background-size:cover;
  background-position:center;
  border-top:1px solid var(--chaos-border);
}
.chaos-cta__grid { display:grid; grid-template-columns:1.5fr .8fr; gap:3rem; align-items:center; }
.chaos-cta__text p { max-width:650px; font-size:1.05rem; }
.chaos-cta__services { display:grid; gap:1rem; }
.chaos-cta__service { color:var(--chaos-text-secondary); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

/* 13. FOOTER */
.container-footer {
  background:var(--chaos-bg-2);
  color:var(--chaos-text-secondary);
  border-top:1px solid var(--chaos-border);
}
.container-footer a { color:var(--chaos-text-secondary); }
.container-footer a:hover { color:var(--chaos-green); }

/* 14. JOOMLA ARTICLE / HOME CLEANUP */
.com-content-article.item-page { margin:0; }
.chaos-home-wrapper { margin:0; }
.chaos-home-wrapper > * { margin:0; }

/* 15. RESPONSIVE */
@media (max-width: 1100px) {
  .chaos-games-grid { grid-template-columns:repeat(2,1fr); }
  .chaos-services-grid { grid-template-columns:1fr; }
  .chaos-portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .chaos-project--wide { grid-column:span 1; }
}
@media (max-width: 768px) {
  .chaos-home .container, .chaos-container { width:min(calc(100% - 2rem), var(--chaos-max-width)); }
  .chaos-hero { min-height:720px; }
  .chaos-hero::before { background-position:65% center; background-image:linear-gradient(90deg, rgba(6,12,17,.98), rgba(6,12,17,.72)), var(--chaos-hero-image, none); }
  .chaos-split-intro { grid-template-columns:1fr; gap:1.5rem; }
  .chaos-stats { grid-template-columns:repeat(2,1fr); }
  .chaos-stat:nth-child(2) { border-right:0; }
  .chaos-stat { padding:1.3rem; }
  .chaos-games-grid, .chaos-portfolio-grid { grid-template-columns:1fr; }
  .chaos-game-card { min-height:340px; }
  .chaos-cta__grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .chaos-stats { grid-template-columns:1fr; }
  .chaos-stat { border-right:0; border-bottom:1px solid var(--chaos-border); }
  .chaos-stat:last-child { border-bottom:0; }
  .chaos-actions { flex-direction:column; align-items:stretch; }
}