/* Mock frames: browser, phone, Instagram profile, feed posts, stories, posters.
   Each one is sized by its own width; drop it in any tile and set the width inline (style="width:…").
   Recipes for each live in README.md. */

/* ---------- browser ---------- */
.browser { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(2,23,20,.45), 0 0 0 1px rgba(2,23,20,.08); }
.browser .bar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #ecebe8; border-bottom: 1px solid #dcdad5; }
.browser .bar i { width: 12px; height: 12px; border-radius: 50%; background: #cfccc6; }
.browser .url { margin: 0 auto; transform: translateX(-30px); width: 42%; height: 26px; border-radius: 7px; background: #fff; display: grid; place-items: center; font: 400 13px/1 var(--body); color: #6a6f6c; }
.browser .view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }

/* a long screenshot that drifts down the page and back, so a still mock reads as a live site */
.scroll-shot { width: 100%; animation: page-scroll var(--dur, 22s) cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes page-scroll { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(var(--to, -60%)); } }
.slide:not(.active) .scroll-shot { animation-play-state: paused; }

/* ---------- phone ---------- */
.phone { position: relative; aspect-ratio: 9 / 19.5; border-radius: 13.5% / 6.2%; background: #0b0c0c; padding: 3.2%;
  box-shadow: 0 50px 90px -30px rgba(2,23,20,.55), inset 0 0 0 2px #2b2d2d; }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 11% / 5.1%; overflow: hidden; background: var(--cheekbone); }
.phone .island { position: absolute; z-index: 5; left: 50%; top: 2.2%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: #000; }

/* ---------- Instagram profile (inside a phone) ---------- */
.ig { position: absolute; inset: 0; background: #fff; color: #111; font: 400 13px/1.3 -apple-system, "Helvetica Neue", sans-serif; overflow: hidden; }
.ig .ig-top { height: 92px; padding: 52px 16px 0; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 16px; }
.ig .ig-head { display: flex; gap: 18px; align-items: center; padding: 6px 16px 10px; }
.ig .ig-avatar { width: 78px; height: 78px; border-radius: 50%; background: var(--forest); display: grid; place-items: center; flex: none; }
.ig .ig-avatar img { width: 70%; }
.ig .ig-name { font-weight: 600; font-size: 14px; }
.ig .ig-bio { padding: 0 16px 12px; font-size: 13px; }
.ig .ig-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px 14px; }
.ig .ig-btns span { height: 32px; border-radius: 8px; background: #efefef; display: grid; place-items: center; font-weight: 600; }
.ig .ig-tabs { height: 44px; border-top: 1px solid #e6e6e6; display: flex; }
.ig .ig-tabs span { flex: 1; border-bottom: 1px solid transparent; }
.ig .ig-tabs span:first-child { border-color: #111; }
.ig .ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig .ig-grid > * { aspect-ratio: 4 / 5; position: relative; overflow: hidden; }

/* ---------- feed post (flat, 4:5) ---------- */
.post { position: relative; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; }
.post .p-tag { position: absolute; left: 6cqw; top: 6cqw; z-index: 2; font: 400 3.4cqw/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: pre; }
.post .p-big { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; z-index: 2; font: 400 11cqw/1 var(--display); letter-spacing: -.02em; }
.post .p-mid { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; z-index: 2; font: 400 7.5cqw/1.05 var(--display); }
.post .p-logo { position: absolute; right: 6cqw; top: 6.4cqw; width: 26cqw; z-index: 2; }

/* ---------- phone screen (shared by story + reel) ----------
   Stories and reels are 9:16 media, but people see them on a ~9:19.5 phone screen, so the frames use that ratio
   with the status bar and app chrome around the media. Rounded like the screen: 12% of the width. */
.screen-frame { position: relative; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 12% / 5.54%; container-type: inline-size; }
.sbar { position: absolute; left: 0; right: 0; top: 0; height: 11cqw; padding: 0 7cqw 0 9cqw; display: flex; align-items: center; justify-content: space-between; z-index: 6;
  font: 600 3.9cqw/1 -apple-system, "Helvetica Neue", sans-serif; color: currentColor; }
.sbar svg { width: 17cqw; height: 3.4cqw; display: block; }

/* ---------- story: 9:16 media between the status bar and the reply bar, on black ---------- */
.story { background: #000; color: #fff; }
.story .s-media { position: absolute; left: 0; right: 0; top: 11cqw; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 3cqw; }
.story .bars { position: absolute; left: 3cqw; right: 3cqw; top: 3cqw; z-index: 4; display: flex; gap: 1cqw; }
.story .bars i { flex: 1; height: .7cqw; border-radius: 9px; background: rgba(255,255,255,.45); }
.story .bars i.on { background: #fff; }
.story .who { position: absolute; left: 3cqw; top: 6.5cqw; z-index: 4; display: flex; align-items: center; gap: 2.4cqw; font: 600 3.4cqw/1 -apple-system, "Helvetica Neue", sans-serif; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.story .who b { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--forest); display: grid; place-items: center; }
.story .who b img { width: 74%; }
.story .s-big { position: absolute; left: 7cqw; right: 7cqw; z-index: 3; font: 400 10cqw/1.02 var(--display); letter-spacing: -.02em; }
.story .s-tag { position: absolute; left: 7cqw; z-index: 3; font: 400 3.6cqw/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: pre; }
.story .s-cta { position: absolute; left: 50%; bottom: 8cqw; transform: translateX(-50%); z-index: 3; padding: 3.4cqw 9cqw; background: var(--chartreuse); color: var(--forest); font: 400 3.6cqw/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.story .s-reply { position: absolute; left: 4cqw; right: 4cqw; top: 192cqw; display: flex; align-items: center; gap: 4cqw; }
.story .s-reply span { flex: 1; height: 10.5cqw; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; padding: 0 5cqw; display: flex; align-items: center; font: 400 3.6cqw/1 -apple-system, "Helvetica Neue", sans-serif; color: rgba(255,255,255,.85); }
.story .s-reply svg { width: 6.6cqw; height: 6.6cqw; flex: none; }
.home-ind { position: absolute; left: 50%; bottom: 2cqw; width: 35%; height: 1.3cqw; border-radius: 9px; transform: translateX(-50%); background: currentColor; z-index: 7; }

/* ---------- poster (2:3) ---------- */
.poster { position: relative; aspect-ratio: 2 / 3; overflow: hidden; container-type: inline-size; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.poster .po-big { position: absolute; left: 6cqw; right: 6cqw; z-index: 2; font: 400 13cqw/.98 var(--display); letter-spacing: -.02em; }
.poster .po-tag { position: absolute; left: 6cqw; z-index: 2; font: 400 2.6cqw/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: pre; }
.poster .po-logo { position: absolute; left: 6cqw; bottom: 6cqw; width: 34cqw; z-index: 2; }

/* ---------- reel: full-screen video under IG reel chrome and the tab bar ----------
   The video is the animation padded to 1080x2340 in its own background (render-anim.mjs makes <name>-reel.mp4),
   so no CSS colour sits next to it: Chrome shifts video colour slightly and a square would show. */
.reel { color: var(--forest); background: var(--bg, #fff); }
.reel.dark { color: var(--cheekbone); }
.reel .r-top { position: absolute; left: 5cqw; right: 5cqw; top: 14cqw; display: flex; justify-content: space-between; align-items: center; font: 700 5cqw/1 -apple-system, "Helvetica Neue", sans-serif; z-index: 4; }
.reel .r-top svg { width: 6cqw; height: 6cqw; }
.reel .r-tag { position: absolute; left: 7cqw; top: 30cqw; font: 400 3.4cqw/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: pre; z-index: 3; }
.reel .r-big { position: absolute; left: 7cqw; right: 9cqw; top: 37cqw; font: 400 7.6cqw/1.04 var(--display); letter-spacing: -.02em; z-index: 3; }
.reel .r-anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel .r-chip { position: absolute; left: 50%; top: 152cqw; transform: translateX(-50%); padding: 2.2cqw 4cqw; background: var(--chartreuse); color: var(--forest); font: 400 3.2cqw/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; z-index: 3; }
.reel .r-rail { position: absolute; right: 3.5cqw; bottom: 25cqw; display: flex; flex-direction: column; gap: 6cqw; z-index: 4; }
.reel .r-rail svg { width: 7cqw; height: 7cqw; display: block; }
.reel .r-foot { position: absolute; left: 5cqw; right: 16cqw; bottom: 22cqw; z-index: 4; font: 400 3.4cqw/1.35 -apple-system, "Helvetica Neue", sans-serif; }
.reel .r-who { display: flex; align-items: center; gap: 2.4cqw; font-weight: 600; margin-bottom: 2.4cqw; }
.reel .r-who b { width: 7.5cqw; height: 7.5cqw; border-radius: 50%; background: var(--forest); display: grid; place-items: center; flex: none; }
.reel.dark .r-who b { background: var(--cheekbone); }
.reel .r-who b img { width: 74%; }
.reel .r-who i { font-style: normal; font-weight: 600; border: 1px solid currentColor; border-radius: 1.6cqw; padding: .8cqw 2.4cqw; opacity: .9; }
.reel .r-audio { margin-top: 1.6cqw; opacity: .75; font-size: 3cqw; }
.reel .r-prog { position: absolute; left: 0; right: 0; bottom: 17cqw; height: .8cqw; background: rgba(127,127,127,.25); z-index: 4; }
.reel .r-prog span { display: block; height: 100%; width: 0; background: currentColor; }
.reel .tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqw; padding: 3.4cqw 6cqw 0; display: flex; justify-content: space-between; align-items: flex-start; background: var(--bg, #fff); z-index: 5; }
.reel .tabbar svg { width: 7cqw; height: 7cqw; display: block; }
.reel .tabbar b { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--forest); display: grid; place-items: center; }
.reel.dark .tabbar b { background: var(--cheekbone); }
.reel .tabbar b img { width: 74%; }

/* ---------- desktop monitor (Studio Display style, front on) ----------
   Black bezel, the site full screen inside (no browser chrome), the stand running off the bottom of the tile.
   Named .monitor, not .display: .display is the big headline type style in deck.css. Place it with top inline; the tile clips the stand. Screen is 16:10 to match the 1440x900 recordings. */
.monitor { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }
.monitor .bezel { position: relative; z-index: 2; padding: 1.55%; border-radius: 16px; background: #0a0b0b;
  box-shadow: inset 0 0 0 1.5px #2e3032, inset 0 0 0 3px #0a0b0b, inset 0 1px 0 3px rgba(255,255,255,.06), 0 60px 120px -40px rgba(0,0,0,.55); }
.monitor .panel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #000; }
.monitor .stand { position: absolute; z-index: 1; left: 50%; top: calc(100% - 8px); width: 19%; height: 600px; transform: translateX(-50%);
  background: #1c1d1f; box-shadow: inset 1px 0 0 rgba(255,255,255,.07), inset -1px 0 0 rgba(255,255,255,.07); }   /* a flat slab, not a rounded post */
.monitor .stand::before { content: ""; position: absolute; inset: 0 0 auto; height: 90px; background: linear-gradient(rgba(0,0,0,.65), transparent); }