/* ============================================================
   motion-plus.css — gentle, eased motion layer. JS-gated, reduced-motion safe.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* gentle page fade-in / fade-out */
@media (prefers-reduced-motion: no-preference) { body { animation: mp-page-in .8s cubic-bezier(.22, .61, .36, 1) both; } }
@keyframes mp-page-in { from { opacity: 0; } to { opacity: 1; } }
html.mp-leaving body { opacity: 0; transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { html.mp-leaving body { opacity: 1; transition: none; } }

/* native cross-document view transitions — where supported, page-to-page
   navigation becomes an instant soft cross-fade (the JS fade steps aside). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* reading progress — thin accent line pinned under the top edge (articles) */
.mp-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 90;
  pointer-events: none;
  background: transparent;
}
.mp-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent, #9db5c5), oklch(0.86 0.03 238));
  transform-origin: left;
  transform: scaleX(var(--read, 0));
}

/* kickers settle into place as their section reveals — wide tracking eases
   down to rest. Class-gated (mp-pre), so non-JS rendering is untouched. */
.reveal.mp-pre .kicker {
  letter-spacing: 0.34em;
  transition: letter-spacing 1.3s cubic-bezier(.22, .61, .36, 1);
}
.reveal.mp-pre.mp-in .kicker { letter-spacing: 0.18em; }

/* scroll reveal — slow, soft fade + slight rise (the "appears on scroll" the about page uses) */
.reveal.mp-pre {
  animation: none !important;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal.mp-pre.mp-in { opacity: 1; transform: none; }

/* proximity field — cards: gentle lift (transform set inline by JS) + soft glow */
.mp-prox { transition: transform .55s cubic-bezier(.22, .61, .36, 1), box-shadow .55s ease, border-color .55s ease; }
.mp-prox {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, calc(var(--prox, 0) * 0.10)),
    0 calc(var(--prox, 0) * 16px) calc(var(--prox, 0) * 42px) rgba(0, 0, 0, calc(var(--prox, 0) * 0.42));
}

/* proximity field — rows (procedures): continuous indent + accent bar, no jump */
.proc-row.mp-row, .post-row.mp-row { transition: padding-left .6s cubic-bezier(.22, .61, .36, 1), background-color .6s ease; }
.proc-row.mp-row, .proc-row.mp-row:hover { padding-left: calc(4px + var(--prox, 0) * 16px); background: oklch(0.955 0.006 250 / calc(var(--prox, 0) * 0.03)); }
.proc-row.mp-row::before, .proc-row.mp-row:hover::before { transform: scaleY(var(--prox, 0)); transition: transform .6s cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  .mp-prox { box-shadow: none; transition: none; transform: none !important; }
  .proc-row.mp-row { transition: none; }
}

/* ============================================================
   Before/after face gallery — square tiles, hover to preview, click to expand
   ============================================================ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 26px; align-items: start; }
.va-card { position: relative; border: 1px solid var(--line, rgba(255, 255, 255, .12)); border-radius: 8px; overflow: hidden; background: var(--panel, #0f0f11); cursor: pointer; }
.video-grid.faces .va-card video { aspect-ratio: 1 / 1; }
.va-card video { display: block; width: 100%; height: auto; background: #000; }
@media (prefers-reduced-motion: no-preference) {
  .va-card video { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
  .va-card:hover video { transform: scale(1.03); }
}
.va-card .va-cap { transition: color .3s ease; }
.va-card:hover .va-cap { color: var(--ink, #edf0f4); }
.va-cap { padding: 9px 10px 11px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .02em; color: var(--muted, #9aa3ad); text-align: center; }
.va-play { position: absolute; left: 0; right: 0; top: 0; bottom: 38px; display: grid; place-items: center; pointer-events: none; transition: opacity .35s ease; }
.va-card.is-playing .va-play { opacity: 0; }
.va-play b { width: 46px; height: 46px; border-radius: 50%; background: rgba(10, 12, 15, .38); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 8px 22px rgba(0, 0, 0, .4); display: grid; place-items: center; color: #fff; font-size: 13px; padding-left: 2px; }
@media (max-width: 520px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }

/* periorbital subset — smaller, set-apart group of eye-region cases */
.periorbital-sub { margin-top: clamp(24px, 3.2vw, 44px); }
.periorbital-head { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.01em; margin: 0 0 4px; color: var(--ink); }
.periorbital-note { font-size: 13px; color: var(--muted); margin: 0 0 14px; max-width: 560px; line-height: 1.5; }
.video-grid.periorbital { grid-template-columns: repeat(auto-fit, minmax(150px, 188px)); justify-content: start; gap: 12px; margin-top: 0; }
@media (max-width: 520px) { .video-grid.periorbital { grid-template-columns: repeat(2, 1fr); } }

/* lightbox — larger video in front, page dims behind */
.mp-lb { position: fixed; inset: 0; z-index: 1000; display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px;
  background: rgba(8, 10, 12, 0); backdrop-filter: blur(0px); opacity: 0;
  transition: opacity .32s ease, background .32s ease, backdrop-filter .32s ease; }
.mp-lb.open { opacity: 1; background: rgba(8, 10, 12, .80); backdrop-filter: blur(6px); }
.mp-lb-inner { position: relative; margin: auto; transform: scale(.96); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.mp-lb.has-stills video { max-height: 56vh; }
.mp-lb.open .mp-lb-inner { transform: scale(1); }
.mp-lb video { display: block; width: auto; max-width: min(88vw, 680px); max-height: 82vh; border-radius: 10px; background: #000; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.mp-lb-cap { margin-top: 12px; text-align: center; font-family: var(--serif); font-size: 16px; color: var(--ink, #f1f3f5); }
.mp-lb-x { position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 21px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }

/* before/after drag-to-reveal comparison (stills inside the lightbox) */
.mp-lb-stills { margin-top: 14px; width: min(86vw, 520px); }
.ba-compare { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #000; cursor: ew-resize; touch-action: none; user-select: none; --pos: 50%; }
.ba-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-compare .ba-top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-compare .ba-div { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.ba-compare .ba-div b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 17px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.ba-compare .ba-lab { position: absolute; top: 10px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 9px; border-radius: 20px; pointer-events: none; }
.ba-compare .ba-lab.l { left: 10px; } .ba-compare .ba-lab.r { right: 10px; }
.ba-sub { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; }