/* ==========================================================================
   SG Tile Remodeling — Home page: 3D effects + Instagram showcase (styles)

   Loaded only by index.html. Every rule below is gated behind html.h3d /
   html.h3d-gallery, classes that home-3d.js adds only when the browser
   supports the effects and the visitor has not asked for reduced motion.
   Without those classes the page looks exactly as it did before.
   ========================================================================== */

/* ---------- Shared ---------- */
.h3d-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #070d18; opacity: 0;
}

/* ---------- 1. Hero: camera push-in, project cards fly past ---------- */
.h3d .hero { perspective: 1200px; perspective-origin: 50% 70%; }
.h3d .hero-content { transform-origin: 50% 100%; }
.h3d .hero-swatches { perspective: 1000px; perspective-origin: 80% 50%; }
.h3d .swatch-float { transform-origin: 50% 50%; }

/* ---------- 2. Project gallery: 3D arc on a tile floor (swipe on touch, arrows on desktop) ---------- */
.h3d-gallery .portfolio-strip {
  display: block; position: relative; height: auto;
  min-height: 0; max-height: none;
  background: #070d18;
}

.h3d-pin {
  --u: 1vh;
  --sh: clamp(360px, calc(100 * var(--u)), 920px);                 /* height of the showcase */
  --floor-h: clamp(70px, calc(.2 * var(--sh)), 210px);
  --ph: clamp(200px, calc(var(--sh) - 84px - var(--floor-h) - 20px), 640px);
  --pw: calc(var(--ph) * .70);
  position: relative; overflow: hidden; height: var(--sh);
  touch-action: pan-y pinch-zoom;                                   /* vertical scroll stays native; sideways swipes are ours */
  background: radial-gradient(120% 95% at 50% 36%, #1c3358 0%, #10213d 36%, #070d18 100%);
}
@supports (height: 100svh) {
  .h3d-pin { --u: 1svh; }
}
@media (max-width: 820px) {
  .h3d-pin {
    --ph: clamp(200px, calc(var(--sh) - 84px - var(--floor-h) - 28px), 640px);
    --pw: min(calc(var(--ph) * .74), 74vw);
  }
}

/* soft spotlight behind the active panel */
.h3d-bg { position: absolute; inset: 0; pointer-events: none; }
.h3d-bg::before {
  content: ""; position: absolute; left: 50%; top: 44%;
  width: min(900px, 120vw); height: min(900px, 120vw); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(120, 165, 235, .20), rgba(120, 165, 235, 0) 70%);
}

/* oversized outlined category name, sliding slower than the panels (depth) */
.h3d-words { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 700px) { .h3d-words { display: none; } }
.h3d-words span {
  position: absolute; left: 50%; top: 43%; white-space: nowrap;
  font-family: var(--sans-display, "Manrope", sans-serif); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3.4rem, 12.5vw, 12rem); line-height: 1; letter-spacing: -.02em;
  color: rgba(250, 250, 248, .03); -webkit-text-stroke: 2px rgba(250, 250, 248, .29);
  opacity: 0; will-change: transform, opacity;
}

/* tile floor receding into the distance — slides sideways as the arc turns */
.h3d-floor-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor-h);
  overflow: hidden; pointer-events: none;
  perspective: 420px; perspective-origin: 50% -30%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
}
.h3d-floor {
  position: absolute; left: 50%; top: 0; width: 360%; height: 600%; margin-left: -180%;
  transform-origin: 50% 0; transform: rotateX(72deg);
  background-image:
    linear-gradient(rgba(250, 250, 248, .20) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(250, 250, 248, .20) 1.5px, transparent 1.5px);
  background-size: 96px 96px; background-position: center top;
  will-change: transform;
}

/* The stage is a flat perspective box: every panel carries its own 3D transform
   (projected through this perspective). Keeping the stage out of a preserve-3d
   context is what lets browsers hit-test the tilted side panels for clicks. The
   z-index keeps the stage its own stacking layer (also in lite mode, where there is
   no perspective), so the panels can never climb above the arrows and progress ticks. */
.h3d-stage {
  position: absolute; z-index: 1; left: 0; right: 0; top: 84px; bottom: calc(var(--floor-h) - 22px);
  perspective: 1700px; perspective-origin: 50% calc(.44 * var(--sh) - 84px);
}

/* each project becomes a free-standing panel */
.h3d-gallery .portfolio-col {
  position: absolute; left: 50%; top: 50%;
  width: var(--pw); height: var(--ph);
  margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);
  flex: none; border: 0; border-radius: 14px; overflow: hidden;
  backface-visibility: hidden; transform-origin: 50% 50%;
  box-shadow: 0 44px 80px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .10);
  will-change: transform, opacity;
}
.h3d-gallery .portfolio-col + .portfolio-col { border: 0; }
.h3d-gallery .portfolio-col:hover,
.h3d-gallery .portfolio-col:focus-within { flex-grow: 0; }
.h3d-gallery .portfolio-col img { border-width: 5px; }

.h3d-gallery .portfolio-label {
  inset: auto 0 0 0; align-items: flex-end; justify-content: flex-start;
  padding: 1.6rem 1.5rem 3.5rem;
}
.h3d-gallery .portfolio-label span {
  writing-mode: horizontal-tb; transform: none;
  font-size: clamp(.82rem, calc(var(--pw) * .075), 1.9rem); line-height: 1.1;
}
.h3d-gallery .portfolio-cta {
  left: 1.5rem; bottom: 1.35rem; opacity: 0; transform: translateY(10px);
}
.h3d-gallery .portfolio-col.is-active .portfolio-cta { opacity: 1; transform: none; }
.h3d-gallery .portfolio-cta { white-space: nowrap; }
/* phones held sideways: panels are tiny, so keep just the name */
@media (max-height: 460px) {
  .h3d-gallery .portfolio-cta { display: none; }
  .h3d-gallery .portfolio-label { padding: 1rem; }
}

.h3d-dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #070d18; opacity: 0; }
.h3d-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .0;
  background: linear-gradient(108deg, transparent 32%, rgba(255, 255, 255, .26) 48%, rgba(255, 255, 255, .06) 54%, transparent 68%);
  will-change: transform;
}

/* progress ticks */
.h3d-rail {
  position: absolute; left: 50%; bottom: 22px; z-index: 5; display: flex; gap: 8px;
  transform: translateX(-50%); pointer-events: none;
}
.h3d-rail i {
  display: block; width: 26px; height: 3px; border-radius: 2px;
  background: rgba(250, 250, 248, .28);
  transition: width .35s var(--ease-out, ease-out), background-color .35s var(--ease-out, ease-out);
}
.h3d-rail i.on { width: 56px; background: #fff; }

/* ---------- Controls: arrows (desktop) and swipe hint (touch) ---------- */
.h3d-arrow {
  position: absolute; z-index: 6; padding: 0; margin: -28px 0 0;
  top: calc(84px + (var(--sh) - 84px - (var(--floor-h) - 22px)) / 2);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(7, 13, 24, .55); border: 1px solid rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .35s var(--ease-out, ease-out), background-color .3s ease, color .3s ease,
              border-color .3s ease, box-shadow .35s var(--ease-out, ease-out);
}
.h3d-arrow--prev { left: clamp(10px, 2.6vw, 44px); }
.h3d-arrow--next { right: clamp(10px, 2.6vw, 44px); }
.h3d-arrow svg { position: relative; transition: transform .35s var(--ease-out, ease-out); }
/* soft ring that keeps pulsing so the arrows invite a click */
.h3d-arrow::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55); pointer-events: none;
  animation: h3dPing 3.4s ease-out infinite;
}
.h3d-arrow--next::after { animation-delay: 1.7s; }
@keyframes h3dPing {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.h3d-arrow:hover {
  background: #fff; color: #10213d; border-color: #fff; transform: scale(1.1);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .14), 0 16px 34px -10px rgba(0, 0, 0, .75);
}
.h3d-arrow--prev:hover svg { transform: translateX(-3px); }
.h3d-arrow--next:hover svg { transform: translateX(3px); }
.h3d-arrow:active { transform: scale(.93); }
.h3d-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (pointer: coarse) { .h3d-arrow { display: none; } }

.h3d-hint {
  position: absolute; left: 50%; bottom: 46px; z-index: 5; display: none;
  transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  font: 700 .68rem/1 var(--sans-display, "Manrope", sans-serif);
  letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
  transition: opacity .6s ease;
}
.h3d-hint i { display: inline-block; font-style: normal; font-size: 1.25rem; line-height: .5; vertical-align: -.1em; }
.h3d-hint i:first-child { animation: h3dNudgeL 1.7s ease-in-out infinite; }
.h3d-hint i:last-child  { animation: h3dNudgeR 1.7s ease-in-out infinite; }
@keyframes h3dNudgeL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@keyframes h3dNudgeR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@media (pointer: coarse) { .h3d-hint { display: block; } }
.h3d-hint.is-gone { opacity: 0; }

/* Lite mode — switched on by the script only when a device cannot keep the 3D
   smooth (or the visitor has Data Saver on): same panels, flatter and cheaper. */
.h3d-lite .h3d-stage { perspective: none; }
.h3d-lite .h3d-words,
.h3d-lite .h3d-floor-wrap,
.h3d-lite .h3d-glare { display: none; }
.h3d-lite .h3d-arrow { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- 3. Instagram showcase (takes the place of the old About preview) ----------
   Everything outside the .h3d-insta rules is a flat, static picture that works without
   JavaScript and with reduced motion. home-3d.js adds .h3d-insta to switch on the 3D scene. */
.insta-promo {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(58% 78% at 74% 48%, rgba(74, 128, 220, .30) 0%, rgba(74, 128, 220, 0) 70%),
    radial-gradient(130% 110% at 78% 40%, #1c3358 0%, #10213d 40%, #070d18 100%);
}
.insta-promo::before {                                   /* faint tile grid, a nod to the trade */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(250, 250, 248, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 248, .035) 1px, transparent 1px);
  background-size: 76px 76px; background-position: center;
}
.insta-promo__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; }
@media (min-width: 900px) { .insta-promo__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 2rem; } }
.insta-promo__copy h2 { font-size: clamp(2.2rem, 4.3vw, 3.4rem); line-height: 1.05; max-width: 19ch; color: #fff; }
.insta-promo__copy .lede { max-width: 44ch; }
.insta-promo__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2.1rem; }
.insta-promo__cta .btn svg { flex: none; }
.insta-promo__note { font-size: .84rem; line-height: 1.4; color: rgba(250, 250, 248, .62); max-width: 21ch; }

/* the picture: a phone showing the profile, two "posts" floating beside it */
.insta-stage {
  --w: 268px;                                            /* phone width — every size inside is derived from it */
  --za: calc(var(--w) * .34); --zb: calc(var(--w) * .485); --zh: calc(var(--w) * .67);   /* how far the two posts and the heart float in front of the phone */
  position: relative; display: block; width: 100%; max-width: 560px; height: 600px; margin-inline: auto;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 899px) {
  .insta-stage { --w: 236px; --za: calc(var(--w) * .26); --zb: calc(var(--w) * .32); --zh: calc(var(--w) * .45); height: 540px; }
}
@media (max-width: 400px) { .insta-stage { --w: 214px; height: 500px; } }
@media (min-width: 900px) and (max-width: 1399px) {      /* narrow two-column layout: the picture scales with the window; less depth so nothing swings past the screen edge */
  .insta-stage { --w: clamp(212px, 23.5vw, 268px); --za: calc(var(--w) * .28); --zb: calc(var(--w) * .34); --zh: calc(var(--w) * .5); height: calc(var(--w) * 2.24); }
}
.ig-scene, .ig-rig, .ig-float { position: absolute; inset: 0; }

.ig-phone {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: var(--w); height: calc(var(--w) * 2.06); margin: calc(var(--w) * -1.03) 0 0 calc(var(--w) / -2);
  padding: calc(var(--w) * .034); border-radius: calc(var(--w) * .165);
  font-size: calc(var(--w) / 27);
  background: linear-gradient(152deg, #5b6579 0%, #1a2030 16%, #06080c 48%, #1b2232 84%, #4d576b 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .20), 0 0 0 1px #000,
              0 52px 72px -34px rgba(0, 0, 0, .9), 0 0 70px -12px rgba(80, 130, 220, .25);
}
.ig-phone::before, .ig-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#323a4c, #0d1017); }
.ig-phone::before { left: -2.5px; top: 18%; height: 6.5%; box-shadow: 0 calc(var(--w) * .2) 0 #1b2130; }
.ig-phone::after  { right: -2.5px; top: 25%; height: 11%; }

.ig-screen {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--w) * .135); background: #0b1120; color: #f4f6fa;
  font-family: var(--sans-body, "Inter", sans-serif); line-height: 1.25;
}
.ig-island { position: absolute; z-index: 4; top: .9em; left: 50%; width: 8.4em; height: 2.3em; margin-left: -4.2em; border-radius: 1.2em; background: #000; }
.ig-status { position: absolute; z-index: 3; top: 1.05em; left: 2.4em; right: 2.4em; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1.15em; }
.ig-status i { position: relative; display: block; width: 2.1em; height: 1em; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: .35em; }
.ig-status i::after { content: ""; position: absolute; inset: 1.5px 32% 1.5px 1.5px; background: #fff; border-radius: .15em; }
.ig-top { position: absolute; top: 4.3em; left: 0; right: 0; display: flex; align-items: center; gap: .7em; padding: 0 1.4em; }
.ig-top b { font-size: 1.3em; font-weight: 700; letter-spacing: -.01em; }
.ig-top svg { flex: none; width: 1.7em; height: 1.7em; }
.ig-top .ig-dots { margin-left: auto; }
.ig-profile { position: absolute; top: 8.3em; left: 1.5em; right: 1.5em; display: flex; align-items: center; gap: 1.3em; }
.ig-ava { position: relative; flex: none; width: 7.2em; height: 7.2em; }
.ig-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, #fff, #6aa5ff, #1d4fb3, #c4dbff, #fff); }
.ig-ava img { position: absolute; inset: .36em; width: calc(100% - .72em); height: calc(100% - .72em); border: .3em solid #0b1120; border-radius: 50%; background: #fff; object-fit: cover; }
.ig-id b { display: block; font-size: 1.3em; font-weight: 700; letter-spacing: -.01em; }
.ig-id span { display: block; margin-top: .25em; font-size: 1.02em; color: #9fb0cc; }
.ig-actions { position: absolute; top: 16.9em; left: 1.5em; right: 1.5em; display: flex; gap: .7em; }
.ig-follow, .ig-msg { position: relative; display: grid; place-items: center; height: 2.9em; border-radius: .8em; font-weight: 700; font-size: 1.1em; }
.ig-follow { flex: 1.25; background: #2f7df6; color: #fff; }
.ig-msg { flex: 1; background: #263044; }
.ig-tabs { position: absolute; top: 20.9em; left: 0; right: 0; display: flex; border-top: 1px solid rgba(255, 255, 255, .10); }
.ig-tabs span { flex: 1; display: grid; place-items: center; height: 3.3em; color: #7f8da6; border-bottom: 1.5px solid transparent; }
.ig-tabs span:first-child { color: #fff; border-bottom-color: #fff; }
.ig-tabs svg { width: 1.7em; height: 1.7em; }
.ig-feed { position: absolute; top: 24.2em; left: 0; right: 0; bottom: 4.8em; overflow: hidden; }
.ig-feed img { width: 100%; max-width: none; height: auto; }
.ig-nav {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4.8em; padding: 0 .6em .5em;
  display: flex; align-items: center; justify-content: space-around;
  background: #0b1120; border-top: 1px solid rgba(255, 255, 255, .10);
}
.ig-nav svg { width: 1.9em; height: 1.9em; }
.ig-me { width: 1.9em; height: 1.9em; border: 1.5px solid #fff; border-radius: 50%; overflow: hidden; background: #fff; }
.ig-me img { width: 100%; height: 100%; object-fit: cover; }
.ig-glare {
  position: absolute; z-index: 5; inset: 0 -40%; pointer-events: none; opacity: .0;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .14) 50%, transparent 62%);
}

.ig-card { position: absolute; z-index: 3; width: calc(var(--w) * .62); font-size: calc(var(--w) / 27); }
.ig-card--a { left: -5%; top: 5%; transform: rotate(-5deg); }
.ig-card--b { right: -4%; bottom: 4%; transform: rotate(4deg); }
@media (max-width: 899px) {                               /* phones: smaller posts, kept off the profile header and a little in from the screen edges */
  .ig-card { width: calc(var(--w) * .46); }
  .ig-card--a { left: 3%; top: auto; bottom: 1%; }
  .ig-card--b { right: 3%; top: 40%; bottom: auto; }
}
@media (min-width: 900px) and (max-width: 1399px) {       /* narrow two-column layout: posts a little smaller and tucked in, so neither is cut by the screen edge */
  .ig-card { width: calc(var(--w) * .56); }
  .ig-card--a { left: 1%; }
  .ig-card--b { right: 4%; }
}
.ig-card__in {
  overflow: hidden; border-radius: 1.4em; background: #0f1729; color: #f4f6fa;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .13), 0 34px 50px -26px rgba(0, 0, 0, .85);
}
.ig-card__top { display: flex; align-items: center; gap: .7em; height: 3.3em; padding: 0 1em; font-size: 1.05em; font-weight: 700; }
.ig-card__top img { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: #fff; }
.ig-card__top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) { .ig-card__top { height: 4.1em; padding: 0 .7em; gap: .5em; font-size: .8em; } }   /* the narrow post still shows the whole handle */
.ig-card__photo { position: relative; aspect-ratio: 1; overflow: hidden; background: #1c2740; }
.ig-card__photo img { position: absolute; top: 0; left: 0; width: 200%; max-width: none; height: 100%; object-fit: cover; }
.ig-card--b .ig-card__photo img { left: -100%; }
.ig-card__bar { display: flex; align-items: center; gap: 1.1em; height: 3.3em; padding: 0 1em; }
.ig-card__bar svg { width: 1.9em; height: 1.9em; }
.ig-card__bar svg:last-child { margin-left: auto; }
.ig-heart {
  position: absolute; z-index: 4; right: 13%; top: 8%; display: grid; place-items: center;
  width: calc(var(--w) * .2); height: calc(var(--w) * .2); border-radius: 50%;
  background: #fff; color: #ff4d6a; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7);
}
.ig-heart svg { width: 52%; height: 52%; }

/* ---- the 3D scene (only when home-3d.js switched it on) ---- */
.h3d-insta .ig-scene { perspective: 1300px; perspective-origin: 50% 46%; }
.h3d-insta .ig-rig, .h3d-insta .ig-float { transform-style: preserve-3d; }
.h3d-insta .ig-rig { will-change: transform; }
.h3d-insta .ig-card--a { transform: translateZ(var(--za)) rotateY(16deg) rotateZ(-5deg); }
.h3d-insta .ig-card--b { transform: translateZ(var(--zb)) rotateY(-16deg) rotateZ(4deg); }
.h3d-insta .ig-heart   { transform: translateZ(var(--zh)); }
.h3d-insta .ig-glare   { opacity: 1; }
/* hovering the picture (mouse only, so a tap on a phone never leaves it stuck): the layers pull apart a little
   (individual transform properties, so they add to the above) */
@media (hover: hover) {
  .h3d-insta .ig-phone, .h3d-insta .ig-card, .h3d-insta .ig-heart {
    transition: translate .6s var(--ease-out, ease-out), scale .6s var(--ease-out, ease-out);
  }
  .h3d-insta .insta-stage:hover .ig-phone  { translate: 0 0 calc(var(--w) * .097); }
  .h3d-insta .insta-stage:hover .ig-card--a { translate: calc(var(--w) * -.045) calc(var(--w) * -.03) calc(var(--w) * .134); }
  .h3d-insta .insta-stage:hover .ig-card--b { translate: calc(var(--w) * .045) calc(var(--w) * .03) calc(var(--w) * .134); }
  .h3d-insta .insta-stage:hover .ig-heart   { scale: 1.2; }
}

/* idle motion — only transform/opacity, so it runs on the GPU; paused whenever the section is off screen */
.h3d-insta .ig-float   { animation: igFloat 9s ease-in-out infinite; }
.h3d-insta .ig-card__in { animation: igBob 6.5s ease-in-out infinite; }
.h3d-insta .ig-card--b .ig-card__in { animation-duration: 7.6s; animation-delay: -2.4s; }
.h3d-insta .ig-heart svg { animation: igBeat 2.8s ease-in-out infinite; }
.h3d-insta .ig-ring    { animation: igSpin 7s linear infinite; }
.h3d-insta .ig-feed img { animation: igFeed 12s ease-in-out infinite alternate; }
.h3d-insta .ig-follow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid #78aaff; animation: igPing 2.8s ease-out infinite;
}
@keyframes igFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(2deg) rotateY(-7deg); }
  50%      { transform: translate3d(0, -12px, 0) rotateX(-1.5deg) rotateY(7deg); }
}
@keyframes igBob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes igBeat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.22); } 40% { transform: scale(.96); } }
@keyframes igSpin { to { transform: rotate(360deg); } }
@keyframes igFeed { from { transform: translateY(0); } to { transform: translateY(-26%); } }
@keyframes igPing { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(1.28, 1.5); opacity: 0; } }
.h3d-insta:not(.is-live) .ig-float, .h3d-insta:not(.is-live) .ig-card__in, .h3d-insta:not(.is-live) .ig-heart svg,
.h3d-insta:not(.is-live) .ig-ring, .h3d-insta:not(.is-live) .ig-feed img, .h3d-insta:not(.is-live) .ig-follow::after {
  animation-play-state: paused;
}
.insta-promo :focus-visible { outline-color: #fff; }                      /* the default navy ring would vanish on the navy background */

/* lite mode (slow device / Data Saver): same picture, no perspective, nothing moving */
.h3d-lite .ig-scene { perspective: none; }
.h3d-lite .ig-rig, .h3d-lite .ig-float { transform: none !important; animation: none !important; }
.h3d-lite .ig-card--a { transform: rotate(-5deg) !important; }
.h3d-lite .ig-card--b { transform: rotate(4deg) !important; }
.h3d-lite .ig-heart { transform: none !important; }
.h3d-lite .ig-card__in, .h3d-lite .ig-heart svg, .h3d-lite .ig-ring, .h3d-lite .ig-feed img, .h3d-lite .ig-follow::after,
.h3d-lite .ig-glare { animation: none !important; }
.h3d-lite .ig-glare { display: none; }