/* LOCAL TEST ONLY — no production files are modified. */
* { box-sizing: border-box; }
html,body { margin:0; min-width:320px; min-height:100%; background:#140408; }
body { font-family: Georgia,serif; }
.homepage { min-height:100svh; position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; }
.backdrop { position:absolute; inset:0; z-index:-2; background:#140408 url("assets/background.png") center center / cover no-repeat; }
.shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,1,5,.22),rgba(8,1,5,.09) 60%,rgba(8,1,5,.05)); }
.content { width:min(94vw,1100px); display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2vw,22px); padding:clamp(22px,5vh,58px) 0; }
.brand { margin:0; width:min(70vw,710px); line-height:0; }
.brand img { width:100%; height:auto; display:block; object-fit:contain; }
.navigation { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:clamp(10px,1.8vw,24px); }
.service { display:block; position:relative; width:100%; line-height:0; border-radius:8px; outline-offset:3px; }
.service img { display:block; width:100%; height:auto; object-fit:contain; }
.service--media { cursor:pointer; transition:filter .22s ease, transform .22s ease; }
.service--media:hover,.service--media:focus-visible { filter:brightness(1.16) drop-shadow(0 0 14px rgba(252,43,69,.58)); transform:translateY(-4px); }
.service--media:focus-visible { outline:2px solid #ffd2d2; }
.service--games { cursor:default; }
@media(max-width:650px) {
  .homepage { min-height:100svh; }
  .backdrop { background-position:66% center; }
  .shade { background:rgba(9,2,5,.30); }
  .content { width:min(95vw,500px); gap:22px; }
  .brand { width:100%; }
  .navigation { grid-template-columns:1fr; gap:12px; }
}
@media(prefers-reduced-motion:reduce){ .service--media {transition:none;} .service--media:hover {transform:none;} }

/* THREE SUBTLE EFFECTS — all optional, no edits to source artwork. */
/* 1. Crimson hover glow. Media navigates; Games remains inert. */
.service { transition: filter .32s ease, transform .32s ease; }
.service--media:hover,.service--media:focus-visible,.service--games:hover {
  filter: brightness(1.12) drop-shadow(0 0 12px rgba(232,26,56,.35));
  transform: translateY(-3px);
}
.service--games { cursor: default; }
/* 2. Slow title and card reveal. */
.brand { animation: revealTitle 1.25s ease-out both; }
.service--media { animation: revealCard 1.0s .35s ease-out both; }
.service--games { animation: revealCard 1.0s .52s ease-out both; }
@keyframes revealTitle {from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);} }
@keyframes revealCard {from {opacity:0; transform:translateY(9px);} to {opacity:1; transform:translateY(0);} }
/* 3. Sparse drifting embers — decorative and noninteractive. */
.embers { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ember { position:absolute; bottom:-12px; width:var(--s); height:var(--s); left:var(--x);
 border-radius:50%; opacity:0; background:radial-gradient(circle,rgba(255,187,149,.90) 0%,rgba(223,53,65,.72) 32%,rgba(175,14,36,0) 78%);
 box-shadow:0 0 7px 1px rgba(231,48,61,.35); animation: emberDrift var(--d) linear var(--delay) infinite; }
@keyframes emberDrift {
 0% {opacity:0; transform:translate3d(0,10px,0) scale(.7);}
 15% {opacity:var(--o);}
 75% {opacity:calc(var(--o) * .65);}
 100% {opacity:0; transform:translate3d(var(--dx),-110vh,0) scale(1.1);}
}
.content { position:relative; z-index:1; }
@media(prefers-reduced-motion:reduce){
 .brand,.service--media,.service--games,.ember {animation:none !important;}
 .embers {display:none;}
 .service {transition:none !important;}
 .service:hover {transform:none !important;}
}

/* FOURTH EFFECT: pronounced physical hover with an elevated card and accent light.
   Apply transforms to the image (not the entrance-animated wrapper) to avoid CSS-animation conflicts. */
.service { z-index: 0; isolation: isolate; }
.service img { transition: transform .38s cubic-bezier(.18,.75,.25,1.2), filter .3s ease; transform-origin: center; }
.service:is(:hover,:focus-visible) { z-index: 3; }
.service:is(:hover,:focus-visible) img {
  transform: translate3d(0,-13px,0) scale(1.055);
  filter: brightness(1.19) drop-shadow(0 13px 13px rgba(0,0,0,.56)) drop-shadow(0 0 22px rgba(255,51,73,.62));
}
.service--media:is(:hover,:focus-visible),.service--games:hover { transform:none; filter:none; }
/* Thin red wind wisps and raven feathers, passing behind interface and never receiving clicks. */
.wind-field { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.wind-haze { position:absolute; inset:-20%; opacity:.14; background:
 radial-gradient(ellipse 35% 6% at 30% 46%,rgba(255,120,135,.22),transparent 78%),
 radial-gradient(ellipse 35% 4% at 75% 65%,rgba(220,45,68,.28),transparent 85%);
 animation: windHaze 21s ease-in-out infinite alternate; }
@keyframes windHaze { from {transform:translateX(-6%) translateY(2%)} to {transform:translateX(8%) translateY(-3%)} }
.feather { position:absolute; left:var(--x); top:var(--y); width:var(--sz); height:calc(var(--sz) * 2.05); opacity:0;
 background:url('assets/raven-feather.svg') center/contain no-repeat;
 filter:drop-shadow(0 1px 2px rgba(20,0,4,.6)) drop-shadow(0 0 2px rgba(188,54,72,.28));
 animation: windFeather var(--dur) linear var(--delay) infinite; will-change:transform,opacity; }
@keyframes windFeather {
 0% { opacity:0; transform:translate3d(-32vw,-22vh,0) rotate(-42deg); }
 11% {opacity:var(--a)}
 38% {transform:translate3d(8vw,14vh,0) rotate(22deg)}
 65% {opacity:var(--a)}
 100% {opacity:0; transform:translate3d(66vw,61vh,0) rotate(190deg)}
}
@media(max-width:650px){.service:is(:hover,:focus-visible) img{transform:translateY(-7px) scale(1.025)} .wind-haze{opacity:.09}}
@media(prefers-reduced-motion:reduce){.wind-field{display:none} .service img{transition:none} .service:is(:hover,:focus-visible) img{transform:none;filter:brightness(1.12)}}