/* Dimensional surfaces. Motion is driven by navigation and direct interaction. */
.presentation-page {
    --depth-ease: cubic-bezier(.2, .8, .2, 1);
    background: radial-gradient(ellipse at 70% 0, #f4f6e9 0, transparent 65%), var(--canvas);
}

.presentation-page .deck-stage { perspective: 1800px; }
/* Page turns may cross the narrow mobile gutter; contain horizontal paint,
   preserving the nested 3D scene and normal vertical document scrolling. */
@media screen {
    .presentation-page .deck-stage { position: relative; overflow-x: clip; }
    /* Only the incoming chapter participates in layout. The departing chapter
       is briefly visible underneath it, already inert and hidden from AT. */
    .presentation-page .deck-stage.is-transitioning { overflow: clip; }
    .presentation-page .deck-slide.is-entering { z-index: 2; }
    .presentation-page .deck-slide.is-exiting {
        position: absolute;
        inset: 0 0 auto;
        z-index: 1;
        pointer-events: none;
        user-select: none;
    }
}
.presentation-page .deck-slide { box-shadow: 0 2px 0 #ffffff70, 0 20px 55px -40px #16331dcc; }
.deck-effects-button[aria-pressed="true"] { background: #dce7ce; border-color: #c3d3b1; }
.deck-effects-button[aria-pressed="false"] { color: #59694e; }
.deck-effects-button:disabled { opacity: .8; cursor: default; }

/* The three capability planes surround the original brand mark. */
.cover-slide { background: radial-gradient(ellipse at 85% 30%, #284a2f 0%, transparent 50%), #112b20; }
.cover-art { perspective: 1100px; }
.cover-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(-5deg) rotateY(-9deg);
}
.cover-scene .cube-frame {
    position: absolute;
    inset: 8%;
    width: 84%;
    transform-style: preserve-3d;
    border: 0;
    border-radius: 0;
}
.cover-scene .cube-frame::before, .cover-scene .cube-frame::after { content: none; }
.cover-scene .cube-frame img {
    width: 94%;
    transform: translateZ(48px);
    filter: drop-shadow(0 35px 24px #03160c99);
}
.cover-scene .cube-cross-one { top: 0; right: -9%; transform: translateZ(20px); }
.cover-scene .cube-cross-two { bottom: 1%; left: -11%; transform: translateZ(28px); }
.cover-orbit {
    position: absolute;
    inset: 4%;
    border: 1px solid #aed87860;
    border-radius: 50%;
    pointer-events: none;
}
.orbit-back { transform: translateZ(-34px) rotateX(29deg) rotateY(-36deg); border-color: #8bad6940; }
.orbit-front { transform: translateZ(14px) rotateX(64deg) rotateY(18deg) rotateZ(-27deg); }
.cube-platform {
    position: absolute;
    inset: 48% 6% -1%;
    border: 1px solid #b5da8440;
    border-radius: 24%;
    background: radial-gradient(ellipse, #9abe6340, #53743c14 55%, transparent 72%);
    transform: translateZ(-45px) rotateX(74deg);
    box-shadow: 0 18px 0 -1px #112b20, 0 19px 0 0 #7b9e4e45;
}
.cube-platform span { display: block; position: absolute; inset: 12%; border: 1px solid #d7f89c30; border-radius: inherit; }
.capability-label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border: 1px solid #aaca8666;
    border-radius: 7px;
    color: #f0f6e6;
    background: #203e2e;
    font: 10px/1.4 var(--mono);
    letter-spacing: .015em;
    box-shadow: 0 10px 22px #04160e66, inset 0 1px #d4f59c18;
    white-space: nowrap;
    pointer-events: none;
}
.capability-label i { width: 5px; height: 5px; background: #caf08e; border-radius: 50%; }
.capability-brand { left: -2%; top: 11%; transform: translateZ(70px) rotateZ(-5deg); }
.capability-technology { right: -3%; top: 45%; transform: translateZ(80px) rotateZ(4deg); }
.capability-growth { bottom: 4%; left: 9%; color: #18321b; background: #d1f29d; border-color: #d1f29d; transform: translateZ(100px) rotateZ(-3deg); }
.capability-growth i { background: #315d2c; }
.capability-growth .deck-icon { width: 13px; height: 13px; }
.art-caption { margin-top: 32px; }

/* Cards separate into a backing plane, a surface and raised content. */
.project-index { perspective: 1300px; }
.project-index-card { perspective: 900px; }
.project-index-art {
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
    box-shadow: 0 5px 0 -1px var(--project), 0 6px 0 0 #17221b2b, 0 20px 28px -23px #17221b99;
}
.project-index-art::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid #ffffff32;
    border-radius: inherit;
    pointer-events: none;
    transform: translateZ(1px);
}
.project-index-art > img { transform: translateZ(30px); backface-visibility: hidden; }
.project-index-number, .project-index-arrow { transform: translateZ(24px); }
.depth-light {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(130deg, #ffffff24, transparent 42%, transparent 60%, #ffffff0b);
    opacity: 0;
    transform: translateZ(2px);
    transition: opacity 200ms ease;
}
.project-index-card:is(:hover, :focus-visible) .depth-light { opacity: 1; }
.project-index-card:focus-visible .project-index-art { transform: perspective(900px) rotateX(3deg) translateY(-4px); }
.project-screen { perspective: 1300px; }
.screen-link {
    box-shadow: 0 4px 0 #ffffff35, 0 5px 0 #0003, 0 18px 30px -16px #0007;
    transition: transform 240ms var(--depth-ease);
}
.screen-link:hover > img { transform: scale(1.012); }
.screen-enlarge { border: 1px solid #ffffff1f; box-shadow: 0 3px 10px #0003; }
.project-index-invite { box-shadow: inset 0 1px #fff9, 0 5px 0 -1px #c7d5b8; }
.project-gallery { background: radial-gradient(ellipse at 80% 0, #ffffff0d, transparent 55%), var(--project); }

/* The depth also expresses the stack, stages and ways of working. */
.tech-stack, .partnership-grid, .roadmap-grid, .solution-grid { perspective: 1200px; }
.tech-layer { box-shadow: 0 5px 0 -1px #09261788, 0 14px 20px -17px #02190ac0; }
.tech-layer:first-child { box-shadow: 0 5px 0 -1px #7fa941, 0 15px 24px -15px #031e0de0; }
.tech-layer:nth-child(2) { box-shadow: 0 5px 0 -1px #9baa8b, 0 15px 24px -15px #031e0de0; }
.solution-card { position: relative; background-image: linear-gradient(135deg, #fff6, transparent 65%); }
.solution-number { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; background: #f4f6e8; border: 1px solid #cbd6bb; box-shadow: 0 3px 0 #c3d0b1; }
.partnership-card { box-shadow: inset 0 1px #fff3, 0 5px 0 -1px #afbea0, 0 17px 22px -22px #203219aa; }
.partnership-card:nth-child(2) { box-shadow: inset 0 1px #fff3, 0 5px 0 -1px #0b1b0f; }
.partnership-card:nth-child(3) { box-shadow: inset 0 1px #fff3, 0 5px 0 -1px #12321e; }
.roadmap-step { position: relative; box-shadow: inset 0 1px #fff8, inset -1px 0 #142d1c24, 0 6px 0 #71915c; }
.roadmap-step > div > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #68885055; border-radius: 50%; box-shadow: 0 3px 0 #546a3630; }
.contact-circle { box-shadow: 0 7px 0 #86a75e, 0 23px 30px -20px #153f2380; }
.deck-button, .deck-page-button.next { box-shadow: inset 0 1px #ffffff32, 0 3px 0 #0002; }
.deck-button:active, .deck-page-button.next:active { box-shadow: inset 0 1px #ffffff32, 0 1px 0 #0002; }

@media (hover: hover) and (pointer: fine) {
    .depth-enabled .cover-scene {
        transform: perspective(1100px) translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) rotateX(calc(-5deg + var(--depth-rx, 0deg))) rotateY(calc(-9deg + var(--depth-ry, 0deg)));
    }
    .depth-enabled .project-index-card .project-index-art,
    .depth-enabled .project-index-card:hover .project-index-art {
        transform: perspective(900px) translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg));
    }
    .depth-enabled .project-screen .screen-link {
        transform: perspective(1300px) rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg));
    }
    .depth-enabled .is-depth-active { transition: none; will-change: transform; }
    .depth-enabled .project-index-card:active .project-index-art { scale: .985; }
}

@media (max-width: 1100px) {
    .cover-scene { width: 95%; margin-inline: auto; }
    .capability-label { padding: 9px 11px; font-size: 9px; }
    .capability-technology { right: -1%; }
}
@media (max-width: 800px) {
    .cover-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; }
    .cover-art { display: block; max-width: 290px; padding: 0 15px; }
    .cover-art .art-label, .cover-art .art-caption { display: none; }
    .cover-scene { width: 100%; }
    .cover-scene .cube-frame img { width: 90%; }
    .capability-label { font-size: 8px; padding: 8px 10px; gap: 6px; }
    .capability-brand { left: -3%; }
    .capability-technology { right: -4%; }
    .capability-growth { bottom: 0; }
}
@media (max-width: 480px) {
    .deck-header { gap: 5px; }
    .deck-tools { gap: 0; }
    .deck-tool { padding-inline: 9px; }
    .deck-brand { font-size: 22px; gap: 6px; }
    .deck-brand img { width: 27px; height: 27px; }
    .deck-header .deck-tools .deck-home { display: none; }
    .cover-art { max-width: 245px; }
    .cover-layout { padding: 32px 0 25px; gap: 28px; }
    .solution-card { grid-template-columns: 32px 1fr; }
    .solution-number { font-size: 10px; }
    .contact-circle { box-shadow: 0 4px 0 #86a75e, 0 12px 22px -16px #153f2380; }
}

/* A single switch cancels JS movement and every CSS movement on this page. */
html.depth-disabled { scroll-behavior: auto; }
.depth-disabled .presentation-page *,
.depth-disabled .presentation-page *::before,
.depth-disabled .presentation-page *::after { animation: none !important; transition: none !important; }
.depth-disabled .presentation-page .cover-scene { transform: none; }
.depth-disabled .presentation-page .project-index-art,
.depth-disabled .presentation-page .screen-link,
.depth-disabled .presentation-page .screen-link img,
.depth-disabled .presentation-page .deck-button,
.depth-disabled .presentation-page .contact-circle,
.depth-disabled .presentation-page .deck-page-button,
.depth-disabled .presentation-page .deck-tool,
.depth-disabled .presentation-page .deck-text-link .deck-icon { transform: none !important; scale: 1 !important; }
.depth-disabled .presentation-page .deck-page-button[data-prev] .deck-icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .presentation-page .cover-scene,
    .presentation-page .project-index-art,
    .presentation-page .screen-link { transform: none !important; }
    .presentation-page *, .presentation-page *::before, .presentation-page *::after { transition: none !important; animation: none !important; }
}
@media print {
    .presentation-page { background: #fff; }
    .presentation-page .deck-stage { perspective: none; }
    .presentation-page .cover-art { display: none; }
    .presentation-page *, .presentation-page *::before, .presentation-page *::after { box-shadow: none !important; transform: none !important; scale: 1 !important; animation: none !important; transition: none !important; }
    .presentation-page .depth-light { display: none; }
}