/* Line style of the isometric drawings (design round 4, after the mihaivlad-web plate figures):
   one hairline that does not scale, two face tones, one accent. Colours come from the site tokens
   in src/app/globals.css; the brand blue is --vh-dark-blue. No glow, no blur, no gradient. */

.iso-drawing_drawing__dIWEX {
    --iso-body: var(--card);
    --iso-deck: var(--backdrop);
    --iso-line: var(--muted-foreground);
    --iso-detail: var(--border);
    --iso-live: var(--foreground);
    --iso-caption: var(--muted-foreground);
    --iso-fill: var(--gray-300);
    --iso-accent: var(--vh-dark-blue);

    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: inherit;
}

.dark .iso-drawing_drawing__dIWEX {
    --iso-body: var(--muted);
    --iso-deck: var(--background);
    --iso-line: color-mix(in srgb, var(--muted-foreground) 62%, var(--muted));
    --iso-detail: var(--border-card);
    --iso-fill: var(--secondary);
    /* The brand blue, lifted a little so a 1 px line still reads on the near-black stage. */
    --iso-accent: color-mix(in srgb, var(--vh-dark-blue) 82%, white);
}

.iso-drawing_face__ICTm1 {
    fill: var(--iso-body);
    stroke: var(--iso-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.iso-drawing_top__5ELJ3 {
    fill: var(--iso-deck);
}

.iso-drawing_detail__wQg6_ {
    fill: none;
    stroke: var(--iso-detail);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.iso-drawing_line__RqVHQ {
    fill: none;
    stroke: var(--iso-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.iso-drawing_fill__zeTPE {
    fill: var(--iso-fill);
}

.iso-drawing_live__kNDS5 {
    fill: none;
    stroke: var(--iso-live);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
}

.iso-drawing_accentFill__pITU1 {
    fill: var(--iso-accent);
}

.iso-drawing_accentStroke__jOVkf {
    stroke: var(--iso-accent);
}

.iso-drawing_text__mRHMz {
    fill: var(--iso-live);
}

.iso-drawing_caption__y9gjr {
    fill: var(--iso-caption);
}

/* Parts of the film-bench drawing that change state. The base line style is in
   src/lib/iso/iso-drawing.module.css. Timings follow the source plate on mihaivlad.com. */

/* The source clips at its view box, which cuts the back right corner of the floor plate.
   `svg` raises the weight above the shared `.drawing { overflow: visible }`. */
svg.agent-hero-figure_figure__O_SiM {
    overflow: hidden;
}

.agent-hero-figure_eye__mf0OE {
    fill: var(--iso-body);
    stroke: var(--iso-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: fill 0.2s;
}

.agent-hero-figure_gaze__6JgdZ {
    fill: none;
    stroke: var(--iso-line);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.2s;
}

.agent-hero-figure_bracket__Wj5Hr {
    fill: none;
    stroke: var(--iso-live);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.2s;
}

/* While the robot picks a key frame, its eye, gaze and corner marks turn blue. */
.agent-hero-figure_figure__O_SiM[data-picking="true"] .agent-hero-figure_eye__mf0OE {
    fill: var(--iso-accent);
}

.agent-hero-figure_figure__O_SiM[data-picking="true"] .agent-hero-figure_gaze__6JgdZ,
.agent-hero-figure_figure__O_SiM[data-picking="true"] .agent-hero-figure_bracket__Wj5Hr {
    stroke: var(--iso-accent);
}

/* "Say hi" (round 13): the robot is a button. Its eye flashes blue and its antenna tip blinks. */
.agent-hero-figure_robot__b0G9l {
    cursor: pointer;
    outline: none;
}

.agent-hero-figure_robotRing__Gtqwv {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.agent-hero-figure_robot__b0G9l:focus-visible .agent-hero-figure_robotRing__Gtqwv {
    stroke: color-mix(in srgb, var(--vh-dark-blue) 70%, white);
}

.agent-hero-figure_figure__O_SiM[data-greeting="true"] .agent-hero-figure_eye__mf0OE {
    fill: var(--iso-accent);
}

.agent-hero-figure_antennaTip__a0uJk {
    transition: opacity 0.08s;
}

.agent-hero-figure_figure__O_SiM[data-tip="off"] .agent-hero-figure_antennaTip__a0uJk {
    opacity: 0.15;
}

/* The picture on a frame: a grey whose shade (fill-opacity) is fixed per frame. */
.agent-hero-figure_picture__SqP2p {
    fill: var(--iso-line);
}

.agent-hero-figure_rowLine__gsbto {
    transition: stroke 0.5s;
}

.agent-hero-figure_rowLineFilled__Q2wbf {
    stroke: var(--iso-line);
}

.agent-hero-figure_rowMark__CDLP_ {
    opacity: 0;
    transition: opacity 0.5s;
}

.agent-hero-figure_rowMarkFilled__9_T3B {
    opacity: 1;
}

.agent-hero-figure_pickedFrame__xRS3P {
    stroke: var(--iso-accent);
}

.agent-hero-figure_pickedPicture__I3ye0 {
    opacity: 0.12;
}

.agent-hero-figure_leaving__8tJ9L {
    opacity: 0;
    transition: opacity 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .agent-hero-figure_eye__mf0OE,
    .agent-hero-figure_antennaTip__a0uJk,
    .agent-hero-figure_gaze__6JgdZ,
    .agent-hero-figure_bracket__Wj5Hr,
    .agent-hero-figure_rowLine__gsbto,
    .agent-hero-figure_rowMark__CDLP_,
    .agent-hero-figure_leaving__8tJ9L {
        transition: none;
    }
}

/* Parts of "The video page" drawing (round 13, board 13D) beyond the shared line style in
   src/lib/iso/iso-drawing.module.css. Motion is written by the component, not by keyframes. */

.video-page-views-figure_title__gpX0V {
    fill: none;
    stroke: var(--iso-live);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.video-page-views-figure_placeholder__iJsSm {
    fill: none;
    stroke: var(--iso-detail);
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.video-page-views-figure_text__0__l9 {
    fill: none;
    stroke: var(--iso-line);
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.video-page-views-figure_name__EuRBk {
    fill: none;
    stroke: var(--iso-live);
    stroke-width: 1.4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.video-page-views-figure_accentLine__LdzLF {
    fill: none;
    stroke: var(--iso-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.video-page-views-figure_time__Jp1Tq {
    fill: none;
    stroke: var(--iso-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.video-page-views-figure_picture__qYOOB {
    fill: var(--iso-line);
}

.video-page-views-figure_outline__nQYpy {
    fill: none;
    stroke: var(--iso-accent);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

/* The tabs are buttons. Hover changes the colour of the name only, never its size or place. */
.video-page-views-figure_tab__u0__v {
    cursor: pointer;
    outline: none;
}

.video-page-views-figure_tabHit__0Ap7x {
    fill: transparent;
}

.video-page-views-figure_tabName__5lWrX {
    fill: var(--iso-caption);
    font-weight: 500;
    transition: fill 0.15s;
}

.video-page-views-figure_tab__u0__v:hover .video-page-views-figure_tabName__5lWrX {
    fill: var(--iso-live);
}

/* The name in white, clipped to the pill, so a name under the moving pill stays whole. */
.video-page-views-figure_onPill__qrOdJ {
    fill: #fff;
    font-weight: 500;
    pointer-events: none;
}

/* The focus ring, in the brand blue, only for keyboard focus. */
.video-page-views-figure_tabRing__F_MWk {
    fill: none;
    stroke: var(--vh-dark-blue);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    opacity: 0;
}

.dark .video-page-views-figure_tabRing__F_MWk {
    stroke: color-mix(in srgb, var(--vh-dark-blue) 70%, white);
}

.video-page-views-figure_tab__u0__v:focus-visible .video-page-views-figure_tabRing__F_MWk {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .video-page-views-figure_tabName__5lWrX {
        transition: none;
    }
}

/* Motion of the share and export drawing: a copy of the notes flies to each card in turn and the
   card gets a blue outline. CSS keyframes only, one 12.5 s cycle, five cards 2.5 s apart. The base
   line style is in src/lib/iso/iso-drawing.module.css. */

.share-export-figure_route__N6_E9 {
    fill: none;
    stroke: var(--iso-line);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
    opacity: 0.8;
}

.share-export-figure_faint__Y3OHw {
    opacity: 0.55;
}

.share-export-figure_copy__1KCVZ {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: share-export-figure_fly__pZ9J0 12.5s ease-in-out infinite both;
}

.share-export-figure_copyCard__prP7N {
    stroke: var(--iso-accent);
    stroke-width: 1.4;
}

.share-export-figure_arrival__6uARH {
    fill: none;
    stroke: var(--iso-accent);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    animation: share-export-figure_arrive__gZZJq 12.5s ease-in-out infinite both;
}

/* PlayWhenVisible sets data-motion="paused" while the drawing is off screen. */
[data-motion="paused"] .share-export-figure_copy__1KCVZ,
[data-motion="paused"] .share-export-figure_arrival__6uARH {
    animation-play-state: paused;
}

@keyframes share-export-figure_fly__pZ9J0 {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    3% {
        opacity: 1;
        transform: translate(0, -16px) scale(1);
    }
    22% {
        opacity: 1;
        transform: translate(var(--tx), calc(var(--ty) - 16px)) scale(0.8);
    }
    26% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(0.6);
    }
    31%,
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.6);
    }
}

@keyframes share-export-figure_arrive__gZZJq {
    0%,
    23% {
        opacity: 0;
    }
    27%,
    40% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

/* Reduced motion: no copies in flight, and every card outlined, as one still picture. */
@media (prefers-reduced-motion: reduce) {
    .share-export-figure_copy__1KCVZ {
        animation: none;
        opacity: 0;
    }

    .share-export-figure_arrival__6uARH {
        animation: none;
        opacity: 1;
    }
}