/* EYEHOOD — home page art: the approved hall stills inside the steps and the closing call. */

/* each step opens with its moment in the hall */
.steps .panel{overflow:hidden;padding-top:0}
.step-art{
  display:block;margin:0 -18px 18px;aspect-ratio:16 / 9;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--inset);
}
.step-art img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.4s var(--ease);
}
.reveal.in .step-art img{transform:none}
.steps .panel:hover .step-art img{transform:scale(1.03)}

/* the closing call: the chosen one, and the button */
.closing{
  position:relative;z-index:2;isolation:isolate;overflow:hidden;
  min-height:min(88svh,820px);display:grid;align-items:end;
  padding:clamp(40px,7vw,112px) var(--pad);border-top:1px solid var(--line);
}
.closing-bg{position:absolute;inset:0;z-index:-2}
.closing-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.closing::before{ /* keep the words readable over the brightest part of the frame */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,6,6,.92) 0%,rgba(7,6,6,.62) 38%,rgba(7,6,6,0) 70%),
    linear-gradient(0deg,var(--bg) 0%,rgba(7,6,6,0) 45%),
    radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.7) 100%);
}
.closing-say{max-width:560px}
.closing-say h2{font-size:clamp(44px,5vw + 1rem,96px);line-height:.9;text-shadow:0 1px 2px rgba(7,6,6,.9),0 0 30px rgba(7,6,6,.8)}
.closing-say p{margin:18px 0 0;max-width:44ch;color:var(--clay);text-shadow:0 1px 2px rgba(7,6,6,.9),0 0 18px rgba(7,6,6,.9)}
.closing-cta{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.closing-cta .hall-clock{text-shadow:0 0 14px var(--bg)}

@media (max-width:720px){
  .closing{min-height:78svh}
  .closing::before{background:linear-gradient(0deg,var(--bg) 8%,rgba(7,6,6,.78) 46%,rgba(7,6,6,.25) 100%)}
  .closing-bg img{object-position:50% 30%}
}
@media (prefers-reduced-motion:reduce){
  .step-art img{transform:none;transition:none}
}

/* the hero clock is a link to tonight's show */
a.hall-clock{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
a.hall-clock:hover{border-bottom-color:var(--clay-2)}

/* phones: the two-row nav is tall, so the hero tightens to keep the button and the clock on the first screen */
@media (max-width:720px){
  .hall-hero{gap:10px;padding-top:12px;padding-bottom:20px;min-height:calc(100svh - 104px)}
  .hall-hero .hall-eye{width:84px}
  .hall-copy .kick{margin-bottom:10px;font-size:10px}
  .hall-copy .line{font-size:14.5px;margin-top:8px}
  .hall-cta{margin-top:12px;gap:6px}
  .mush{width:104px;height:88px}
  .mush .cap{height:62px}
  .mush .base{height:32px}
  .mush-label{font-size:18px}
}