/* Play layer: small, decorative feedback that keeps every surface alive.
   Motion is finite, transform/opacity only, and fully disabled for
   prefers-reduced-motion. Content never depends on any of this. */
:root { --play-ease: cubic-bezier(.2, .7, .2, 1); }

/* Thin reading-progress light along the very top of the page. */
.scroll-ribbon {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  pointer-events: none;
  background: linear-gradient(90deg, var(--orchid), var(--pink));
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}

/* Floating return-to-top control; appears only after scrolling. */
.to-top {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 55; width: 52px; height: 52px;
  border: 1px solid var(--burgundy); border-radius: 50%;
  background: var(--burgundy); color: var(--ivory);
  font: 700 20px/1 var(--font-body); cursor: pointer;
  box-shadow: 0 12px 26px rgba(105, 42, 66, .28);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.88);
  transition: opacity .25s var(--play-ease), transform .25s var(--play-ease), visibility 0s .25s, background-color .2s, border-color .2s;
}
.to-top.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s var(--play-ease), transform .25s var(--play-ease), background-color .2s, border-color .2s;
}
.to-top:hover { background: var(--orchid); border-color: var(--orchid); }
@media (max-width: 700px) {
  .to-top { width: 46px; height: 46px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); font-size: 17px; }
}

/* Brief sparkle burst pieces, spawned on activation and removed after flight. */
.spark-bit {
  position: fixed; z-index: 58; width: 14px; height: 14px; margin: 0;
  pointer-events: none;
  background: url("../brand/sparkle-chrome.svg") center / contain no-repeat;
}

/* Soft studio light that follows the cursor across the home hero. */
.hero-glow {
  position: absolute; top: 0; left: 0; width: 440px; height: 440px;
  margin: -220px 0 0 -220px; border-radius: 50%; z-index: 1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(248, 229, 236, .8), rgba(248, 229, 236, 0) 74%);
  filter: blur(16px);
  opacity: 0; transition: opacity .45s var(--play-ease);
}
.hero-glow.is-on { opacity: .9; }

/* Buttons lean gently toward the cursor. The separate `translate` property
   keeps the existing hover lift (transform) intact. */
.btn {
  translate: var(--magnet, 0 0);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), translate .2s ease-out;
}
.btn:active { translate: 0 0; }

/* Tiny pointer tilt on browsing surfaces; text stays readable. */
.svc-row__link, .playground-entries > button, .studio-note, .jump a { transition: transform .35s var(--play-ease); }
.circle-paths a { transition: transform .35s var(--play-ease), background .2s; }
.jump a { transition: transform .35s var(--play-ease), background .3s, color .3s; }
.tilt-hover { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }

@media (prefers-reduced-motion: reduce) {
  .btn { translate: 0 0 !important; transition: background-color .001ms, color .001ms, border-color .001ms, transform .001ms; }
  .svc-row__link, .circle-paths a, .playground-entries > button, .studio-note, .jump a { transition: none; }
  .tilt-hover { transform: none !important; }
  .hero-glow, .spark-bit { display: none; }
  .to-top { transition: none; }
}

/* Instagram strip: a quiet, centered invitation directly above the footer. */
.insta-strip { background: linear-gradient(180deg, var(--cream), var(--blush)); border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 96px); text-align: center; }
.insta-strip__inner { display: flex; flex-direction: column; align-items: center; }
.insta-strip__spark { width: 26px; height: 26px; margin-bottom: 18px; transition: transform .8s var(--play-ease); }
.insta-strip:hover .insta-strip__spark { transform: rotate(90deg) scale(1.12); }
.insta-strip__label { color: var(--burgundy); margin-bottom: 14px; }
.insta-strip__handle { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 1rem + 4.2vw, 4.4rem); line-height: 1.05; letter-spacing: -.02em; max-width: 100%; overflow-wrap: anywhere; }
.insta-strip__handle a { text-decoration: none; color: var(--ink); background: linear-gradient(var(--orchid), var(--orchid)) 0 100% / 0 2px no-repeat; transition: color .3s, background-size .45s var(--play-ease); }
.insta-strip__handle a:hover, .insta-strip__handle a:focus-visible { color: var(--orchid); background-size: 100% 2px; }
.insta-strip__line { margin: 14px 0 28px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .insta-strip__spark, .insta-strip__handle a { transition: none; } }

/* Contact FAQ: thin dividers between rows; the "+" rotates open. */
.contact-faq { border-top: 1px solid var(--line); }
.contact-faq details + details { border-top: 1px solid var(--line); }
.contact-faq summary { min-height: 56px; }
.contact-faq summary::after { border-color: var(--burgundy); color: var(--burgundy); }
.contact-faq details[open] summary::after { background: var(--burgundy); color: #fff; }