/* ==========================================================================
   The face
   ==========================================================================
   A member of the cast standing on their coloured disc. Used by the home
   picker, the coaches page, the contact page and the coach picker in settings
   — and those sit under two different layouts, so the component lives in its
   own file that both of them load. It used to be inside home.css, and
   anywhere that sheet was not loaded the discs simply came out transparent.

   The five colours resolve against whatever palette the page defines. */

/* A face cut to a circle on a coloured disc. The disc is a shade larger and
   offset, so it reads as a shape behind rather than as a border. */
.face {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.face::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--disc, var(--sunshine));
    transform: translate(6%, 6%);
}

/* Taken out of the flow so the picture cannot stretch the box: at
   `height: 100%` the browser fell back to the image's own proportions and the
   circle came out 116 wide by 123 tall. */
.face img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    border-radius: 50%;
}

/* Each colour names the palette entry first and carries the value as a
   fallback. The component is used under palettes that do not declare all five
   — the signed-in side knows --sky and --lilac but not --sunshine — and
   without the fallback those discs came out transparent. */
.face--sun { --disc: var(--sunshine, #FFC93C); }
.face--tangerine { --disc: var(--tangerine, #FF6B35); }
.face--sky { --disc: var(--sky, #3BA9F4); }
.face--lilac { --disc: var(--lilac, #DDD6FA); }
.face--violet { --disc: #B9AEF6; }

.face--out { overflow: visible; }

.face--out::before { transform: none; }

/* The figure is masked by the union of two shapes: the circle itself, and a
   band across the top where the head sticks out. The result is a body cut off
   cleanly by the rim of the disc, with the head standing clear above it —
   which is the whole effect, and is not something overflow alone can do.
   The numbers follow from the geometry: the frame is 125% of the disc's
   height, so the overhang is the top 20% of it, and the circle's radius is
   40% of that height, centred at 60% down. */
.face--out img {
    inset: auto auto 0 50%;
    transform: translateX(-50%);
    height: 125%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    border-radius: 0;
    /* No shadow. It was drawn in the page's deep violet at 12px of blur:
       against a coloured disc it is barely there, but round the part of
       the figure that stands clear of the disc it lies straight on the
       pale ground and reads as a violet smudge behind the head. */

    -webkit-mask-image:
        radial-gradient(ellipse 50% 40% at 50% 60%, #000 99%, transparent 100%),
        linear-gradient(#000, #000);
    mask-image:
        radial-gradient(ellipse 50% 40% at 50% 60%, #000 99%, transparent 100%),
        linear-gradient(#000, #000);
    -webkit-mask-size: 100% 100%, 100% 60%;
    mask-size: 100% 100%, 100% 60%;
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

/* The blink frame lies over the portrait inside the same disc, the way the
   home picker's does. */
.face__blink {
    position: absolute;
    inset: auto auto 0 50%;
    transform: translateX(-50%);
    height: 125%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 70ms linear;
    pointer-events: none;
}

.face.is-blinking .face__blink { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .face__blink { display: none; }
}