/* About and offer content of the VR-project studio (client sheets, 26.10.2026).
   Shared by the home sections and the /o-nas/ and /oferta/ pages. */

.about-text strong, .page-lead strong { color: #f1e8fa; font-weight: 550; }
.first-badge {
  display: inline-flex; align-items: center; gap: 11px; margin: 4px 0 22px;
  padding: 10px 16px; border: 1px solid rgba(201, 160, 247, .35); border-radius: 100px;
  background: linear-gradient(130deg, rgba(166, 112, 230, .2), rgba(120, 76, 180, .06));
  font-size: 12px; line-height: 1.5; color: #f0e4fb;
}
.about-text .first-badge { color: #f0e4fb; }
.page-hero .page-lead + .page-lead { margin-top: 14px; }
.page-hero .first-badge { margin: 22px 0 0; }
.block-title {
  margin: 70px 0 26px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.04em;
}

/* Numbered badge used by the steps and the offer rows. */
.step-badge {
  display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  font-size: 18px; font-weight: 600; color: #fff;
  background: radial-gradient(circle at 35% 30%, #b98cf3, #6c3fb4 70%);
  box-shadow: 0 0 0 6px rgba(160, 108, 230, .12), 0 8px 26px rgba(122, 70, 200, .35);
}

/* Three steps, one above the other. */
.process-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.process-step {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
  gap: 40px; padding: 18px; border: 1px solid var(--line); border-radius: 28px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .05), rgba(224, 202, 255, .015));
}
.process-step:nth-child(even) .process-step__media { order: 2; }
.process-step__media {
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 60%, rgba(150, 95, 220, .28), rgba(30, 18, 45, .6) 70%);
}
.process-step__media img { width: 100%; height: 100%; object-fit: cover; }
.process-step__body { display: grid; justify-items: start; gap: 20px; padding: 10px 20px 10px 0; }
.process-step:nth-child(even) .process-step__body { padding: 10px 0 10px 20px; }
.process-step h3, .offer-row h3 {
  margin: 0; font-size: clamp(24px, 2.5vw, 36px); font-weight: 450; line-height: 1.14; letter-spacing: -.045em;
}
.process-step h3 span, .offer-row h3 span { display: block; color: #c5afe6; font-weight: 400; }
/* Step 3 on phones (client, 2026-11-02): two lines, 'Pokaż mieszkanie klientowi' / 'w VR dzięki All Mirage.'; wider screens keep
   the white phrase on one line and the violet one below it. */
@media (min-width: 701px) { .process-step h3 br.phone-break { display: none; } }
/* Side by side, each step's heading takes two lines: the white phrase, then the violet one. The text column is a little wider
   than the picture and the type follows the card's width, so the longest violet line (step 1, about 23.25em) always fits;
   very narrow windows wrap as before. */
@media (min-width: 901px) {
  .process-step { container-type: inline-size; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .process-step:nth-child(even) { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .process-step h3 { font-size: clamp(22px, calc(2.25cqi - 1.8px), 36px); }
}
.icon-list, .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.icon-list li, .check-list li { display: flex; align-items: flex-start; gap: 13px; font-size: 14px; line-height: 1.6; color: #d9cfe4; }
.icon-list svg { width: 21px; height: 21px; margin-top: 1px; color: #c8a9f2; }
.check-list svg { width: 20px; height: 20px; margin-top: 1px; color: #c8a9f2; }
.check-list small { display: block; font-size: 12px; color: #a998ba; }

/* Offer: four products stacked vertically. */
.offer-stack { display: grid; gap: 18px; }
.offer-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; gap: 0;
  border-radius: 28px; overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.offer-row__media {
  position: relative; min-height: 300px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, rgba(150, 95, 220, .28), rgba(30, 18, 45, .6) 70%);
}
.offer-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-row__tag {
  position: absolute; top: 16px; right: 16px; padding: 8px 13px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(20, 12, 30, .45);
  font-size: 13px; font-weight: 600; color: #fff;
}
.offer-row__body { display: grid; align-content: center; justify-items: start; gap: 16px; padding: 34px 38px; }
.offer-row__lead { margin: -4px 0 2px; font-size: 15px; color: #d7c9e6; }
.offer-row__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.offer-price {
  margin: 0; padding: 12px 22px; border-radius: 16px; font-size: 14px; color: #f1e7fb;
  background: linear-gradient(130deg, #8a5ad6, #5d3a9c); box-shadow: 0 8px 26px rgba(120, 72, 196, .3);
}
.offer-price strong { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-right: 4px; }
.offer-extra {
  padding: 8px 14px; border: 1px solid rgba(201, 160, 247, .45); border-radius: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e5d3fa;
}
.offer-row__actions .button { min-height: 46px; gap: 10px; padding: 0 20px; }
.offer-row__actions .button svg { width: 18px; height: 18px; }
.button-ghost { color: #f4edf9; border-color: rgba(214, 181, 255, .45); background: rgba(166, 112, 230, .12); }
.button-ghost:hover { background: rgba(166, 112, 230, .24); }

/* One "Zamów" for the whole offer. */
.offer-summary {
  display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); align-items: center; gap: 34px;
  margin-top: 26px; padding: 28px 32px; border-radius: 28px;
  background: linear-gradient(140deg, rgba(146, 99, 196, .2), rgba(83, 51, 113, .1) 65%, rgba(224, 199, 247, .04));
}
.offer-summary__lead { display: flex; align-items: center; gap: 18px; }
.offer-summary__icon, .benefit-list__icon, .feature-strip__icon, .mission__icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(201, 160, 247, .35); background: rgba(166, 112, 230, .14); color: #e2cbff;
}
.offer-summary h3 { margin: 8px 0 0; font-size: 20px; font-weight: 450; line-height: 1.3; letter-spacing: -.03em; }
.offer-summary__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offer-summary__list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #ddd2e8; white-space: nowrap; }
.offer-summary__list svg { width: 18px; height: 18px; color: #c8a9f2; }
.offer-summary__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 20px; }
.offer-summary__cta p { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; color: #e7dcf2; }
.offer-summary__cta p strong { display: block; font-weight: 650; color: #fff; }

/* Benefits, features, audience and mission (subpages). */
.benefit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.benefit-list li { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.benefit-list h3, .feature-strip h3, .audience-grid h3 { margin: 0 0 4px; font-size: 17px; font-weight: 550; letter-spacing: -.02em; }
.benefit-list p, .feature-strip p, .audience-grid p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.feature-strip {
  list-style: none; margin: 0; padding: 32px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  border-bottom: 1px solid var(--line);
}
.feature-strip li { display: flex; align-items: center; gap: 15px; }
.audience-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.audience-grid li { display: grid; justify-items: start; gap: 12px; padding: 26px; border-radius: 24px; }
.mission {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px;
  margin: 70px 0 0; padding: 30px 34px; border-radius: 28px;
}
.mission__copy h2 { margin: 8px 0 4px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 450; letter-spacing: -.04em; }
.mission__copy p:not(.eyebrow) { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.mission__sign { display: grid; gap: 6px; max-width: 230px; padding-left: 26px; border-left: 1px solid var(--line); }
.mission__sign strong { font-size: 18px; font-weight: 550; }
.mission__sign span { font-size: 13px; line-height: 1.6; color: #c9b9da; }
.public-page .page-section .offer-summary, .public-page > .page-main > .offer-summary { margin-top: 70px; }
.contact-experience .contact-office--note { margin-top: 2px; }

@media (max-width: 1100px) {
  .offer-summary { grid-template-columns: 1fr 1fr; }
  .offer-summary__cta { grid-column: 1 / -1; justify-content: space-between; }
  .feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .process-step, .offer-row { grid-template-columns: 1fr; }
  .process-step:nth-child(even) .process-step__media { order: 0; }
  .process-step { gap: 22px; padding: 14px; }
  .process-step__body, .process-step:nth-child(even) .process-step__body { padding: 4px 8px 12px; }
  .offer-row__media { min-height: 0; aspect-ratio: 3 / 2; }
  .offer-row__body { padding: 26px 24px 28px; }
  .benefit-list, .audience-grid { grid-template-columns: 1fr; }
  .mission { grid-template-columns: auto minmax(0, 1fr); }
  .mission__sign { grid-column: 1 / -1; max-width: none; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .block-title { margin-top: 48px; }
  .step-badge { width: 40px; height: 40px; font-size: 16px; }
  .process-step h3, .offer-row h3 { font-size: 24px; }
  .process-step h3.process-step__title--flow span { display: inline; }
  .icon-list li, .check-list li { font-size: 13px; }
  .offer-summary { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .offer-summary__cta { justify-content: flex-start; }
  .feature-strip { grid-template-columns: 1fr; gap: 18px; }
  .first-badge { font-size: 11px; }
}
@media (max-width: 350px) { .process-step h3.process-step__title--flow { font-size: 21px; } }

/* The way on to the page is always a real button beside SPACER VR, not a quiet text link. */
#stage .story-more {
  min-height: 76px;
  padding-inline: 34px 30px;
  gap: 40px;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-weight: 600;
}
#stage .story-more svg { width: 24px; height: 24px; }
/* The two buttons glow and breathe for as long as they are on screen, also while the film scrolls under them.
   They stop only when the copy around them is hidden. */
#stage:is([data-state=hero], [data-state=final], [data-chapter=put-on], [data-chapter=buildings], [data-chapter=push-in], [data-chapter=eyes]):not(.is-copy-gone) :is(.hero-walk, .story-more) { animation: cta-pulse 2.6s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(160, 134, 255, .6), 0 0 var(--cta-blur-a, 14px) var(--cta-spread-a, 2px) rgba(120, 84, 255, .45); }
  50% { box-shadow: 0 0 0 2px rgba(176, 150, 255, .98), 0 0 var(--cta-blur-b, 32px) var(--cta-spread-b, 9px) rgba(120, 84, 255, .88); }
}
@media (prefers-reduced-motion: reduce) {
  #stage :is(.hero-walk, .story-more) { box-shadow: 0 0 0 2px rgba(176, 150, 255, .9), var(--cta-rest, 0 0 22px 5px rgba(120, 84, 255, .65)); }
}
/* Between the pads on a touch screen: the labels beside them are what to press. */
.touch-use {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 18px; border-radius: 17px;
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: rgba(26, 20, 48, .88); box-shadow: inset 0 0 0 1px rgba(176, 156, 255, .6), 0 2px 10px rgba(0, 0, 0, .25);
}
#stage .story-more:hover { background: rgba(255, 255, 255, .24); }
@media (max-width: 700px) {
  /* keep the pills clear of the floating "Do góry" button */
  #stage .hero-actions { padding-right: 52px; gap: 12px; }
}

/* Story copy: the opening headline, a second one until the camera heads for the headset, nothing in the other scenes. */
#stage[data-state=film]:is([data-chapter=put-on], [data-chapter=buildings], [data-chapter=push-in], [data-chapter=eyes]) .hero-copy { opacity: var(--story-copy, 1); visibility: visible; pointer-events: auto; }
#stage[data-state=film].is-copy-gone .hero-copy { visibility: hidden; pointer-events: none; }
#stage .chapter-copy { display: none; }
#hero-title { transition: text-shadow .6s; }
/* close up the headline crosses his arm and hand */
#stage:is([data-chapter=push-in], [data-chapter=eyes]) #hero-title { text-shadow: 0 2px 18px rgba(30, 10, 50, .6); }
#hero-title.is-swapped { animation: hero-title-in .6s ease-out; }
@keyframes hero-title-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-walk { min-height: 76px; padding-inline: 40px 34px; gap: 64px; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: #2a1f45; }
.hero-walk svg { width: 24px; height: 24px; }
.stage-bottom .scroll-cue {
  justify-self: start;
  gap: 16px;
  padding: 8px 28px 8px 16px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(24, 14, 36, .38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(10, 4, 20, .25);
  text-shadow: 0 1px 3px rgba(20, 10, 30, .45);
}
/* In the apartment the controller labels and the drag hint fill the bottom: a smaller cue fits under them. */
#stage[data-state=interior] .stage-bottom .scroll-cue { gap: 8px; padding: 3px 16px 3px 8px; font-size: 13px; }
#stage[data-state=interior] .scroll-mouse { height: 30px; }
/* A hand rolls the wheel of a mouse down (on touch screens a finger alone swipes up). The box keeps the drawing's
   proportions, so the rules below only set its height. */
.scroll-mouse { flex: none; display: block; height: 60px; aspect-ratio: 88 / 120; }
.scroll-mouse img { display: block; width: 100%; height: 100%; }
.scroll-mouse > svg { display: none; width: 100%; height: 100%; overflow: visible; }
.scroll-mouse__nail { fill: #fff; stroke: rgba(58, 42, 85, .5); stroke-width: .8; }
.scroll-mouse__crease { fill: none; stroke: rgba(58, 42, 85, .45); stroke-width: .8; stroke-linecap: round; }
.scroll-mouse__finger { filter: drop-shadow(0 1px 1.5px rgba(30, 10, 50, .65)); animation: scroll-swipe 1.8s ease-in-out infinite; }
/* the drawing is flipped: a larger offset lifts the finger, and the swipe passes the middle of the icon */
@keyframes scroll-swipe { 0% { transform: translateY(12px); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateY(28px); opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
@media (pointer: coarse) {
  .scroll-mouse { aspect-ratio: 40 / 66; }
  .scroll-mouse picture { display: none; }
  .scroll-mouse > svg { display: block; transform: scaleY(-1); }
}
@media (prefers-reduced-motion: reduce) { .scroll-mouse__finger { animation: none; } }
@media (max-width: 700px), (any-pointer: coarse) and (max-height: 500px) {
  /* On a phone the buttons are about half their size, so they cover less of the film (the client's picture of 2026-11-01).
     The text stays larger than half: at half it could not be read. */
  #stage .hero-actions .button {
    min-height: 30px; font-size: 9.5px; gap: 12px; padding-inline: 13px 10px;
    --cta-blur-a: 8px; --cta-spread-a: 1px; --cta-blur-b: 16px; --cta-spread-b: 4px; --cta-rest: 0 0 10px 2px rgba(120, 84, 255, .65);
  }
  #stage .hero-actions .button svg { width: 12px; height: 12px; }
  .stage-bottom .scroll-cue { font-size: 9.5px; gap: 5px; padding: 3px 11px 3px 6px; }
  .scroll-mouse { height: 20px; }
}
@media (max-width: 700px) {
  /* one compact stack under the headline, which stays about where it was */
  #stage .hero-copy { bottom: calc(88px + env(safe-area-inset-bottom)); }
  #stage .hero-actions { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 40px; }
  #stage:not([data-state=interior]) .stage-bottom .scroll-cue { align-self: end; margin-left: 8px; transform: translateY(-33px); }
}
@media (pointer: coarse) {
  /* small pills: the finger gets a few pixels more than the eye sees */
  #stage .hero-actions .button { position: relative; overflow: visible; }
  #stage .hero-actions .button::before { content: ""; position: absolute; inset: -3px -6px; }
}

/* "Zamów" in the header: the illustration fills its whole box (right edge plus its tilt), so the label starts
   clear of it at every width; the pill grows by the same amount. */
.header-order { width: 278px; padding-left: 116px; }
@media (min-width: 1101px) and (max-width: 1599px) { .header-order { width: 250px; padding-left: 106px; } }
@media (min-width: 701px) and (max-width: 1100px) { .header-order { width: 191px; padding-left: 84px; } }
@media (max-width: 760px) and (min-width: 701px) { .header-order { width: 165px; padding-left: 74px; } }
@media (max-width: 700px), (any-pointer: coarse) and (max-height: 500px) { .header-order { width: 149px; padding-left: 78px; } }
@media (max-width: 380px) { .header-order { width: 129px; padding-left: 64px; } }
/* With "Strona główna" in the menu the centred pill sits a little left of the middle to keep clear of the links. */
@media (min-width: 1600px) { .header-order { left: calc(50% - 100px); } }

/* Phone apartment: the scroll / look switch is small and sits below the controllers; its hint is read out only. */
@media (pointer: coarse) and (max-width: 700px) and (orientation: portrait) {
  .touch-controls { bottom: calc(8px + env(safe-area-inset-bottom)); gap: 0; }
  .touch-controls p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .touch-modes { padding: 2px; gap: 2px; border-radius: 16px; }
  .touch-modes button { min-height: 28px; min-width: 0; padding: 0 10px; gap: 5px; border-radius: 14px; font-size: 12px; }
  .touch-modes button span { font-size: 10.5px; }
}
/* The wider phone framing leaves bands above and below the film: the blurred film fills them, brighter than before. */
@media (any-pointer: coarse) and (max-width: 700px) and (orientation: portrait) {
  #cinema-ambient { opacity: .62; filter: saturate(1.15); }
}
.desktop-nav a { white-space: nowrap; }
@media (min-width: 701px) and (max-width: 960px) { .desktop-nav { gap: 14px; } }
/* Violet light around the 3D apartment model (O nas hero, home "Nowy standard"): an aura, a glow under the floor,
   two orbits with a travelling light, sparks and a violet rim on the model. The layer covers exactly the picture. */
.model-shot { position: relative; display: grid; place-items: center; min-width: 0; }
.page-art--apartment:after { display: none; }
.page-art--apartment img { width: auto; height: auto; max-width: min(100%, 570px); }
.page-art--apartment img,
.section-art--apartment img { filter: drop-shadow(0 0 1px rgba(226, 198, 255, .65)) drop-shadow(0 0 24px rgba(146, 82, 255, .45)) drop-shadow(0 26px 34px rgba(2, 0, 9, .42)); }
.model-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.model-fx > span { position: absolute; display: block; }
.section-art--apartment { container-type: size; }
.section-art--apartment .model-fx { inset: auto; left: 50%; top: 50%; width: 100%; width: min(100cqw, 112.09cqh); aspect-ratio: 1400 / 1249; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1.4s ease; }
.section-art--apartment.decor-ready.decor-in-view .model-fx { opacity: 1; }
.model-fx__aura { inset: -10% -16% -8%; background: radial-gradient(50% 50% at 50% 54%, rgba(146, 78, 255, .36), rgba(112, 54, 214, .15) 50%, transparent 72%); animation: model-breathe 7s ease-in-out infinite; }
.model-fx__floor { left: 2%; right: 2%; top: 30%; height: 52%; background: radial-gradient(closest-side, rgba(182, 116, 255, .55), rgba(128, 66, 230, .22) 55%, transparent); transform: rotate(33deg); filter: blur(12px); animation: model-breathe 7s ease-in-out -3.5s infinite; }
.model-fx__orbit { left: -14%; top: 56%; width: 128%; aspect-ratio: 1; margin-top: -64%; transform: rotate(-20deg) scaleY(.36); border: 1.5px solid rgba(214, 178, 255, .2); border-radius: 50%; filter: drop-shadow(0 0 5px rgba(186, 128, 255, .95)); }
.model-fx__orbit i { position: absolute; inset: -1.5px; border-radius: 50%; background: conic-gradient(transparent 0 66%, rgba(206, 156, 255, .9) 74.4%, #f6eaff 75%, transparent 75.1%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); animation: model-orbit 12s linear infinite; }
.model-fx__orbit--inner { left: 6%; top: 60%; width: 88%; margin-top: -44%; transform: rotate(16deg) scaleY(.3); border-color: rgba(214, 178, 255, .12); }
.model-fx__orbit--inner i { background: conic-gradient(transparent 0 24.9%, #f6eaff 25%, rgba(206, 156, 255, .9) 25.6%, transparent 34%); animation-duration: 17s; animation-direction: reverse; }
.model-fx__sparks { inset: 0; }
.model-fx__sparks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f3e6ff; box-shadow: 0 0 8px 2px rgba(188, 128, 255, .8); opacity: 0; animation: model-twinkle 5.2s ease-in-out infinite; }
.model-fx__sparks i:nth-child(1) { left: 8%; top: 14%; }
.model-fx__sparks i:nth-child(2) { left: 80%; top: 9%; width: 3px; height: 3px; animation-delay: -1.3s; }
.model-fx__sparks i:nth-child(3) { left: 93%; top: 82%; animation-delay: -2.4s; }
.model-fx__sparks i:nth-child(4) { left: 15%; top: 78%; width: 3px; height: 3px; animation-delay: -3.1s; }
.model-fx__sparks i:nth-child(5) { left: 63%; top: 7%; width: 3px; height: 3px; animation-delay: -4.2s; }
.model-fx__sparks i:nth-child(6) { left: 103%; top: 38%; animation-delay: -.6s; }
.section-art--apartment .model-fx * { animation-play-state: paused; }
.section-art--apartment.decor-in-view .model-fx * { animation-play-state: running; }
/* The model itself floats and slowly tilts around (a gentle 3D wobble), on every screen; the orbits stay put. */
.page-art--apartment .model-shot img,
.section-art--apartment img { animation-name: model-float, model-tilt; animation-duration: 6.5s, 16s; animation-timing-function: ease-in-out, linear; animation-iteration-count: infinite; animation-direction: alternate, normal; transform-origin: 50% 58%; }
.page-art--apartment .model-shot img { animation-play-state: running; }
.page-main { overflow-x: clip; }
@keyframes model-float { from { translate: 0 4px; } to { translate: 0 -9px; } }
@keyframes model-tilt {
  0%, 100% { transform: perspective(1500px) rotateY(5deg) rotateX(0deg); }
  8.33% { transform: perspective(1500px) rotateY(4.33deg) rotateX(1.5deg); }
  16.67% { transform: perspective(1500px) rotateY(2.5deg) rotateX(2.6deg); }
  25% { transform: perspective(1500px) rotateY(0deg) rotateX(3deg); }
  33.33% { transform: perspective(1500px) rotateY(-2.5deg) rotateX(2.6deg); }
  41.67% { transform: perspective(1500px) rotateY(-4.33deg) rotateX(1.5deg); }
  50% { transform: perspective(1500px) rotateY(-5deg) rotateX(0deg); }
  58.33% { transform: perspective(1500px) rotateY(-4.33deg) rotateX(-1.5deg); }
  66.67% { transform: perspective(1500px) rotateY(-2.5deg) rotateX(-2.6deg); }
  75% { transform: perspective(1500px) rotateY(0deg) rotateX(-3deg); }
  83.33% { transform: perspective(1500px) rotateY(2.5deg) rotateX(-2.6deg); }
  91.67% { transform: perspective(1500px) rotateY(4.33deg) rotateX(-1.5deg); }
}
@keyframes model-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes model-orbit { to { transform: rotate(1turn); } }
@keyframes model-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 40%, 60% { opacity: .95; transform: scale(1); } }
@media (max-width: 700px) { .model-fx__aura { inset: -8% -6%; } }
@media (prefers-reduced-motion: reduce) { .model-fx *, .page-art--apartment .model-shot img, .section-art--apartment img { animation: none !important; } .model-fx__sparks i { opacity: .7; } }
.motion-reduced .model-fx *, .motion-reduced .section-art--apartment img { animation: none !important; }
.motion-reduced .model-fx__sparks i { opacity: .7; }