/* ============================================================
   RAW v3.8 — "Midgard Nights" cinematic fantasy layer
   Original AI-generated midgard-fantasy art (no official Gravity
   content, no trademarked designs — user directive 2026-08-07).
   ============================================================ */

/* ---------- Art-backed page ambience (very subtle, non-occluding) ---------- */
body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(45,212,191,.05), transparent 60%),
        radial-gradient(900px 500px at 0% 0%, rgba(224,177,93,.04), transparent 55%),
        linear-gradient(180deg, #070b14 0%, #0a1120 100%);
}

/* ---------- Premium glass header (sits above hero art) ---------- */
#site-header, #header, .header {
    background: linear-gradient(180deg, rgba(7,11,20,.94), rgba(13,27,42,.85));
    border-bottom: 1px solid rgba(224,177,93,.14);
    box-shadow: 0 4px 26px rgba(7,11,20,.5);
    /* backdrop-filter is expensive (layout/paint every scroll); skip it on
       small screens where it buys nothing and hurts mobile perf */
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) and (min-width: 701px) {
    #site-header, #header, .header {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* ---------- Hero: full-bleed art + layered scrims ---------- */
.raw-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(224,177,93,.22);
    border-radius: var(--rad-lg);
    margin: 0 0 26px;
    box-shadow: 0 14px 44px rgba(7,11,20,.6), 0 0 60px rgba(90,60,160,.14);
    /* base gradient scrim (always applies even if art 404s) */
    background:
        linear-gradient(180deg,
            rgba(7,11,20,.55) 0%,
            rgba(7,11,20,.30) 34%,
            rgba(7,11,20,.68) 78%,
            var(--raw-abyss) 100%);
}
.raw-hero .raw-hero-art {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 38%;
    /* art dimmer — guarantees text contrast over ANY bright zone */
    filter: brightness(.4) saturate(.85) contrast(1.05);
}
.raw-hero::before { /* scrim — dark left gradient (text side) + strong full overlay */
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        linear-gradient(100deg, rgba(5,8,15,.97) 0%, rgba(5,8,15,.85) 34%, rgba(5,8,15,.55) 62%, rgba(5,8,15,.25) 100%),
        linear-gradient(180deg, rgba(7,11,20,.65) 0%, rgba(7,11,20,.45) 45%, rgba(7,11,20,.75) 100%);
}
/* soft aurora shimmer above the art (GPU-safe, honors reduced motion) — reduced
   opacity since the current hero art is bright; keeps a hint of depth */
.raw-hero::after {
    content: "";
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .18;
    background:
        radial-gradient(600px 260px at 78% 8%, rgba(180,140,255,.20), transparent 65%),
        radial-gradient(520px 240px at 12% 90%, rgba(45,212,191,.14), transparent 60%);
    mix-blend-mode: screen;
}
.raw-hero-inner { position: relative; z-index: 3; padding: 52px 34px 30px; }
.raw-hero-title {
    margin: 0 0 12px;
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    letter-spacing: .01em;
    line-height: 1.06;
    color: #ffd76a;
    text-shadow:
        0 0 6px rgba(255, 208, 92, .9),
        0 0 18px rgba(255, 176, 32, .65),
        0 0 42px rgba(255, 150, 20, .45),
        0 2px 3px rgba(5, 8, 15, .95),
        0 4px 12px rgba(5, 8, 15, .9);
    filter: drop-shadow(0 0 2px rgba(255, 215, 106, .8));
    -webkit-text-stroke: 1px rgba(60, 30, 0, .55);
    max-width: 860px;
}
.raw-hero-sub {
    margin: 0 0 26px;
    max-width: 680px;
    color: #e6ebf7;
    font-size: 1.08rem;
    line-height: 1.65;
    text-shadow: 0 1px 3px rgba(5, 8, 15, .95), 0 2px 10px rgba(5, 8, 15, .85);
}
.raw-hero-sub strong { color: var(--raw-gold); text-shadow: 0 1px 3px rgba(7,11,20,.95), 0 2px 12px rgba(7,11,20,.8); }
.raw-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.raw-hero-meta {
    display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
    font-size: .92em; color: #c7d2e8;
    border-top: 1px solid rgba(224,177,93,.18);
    padding-top: 14px;
    text-shadow: 0 1px 2px rgba(5, 8, 15, .9);
}
.raw-hero-meta code { font-family: var(--font-mono); background: rgba(13,27,42,.8); color: var(--raw-gold); padding: 2px 7px; border-radius: 5px; }
.raw-hero-meta .live-dot { color: var(--ok); }

/* hero glass button polish (no backdrop-filter — cheaper, mobile-safe) */
.raw-hero .raw-btn { background: rgba(13,27,42,.72); border-color: rgba(224,177,93,.35); }
.raw-hero .raw-btn:hover { background: rgba(13,27,42,.9); }
.raw-hero .raw-btn-primary { background: linear-gradient(135deg, var(--raw-gold), var(--raw-gold-hot)); border-color: var(--raw-gold); }
.raw-hero .raw-btn-primary:hover { box-shadow: 0 0 26px rgba(224,177,93,.5); }

/* ---------- Stats: glass tiles over a slim art band ---------- */
.raw-stats {
    position: relative;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px; margin: 0 0 28px;
}
.raw-stat {
    position: relative;
    background: rgba(13,27,42,.62);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(224,177,93,.16);
    border-radius: var(--rad);
    padding: 16px 18px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(7,11,20,.35);
    transition: transform .15s ease, border-color .2s ease;
}
.raw-stat:hover { transform: translateY(-2px); border-color: rgba(224,177,93,.4); }
.raw-stat .raw-stat-label { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: var(--text-low); }
.raw-stat .raw-stat-value { font-family: var(--font-disp); font-weight: 700; font-size: 1.55rem; color: var(--raw-gold); }

/* ---------- Bento: fantasy-icon chips + art-tinted cards ---------- */
.raw-bento-card {
    grid-column: span 4;
    position: relative; overflow: hidden;
    background:
        linear-gradient(160deg, rgba(22,33,58,.92), rgba(13,27,42,.94));
    border: 1px solid var(--raw-edge);
    border-radius: var(--rad);
    padding: 24px 22px;
}
.raw-bento-card::before { /* top art-tint line */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--raw-gold), var(--ai-cyan), var(--rune));
    opacity: .55; transition: opacity .2s ease;
}
.raw-bento-card:hover::before { opacity: 1; }
.raw-bento-card .raw-icon {
    width: 46px; height: 46px; margin-bottom: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(224,177,93,.16), rgba(56,189,248,.10));
    border: 1px solid rgba(224,177,93,.28);
    box-shadow: 0 0 16px rgba(224,177,93,.10);
}
.raw-bento-card .raw-icon svg { width: 24px; height: 24px; display: block; }
.raw-bento-card h3 { margin: 0 0 6px; font-family: var(--font-disp); }
.raw-bento-card p { color: var(--text-mid); }

/* ---------- News slider: art-tinted cards, gold hover ---------- */
.raw-news-head h2 { font-family: var(--font-disp); font-weight: 700; }
.raw-news-card {
    background:
        linear-gradient(150deg, rgba(22,33,58,.9), rgba(13,27,42,.94));
    border: 1px solid var(--raw-edge);
    border-radius: var(--rad);
    padding: 18px 20px;
    position: relative;
}
.raw-news-card::before {
    content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px;
    background: linear-gradient(90deg, var(--raw-gold), transparent);
    opacity: .5; transition: opacity .2s ease;
}
.raw-news-card:hover { border-color: rgba(224,177,93,.4); }
.raw-news-card:hover::before { opacity: 1; }

/* ---------- Below-fold sections: content-visibility (skip offscreen render) ---------- */
.raw-news, .raw-faq-section, .raw-connect-band, .raw-art-band {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
}

/* ---------- Connect band: solid dark surface with art as a right-side accent
   (CTA legibility first — full-bleed art scrim can't guarantee contrast on
   bright art zones; a solid dark panel with a decorative art edge is safe) ---------- */
.raw-connect-band {
    display: grid; grid-template-columns: 1fr minmax(200px, 340px); gap: 18px; align-items: center;
    background:
        linear-gradient(120deg, rgba(7,11,20,.94) 0%, rgba(10,17,32,.82) 45%, rgba(10,17,32,.55) 100%),
        url('../img/raw-art/bg_ready.webp') center / cover no-repeat;
    border: 1px solid rgba(224,177,93,.28);
    border-radius: var(--rad-lg); padding: 26px 28px; margin: 26px 0;
    position: relative; overflow: hidden;
}
.raw-connect-band > * { position: relative; z-index: 1; }
.raw-connect-band h3 { margin: 0 0 6px; color: #ffd76a; }
.raw-connect-band p { color: #dfe6f5; margin: 0; font-size: .95rem; text-shadow: 0 1px 3px rgba(5,8,15,.95); }

/* ---------- Art band section divider (subtle atmosphere between sections) ---------- */
.raw-art-band {
    position: relative;
    border-radius: var(--rad-lg);
    overflow: hidden;
    border: 1px solid var(--raw-edge);
    min-height: 180px;
    display: flex; align-items: center; justify-content: center;
    margin: 30px 0;
    background:
        linear-gradient(180deg, rgba(7,11,20,.88) 0%, rgba(13,27,42,.78) 55%, rgba(13,27,42,.82) 100%),
        url('../img/raw-art/bg_remember.webp') center / cover no-repeat;
}
.raw-art-band .raw-art-band-inner { position: relative; z-index: 2; padding: 34px 24px; text-align: center; max-width: 720px; }
.raw-art-band h2 { margin: 0 0 10px; font-family: var(--font-disp); font-weight: 700; color: #ffd76a; text-shadow: 0 0 8px rgba(255,176,32,.5), 0 2px 4px rgba(5,8,15,.95); }
.raw-art-band p { margin: 0 0 18px; color: #e6ebf7; line-height: 1.6; text-shadow: 0 1px 3px rgba(5,8,15,.95); }

/* ---------- FAQ panels get the art-tinted card treatment ---------- */
.raw-faq-section .raw-panel-card {
    background: linear-gradient(160deg, rgba(22,33,58,.9), rgba(13,27,42,.94));
}

/* ---------- Panel/card surfaces unify with art-tint ---------- */
.raw-panel-card, .raw-glass-card, .raw-donate-tier, .raw-item-card {
    background: linear-gradient(160deg, rgba(22,33,58,.9), rgba(13,27,42,.94));
}

/* ---------- Responsive: mobile art safe + readability ---------- */
@media (max-width: 700px) {
    .raw-hero-inner { padding: 30px 20px 22px; }
    .raw-hero { background-position: center 30%; }
    .raw-hero-title { font-size: 1.8rem; }
    .raw-hero-sub { font-size: 1rem; }
    .raw-hero-cta { flex-direction: column; }
    .raw-hero-cta .raw-btn { text-align: center; }
    .raw-hero-meta span { display: block; margin: 4px 0; }
    .raw-stats { grid-template-columns: repeat(2, 1fr); }
    .raw-bento-card { grid-column: span 12; }
    .raw-connect-band { grid-template-columns: 1fr; }
    .raw-connect-band::before { display: none; }
    .raw-connect-band > div[style*="flex"] { justify-content: flex-start !important; }
}
@media (max-width: 480px) {
    .raw-hero { background-position: center 26%; }
    .raw-hero-title { font-size: 1.55rem; }
}

/* ---------- Meet the Monsters — official RO mob showcase ---------- */
.raw-mobs { margin: 26px 0; }
.raw-mobs-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px;
    margin-top: 16px;
}
.raw-mob-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; margin: 0; padding: 18px 12px 14px; text-align: center;
    background: linear-gradient(160deg, rgba(10,17,32,.9), rgba(13,27,42,.85));
    border: 1px solid var(--raw-edge); border-radius: var(--rad-md);
    min-height: 190px;
}
.raw-mob-card img { image-rendering: pixelated; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.raw-mob-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.raw-mob-card figcaption strong { font-family: var(--font-disp); font-size: 1.02rem; color: var(--raw-gold); }
.raw-mob-card figcaption span { font-size: .8rem; color: var(--text-low); }
@media (max-width: 700px) {
    .raw-mobs-grid { grid-template-columns: repeat(2, 1fr); }
}