/*
 * About page (Figma "About", 1440 wide).
 *
 * Hero: three photos stacked like prints, the middle one upright and two
 * tilted behind it, next to the headline and intro. Under it the business
 * cards (css/business-cards.css), then games, albums and movies, each a
 * row of three tiles (cover + disc, title, note).
 */

/* ---- Hero ---- */

.about-hero {
    padding-top: 5.75rem;
    padding-bottom: 5.25rem;
}

.about-hero_layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* The stack is a button the size of the front photo. Hovering it grows it
   a little and fans the photos out; clicking it pulls the bottom photo out
   and lays it on top of the pile (js/photo-stack.js). */
.about-hero_photos {
    /* 17.5% smaller than Figma's 410 of the 960 column (42.7%), and
       centered in the space the full size took */
    --w: 35.2%;
    margin-left: 3.75%;
    position: relative;
    flex-shrink: 0;
    display: block;
    width: var(--w);
    aspect-ratio: 410 / 440;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: scale 0.25s cubic-bezier(0.36, 0, 0.66, -0.56); /* out: inBack */
}

.about-hero_photos:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: .75rem;
    border-radius: var(--radius);
}

/* Each photo sits in a slot (data-slot, set by the script): 0 in front,
   1 tilted back left, 2 tilted back right. Positions are % of the photo,
   turning around its center (the Figma layout). */
.about-hero_photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: var(--radius);
    translate: var(--x) var(--y);
    rotate: var(--r);
    /* out of the hover: eases in and out, all together */
    transition:
        translate 0.45s cubic-bezier(0.65, 0, 0.35, 1),
        rotate 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.about-hero_photo[data-slot="0"] { --x: 0%;      --y: 0%;      --r: 0deg;   z-index: 3; }
.about-hero_photo[data-slot="1"] { --x: -29.52%; --y: -6.7%;   --r: -15deg; z-index: 2; }
.about-hero_photo[data-slot="2"] { --x: 15.6%;   --y: -10.78%; --r: 15deg;  z-index: 1; }

/* The photo being laid on top of the pile (js/photo-stack.js) */
.about-hero_photo.is-arriving {
    z-index: 4;
}

/* Shuffling: the other two move back a spot with a little overshoot
   ([data-slot] so it wins over the hover's easing below) */
.about-hero_photos.is-shuffling .about-hero_photo[data-slot] {
    transition:
        translate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Only with a mouse: on touch screens a tap would leave it stuck fanned out */
@media (hover: hover) {
    .about-hero_photos:hover {
        scale: 1.03;
        transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* in: outBack */
    }

    /* Each photo drifts and turns its own way, a beat after the last, so
       the stack spreads apart instead of moving as one */
    .about-hero_photos:hover .about-hero_photo {
        transition:
            translate 0.8s cubic-bezier(0.25, 1.15, 0.4, 1) var(--delay, 0ms),
            rotate 0.8s cubic-bezier(0.25, 1.15, 0.4, 1) var(--delay, 0ms);
    }

    .about-hero_photos:hover .about-hero_photo[data-slot="1"] {
        translate: calc(var(--x) - 6%) calc(var(--y) + 2%);
        rotate: calc(var(--r) - 4deg);
        --delay: 0ms;
    }

    .about-hero_photos:hover .about-hero_photo[data-slot="2"] {
        translate: calc(var(--x) + 6%) calc(var(--y) - 3%);
        rotate: calc(var(--r) + 4deg);
        --delay: 60ms;
    }

    .about-hero_photos:hover .about-hero_photo[data-slot="0"] {
        translate: 0 -1.5%;
        rotate: 2deg;
        --delay: 120ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-hero_photos,
    .about-hero_photo,
    .about-hero_photos.is-shuffling .about-hero_photo[data-slot] {
        transition: none !important;
    }

    .about-hero_photos:hover {
        scale: none;
    }
}

.about-hero_text {
    width: 42.5%; /* 408 of 960 */
}

/* The wave sits in the headline's first line, a touch below the baseline */
.about-hero_wave {
    width: 1em;
    height: 1em;
    margin-left: .125em;
    vertical-align: -.1em;
}

.about-hero_intro {
    margin-top: 2.8rem;
}

.about-hero_intro p + p {
    margin-top: 1.4em; /* a blank line between paragraphs */
}

.about-underline {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: .15em;
}

/* "whimsy": a gold glint sweeps across the word, rests, and goes again.
   The text is the gradient (background-clip), in the text's own color
   outside the glint, so it follows dark mode. It moves by
   background-position, which repaints each frame, but only this one
   small word. */
.about-shimmer {
    background-image: linear-gradient(
        100deg,
        currentColor 35%,
        #f5c542 45%,
        #fff3c4 50%,
        #f5c542 55%,
        currentColor 65%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: about-shimmer 3.2s ease-in-out infinite;
}

@keyframes about-shimmer {
    0% { background-position: 100% 0; }
    55%,
    100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .about-shimmer {
        animation: none;
    }
}

/* ---- Business cards strip: no padding of its own ---- */

.about-cards {
    position: relative;
}

/* ---- Games, albums, movies ---- */

.about-list {
    padding-top: 3.375rem;
}

.about-list.is-last {
    padding-bottom: 8rem;
}

/* Figma's line box is 48px; the extra room goes above and below rather
   than into the line height, so a heading that wraps on a phone keeps
   its lines close */
.about-list_heading {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -.04em;
    padding-top: .6rem;
    padding-bottom: .6rem;
    margin-bottom: 1.625rem;
}

/* Each tile takes two rows of the shared grid (cover, then title + note),
   so titles line up across a row even when covers differ in height. The
   title and note share a row, so a long title only pushes its own note */
.about_tiles {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
}

.about_img-container {
    align-self: start;
}

/* The covers carry width/height attributes (to hold their space while
   loading), so the height has to follow the CSS width */
.about_media {
    height: auto;
}

.about_title {
    margin-top: 1.5rem;
    line-height: 1.5;
}

.about_tiles p {
    margin-top: 1rem;
}

/* Game boxes have their own case edge, so no outline shadow */
.about-list.is-games .about_media:not(.is-disc) {
    filter: none;
}

/* Everything Everywhere's cover is a little narrower than the others:
   centered in the same slot, so its disc lines up with the rest */
.about_media.is-narrow {
    width: 47.3%;
    margin-left: 1.35%;
    margin-right: 1.35%;
}

/* ---- Tablet and phone: photos on top, text under them ---- */

@media screen and (max-width: 991px) {
    .about-hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .about-hero_layout {
        flex-direction: column;
        align-items: stretch;
    }

    /* Center the whole fan (it reaches 41.7% of a photo past the left
       edge and 27.8% past the right), and leave room above for the
       photo that leans up */
    .about-hero_photos {
        --w: 36.3%;
        margin-left: calc(50% - var(--w) * .4305);
        margin-top: calc(var(--w) * .227);
    }

    .about-hero_text {
        width: 100%;
        max-width: 36rem;
        margin-top: 4.5rem;
    }
}

@media screen and (max-width: 767px) {
    .about-hero {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .about-hero_photos {
        --w: 42.9%;
    }

    .about-hero_text {
        margin-top: 3.5rem;
    }

    .about-hero_intro {
        margin-top: 2rem;
    }

    .about-list {
        padding-top: 2.5rem;
    }

    .about-list.is-last {
        padding-bottom: 5rem;
    }
}