/* America's Cup case pieces: website (src/anim/ac-web.html), MediaHub + MIMIR (ac-mediahub.html), newsletter (ac-news.html).
   Everything is sized in em; the root font-size is 1cqw on desktop, so the whole piece scales with its box. */
.ac-anim{--navy:#0b1a33;--navy2:#16305a;--red:#e2001a;--line:#e3e6ec;position:relative;overflow:hidden;container-type:inline-size;isolation:isolate;aspect-ratio:16/9;border-radius:24px;background:#162a3b;font-family:Satoshi,Arial,sans-serif;color:#13203a}
.ac-anim>.ac-in{position:absolute;inset:0;font-size:1cqw}
.ac-anim *{box-sizing:border-box}
/* the America's Cup brand background (navy, red mesh, dotted tracks) plays behind the dark pieces */
.ac-anim.ac-anim .ac-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;background:#162a3b}
.ac-anim.ac-anim img{border-radius:0;max-height:none;object-fit:initial}

/* windows and phones */
.ac-anim .win{position:absolute;background:#fff;border-radius:1.2em;overflow:hidden;box-shadow:0 2em 5em rgba(0,0,0,.35);opacity:0}
.ac-anim .bar{height:2.6em;display:flex;align-items:center;gap:.55em;padding:0 1.1em;background:#eef0f4;border-bottom:1px solid var(--line)}
.ac-anim .bar i{width:.75em;height:.75em;border-radius:50%;background:#cfd3db}
.ac-anim .url{margin-left:1.6em;height:1.6em;padding:0 1em;border-radius:1em;background:#fff;font-size:.85em;display:flex;align-items:center;color:#5a6478;letter-spacing:.02em}
.ac-anim .vp{position:relative;overflow:hidden}
.ac-anim.ac-anim .vp>img,.ac-anim.ac-anim .scr>img{display:block;width:100%;height:auto}
.ac-anim .phone{position:absolute;border-radius:2.4em;background:#05070c;padding:.7em;box-shadow:0 2em 5em rgba(0,0,0,.45);opacity:0}
.ac-anim .scr{position:relative;overflow:hidden;border-radius:1.8em;aspect-ratio:9/19.5;background:#fff}
.ac-anim.play .win{animation:acIn .9s cubic-bezier(.2,.8,.2,1) .1s forwards}
.ac-anim.play .phone{animation:acIn .9s cubic-bezier(.2,.8,.2,1) .5s forwards}
.ac-anim.play .scroll{animation:acScroll var(--d,26s) ease-in-out 1.4s infinite alternate}

/* website */
.ac-web .win{left:5em;top:6em;width:70em}
.ac-web .vp{aspect-ratio:16/9.5}
.ac-web .scroll{--end:-76.9%}
.ac-web .phone{right:5em;top:8em;width:19em}

/* newsletter */
.ac-news .win{left:8em;top:5em;width:50em}
.ac-news .mailhead{padding:1em 1.4em;border-bottom:1px solid var(--line);font-size:.9em;line-height:1.5;color:#5a6478}
.ac-news .mailhead b{color:#13203a}
.ac-news .vp{height:40em;background:#f3f4f6}
.ac-news .vp>img{width:76%!important;margin:0 auto}
.ac-news .scroll{--end:-73%;--d:30s}
.ac-news .phone{right:9em;top:7.5em;width:19.5em}
.ac-news .phone .scroll{--end:-76.7%;--d:34s}

/* MediaHub: gallery fed by MIMIR, access managed from Qiü One */
.ac-mh .win{left:4em;top:9.3em;width:68em}
.ac-mh .apphead{display:flex;align-items:center;gap:1.6em;padding:.9em 1.6em;border-bottom:1px solid var(--line)}
.ac-mh.ac-mh .apphead img{height:2.6em;width:auto}
.ac-mh .nav{display:flex;gap:1.3em;font-size:.78em;font-weight:700;letter-spacing:.04em;color:#13203a}
.ac-mh .nav b{border-bottom:.15em solid var(--navy)}
.ac-mh .user{margin-left:auto;font-size:.78em;font-weight:700;color:#5a6478}
.ac-mh .ttl{display:flex;align-items:baseline;gap:1em;padding:1.1em 1.6em .3em}
.ac-mh .ttl strong{font-size:1.25em}
.ac-mh .ttl span{font-size:.8em;color:#7a8396}
.ac-mh .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;padding:1em 1.6em 1.6em}
.ac-mh .card{border:1px solid var(--line);border-radius:.7em;padding:.6em;opacity:0;transform:translateY(1.2em) scale(.97)}
.ac-mh.play .card{animation:acCard .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.9s + var(--i) * .12s)}
.ac-mh .th{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:.4em;background:#dfe3ea}
.ac-mh.ac-mh .th img{width:100%;height:100%;object-fit:cover}
.ac-mh .tag{position:absolute;left:.5em;top:.5em;font-size:.62em;font-weight:700;color:#fff;background:#2f7de1;border-radius:.3em;padding:.15em .5em}
.ac-mh .tag.mov{background:var(--red)}
.ac-mh .meta{display:flex;align-items:center;gap:.5em;margin-top:.6em;font-size:.62em;color:#3b4558;white-space:nowrap}
.ac-mh .meta span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis}
.ac-mh .box{width:1.25em;height:1.25em;border:.12em solid #9aa3b5;border-radius:.25em;flex:none}
.ac-mh.play .card.sel .box{animation:acTick 12s infinite;animation-delay:calc(3s + var(--s) * .5s)}
.ac-mh.play .card.sel{animation:acCard .6s cubic-bezier(.2,.8,.2,1) forwards,acPick 12s infinite;animation-delay:calc(.9s + var(--i) * .12s),calc(3s + var(--s) * .5s)}
.ac-mh .dl{position:absolute;left:50%;bottom:1.4em;transform:translate(-50%,180%);display:flex;align-items:center;gap:1.2em;background:var(--navy);color:#fff;border-radius:2em;padding:.7em .8em .7em 1.4em;font-size:.85em;font-weight:700;box-shadow:0 1em 2em rgba(11,26,51,.3)}
.ac-mh .dl em{font-style:normal;background:var(--red);border-radius:2em;padding:.45em 1.1em}
.ac-mh.play .dl{animation:acBar 12s 3s infinite}
.ac-mh .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,.35);opacity:0}
.ac-mh .side small{display:block;font-size:.72em;font-weight:700;letter-spacing:.1em;color:#7a8396;text-transform:uppercase}
.ac-mh .src{top:10.8em}
.ac-mh.play .src{animation:acIn .8s cubic-bezier(.2,.8,.2,1) 1.6s forwards}
.ac-mh .flow{display:flex;align-items:center;gap:.8em;margin-top:.8em;font-weight:800;font-size:1.15em;letter-spacing:.04em}
.ac-mh .flow .pipe{position:relative;flex:1;height:.3em;border-radius:.3em;background:#e6e9ef;overflow:hidden}
.ac-mh .flow .pipe::after{content:"";position:absolute;top:0;bottom:0;width:30%;border-radius:.3em;background:linear-gradient(90deg,transparent,#2f7de1,transparent)}
.ac-mh.play .flow .pipe::after{animation:acFlow 1.6s linear infinite}
.ac-mh .src p{margin:.7em 0 0;font-size:.78em;line-height:1.45;color:#5a6478}
.ac-mh .perm{top:25em}
.ac-mh.play .perm{animation:acIn .8s cubic-bezier(.2,.8,.2,1) 2.2s forwards}
.ac-mh .perm ul{list-style:none;margin:.8em 0 0;padding:0}
.ac-mh .perm li{display:flex;align-items:center;justify-content:space-between;padding:.45em 0;border-top:1px solid #eef0f4;font-size:.82em;font-weight:700;letter-spacing:.05em}
.ac-mh .perm li i{position:relative;width:2.4em;height:1.35em;border-radius:1em;background:#d5d9e1;transition:background .3s}
.ac-mh .perm li i::after{content:"";position:absolute;left:.18em;top:.18em;width:1em;height:1em;border-radius:50%;background:#fff;transition:transform .3s}
.ac-mh.play .perm li i{animation:acOn .4s forwards;animation-delay:calc(2.8s + var(--i) * .35s)}
.ac-mh.play .perm li i::after{animation:acKnob .4s forwards;animation-delay:calc(2.8s + var(--i) * .35s)}

@keyframes acIn{from{opacity:0;transform:translateY(2em)}to{opacity:1;transform:none}}
@keyframes acScroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--end))}}
@keyframes acCard{to{opacity:1;transform:none}}
@keyframes acPick{0%,4%{box-shadow:0 0 0 0 transparent;border-color:var(--line)}8%,70%{box-shadow:0 0 0 .2em #2f7de1;border-color:#2f7de1}78%,100%{box-shadow:0 0 0 0 transparent;border-color:var(--line)}}
@keyframes acTick{0%,4%{background:transparent;border-color:#9aa3b5}8%,70%{background:#2f7de1 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;border-color:#2f7de1}78%,100%{background:transparent;border-color:#9aa3b5}}
@keyframes acBar{0%,18%{transform:translate(-50%,180%)}24%,70%{transform:translate(-50%,0)}78%,100%{transform:translate(-50%,180%)}}
@keyframes acFlow{from{left:-30%}to{left:100%}}
@keyframes acOn{to{background:#1fb26b}}
@keyframes acKnob{to{transform:translateX(1.05em)}}

/* phone: taller box, everything bigger, fewer pieces */
@media(max-width:620px){
  .ac-anim{aspect-ratio:4/5;border-radius:16px}
  .ac-anim>.ac-in{font-size:2.1cqw}
  .ac-web .win{left:2.4em;top:3em;width:43em}
  .ac-web .phone{left:auto;right:2.4em;top:auto;bottom:2.4em;width:15em}
  .ac-news .win{left:2.4em;top:3em;width:30em}
  .ac-news .vp{height:44em}
  .ac-news .phone{right:2.4em;top:auto;bottom:2.4em;width:15em}
  .ac-mh .win{left:2.4em;top:2.4em;width:43em}
  .ac-mh .th{aspect-ratio:16/9}
  .ac-anim.ac-mh{aspect-ratio:4/5.35}
  .ac-mh .nav,.ac-mh .user{display:none}
  .ac-mh .grid{grid-template-columns:repeat(2,1fr)}
  .ac-mh .card:nth-child(n+5){display:none}
  .ac-mh .ttl{padding-top:.8em}.ac-mh .grid{padding-bottom:4.4em}
  .ac-mh .side{right:auto;width:20.6em;padding:1em}
  .ac-mh .src{left:2.4em;top:auto;bottom:2.4em}
  .ac-mh .perm{left:24.8em;top:auto;bottom:2.4em}
  .ac-mh .src p{display:none}
  .ac-mh .dl{bottom:1em}
}
@media(prefers-reduced-motion:reduce){.ac-anim *{animation:none!important;opacity:1!important;transform:none!important}.ac-slider .rail{scroll-behavior:auto}}

/* team websites: horizontal rail, about two and a quarter sites visible on desktop; the tabs scroll it */
.ac-slider{--gap:24px;container-type:inline-size}
.ac-slider .rail{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ac-slider .rail::-webkit-scrollbar{display:none}
.ac-slider .slide{flex:0 0 calc((100% - 2 * var(--gap)) / 2.25);margin:0;scroll-snap-align:start}
.ac-slider.ac-slider .slide img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:24px;max-height:none;box-shadow:0 0 0 1px rgba(33,32,42,.1)}
.ac-slider figcaption{display:flex;gap:10px;align-items:baseline;margin-top:14px;font-size:17px}
.ac-slider figcaption span{opacity:.55}
.ac-slider .tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ac-slider .tabs button{position:relative;overflow:hidden;font:700 14px/1 Satoshi,Arial,sans-serif;letter-spacing:.04em;color:#21202a;background:rgba(33,32,42,.07);border:0;border-radius:999px;padding:12px 18px;cursor:pointer}
.ac-slider .tabs button.on{color:#fff;background:#21202a}
.ac-slider .tabs button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:#e2001a}
.ac-slider.play:not(.manual) .tabs button.on i{animation:acProg 4.5s linear forwards}
@keyframes acProg{to{width:100%}}
@media(max-width:620px){
  .ac-slider{--gap:14px}
  .ac-slider .slide{flex-basis:84%}
  .ac-slider.ac-slider .slide img{border-radius:16px}
  .ac-slider figcaption{font-size:15px;flex-direction:column;gap:2px}
}