/* Identity and accessibility additions; desktop composition follows the reference. */
html { overflow-x: clip; }
#intro-wrapper { overflow: hidden; }
:focus-visible { outline: 2px solid #91a8ff; outline-offset: 6px; }
#home-video { background: url('./assets/michele/profile-v2/hero.png') center / cover no-repeat; }
#home-motion, #home-identity { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#home-identity { mask: url('./assets/michele/hero-mask.svg') center / cover no-repeat; -webkit-mask: url('./assets/michele/hero-mask.svg') center / cover no-repeat; }
#project-detail[aria-hidden="true"] { pointer-events: none; }
#contact-dialog {
  position: fixed; inset: 0; margin: auto; width: min(540px, calc(100% - 40px));
  padding: 64px 40px 40px; color: #f5f5f5; background: #121212;
  border: 1px solid #ffffff20; border-radius: 4px;
}
#contact-dialog::backdrop { background: #000a; backdrop-filter: blur(12px); }
#contact-dialog h2 { margin: 20px 0; }
.contact-close {
  position: absolute; top: 16px; right: 20px; width: 40px; height: 40px;
  background: none; border: 1px solid #ffffff30; border-radius: 50%; font-size: 24px;
}
@media (max-width: 1050px) {
  #time-display { gap: 7px; }
  #time-display span:nth-child(n+3) { display: none; }
}
@media (max-width: 768px) {
  #home-motion, #home-identity { object-position: 58% center; }
  #connect-approved-layer { object-position: 58% center; }
  #home-identity { mask-position: 58% center; -webkit-mask-position: 58% center; }
  #home-name-btn { top: 25px; left: 24px; }
  #time-display { top: 25px; right: 24px; }
  #main-content > nav { top: 65px; width: calc(100% - 48px); gap: 0; justify-content: space-between; }
  #home { min-height: 100svh; height: 100svh; padding-top: 150px; padding-bottom: 30px; }
  #home > div:first-child { margin-bottom: 32px; }
  #home .type-hero { font-size: clamp(3.15rem, 9.4vw, 4.5rem); }
  #home p { font-size: 12px; max-width: 340px; text-shadow: 0 1px 12px #0008; }
  #home-action-bar { gap: 10px; }
  .pill-button { padding-left: 20px; padding-right: 20px; }
  #available-btn { gap: 10px; }
  #next-section-btn { width: 40px; height: 40px; bottom: 96px; right: 22px; }
  #hero-title { text-shadow: 0 2px 20px #0002; }
  #work-filter { display: grid; grid-template-columns: auto 1fr; gap: 12px; width: 100%; }
  #work-filter > div { gap: 6px; justify-content: flex-end; }
  #work-filter .filter-btn { padding: 6px 10px; font-size: 8px; }
  #filter-count { grid-column: 2; justify-self: end; white-space: nowrap; font-size: 8px; }
  #om-stage.row-layout { padding: 40px 24px; }
  #om-stage.row-layout .om-row { flex-direction: column; }
  #om-stage.row-layout .om-card { flex: none !important; width: 100%; height: auto !important; min-height: 0; }
  #om-stage.row-layout .om-media { flex: none; height: 260px; }
  #om-stage.row-layout .om-copy { position: relative; opacity: 1 !important; transform: none !important; background: #100f0d; padding: 24px; }
  #om-stage.row-layout .om-card .om-copy .type-caption,
  #om-stage.row-layout .om-card .om-copy .om-title,
  #om-stage.row-layout .om-card .om-copy .om-desc { display: block !important; opacity: 1 !important; }
  #om-stage.row-layout .om-desc .om-w { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  #pipe-pin, #pipe-stage { height: auto !important; overflow: visible !important; }
  #pipeTrack { transform: none !important; display: flex; flex-wrap: wrap; width: auto !important; padding: 40px 24px; }
  .pipe-card { flex: 1 1 300px !important; }
  .pipe-h-head { position: relative; padding-top: 40px; }
  #focus-transition-trigger, #works-transition-trigger, #synthetics-transition-trigger, #connect-transition-trigger { height: 20vh !important; }
  .line-internal, .w-unit, .kw { opacity: 1 !important; transform: none !important; filter: none !important; }
}