/* E1 Series case pieces (src/anim/e1-*.html). They reuse the window, phone and MediaHub-grid pieces from ac.css
   and swap in the E1 look: near-black background, E1 blue glow and the lime accent. */
.ac-anim.e1{--navy:#1c1c1c;--blue:#1e3cff;--lime:#9bf06e;--line:#e6e6e6;background:#151515}
.ac-anim.e1::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 10%,rgba(30,60,255,.55),transparent 70%),radial-gradient(50% 70% at 0% 100%,rgba(30,60,255,.35),transparent 70%);animation:e1Glow 14s ease-in-out infinite alternate}
.ac-anim.e1>.ac-in{z-index:1}
@keyframes e1Glow{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-3%,2%)}}

/* side cards (source flow, lists) */
.e1 .side{position:absolute;right:3.5em;width:24em;background:#fff;border-radius:1em;padding:1.2em 1.4em;box-shadow:0 1.6em 4em rgba(0,0,0,.45);opacity:0;color:#1c1c1c}
.e1 .side small{display:block;font-size:.72em;font-weight:700;letter-spacing:.1em;color:#777;text-transform:uppercase}
.e1 .side p{margin:.7em 0 0;font-size:.78em;line-height:1.45;color:#555}
.e1 .flow{display:flex;align-items:center;gap:.8em;margin-top:.8em;font-weight:800;font-size:1.05em;letter-spacing:.04em;white-space:nowrap}
.e1 .flow .pipe{position:relative;flex:1;min-width:2em;height:.3em;border-radius:.3em;background:#ececec;overflow:hidden}
.e1 .flow .pipe::after{content:"";position:absolute;top:0;bottom:0;width:30%;border-radius:.3em;background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.e1.play .flow .pipe::after{animation:acFlow 1.6s linear infinite}
.e1 .flow .src2{display:flex;flex-direction:column;gap:.15em}
.e1 .side ul{list-style:none;margin:.8em 0 0;padding:0}
.e1 .side li{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.45em 0;border-top:1px solid #f0f0f0;font-size:.82em;font-weight:700;letter-spacing:.04em}
.e1 .side li i{flex:none;width:1.3em;height:1.3em;border-radius:50%;border:.12em solid #c8c8c8}
.e1.play .side li i{animation:e1Check .4s forwards;animation-delay:calc(2.8s + var(--i) * .45s)}
.e1.play .side{animation:acIn .8s cubic-bezier(.2,.8,.2,1) 1.6s forwards}
.e1.play .side.s2{animation-delay:2.2s}
@keyframes e1Check{to{border-color:var(--blue);background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/80% no-repeat}}

/* 01 website */
.e1-web .scroll{--end:-83.4%;--d:34s}

/* 02 media centre: the real site scrolling, with where the photos come from */
.e1-mc .win{left:4em;top:6em;width:64em}
.e1-mc .vp{aspect-ratio:16/9.5}
.e1-mc .scroll{--end:-70.3%;--d:24s}
.e1-mc .s1{top:8em}
.e1-mc .s2{top:22.5em}

/* 03 broadcast centre (MediaHub grid from ac.css, E1 colours) */
.e1.ac-mh .nav b{border-bottom-color:var(--blue)}
.e1.ac-mh .tag{background:var(--blue)}
.e1.ac-mh .tag.mov{background:#1c1c1c}
.e1.ac-mh .dl{background:#1c1c1c}
.e1.ac-mh .dl em{background:var(--blue)}
.e1.ac-mh .apphead .logo{height:2.4em;aspect-ratio:1;border-radius:50%;background:url("e1-mark.png") center/contain no-repeat;flex:none}
.e1.ac-mh .apphead strong{font-size:.95em;letter-spacing:.02em;white-space:nowrap}
.e1.ac-mh .card .dur{position:absolute;right:.5em;bottom:.5em;font-size:.62em;font-weight:700;color:#fff;background:rgba(0,0,0,.65);border-radius:.3em;padding:.15em .45em}
@keyframes e1Pick{0%,4%{box-shadow:0 0 0 0 transparent;border-color:var(--line)}8%,70%{box-shadow:0 0 0 .2em var(--blue);border-color:var(--blue)}78%,100%{box-shadow:0 0 0 0 transparent;border-color:var(--line)}}
.e1.ac-mh.play .card.sel{animation-name:acCard,e1Pick}

/* 04 results + timing sheets */
.e1-res .win.w1{left:4em;top:4.5em;width:56em}
.e1-res .w1 .vp{aspect-ratio:16/10.5}
.e1-res .scroll{--end:-76.1%;--d:30s}
.e1-res .win.w2{right:4em;bottom:3.5em;width:40em}
.e1-res.play .win.w2{animation-delay:1.1s}
.e1-res .s1{top:4.5em;right:4em;width:22em}

@media(max-width:620px){
  .e1-mc .win{left:2.4em;top:3em;width:43em}
  .e1-mc .side{right:2.4em;left:2.4em;width:auto;padding:1em 1.2em;top:auto}
  .e1-mc .s1{bottom:15.5em}
  .e1-mc .s2{bottom:2.4em}
  .e1-mc .side p{display:none}
  .e1-mc .s2 ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4em}
  .e1.ac-mh .side{right:auto;width:20.6em;padding:1em}
  .e1.ac-mh .side .flow{font-size:.78em;gap:.5em}
  .e1.ac-mh .side li{font-size:.75em}
  .e1-res .win.w1{left:2.4em;top:3em;width:43em}
  .e1-res .win.w2{right:2.4em;bottom:2.4em;width:34em}
  .e1-res .s1{display:none}
}

/* The Ocean Race media centre reuses the same pieces with its own colours (src/anim/ocean-media.html) */
.ac-anim.e1.tor{--blue:#2f80ff;background:#08243a}
.ac-anim.e1.tor::before{background:radial-gradient(60% 80% at 85% 10%,rgba(47,128,255,.5),transparent 70%),radial-gradient(50% 70% at 0% 100%,rgba(0,160,200,.35),transparent 70%)}
.tor.e1-mc .scroll{--end:-62%;--d:22s}

/* FIA Rallycross media centre (src/anim/rx-media.html): MediaHub grid with the RX navy and cyan */
.ac-anim.e1.rx{--blue:#00c8c8;background:#11152e}
.ac-anim.e1.rx::before{background:radial-gradient(60% 80% at 85% 10%,rgba(0,200,200,.35),transparent 70%),radial-gradient(50% 70% at 0% 100%,rgba(60,70,170,.45),transparent 70%)}
.e1.rx.ac-mh .apphead .logo{height:2.2em;aspect-ratio:400/119;border-radius:0;background-image:url("rx-logo-dark.png")}
.e1.rx.ac-mh .tag{background:#141a38}
.e1.rx.ac-mh .dl{background:#141a38}
.e1.rx.ac-mh .dl em{color:#141a38}

/* Emirates GBR (src/anim/egbr-*.html): navy, gold and the Emirates red */
.ac-anim.e1.egbr{--blue:#c4a265;background:#0a1a38}
.ac-anim.e1.egbr::before{background:radial-gradient(60% 80% at 85% 10%,rgba(214,0,28,.4),transparent 70%),radial-gradient(50% 70% at 0% 100%,rgba(196,162,101,.35),transparent 70%)}
.egbr-web .scroll{--end:-82.9%;--d:34s}
.egbr-social .scroll{--end:-69.3%;--d:24s}
.egbr-mc .scroll{--end:-5%;--d:10s}