/* Round two · the devices demo 1 and demo 3 draw with (round-two.html).

   The owner, 2026-09-14: "Just make sure the phones are consistent so it
   doesn't look like different designs." One browser window, one timer chip
   and one phone are defined here once. Demo 1 shows the owner's phone and
   demo 3 shows Sam's; the screens inside the phone are r2-screens.css.

   Sizes are design pixels times --u: the section's unit (--bmw-u, set on the
   two demo sections in r2-page.css) times --dfit, the fit r2-demos.js
   measures so each demo shows whole under the menu with its type legible.
   The phone also multiplies by --ps (smaller on phones), as --pu. The
   smallest type in a device is 12 design pixels.

   Motion here is transform and opacity only, so the compositor carries it
   and a low-power laptop keeps up. Anything that loops pauses while its
   section is off screen (.is-offscreen, set by r2-demos.js). */
.dv-scene {
    --u: calc(var(--bmw-u, 1px) * var(--dfit, 1));
    --pu: calc(var(--u) * var(--ps, 1));
    --pop-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
    --glide-ease: cubic-bezier(0.3, 0.7, 0.2, 1);
    --send-red: #c9384a; /* the brand crimson a step darker: white on it passes AA */
    text-align: left;
}
.is-offscreen .dv-scene,
.is-offscreen .dv-scene *,
.is-offscreen .dv-scene *::before,
.is-offscreen .dv-scene *::after {
    animation-play-state: paused !important;
}

/* ======================= THE BROWSER WINDOW ======================= */
.dv-browser {
    position: relative;
    isolation: isolate;
    border-radius: calc(11 * var(--u));
    background: #111113;
    box-shadow: 0 calc(36 * var(--u)) calc(70 * var(--u)) calc(-28 * var(--u)) rgba(0, 0, 0, 0.9);
    overflow: hidden;
}
/* The window's hairline sits over its bars, not under them. */
.dv-browser::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    pointer-events: none;
}
.dv-tabs {
    display: flex;
    align-items: flex-end;
    gap: calc(14 * var(--u));
    height: calc(30 * var(--u));
    padding: 0 calc(10 * var(--u));
    background: #1e1e21;
}
/* An unfocused window's lights are grey, so no red or green leaks in. */
.dv-lights {
    display: flex;
    gap: calc(6 * var(--u));
    align-self: center;
}
.dv-lights i {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    border-radius: 50%;
    background: #3e3e42;
}
.dv-tab {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--u));
    width: calc(120 * var(--u));
    height: calc(24 * var(--u));
    padding: 0 calc(10 * var(--u));
    border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 0 0;
    background: #2b2b2f;
}
.dv-fav {
    flex: none;
    width: calc(11 * var(--u));
    height: calc(11 * var(--u));
    border-radius: calc(3 * var(--u));
    background: rgba(255, 255, 255, 0.8);
}
.dv-tab-t {
    width: calc(58 * var(--u));
    height: calc(5 * var(--u));
    border-radius: calc(3 * var(--u));
    background: rgba(255, 255, 255, 0.22);
}
.dv-b-time {
    align-self: center;
    margin-left: auto;
    font-size: calc(12 * var(--u));
    line-height: 1;
    color: rgba(255, 255, 255, 0.64);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dv-tool {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    height: calc(34 * var(--u));
    padding: 0 calc(10 * var(--u));
    background: #2b2b2f;
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
}
.dv-nav {
    display: flex;
    gap: calc(8 * var(--u));
}
.dv-nav svg,
.dv-addr svg {
    flex: none;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dv-addr {
    flex: 1;
    display: flex;
    align-items: center;
    gap: calc(6 * var(--u));
    min-width: 0;
    height: calc(24 * var(--u));
    padding: 0 calc(10 * var(--u));
    border-radius: calc(12 * var(--u));
    background: #1b1b1e;
    font-size: calc(12 * var(--u));
    line-height: 1;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}
.dv-page {
    position: relative;
    padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
}
.dv-site {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    margin-bottom: calc(10 * var(--u));
    padding-bottom: calc(10 * var(--u));
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dv-logo {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    margin-right: auto;
    border-radius: calc(5 * var(--u));
    background: rgba(255, 255, 255, 0.85);
}
.dv-nv {
    width: calc(30 * var(--u));
    height: calc(5 * var(--u));
    border-radius: calc(3 * var(--u));
    background: rgba(255, 255, 255, 0.16);
}

/* ---------- the quote form a person fills out ---------- */
.dv-kicker {
    margin-bottom: calc(8 * var(--u));
    font-size: calc(17 * var(--u));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.dv-fld {
    display: block;
    margin-bottom: calc(8 * var(--u));
}
.dv-fld-label {
    display: block;
    margin-bottom: calc(4 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.66);
}
/* The full answer sits invisibly under the typed one, so the field is its
   final size from the start and nothing shifts while it types. */
.dv-input {
    position: relative;
    display: grid;
    min-height: calc(32 * var(--u));
    padding: calc(7 * var(--u)) calc(10 * var(--u));
    border-radius: calc(7 * var(--u));
    background: #1c1c1f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    font-size: calc(13 * var(--u));
    line-height: calc(18 * var(--u));
    color: #ffffff;
}
.dv-input::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.72);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.dv-fld.is-focus .dv-input::after {
    opacity: 1;
}
.dv-ghost,
.dv-typed {
    grid-area: 1 / 1;
}
.dv-ghost {
    visibility: hidden;
}
/* The caret takes no width, so typed words wrap exactly as the ghost does. */
.dv-caret {
    position: relative;
    display: inline-block;
    width: 0;
    height: calc(14 * var(--u));
    vertical-align: calc(-2.5 * var(--u));
    opacity: 0;
}
.dv-caret::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0;
    width: max(1px, calc(1.5 * var(--u)));
    height: 100%;
    background: #ffffff;
}
.dv-fld.is-focus .dv-caret {
    opacity: 1;
    animation: dv-caret 1s steps(1) infinite;
}
/* A caret holds still while its field is typing. */
.dv-fld.is-typing .dv-caret {
    animation: none;
}
@keyframes dv-caret {
    50% {
        opacity: 0;
    }
}
.dv-send {
    position: relative;
    height: calc(34 * var(--u));
    margin-top: calc(4 * var(--u));
    border-radius: calc(7 * var(--u));
    font-size: calc(13 * var(--u));
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    transition: transform 110ms ease;
}
.dv-send-idle,
.dv-send-done {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    transition: opacity 180ms ease;
}
.dv-send-idle {
    background: var(--send-red);
}
.dv-send-done {
    background: #232326;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    opacity: 0;
}
.is-sent .dv-send-idle {
    opacity: 0;
}
.is-sent .dv-send-done {
    opacity: 1;
}
/* The visible press: the button gives and darkens under the pointer, then reads Sent. */
.dv-send-idle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #000000;
    opacity: 0;
    transition: opacity 90ms ease;
}
.is-pressing .dv-send-idle::after {
    opacity: 0.22;
}
.is-pressing .dv-send {
    transform: scale(0.955);
}
.dv-ripple {
    position: absolute;
    left: 62%;
    top: 58%;
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    opacity: 0;
    pointer-events: none;
}
.is-sent .dv-ripple {
    animation: dv-ripple 480ms ease-out forwards;
}
@keyframes dv-ripple {
    from {
        opacity: 0.7;
        transform: scale(0.2);
    }
    to {
        opacity: 0;
        transform: scale(1.8);
    }
}
/* The person's pointer: it shows once the typing stops, glides onto Send,
   presses, and leaves once the form has gone. */
.dv-pointer {
    position: absolute;
    left: 62%;
    top: 58%;
    z-index: 4;
    width: calc(17 * var(--u));
    height: calc(22 * var(--u));
    overflow: visible;
    opacity: 0;
    transform: translate(calc(64 * var(--u)), calc(-48 * var(--u)));
    transform-origin: calc(1 * var(--u)) calc(1 * var(--u));
    transition:
        transform 320ms var(--glide-ease),
        opacity 140ms ease;
}
.dv-pointer .sh {
    fill: rgba(0, 0, 0, 0.45);
}
.dv-pointer .ar {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 1.2;
    stroke-linejoin: round;
}
.is-pointing .dv-pointer {
    opacity: 1;
}
.is-aimed .dv-pointer {
    transform: none;
}
.is-pressing .dv-pointer {
    transform: scale(0.82);
    transition-duration: 110ms;
}
.is-pointer-gone .dv-pointer {
    opacity: 0;
    transition-duration: 300ms;
}
/* What the owner would want to know once it has gone. */
.dv-after {
    display: flex;
    align-items: center;
    gap: calc(9 * var(--u));
    margin-top: calc(10 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(17 * var(--u));
    color: rgba(255, 255, 255, 0.82);
    opacity: 0;
    transform: translateY(calc(4 * var(--u)));
    transition:
        opacity 240ms ease 60ms,
        transform 320ms var(--rise-ease) 60ms;
}
.is-sent .dv-after {
    opacity: 1;
    transform: none;
}
.dv-after b {
    font-weight: 600;
    color: #ffffff;
}

/* ---------- Sam's photo, one round crop wherever it shows ---------- */
.dv-face {
    --face: calc(24 * var(--u));
    position: relative;
    flex: none;
    width: var(--face);
    height: var(--face);
}
.dv-face-clip {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #2a2a2d;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* Centres his face in the circle (the photo is 682 by 1200). */
.dv-face img {
    position: absolute;
    left: -38.1%;
    top: -64.3%;
    width: 162.4%;
    height: auto;
    max-width: none;
}
/* Still on the site: a live dot on the photo's edge. */
.dv-live {
    position: absolute;
    right: calc(-2 * var(--u));
    bottom: calc(-2 * var(--u));
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 calc(2 * var(--u)) #111113;
}
.dv-live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    animation: dv-pulse 1.6s ease-out infinite;
}
@keyframes dv-pulse {
    from {
        opacity: 0.6;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(2.8);
    }
}
/* The form went: a white tick on the photo's edge. */
.dv-tick {
    position: absolute;
    right: calc(-3 * var(--u));
    bottom: calc(-3 * var(--u));
    display: grid;
    place-items: center;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 calc(2 * var(--u)) #111113;
}
.dv-tick svg {
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    fill: none;
    stroke: #000000;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ======================= THE TIMER (site to phone) ======================= */
/* It pops up once Send is pressed and counts while the lead rides the line to
   the phone. The same chip in both demos, so the two read as one system. Its
   black ground is invisible on the page and masks an edge it sits over.
   --p (0 to 1) is set on it by r2-demos.js; --wire is the line's length. */
.dv-link {
    --wire: 116;
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--u));
    width: calc((var(--wire) + 24) * var(--u));
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    border-radius: calc(14 * var(--u));
    background: #000000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 160ms ease,
        transform 340ms var(--pop-ease);
}
.is-timing .dv-link {
    opacity: 1;
    transform: none;
}
.dv-num {
    font-size: calc(28 * var(--u));
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}
.dv-wire {
    position: relative;
    width: calc(var(--wire) * var(--u));
    height: calc(2 * var(--u));
    border-radius: calc(1 * var(--u));
    background: rgba(255, 255, 255, 0.18);
}
.dv-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #ffffff;
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}
/* The lead itself, a dot riding the line to the phone. */
.dv-dot {
    position: absolute;
    left: calc(-3.5 * var(--u));
    top: calc(-2.5 * var(--u));
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 calc(9 * var(--u)) rgba(255, 255, 255, 0.6);
    transform: translateX(calc(var(--p, 0) * var(--wire) * var(--u)));
}
.dv-head {
    position: absolute;
    right: calc(-2 * var(--u));
    top: calc(-3.5 * var(--u));
    border-left: calc(6 * var(--u)) solid rgba(255, 255, 255, 0.55);
    border-top: calc(4.5 * var(--u)) solid transparent;
    border-bottom: calc(4.5 * var(--u)) solid transparent;
}
.dv-label {
    font-size: calc(12 * var(--u));
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    text-wrap: balance;
}

/* ======================= THE PHONE ======================= */
.dv-phone {
    position: relative;
    flex: none;
    width: calc(184 * var(--pu));
    height: calc(360 * var(--pu));
    border-radius: calc(36 * var(--pu));
    background: #0b0b0c;
    box-shadow:
        inset 0 0 0 1.5px #3c3c40,
        inset 0 0 0 calc(3.5 * var(--pu)) #19191b,
        0 calc(34 * var(--pu)) calc(64 * var(--pu)) calc(-24 * var(--pu)) rgba(0, 0, 0, 0.95);
}
/* The side buttons: action and volume on the left, power on the right. */
.dv-phone::before,
.dv-phone::after {
    content: "";
    position: absolute;
    width: calc(2.5 * var(--pu));
    border-radius: calc(2 * var(--pu));
    background: #2c2c30;
}
.dv-phone::before {
    left: calc(-2 * var(--pu));
    top: calc(74 * var(--pu));
    height: calc(20 * var(--pu));
    box-shadow: 0 calc(32 * var(--pu)) 0 #2c2c30;
}
.dv-phone::after {
    right: calc(-2 * var(--pu));
    top: calc(106 * var(--pu));
    height: calc(46 * var(--pu));
}
.dv-screen {
    position: absolute;
    inset: calc(6 * var(--pu));
    border-radius: calc(30 * var(--pu));
    overflow: hidden;
    background: linear-gradient(155deg, #0b0b0c 0%, #030303 60%);
}
/* One pane of glare across the glass, lit or not. */
.dv-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 34%);
    pointer-events: none;
}
.dv-island {
    position: absolute;
    left: 50%;
    top: calc(8 * var(--pu));
    z-index: 9;
    width: calc(58 * var(--pu));
    height: calc(17 * var(--pu));
    margin-left: calc(-29 * var(--pu));
    border-radius: calc(9 * var(--pu));
    background: #000000;
}
/* The glass stays dark until something arrives, then the whole screen lights. */
.dv-lit {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #2a2a2e 0%, #161618 55%, #0d0d0e 100%);
    opacity: 0;
    transition: opacity 240ms ease;
}
.dv-phone.is-lit .dv-lit {
    opacity: 1;
}
.dv-status {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(33 * var(--pu));
    padding: 0 calc(12 * var(--pu)) 0 calc(20 * var(--pu));
    font-size: calc(12 * var(--pu));
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}
/* Signal, wifi and battery fit between the island and the edge. */
.dv-sb {
    display: flex;
    align-items: center;
    gap: calc(3 * var(--pu));
}
.dv-sb svg {
    display: block;
    width: auto;
    height: calc(7.5 * var(--pu));
}
.dv-home {
    position: absolute;
    left: 50%;
    bottom: calc(6 * var(--pu));
    z-index: 7;
    width: calc(62 * var(--pu));
    height: calc(3.5 * var(--pu));
    margin-left: calc(-31 * var(--pu));
    border-radius: calc(2 * var(--pu));
    background: rgba(255, 255, 255, 0.62);
}
.dv-round {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
}
.dv-round svg {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .dv-link,
    .dv-after,
    .dv-pointer,
    .dv-lit {
        transition: none;
    }
}