/* Premium polish layer — additive, loaded last. Elevates depth, cards, hero and motion
   without changing layout structure. © 2026 Jay Riccardi. */

/* ---- Surface depth: replace flat voids with layered charcoal + faint accents ---- */
body{
  background:
    radial-gradient(1200px 600px at 82% -6%, #21322b55, transparent 60%),
    radial-gradient(900px 500px at 0% 8%, #1a251f66, transparent 55%),
    #090d0c;
  background-attachment:fixed;
}

/* Subtle grain so large dark areas never read as dead flat black */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app,main,header,footer{position:relative;z-index:1}

/* ---- Sticky header with depth on scroll ---- */
header.nav{position:sticky;top:0;z-index:50;transition:background .3s ease,backdrop-filter .3s ease,box-shadow .3s ease,padding .3s ease}
header.nav.scrolled{background:#0a0f0edd;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 #f4f0e714,0 10px 30px #0006}

/* ---- Eyebrows: accented with a short leading rule ---- */
.eyebrow{color:var(--accent,var(--gold));letter-spacing:.14em}
section .eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px;opacity:.7}
.card-overlay .eyebrow::before,.preview-copy .eyebrow::before{display:none}

/* ---- Game cards: cinematic hover, accent expression ---- */
.game-card{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.game-card .card-art{position:relative;transition:border-color .4s ease,box-shadow .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);overflow:hidden}
/* accent top rule that grows on hover */
.game-card .card-art::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;z-index:3;background:linear-gradient(90deg,var(--accent,var(--gold)),transparent);transition:width .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.game-card:hover .card-art::before,.game-card:focus-within .card-art::before{width:100%}
.game-card:hover{transform:translateY(-6px)}
.game-card:hover .card-art,.game-card:focus-within .card-art{border-color:var(--accent,var(--gold));box-shadow:0 22px 50px -20px #000c,0 0 0 1px color-mix(in srgb,var(--accent,var(--gold)) 40%,transparent),0 0 40px -12px color-mix(in srgb,var(--accent,var(--gold)) 55%,transparent)}
.game-card .card-art>img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.game-card:hover .card-art>img{transform:scale(1.045)!important;filter:saturate(1.06) contrast(1.03)}
/* number chip + action glyph pick up the accent */
.game-card .number{color:var(--accent,var(--gold));border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 45%,transparent);transition:background .4s ease,color .4s ease}
.game-card:hover .number{background:color-mix(in srgb,var(--accent,var(--gold)) 18%,#102019)}
.game-card .card-action{transition:transform .4s cubic-bezier(.2,.7,.2,1),color .4s ease}
.game-card:hover .card-action{transform:translate(3px,-3px);color:var(--accent,var(--gold))}

/* ---- Hero art panel: gold hairline + inner scrim + gentle entrance ---- */
.hero-art,.detail-hero .hero-art{position:relative;border:1px solid #f4f0e71a;box-shadow:inset 0 0 0 1px #00000030,0 30px 60px -30px #000}
.hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,#0009);mix-blend-mode:multiply}
.hero-art .hero-scene{animation:heroReveal 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroReveal{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* ---- Buttons: refined fill + lift ---- */
.button{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,background .3s ease,color .3s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent,var(--gold)) 70%,#000)}
.text-link{position:relative}
.text-link::after{content:"";position:absolute;left:0;bottom:6px;height:1px;width:0;background:currentColor;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.text-link:hover::after{width:100%}

/* ---- Featured / spotlight chip ---- */
.featured{transition:transform .35s ease}
.featured:hover{transform:translateX(4px)}
.featured strong{background:linear-gradient(90deg,var(--paper),color-mix(in srgb,var(--gold) 60%,var(--paper)));-webkit-background-clip:text;background-clip:text}

/* ---- Preview cards (game-previews page) ---- */
.preview-card .screen-open{position:relative;overflow:hidden;display:block}
.preview-card .screen-open img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.preview-card:hover .screen-open img{transform:scale(1.04);filter:saturate(1.05)}
.preview-card .screen-open::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,#000a);opacity:0;transition:opacity .4s ease;pointer-events:none}
.preview-card:hover .screen-open::after{opacity:1}

/* ---- Scroll reveal (progressive; JS adds .reveal then .in) ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(2){transition-delay:.06s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.12s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.18s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.24s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.30s}

/* ---- Typography refinement ---- */
h1,h2,h3{letter-spacing:-.01em}
.lead,p{line-height:1.65}

@media(prefers-reduced-motion:reduce){
  .hero-art .hero-scene{animation:none}
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none}
  .game-card:hover{transform:none}
  .game-card:hover .card-art>img,.preview-card:hover .screen-open img{transform:none!important}
}