/* Second screen, version 2: the portfolio on an advertising screen on a New York subway platform.
   A looping clip of a train passing behind the screen is the background; the screen itself is live DOM. */
.metro{--vh:100svh;--ink:#f2ede4;--led:#ffb02e;--tint:#ff42bc;position:relative;height:var(--vh);background:#0b1010;color:var(--ink)}
@property --tint{syntax:'<color>';inherits:true;initial-value:#ff42bc}
.metro [hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.metro-stage{position:relative;height:var(--vh);overflow:hidden;isolation:isolate}

/* The platform: 16:9, always covering the stage; the screen sits at fixed percentages inside it. */
.metro-plate{--w:max(100vw,calc(var(--vh) * 1.7778));position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:16/9;transform:translate(-50%,-50%);container-type:inline-size}
.metro-front{pointer-events:none}
.metro-poster,.metro-train{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.95) contrast(1.04) saturate(1.02)}
.metro-train{opacity:0;transition:opacity .6s}
.metro-train.is-live{opacity:1}
.metro-spill{position:absolute;left:34%;top:68%;width:32%;height:34%;pointer-events:none;mix-blend-mode:screen;opacity:.2;border-radius:50%;background:var(--tint);filter:blur(3.4cqw);transition:--tint 1s}

/* The advertising screen: outer frame, 9:16-ish screen, brand plate. Measured from the platform plate. */
.board{position:absolute;left:40.59%;top:22.46%;width:18.82%;height:62.96%;background:#090a0b;border-radius:.2cqw;box-shadow:0 0 5cqw #0009}
.board-screen{position:absolute;left:4.63%;right:4.63%;top:2.69%;height:82.2%;overflow:hidden;background:#101012}
.board-base{position:absolute;left:0;right:0;bottom:0;height:15.1%;display:grid;place-items:center;border-top:.16cqw solid #b9bdbf;background:#090a0b}
.board-brand{display:block;width:8.8cqw;height:auto}
.board-base>*{animation:signature-in .5s ease-out both}
@keyframes signature-in{from{opacity:0}to{opacity:1}}
/* A client's own signature: any logo shape fits the same plate. */
.board-brand.is-client{width:auto;max-width:11.5cqw;max-height:3.2cqw;object-fit:contain}
.board-brand.is-white{filter:brightness(0) invert(1)}
.board-brand-name{max-width:11.5cqw;font:900 1.9cqw/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;text-align:center;text-transform:uppercase;color:#f2ede4}
.board-glass{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(118deg,#ffffff24 0%,#fff0 30%,#fff0 70%,#ffffff12 100%);mix-blend-mode:screen}

/* The stops of the screen dissolve into one another the way the films do: the next one fades in over the one leaving,
   which stays whole underneath until it is covered (.is-leaving). */
.slide{position:absolute;z-index:0;inset:0;visibility:hidden;opacity:0}
.slide.is-leaving{z-index:1;visibility:visible;opacity:1}
.slide.is-current{z-index:2;visibility:visible;opacity:1;transition:opacity .4s ease-in-out}
.slide-video img,.slide-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Two videos stacked: the next film dissolves in over the one on the screen. */
.slide-video video{z-index:1;opacity:0;transition:opacity .4s ease-in-out}
.slide-video video.is-top{z-index:2}
.slide-video video.is-live{opacity:1}
.slide-images img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.slide-images img.is-on{opacity:1}
.slide-images.is-current img.is-on{animation:drift 7s linear both}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.11)}}
.slide-web{background:#141414}
.web-scroll{display:block;width:100%;height:auto}
.slide-web.is-current .web-scroll{animation:site-scroll 16s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes site-scroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(-60.6%)}}
.slide-cta{display:flex;flex-direction:column;justify-content:space-between;padding:9% 9% 8%;background:#ff42bc;color:#141414}
.slide-cta p{margin:0;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase}
.cta-line{font-weight:700;font-size:1.25cqw;letter-spacing:.2em}
.cta-big{font-weight:900;font-size:5.6cqw;line-height:.84;letter-spacing:-.02em}
.cta-big span{color:#fff}
.slide-cta .cta-url{font-weight:700;font-size:1.3cqw;letter-spacing:.14em;text-transform:none}
/* A branded page: "The new standard" is longer than "Next stop", so the small lines are set tighter. */
.metro.has-brand .cta-line,.metro.has-brand .cta-url{letter-spacing:.08em}
.board.is-paused .slide-web .web-scroll,.board.is-paused .slide-images img.is-on{animation-play-state:paused}

.metro-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#070a0acc 0%,#070a0a8c 20%,#070a0a00 36%,#070a0a00 64%,#070a0a8c 80%,#070a0acc 100%),linear-gradient(#070a0a99 0%,#070a0a00 16%,#070a0a00 80%,#070a0acc 100%)}

.metro-top{position:absolute;z-index:4;left:5%;right:5%;top:clamp(20px,3.4vh,34px);display:flex;align-items:center;justify-content:space-between}
.metro-top .wordmark{font-size:30px}
.metro-cta{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:700 18px/1 'Barlow Condensed',sans-serif;letter-spacing:.07em;text-transform:uppercase;transition:color .2s}
.metro-cta svg{width:22px;height:22px;color:var(--accent);transition:transform .25s}
.metro-cta:hover{color:var(--accent)}
.metro-cta:hover svg{transform:translate(3px,-3px)}
.metro-cta:focus-visible,.metro-paint:focus-visible,.metro-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.metro-copy{position:absolute;z-index:3;left:5%;top:50%;width:min(430px,31vw);transform:translateY(-50%)}
.chapter h3{margin:0 0 22px;font:900 clamp(48px,5.1vw,88px)/.86 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.chapter p{max-width:36ch;margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.chapter ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:28px 0 0;padding:0;list-style:none}
.chapter li{position:relative;padding-left:16px;font:700 16px/1.15 'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.chapter li:before{content:'';position:absolute;left:0;top:.3em;width:7px;height:7px;background:var(--accent)}
/* Branded link only: who the clips were made for. */
.brand-card{position:relative;margin-top:30px;padding-top:18px;border-top:1px solid #f2ede433}
/* The first screen's short pink bar on a hairline (as above the copyright), here on the rule over the client's name. */
.brand-card:before{content:'';position:absolute;left:0;top:-1px;width:24px;height:2px;background:var(--accent)}
.brand-card-label{display:block;font:700 13px/1 'Barlow Condensed',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.brand-card-name{display:block;margin-top:8px;font:900 36px/.95 'Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.chapter .brand-card-note{margin-top:10px;max-width:34ch;font-size:15px;line-height:1.5}
.chapter.is-entering{animation:chapter-in .65s cubic-bezier(.22,.8,.2,1) both}
.chapter.is-entering li{animation:chapter-in .65s cubic-bezier(.22,.8,.2,1) both}
.chapter.is-entering li:nth-child(2){animation-delay:.06s}.chapter.is-entering li:nth-child(3){animation-delay:.12s}.chapter.is-entering li:nth-child(4){animation-delay:.18s}
@keyframes chapter-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.metro-paint{display:block;width:min(302px,100%);aspect-ratio:2073/758;margin-top:26px;padding:0;border:0;background:none;cursor:pointer}
.metro-paint img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:brightness(1.09) saturate(1.32) contrast(1.04) drop-shadow(0 0 4px #ffe89028) drop-shadow(0 4px 12px #ffae162e);transition:filter .4s ease-out}
.metro-paint:hover img,.metro-paint:focus-visible img{filter:brightness(1.17) saturate(1.32) contrast(1.04) drop-shadow(0 0 6px #fff2b25c) drop-shadow(0 0 12px #ffae1664) drop-shadow(0 5px 22px #ffae1635)}

/* The right column: the films as product cards on a belt, sharp dark rectangles with a fine ivory outline, like the
   apertures over the bust. The card in the middle of the column plays and gets a brighter outline and an accent corner.
   Each card stands on its row (--row, set in subway.js) and the rows ride up: the mask on the column dissolves what
   goes past the card above the middle and brings in what comes from below. A mask blinds backdrop-filter, so the cards
   carry their own dark. */
.metro-line{position:absolute;z-index:3;right:5%;top:50%;width:clamp(300px,28vw,390px);height:min(calc(var(--vh) - 168px),700px);transform:translateY(-50%)}
.cards{--card-h:112px;--step:124px;position:relative;height:100%;margin:0;padding:0;list-style:none;-webkit-mask-image:linear-gradient(transparent calc(50% - 206px),#000 calc(50% - 64px),#000 calc(50% + 190px),transparent);mask-image:linear-gradient(transparent calc(50% - 206px),#000 calc(50% - 64px),#000 calc(50% + 190px),transparent)}
.cards:empty{display:none}
.card{position:absolute;left:0;right:0;top:calc(50% - var(--card-h) / 2);box-sizing:border-box;height:var(--card-h);border:1px solid #eee8df80;background:#141a1ae6;box-shadow:0 10px 26px #00000030;transform:translateY(calc(var(--row,0) * var(--step)));transition:transform .4s cubic-bezier(.22,.8,.2,1),opacity .4s ease-out,border-color .3s,background .3s}
.card.is-gone{opacity:0;pointer-events:none}
.card:hover{border-color:#eee8dfb3}
.card.is-now{border-color:#eee8dfcc;background:#1d2323f0}
.card.is-now:before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--accent);pointer-events:none}
.card-play{display:grid;grid-template-columns:64px 1fr auto;gap:0 14px;align-items:start;width:100%;min-height:110px;padding:12px 14px 12px 12px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.card.is-now .card-play{cursor:default}
.card-img{grid-column:1;grid-row:1;width:64px;height:86px;object-fit:cover;background:#d6d0c514;outline:1px solid #eee8df59;outline-offset:-1px;opacity:.8;transition:opacity .3s}
.card-play:hover .card-img,.card.is-now .card-img{opacity:1}
.card-title{grid-column:2;grid-row:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 19px/1.04 'Barlow Condensed',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.card-state{grid-column:3;grid-row:1;padding-top:2px;font:700 11px/1 'Barlow Condensed',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#eee8dfa6}
.card.is-now .card-state{color:var(--accent)}
.card-foot{position:absolute;left:90px;right:14px;bottom:12px;display:flex;align-items:center}
.card-foot{pointer-events:none} /* the strip lies over the card button: only the link in it takes clicks, the rest falls through to the card */
.card-link{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:24px;white-space:nowrap;font:700 12px/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#eee8dfd1;transition:color .2s}
.card-link-host{min-width:0;overflow:hidden;text-overflow:ellipsis}
.card-link svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.card-link:hover{color:var(--accent)}
.card-link:hover svg{transform:translate(2px,-2px)}
.card-play:focus-visible,.card-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* The ghost card: the pitch, every fourth in the queue, a dashed slot with the pink poster for a thumbnail. */
.card-ghost{border-style:dashed;border-color:#eee8df66;background:#0c1010b3;box-shadow:none}
.card-ghost:hover{border-color:var(--accent)}
.card-ghost.is-now{border-style:solid;border-color:#eee8dfcc}
.card-ghost.is-now .card-play{cursor:pointer}
.card-poster{display:flex;align-items:center;box-sizing:border-box;height:72px;padding:0 6px 2px;border:0;outline:0;background:var(--accent);color:#141414;font:900 19px/.84 'Barlow Condensed',sans-serif;letter-spacing:-.02em;text-transform:uppercase;overflow:hidden}
.card-poster>span{display:block}
.card-poster>span>span{color:#fff}
.card-ghost-foot{pointer-events:none}
.card-ghost-foot>span{display:inline-flex;align-items:center;min-height:24px;white-space:nowrap;font:700 12px/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#eee8dfd1;transition:color .2s}
.card-ghost-foot svg{flex:none;width:14px;height:14px;margin-left:6px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#eee8dfd1;transition:transform .25s,color .2s}
.card-play:hover+.card-ghost-foot>span,.card-play:hover+.card-ghost-foot svg{color:var(--accent)}
.card-play:hover+.card-ghost-foot svg{transform:translateX(2px)}

.metro-controls{position:absolute;z-index:4;left:0;right:0;bottom:clamp(14px,2.6vh,26px);display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.2vw,30px);font:700 13px/1 'Barlow Condensed',sans-serif;letter-spacing:.18em;text-transform:uppercase}
/* The header and the controls are full-width bars that lie over the right column on a short window: only what is in them takes clicks. */
.metro-top,.metro-controls{pointer-events:none}
.metro-top>*,.metro-controls>*{pointer-events:auto}
.metro-controls .now{color:#f2ede4b3}
.metro-controls .now b{margin-left:8px;color:var(--ink);font-weight:700}
.metro-controls button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:none;color:var(--ink);font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;white-space:nowrap;transition:color .2s,transform .2s}
.metro-controls button:hover{color:var(--accent)}
.metro-controls button:active{transform:translateY(1px)}
.metro-controls button[disabled]{opacity:.4;pointer-events:none}
.metro-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#metro-sound .waves{display:none}#metro-sound.is-on .waves{display:inline}#metro-sound.is-on .slash{display:none}

/* Phones and portrait tablets: the heading over the screen, the cards under it in a rail swiped left and right (the
   next card shows at the edge), pause and sound beside the screen. The screen's edges are fixed shares of the height
   (the plate at top:46%), and the heading, the rail and the paint button are placed from them. */
@media(max-width:900px),(max-aspect-ratio:1/1){
  .metro{--screen-top:calc(var(--vh) * .1846);--screen-bottom:calc(var(--vh) * .8142);--card:min(76vw,340px)}
  .metro-plate{top:46%}
  .metro-top{left:6%;right:6%}
  .metro-top .wordmark{font-size:25px}
  .metro-cta{font-size:16px;gap:8px}
  .metro-scrim{background:linear-gradient(#080b0be0 0%,#080b0ba6 15%,#080b0b00 24%,#080b0b00 72%,#080b0bf2 100%)}
  .metro-copy{left:6%;right:6%;top:auto;bottom:calc(var(--vh) - var(--screen-top) + 10px);width:auto;text-align:center;transform:none}
  .chapter h3{margin:0;font-size:clamp(30px,min(11.2vw,7.2svh),64px)}
  .chapter h3 br{display:none}
  .chapter p,.chapter ul{display:none}
  /* The pitch: the paint button lies on the pink poster, under its big line, where the address stands on a desktop
     (hidden, not removed: it holds the big line in its place). */
  .slide-cta .cta-url{visibility:hidden}
  .metro-paint{position:absolute;left:50%;top:calc(100% + var(--vh) * .435 + 10px);width:calc(var(--vh) * .234);margin:0;transform:translateX(-50%)}
  .chapter.is-entering{animation-name:chapter-fade} /* a moving chapter would carry the button off the poster */
  .brand-card{margin-top:4px;padding-top:0;border-top:0}
  .brand-card:before{display:none}
  .brand-card-label{display:inline;margin-right:8px}
  .brand-card-name{display:inline;font-size:clamp(22px,6vw,30px)}
  .metro-line{left:0;right:0;top:var(--screen-bottom);bottom:0;display:flex;align-items:center;width:auto;height:auto;transform:none}
  .cards{position:static;display:flex;gap:10px;box-sizing:border-box;width:100%;height:auto;padding:0 calc(50% - var(--card) / 2);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .cards::-webkit-scrollbar{display:none}
  /* translateZ: each card is a layer of its own. The rail is wider than iOS WebKit's 1280px limit, so as one layer it is
     painted in 512px tiles, and a tile left unpainted cuts a card in two or drops it. */
  .card{position:relative;top:auto;left:auto;right:auto;flex:0 0 var(--card);height:auto;scroll-snap-align:center;scroll-snap-stop:always;box-shadow:none;transform:translateZ(0);transition:border-color .3s,background .3s,opacity .5s}
  .card.is-seen{opacity:.62}
  .metro:not(.on-video) .card.is-seen{opacity:.38}
  .card-ghost .card-play{min-height:96px}
  .metro-controls{left:auto;right:1.5%;bottom:auto;top:47%;transform:translateY(-50%);flex-direction:column;gap:2px}
  .metro-controls .now,#metro-prev,#metro-shuffle{display:none}
  .metro-controls button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .metro-controls button{justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:#080b0bb3}
  .metro-controls svg{width:20px;height:20px}
}
@keyframes chapter-fade{from{opacity:0}to{opacity:1}}
/* Short phones: smaller cards, and the client's name gives way to the logo under the screen. */
@media(max-width:900px) and (max-height:700px){
  .metro-top{top:12px}
  .brand-card{display:none}
  .card-play,.card-ghost .card-play{grid-template-columns:48px 1fr auto;gap:0 12px;min-height:80px;padding:8px 12px 8px 8px}
  .card-img{width:48px;height:64px}
  .card-foot{left:68px;right:12px;bottom:8px}
  .card-title{font-size:17px}
  .card-poster{height:64px;padding:0 4px 2px;font-size:14px}
}
@media(max-width:340px){
  .metro-top .wordmark{font-size:22px}
  .metro-cta{font-size:14px;gap:6px}
}
/* Phones on their side: no room under the screen, so the heading and the rail stand at its sides. */
@media(max-width:900px) and (min-aspect-ratio:1001/1000){
  .metro{--card:min(27vw,300px)}
  .metro-copy{left:4%;right:auto;top:50%;bottom:auto;width:28vw;text-align:left;transform:translateY(-50%)}
  .chapter h3{font-size:clamp(30px,5.6vw,48px)}
  .chapter h3 br{display:inline}
  .metro-paint{position:static;width:min(190px,100%);margin-top:8px;transform:none}
  .metro-line{left:auto;right:2%;top:50%;bottom:auto;width:32vw;transform:translateY(-50%)}
  .metro-controls{right:4%;top:auto;bottom:6px;flex-direction:row;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .chapter.is-entering,.chapter.is-entering li{animation:none}
  .slide-web.is-current .web-scroll,.slide-images.is-current img.is-on{animation:none}
  .metro-spill,.slide-images img,.metro-train,.card,.card-img,.slide.is-current{transition:none}
  .board-base>*{animation:none}
}