:root {
    --bg: #07080c;
    --bg-deep: #05060a;
    --ink: #F5F3EE;
    --ink-soft: #D2CDC4;
    --muted: #9A948A;
    --line: #2A2D36;
    --card: #12141a;
    --accent: #7ec8ff;
    --accent-warm: #D4A06A;
    --accent-deep: #E0B484;
    --live: #7DB88A;
    --font-display: "Outfit", system-ui, sans-serif;
    --font-serif: "Fraunces", Georgia, serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --header-h: 4.25rem;
    /* Fraction of the 16:9 painting that must stay on screen (desk + products). */
    --stage-x1: 0.37;
    --stage-x2: 0.70;
    --stage-y1: 0.40;
    --stage-y2: 0.90;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    color-scheme: dark;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-display);
    overflow: hidden;
    overscroll-behavior: none;
    background: #05060a;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 72%, transparent), transparent);
}

.header-inner {
    width: min(1200px, calc(100% - 2.5rem));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
}

.logo-mark {
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 0.45rem;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.85rem;
    font-weight: 700;
}

.logo-text {
    font-size: 0.95rem;
}

.site-nav {
    display: flex;
    gap: 1.25rem;
}

/* Reads over whichever part of the painting is behind the header, so it carries
   its own contrast rather than relying on the header scrim alone. */
.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--ink) 88%, transparent);
    text-shadow: 0 1px 10px #000, 0 0 24px #000;
    transition: color 0.2s;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--ink);
}

.lab {
    position: relative;
    height: 100svh;
    height: 100dvh;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

/* Bleeds the painting into the letterbox instead of leaving hard black bars. */
.lab::before {
    content: "";
    position: absolute;
    inset: -6%;
    background-image: var(--lab-image, none);
    background-size: cover;
    background-position: var(--lab-pos, center);
    filter: blur(46px) brightness(0.42) saturate(0.75);
    z-index: 0;
}

html[data-sky="night"] { --lab-image: url("images/lab-night.jpg"); }
html[data-sky="day"] { --lab-image: url("images/lab-day.jpg"); }

/* The artwork defines the stage: the scene box always stays 16:9 so overlays
   can sit in image coordinates. Width grows toward cover, but never so far
   that the desk products leave the starting view — swipe or drag to look around. */
.lab-scene {
    position: relative;
    width: min(
        max(100vw, calc(100dvh * 16 / 9)),
        calc(100vw / (var(--stage-x2) - var(--stage-x1))),
        calc(100dvh / (var(--stage-y2) - var(--stage-y1)) * 16 / 9)
    );
    aspect-ratio: 16 / 9;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 0 80px 20px color-mix(in oklab, black 65%, transparent);
    /* No scale() on the scene: a fractional composite resample softens the
       artwork and every glyph drawn on it. Size is width + aspect-ratio. */
    transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0)
        translate3d(var(--px, 0px), var(--py, 0px), 0);
    will-change: transform;
    touch-action: none;
    /* cqw lets every overlay scale with the painting instead of the viewport. */
    container-type: inline-size;
}

.lab-scene.is-fitted {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--scene-w);
    box-shadow: none;
}

.lab-scene.is-pannable {
    cursor: grab;
}

.lab-scene.is-panning {
    cursor: grabbing;
}

.lab-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

html[data-sky="night"] .lab-photo--night,
html[data-sky="day"] .lab-photo--day {
    opacity: 1;
}

/* Sits over the moon / sun already painted into the window. */
.sky-glow {
    position: absolute;
    left: 24.2%;
    top: 16.5%;
    width: 5.5%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in oklab, #cfe6ff 42%, transparent) 0%, transparent 62%);
    animation: sky-breathe 7s ease-in-out infinite;
}

html[data-sky="day"] .sky-glow {
    left: 24.2%;
    top: 16.5%;
    width: 8%;
    background: radial-gradient(circle, color-mix(in oklab, #ffd48a 45%, transparent) 0%, transparent 64%);
}

/* Each .screen is pinned to a monitor that exists in the painting. */
.screens {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* No fill: a tinted box would read as a rectangle floating over the painting
   wherever the traced bounds miss the bezel by a pixel. */
.screen {
    position: absolute;
    overflow: hidden;
    mix-blend-mode: screen;
}

/* Coordinates traced from the glowing text areas of the source painting. Now
   that Caelum faces the wall, nothing of his overlaps the top two rows, so each
   feed gets the full width of its bezel. */
.screen--m1 { left: 68.7%; top: 19.6%; width: 4.1%; height: 8.2%; }
.screen--m2 { left: 77.1%; top: 17.3%; width: 4.5%; height: 9.5%; }
.screen--m3 { left: 69.3%; top: 31.1%; width: 3.7%; height: 7.8%; }
.screen--m4 { left: 75.7%; top: 30.5%; width: 5.8%; height: 8.9%; }
.screen--m5 { left: 84.3%; top: 29.8%; width: 4.9%; height: 9.1%; }

.screen-feed {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: max(0.46cqw, 5px);
    line-height: 1.5;
    color: #8ce8ff;
    text-shadow: 0 0 0.25cqw color-mix(in oklab, #8ce8ff 70%, transparent);
    white-space: pre;
    transform: translateY(0);
    transition: transform 0.9s linear;
}

.hotspot {
    position: absolute;
    z-index: 4;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
    opacity: 0.35;
    transition: opacity 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.hotspot:hover,
.hotspot:focus-visible {
    opacity: 1;
    transform: scale(1.12);
    box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 45%, transparent);
}

.hotspot-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: max(0.8cqw, 0.62rem);
    letter-spacing: 0.06em;
    background: color-mix(in oklab, #0b1018 78%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label {
    opacity: 1;
}

.hotspot--window {
    left: 28%;
    top: 28%;
    width: 1.7%;
    aspect-ratio: 1;
}

.hotspot--printer {
    left: 33%;
    top: 52%;
    width: 1.7%;
    aspect-ratio: 1;
}

.hotspot--chair {
    left: 12.5%;
    top: 68%;
    width: 1.7%;
    aspect-ratio: 1;
}

/* Traced to the projector puck painted on the desk, so the plate stands in the
   cone of light coming off it. */
.hologram {
    position: absolute;
    z-index: 7;
    width: 5.4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    animation: hologram-float 6s ease-in-out infinite;
}

/* Centred on the emitter puck. left is the puck centre; translateX(-50%)
   keeps the plate on that axis. Caption sits above the plate so it does not
   cover the puck. */
.hologram--nimlo {
    left: 64.1%;
    top: 51.5%;
    transform: translateX(-50%);
    animation-duration: 7.1s;
    animation-delay: -1.6s;
}

.hologram--nimlo .hologram-caption {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.35cqw);
    width: max-content;
    transform: translateX(-50%);
}

/* Hidden while its clone is flying to the centre of the screen. */
.hologram.is-launching {
    opacity: 0;
}

/* Troutt is the open sketchbook painted on the desk rather than a projection —
   this is just the hit area, the lighting and the label over it. */
.notebook {
    position: absolute;
    left: 38.5%;
    top: 71.5%;
    width: 16.5%;
    height: 14%;
    z-index: 7;
    background: none;
}

.notebook-glow {
    position: absolute;
    inset: -18% -8%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in oklab, var(--accent) 26%, transparent) 0%, transparent 68%);
    /* Faintly lit at rest so touch users can tell the book is a control. */
    opacity: 0.3;
    transition: opacity 0.3s;
}

.notebook:hover .notebook-glow,
.notebook:focus-visible .notebook-glow {
    opacity: 1;
}

/* Above the book, not below it: the book runs to 94% of the scene and the label
   would hang off the bottom edge. */
.notebook .hologram-caption {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.4cqw);
    width: 100%;
    transform: translateX(-50%);
}

/* The projector cone rising off the desk. */
.hologram::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2.5cqw;
    width: 150%;
    height: 105%;
    transform: translateX(-50%);
    clip-path: polygon(50% 100%, 42% 100%, 0 0, 100% 0, 58% 100%);
    background: linear-gradient(to top, color-mix(in oklab, var(--accent) 26%, transparent), transparent 85%);
    filter: blur(0.3cqw);
    pointer-events: none;
}

.hologram-plate {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 0.35cqw;
    overflow: hidden;
    border: 0.08cqw solid color-mix(in oklab, var(--accent) 65%, transparent);
    box-shadow:
        0 0 1.6cqw color-mix(in oklab, var(--accent) 40%, transparent),
        inset 0 0 1.2cqw color-mix(in oklab, var(--accent) 30%, transparent);
    background: #04121c;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

/* Full screenshot, never cropped. */
.hologram-plate img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.94;
    filter: saturate(1.2) contrast(1.05);
}

.hologram-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, color-mix(in oklab, var(--accent) 16%, transparent), transparent 45%, color-mix(in oklab, var(--accent) 20%, transparent)),
        repeating-linear-gradient(
            to bottom,
            color-mix(in oklab, #8fe6ff 14%, transparent) 0 0.08cqw,
            transparent 0.08cqw 0.24cqw
        );
    mix-blend-mode: screen;
}

.hologram-base {
    width: 70%;
    height: 0.7cqw;
    margin-top: 0.4cqw;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in oklab, var(--accent) 70%, transparent) 0%, transparent 70%);
    filter: blur(0.15cqw);
}

.hologram-caption {
    text-align: center;
    text-shadow: 0 0.15cqw 0.6cqw #000;
    /* Wider than the narrow plate it sits under, so it never wraps. */
    white-space: nowrap;
}

.hologram-name {
    display: block;
    font-size: max(1.7cqw, 0.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hologram-meta {
    display: block;
    font-size: max(0.95cqw, 0.58rem);
    letter-spacing: 0.06em;
    color: var(--accent);
}

.hologram:hover .hologram-plate,
.hologram:focus-visible .hologram-plate {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 0 34px color-mix(in oklab, var(--accent) 55%, transparent);
}

@keyframes hologram-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

@keyframes sky-breathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.sheet {
    width: min(980px, calc(100% - 1.5rem));
    max-height: min(86vh, 900px);
    margin: auto;
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    background: color-mix(in oklab, var(--card) 92%, #000);
    color: var(--ink);
    box-shadow: 0 30px 80px color-mix(in oklab, black 55%, transparent);
}

/* Picks up where the hologram's flight to centre screen leaves off. */
.sheet[open] {
    animation: sheet-expand 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Opened without a flight leading into it, so it just fades up in place. */
.sheet--plain[open] {
    animation: sheet-fade 0.3s ease;
}

.sheet::backdrop {
    background: color-mix(in oklab, #05060a 62%, transparent);
    backdrop-filter: blur(8px);
}

.sheet[open]::backdrop {
    animation: sheet-fade 0.42s ease;
}

.sheet.is-closing,
.sheet.is-closing::backdrop {
    animation: sheet-out 0.24s ease forwards;
}

@keyframes sheet-expand {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sheet-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sheet-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* The plate copy that flies from the desk to the centre of the screen. */
.hologram-fly {
    position: fixed;
    z-index: 60;
    margin: 0;
    overflow: hidden;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in oklab, var(--accent) 65%, transparent);
    box-shadow: 0 0 40px color-mix(in oklab, var(--accent) 45%, transparent);
    background: #04121c;
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity;
}

.hologram-fly img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sheet--copy {
    width: min(560px, calc(100% - 1.5rem));
}

.sheet-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 1rem 0;
}

.sheet-close {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.sheet-close:hover {
    color: var(--ink);
}

.sheet-body {
    padding: 0 1.5rem 1.75rem;
    overflow: auto;
}

.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: lowercase;
    color: var(--accent-warm);
    margin-bottom: 0.7rem;
}

.sheet-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.sheet-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.sheet-lead {
    font-size: 1.2rem;
    color: var(--ink-soft);
    margin-bottom: 0.7rem;
}

.sheet-copy {
    color: var(--muted);
    margin-bottom: 1.4rem;
    max-width: 40rem;
}

.app-list {
    list-style: none;
    display: grid;
    gap: 1.4rem;
}

.app-listing {
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}

.app-listing-name {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 0.2rem;
}

.app-listing-meta {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.55rem;
}

.app-listing .sheet-lead {
    font-size: 1.05rem;
}

.app-listing .sheet-copy {
    margin-bottom: 0.9rem;
}

.app-listing .store-btn {
    padding: 0.55rem 0.9rem;
    gap: 0.5rem;
}

.app-listing .store-btn svg {
    width: 18px;
    height: 18px;
}

.app-listing .store-btn span {
    font-size: 0.9rem;
}

.principles {
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.principles li {
    padding-left: 0.9rem;
    border-left: 2px solid color-mix(in oklab, var(--accent-warm) 55%, transparent);
}

.principles span {
    color: var(--accent-deep);
    font-weight: 600;
}

.product-status {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.product-status--live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--live);
    border-color: color-mix(in oklab, var(--live) 35%, var(--line));
    background: color-mix(in oklab, var(--live) 8%, transparent);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live);
}

.version-pill {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--accent-warm) 16%, var(--card));
    color: var(--accent-deep);
    border: 1px solid color-mix(in oklab, var(--accent-warm) 35%, var(--line));
    vertical-align: middle;
}

.showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.showcase--five {
    grid-template-columns: repeat(5, 1fr);
}

.phone {
    margin: 0;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-deep);
}

.download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.25rem;
    border-radius: 0.85rem;
    background: var(--ink);
    color: var(--bg);
    transition: transform 0.25s var(--ease-out), opacity 0.25s;
}

.store-btn:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.store-btn span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.15;
}

.store-btn small {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.store-btn--soon {
    background: color-mix(in oklab, var(--card) 70%, var(--line));
    color: var(--ink-soft);
    border: 1px solid var(--line);
    cursor: default;
}

.store-btn--soon:hover {
    transform: none;
    opacity: 1;
}

.contact-mail {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.site-footer {
    position: fixed;
    right: 1.25rem;
    bottom: 0.7rem;
    z-index: 6;
    pointer-events: none;
}

.copyright {
    font-size: 0.7rem;
    color: color-mix(in oklab, var(--muted) 80%, transparent);
}

@media (max-width: 820px) {
    .logo-text {
        display: none;
    }

    .hotspot {
        display: none;
    }

    .showcase,
    .showcase--five {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer {
        display: none;
    }
}

@media (max-aspect-ratio: 5 / 4) {
    .lab-scene {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lab-scene {
        --px: 0;
        --py: 0;
    }

    .sky-glow,
    .hologram,
    .screen-feed {
        animation: none;
        transition: none;
    }
}