/* =====================================================
   ARTFM – COMPLETE VISUAL SYSTEM
   Final Unified Production Version
===================================================== */

/* ================= RESET ================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f2efe6 url('/assets/images/paper-texture.png');
  color: #111;
  line-height: 1.6;
}

/* ================= VARIABLES ================= */

:root {
  --dark: #0f1117;
  --dark-2: #161821;
  --dark-3: #1c1f27;
  --accent: #ff4d00;
  --accent-glow: rgba(255,77,0,0.35);
  --radius: 16px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.08);
  --shadow-deep: 0 40px 100px rgba(0,0,0,.45);
}

/* ================= LAYOUT ================= */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 100px 0;
}

.section--dark {
  background: var(--dark);
  color: #fff;
}

.section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

/* ================= GRID ================= */

.grid {
  display: grid;
  gap: 24px;
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid--4 { grid-template-columns: 1fr; }
}

/* ================= HERO ================= */

.hero {
  position: relative;
  margin: 40px auto;
  max-width: 1400px;
  border-radius: 20px;
  overflow: hidden;
  padding: 140px 0;
  background: linear-gradient(180deg,#0d0f14,#151821);
  box-shadow: var(--shadow-deep);
}

.hero__bg {
  position:absolute;
  inset:0;
  background:url('/assets/images/hero-bg-clean.png') center/cover no-repeat;
  z-index:0;
}

.hero__overlay {
  position:absolute;
  inset:0;
  background:url('/assets/images/hero-bg-overlay.png') center/cover no-repeat;
  opacity:.9;
  z-index:1;
}

.hero__noise {
  position:absolute;
  inset:0;
  background:url('/assets/images/noise.png');
  opacity:.05;
  z-index:2;
}

.hero__splashes {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}

.hero__splashes::before,
.hero__splashes::after {
  content:"";
  position:absolute;
  width:420px;
  height:320px;
  background-size:contain;
  background-repeat:no-repeat;
}

.hero__splashes::before {
  top:-80px;
  left:-120px;
  background-image:url('/assets/images/splash-top-left.png');
}

.hero__splashes::after {
  bottom:-120px;
  right:-140px;
  background-image:url('/assets/images/splash-bottom-right.png');
}

.hero-bottom-fade {
  position:absolute;
  bottom:0;
  width:100%;
  height:200px;
  background:url('/assets/ui-fx/hero-bottom-fade.png') bottom/cover no-repeat;
  z-index:4;
}

.hero__inner {
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

.hero__left img {
  max-width:420px;
}

@media (max-width:1024px){
  .hero__inner {
    flex-direction:column;
    text-align:center;
  }
}

/* ================= PLAYER ================= */

.player {
  margin-top:20px;
  background: var(--dark-2);
  padding:16px;
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  gap:20px;
  box-shadow: 0 0 30px var(--accent-glow);
}

.player__button {
  background: var(--accent);
  border:none;
  padding:14px;
  border-radius:50%;
  cursor:pointer;
}

.player__visualizer {
  display:flex;
  gap:3px;
  align-items:flex-end;
}

.player__visualizer span {
  width:3px;
  height:12px;
  background:var(--accent);
  animation: equalize 1s infinite ease-in-out;
}

@keyframes equalize {
  0%,100% { height:10px }
  50% { height:24px }
}

/* ================= CARD ================= */

.card {
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  transition:.3s;
  box-shadow: var(--shadow-soft);
  position:relative;
}

.card::after {
  content:"";
  position:absolute;
  inset:0;
  background:url('/assets/images/card-overlay.png');
  opacity:.05;
  pointer-events:none;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

.card__media img {
  width:100%;
  display:block;
}

.card__content {
  padding:16px;
}

.card__meta {
  font-size:.8rem;
  opacity:.6;
}

/* ================= SIDEBAR ================= */

.layout {
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:40px;
}

.sidebar {
  display:flex;
  flex-direction:column;
  gap:32px;
}

@media (max-width:1024px){
  .layout { grid-template-columns:1fr; }
}

/* ================= UI GLOW ================= */

.ui-glow {
  background: var(--dark-3);
  padding:20px;
  border-radius: var(--radius);
  box-shadow: 0 0 30px var(--accent-glow);
  color:#fff;
}

.ui-glow-strong {
  box-shadow: 0 0 60px var(--accent-glow);
}

/* ================= BUTTONS ================= */

.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent);
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  transition:.2s;
}

.btn-primary:hover {
  opacity:.85;
}

/* ================= SECTION DIVIDERS ================= */

.section-divider-dark {
  height:80px;
  background:linear-gradient(180deg,var(--dark),transparent);
}

.section-divider-paper {
  height:80px;
  background:linear-gradient(180deg,#f2efe6,transparent);
}