/* transactology.xyz — Holographic 3D Product Reveal
   Palette: Chrome-Metallic with Prismatic Accents
   Typography: Outfit (geometric) + Space Mono (technical)
*/

:root {
    --void-dark:        #121215;
    --studio-dark:      #1A1A20;
    --panel-surface:    #22222A;
    --highlight-white:  #F0F0F5;
    --neutral-gray:     #A0A0B0;
    --annotation-gray:  #6A6A80;
    --prismatic-pink:   #FF6B8A;
    --prismatic-green:  #6BFFB8;
    --prismatic-blue:   #6B8AFF;
    --metallic-silver:  #C0C0D0;

    --face-size: 300px;
    --face-half: 150px;

    --rot-y: 0deg;
    --rot-x: 0deg;
    --explode: 0;        /* 0 -> 1, multiplies by 400 */
    --wire: 0;           /* 0 -> 1, fades surface to wireframe */
    --shimmer: 0;        /* 0 -> 1, holographic sheen on reassembly */
    --depart: 0;         /* 0 -> 1, shrinks/fades whole object */
    --scale: 1;
}

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

html {
    background: var(--void-dark);
    height: 500vh;       /* total scroll length: 5 phases */
    scroll-behavior: smooth;
}

body {
    background: var(--void-dark);
    color: var(--highlight-white);
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 500vh;
    position: relative;
}

/* ----------- Particle dots: coordinate grid background ---------- */
.particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--metallic-silver);
    opacity: 0.2;
    transform: translate3d(0, 0, 0);
}

/* ----------- Stage: a sticky viewport that holds the cube ---------- */
.stage {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(ellipse at center,
        var(--studio-dark) 0%,
        var(--void-dark) 70%);
    overflow: hidden;
    z-index: 1;
}

.stage__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------- 3D Cube ---------- */
.cube-wrap {
    position: relative;
    width: var(--face-size);
    height: var(--face-size);
    perspective: 1200px;
    perspective-origin: 50% 50%;
    z-index: 5;
    transform: scale(var(--scale));
    opacity: calc(1 - var(--depart));
    transition: opacity 0.2s linear;
}

.cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(var(--rot-y)) rotateX(var(--rot-x));
    will-change: transform;
}

.cube__face {
    position: absolute;
    inset: 0;
    width: var(--face-size);
    height: var(--face-size);
    padding: 28px 26px;
    background: var(--panel-surface);
    background-image: linear-gradient(135deg,
        rgba(255, 107, 138, calc(0.18 * var(--shimmer))),
        rgba(107, 255, 184, calc(0.18 * var(--shimmer))),
        rgba(107, 138, 255, calc(0.18 * var(--shimmer))));
    background-blend-mode: screen;
    border: 1px solid var(--metallic-silver);
    color: var(--highlight-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow:
        inset 0 0 0 1px rgba(192, 192, 208, 0.15),
        0 0 60px rgba(107, 138, 255, calc(0.12 * var(--shimmer)));
    backface-visibility: visible;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Wireframe transition: fade fill, soften border */
.cube__face::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--panel-surface);
    opacity: calc(1 - var(--wire));
    z-index: -1;
    pointer-events: none;
}

.cube__face {
    background-color: transparent;
    border-color: rgba(192, 192, 208, calc(1 - 0.7 * var(--wire)));
}

/* Prismatic edge accent strip on each face (top edge) */
.cube__face::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--prismatic-pink),
        var(--prismatic-green),
        var(--prismatic-blue));
    opacity: 0.85;
    pointer-events: none;
}

/* Face placement: each face translated outward by 150px + explode delta */
.cube__face--front {
    transform: translateZ(calc(var(--face-half) + var(--explode) * 400px));
}
.cube__face--back {
    transform: rotateY(180deg) translateZ(calc(var(--face-half) + var(--explode) * 400px));
}
.cube__face--left {
    transform: rotateY(-90deg) translateZ(calc(var(--face-half) + var(--explode) * 400px));
}
.cube__face--right {
    transform: rotateY(90deg) translateZ(calc(var(--face-half) + var(--explode) * 400px));
}
.cube__face--top {
    transform: rotateX(90deg) translateZ(calc(var(--face-half) + var(--explode) * 400px));
}
.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--face-half) + var(--explode) * 400px));
}

/* ----------- Face content ---------- */
.face__label {
    font-family: "Space Mono", monospace;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.18em;
    color: var(--annotation-gray);
    text-transform: uppercase;
}

.face__title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    color: var(--highlight-white);
    letter-spacing: -0.01em;
}

.face__dot {
    color: var(--prismatic-pink);
}

.face__body {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    color: var(--neutral-gray);
    margin-top: 8px;
}

.face__coord {
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--annotation-gray);
    text-transform: uppercase;
}

/* Color-tag each face's title dot for variety */
.cube__face--back  .face__dot { color: var(--prismatic-green); }
.cube__face--left  .face__dot { color: var(--prismatic-blue); }
.cube__face--right .face__dot { color: var(--prismatic-pink); }
.cube__face--top   .face__dot { color: var(--prismatic-green); }
.cube__face--bottom .face__dot { color: var(--prismatic-blue); }

/* ----------- HUD overlay (top + bottom) ---------- */
.hud {
    position: absolute;
    inset: 0;
    padding: 32px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 8;
}

.hud__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.hud__tag {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--highlight-white);
}

.hud__tag--mono {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--annotation-gray);
}

/* ----------- Copy panels (one per phase) ---------- */
.hero-copy,
.exploded-copy,
.wire-copy,
.reassemble-copy,
.depart-copy {
    position: absolute;
    z-index: 6;
    color: var(--highlight-white);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Hero copy: lower-left */
.hero-copy {
    left: 6vw;
    bottom: 9vh;
    max-width: 380px;
    opacity: var(--copy-reveal, 1);
    transform: translateY(calc((1 - var(--copy-reveal, 1)) * 24px));
}

.hero-copy__eyebrow,
.exploded-copy__eyebrow,
.wire-copy__eyebrow,
.reassemble-copy__eyebrow {
    display: inline-block;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--prismatic-pink);
    margin-bottom: 14px;
}

.hero-copy__title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.05;
    color: var(--highlight-white);
    letter-spacing: -0.015em;
    margin-bottom: 16px;
}

.hero-copy__lede,
.exploded-copy__lede,
.wire-copy__lede,
.reassemble-copy__lede {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
    color: var(--neutral-gray);
    max-width: 380px;
}

.hero-copy__hint {
    display: inline-block;
    margin-top: 22px;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--annotation-gray);
    animation: hint-pulse 2.4s ease-in-out infinite;
}

/* Exploded copy: upper-right */
.exploded-copy {
    right: 6vw;
    top: 14vh;
    max-width: 360px;
    text-align: right;
    opacity: var(--copy-exploded, 0);
    transform: translateY(calc((1 - var(--copy-exploded, 0)) * 30px));
}

.exploded-copy__eyebrow { color: var(--prismatic-green); }

.exploded-copy__title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.1;
    color: var(--highlight-white);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

/* Wire copy: lower-right */
.wire-copy {
    right: 6vw;
    bottom: 12vh;
    max-width: 340px;
    text-align: right;
    opacity: var(--copy-wireframe, 0);
    transform: translateY(calc((1 - var(--copy-wireframe, 0)) * 30px));
}

.wire-copy__eyebrow { color: var(--prismatic-blue); }

.wire-copy__title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    color: var(--highlight-white);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.wire-copy__list {
    list-style: none;
    margin-top: 18px;
    border-top: 1px solid rgba(192, 192, 208, 0.25);
}

.wire-copy__list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--annotation-gray);
    border-bottom: 1px solid rgba(192, 192, 208, 0.15);
}

.wire-copy__list li span:last-child {
    color: var(--highlight-white);
}

/* Reassemble copy: upper-left */
.reassemble-copy {
    left: 6vw;
    top: 14vh;
    max-width: 380px;
    opacity: var(--copy-reassembly, 0);
    transform: translateY(calc((1 - var(--copy-reassembly, 0)) * 30px));
}

.reassemble-copy__eyebrow {
    background: linear-gradient(90deg,
        var(--prismatic-pink),
        var(--prismatic-green),
        var(--prismatic-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.reassemble-copy__title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.1;
    color: var(--highlight-white);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

/* Departure copy: dead center, single line */
.depart-copy {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 720px;
    text-align: center;
    opacity: var(--copy-departure, 0);
}

.depart-copy__line {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.2;
    color: var(--highlight-white);
    letter-spacing: -0.01em;
    background: linear-gradient(90deg,
        var(--prismatic-pink),
        var(--prismatic-green),
        var(--prismatic-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Outlined oversized numerals as depth markers */
.hero-copy::before,
.exploded-copy::before,
.wire-copy::before,
.reassemble-copy::before {
    position: absolute;
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 220px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--metallic-silver);
    opacity: 0.18;
    z-index: -1;
    pointer-events: none;
    letter-spacing: -0.04em;
}

.hero-copy::before {
    content: "01";
    top: -110px;
    left: -20px;
}

.exploded-copy::before {
    content: "02";
    top: -100px;
    right: -10px;
}

.wire-copy::before {
    content: "03";
    bottom: -90px;
    right: -10px;
}

.reassemble-copy::before {
    content: "04";
    top: -110px;
    left: -10px;
}

/* ----------- Side scroll-track (visual rail of phases) ---------- */
.scroll-track {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9;
    pointer-events: none;
}

.scroll-track__phase {
    width: 2px;
    height: 32px;
    background: rgba(192, 192, 208, 0.2);
    position: relative;
    overflow: hidden;
}

.scroll-track__phase::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        var(--prismatic-pink),
        var(--prismatic-green),
        var(--prismatic-blue));
    transform: scaleY(var(--track-fill, 0));
    transform-origin: top;
    transition: transform 0.25s ease;
}

/* ----------- Footer ---------- */
.page-foot {
    position: relative;
    z-index: 2;
    padding: 24px 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--void-dark);
    border-top: 1px solid rgba(192, 192, 208, 0.12);
}

.page-foot__mark {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--highlight-white);
}

.page-foot__mono {
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--annotation-gray);
}

/* ----------- Animations ---------- */
@keyframes hint-pulse {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50%      { opacity: 0.9; transform: translateY(4px); }
}

/* ----------- Responsive ---------- */
@media (max-width: 900px) {
    :root {
        --face-size: 220px;
        --face-half: 110px;
    }

    .hero-copy,
    .reassemble-copy {
        left: 5vw;
        max-width: 80vw;
    }

    .exploded-copy,
    .wire-copy {
        right: 5vw;
        max-width: 80vw;
    }

    .hero-copy__title         { font-size: 32px; }
    .exploded-copy__title     { font-size: 26px; }
    .wire-copy__title         { font-size: 24px; }
    .reassemble-copy__title   { font-size: 28px; }
    .depart-copy__line        { font-size: 24px; }

    .hud { padding: 20px 22px; }
    .page-foot { padding: 18px 22px; flex-direction: column; gap: 8px; align-items: flex-start; }

    .face__title { font-size: 22px; }
    .face__body  { font-size: 12px; }

    .scroll-track { right: 12px; }
}

@media (max-width: 600px) {
    :root {
        --face-size: 180px;
        --face-half: 90px;
    }

    .cube__face { padding: 18px 16px; }
    .face__title { font-size: 18px; }
    .face__body  { font-size: 11px; line-height: 1.5; }
    .face__label, .face__coord { font-size: 9px; }
}