/* Finishing layer: light, tactile controls and a consistent motion language. */
@media screen {
  :root {
    --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
    --ease-surface: cubic-bezier(0.22, 1, 0.36, 1);
  }

  ::selection {
    color: #17120e;
    background: #e2bc9b;
  }

  /* The fine line makes page depth legible without a floating progress widget. */
  .site-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #8e6d51, #e6c5a8 72%, #f2dec7);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left;
    pointer-events: none;
    opacity: 0.8;
  }

  .site-header nav a {
    position: relative;
    transition: color 180ms ease;
  }
  .site-header nav a::after {
    content: "";
    position: absolute;
    height: 1px;
    bottom: 5px;
    left: 0;
    width: 100%;
    background: #dbc0a6;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 320ms var(--ease-out);
  }
  .site-header nav a[aria-current]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .btn,
  .nav-cv,
  .filter,
  .trajectory-toolbar button,
  .modal-close {
    position: relative;
    isolation: isolate;
    transition:
      color 180ms ease,
      border-color 240ms ease,
      background-color 240ms ease,
      box-shadow 280ms ease,
      transform 280ms var(--ease-out);
  }
  .btn,
  .nav-cv,
  .trajectory-toolbar button {
    overflow: hidden;
    box-shadow: inset 0 1px 0 #ffffff0d;
  }
  .btn-primary {
    background-image: linear-gradient(128deg, #ffffff15, transparent 52%, #794d250c);
    box-shadow:
      inset 0 1px 0 #fff5,
      0 4px 16px #0000000d;
  }
  .btn::before,
  .nav-cv::before,
  .trajectory-toolbar button::before {
    content: "";
    position: absolute;
    inset: -60% -60%;
    z-index: -1;
    background: linear-gradient(110deg, transparent 38%, #fff2 48%, transparent 60%);
    transform: translateX(-70%);
    transition: transform 680ms var(--ease-surface);
    pointer-events: none;
  }
  .btn > span,
  .nav-cv > span,
  .text-link > span {
    transition: transform 280ms var(--ease-out);
  }
  .btn:active,
  .nav-cv:active,
  .filter:active,
  .trajectory-toolbar button:active,
  .modal-close:active {
    transform: translateY(1px) scale(0.985);
    transition-duration: 90ms;
  }
  .text-link,
  .about-links a,
  .resume-contact a,
  .resume-downloads a {
    text-decoration-color: #cdb39b00;
    text-underline-offset: 6px;
    transition:
      color 180ms ease,
      text-decoration-color 180ms ease;
  }
  .text-link:hover,
  .about-links a:hover,
  .resume-contact a:hover,
  .resume-downloads a:hover {
    color: #f0d3b6;
    text-decoration: underline;
    text-decoration-color: #a98a6b99;
  }

  :where(a, button, input, summary):focus-visible {
    outline: 2px solid #e3bd9c;
    outline-offset: 5px;
  }
  .project-image:focus-visible {
    outline-offset: 6px;
  }
  .filter:focus-visible,
  .trajectory-toolbar button:focus-visible,
  .sim-playback button:focus-visible,
  .trajectory-phases button:focus-visible {
    outline-offset: 3px;
  }

  .hero {
    background: radial-gradient(
        ellipse at var(--pointer-x, 74%) var(--pointer-y, 39%),
        #c5945c0e,
        transparent 58%
      ),
      radial-gradient(ellipse at 76% 39%, #a7663607, transparent 57%);
  }
  .hero-foot {
    position: relative;
  }
  .hero-foot::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: min(100px, 18%);
    background: linear-gradient(90deg, #d9b18a80, transparent);
    pointer-events: none;
  }
  .hero-note .status-dot {
    box-shadow: 0 0 0 4px #dfb18d08;
  }

  .project-image {
    isolation: isolate;
    transition:
      transform 620ms var(--ease-surface),
      box-shadow 620ms var(--ease-surface),
      border-color 360ms ease;
    box-shadow:
      0 1px 1px #0003,
      0 8px 25px #0000000a;
  }
  .project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at var(--pointer-x, 50%) var(--pointer-y, 0%),
        #ffffff12,
        transparent 62%
      ),
      linear-gradient(135deg, #ffffff0b, transparent 28%, transparent 75%, #00000013);
    box-shadow: inset 0 1px 0 #ffffff24;
    opacity: 0.45;
    transition: opacity 400ms ease;
  }
  .project-image > img {
    transition:
      filter 400ms ease,
      transform 900ms var(--ease-surface);
  }
  .project-image .image-arrow {
    z-index: 5;
    transition:
      transform 360ms var(--ease-out),
      background-color 240ms ease,
      color 240ms ease,
      border-color 240ms ease;
  }
  .work-card h3 > button {
    transition: color 200ms ease;
  }
  .work-card h3 > button:hover {
    color: #ecc9aa;
  }
  .phone,
  .scope-window {
    transition:
      transform 850ms var(--ease-surface),
      box-shadow 850ms var(--ease-surface);
  }
  .tags span,
  .modal-tags span {
    border-color: #ffffff1b;
    background: linear-gradient(#ffffff03, #ffffff01);
  }
  .work-card .project-meta {
    font-variant-numeric: tabular-nums;
  }

  .trajectory-view {
    box-shadow:
      inset 0 1px 0 #ffffff0b,
      0 12px 42px #00000020;
    transition:
      border-color 400ms ease,
      box-shadow 400ms ease;
  }
  .trajectory-view figcaption {
    background: linear-gradient(130deg, #182023, #131a1d);
  }
  .trajectory-toolbar button,
  .sim-playback button,
  .trajectory-phases button {
    -webkit-tap-highlight-color: transparent;
  }
  .trajectory-phases button {
    transition: color 200ms ease;
  }
  .trajectory-scrub input::-webkit-slider-thumb {
    box-shadow:
      0 0 0 4px #dfb18d0b,
      0 1px 5px #0004;
    transition:
      box-shadow 200ms ease,
      transform 200ms ease;
  }
  .trajectory-scrub input::-moz-range-thumb {
    box-shadow:
      0 0 0 4px #dfb18d0b,
      0 1px 5px #0004;
    transition:
      box-shadow 200ms ease,
      transform 200ms ease;
  }
  .trajectory-scrub input:active::-webkit-slider-thumb {
    box-shadow:
      0 0 0 7px #dfb18d18,
      0 1px 5px #0004;
    transform: scale(1.15);
  }
  .trajectory-scrub input:active::-moz-range-thumb {
    box-shadow:
      0 0 0 7px #dfb18d18,
      0 1px 5px #0004;
    transform: scale(1.15);
  }

  .timeline-entry,
  .project-archive details,
  .stack-grid > div {
    transition: border-color 300ms ease;
  }
  .project-archive summary {
    transition: color 200ms ease;
  }
  .project-archive summary:hover {
    color: #e6c6aa;
  }
  .about-portrait,
  .recognition-image {
    box-shadow:
      inset 0 1px 0 #ffffff14,
      0 12px 35px #00000017;
  }
  .stack-grid > div > span {
    color: #bda48b;
  }
  .contact-email {
    text-decoration-color: #c4a78a00;
    text-decoration-thickness: 1px;
    text-underline-offset: 8px;
    transition:
      color 250ms ease,
      text-decoration-color 250ms ease;
  }
  .contact-email:hover {
    color: #edcbaa;
    text-decoration: underline;
    text-decoration-color: #c4a78a80;
  }

  .modal.show .modal-backdrop {
    animation: backdrop-in 300ms ease both;
  }
  .modal.show .modal-container {
    animation: surface-in 460ms var(--ease-surface) both;
  }
  .modal-container {
    background: linear-gradient(145deg, #1b1d1f, #141618 70%);
    border-color: #ffffff26;
    box-shadow:
      inset 0 1px 0 #ffffff0c,
      0 35px 120px #000c;
  }
  .modal-header {
    padding-bottom: 10px;
  }
  .modal-header h2 {
    letter-spacing: -0.045em;
  }
  .modal-body img,
  .modal-body video {
    border-color: #ffffff22;
  }
  .case-facts {
    border-color: #ffffff1c;
  }

  /* Add .motion-ready only after the reveal observer is successfully installed. */
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 800ms var(--ease-out),
      transform 950ms var(--ease-surface);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .motion-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  .reduced-effects *,
  .reduced-effects *::before,
  .reduced-effects *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reduced-effects.motion-ready [data-reveal],
  .reduced-effects [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .reduced-effects .project-image,
  .reduced-effects .project-image > img,
  .reduced-effects .project-image .image-arrow,
  .reduced-effects .btn,
  .reduced-effects .nav-cv,
  .reduced-effects .filter,
  .reduced-effects .trajectory-toolbar button,
  .reduced-effects .modal-close {
    transform: none !important;
  }
  .reduced-effects .phone-front,
  .reduced-effects .phone-back,
  .reduced-effects .scope-window {
    transition: none !important;
  }
  .reduced-effects .nouri-art:hover .phone-front,
  .reduced-effects .nouri-art:hover .phone-back,
  .reduced-effects .scope-art:hover .scope-window {
    transform: none !important;
  }
}

@media screen and (hover: hover) and (pointer: fine) {
  .site-header nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .btn:hover,
  .nav-cv:hover {
    transform: translateY(-2px);
  }
  .btn-primary:hover {
    box-shadow:
      inset 0 1px 0 #fff6,
      0 8px 22px #0003;
  }
  .btn:hover::before,
  .nav-cv:hover::before,
  .trajectory-toolbar button:hover::before {
    transform: translateX(70%);
  }
  .btn:hover > span,
  .nav-cv:hover > span {
    transform: translate(2px, -2px);
  }
  .hero-actions .btn:hover > span {
    transform: translate(2px, 2px);
  }
  .project-image:hover {
    transform: translateY(-5px);
    border-color: #ddd8c340;
    box-shadow:
      0 20px 45px #00000045,
      0 2px 6px #0004;
  }
  .project-image:hover::after {
    opacity: 1;
  }
  .project-image:not(.nouri-art):not(.scope-art):hover > img {
    transform: scale(1.018);
  }
  .project-image:hover .image-arrow {
    transform: translate(2px, -2px);
  }
  .project-image:active {
    transform: translateY(-1px) scale(0.995);
    transition-duration: 120ms;
  }
  .trajectory-view:hover {
    border-color: #ddc4aa3b;
    box-shadow:
      inset 0 1px 0 #ffffff0d,
      0 18px 55px #00000032;
  }
  .timeline-entry:hover,
  .project-archive details:hover,
  .stack-grid > div:hover {
    border-color: #cfb39445;
  }
}

@media screen and (max-width: 640px) {
  .modal.show .modal-container {
    animation-duration: 360ms;
  }
  .project-image {
    box-shadow: 0 2px 14px #0000001c;
  }
  .project-image::after {
    opacity: 0.5;
  }
  .motion-ready [data-reveal] {
    transform: translateY(12px);
    transition-duration: 650ms, 750ms;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .project-image,
  .project-image:hover,
  .project-image:not(.nouri-art):not(.scope-art):hover > img,
  .project-image:hover .image-arrow,
  .btn:hover,
  .nav-cv:hover {
    transform: none;
  }
}

@keyframes surface-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}