/* The ads and video pages. Each has its own kind of film; both run on stops.js. */
.copy article.hero-a h1 { font: 500 clamp(56px, 8vw, 128px)/.85 var(--sans); letter-spacing: -.055em; }
.copy article.hero-a h1 i { color: var(--accent); font-style: normal; }
.copy article.hero-a p { font-size: clamp(17px, 1.6vw, 21px); color: #b9bab5; max-width: 26ch; margin-top: 20px; }
.copy article.hero-a small { display: block; margin-top: 28px; font: 12px var(--mono); color: var(--dim); }

/* ================= ads: a phone feed, and what is behind the ad ================= */
.adstage { position: absolute; inset: 0; }
.adstage .iphone { left: 57%; }
.adstage .iphone, .adstage .iphone * { cursor: auto !important; }
.scr { position: absolute; inset: 48px 0 0; overflow: hidden; background: #000; }
.feed { display: grid; gap: 14px; padding: 10px 0 40px; will-change: transform; }
.fpost { display: grid; gap: 8px; font-size: 13px; }
.fh { display: flex; align-items: center; gap: 8px; padding: 0 12px; } .fh i { width: 28px; height: 28px; border-radius: 50%; background: #2a2f3a; } .fh b { font-weight: 500; }
.fh u { text-decoration: none; color: #8590a0; font-size: 11px; }
.fi { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #14171d; }
.fl { padding: 0 12px; color: #8590a0; font-size: 12px; }
.fpost.ad { transition: box-shadow .4s; margin: 0 4px; border-radius: 10px; padding: 8px 0; }
.at-ad .fpost.ad { box-shadow: 0 0 0 2px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 30%, transparent); }
.adpic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #14171d; }
.adpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.adpic[data-v="0"] img:nth-child(1), .adpic[data-v="1"] img:nth-child(2), .adpic[data-v="2"] img:nth-child(3) { opacity: 1; }
.adpic span { position: absolute; left: 12px; bottom: 12px; font: 700 22px/1.02 var(--sans); letter-spacing: -.02em; text-shadow: 0 2px 16px rgb(0 0 0 / .45); }
.shop { display: flex; justify-content: space-between; align-items: center; margin: 0 12px; padding: 9px 12px; border-radius: 8px; background: #1a1f29; font-weight: 500; }
/* after the click: the landing page, then the order */
.land, .okay { position: absolute; inset: 0; background: #0b0d12; display: grid; align-content: start; gap: 12px; padding: 14px; }
.land .hero-i { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.land h4 { font: 600 22px/1.05 var(--sans); letter-spacing: -.03em; } .land p { color: #8590a0; font-size: 13px; }
.land .buy { text-align: center; padding: 14px; border-radius: 12px; background: var(--accent); color: #06090f; font-weight: 600; }
.okay { place-content: center; justify-items: center; text-align: center; opacity: 0; }
.okay i { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--accent); display: grid; place-items: center; font: 600 28px var(--sans); color: var(--accent); font-style: normal; }
.okay b { font: 600 22px var(--sans); } .okay span { color: #8590a0; font-size: 13px; }

/* the panel on the right changes with every stop */
.rps { position: absolute; right: 32px; top: 0; bottom: 0; width: min(26%, 360px); display: grid; align-content: center; }
.rp { grid-area: 1 / 1; display: grid; gap: 10px; opacity: 0; translate: 18px 0; transition: opacity .35s, translate .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; font-size: 14px; }
.rp.on { opacity: 1; translate: 0; transition-delay: .25s; }
.rp > span { font: 11px var(--mono); color: var(--dim); }
.rp .c { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); display: flex; justify-content: space-between; gap: 12px; align-items: center; transition: border-color .3s, opacity .3s; }
.rp .c em { font-style: normal; font: 12px var(--mono); color: var(--accent); white-space: nowrap; }
.rp.aud .c { position: relative; } .rp.aud .c::before { content: ""; position: absolute; right: 100%; top: 50%; width: 46px; border-top: 1px dashed var(--accent); opacity: .6; }
.rp.var .c { opacity: .45; } .rp.var .c.on { opacity: 1; border-color: var(--accent); }
.rp.evt.on .c { animation: lit 3.2s infinite; } .rp.evt.on .c:nth-child(3) { animation-delay: .5s; } .rp.evt.on .c:nth-child(4) { animation-delay: 1s; } .rp.evt.on .c:nth-child(5) { animation-delay: 1.5s; } .rp.evt.on .c:nth-child(6) { animation-delay: 2s; }
@keyframes lit { 0%, 40%, 100% { border-color: var(--line); } 10% { border-color: var(--accent); } }
.rp.math b { display: block; font: 500 clamp(40px, 5vw, 76px)/1 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.rp.math .big { color: var(--accent); }
.rp.math div { display: grid; gap: 2px; margin-bottom: 10px; color: var(--dim); font-size: 13px; }
/* the first 30 days: four steps where the phone was */
.plan4 { position: absolute; left: 44%; right: 32px; top: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: center; opacity: 0; pointer-events: none; }
.plan4 div { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 20px; display: grid; gap: 8px; }
.plan4 span { font: 11px var(--mono); color: var(--accent); } .plan4 b { font: 500 clamp(17px, 1.6vw, 22px)/1.15 var(--sans); letter-spacing: -.02em; } .plan4 p { font-size: 13px; color: var(--dim); }

@media (max-width: 760px) {
  .adstage .iphone { left: 50%; top: 27%; }
  .rps { display: none; }
  .plan4 { left: 16px; right: 16px; top: 56px; bottom: 50%; gap: 8px; } .plan4 div { padding: 10px; } .plan4 p { display: none; }
  .copy article.hero-a h1 { font-size: 56px; } .copy article.hero-a p { margin-top: 10px; }
}

/* ================= video: real reels in a phone, one kind of client per stop ================= */
.reels { position: absolute; inset: 0; background: #000; overflow: hidden; }
.reels .amb { position: absolute; inset: -10%; background: center / cover; filter: blur(60px) saturate(1.3) brightness(.4); opacity: 0; transition: opacity .9s; }
.reels .amb.on { opacity: 1; }
.rphone { position: absolute; left: 68%; top: 50%; translate: -50% -50%; --h: min(80vh, 760px); height: var(--h); width: calc(var(--h) * .5625); border-radius: 40px; border: 9px solid #0d0d0d; box-shadow: 0 0 0 1px #3a3a3a, 0 50px 140px rgb(0 0 0 / .7); background: #000; overflow: hidden; --p: 0; cursor: pointer;
  transition: width .7s cubic-bezier(.2, .8, .2, 1), height .7s cubic-bezier(.2, .8, .2, 1); }
.rphone.wide { --w: min(48vw, 120vh); width: var(--w); height: calc(var(--w) * .5625); }   /* the phone turned on its side for a 16:9 film */
.rphone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.rphone video.on { opacity: 1; }
.rphone::before { content: ""; position: absolute; left: 50%; top: 10px; width: 26%; height: 20px; margin-left: -13%; border-radius: 99px; background: #000; z-index: 3; }
.rphone.wide::before { left: 10px; top: 50%; width: 18px; height: 26%; margin: 0; translate: 0 -50%; }
.rphone::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(100% * var(--p)); background: #fff; z-index: 3; }
/* the app around the reel: likes, comments, share, save, the account and its caption. No counts: they would be made-up results. */
.ig { position: absolute; inset: 0; z-index: 2; color: #fff; font: 13px/1.35 var(--sans); background: linear-gradient(0deg, rgb(0 0 0 / .55), transparent 32%), linear-gradient(180deg, rgb(0 0 0 / .35), transparent 16%); transition: opacity .3s; pointer-events: none; }
.rphone.wide .ig { opacity: 0; }
.ig svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); }
.ig-top { position: absolute; left: 16px; top: 40px; font: 600 20px var(--sans); letter-spacing: -.02em; }
.ig-side { position: absolute; right: 10px; bottom: 84px; display: grid; gap: 16px; justify-items: center; }
.ig-side span { display: grid; justify-items: center; gap: 2px; } .ig-side i { font: 600 11px var(--sans); font-style: normal; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.ig-cm { position: absolute; left: 14px; right: 64px; bottom: 96px; font-size: 12px; padding: 7px 10px; border-radius: 14px; background: rgb(0 0 0 / .45); backdrop-filter: blur(8px); justify-self: start; width: fit-content; max-width: calc(100% - 78px); } .ig-cm:empty { display: none; } .ig-cm b { font-weight: 600; margin-right: 4px; }
.ig-side .h { transition: fill .2s, stroke .2s, scale .3s cubic-bezier(.3, 2.2, .5, 1); }
.rphone.liked .ig-side .h { fill: #ff3040; stroke: #ff3040; scale: 1.15; }
.ig-bot { position: absolute; left: 14px; right: 60px; bottom: 18px; display: grid; gap: 8px; }
.ig-bot p { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ig-bot .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.ig-bot u { text-decoration: none; font-weight: 600; font-size: 12px; padding: 4px 10px; border: 1px solid #fff; border-radius: 8px; }
.ig-bot span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-burst { position: absolute; left: 50%; top: 46%; width: 110px !important; height: 110px !important; margin: -55px; fill: #fff !important; stroke: none !important; opacity: 0; }
:root[data-theme="video"] .copy { width: min(42%, 580px); }
:root[data-theme="video"] .copy .hero-a h1 { font-size: clamp(64px, 9vw, 150px); }
:root[data-theme="video"] .copy h2 { font-size: clamp(30px, 3.8vw, 60px); }
@media (max-width: 760px) {
  .rphone { left: 50%; top: 29%; --h: 44vh; border-width: 6px; border-radius: 26px; } .rphone::before { height: 12px; top: 6px; } .rphone.wide { --w: 88vw; }
  .ig { font-size: 11px; } .ig svg { width: 20px; height: 20px; } .ig-top { top: 24px; font-size: 15px; } .ig-side { bottom: 52px; gap: 8px; right: 6px; } .ig-side i { font-size: 9px; } .ig-cm { bottom: 66px; left: 10px; font-size: 10px; padding: 5px 8px; max-width: calc(100% - 56px); } .ig-bot { bottom: 10px; left: 10px; right: 40px; gap: 4px; } .ig-bot .av { width: 22px; height: 22px; } .ig-burst { width: 70px !important; height: 70px !important; margin: -35px; }
  :root[data-theme="video"] .copy { width: auto; }
}

/* video on phones: no phone in a phone. The reel fills the screen like Instagram itself: our words on top under a shadow, the app's buttons at the bottom. */
@media (max-width: 760px) {
  .rphone:not(.wide) { left: 0; top: 0; translate: none; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .rphone:not(.wide)::before { display: none; }
  .rphone.wide { top: calc((var(--ct, 50%) + 100% - 40px) / 2); }   /* the wide film sits in the middle of the space under the words */
  .rphone:not(.wide) .ig { background: linear-gradient(180deg, rgb(0 0 0 / .9), rgb(0 0 0 / .72) 48%, transparent 72%), linear-gradient(0deg, rgb(0 0 0 / .7), transparent 34%); }
  .ig-top { display: none; }
  .ig svg { width: 26px; height: 26px; } .ig-side { top: 52%; bottom: auto; right: 10px; gap: 24px; } .ig-side i { font-size: 11px; }
  .ig-bot { bottom: 76px; left: 16px; right: 60px; } .ig-bot span { -webkit-line-clamp: 1; } .ig-bot .av { width: 28px; height: 28px; }
  .ig-cm { bottom: 140px; left: 16px; font-size: 12px; }
  :root[data-theme="video"] .copy { top: max(92px, 12svh); bottom: auto; z-index: 4; text-shadow: 0 1px 12px rgb(0 0 0 / .6); }
}

/* ads on phones: no phone in a phone. The feed fills the screen, our words sit on top under a shadow, like the video page. */
@media (max-width: 760px) {
  .adstage .iphone { left: 0; top: 0; width: 100%; height: 100%; margin: 0; scale: none; border-radius: 0; box-shadow: none; }
  .adstage .iphone::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .92), rgb(0 0 0 / .75) calc(var(--cb, 50%) - 40px), transparent calc(var(--cb, 50%) + 30px)); }
  .adstage .ios-status { display: none; } .adstage .scr { inset: 0; }
  .adstage .fi, .adstage .adpic { aspect-ratio: 16 / 10; }
  .land { gap: 8px; padding-top: calc(var(--cb, 50%) + 10px); } .land .hero-i { aspect-ratio: 2 / 1; } .land h4 { font-size: 19px; }
  .okay { place-content: start center; padding-top: calc(var(--cb, 50%) + 40px); }
  .plan4 { top: calc(var(--cb, 50%) + 10px); bottom: 44px; align-content: start; }
  :root[data-theme="ads"] .copy { top: max(92px, 12svh); bottom: auto; z-index: 4; color: #fff; text-shadow: 0 1px 12px rgb(0 0 0 / .6); }
  :root[data-theme="ads"] .copy p, :root[data-theme="ads"] .copy article.hero-a p, :root[data-theme="ads"] .copy .price { color: #d4d6cf; }
  :root[data-theme="ads"] .copy li { color: #fff; background: rgb(255 255 255 / .12); border-color: transparent; }
  :root[data-theme="ads"] .copy .num { background: var(--pop); color: #11130f; }
  :root[data-theme="ads"] .copy .price b { color: #fff; }
}