/* The site is an interactive presentation surface: keep copy from entering
   text-selection mode while leaving links and controls discoverable. */
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
}

body { cursor: default; }
a, button, [role="button"] { cursor: pointer; }

/* Artwork remains visible and interactive, but cannot be dragged as a file. */
img,
.hero-media,
.project-media,
.works-card,
.profile-scene,
.contact-scene,
.works-scene,
.projects-scene,
.notes-scene {
  -webkit-user-drag: none;
}

/* Keep the homepage's existing animation unchanged. */
.animate-blur-fade-up {
  animation: blurFadeUp 1s ease-out backwards;
}

/* Paint the fallback on the root only. An opaque body hides the fixed scenes
   at z-index: -1; the body must stay transparent. */
html { background: #30271f; }

:is(.profile-scene, .contact-scene, .works-scene, .projects-scene, .notes-scene) {
  animation: sceneFadeIn 450ms ease-out backwards;
  transform: scaleX(-1);
}

/* Mirror the background image while keeping the existing lighting in place. */
:is(.profile-scene, .contact-scene, .works-scene, .projects-scene, .notes-scene)::before,
:is(.profile-scene, .contact-scene, .works-scene, .projects-scene, .notes-scene)::after {
  transform: scaleX(-1);
}

/* Plain foreground keeps the existing blur-and-rise entrance. */
:is(.site-brand, .works-brand, .profile-intro > :not(.profile-resume),
    .profile-section-heading, .contact-intro, .projects-intro,
    .notes-intro, .works-copy) {
  animation: blurFadeUp 1s ease-out 400ms backwards;
}

/* Fade the actual glass surface, never a wrapper above it. Its own backdrop
   filter stays constant, so its sampling root does not change at the end. */
:is(.site-nav, .works-nav, .site-menu-toggle, .profile-resume, .profile-card,
    .contact-card, .projects-toolbar, .project-video, .project-placeholder,
    .notes-toolbar, .notes-empty, .works-filters, .works-card) {
  animation: glassFadeUp 1s ease-out var(--entry-delay, 400ms) backwards;
}

/* The parent supplies opacity and movement to both glass and content.
   Only its non-glass foreground sharpens, on the exact same clock. */
:is(.site-nav > a, .works-nav > a, .site-menu-icon,
    .profile-resume > span, .profile-resume > svg, .profile-card-heading,
    .profile-card-body, .contact-card > *, .projects-filters, .projects-library-note,
    .project-caption, .project-action, .project-play > svg, .project-placeholder > *,
    .notes-filters, .notes-library-note, .notes-empty > *, .works-filter,
    .works-card-label) {
  animation: contentSharpen 1s ease-out var(--entry-delay, 400ms) backwards;
}

/* Independent translate preserves existing transforms and positioning. */
@keyframes blurFadeUp {
  from { opacity: 0; filter: blur(20px); translate: 0 40px; }
  to { opacity: 1; filter: none; translate: none; }
}

.site-brand, .works-brand { animation-delay: 0ms; }
.site-nav, .works-nav { --entry-delay: 100ms; }
.site-menu-toggle { --entry-delay: 350ms; }
.works-filters { --entry-delay: 450ms; }
.works-card { --entry-delay: calc(500ms + var(--work-order, 0) * 70ms); }

/* Keep the short stagger when filtering, without the page-entry wait. */
.works-stack[data-filter-motion] .works-card {
  --entry-delay: calc(var(--work-order, 0) * 70ms);
}
.works-stack[data-filter-motion="reset"] :is(.works-card, .works-card-label) {
  animation: none;
}

/* Project cards use the same short sequential entrance as the works page. */
.project-card,
.project-placeholder {
  --entry-delay: calc(500ms + var(--project-order, 0) * 70ms);
}
.projects-grid[data-filter-motion] :is(.project-card, .project-placeholder) {
  --entry-delay: calc(var(--project-order, 0) * 70ms);
}
.projects-grid[data-filter-motion="reset"]
  :is(.project-video, .project-caption, .project-action, .project-play > svg,
      .project-placeholder, .project-placeholder > *) {
  animation: none;
}

@keyframes glassFadeUp {
  from { opacity: 0; translate: 0 40px; }
  to { opacity: 1; translate: none; }
}

@keyframes sceneFadeIn {
  from { opacity: .55; }
  to { opacity: 1; }
}

@keyframes contentSharpen {
  from { filter: blur(20px); }
  to { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.profile-scene, .contact-scene, .works-scene, .projects-scene, .notes-scene,
      .animate-blur-fade-up, .site-brand, .works-brand,
      .site-nav, .works-nav, .site-nav > a, .works-nav > a,
      .site-menu-toggle, .site-menu-icon, .profile-resume, .profile-card,
      .profile-intro > :not(.profile-resume), .profile-resume > span,
      .profile-resume > svg, .profile-section-heading, .profile-card-heading,
      .profile-card-body, .contact-intro, .contact-card, .contact-card > *,
      .projects-intro, .projects-toolbar, .projects-filters, .projects-library-note,
      .project-video, .project-placeholder,
      .project-caption, .project-action, .project-play > svg, .project-placeholder > *,
      .notes-intro, .notes-toolbar, .notes-filters, .notes-library-note,
      .notes-empty, .notes-empty > *, .works-copy, .works-filters,
      .works-filter, .works-card, .works-card-label) { animation: none; }
}