/* Starforge cinematic pass: a directed entertainment archive, not an effects demo. */

/* Signature opening: the selector now reads like frames from an edit. */
.scene-picker{gap:12px}
.scene-picker button{
  width:clamp(150px,12vw,188px);
  min-width:0;
  min-height:68px;
  display:grid;
  grid-template-columns:0 1fr;
  align-items:center;
  gap:0;
  overflow:hidden;
  border-top-color:#ffffff38;
  transition:grid-template-columns .45s cubic-bezier(.2,.75,.2,1),border-color .25s,color .25s;
}
.scene-picker button[aria-pressed=true]{grid-template-columns:58px 1fr}
.scene-picker button>.scene-thumb{
  width:48px;
  height:38px;
  opacity:0;
  background:center/cover no-repeat;
  filter:grayscale(1) contrast(1.05);
  transform:translateX(-10px);
  transition:opacity .3s,transform .45s cubic-bezier(.2,.75,.2,1),filter .3s;
}
.scene-picker button:nth-child(1)>.scene-thumb{background-image:url('/assets/photo-057.webp')}
.scene-picker button:nth-child(2)>.scene-thumb{background-image:url('/assets/photo-048.webp')}
.scene-picker button:nth-child(3)>.scene-thumb{background-image:url('/assets/photo-046.webp')}
.scene-picker button[aria-pressed=true] .scene-thumb{opacity:1;transform:none;filter:grayscale(0) contrast(1.05)}
.scene-picker button>.scene-meta{display:flex;min-width:0;flex-direction:column;gap:3px;margin:0;opacity:1}
.scene-meta small{font-size:11px;line-height:1;opacity:.66}
.scene-meta strong{font-size:12px;line-height:1.25;font-weight:400;white-space:nowrap}
.cinema-opening[data-scene-active="1"] .cinema-count,
.cinema-opening[data-scene-active="2"] .cinema-count{color:var(--red)}

/* Tactile controls. */
.button{position:relative;overflow:hidden;isolation:isolate;transition:color .25s,border-color .25s,transform .18s}
.button:active{transform:translateY(2px)}
.text-link{transition:color .2s,padding-left .25s}
.text-link:hover{padding-left:4px}

/* Episodes behave like editorial covers rather than repeated cards. */
.episode{position:relative}
.episode:before{
  position:absolute;
  z-index:3;
  top:17px;
  right:18px;
  font-family:Outside,Impact,sans-serif;
  font-size:clamp(3rem,5vw,5.6rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px #ffffff70;
  pointer-events:none;
}
.episode:nth-child(1):before{content:'19'}
.episode:nth-child(2):before{content:'14'}
.episode-thumb{border-bottom:3px solid transparent;transition:border-color .25s,transform .35s cubic-bezier(.2,.75,.2,1)}
.episode:hover .episode-thumb{border-color:var(--red);transform:translateY(-4px)}
.episode:hover h3{color:var(--red)}
.episode h3{transition:color .2s}

/* Put Bobby's real receipts on screen, not deep in a paragraph. */
.bio-receipts{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--red);
  color:#080808;
  border-top:1px solid #080808;
  border-bottom:1px solid #080808;
}
.bio-receipts>div{padding:clamp(42px,5vw,72px) var(--pad)}
.bio-receipts>div+div{border-left:1px solid #080808}
.bio-receipts .eyebrow{display:block;margin-bottom:18px}
.bio-receipts strong{
  display:block;
  font-family:Outside,Impact,'Arial Narrow',sans-serif;
  font-size:clamp(3.7rem,6.6vw,7.2rem);
  font-weight:400;
  line-height:.86;
  letter-spacing:-.025em;
  text-transform:uppercase;
}

/* Each history chapter gets its own visual edit. */
#early{background:#ece9e1;color:#111}
#early:before{background:#00000028}
#early .chapter-copy p,#early figcaption{color:#5d5a53}
#early .chapter-frame{background:#f8f6ef;box-shadow:0 20px 48px #29251d2e}
#neutrons{background:#080808}
#studio{background:#151515}
#now{background:#0c0c0c}

@media(min-width:901px){
  #neutrons .chapter-copy,#now .chapter-copy{grid-column:2;grid-row:1}
  #neutrons .chapter-photos,#now .chapter-photos{grid-column:1;grid-row:1}
  #neutrons .chapter-photos{gap:18px}
  #neutrons .chapter-frame:nth-child(even){margin-top:0}
  #neutrons .chapter-frame .photo-button{aspect-ratio:1}
  #studio .chapter-photos{grid-template-columns:1.15fr .85fr}
  #studio .chapter-frame:last-child{grid-column:1 / -1;width:82%;justify-self:end;margin-top:4px}
  #studio .chapter-frame:last-child .photo-button{aspect-ratio:16/9}
  #now .chapter-frame:first-child{grid-row:span 2}
  #now .chapter-frame:first-child .photo-button{aspect-ratio:3/5}
  #now .chapter-frame:nth-child(2){margin-top:86px}
  #now .chapter-frame:nth-child(4){margin-top:12px}
}

/* Directional image reveals provide contrast to the existing type reveals. */
.directed-frame{clip-path:inset(0 9% 0 0);opacity:.76;transition:clip-path .85s cubic-bezier(.2,.75,.2,1),opacity .55s}
.directed-frame:nth-child(even){clip-path:inset(0 0 0 9%)}
.directed-frame.is-directed-in{clip-path:inset(0);opacity:1}
.motion-off .directed-frame,.motion-off .directed-frame:nth-child(even){clip-path:none;opacity:1;transition:none}

@media(max-width:1000px){
  .scene-picker button{width:142px}
  .scene-picker button[aria-pressed=true]{grid-template-columns:50px 1fr}
  .scene-picker button>.scene-thumb{width:41px;height:34px}
}

@media(max-width:760px){
  .scene-picker{gap:9px}
  .scene-picker button,
  .scene-picker button[aria-pressed=true]{
    width:auto;
    grid-template-columns:1fr;
    gap:7px;
    min-height:62px;
    padding-top:7px;
  }
  .scene-picker button>.scene-thumb,
  .scene-picker button[aria-pressed=true] .scene-thumb{
    width:100%;
    height:26px;
    opacity:.48;
    transform:none;
  }
  .scene-picker button[aria-pressed=true] .scene-thumb{opacity:1}
  .scene-picker button>.scene-meta{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:baseline}
  .scene-meta strong{font-size:10px;overflow:hidden;text-overflow:ellipsis}
  .scene-meta small{font-size:10px}
  .episode:before{top:12px;right:12px;font-size:3.2rem}
  .episode:hover .episode-thumb{transform:none}
  .bio-receipts{grid-template-columns:1fr}
  .bio-receipts>div{padding-top:38px;padding-bottom:42px}
  .bio-receipts>div+div{border-left:0;border-top:1px solid #080808}
  .bio-receipts strong{font-size:clamp(3.4rem,16vw,5.2rem)}
  .directed-frame,.directed-frame:nth-child(even){clip-path:inset(0 0 7%);transition-duration:.6s}
  .directed-frame.is-directed-in{clip-path:inset(0)}
}

@media(prefers-reduced-motion:reduce){
  .scene-picker button,.scene-thumb,.button,.text-link,.episode-thumb,.directed-frame{transition:none!important}
  .directed-frame,.directed-frame:nth-child(even){clip-path:none;opacity:1}
}