/* SMAU FILE
 * Path: css/smau-roy.css
 * Owns: ROY G. BIV, THE FIGURE. The eyeball, the rainbow iris, the pupil and
 *       its glint, the lid that blinks, the stubby arms and legs, the bounce,
 *       the happy hop and the flinch you get for poking him.
 * Why it is not in css/apps/app-ume.css any more: Roy now stands in two rooms
 *       — UME (inside a closed shadow root) and Creator Studio (the light DOM,
 *       js/creator/creator.roy.js). App stylesheets are shadow-scoped, so a
 *       Studio Roy would have needed a second copy of every rule below, and a
 *       second copy is how one character becomes two. js/smau.roy.js hands
 *       this file to whichever root is drawing him.
 * Invariants:
 *   - Everything here is the FIGURE. Placement belongs to the surface that
 *     puts him somewhere (.ume-roy-btn, .s2-roy-btn, …), never to this file.
 *   - Percent-sized inside .smau-roy, so a new size is one width/height rule.
 *   - ONE SPECTRUM. --smau-roy-spectrum below is Roy's rainbow, and the iris
 *     and the help ring both read it. Two hand-written colour lists is how one
 *     character ends up with two rainbows.
 */

:root {
  /* Roy's rainbow, in order, wrapping back to the first so a conic gradient
     closes without a seam. */
  --smau-roy-spectrum:
    #ff5252, #ffa726, #ffee58, #66bb6a, #42a5f5, #7e57c2, #ec407a, #ff5252;
}

.smau-roy {
  width: 84px;
  height: 84px;
  position: relative;
  margin-bottom: 8px;
  cursor: pointer;
}

.smau-roy-body {
  position: absolute;
  inset: 4px 8px 10px 8px; /* headroom below for the legs */
  animation: smau-roy-bounce 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes smau-roy-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30%      { transform: translateY(-7%) scale(0.97, 1.04); }
  50%      { transform: translateY(0) scale(1.05, 0.95); }
  65%      { transform: translateY(-3%) scale(0.99, 1.01); }
}

.smau-roy-eyeball {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f2f1fb 55%, #d9d6ee 100%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.28),
    inset 0 -6px 12px rgba(0, 0, 0, 0.14),
    inset 0 4px 8px rgba(255, 255, 255, 0.5);
}

.smau-roy-iris {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--smau-roy-spectrum));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12), 0 0 8px rgba(126, 87, 194, 0.35);
}

.smau-roy-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 36% 32%, #3a3244 0%, #14101c 70%);
  border-radius: 50%;
}

.smau-roy-pupil::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 16%;
  width: 34%;
  height: 34%;
  background: #fff;
  border-radius: 50%;
  opacity: 0.92;
}

/* The eyelid blinks: a soft lavender lid sweeps down and back every ~4.6s. */
.smau-roy-lid {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #b9a6ff 0%, #9a86e8 100%);
  border-radius: 50%;
  transform: translateY(-102%);
  animation: smau-roy-blink 4.6s ease-in-out infinite;
}

@keyframes smau-roy-blink {
  0%, 92%, 100% { transform: translateY(-102%); }
  95%           { transform: translateY(0); }
  98%           { transform: translateY(-102%); }
}

/* Stubby limbs. Percent-sized so the small variant scales for free. */
.smau-roy-arm {
  position: absolute;
  top: 52%;
  width: 26%;
  height: 11%;
  background: linear-gradient(180deg, #b9a6ff, #8f7ade);
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.smau-roy-arm.l {
  left: -18%;
  transform: rotate(24deg);
  transform-origin: right center;
  animation: smau-roy-wave-l 2.4s ease-in-out infinite;
}

.smau-roy-arm.r {
  right: -18%;
  transform: rotate(-24deg);
  transform-origin: left center;
  animation: smau-roy-wave-r 2.4s ease-in-out infinite;
}

@keyframes smau-roy-wave-l {
  0%, 100% { transform: rotate(24deg); }
  40%      { transform: rotate(38deg); }
}

@keyframes smau-roy-wave-r {
  0%, 100% { transform: rotate(-24deg); }
  40%      { transform: rotate(-38deg); }
}

.smau-roy-leg {
  position: absolute;
  bottom: -9%;
  width: 13%;
  height: 18%;
  background: linear-gradient(180deg, #8f7ade, #7663c9);
  border-radius: 999px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.smau-roy-leg.l { left: 28%; }
.smau-roy-leg.r { right: 28%; }

/* A happy hop when Roy answers (JS toggles .smau-roy-pulse on the body). */
.smau-roy-body.smau-roy-pulse {
  animation: smau-roy-hop 0.6s cubic-bezier(0.34, 1.56, 0.5, 1);
}

@keyframes smau-roy-hop {
  0%   { transform: translateY(0) scale(1, 1); }
  35%  { transform: translateY(-18%) scale(0.94, 1.08); }
  70%  { transform: translateY(0) scale(1.08, 0.92); }
  100% { transform: translateY(0) scale(1, 1); }
}

.smau-roy--small {
  width: 34px;
  height: 34px;
  margin-bottom: 0;
}

.smau-roy--small .smau-roy-lid { animation-delay: 1.3s; }

/* Poke the eyeball and he blinks (and flinches, a little). */
.smau-roy-body.smau-roy-poked { animation: smau-roy-flinch 0.46s ease-out; }
.smau-roy-body.smau-roy-poked .smau-roy-lid {
  animation: smau-roy-blink-once 0.42s ease-in-out;
}

@keyframes smau-roy-blink-once {
  0%       { transform: translateY(-102%); }
  40%, 55% { transform: translateY(0); }
  100%     { transform: translateY(-102%); }
}

@keyframes smau-roy-flinch {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.06, 0.9); }
  60%  { transform: scale(0.97, 1.04); }
  100% { transform: scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .smau-roy-body,
  .smau-roy-arm.l,
  .smau-roy-arm.r,
  .smau-roy-lid,
  .smau-roy-body.smau-roy-pulse,
  .smau-roy-body.smau-roy-poked,
  .smau-roy-body.smau-roy-poked .smau-roy-lid { animation: none; }
}

/* ==========================================================================
   THE HELP RING — Roy's rainbow around the screen while his overlay is up.

   WHY: double-tapping the home bar opens help, and nothing on the phone said
   so. The panel covers part of the screen, but a reader who has just opened
   it by accident (a double-tap is easy to do by accident) had no signal that
   the phone was in a mode at all. The ring is that signal, and it MOVES —
   a static outline reads as decoration, a travelling one reads as "on".

   It is the same IDEA as Roy's chat bubble in UME — a rainbow that is only
   the edge — but it cannot be the same trick. The bubble paints its middle
   opaque (`linear-gradient(#222,#222) padding-box`) to hide the gradient
   behind it; do that here and you have hidden the phone. So the middle is
   masked OUT instead, which leaves it genuinely transparent, and the
   gradient is conic so it can turn.

   Deliberately drawn as ::after on .smau-phone-inner: ::before is the chrome
   sheen, and a border on the element itself would reflow every screen by two
   pixels the moment help opened.
   ========================================================================== */

@property --smau-roy-ring-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.smau-phone-inner[data-roy-help="on"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;               /* an indicator never eats a tap */
  /* Above the help panel itself, which now opens INSIDE the phone: the ring
     frames the whole screen including the panel, because what it reports is
     "this device is in help", not "there is a card here". Safe to sit on top
     of everything precisely because it cannot be clicked. */
  z-index: 9500;

  box-sizing: border-box;
  padding: 2px;                       /* the ring's thickness */
  border-radius: inherit;             /* follows immersive-fill's 0 for free */
  background: conic-gradient(from var(--smau-roy-ring-spin), var(--smau-roy-spectrum));

  /* Cut the middle out, so the ring is an edge and the screen shows through. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: smau-roy-ring-spin 4.5s linear infinite;
}

@keyframes smau-roy-ring-spin {
  to { --smau-roy-ring-spin: 360deg; }
}

/* Reduced motion keeps the RING and drops the travel: the signal is "help is
   open", and that still has to be readable when the animation is refused. */
@media (prefers-reduced-motion: reduce) {
  .smau-phone-inner[data-roy-help="on"]::after { animation: none; }
}