/* A true-to-proportion iPhone (15/16 Pro look) and a dark Instagram profile to put in it. Reusable on any page.

   iPhone: <div class="iphone"> is the root. Its width comes from the parent or from --iphone-w; everything else scales
   from that width (container query units), so it looks the same at any size. Inside it:
     .iphone-body                    the titanium rim and black bezel (a lift on hover; none with reduced motion)
       .iphone-btn + -action | -up | -down | -side   the side buttons
       .iphone-screen                the display: overflow hidden, holds your content, then (on top of it)
         .iphone-status              "9:41" + signal, wi-fi and battery
         .iphone-island              the Dynamic Island
         .iphone-home                the home indicator
   Add .is-light to .iphone when the content is light, so the status bar and the home bar turn black.
   Proportions: body 71.5 x 146.6 (height = width x 2.05), corner 16% of the width, rim + bezel 3.8%, and inside the
   screen iOS's own layout in points of a 393-point-wide screen (island 126 x 37.33 at 11 from the top, status bar 59,
   home indicator 134 x 5 at 8 from the bottom).

   Instagram: <div class="ig"> fills its positioned parent (the .iphone-screen) and scales from its own width, in points
   of a 393-point screen (--pt). Parts: .ig-top, .ig-scroll (the part that scrolls: .ig-head with .ig-avatar > .ig-logo
   and .ig-stats, .ig-bio, .ig-actions of .ig-btn, .ig-highlights of .ig-hl > .ig-hl-pic > img, .ig-tabs (sticky),
   .ig-grid of .ig-tile > img (+ an .ig-mark icon; .ig-at-l / .ig-at-r crop to one side; .is-loading for a tile not
   loaded yet), .ig-spinner) and .ig-nav. --ig-safe-top / --ig-safe-bottom (in points) leave room for the status bar and
   the home indicator; .iphone-screen sets them. --ig-brand (and --ig-brand-ink) colour the profile's logo. The scrolling
   and the hand-over to the next profile (.is-entering / .is-in / .is-leaving) are iphone.js's. */

/* ---------- the phone ---------- */
.iphone{position:relative;width:var(--iphone-w,100%);aspect-ratio:71.5/146.6;container-type:inline-size;-webkit-tap-highlight-color:transparent}
.iphone-body{position:absolute;inset:0;border-radius:16cqw;
  /* black titanium: the light runs round the rim, brighter where the edge turns toward it */
  background:conic-gradient(from 200deg,#6f7177,#2b2c30 9%,#46484d 20%,#1d1e21 34%,#3b3d42 47%,#76787e 58%,#2a2b2f 70%,#1c1d20 82%,#55575c 92%,#6f7177);
  box-shadow:
    inset 0 0 0 max(1px,.2cqw) oklch(1 0 0/.3),
    inset 0 0 0 max(1.5px,.42cqw) oklch(0 0 0/.28),
    0 .5cqw 1cqw oklch(0 0 0/.32),
    0 5cqw 10cqw -2.5cqw oklch(0 0 0/.5),
    0 22cqw 40cqw -14cqw oklch(0 0 0/.65);
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.iphone:hover .iphone-body{transform:translateY(-1.6cqw)}
/* the black bezel between the rim and the glass */
.iphone-body::before{content:"";position:absolute;inset:1.2cqw;border-radius:14.8cqw;background:#020203;
  box-shadow:0 0 0 max(1px,.16cqw) oklch(0 0 0/.6),inset 0 0 0 max(1px,.1cqw) oklch(1 0 0/.07)}

/* side buttons: slim raised bars just outside the rim (positions from the 15 Pro's drawings, in % of the width) */
.iphone-btn{position:absolute;width:.8cqw;background:linear-gradient(90deg,#17181b,#55575d 45%,#8a8c92 60%,#3a3b40);
  box-shadow:0 .2cqw .5cqw oklch(0 0 0/.45)}
.iphone-btn-action,.iphone-btn-up,.iphone-btn-down{left:-.72cqw;border-radius:.6cqw 0 0 .6cqw}
.iphone-btn-side{right:-.72cqw;border-radius:0 .6cqw .6cqw 0;background:linear-gradient(270deg,#17181b,#55575d 45%,#8a8c92 60%,#3a3b40)}
.iphone-btn-action{top:38cqw;height:8.6cqw}
.iphone-btn-up{top:56.5cqw;height:15.4cqw}
.iphone-btn-down{top:75.5cqw;height:15.4cqw}
.iphone-btn-side{top:61cqw;height:24cqw}

/* the glass: a container of its own, so what is inside measures in points of a 393-point screen */
.iphone-screen{position:absolute;inset:3.8cqw;border-radius:12.4cqw;overflow:hidden;background:#000;isolation:isolate;
  container-type:inline-size;--spt:calc(100cqw / 393);--ig-safe-top:59;--ig-safe-bottom:34}
/* a faint reflection across the glass, over everything */
.iphone-screen::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,oklch(1 0 0/.1) 0%,oklch(1 0 0/.035) 31%,transparent 31.2%,transparent 62%,oklch(1 0 0/.025) 100%)}

.iphone-island{position:absolute;z-index:30;top:calc(var(--spt) * 11);left:50%;translate:-50% 0;
  width:calc(var(--spt) * 126);height:calc(var(--spt) * 37.33);border-radius:999px;background:#000;
  box-shadow:inset 0 0 0 max(.5px,calc(var(--spt) * .7)) oklch(1 0 0/.07)}
/* the front camera, a dark lens at the island's right end */
.iphone-island::after{content:"";position:absolute;top:50%;right:calc(var(--spt) * 12);translate:0 -50%;
  width:calc(var(--spt) * 11);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#3a4462 0,#151a2c 32%,#07080d 62%,#000 100%)}

.iphone-status{position:absolute;z-index:25;inset:0 0 auto;height:calc(var(--spt) * 59);display:grid;
  grid-template-columns:1fr calc(var(--spt) * 126) 1fr;align-items:center;color:#fff;pointer-events:none;
  font:600 calc(var(--spt) * 17)/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.iphone-time{justify-self:center;padding-left:calc(var(--spt) * 8)}
.iphone-sys{justify-self:center;display:flex;align-items:center;gap:calc(var(--spt) * 5.5);padding-right:calc(var(--spt) * 2)}
.iphone-sys svg{display:block;height:auto;fill:currentColor}
.iphone-sys .sig{width:calc(var(--spt) * 18)}
.iphone-sys .wifi{width:calc(var(--spt) * 16)}
.iphone-sys .bat{width:calc(var(--spt) * 27)}

.iphone-home{position:absolute;z-index:25;bottom:calc(var(--spt) * 8);left:50%;translate:-50% 0;
  width:calc(var(--spt) * 134);height:calc(var(--spt) * 5);border-radius:999px;background:#fff;pointer-events:none}
.iphone.is-light .iphone-status{color:#000}
.iphone.is-light .iphone-home{background:#000}

@media (prefers-reduced-motion:reduce){
  .iphone-body{transition:none}
  .iphone:hover .iphone-body{transform:none}
}

/* ---------- Instagram, dark theme ---------- */
.ig{--pt:calc(100cqw / 393);--ig-text:#f5f5f5;--ig-muted:#a8a8a8;--ig-line:#262626;--ig-btn:#363636;--ig-blue:#0095f6;
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:#000;color:var(--ig-text);
  container-type:inline-size;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.25;text-align:left;user-select:none}
:where(.ig) svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:where(.ig) img{display:block;max-width:none}
:where(.ig) ul{margin:0;padding:0;list-style:none}

/* top bar: the handle and its account switcher, then create and the menu */
.ig-top{flex:none;box-sizing:border-box;height:calc(var(--pt) * (44 + var(--ig-safe-top,0)));padding:calc(var(--pt) * var(--ig-safe-top,0)) calc(var(--pt) * 16) 0;
  display:flex;align-items:center;gap:calc(var(--pt) * 5)}
.ig-handle{font-size:calc(var(--pt) * 21);font-weight:700;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-top .ig-chev{width:calc(var(--pt) * 13);stroke-width:2.6;margin-top:calc(var(--pt) * 2)}
.ig-top-icons{margin-left:auto;display:flex;align-items:center;gap:calc(var(--pt) * 22)}
.ig-top-icons svg{width:calc(var(--pt) * 26)}

/* the part that scrolls (by script; people scroll the page, not the phone) */
.ig-scroll{position:relative;flex:1;min-height:0;overflow:hidden}

.ig-head{display:flex;align-items:center;padding:calc(var(--pt) * 6) calc(var(--pt) * 16) 0}
/* the profile picture with an unseen-story ring */
.ig-avatar{flex:none;box-sizing:border-box;width:calc(var(--pt) * 90);aspect-ratio:1;border-radius:50%;padding:calc(var(--pt) * 2.6);
  background:linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 52%,#962fbf 76%,#4f5bd5 100%)}
.ig-logo{box-sizing:border-box;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:var(--ig-brand,#3a3a3a);color:var(--ig-brand-ink,#fff);font-weight:700;letter-spacing:.02em;line-height:1}
.ig-avatar .ig-logo{border:calc(var(--pt) * 3.2) solid #000;font-size:calc(var(--pt) * 27)}
.ig-logo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}   /* a person's face instead of a monogram */
.ig-stats{flex:1;display:grid;grid-template-columns:repeat(3,1fr);margin-left:calc(var(--pt) * 14);text-align:center}
.ig-stats b{display:block;font-size:calc(var(--pt) * 17);font-weight:700;letter-spacing:-.01em}
.ig-stats span{display:block;margin-top:calc(var(--pt) * 2);font-size:calc(var(--pt) * 13.5)}

.ig-bio{padding:calc(var(--pt) * 12) calc(var(--pt) * 16) 0;font-size:calc(var(--pt) * 14);line-height:calc(var(--pt) * 18.5)}
.ig-name{display:block;font-weight:600}
.ig-cat{display:block;color:var(--ig-muted)}
.ig-bio p{margin:0}

.ig-actions{display:flex;gap:calc(var(--pt) * 6);padding:calc(var(--pt) * 14) calc(var(--pt) * 16) 0}
.ig-btn{flex:1;display:grid;place-items:center;height:calc(var(--pt) * 32);border-radius:calc(var(--pt) * 8);background:var(--ig-btn);
  font-size:calc(var(--pt) * 14);font-weight:600}
.ig-btn.is-primary{background:var(--ig-blue);color:#fff}
.ig-btn.is-icon{flex:none;width:calc(var(--pt) * 34)}
.ig-btn svg{width:calc(var(--pt) * 17);stroke-width:2.1}

/* story highlights: a row that runs off the right edge, as it does in the app */
.ig-highlights{display:flex;gap:calc(var(--pt) * 15);padding:calc(var(--pt) * 18) calc(var(--pt) * 16) 0;overflow:hidden}
.ig-highlights li{flex:none;width:calc(var(--pt) * 66);text-align:center;font-size:calc(var(--pt) * 12)}
.ig-hl{display:block;box-sizing:border-box;width:100%;aspect-ratio:1;border-radius:50%;padding:calc(var(--pt) * 3);
  box-shadow:inset 0 0 0 max(1px,calc(var(--pt) * 1.2)) #3d3d3d}
/* the cover: a close crop of one of the posts (--hl-zoom and --hl-at move it) */
.ig-hl-pic{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#1a1a1a}
.ig-hl img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(var(--hl-zoom,2.3));transform-origin:var(--hl-at,50% 4%)}
.ig-hl-label{display:block;margin-top:calc(var(--pt) * 5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* grid / reels / tagged; sticks to the top while the grid scrolls under it */
.ig-tabs{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);height:calc(var(--pt) * 44);
  margin-top:calc(var(--pt) * 14);background:#000;box-shadow:inset 0 calc(var(--pt) * -.5) 0 var(--ig-line)}
.ig-tab{display:grid;place-items:center;color:#737373}
.ig-tab.is-on{color:var(--ig-text);box-shadow:inset 0 calc(var(--pt) * -1.5) 0 var(--ig-text)}
.ig-tab svg{width:calc(var(--pt) * 24)}

/* the posts: 3 columns of 3:4 tiles (the profile grid since 2025); 4:5 and square posts are cropped to fit */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:max(1px,calc(var(--pt) * 1.5))}
.ig-tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1a1a1a}
.ig-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the grid crop, as the app's "adjust preview" sets it: keep a left- or right-aligned headline whole */
.ig-tile.ig-at-l img{object-position:0 50%}
.ig-tile.ig-at-r img{object-position:100% 50%}
.ig-mark{position:absolute;top:calc(var(--pt) * 7);right:calc(var(--pt) * 7);width:calc(var(--pt) * 17);
  fill:#fff;stroke:none;filter:drop-shadow(0 0 calc(var(--pt) * 2) oklch(0 0 0/.55))}
/* .is-loading: a tile still loading (the next page of posts), with the app's soft shimmer */
.ig-tile.is-loading{background:linear-gradient(100deg,#141414 30%,#222 50%,#141414 70%) 0 0/300% 100%;animation:ig-shimmer 1.6s linear infinite}
@keyframes ig-shimmer{from{background-position:100% 0}to{background-position:-50% 0}}
.ig-spinner{width:calc(var(--pt) * 26);margin:calc(var(--pt) * 18) auto calc(var(--pt) * 26);color:#8e8e8e;stroke-width:2.4;
  animation:ig-spin .9s steps(8) infinite}
@keyframes ig-spin{to{rotate:360deg}}

/* bottom bar: home, search, create, reels, the profile (current) */
.ig-nav{flex:none;box-sizing:border-box;height:calc(var(--pt) * (49 + var(--ig-safe-bottom,0)));padding:0 calc(var(--pt) * 6) calc(var(--pt) * var(--ig-safe-bottom,0));
  display:flex;align-items:center;justify-content:space-around;background:#000;box-shadow:inset 0 max(1px,calc(var(--pt) * .5)) 0 var(--ig-line)}
.ig-nav svg{width:calc(var(--pt) * 27)}
.ig-nav-me{box-sizing:border-box;width:calc(var(--pt) * 29);aspect-ratio:1;border-radius:50%;padding:calc(var(--pt) * 1.6);border:calc(var(--pt) * 1.6) solid var(--ig-text)}
.ig-nav-me .ig-logo{font-size:calc(var(--pt) * 8.5);letter-spacing:0}

/* one profile handing over to the next: an iOS push, the new page in from the right */
.ig.is-entering{translate:100% 0;box-shadow:calc(var(--pt) * -12) 0 calc(var(--pt) * 30) oklch(0 0 0/.6)}
.ig.is-entering.is-in{translate:0 0;transition:translate .55s cubic-bezier(.2,.8,.2,1)}
.ig.is-leaving{translate:-28% 0;filter:brightness(.55);transition:translate .55s cubic-bezier(.2,.8,.2,1),filter .55s ease}

@media (prefers-reduced-motion:reduce){
  .ig-tile.is-loading,.ig-spinner{animation:none}
  .ig.is-entering,.ig.is-leaving{transition:none}
}