/* Shared interaction treatment; group boundaries are assigned in rollovers.js. */
.rollover-sibling { filter: blur(2.5px); opacity: .58; }
a, button, summary, [role="button"], [role="link"] { transition: filter .28s ease, opacity .28s ease, color .28s ease; }
#menu nav .rollover-sibling { filter: blur(5.2734375px); }
#menu.menu-visible nav a:nth-child(n) { transition: filter .28s ease, opacity .28s ease, color .28s ease, transform .55s cubic-bezier(.2,.8,.2,1); transition-delay: 0s; }
#menu.menu-visible nav a.rollover-sibling { opacity: .58; }
.rollover-active:not(.rollover-panel) { text-decoration-color: currentColor; }
.rollover-touch:not(.rollover-panel) { box-shadow: 0 0 24px 3px #71d9ef65; background-color: #71d9ef18; }
#menu nav a.rollover-active { color: var(--ink); text-decoration: none; }
.shot-frame { position: relative; display: block; isolation: isolate; transition: box-shadow .28s ease; }
.detail-gallery figure a.shot-frame { width: fit-content; max-width: 100%; margin-inline: auto; }
.detail-gallery .shot-frame > img:not(.glitch-slice) { display: block; max-width: 100%; }
.project-card.rollover-active .shot-frame, .shot-frame.rollover-active { box-shadow: 0 0 0 1px #71d9efaa, -10px 6px 28px -10px #71d9efa8, 10px -4px 28px -10px #c998e8a0; }
/* Scale the screenshot frame and its highlight together, leaving captions in place. */
.shot-frame { transform-origin: center; transition: transform .28s ease, box-shadow .28s ease; }
@media (prefers-reduced-motion: no-preference) {
  .project-card.rollover-active .shot-frame, .shot-frame.rollover-active { transform: scale(1.1); z-index: 3; }
}
/* The frame supplies the zoom, so avoid a second zoom on the image itself. */
.project-card:hover .project-image img { transform: none; }
.horizontal .project-card:hover .project-image img { transform: translate3d(var(--image-shift,0px),0,0); }
.rollover-cursor, .rollover-aura { position: fixed; top: 0; left: 0; pointer-events: none; opacity: 0; z-index: 2147483646; }
.rollover-cursor { width: 46px; height: 46px; margin: -23px; border: 1px solid #172a32; border-radius: 48% 52% 51% 49%; background: #ffffff35; color: #172a32; display: grid; place-items: center; font: 19px/1 Arial,sans-serif; box-shadow: 0 0 0 1px #ffffff80; transition: opacity .15s; }
.rollover-aura { width: 300px; height: 230px; margin: -115px -150px; background: radial-gradient(ellipse at 35% 55%, #dd83d760, transparent 62%), radial-gradient(ellipse at 65% 45%, #38d6ed80, transparent 65%); filter: blur(20px); transition: opacity .25s; }
.rollover-cursor.is-visible { opacity: 1; }
.rollover-aura.is-visible { opacity: .75; }
@media (any-hover: hover) and (any-pointer: fine) {
  .rollover-pointer, .rollover-pointer * { cursor: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rollover-cursor, .rollover-aura { display: none; }
  .rollover-pointer, .rollover-pointer * { cursor: pointer !important; }
  .rollover-sibling { filter: none; opacity: 1; }
  a, button, summary, .shot-frame, #menu.menu-visible nav a:nth-child(n) { transition: none; }
  #menu.menu-visible nav a.rollover-sibling { opacity: 1; }
}
@media (forced-colors: active) {
  .rollover-cursor, .rollover-aura { display: none; }
  .rollover-pointer, .rollover-pointer * { cursor: pointer !important; }
  .rollover-sibling { filter: none; opacity: 1; }
  .rollover-active { outline: 2px solid Highlight; outline-offset: 4px; }
}

/* Keep the Experience scroll position, but hide its bar outside that chapter. */
.horizontal .experience:not(.is-current-panel) { scrollbar-width: none; }
.horizontal .experience:not(.is-current-panel)::-webkit-scrollbar { display: none; }

/* Keep long index labels and experience titles within narrow phone screens. */
@media (max-width: 760px) {
  #menu nav a { font-size: clamp(30px, 9.5vw, 64px); gap: 12px; }
  #menu nav a small, #menu nav a span { flex-shrink: 0; }
  #menu .menu-top { gap: 12px; }
  #menu .menu-top > span { max-width: 55%; }
  .experience-list summary { grid-template-columns: 22px minmax(0, 1fr) 70px 18px; gap: 8px; }
  .experience-list summary h3 { font-size: clamp(18px, 5vw, 26px); overflow-wrap: anywhere; }
  .footer-bottom a { overflow-wrap: anywhere; }
}