/* Presenter layer on top of the V1 page system */
html, body { height: 100%; background: #0E1012; overflow: hidden; }
#amb { position: fixed; inset: 0; overflow: hidden; }
#amb i { position: absolute; inset: -14%; background: center / cover no-repeat; filter: blur(70px) brightness(.42) saturate(1.1); opacity: 0; transition: opacity .8s; }
#amb i.on { opacity: 1; }
#fit { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 1920px; height: 1080px; flex: none; overflow: hidden; background: #0E1012; }
#stage .page { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .55s, visibility 0s .55s; }
#stage .page.on { visibility: visible; opacity: 1; transition: opacity .55s; z-index: 2; }
#stage .page.out { visibility: visible; opacity: 1; transition: none; z-index: 1; }
img[data-src] { background: #0E1012; }

/* Entrances. Individual translate/scale leave each element's own transform untouched */
.page.live [data-a="rise"] { animation: rise .85s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
.page.live [data-a="wipe"] { animation: wipe 1s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.page.live [data-a="pop"] { animation: pop .8s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
.page.live .ph, .page.live .wide, .page.live .fullimg { animation: kb 14s ease-out both; }
@keyframes kb { from { scale: 1.09; } to { scale: 1; } }
.page.live .half { animation: fadeIn .9s both; }
.page.live .half.before { animation: slideL 1s cubic-bezier(.2,.75,.2,1) both; }
.page.live .half.after { animation: revealAfter 1.1s cubic-bezier(.2,.75,.2,1) .75s both; }
@keyframes revealAfter { from { clip-path: polygon(100% 0, 100% 0, 90.1% 100%, 90.1% 100%); } to { clip-path: polygon(0 0, 100% 0, 90.1% 100%, 0 100%); } }
@keyframes slideL { from { opacity: 0; translate: 90px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.page.live .axis { animation: fadeIn .6s 1.5s both; }
.page.live .bars .bar { transform-origin: 50% 100%; animation: barUp 1s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--d, .5s); }
@keyframes barUp { from { scale: 1 0; } to { scale: 1 1; } }
.page.live .time { animation: tick .7s cubic-bezier(.2,.75,.2,1) .15s both; }
@keyframes tick { from { opacity: 0; scale: .78; } to { opacity: 1; scale: 1; } }
.page.live .card { animation: drop .75s cubic-bezier(.2,.75,.2,1) .8s both; }
@keyframes drop { from { opacity: 0; translate: -90px 0; } to { opacity: 1; translate: 0 0; } }
.page.live .rail4 .st.on::before { transform-origin: 100% 50%; animation: fill .9s cubic-bezier(.2,.75,.2,1) .35s both; }
@keyframes fill { from { scale: 0 1; } to { scale: 1 1; } }

/* Step-by-step items */
.stepitem { opacity: 0; translate: 0 26px; transition: opacity .55s, translate .7s cubic-bezier(.2,.75,.2,1); }
.stepitem.shown { opacity: 1; translate: 0 0; }

/* Hover */
.stops4, .grid5 { transition: grid-template-columns .65s cubic-bezier(.2,.75,.2,1); }
.stop img, .tile3 img, .poster img, .stat img, .item img, .duo .col img { transition: scale 1.1s cubic-bezier(.2,.75,.2,1); }
.stop:hover img, .tile3:hover img, .poster:hover img, .stat:hover img, .item:hover img, .duo .col:hover img { scale: 1.05; }

/* Before and after: one shared frame, the arrow wipes between the two states */
.page.ba::before { display: none !important; }
.page.ba .axis { display: none; }
.page.live.ba .half.before, .page.live.ba .half.after { animation: fadeIn .6s both; }
.page.ba .half.before, .page.ba .half.after { left: 0; right: auto; width: 1920px; height: 1080px; }
.page.ba .half.before { clip-path: none; }
.page.ba .half.after { clip-path: polygon(0 0, calc(var(--p, 50%) + 2.6%) 0, calc(var(--p, 50%) - 2.6%) 100%, 0 100%); }
.page.ba .half img { position: absolute; inset: 0; width: 1920px; height: 1080px; object-fit: cover; object-position: 50% 50%; }
.page.ba.pair .half img { height: 970px; }
.page.ba:not(.pair) .half::after { content: ""; position: absolute; inset: auto 0 0 0; height: 240px; background: linear-gradient(to top, rgba(10,12,14,.94) 34%, rgba(10,12,14,0)); pointer-events: none; }
.page.ba .half .band2 { bottom: 0 !important; top: auto; height: 210px; padding-bottom: 44px; background: none !important; z-index: 2; color: #fff; }
.page.ba .half.before .band2 { left: auto; right: 0; width: 960px; padding-right: 110px; padding-left: 40px; }
.page.ba .half.after .band2 { left: 0; right: auto; width: 960px; padding-right: 110px; padding-left: 110px; }
.page.ba svg.dline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.handle { position: absolute; top: 50%; left: var(--p, 50%); width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; background: #F4553B; border: 5px solid #fff; z-index: 8; cursor: ew-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.page.live .handle { animation: ping 1.8s 2.6s 3; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(244,85,59,.6); } 70%, 100% { box-shadow: 0 0 0 34px rgba(244,85,59,0); } }

/* Index links */
.ixrow { transition: background .25s, padding .35s cubic-bezier(.2,.75,.2,1); }
.ixrow:hover { background: rgba(244,85,59,.14); padding-right: 18px; }

/* Controls */
#pos { direction: ltr; unicode-bidi: isolate; }
#ui { position: fixed; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; z-index: 50; background: rgba(14,16,18,.72); border: 1px solid rgba(255,255,255,.14); padding: 6px 10px; border-radius: 30px; font: 14px "IBM Plex Sans Arabic", sans-serif; color: #fff; transition: opacity .4s; direction: rtl; }
#ui.idle { opacity: 0; pointer-events: none; }
#ui button { background: none; border: 0; color: #fff; font: inherit; min-width: 34px; height: 30px; border-radius: 16px; cursor: pointer; padding: 0 8px; }
#ui button:hover { background: rgba(255,255,255,.14); }
#ui button { display: inline-flex; align-items: center; justify-content: center; }
#bar { position: fixed; left: 0; right: 0; bottom: 0; height: 16px; z-index: 49; cursor: pointer; }
#bar:hover { background: linear-gradient(transparent 8px, rgba(255,255,255,.2) 8px); }
#bar i { position: absolute; right: 0; bottom: 0; height: 4px; width: 0; background: #F4553B; transition: width .5s, height .2s; }
#bar:hover i { height: 8px; }

/* Black screen */
#blank { position: fixed; inset: 0; background: #000; z-index: 55; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; cursor: pointer; }
#blank.on { opacity: 1; visibility: visible; transition: opacity .35s; }

/* Typed page number */
#jump { position: fixed; left: 16px; bottom: 72px; z-index: 51; background: #F4553B; color: #fff; font: 700 30px/1 "Alexandria", sans-serif; padding: 12px 22px; border-radius: 26px; direction: ltr; opacity: 0; transition: opacity .2s; pointer-events: none; }
#jump.on { opacity: 1; }

/* All slides overview */
#ov { position: fixed; inset: 0; z-index: 60; background: rgba(14,16,18,.97); overflow-y: auto; padding: 28px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
#ov.on { opacity: 1; visibility: visible; transition: opacity .25s; }
.ovgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ovgrid button { position: relative; padding: 0; border: 3px solid transparent; background: #1B1E21; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; transition: border-color .15s, scale .2s; }
.ovgrid button:hover { border-color: rgba(255,255,255,.7); scale: 1.03; }
.ovgrid button.cur { border-color: #F4553B; }
.ovgrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ovgrid span { position: absolute; left: 0; bottom: 0; background: rgba(14,16,18,.85); color: #fff; font: 500 15px/1 "Alexandria", sans-serif; padding: 6px 10px; }

/* Snapshot mode and reduced motion: everything settled */
.snap *, .snap *::before, .snap *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
.snap #ui, .snap #bar { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; } }

/* Headlines, word by word */
.w { display: inline-block; }
.page.live .w { animation: wordIn .62s cubic-bezier(.2,.75,.2,1) both; animation-delay: var(--wd, 0s); }
.stepitem:not(.shown) .w { animation: none; opacity: 0; }
@keyframes wordIn { from { opacity: 0; translate: 0 .5em; } to { opacity: 1; translate: 0 0; } }
.page.ba .half.before img[src*="01_d1"] { filter: none; }

.page.ba .ring { display: block; left: 1145px !important; top: 1013px !important; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 4px solid #F4553B; border-radius: 50%; background: none; z-index: 3; }
.page.live.ba .ring { animation: sensorPulse 1.6s ease-out infinite; }
@keyframes sensorPulse { from { scale: .55; opacity: 1; } to { scale: 1.25; opacity: 0; } }
.page.ba:has(img[src*="01_d1"]) .half.before::after { -webkit-mask-image: radial-gradient(ellipse 260px 150px at 59.6% 72.1%, transparent 62%, #000 100%); mask-image: radial-gradient(ellipse 260px 150px at 59.6% 72.1%, transparent 62%, #000 100%); }
.page.ba.cmp .half img { transform: none !important; object-position: 50% 50% !important; }
.page.ba.cmp .half::after { height: 620px; background: linear-gradient(to top, rgba(10,12,14,.96) 0%, rgba(10,12,14,.8) 48%, rgba(10,12,14,0) 100%); }
.page.ba.cmp .half.before .list { left: auto; right: 0; width: 960px; }
.page.ba.cmp .half.after .list { left: 0; right: auto; width: 960px; }
.page.ba.cmp .half::after { height: 720px; background: linear-gradient(to top, rgba(10,12,14,.96) 0%, rgba(10,12,14,.9) 62%, rgba(10,12,14,0) 100%); }
.page.ba.cmp .half.after::after { -webkit-mask-image: linear-gradient(to right, transparent 20%, #000 26%); mask-image: linear-gradient(to right, transparent 20%, #000 26%); }