/* Iridesceux History & Timeline — v9 / Legacy Stage */

.history-entry{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  outline:none;
  cursor:pointer;
}
.history-entry::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:7% -4%;
  opacity:0;
  transform:scale(.9);
  filter:blur(30px);
  background:
    radial-gradient(circle at 8% 50%,rgba(245,72,87,.34),transparent 34%),
    radial-gradient(circle at 37% 50%,rgba(99,87,255,.30),transparent 37%),
    radial-gradient(circle at 68% 50%,rgba(8,189,141,.27),transparent 37%),
    radial-gradient(circle at 94% 50%,rgba(17,185,231,.32),transparent 34%);
  transition:opacity .34s ease,transform .45s cubic-bezier(.16,.82,.2,1);
}
.history-entry::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  opacity:0;
  transform:scaleX(.15);
  transform-origin:left;
  background:linear-gradient(90deg,var(--red),var(--violet),var(--green),var(--cyan));
  transition:opacity .28s ease,transform .48s cubic-bezier(.16,.82,.2,1);
}
.history-entry:hover::before,
.history-entry:focus-visible::before,
.history-entry.is-selected::before{opacity:1;transform:scale(1.035)}
.history-entry:hover::after,
.history-entry:focus-visible::after,
.history-entry.is-selected::after{opacity:1;transform:scaleX(1)}
.history-entry__year,
.history-entry__copy span{
  position:relative;
  z-index:1;
  transition:transform .34s cubic-bezier(.16,.82,.2,1),opacity .24s ease;
}
.history-entry__copy span{display:inline-block}
.history-entry:hover .history-entry__year,
.history-entry:focus-visible .history-entry__year,
.history-entry.is-selected .history-entry__year{transform:translateX(7px)}
.history-entry:hover .history-entry__copy span,
.history-entry:focus-visible .history-entry__copy span,
.history-entry.is-selected .history-entry__copy span{transform:translateX(10px)}

/* Simple NBCU-inspired story stage: one box grows open in-page. */
.history-expansion{
  --history-stage-height:clamp(780px,94svh,1080px);
  position:relative;
  width:100%;
  height:0;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#050507;
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    height .76s cubic-bezier(.2,.76,.16,1),
    opacity .22s ease,
    visibility 0s linear .76s;
}
.history-expansion.is-open{
  height:var(--history-stage-height);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:
    height .76s cubic-bezier(.2,.76,.16,1),
    opacity .22s ease,
    visibility 0s linear 0s;
}
.history-expansion::before{
  content:"";
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  top:0;
  height:5px;
  background:linear-gradient(90deg,var(--red),var(--violet),var(--green),var(--cyan));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .62s .06s cubic-bezier(.16,.82,.2,1);
}
.history-expansion.is-open::before{transform:scaleX(1)}

.history-expansion__media,
.history-expansion__media video,
.history-expansion__media img,
.history-expansion__tint,
.history-expansion__colorwash{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.history-expansion__media{z-index:0;overflow:hidden;background:#050507}
.history-expansion__media video,
.history-expansion__media img{
  object-fit:cover;
  opacity:0;
  transform:scale(1.018);
  transition:opacity .42s ease,transform 7s cubic-bezier(.18,.74,.2,1);
}
.history-expansion__media video.is-active,
.history-expansion__media img.is-active{opacity:1;transform:scale(1)}
.history-expansion__tint{
  z-index:2;
  background:
    linear-gradient(90deg,rgba(5,5,7,.73) 0%,rgba(5,5,7,.42) 42%,rgba(5,5,7,.66) 70%,rgba(5,5,7,.84) 100%),
    rgba(0,0,0,.16);
}
.history-expansion__colorwash{
  z-index:3;
  opacity:.15;
  mix-blend-mode:screen;
  pointer-events:none;
  background:
    radial-gradient(circle at 9% 18%,rgba(245,72,87,.42),transparent 27%),
    radial-gradient(circle at 83% 15%,rgba(99,87,255,.38),transparent 29%),
    radial-gradient(circle at 16% 90%,rgba(8,189,141,.34),transparent 28%),
    radial-gradient(circle at 90% 87%,rgba(17,185,231,.37),transparent 28%);
}

.history-expansion__close{
  position:absolute;
  z-index:8;
  top:30px;
  right:4.5vw;
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 0;
  border:0;
  background:none;
  color:#fff;
  opacity:0;
  transform:translateY(-6px);
  cursor:pointer;
  font-size:11px;
  transition:opacity .30s .22s ease,transform .30s .22s ease;
}
.history-expansion.is-open .history-expansion__close{opacity:.76;transform:none}
.history-expansion__close:hover{opacity:1!important}
.history-expansion__close i{
  position:relative;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
}
.history-expansion__close i::before,
.history-expansion__close i::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:15px;
  height:1px;
  background:#fff;
}
.history-expansion__close i::before{transform:rotate(45deg)}
.history-expansion__close i::after{transform:rotate(-45deg)}

.history-expansion__content{
  position:absolute;
  z-index:6;
  right:clamp(54px,7vw,118px);
  top:45%;
  width:min(760px,52vw);
  max-height:72%;
  text-align:right;
  opacity:0;
  transform:translateY(calc(-50% + 28px));
  transition:opacity .50s .20s ease,transform .62s .20s cubic-bezier(.16,.82,.2,1);
}
.history-expansion.is-open .history-expansion__content{opacity:1;transform:translateY(-50%)}
.history-expansion__eyebrow{
  display:block;
  margin:0 0 24px;
  color:rgba(255,255,255,.54);
  font-size:11px;
}
.history-expansion__year-wrap{display:flex;justify-content:flex-end;overflow:visible}
.history-expansion__year{
  color:#fff;
  white-space:nowrap;
  font-family:var(--display);
  font-size:clamp(110px,17vw,275px);
  font-weight:900;
  font-style:normal;
  line-height:.72;
  letter-spacing:-.085em;
  text-align:right;
  text-shadow:0 15px 60px rgba(0,0,0,.32);
}
.history-expansion__headline{
  max-width:720px;
  margin:38px 0 16px auto;
  color:#fff;
  font-size:clamp(32px,4.4vw,68px);
  line-height:.94;
  letter-spacing:-.045em;
  text-align:right;
}
.history-expansion__description{
  display:block!important;
  max-width:720px;
  max-height:25vh;
  margin:0 0 0 auto;
  overflow:auto;
  padding-left:20px;
  color:rgba(255,255,255,.82)!important;
  font-size:clamp(14px,1.25vw,19px);
  line-height:1.7;
  text-align:right;
  opacity:1!important;
  visibility:visible!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;
}
.history-expansion__content.is-refreshing{animation:historyStoryRefresh .36s cubic-bezier(.16,.82,.2,1)}
@keyframes historyStoryRefresh{
  0%{opacity:.28;transform:translateY(calc(-50% + 12px))}
  100%{opacity:1;transform:translateY(-50%)}
}

.history-expansion__timeline{
  position:absolute;
  z-index:7;
  left:clamp(26px,4.5vw,70px);
  bottom:36px;
  width:min(570px,48vw);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .42s .30s ease,transform .52s .30s cubic-bezier(.16,.82,.2,1);
}
.history-expansion.is-open .history-expansion__timeline{opacity:1;transform:none}
.history-expansion__timeline-label{
  display:block;
  margin:0 0 16px;
  color:rgba(255,255,255,.50);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.history-expansion__timeline-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:start;
}
.history-expansion__timeline-line{
  position:absolute;
  left:18px;
  right:18px;
  top:14px;
  height:2px;
  background:linear-gradient(90deg,var(--red),var(--violet),var(--green),var(--cyan));
  opacity:.72;
}
.history-expansion__timeline button{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  gap:8px;
  width:auto;
  padding:0 6px;
  border:0;
  background:none;
  color:rgba(255,255,255,.48);
  cursor:pointer;
  font-size:11px;
  text-align:center;
  transition:color .2s,transform .22s cubic-bezier(.16,.82,.2,1);
}
.history-expansion__timeline button:hover{color:#fff;transform:translateY(-3px)}
.history-expansion__timeline button i{width:30px;height:30px;display:grid;place-items:center}
.history-expansion__timeline button i img{
  width:25px;
  height:25px;
  object-fit:contain;
  opacity:.50;
  transition:opacity .2s,transform .2s,filter .2s;
}
.history-expansion__timeline button:hover i img{opacity:.86;transform:scale(1.07)}
.history-expansion__timeline button.is-active{color:#fff}
.history-expansion__timeline button.is-active i img{
  opacity:1;
  transform:scale(1.16);
  filter:
    drop-shadow(0 0 7px rgba(245,72,87,.34))
    drop-shadow(0 0 11px rgba(99,87,255,.28))
    drop-shadow(0 0 15px rgba(8,189,141,.20))
    drop-shadow(0 0 18px rgba(17,185,231,.18));
}

@media(max-width:900px){
  .history-expansion{--history-stage-height:clamp(800px,94svh,1040px)}
  .history-expansion__content{left:7vw;right:7vw;top:43%;width:auto;max-height:62%}
  .history-expansion__year{font-size:clamp(82px,24vw,175px)}
  .history-expansion__headline{margin-top:28px;font-size:clamp(30px,7.5vw,54px)}
  .history-expansion__description{max-height:24vh;font-size:14px}
  .history-expansion__timeline{left:6vw;right:6vw;bottom:25px;width:auto}
}
@media(max-width:650px){
  .history-list article{grid-template-columns:1fr;gap:18px}
  .history-expansion{--history-stage-height:820px}
  .history-expansion__close{top:18px;right:6vw}
  .history-expansion__content{top:40%}
  .history-expansion__year{font-size:23vw}
  .history-expansion__headline{margin-top:22px}
  .history-expansion__description{max-height:24vh;line-height:1.58}
  .history-expansion__timeline button{padding:0 2px;font-size:9px}
  .history-expansion__timeline button i{width:25px;height:25px}
  .history-expansion__timeline button i img{width:21px;height:21px}
  .history-expansion__timeline-line{top:12px}
}
@media(prefers-reduced-motion:reduce){
  .history-entry::before,.history-entry::after,.history-entry__year,.history-entry__copy span,
  .history-expansion,.history-expansion::before,.history-expansion__content,.history-expansion__timeline,
  .history-expansion__close,.history-expansion__media video,.history-expansion__media img,
  .history-expansion__timeline button{transition:none!important;animation:none!important}
}