/*
 * DESIGN-011 — Dimensional Luminous experience
 * Decorative spatial depth for generated content pages. Semantic content
 * remains outside this layer and complete without JavaScript or WebGL.
 */

:root {
  --depth-perspective: 1200px;
  --depth-surface-shadow: 0 24px 64px rgba(0, 105, 56, 0.1);
  --depth-surface-shadow-hover: 0 30px 74px rgba(0, 105, 56, 0.14);
  --dimensional-line: rgba(98, 189, 93, 0.42);
  --dimensional-line-soft: rgba(0, 105, 56, 0.13);
  --dimensional-glow: rgba(98, 189, 93, 0.16);
}

.page-hero {
  perspective: var(--depth-perspective);
}

.page-hero__content,
.page-hero__media {
  position: relative;
}

.page-hero__content {
  z-index: 4;
}

.page-hero__media {
  z-index: 2;
}

[data-dimensional-root] {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  contain: layout paint style;
  pointer-events: none;
  transform: translateZ(0);
}

.page-hero > [data-dimensional-root] {
  right: 0;
  left: auto;
  width: min(62vw, 920px);
}

.dimensional-scene__fallback,
.dimensional-scene__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.dimensional-scene__fallback {
  overflow: hidden;
  opacity: 1;
  transition: opacity 320ms ease;
}

.dimensional-scene__fallback::before,
.dimensional-scene__fallback::after {
  position: absolute;
  content: "";
}

.dimensional-scene__fallback::before {
  top: 13%;
  right: 5%;
  width: min(52vw, 660px);
  height: 58%;
  border: 1px solid var(--dimensional-line);
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.2), transparent 54%),
    rgba(237, 245, 236, 0.1);
  box-shadow:
    0 28px 70px rgba(0, 105, 56, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.42);
  transform: perspective(900px) rotateY(-7deg) rotateX(3deg);
  transform-origin: right center;
}

.dimensional-scene__fallback::after {
  right: 7%;
  bottom: 16%;
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-fresh) 28%, var(--brand-deep));
  box-shadow: 0 0 18px var(--dimensional-glow);
}

.dimensional-scene__canvas {
  opacity: 0;
  transition: opacity 420ms ease;
}

.has-dimensional-webgl .dimensional-scene__fallback,
[data-dimensional-root].has-dimensional-webgl .dimensional-scene__fallback {
  opacity: 0;
}

.has-dimensional-webgl .dimensional-scene__canvas,
[data-dimensional-root].has-dimensional-webgl .dimensional-scene__canvas {
  opacity: 0.32;
}

.is-dimensional-fallback .dimensional-scene__fallback,
[data-dimensional-root].is-dimensional-fallback .dimensional-scene__fallback {
  opacity: 1;
}

.is-dimensional-fallback .dimensional-scene__canvas,
[data-dimensional-root].is-dimensional-fallback .dimensional-scene__canvas {
  opacity: 0;
}

[data-dimensional-root].is-context-lost .dimensional-scene__fallback {
  opacity: 1;
}

[data-dimensional-root].is-context-lost .dimensional-scene__canvas {
  opacity: 0;
}

/* Keep authored hero photography clean while retaining the light frame. */
.page-hero > [data-dimensional-root].has-dimensional-webgl .dimensional-scene__fallback {
  opacity: 1;
}

.page-hero > [data-dimensional-root].has-dimensional-webgl .dimensional-scene__canvas {
  opacity: 0;
}

/*
 * Route fallbacks echo the same architectural motifs as the WebGL scene.
 * Selectors work whether the route token is on body, main, or the scene root.
 */

:is(
  [data-dimensional-root][data-dimensional-scene="services"],
  [data-dimensional-scene="services"] [data-dimensional-root]
) .dimensional-scene__fallback::before {
  border: 0;
  background:
    linear-gradient(var(--dimensional-line), var(--dimensional-line)) 10% 12% / 72% 1px no-repeat,
    linear-gradient(var(--dimensional-line), var(--dimensional-line)) 23% 42% / 72% 1px no-repeat,
    linear-gradient(var(--dimensional-line), var(--dimensional-line)) 36% 72% / 60% 1px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(237, 245, 236, 0.12));
  clip-path: polygon(12% 0, 100% 13%, 83% 100%, 0 82%);
  box-shadow: 24px 26px 0 rgba(98, 189, 93, 0.06);
}

:is(
  [data-dimensional-root][data-dimensional-scene="projects"],
  [data-dimensional-scene="projects"] [data-dimensional-root]
) .dimensional-scene__fallback::before {
  top: 17%;
  right: 7%;
  width: min(38vw, 500px);
  height: 50%;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(237, 245, 236, 0.12));
  box-shadow:
    -76px 72px 0 -1px rgba(255, 255, 255, 0.16),
    -76px 72px 0 0 var(--dimensional-line-soft),
    52px 38px 0 -1px rgba(237, 245, 236, 0.14),
    52px 38px 0 0 var(--dimensional-line-soft);
}

/* Projects hero: turn the fallback frame into a quiet contact sheet of the
   curated collection instead of leaving the dimensional panel empty. */
:is(
  [data-dimensional-root][data-dimensional-scene="projects"],
  [data-dimensional-scene="projects"] [data-dimensional-root]
) .project-preview {
  position: absolute;
  top: 17%;
  right: 7%;
  z-index: 1;
  display: grid;
  width: min(38vw, 500px);
  aspect-ratio: 1.08;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 0.8vw, 12px);
  padding: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
  border: 1px solid rgba(0, 105, 56, 0.18);
  border-radius: clamp(16px, 2vw, 26px);
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 28px 72px rgba(0, 105, 56, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.9);
  transform: perspective(900px) rotateY(-7deg) rotateX(3deg);
  transform-origin: right center;
}

:is(
  [data-dimensional-root][data-dimensional-scene="projects"],
  [data-dimensional-scene="projects"] [data-dimensional-root]
) .project-preview__image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border-radius: clamp(7px, 0.9vw, 12px);
  background: var(--surface-sage);
  box-shadow: 0 8px 18px rgba(0, 105, 56, 0.1);
  filter: saturate(0.94) contrast(0.98);
  transition: transform 420ms ease, filter 420ms ease;
}

:is(
  [data-dimensional-root][data-dimensional-scene="projects"],
  [data-dimensional-scene="projects"] [data-dimensional-root]
) .project-preview__image--1 {
  grid-column: span 2;
}

:is(
  [data-dimensional-root][data-dimensional-scene="projects"],
  [data-dimensional-scene="projects"] [data-dimensional-root]
) .project-preview__image--4 {
  grid-row: span 2;
}

:is(
  [data-dimensional-root][data-dimensional-scene="projects"],
  [data-dimensional-scene="projects"] [data-dimensional-root]
) .project-preview:hover .project-preview__image {
  filter: saturate(1.04) contrast(1);
  transform: scale(1.025);
}

:is(
  [data-dimensional-root][data-dimensional-scene="about"],
  [data-dimensional-scene="about"] [data-dimensional-root]
) .dimensional-scene__fallback::before {
  top: 8%;
  right: 18%;
  width: min(25vw, 330px);
  height: 76%;
  border-width: 0 0 0 1px;
  background:
    linear-gradient(90deg, rgba(98, 189, 93, 0.09), transparent 72%),
    linear-gradient(transparent 24%, var(--dimensional-line-soft) 24% 24.3%, transparent 24.3% 62%, var(--dimensional-line-soft) 62% 62.3%, transparent 62.3%);
  box-shadow: -26px 0 52px rgba(0, 105, 56, 0.06);
}

:is(
  [data-dimensional-root][data-dimensional-scene="contact"],
  [data-dimensional-scene="contact"] [data-dimensional-root]
) .dimensional-scene__fallback::before {
  top: 15%;
  right: -8%;
  width: min(50vw, 650px);
  height: min(50vw, 650px);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 54px rgba(98, 189, 93, 0.045),
    0 0 0 108px rgba(0, 105, 56, 0.035);
}

/*
 * Existing editorial surfaces gain one shared, shallow physical response.
 * Pointer values are clamped to DESIGN-011's sub-0.6deg limit.
 */

:where(
  .service-section,
  .service-section__capabilities li,
  .process-list > li,
  .project-card,
  .principle-card,
  .contact-channel
) {
  --depth-x: 0deg;
  --depth-y: 0deg;
  --depth-z: 0px;
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.service-section,
.project-card img {
  box-shadow: var(--depth-surface-shadow);
}

.service-section::after,
.project-card::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(126deg, rgba(255, 255, 255, 0.24), transparent 32%, rgba(98, 189, 93, 0.055));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.project-card::after {
  bottom: auto;
  height: min(72%, 620px);
  border-radius: clamp(18px, 2.4vw, 32px);
}

[data-dimensional-scene="about"] .principle-card {
  transform-origin: left center;
}

[data-dimensional-scene="contact"] .contact-channel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), transparent 70%);
}

[data-dimensional-scene="projects"] .project-card:nth-child(even) {
  transform-origin: right center;
}

body[data-dimensional-scene="services"] .service-section {
  border-radius: clamp(10px, 1.5vw, 20px);
}

body[data-dimensional-scene="about"] .principles {
  background:
    linear-gradient(90deg, transparent calc(var(--page-gutter) - 1px), var(--dimensional-line) var(--page-gutter), transparent calc(var(--page-gutter) + 1px)),
    var(--surface-raised);
}

body[data-dimensional-scene="contact"] .page-hero--text {
  min-height: min(72svh, 760px);
}

body[data-dimensional-scene="contact"] .page-hero--text .page-hero__content {
  min-height: inherit;
  padding-top: clamp(54px, 8vw, 94px);
  padding-bottom: clamp(54px, 8vw, 94px);
}

/*
 * Journey-stage variants translate the route motifs into lightweight CSS 3D.
 * Native document scroll drives the shared --journey-progress token; the
 * semantic chapters remain complete when this decorative layer is absent.
 */

body[data-dimensional-scene="services"] .experience-journey__plane {
  border-radius: 8px;
  clip-path: polygon(8% 0, 100% 12%, 90% 100%, 0 86%);
}

body[data-dimensional-scene="projects"] .experience-journey__plane {
  border-radius: clamp(20px, 3vw, 38px);
}

body[data-dimensional-scene="about"] .experience-journey__orbit {
  width: min(26vw, 350px);
}

body[data-dimensional-scene="about"] .experience-journey__plane {
  right: 38%;
  left: 38%;
  border-radius: 999px;
}

body[data-dimensional-scene="about"] .experience-journey__datum {
  box-shadow:
    0 0 26px rgba(98, 189, 93, 0.46),
    -42px 0 76px rgba(0, 105, 56, 0.12);
}

body[data-dimensional-scene="contact"] .experience-journey__plane {
  border-radius: 50%;
  background: transparent;
}

body[data-dimensional-scene="contact"] .experience-journey__plane--one {
  box-shadow:
    0 0 0 32px rgba(98, 189, 93, 0.055),
    0 0 0 64px rgba(0, 105, 56, 0.04);
}

@media (min-width: 961px) {
  .page-hero__media {
    height: calc(100svh - var(--header-height) - clamp(28px, 4vw, 60px));
    min-height: 0;
  }

  body[data-dimensional-scene="services"] .page-hero h1 {
    max-width: 14ch;
    font-size: clamp(52px, 4.8vw, 76px);
  }
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .service-section,
    .service-section__capabilities li,
    .process-list > li,
    .project-card,
    .principle-card,
    .contact-channel
  ) {
    transform:
      perspective(var(--depth-perspective))
      translate3d(0, var(--depth-z), 0)
      rotateX(clamp(-0.55deg, var(--depth-x), 0.55deg))
      rotateY(clamp(-0.55deg, var(--depth-y), 0.55deg));
    transition:
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 420ms ease,
      border-color 180ms ease;
  }

  :where(
    .service-section,
    .service-section__capabilities li,
    .process-list > li,
    .project-card,
    .principle-card,
    .contact-channel
  ):hover {
    --depth-z: -6px;
  }

  .service-section:hover,
  .project-card:hover img {
    box-shadow: var(--depth-surface-shadow-hover);
  }

  .service-section:hover::after,
  .project-card:hover::after {
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .page-hero > [data-dimensional-root] {
    top: 0;
    bottom: auto;
    width: min(78vw, 640px);
    height: 58%;
    opacity: 0.72;
  }

  .dimensional-scene__fallback::before {
    right: -10%;
  }

  :is(
    [data-dimensional-root][data-dimensional-scene="projects"],
    [data-dimensional-scene="projects"] [data-dimensional-root]
  ) .project-preview {
    top: 12%;
    right: 4%;
    width: min(78vw, 420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    [data-dimensional-root][data-dimensional-scene="projects"],
    [data-dimensional-scene="projects"] [data-dimensional-root]
  ) .project-preview__image {
    transition: none;
  }
}

@media (max-width: 640px), (hover: none), (pointer: coarse) {
  :where(
    .service-section,
    .service-section__capabilities li,
    .process-list > li,
    .project-card,
    .principle-card,
    .contact-channel
  ) {
    --depth-x: 0deg;
    --depth-y: 0deg;
    --depth-z: 0px;
    transform: none;
    transition: none;
  }

  .page-hero > [data-dimensional-root] {
    width: min(86vw, 520px);
    height: 48%;
    opacity: 0.52;
  }

  .service-section::after,
  .project-card::after {
    opacity: 0;
  }

  body[data-dimensional-scene="contact"] .page-hero--text {
    min-height: min(68svh, 620px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-dimensional-root],
  .dimensional-scene__fallback,
  .dimensional-scene__canvas,
  :where(
    .service-section,
    .service-section__capabilities li,
    .process-list > li,
    .project-card,
    .principle-card,
    .contact-channel
  ),
  .service-section::after,
  .project-card::after {
    animation: none !important;
    transition: none !important;
  }

  :where(
    .service-section,
    .service-section__capabilities li,
    .process-list > li,
    .project-card,
    .principle-card,
    .contact-channel
  ) {
    --depth-x: 0deg;
    --depth-y: 0deg;
    --depth-z: 0px;
    transform: none !important;
  }
}