/* ══════════════════════════════════════
   ARTIFACT HERO
══════════════════════════════════════ */
#artifact-hero {
    position: relative; margin: 16px 0 -18px; border-radius: 4px;
    height: 300px; overflow: hidden; cursor: pointer; isolation: isolate; z-index: 1;
    background: #0a0a0a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.8), 0 8px 40px rgba(0,0,0,.7);
    transition: transform .8s ease;
}
#artifact-hero:hover { transform: scale(1.02); }

.ah-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    filter: brightness(.4) saturate(.3) contrast(1.5) grayscale(.6);
    transform: scale(1.4); transition: filter .8s ease, transform 10s ease;
}
#artifact-hero:hover .ah-bg { filter: brightness(.7) saturate(.5) contrast(1.2); transform: scale(1.1); }

.ah-scanlines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.18) 2px, rgba(0,0,0,.18) 4px);
    pointer-events: none; z-index: 1;
}
.ah-accent-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg,#c0392b,#8B4513,#c0392b); z-index: 4; }

#ah-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; z-index: 2; }

.ah-type {
    position: absolute; top: 16px; left: 16px;
    font-family: 'Courier New', monospace; font-size: .55rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: #c0392b;
    background: rgba(0,0,0,.85); border: 1px solid #c0392b; border-left: 3px solid #c0392b;
    padding: 3px 10px 3px 8px; z-index: 4;
}
.ah-num { position: absolute; right: 16px; top: 12px; font-family: 'Courier New', monospace; font-size: .6rem; color: rgba(255,255,255,.12); letter-spacing: .1em; z-index: 2; user-select: none; }

.ah-play {
    position: absolute; right: 20px; top: 50%; transform: translateY(-60%);
    width: 44px; height: 44px; border-radius: 2px;
    border: 1px solid rgba(255,255,255,.25); background: rgba(10,10,10,.8);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: rgba(255,255,255,.7); z-index: 4;
    transition: border-color .2s, color .2s, background .2s; font-family: monospace;
}
#artifact-hero:hover .ah-play { border-color: #c0392b; color: #fff; background: rgba(192,57,43,.15); }

.ah-content { position: absolute; bottom: 0; left: 0; right: 80px; padding: 0 18px 18px 20px; z-index: 4; }
.ah-kicker  { font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 5px; }
.ah-title   { font-family: var(--fd); font-size: clamp(1.8rem,4.5vw,1rem); font-weight: 900; line-height: .92; color: #fff; letter-spacing: -.02em; overflow: hidden; text-transform: uppercase; }
.ah-tline   { display: block; transform: translateY(105%); animation: lineup 1.6s cubic-bezier(.22,1,.36,1) forwards; }
.ah-tline:nth-child(2) { animation-delay: .08s; }
@keyframes lineup { to { transform: translateY(0); } }

.ah-watermark {
    position: absolute; bottom: 18px; right: 80px;
    font-family: var(--fd); font-size: .6rem; font-weight: 700;
    letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.7);
    writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
    user-select: none; pointer-events: none; z-index: 3;
}
.ah-meta { margin-top: 7px; font-family: 'Courier New', monospace; font-size: .6rem; color: rgba(255,255,255,.35); display: flex; align-items: center; gap: 8px; letter-spacing: .06em; }
.ah-dot  { width: 2px; height: 2px; border-radius: 0; background: rgba(255,255,255,.2); transform: rotate(45deg); }