/* ---------------------------------------------------------------------------
   DEFEX Lifecycle - the "How does DEFEX work?" cinematic.

   Everything here is STATIC styling. The module (js/defexLifecycle.js) writes
   only the per-frame values - opacity, transform, width, colour, visibility -
   so a frame never touches layout or the cascade.

   The piece is authored against a fixed 1920x1080 stage; the module scales the
   whole stage to fit its host and letterboxes the remainder. Sizes below are
   therefore stage pixels, never CSS pixels on the user's screen, which is why
   they look enormous.

   Accent lands as three custom properties (--dfx-accent, plus the 90% and 35%
   washes) so a rebrand is one value at the call site rather than a sweep.
--------------------------------------------------------------------------- */

.dfx-cine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0F172B;
    /* Roboto is already the app's face; the design asks for it by name. */
    --dfx-font: Roboto, Helvetica, Arial, sans-serif;
    --dfx-accent: #1747E8;
    --dfx-accent-90: rgba(23, 71, 232, 0.9);
    --dfx-accent-35: rgba(23, 71, 232, 0.35);
    --dfx-surface: #172036;
    --dfx-line: rgba(255, 255, 255, 0.16);
    --dfx-fg2: rgba(255, 255, 255, 0.72);
    --dfx-fg3: rgba(255, 255, 255, 0.34);
}

.dfx-cine__stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
}

.dfx-cine__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% 10%, #172036 0%, #0F172B 62%);
}

/* The one continuous camera. Everything choreographed sits inside it; captions
   deliberately do not, so they stay put while the camera pushes. */
.dfx-cine__cam {
    position: absolute;
    inset: 0;
    transform-origin: 50% 52%;
}

.dfx-cine__shot {
    position: absolute;
    inset: 0;
}

/* ---- opening -------------------------------------------------------- */

.dfx-cine__open {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dfx-cine__wordmark {
    font: 500 132px var(--dfx-font);
    color: #fff;
}

.dfx-cine__rule {
    height: 2px;
    background: var(--dfx-accent);
    margin: 38px 0 34px;
}

.dfx-cine__tagline {
    font: 400 34px var(--dfx-font);
    color: var(--dfx-fg2);
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* ---- chapter rail --------------------------------------------------- */

.dfx-cine__rail {
    position: absolute;
    left: 160px;
    right: 160px;
    top: 74px;
}

.dfx-cine__rail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 20px;
}

.dfx-cine__rail-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.dfx-cine__rail-num {
    font: 500 20px var(--dfx-font);
    letter-spacing: 1px;
}

.dfx-cine__rail-title {
    font: 500 22px var(--dfx-font);
    text-transform: uppercase;
    letter-spacing: 2.4px;
}

.dfx-cine__rail-track {
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.dfx-cine__rail-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    background: var(--dfx-accent);
}

/* ---- chapter title -------------------------------------------------- */

.dfx-cine__chapter {
    position: absolute;
    inset: 0;
}

.dfx-cine__step-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 330px;
    text-align: center;
}

.dfx-cine__step-num {
    font: 500 22px var(--dfx-font);
    color: var(--dfx-accent);
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.dfx-cine__step-title {
    font: 500 82px var(--dfx-font);
    color: #fff;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* ---- graph ---------------------------------------------------------- */

.dfx-cine__node {
    position: absolute;
    top: 552px;                 /* ROW_Y 604 - NH 104 / 2 */
    width: 300px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dfx-surface);
    border: 1px solid var(--dfx-line);
    border-radius: 5px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    font: 500 34px var(--dfx-font);
    color: #fff;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.dfx-cine__node--accent {
    border-color: var(--dfx-accent-90);
    box-shadow: 0 0 0 1px var(--dfx-accent-35), 0 18px 40px rgba(0, 0, 0, 0.35);
}

.dfx-cine__conn {
    position: absolute;
    top: 603px;                 /* ROW_Y - 1 */
    height: 2px;
    background: var(--dfx-fg3);
}

.dfx-cine__conn-head {
    position: absolute;
    right: -1px;
    top: -5px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid var(--dfx-fg3);
}

/* ---- outro map ------------------------------------------------------ */

.dfx-cine__map {
    position: absolute;
    left: 130px;
    right: 130px;
    top: 300px;
    display: flex;
    gap: 44px;
    align-items: flex-start;
}

.dfx-cine__map-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dfx-cine__map-num {
    font: 500 20px var(--dfx-font);
    color: var(--dfx-accent);
    letter-spacing: 3px;
}

.dfx-cine__map-title {
    font: 500 28px var(--dfx-font);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    min-height: 78px;
    line-height: 1.3;
}

.dfx-cine__map-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
}

.dfx-cine__map-cell {
    background: var(--dfx-surface);
    border: 1px solid var(--dfx-line);
    border-radius: 5px;
    padding: 26px 20px;
    font: 400 26px var(--dfx-font);
    color: var(--dfx-fg2);
}

.dfx-cine__scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 43, 0.7);
}

.dfx-cine__close {
    position: absolute;
    left: 0;
    right: 0;
    top: 418px;
    text-align: center;
}

.dfx-cine__close-title {
    font: 500 118px var(--dfx-font);
    color: #fff;
    letter-spacing: 2px;
}

.dfx-cine__close-track {
    margin: 46px auto 0;
    width: 1400px;
    height: 2px;
    background: rgba(255, 255, 255, 0.14);
}

.dfx-cine__close-fill {
    height: 2px;
    background: var(--dfx-accent);
}

.dfx-cine__close-line {
    margin-top: 44px;
    font: 400 38px var(--dfx-font);
    color: var(--dfx-fg2);
    letter-spacing: 0.5px;
}

.dfx-cine__close-line em {
    font-style: normal;
    color: var(--dfx-accent);
}

/* ---- captions ------------------------------------------------------- */

.dfx-cine__caption {
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 9%;
    text-align: center;
    pointer-events: none;
    font: 400 36px var(--dfx-font);
    color: var(--dfx-fg2);
    line-height: 1.45;
}

.dfx-cine__caption strong {
    color: #fff;
    font-weight: 500;
}

/* ---- start affordance ----------------------------------------------- */

/* Audio needs a gesture, and a cinematic that starts muted is worse than one
   that waits. So the piece holds on frame zero behind this until it is asked
   to play. Sits OUTSIDE the scaled stage - it is chrome, not choreography. */
.dfx-cine__start {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 0;
    background: rgba(15, 23, 43, 0.55);
    color: #fff;
    cursor: pointer;
    font: 500 18px Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: background 0.2s ease;
}

.dfx-cine__start:hover {
    background: rgba(15, 23, 43, 0.4);
}

.dfx-cine__start-disc {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--dfx-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.dfx-cine__start-disc::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 8px;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 28px solid #fff;
}

/* ---- reduced motion / transcript ------------------------------------ */

/* The whole point of the piece is the motion, so there is nothing to soften -
   it is replaced outright by the map it ends on plus the spoken text. */
.dfx-cine__transcript {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 48px clamp(24px, 6vw, 120px);
    background: #0F172B;
    color: var(--dfx-fg2);
    font: 400 17px Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.dfx-cine__transcript h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 28px;
}

.dfx-cine__transcript dt {
    color: var(--dfx-accent);
    font-size: 13px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin-top: 24px;
}

.dfx-cine__transcript dd {
    margin: 8px 0 0;
    max-width: 68ch;
}

/* ---- the page frame around the stage --------------------------------
   Owned by the page rather than the module: the module fills whatever box it
   is handed, and this is the box the Training Guide hands it. */

.dfx-cine-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 260px);
    border-radius: 8px;
    overflow: hidden;
    background: #0F172B;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.dfx-cine-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.dfx-cine-scrub {
    flex: 1 1 auto;
    min-width: 120px;
    accent-color: var(--mud-palette-primary, #1747E8);
    cursor: pointer;
}

.dfx-cine-clock {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    opacity: 0.72;
    white-space: nowrap;
}