.project-scene { pointer-events: none; }

/* Individual reading blocks fade; the parent columns never dim readable children. */
#resume .resume-motion-group,
#resume .resume-motion-item {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
#resume.resume-motion-ready .resume-motion-item {
  opacity: var(--resume-presence, 1);
  transform: translate3d(0, var(--resume-offset, 0px), 0);
  filter: none;
  transition: none;
}
#resume .resume-motion-item:focus-within,
#resume .resume-motion-item:target,
#resume:target > .container > .section-title {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* The ring owns its own animation; the host keeps its radius, shadow and float. */
@property --breathing-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.breathing-tab { position: relative; isolation: isolate; }
.nav-links .breathing-tab { padding: 7px 11px; margin: -7px -11px; border-radius: 10px; }
.cc-link.breathing-tab { border-radius: 10px; }
.breathing-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  border: 1.8px solid #00cfe8;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .48s ease;
  animation: breathingTabCircuit 5.8s linear infinite, breathingTabLuminance 2.9s ease-in-out infinite;
  animation-play-state: paused;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .breathing-tab::before {
    border: 0;
    padding: 1.8px;
    background: conic-gradient(from var(--breathing-angle),
      rgba(0, 211, 243, .4) 0deg,
      #00d9f5 28deg, #12e4ff 60deg,
      rgba(0, 205, 242, .35) 103deg,
      #8752f5 135deg, #b77aff 174deg,
      rgba(151, 88, 248, .35) 220deg,
      #ea35d1 249deg, #ff65df 285deg,
      rgba(244, 72, 211, .35) 331deg,
      rgba(0, 211, 243, .4) 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
.breathing-tab:focus-visible {
  outline: 2px solid #6451bd;
  outline-offset: 4px;
}
.breathing-tab:focus-visible::before {
  opacity: 1;
  animation-play-state: running;
}
@media (hover: hover) and (pointer: fine) {
  .breathing-tab:hover { opacity: 1 !important; }
  .breathing-tab:hover::before {
    opacity: 1;
    animation-play-state: running;
  }
}
@keyframes breathingTabCircuit {
  to { --breathing-angle: 360deg; }
}
@keyframes breathingTabLuminance {
  0%, 100% {
    filter: brightness(.96) saturate(1.05);
  }
  50% {
    filter: brightness(1.24) saturate(1.23);
  }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .projects-stage:not(.no-scrub) .proj-card .card-face,
  .projects-stage:not(.no-scrub) .proj-card .card-content {
    box-shadow: var(--card-shadow-x, 0px) var(--card-shadow-y, 22px) 50px -10px rgba(44, 42, 63, .14),
      0 4px 12px -4px rgba(44, 42, 63, .055);
  }
  .proj-card .card-face::after,
  .proj-card .card-content::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--card-glint, 0);
    background: radial-gradient(ellipse 85% 75% at var(--card-light-x, 50%) var(--card-light-y, 50%),
      rgba(255, 255, 255, .8), rgba(255, 255, 255, .18) 34%, transparent 74%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  }
  .proj-card.depth-active .card-content { border-color: rgba(92, 94, 123, .19); }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .project-scene .scene-layer {
    --scene-translate-x: 0px !important;
    --scene-translate-y: 0px !important;
    --scene-rotate: 0deg !important;
    will-change: auto;
  }
  #resume .resume-motion-item { opacity: 1 !important; transform: none !important; filter: none !important; }
  .proj-card .card-face::after,
  .proj-card .card-content::after { display: none; }
}

@media (max-width: 899px) {
  .project-scene .scene-layer {
    --scene-translate-x: 0px !important;
    --scene-translate-y: 0px !important;
    --scene-rotate: 0deg !important;
    will-change: auto;
  }
  #resume .resume-motion-item { opacity: 1 !important; transform: none !important; filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .breathing-tab::before {
    animation: none !important;
    transition: none;
    filter: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .breathing-tab::before { animation: none; transition: none; }
  .breathing-tab:active::before { opacity: 1; }
}

@media print {
  #resume .resume-motion-item { opacity: 1 !important; transform: none !important; filter: none !important; }
  .breathing-tab::before { display: none; }
}