/* Generated background assets retain their native composition and colors.
   Every viewport and navigation underlay uses the same pixels, without veils. */
:root {
  --subpage-canvas: #b8a489;
  background-color: var(--subpage-canvas);
}

/* The background has its own entrance on every browser and viewport. The
   shared head script waits for decoded pixels before releasing the animation. */
:is(.works-scene, .projects-scene, .notes-scene, .profile-scene, .contact-scene) {
  animation: sceneFadeIn 800ms ease-out both;
  opacity: 1;
  background-color: var(--subpage-canvas);
  filter: none;
}

html[data-scene-state="waiting"] :is(.works-scene, .projects-scene, .notes-scene, .profile-scene, .contact-scene) {
  animation: none;
  opacity: 0;
}

/* Keep a complete previous scene behind the incoming one, including the
   homepage's two optical layers and its actual cover geometry. */
.page-scene-underlay { display: none; }
html[data-previous-scene] .page-scene-underlay {
  display: block;
  position: fixed;
  left: var(--previous-scene-left, 0px);
  top: var(--previous-scene-top, 0px);
  /* Preserve the source crop, while covering a viewport resized mid-handoff. */
  width: max(var(--previous-scene-width, 100%), calc(100% - min(0px, var(--previous-scene-left, 0px))));
  height: max(var(--previous-scene-height, 100%), calc(100% - min(0px, var(--previous-scene-top, 0px))));
  z-index: -1;
  pointer-events: none;
  background-color: var(--subpage-canvas);
  background-image: var(--previous-scene-image);
  background-position: var(--previous-scene-position, center top);
  background-size: cover;
  background-repeat: no-repeat;
}

html[data-previous-scene="index"] .page-scene-underlay {
  background-position: var(--previous-scene-position, center);
}

.page-underlay-blur-top,
.page-underlay-blur-bottom { display: none; }
html[data-previous-scene="index"] :is(.page-underlay-blur-top, .page-underlay-blur-bottom) {
  display: block;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
html[data-previous-scene="index"] .page-underlay-blur-top {
  inset: 0 0 auto;
  height: 220px;
  background: linear-gradient(180deg, rgba(10, 8, 7, .16), rgba(10, 8, 7, .09) 42%, transparent);
  -webkit-backdrop-filter: blur(3.5px) saturate(.96);
  backdrop-filter: blur(3.5px) saturate(.96);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
}
html[data-previous-scene="index"] .page-underlay-blur-bottom {
  inset: 0;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 45%);
  mask-image: linear-gradient(to top, #000 0%, transparent 45%);
}

/* The homepage has an opaque canvas, so its old scene belongs inside it. */
html[data-previous-scene] .cinematic-preview > .page-scene-underlay { z-index: 0; }
html[data-scene-state="waiting"] :is(.hero-media, .cinematic-preview > .blur-top, .cinematic-preview > .blur-bottom) {
  animation: none;
  opacity: 0;
}
html[data-scene-state="fading"] :is(.hero-media, .cinematic-preview > .blur-top, .cinematic-preview > .blur-bottom) {
  animation: sceneFadeIn 800ms ease-out both;
}

@media not all and (min-width: 701px) {
  html[data-previous-scene="index"] .page-underlay-blur-top {
    height: 165px;
    -webkit-backdrop-filter: blur(3px) saturate(.97);
    backdrop-filter: blur(3px) saturate(.97);
  }
}

@keyframes sceneFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.works-scene, .projects-scene, .notes-scene, .profile-scene, .contact-scene),
  html[data-scene-state="waiting"] :is(.works-scene, .projects-scene, .notes-scene, .profile-scene, .contact-scene) {
    animation: none;
    opacity: 1;
  }
  html[data-previous-scene] .page-scene-underlay { display: none; }
  html[data-scene-state] :is(.hero-media, .cinematic-preview > .blur-top, .cinematic-preview > .blur-bottom) {
    animation: none;
    opacity: 1;
  }
}

/* This set is composed in its displayed orientation, without mirroring. */
:is(.works-scene, .projects-scene, .notes-scene, .profile-scene, .contact-scene) {
  transform: none;
}

.works-scene { background-image: url("assets/works-ambient-bg-v15.webp"); }
.projects-scene { background-image: url("assets/projects-ambient-bg-v15.webp"); }
.notes-scene { background-image: url("assets/notes-ambient-bg-v15.webp"); }
.profile-scene { background-image: url("assets/profile-ambient-bg-v15.webp"); }
.contact-scene { background-image: url("assets/contact-ambient-bg-v15.webp"); }