/* Interactions for janiejpark.com */
html { scroll-behavior: smooth; }
::selection { background: #121417; color: #F6F6F4; }

/* Sticky, translucent top nav */
.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(246,246,244,0.88); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 0 0 100vmax rgba(246,246,244,0.88); clip-path: inset(0 -100vmax); transition: box-shadow .2s; }
.site-nav.scrolled { border-bottom: 1px solid #E1E3E6; }

/* Text links */
.site-nav a, footer a:not(.btn) { position: relative; transition: opacity .2s; }
.site-nav a:not(.btn)::after, footer a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.site-nav a:not(.btn):hover::after, footer a:not(.btn):hover::after { transform: scaleX(1); }

/* Pill buttons */
.btn { display: inline-block; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(18,20,23,0.18); }
.btn:active { transform: translateY(0); }

/* Work cards: tilt, sheen, parallax, press */
.card, .next-card { -webkit-tap-highlight-color: transparent; }
.card-media { --rx: 0deg; --ry: 0deg; --lift: 0px; --press: 1; --mx: 50%; --my: 50%;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(var(--press));
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease; will-change: transform; }
.card-media.tilting { transition: transform .12s linear, box-shadow .55s ease; }
.card:hover .card-media, .card:focus-visible .card-media, .next-card:hover .card-media { --lift: -6px; box-shadow: 0 28px 56px rgba(18,20,23,0.24); }
.card:active .card-media, .next-card:active .card-media { --press: .975; }
.card-media::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,0.22), rgba(255,255,255,0) 45%);
  opacity: 0; transition: opacity .35s ease; }
.card:hover .card-media::after, .next-card:hover .card-media::after { opacity: 1; }
.card-media > div { translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px); transition: translate .6s cubic-bezier(.2,.7,.2,1); }
.card-media.tilting > div { transition: translate .15s linear; }
.card h3 { transition: color .2s; }
.card h3::after { content: ' →'; display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.card:hover h3::after, .card:focus-visible h3::after { opacity: 1; transform: none; }

/* Floating "View case study" label that follows the cursor */
.cursor-pill { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; padding: 10px 16px; border-radius: 999px;
  background: #121417; color: #F6F6F4; font: 500 14px/1 'IBM Plex Sans', sans-serif; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1); }
.cursor-pill.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Morph from card to case study hero (browsers that support it) */
@view-transition { navigation: auto; }
::view-transition-group(hero) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
.case-hero { view-transition-name: hero; }

/* Zoomable screenshots */
img.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 48px); background: rgba(10,11,13,0.92); opacity: 0; pointer-events: none; transition: opacity .2s; cursor: zoom-out; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.lightbox button { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,0.22); }

/* Keyboard focus */
a:focus-visible, button:focus-visible { outline: 2px solid #0E9BDB; outline-offset: 4px; border-radius: 6px; }

/* Reveal on scroll (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card-media, .card-media > div, .btn, .card h3::after { transition: none; transform: none; translate: none; }
  .cursor-pill { display: none; }
  @view-transition { navigation: none; }
}

/* Case study: sticky left-corner section navigation (desktop) */
.toc { display: none; }
@media (min-width: 1200px) {
  .has-toc main { box-sizing: border-box; max-width: 1440px !important; padding-left: 248px !important; padding-right: clamp(24px, 3vw, 48px) !important; }
  .toc { display: block; position: fixed; z-index: 40; top: 120px; left: calc(max(0px, (100vw - 1440px) / 2) + 32px); width: 176px;
    font-family: 'IBM Plex Sans', sans-serif; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
  .toc.show { opacity: 1; transform: none; pointer-events: auto; }
  .toc-title { display: block; margin: 0 0 14px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A9099; }
  .toc .toc-name { display: block; margin: 0 0 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: #121417; }
  .toc .toc-name::before { display: none; }
  .toc ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid #D9DBDF; display: flex; flex-direction: column; gap: 2px; }
  .toc a { position: relative; display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 14px; line-height: 1.3; color: #8A9099; transition: color .2s; }
  .toc a .num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #B4B9C1; transition: color .2s; }
  .toc a:hover { color: #121417; }
  .toc a::before { content: ''; position: absolute; left: -15px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: #121417; transform: scaleY(0); transition: transform .25s ease; }
  .toc a[aria-current="true"] { color: #121417; font-weight: 500; }
  .toc a[aria-current="true"] .num { color: #121417; }
  .toc a[aria-current="true"]::before { transform: scaleY(1); }
  .toc-progress { display: block; margin-top: 18px; height: 2px; border-radius: 2px; background: #E1E3E6; overflow: hidden; }
  .toc-progress span { display: block; height: 100%; width: 0; background: #121417; transition: width .1s linear; }
}
.toc-target { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { .toc, .toc a, .toc a::before { transition: none; } }