/* Homepage spotlight: one game leads the page. We Love AI shows Woodward Avenue on the last normal day, then
   an ink line sweeps across and the same block appears after the takeover (spotlight.js). Colors and type
   come from the We Love AI page: newsprint caption, ochre and blood tags, Anton title. */
@font-face{font-family:"Patrick Hand SC";src:url("/games/we-love-ai/fonts/patrick-hand-sc-latin-400-normal.woff2") format("woff2");font-display:swap}
@property --cut{syntax:'<percentage>';inherits:true;initial-value:100%}

.spotlight{--ink:#120f14;--cap:#e6d9b5;--ochre:#c8952b;--blood:#8e1c1c;--cut:100%;position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);min-height:min(86vh,800px);display:flex;align-items:flex-end;overflow:clip;padding:96px var(--edge) 64px;background:var(--ink)}
.spotlight[data-state=after]{--cut:0%}
.spotlight.is-moving{transition:--cut 1.5s cubic-bezier(.75,0,.2,1)}

.spot-art{position:absolute;inset:0;z-index:-2}
.spot-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.spot-after{clip-path:inset(0 0 0 var(--cut))}
/* Wide screens: widen the art past the right edge so the streetcar stop clears the title. */
@media(min-width:1001px){.spot-art img{width:124%;max-width:none}}
/* The ink line that leads the takeover across the street. */
.spot-edge{position:absolute;top:-1%;bottom:-1%;left:var(--cut);width:22px;margin-left:-11px;background:var(--ink);opacity:0;transition:opacity .25s;
  clip-path:polygon(35% 0,80% 0,62% 7%,95% 13%,58% 21%,88% 29%,50% 36%,100% 44%,60% 52%,90% 60%,48% 68%,84% 76%,55% 84%,92% 92%,66% 100%,20% 100%,42% 92%,8% 84%,38% 76%,0 68%,40% 60%,12% 52%,44% 44%,5% 36%,36% 29%,10% 21%,40% 13%,6% 7%)}
.spotlight.is-moving .spot-edge{opacity:1}
.spot-flash{position:absolute;inset:0;background:var(--blood);mix-blend-mode:multiply;opacity:0;pointer-events:none}
.spotlight.is-falling .spot-flash{animation:spot-flash 1.1s ease-out}
@keyframes spot-flash{0%{opacity:0}35%{opacity:.55}100%{opacity:0}}
.spotlight::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,13,22,.9) 0,rgba(13,13,22,.66) 32%,rgba(13,13,22,0) 60%),linear-gradient(0deg,rgba(13,13,22,.8) 0,rgba(13,13,22,0) 42%)}

.spot-copy{max-width:640px}
.spot-kicker{margin:0 0 12px;font:400 15px/1.2 Anton,Impact,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.media-site .spotlight h1{margin:0 0 22px;font-size:clamp(76px,10.5vw,160px);line-height:.86;text-transform:uppercase;white-space:nowrap;color:var(--paper)}
.spot-cap{display:inline-block;max-width:30ch;margin:0 0 28px;padding:14px 18px 14px 26px;background:var(--cap);color:var(--ink);font:400 22px/1.22 "Patrick Hand SC","Comic Sans MS",cursive;box-shadow:inset 7px 0 0 var(--ochre),5px 5px 0 var(--ink)}
.spotlight .actions{display:flex;flex-wrap:wrap;gap:12px}
.spotlight .btn{min-height:50px;padding:12px 22px;font-size:15px;letter-spacing:.04em}
.spotlight .spot-discord{background:rgba(13,13,22,.55);border-color:var(--paper)}
.spotlight .spot-discord:hover{background:var(--paper);color:var(--bg)}
.spotlight .spot-discord:active{background:var(--muted);color:var(--bg)}
.spot-note{margin:18px 0 0;font-size:15px;color:var(--muted)}

/* Before / After: a two-button switch in the same tags the game page uses. */
.spot-views{position:absolute;right:var(--edge);bottom:64px;display:flex;gap:8px}
.spotlight .spot-views button{min-height:44px;padding:8px 16px 7px;border:2px solid var(--ochre);background:rgba(18,15,20,.7);color:var(--paper);font:400 16px/1 Anton,Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background .16s,color .16s,border-color .16s}
.spotlight .spot-views button[data-view=after]{border-color:#c4473f}
.spotlight .spot-views button:hover{background:rgba(18,15,20,.92)}
.spotlight .spot-views button[aria-pressed=true]{background:var(--ochre);color:var(--ink);cursor:default}
.spotlight .spot-views button[data-view=after][aria-pressed=true]{background:var(--blood);border-color:var(--blood);color:#f3eddd}
.spotlight .spot-views button:active{transform:translateY(1px)}
.spotlight :is(a,button):focus-visible{outline:3px solid var(--gold);outline-offset:3px}

@media(max-width:1000px){
  .spotlight{min-height:680px;padding-bottom:48px}
  .spot-views{bottom:auto;top:24px}
}
/* Phones: the street gets its own band at the top and the title overlaps its lower edge, so the copy sits on
   solid ink instead of the bright sky. */
@media(max-width:700px){
  .spotlight{flex-direction:column;align-items:stretch;min-height:0;padding:0 16px 36px}
  .spotlight::after{content:none}
  .spot-art{position:relative;inset:auto;order:-1;height:clamp(250px,70vw,420px);margin:0 -16px}
  .spot-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink) 0,rgba(18,15,20,.6) 26%,rgba(18,15,20,0) 52%);pointer-events:none}
  .spot-art img{object-position:50% 50%}
  .spot-copy{position:relative;margin-top:-58px}
  .media-site .spotlight h1{font-size:min(19vw,96px)}
  .spot-cap{font-size:19px;padding:12px 14px 12px 22px}
  .spot-views{right:16px;top:16px}
  .spotlight .actions .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .spotlight.is-moving{transition:none}
  .spotlight.is-falling .spot-flash{animation:none}
}