/* FreyaINC extra scenes (scenes2.js): final credits, duel, timeline. */

/* ---------------- final: credits roll ---------------- */
.t-final { padding: 0; justify-content: flex-start; }
.fin-black { position: absolute; inset: -112px 0 -104px; background: #03061C; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
.fin-black.on { opacity: 1; }
.fin-view { position: absolute; inset: 0; overflow: hidden; mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%); transition: opacity .6s; }
.fin-roll { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 0; will-change: transform; text-align: center; }
.fin-kicker { font-size: 34px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--mist); margin-bottom: 26px; }
.fin-title { font-family: var(--disp); font-weight: 800; font-size: 104px; line-height: .96; letter-spacing: -.03em; font-stretch: 82%; max-width: 1400px; text-wrap: balance; }
.fin-sub { margin-top: 22px; font-size: 40px; font-weight: 600; color: var(--hi); }
.fin-h { margin: 130px 0 46px; font-size: 32px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); }
.fin-cast { position: relative; display: flex; align-items: center; gap: 56px; width: 1380px; margin: 0 0 84px; text-align: left; }
.fin-cast .av.xl { box-shadow: 0 0 0 8px rgba(255, 255, 255, .08); }
.fin-col { flex: 1; min-width: 0; }
.fin-nm { font-family: var(--disp); font-weight: 800; font-size: 96px; line-height: 1; letter-spacing: -.03em; color: var(--c); }
.fin-place { margin-top: 10px; font-family: var(--disp); font-weight: 700; font-size: 36px; color: var(--mist); font-variant-numeric: tabular-nums; }
.fin-q { margin-top: 22px; font-size: 44px; line-height: 1.2; font-weight: 600; color: #fff; text-wrap: pretty; }
.fin-q span { display: block; margin-top: 6px; font-size: 28px; font-weight: 600; color: var(--mist); }
.fin-fact { margin-top: 14px; font-size: 32px; font-weight: 700; color: var(--hi); }
.fin-cast.host .fin-nm { font-size: 78px; }
.fin-cast.replaced .av, .fin-cast.replaced .fin-col { filter: grayscale(1); opacity: .6; transition: filter .5s, opacity .5s; }
.fin-stamp { left: 180px; top: 50%; right: auto; font-size: 120px; border-width: 12px; padding: 0 40px; transform: translateY(-50%) rotate(-10deg); mix-blend-mode: normal; background: rgba(3, 6, 28, .55); z-index: 2; animation: finStamp .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes finStamp { from { transform: translateY(-50%) rotate(-10deg) scale(3); opacity: 0; } }
.fin-guests { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fin-g { font-family: var(--disp); font-weight: 700; font-size: 58px; letter-spacing: -.01em; }
.fin-facts { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fin-fr { display: flex; align-items: baseline; gap: 22px; font-size: 40px; font-weight: 600; color: var(--mist); }
.fin-fr b { font-family: var(--disp); font-weight: 800; font-size: 76px; color: #fff; font-variant-numeric: tabular-nums; }
.fin-disc { margin: 150px 0 40px; max-width: 1100px; font-size: 30px; font-style: italic; color: var(--mist); }
.fin-end { margin-top: 260px; display: flex; flex-direction: column; align-items: center; }
.fin-end .logo { font-family: var(--disp); font-weight: 800; font-size: 260px; letter-spacing: -.05em; line-height: .9; font-stretch: 80%; }
.fin-end .logo b { color: var(--hi); }
.fin-end .yrs { margin-top: 26px; font-size: 44px; font-weight: 700; letter-spacing: .4em; color: var(--mist); }
.fin-end.landed { animation: finLand .7s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes finLand { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
.fin-view.gone { opacity: 0; transition: opacity 1.4s; }
.fin-post { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.fin-ptag { font-size: 30px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); animation: fadeUp .6s both; }
.fin-post .msg .text { font-size: 56px; }
.fin-post .msg .who { font-size: 28px; }
.fin-post .typing { font-size: 32px; }

/* ---------------- duel ---------------- */
.t-duel { justify-content: flex-start; padding-top: 26px; }
.t-duel h2 { font-family: var(--disp); font-weight: 800; font-size: 58px; letter-spacing: -.02em; margin: 0 0 14px; text-align: center; }
.duel-head { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; width: 1600px; }
.duel-p { display: flex; align-items: center; gap: 26px; animation: duelIn .6s cubic-bezier(.2, 1.3, .4, 1) both; position: relative; }
.duel-p.a { justify-content: flex-end; }
.duel-p.b { flex-direction: row-reverse; justify-content: flex-end; animation-name: duelInR; }
.duel-p .nm { font-family: var(--disp); font-weight: 800; font-size: 76px; letter-spacing: -.03em; color: var(--c); }
.duel-p .tally { font-family: var(--disp); font-weight: 800; font-size: 76px; width: 110px; height: 110px; border-radius: 26px; display: grid; place-items: center; background: rgba(6, 14, 70, .55); border: 3px solid var(--faint); font-variant-numeric: tabular-nums; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), background .3s; }
.duel-p.bump .tally { transform: scale(1.25); }
.duel-p.champ .tally { background: var(--hi); color: var(--ink); border-color: var(--hi); }
.duel-p.champ .av { box-shadow: 0 0 0 10px var(--hi), 0 0 70px 10px rgba(255, 216, 74, .55); }
.duel-head .vs { font-family: var(--disp); font-weight: 800; font-size: 64px; color: var(--hi); text-align: center; animation: slam .45s .35s both; }
@keyframes duelIn { from { opacity: 0; transform: translateX(-120px); } }
@keyframes duelInR { from { opacity: 0; transform: translateX(120px); } }
.duel-rows { width: 1640px; margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.drow { display: grid; grid-template-columns: 300px 1fr 400px 1fr 300px; align-items: center; gap: 18px; height: 104px; padding: 0 22px; border-radius: 26px; background: rgba(6, 14, 70, .5); border: 2px solid var(--faint); animation: rowIn .45s cubic-bezier(.2, 1.3, .4, 1) both; transition: opacity .4s, transform .4s, height .4s; }
.drow.past { opacity: .55; height: 78px; }
.drow.past .dl { font-size: 28px; }
.drow.past .dv { font-size: 44px; }
.drow .dl { text-align: center; font-size: 34px; font-weight: 700; line-height: 1.1; color: #fff; text-wrap: balance; transition: font-size .4s; }
.drow .dv { font-family: var(--disp); font-weight: 800; font-size: 60px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: font-size .4s, color .3s; }
.drow .dv small { font-size: .45em; font-weight: 700; color: var(--mist); margin-left: 8px; }
.drow .dv.a { text-align: right; }
.drow .dbar { height: 30px; position: relative; }
.drow .dbar i { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 12px; background: var(--c, #fff); opacity: .55; transition: opacity .3s; }
.drow .dbar.a i { right: 0; }
.drow .dbar.b i { left: 0; }
.drow.w-a .dv.a, .drow.w-b .dv.b { color: var(--hi); }
.drow.w-a .dbar.a i, .drow.w-b .dbar.b i { opacity: 1; }
.drow.w-a .dv.a::after, .drow.w-b .dv.b::before { content: '✓'; font-size: .6em; margin: 0 10px; color: var(--hi); }
.drow.tie .dl::after { content: ' · egal'; color: var(--mist); }
.drow.nowin .dv { color: #fff; }
.duel-foot { margin-top: 26px; font-size: 36px; font-weight: 600; color: var(--mist); text-align: center; animation: fadeUp .5s both; }

/* ---------------- timeline ---------------- */
.t-timeline { justify-content: flex-start; padding-top: 30px; }
.t-timeline h2 { font-family: var(--disp); font-weight: 800; font-size: 62px; letter-spacing: -.02em; margin: 0; text-align: center; }
.tl-sub { margin-top: 6px; font-size: 32px; font-weight: 600; color: var(--mist); }
.tl-wrap { position: relative; width: 1640px; height: 560px; margin-top: 26px; }
.tl-wrap svg { display: block; overflow: visible; }
.tl-evline { animation: tlLine .5s ease-out both; }
.tl-avg { stroke-dashoffset: 0; animation: tlAvg .7s ease-out both; }
.tl-evline.still, .tl-avg.still { animation: none; }
@keyframes tlLine { from { opacity: 0; } }
@keyframes tlAvg { from { opacity: 0; stroke-width: 0; } }
.tl-flag { position: absolute; top: -6px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 8px; border-radius: 40px; background: #fff; color: var(--ink); font-family: var(--disp); font-weight: 800; font-size: 32px; white-space: nowrap; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); animation: tlFlag .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.tl-flag:not(:has(.av)) { padding-left: 20px; }
@keyframes tlFlag { from { transform: translate(-50%, -60px); opacity: 0; } }
.tl-avgl { position: absolute; transform: translateX(-50%); padding: 6px 18px; border-radius: 14px; font-size: 30px; font-weight: 700; white-space: nowrap; animation: fadeUp .4s both; }
.tl-avgl b { font-family: var(--disp); font-weight: 800; font-size: 40px; }
.tl-avgl.b { background: rgba(255, 255, 255, .92); color: var(--ink); }
.tl-avgl.a { background: var(--hi); color: var(--hi-ink); }
.tl-delta { position: absolute; right: 150px; top: 20px; font-family: var(--disp); font-weight: 800; font-size: 130px; line-height: 1; padding: 0 26px; border: 10px solid currentColor; border-radius: 26px; transform: rotate(8deg); animation: stampIn .35s cubic-bezier(.2, 1.6, .4, 1) both; background: rgba(3, 6, 28, .35); }
.tl-delta.bad { color: var(--red); }
.tl-delta.good { color: var(--rob); }
.tl-foot { margin-top: 30px; font-size: 36px; font-weight: 600; color: var(--mist); text-align: center; animation: fadeUp .5s both; }
.tl-empty { margin-top: 120px; font-size: 44px; color: var(--mist); }