/* =========================================================================
   STEADY STATE · in-feed phone mock (shared shell)
   A photoreal iPhone running a pixel-faithful Instagram feed.
   Linked by static-ad/ (Variant A, single 1:1 image post) and
   carousel/phone/ (Variant B, swipeable carousel). Only the post-media slot
   differs between the two; everything here stays identical so they can't drift.
   The phone is a fixed 392 x 846 object scaled with transform: phone.js sets
   --s so it always fits the viewport and never widens the page.
   ========================================================================= */

/* ------------------------------------------------------------------ stage */
.sa {
  position: relative; overflow: hidden; display: grid; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(18px, 4vh, 36px) 16px;
}
.sa__glow {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: min(1000px, 150vw); height: min(820px, 120vh); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(12, 191, 240, 0.16), rgba(12, 191, 240, 0.05) 55%, transparent 100%);
}
.stage {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; align-content: center; row-gap: 16px;
}

/* intro: stacked above the phone on small screens, beside it on wide ones */
.sa__intro { max-width: 300px; text-align: center; }
.sa__intro .eyebrow { margin-bottom: 10px; font-size: calc(11px + var(--bump)); }
.sa__title {
  margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: calc(clamp(1.25rem, 2.2vw, 1.85rem) + var(--bump)); line-height: 1.05; letter-spacing: 0.02em;
}
.sa__note { margin: 12px 0 0; color: var(--muted); font-size: calc(0.9rem + var(--bump)); line-height: 1.5; text-wrap: pretty; }

@media (min-width: 980px) {
  .stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(40px, 5vw, 76px); }
  .sa__intro { grid-column: 1; justify-self: end; text-align: right; }
  .phone-wrap { grid-column: 2; }
}
@media (max-width: 979px) {
  .sa { padding-block: 16px; }
  .sa__note { display: none; }
}

/* --------------------------------------------------- fit-to-viewport box */
.phone-wrap {
  --s: 0.8; --pw: 392px; --ph: 846px;
  position: relative; flex: none;
  width: calc(var(--pw) * var(--s)); height: calc(var(--ph) * var(--s));
}
.phone-wrap > .iphone { position: absolute; left: 0; top: 0; transform: scale(var(--s)); transform-origin: 0 0; }
/* the soft shadow the phone stands on */
.phone-wrap::before {
  content: ""; position: absolute; left: 50%; bottom: calc(-22px * var(--s)); z-index: -1;
  width: calc(420px * var(--s)); height: calc(60px * var(--s)); transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), transparent); filter: blur(12px);
}
/* JS-off fallbacks (phone.js sets the exact value) */
@media (max-height: 820px) { .phone-wrap { --s: 0.74; } }
@media (max-width: 520px) { .phone-wrap { --s: 0.7; } }

/* --------------------------------------------------------- iPhone 17 shell */
.iphone {
  --w: 392px; --r: 62px;
  position: relative; width: var(--w); aspect-ratio: 392 / 846; border-radius: var(--r); padding: 11px;
  background: linear-gradient(148deg, #6f6a63 0%, #2c2925 10%, #100e0c 24%, #3b3732 44%, #7b756c 52%, #26231f 64%, #100e0c 82%, #6f6a63 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 0 0 2.5px rgba(0, 0, 0, 0.55),
    0 60px 120px -30px rgba(0, 0, 0, 0.95),
    0 26px 60px -24px rgba(0, 0, 0, 0.9);
}
.iphone::before { content: ""; position: absolute; inset: 8px; border-radius: calc(var(--r) - 8px); background: #000; }
.iphone::after {
  content: ""; position: absolute; inset: 11px; z-index: 6; pointer-events: none; border-radius: calc(var(--r) - 11px);
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 26%, rgba(255, 255, 255, 0) 40%);
}
.btn-side { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3a3631, #8a837a 55%, #4a4640); }
.btn-side--mute { left: -3px; top: 132px; height: 30px; }
.btn-side--up { left: -3px; top: 186px; height: 58px; }
.btn-side--down { left: -3px; top: 258px; height: 58px; }
.btn-side--power { right: -3px; top: 208px; height: 92px; }

/* the display: system font so the UI reads as iOS, not the brand */
.screen {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: calc(var(--r) - 11px); background: #fff; color: #000; isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 18px; letter-spacing: 0; -webkit-font-smoothing: antialiased;
}
.screen p { overflow-wrap: normal; }
.screen svg { flex: none; }

/* ------------------------------------------------------------- iOS chrome */
.status { position: relative; flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 28px 0 40px; }
.status__time { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.status__icons { display: flex; align-items: center; gap: 6px; }
.island { position: absolute; left: 50%; top: 11px; width: 116px; height: 33px; transform: translateX(-50%); border-radius: 20px; background: #000; }
.island::after {
  content: ""; position: absolute; right: 11px; top: 50%; width: 11px; height: 11px; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #3a4a6e 0 14%, #121828 42%, #050608 100%);
}
.homebar { position: absolute; left: 50%; bottom: 8px; z-index: 4; width: 138px; height: 5px; transform: translateX(-50%); border-radius: 3px; background: #000; }

/* ------------------------------------------------------ Instagram chrome */
/* The feed is mid-scroll (a sponsored post never sits first), so Instagram's
   top bar has tucked away and the post header sits under the status bar. */
.act svg, .tabbar svg { display: block; width: 100%; height: 100%; fill: none; stroke: #000; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

/* scrollable feed between the top bar and the tab bar */
.feed { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }

.post-head { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 10px 0 12px; }
.avatar-ring {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
.avatar { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 2px solid #fff; background: #d9dde1; }
/* his real Instagram profile picture, already a centred square */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.post-head__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.post-head__handle { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: #000; }
.post-head__sub { margin-top: 1px; font-size: 12px; color: #737373; }
.post-head__more { width: 24px; height: 24px; fill: #000; }

.post-media { position: relative; display: block; width: 100%; overflow: hidden; background: #06080a; color: inherit; }
.post-head__handle, .post-head__sub, .caption, .comments, .likes { -webkit-user-select: text; user-select: text; }

/* Instagram's sponsored CTA bar: grey, then it turns blue a moment in */
.cta-strip {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 10px 0 14px;
  background: #fafafa; color: #000; border-bottom: 0.5px solid #dbdbdb; font-size: 14px; font-weight: 600;
}
.cta-strip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.js:not(.reduced) .cta-strip { animation: ctaBlue 0.55s ease 2.6s forwards; }
html.reduced:not(.is-thumb) .cta-strip { background: #0095f6; color: #fff; border-bottom-color: #0095f6; }
@keyframes ctaBlue { to { background: #0095f6; color: #fff; border-bottom-color: #0095f6; } }

.actions { position: relative; display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 12px; }
.actions .spacer { flex: 1 1 auto; }
.act { display: block; width: 25px; height: 25px; padding: 0; border: 0; background: none; color: #000; cursor: pointer; }
.act svg { stroke: currentColor; }
.act--like.is-on { color: #ff3040; }
.act--like.is-on svg, .act--save.is-on svg { fill: currentColor; }
.act--like.is-on svg { animation: likePop 0.32s ease; }
@keyframes likePop { 50% { transform: scale(1.22); } }

.likes { padding: 0 14px; font-size: 14px; font-weight: 600; color: #000; }
.caption { margin: 0; padding: 5px 14px 0; font-size: 14px; line-height: 18px; color: #000; }
.caption b { font-weight: 600; }
.caption .more { padding: 0; border: 0; background: none; font: inherit; color: #737373; cursor: pointer; }
.caption .cap-full { display: none; }
.caption.is-open .cap-short, .caption.is-open .more { display: none; }
.caption.is-open .cap-full { display: inline; }
.comments { margin: 0; padding: 6px 14px 0; font-size: 14px; color: #737373; }
.addc { display: flex; align-items: center; gap: 9px; padding: 9px 14px 18px; font-size: 13px; color: #8e8e8e; }
.addc .tab-av { width: 24px; height: 24px; }
.likes { margin: 0; }

.tabbar {
  position: relative; flex: none; height: 83px; display: flex; justify-content: space-around; align-items: flex-start;
  padding: 11px 6px 0; background: #fff; border-top: 0.5px solid #dbdbdb;
}
.tab { display: block; width: 26px; height: 26px; }
.tab--home svg path { fill: #000; }
.tab-av { display: block; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #e3e6e9, #b9c0c7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }

/* ---------------------------------------------------------------- callout */
/* A hand-drawn note beside the phone, pointing at the thing to tap. */
.callout {
  position: absolute; left: 100%; top: var(--cy, 50%); z-index: 2; display: flex; align-items: center;
  margin-left: 4px; transform: translateY(-50%); pointer-events: none; transition: opacity 0.35s var(--ease);
}
.callout__ln { flex: none; width: 96px; height: 60px; overflow: visible; }
.callout__ln path { fill: none; stroke: var(--accent-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.callout__ln .ln { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.8s var(--ease) 0.35s; }
.callout__ln .ar { opacity: 0; transition: opacity 0.3s ease 1.15s; }
.bubble {
  position: relative; margin-left: 2px; padding: 10px 16px 9px; border-radius: 14px; white-space: nowrap;
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
  font-family: var(--display); font-weight: 600; font-size: calc(16px + var(--bump)); line-height: 1.1;
  letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-3deg);
  box-shadow: 0 16px 36px -14px var(--accent-glow); opacity: 0; transition: opacity 0.4s ease 0.15s;
}
.bubble::before { content: ""; position: absolute; left: -7px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 0; border-right-color: var(--accent); }
.reveal.is-in .callout__ln .ln { stroke-dashoffset: 0; }
.reveal.is-in .callout__ln .ar, .reveal.is-in .bubble { opacity: 1; }
html.no-js .callout__ln .ln, html.reduced .callout__ln .ln { stroke-dashoffset: 0; transition: none; }
html.no-js .callout__ln .ar, html.reduced .callout__ln .ar, html.no-js .bubble, html.reduced .bubble { opacity: 1; transition: none; }

@media (max-width: 979px) {
  .phone-wrap { margin-bottom: 58px; }
  .callout { left: 50%; top: calc(100% + 14px); margin: 0; transform: translateX(-50%); }
  .callout__ln { display: none; }
  .bubble { margin: 0; transform: rotate(-2deg); font-size: calc(14px + var(--bump)); padding: 9px 14px 8px; }
  .bubble::before { left: 50%; top: -7px; margin: 0 0 0 -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--accent-2); }
}

/* ------------------------------------------- thumbnail still / reduced motion */
html.is-thumb .sa__intro, html.is-thumb .callout { display: none !important; }
html.is-thumb .phone-wrap { margin-bottom: 0; }
html.is-thumb *, html.is-thumb *::before, html.is-thumb *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .callout__ln .ln { stroke-dashoffset: 0; transition: none; }
  .callout__ln .ar, .bubble { opacity: 1; transition: none; }
  .act--like.is-on svg { animation: none; }
}