/* RobotBuying.com homepage (index.html): the robot in the "Why" section.

   A noir vitrine (the plaque frame from style.css) holds a robot drawn for this
   site from the emblem's own shapes: an emerald-cut head with lozenge eyes and a
   jeweller's loupe, the house lozenge for a body with a set lozenge for a heart,
   parallel links, and the emblem's jaws holding its brilliant, on a column and a
   stepped plinth. It is gold on noir in both themes.

   The robot is a toggle button. Pressed, the loupe flips down over the right eye,
   which looks larger through it, the head leans in, the heart lights and a glint
   crosses the stone once; pressed again, it returns. robot.js moves the eyes and
   wakes the robot once; everything here that moves is a transition or animation
   that ends within two seconds and is declared only for no-preference, and
   style.css turns them all off under reduced motion as well. Each group that
   turns or scales has its pivot at its own origin (the markup translates it
   there), so no transform-box is needed. */

/* The "Why" standfirst on this page: a size larger, its second sentence in
   italic gold foil like the hero's second line. The text is under 24px on
   phones, so in the light theme the foil keeps to stops of at least 4.5:1 on
   ivory (#8a6420, 4.87:1, is the lightest); the dark theme's foil is at least
   6.73:1 on its canvas. */
.section-lead--gilt { max-width: 40ch; font-size: var(--step-2); line-height: 1.5; }
:root:not([data-theme="dark"]) .section-lead--gilt .foil {
    --foil: linear-gradient(100deg, #5c400c 0%, #7a5716 35%, #8a6420 52%, #7a5716 70%, #5c400c 100%);
}

.plaque.automaton-vitrine {
    justify-self: center;
    margin-inline: auto;
    min-height: 0;
    padding-block: clamp(2.5rem, 6vw, 3.5rem);
}

.automaton {
    display: block;
    width: min(100%, 11.5rem);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.automaton:disabled { cursor: default; }
.automaton__art { width: 100%; height: auto; overflow: visible; }

/* Gold from the plaque's accent, ivory light for the eyes and the glass, and the
   plaque's own noir under every part, so parts that overlap stay solid. */
.automaton .au-u { fill: var(--noir); }
.automaton .au-u-stroke { stroke: var(--noir); }
.automaton .au-eye { fill: #fff1cf; }
.automaton .au-glow { fill: #fff1cf; fill-opacity: 0.14; }
.automaton:hover .au-glow { fill-opacity: 0.26; }
.automaton .au-glass { fill: #fff7e2; fill-opacity: 0.07; }
.automaton .au-shine-line { stroke: #fff7e2; stroke-opacity: 0.55; }
.automaton .au-heart { fill: currentColor; fill-opacity: 0.2; }
.automaton .au-glint { opacity: 0; }

/* At rest the loupe is flipped up above the head, seen at an angle. */
.automaton .au-loupe { transform: scaleY(-0.42); }
.automaton[aria-pressed="true"] .au-loupe { transform: none; }
.automaton[aria-pressed="true"] .au-mag { transform: scale(1.25); }
.automaton[aria-pressed="true"] .au-head { transform: rotate(4deg); }
.automaton[aria-pressed="true"] .au-heart { fill-opacity: 0.9; }

/* Until it first comes into view (robot.js), the eyes are shut and dim. */
.automaton.is-asleep .au-eyes { transform: scaleY(0.1); opacity: 0.35; }

@media (prefers-reduced-motion: no-preference) {
    .automaton .au-loupe { transition: transform 0.6s cubic-bezier(0.45, 0, 0.25, 1) 0.15s; }
    .automaton[aria-pressed="true"] .au-loupe { transition-delay: 0s; }
    /* The eye grows once the loupe is down, and shrinks before it lifts. */
    .automaton .au-mag { transition: transform 0.2s var(--ease-out); }
    .automaton[aria-pressed="true"] .au-mag { transition: transform 0.35s var(--ease-out) 0.45s; }
    .automaton .au-head { transition: transform 0.6s var(--ease-out); }
    .automaton .au-heart { transition: fill-opacity 0.6s var(--ease-out); }
    .automaton .au-glow { transition: fill-opacity var(--fast) var(--ease-out); }
    .automaton:not(.is-asleep) .au-eyes { transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out); }
    .automaton.is-woken .au-blink { animation: au-blink 0.3s ease-in-out 0.7s 1 both; }
    .automaton[aria-pressed="true"] .au-glint { animation: au-glint 1.2s ease-in-out 0.6s 1 both; }
}

@keyframes au-blink {
    0%, 100% { transform: none; }
    50% { transform: scaleY(0.1); }
}
@keyframes au-glint {
    0% { transform: none; opacity: 0; }
    20%, 80% { opacity: 1; }
    100% { transform: translateX(125px); opacity: 0; }
}

/* Like the other ornaments, the robot is left out in forced colours and in print. */
@media (forced-colors: active) {
    .automaton-vitrine { display: none; }
}
@media print {
    .automaton-vitrine { display: none !important; }
}