/*
 * Thoughts page (Figma "Thoughts Page": thoughts-note,
 * thoughts-note-long-scroll; the desk replaced thoughts-home's iPhone).
 *
 * The notes lie scattered over the page like a messy desk, each a little
 * sheet of paper labeled with the day it was written. Arriving, they drop
 * into a pile and scatter out to their spots. Opening one grows that sheet
 * into the full note (js/thoughts.js), and its writing rises onto the
 * paper one block after another, like the page's load animation.
 */

/* The page keeps its scrollbar's room while a note is open (the page
   stops scrolling then), so nothing shifts sideways */
html {
    scrollbar-gutter: stable;
}

html.thought-open {
    overflow: hidden;
}

/* ---- The paper ----
   Light paper, or a dark sheet with the same grain in dark mode
   (images/thoughts/note-paper-dark.avif). Shared by the sheets and the
   open note. */
.thoughts-stage {
    --paper-color: #fff;
    --paper-img: url("../images/thoughts/note-paper.avif");
    --paper-img-small: url("../images/thoughts/note-paper-small.avif");
    --paper-ink: #130f0f;
    --paper-gray: #787474;
    --paper-rule: #dedede;
    --paper-embed: #efefef;
    --paper-shadow: 0 4px 21px -1px rgba(0, 0, 0, 0.18);
    --sheet-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
    --sheet-shadow-held: 0 1px 5px rgba(0, 0, 0, 0.12), 0 1.25rem 2.5rem rgba(0, 0, 0, 0.18);
}

html.is-dark .thoughts-stage {
    --paper-color: #201c1c;
    --paper-img: url("../images/thoughts/note-paper-dark.avif");
    --paper-img-small: url("../images/thoughts/note-paper-small-dark.avif");
    --paper-ink: #f4f2f0;
    --paper-gray: #9b9696;
    --paper-rule: #3a3434;
    --paper-embed: #2b2626;
    /* a hairline edge, since a shadow barely shows on black */
    --paper-shadow: 0 0 0 .5px rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.55);
    --sheet-shadow: 0 0 0 .5px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5);
    --sheet-shadow-held: 0 0 0 .5px rgba(255, 255, 255, 0.12), 0 1.25rem 2.5rem rgba(0, 0, 0, 0.6);
}

/* ---- The desk ----
   The sheets lie scattered over the page, newest at the top and on top of
   the pile, oldest toward the bottom. Each sheet's spot is set in the
   markup: --x (0 = far left, 1 = far right), --y (in sheet heights), --r
   (its tilt) and --i (its turn in the arriving shuffle). Inside a sheet,
   --u is one Figma px of the 147px-wide sheet. */

.thoughts-stage {
    position: relative;
    padding: 2rem 1rem 5rem;
}

.thoughts-desk {
    --sheet-w: clamp(7.5rem, 12vw, 10.5rem);
    --sheet-h: calc(var(--sheet-w) * 190.5 / 147);
    --u: calc(var(--sheet-w) / 147);
    --row: var(--sheet-h); /* one --y step */
    position: relative;
    width: min(62rem, 100%);
    height: calc(var(--sheet-h) * 4.4);
    container-type: inline-size;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    transition: opacity .5s ease .2s;
}

.thoughts-stage.is-open .thoughts-desk {
    opacity: .15;
    transition: opacity .45s ease .05s;
}

.thoughts-desk > li {
    position: absolute;
    left: calc(var(--x) * (100% - var(--sheet-w)));
    top: calc(var(--y) * var(--row));
    width: var(--sheet-w);
    rotate: var(--r);
    /* Arriving: they drop into a pile at the top, then scatter out to
       their spots (below) */
    --pile-x: calc((0.5 - var(--x)) * (100cqw - var(--sheet-w)));
    --pile-y: calc(0.5 * var(--sheet-h) - var(--y) * var(--row));
    animation: desk-scatter 1.6s backwards;
    animation-delay: calc(.2s + var(--i, 0) * 55ms);
}

/* Each sheet drops onto the pile (a little askew), sits a beat, then
   flies out to its spot with a touch of overshoot. Oldest first, so the
   newest lands last, on top. */
@keyframes desk-scatter {
    0% {
        opacity: 0;
        translate: var(--pile-x) calc(var(--pile-y) - 3rem);
        rotate: calc(var(--r) * -0.6);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
    22% {
        opacity: 1;
        translate: var(--pile-x) var(--pile-y);
        rotate: calc(var(--r) * -0.4);
    }
    34% {
        translate: var(--pile-x) var(--pile-y);
        rotate: calc(var(--r) * -0.4);
        animation-timing-function: cubic-bezier(0.3, 1.2, 0.4, 1);
    }
    100% {
        translate: 0 0;
        rotate: var(--r);
    }
}

/* The sheet under the mouse comes to the top of the pile */
.thoughts-desk > li:has(.thought-tile:hover),
.thoughts-desk > li:has(.thought-tile:focus-visible) {
    z-index: 1000 !important;
}

/* Grabbing (js/desk-drag.js, mouse and pen): a sheet can be picked up and
   moved around like About's business cards. --tilt is its lean while it
   moves (set by the script). */
.thoughts-desk > li {
    transform: rotate(var(--tilt, 0deg));
}

@media (hover: hover) and (pointer: fine) {
    .thoughts-desk .thought-tile {
        cursor: grab;
    }
}

.thoughts-desk > li.is-held .thought-tile {
    cursor: grabbing;
    translate: 0 calc(-5 * var(--u));
    scale: 1.05;
}

/* Held: a deeper shadow fades in under the sheet */
.thoughts-desk .thought-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--sheet-shadow-held);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.thoughts-desk > li.is-held .thought-tile::after {
    opacity: 1;
}

/* The page's heading, for screen readers only (the desk has none) */
.thoughts-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- A note's sheet ---- */

.thought-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 147 / 190.5;
    padding: 0;
    border: 0;
    border-radius: calc(3 * var(--u));
    background: var(--paper-color) var(--paper-img-small) center / cover;
    box-shadow: var(--sheet-shadow);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        translate .4s cubic-bezier(0.34, 1.56, 0.64, 1),
        scale .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ruled lines: seven, 18 apart */
.thought-tile::before {
    content: "";
    position: absolute;
    top: calc(29 * var(--u));
    left: calc(16 * var(--u));
    right: calc(15 * var(--u));
    height: calc(109 * var(--u));
    background: repeating-linear-gradient(to bottom, var(--paper-rule) 0 1px, transparent 1px calc(18 * var(--u)));
}

.thought-tile_date {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(17 * var(--u));
    color: var(--paper-gray);
    font-family: Geist, sans-serif;
    font-size: calc(14 * var(--u));
    font-weight: 500;
    line-height: 1;
    letter-spacing: calc(-0.14 * var(--u));
    text-align: center;
    white-space: nowrap;
}

@media (hover: hover) {
    .thought-tile:hover {
        translate: 0 calc(-3 * var(--u));
    }
}

.thought-tile:active {
    scale: var(--press-scale);
}

.thought-tile:focus-visible {
    outline: 2px solid var(--gundam-blue);
    outline-offset: 3px;
}

/* The sheet that's open is the note now */
.thought-tile.is-lifted {
    visibility: hidden;
}

/* Back from the note: it lands as blank paper, then the sheet's ruled
   lines draw back in left to right and its date rises into place, like
   the note's own writing does (js/thoughts.js adds .is-returning) */
.thought-tile::before {
    transform-origin: 0 50%;
}

@keyframes sheet-lines {
    0% {
        opacity: 0;
        scale: 0 1;
    }
    30% {
        opacity: 1;
    }
}

@keyframes sheet-date {
    0% {
        opacity: 0;
        translate: 0 calc(8 * var(--u));
    }
    60% {
        opacity: 1;
    }
}

.thought-tile.is-returning::before {
    animation: sheet-lines .7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.thought-tile.is-returning .thought-tile_date {
    animation: sheet-date .8s cubic-bezier(0.45, 0.05, 0.15, 1) .15s backwards;
}

/* ---- The open note ---- */

/* Sits in the window, wherever the desk is scrolled to. It's always laid
   out (just hidden), so its paper is ready the moment it's needed, and
   grows out of the sheet it came from with a transform (js/thoughts.js). */
.thought-card {
    position: fixed;
    top: 6.5rem;
    bottom: 2.5rem;
    left: 0;
    right: 0;
    z-index: 5;
    width: min(44.125rem, calc(100% - 2rem));
    margin: 0 auto;
    border-radius: var(--radius);
    background: var(--paper-color) var(--paper-img) center / cover;
    box-shadow: var(--paper-shadow);
    color: var(--paper-ink);
    transform-origin: 50% 50%;
    will-change: transform;
    visibility: hidden;
    outline: none;
}

.thought-card.is-active {
    visibility: visible;
}

/* Out: settles with a touch of give, like the site's springs */
.thought-card.is-moving {
    transition: transform .8s cubic-bezier(0.25, 1.12, 0.4, 1);
}

/* Back in: eases out of the way, then settles onto its sheet */
.thought-card.is-closing {
    transition: transform .55s cubic-bezier(0.6, 0, 0.25, 1);
}

/* Closing: the writing fades off the paper first */
.thought-card_inner {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .18s ease;
}

.thought-card.is-shown .thought-card_inner {
    opacity: 1;
    transition: none;
}

/* Opening: the writing rises onto the paper block by block, like the
   page's load animation (css/page-intro.css), starting as the paper
   lands. Order: date + Share, title, the first few paragraphs, Back. */
@keyframes thought-in {
    0% {
        opacity: 0;
        translate: 0 18px;
    }
    60% {
        opacity: 1;
    }
}

.thought-card.is-shown .thought-card_head,
.thought-card.is-shown .thought_title,
.thought-card.is-shown .thought_body > *,
.thought-card.is-shown .thought_embed,
.thought-card.is-shown .thought-card_foot {
    animation: thought-in 1s cubic-bezier(0.45, 0.05, 0.15, 1) backwards;
    animation-delay: calc(.32s + var(--step, 0) * 90ms);
}

.thought-card_head { --step: 0; }
.thought_title { --step: 1; }
.thought_body > :nth-child(1) { --step: 2; }
.thought_body > :nth-child(2) { --step: 3; }
.thought_body > :nth-child(3) { --step: 4; }
.thought_body > :nth-child(n + 4),
.thought_embed { --step: 5; }
.thought-card_foot { --step: 6; }

/* No title: everything moves up a step */
.thought:not(:has(.thought_title)) .thought_body > :nth-child(1) { --step: 1; }
.thought:not(:has(.thought_title)) .thought_body > :nth-child(2) { --step: 2; }
.thought:not(:has(.thought_title)) .thought_body > :nth-child(3) { --step: 3; }

/* Long notes scroll inside the paper. The writing fades out under the Back
   button, and under the top edge once it's scrolled (--top-fade) */
.thought-card_scroll {
    --top-fade: 1;
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 3.4rem 3.3rem 7.5rem;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--top-fade)) 0, #000 7.5rem, #000 calc(100% - 7.5rem), transparent calc(100% - 4.5rem));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--top-fade)) 0, #000 7.5rem, #000 calc(100% - 7.5rem), transparent calc(100% - 4.5rem));
}

.thought-card_scroll::-webkit-scrollbar {
    display: none;
}

.thought-card_scroll.is-scrolled {
    --top-fade: 0.1;
}

.thought-card_head,
.thought {
    max-width: 37.5rem;
    margin-left: auto;
    margin-right: auto;
}

.thought-card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.thought-card_date {
    color: var(--paper-gray);
    font-family: Geist, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

/* Share: a plain text control in the nav's type (H4) */
.thought-card_share {
    padding: 0;
    border: 0;
    background: none;
    color: var(--paper-ink);
    font-family: Geist, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: color .2s ease;
}

.thought-card_share:hover {
    color: var(--paper-gray);
}

.thought-card_share:focus-visible {
    outline: 2px solid var(--gundam-blue);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- The note's writing ---- */

.thought_title {
    margin-top: 4.5rem;
    color: var(--paper-ink);
    font-family: Caveat, cursive;
    font-size: 4rem;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.02em;
}

.thought_body {
    margin-top: 1.8rem;
}

/* No title: the writing starts a little under the date */
.thought:not(:has(.thought_title)) .thought_body {
    margin-top: 2.5rem;
}

.thought_body p {
    color: var(--paper-ink);
}

.thought_body > * + * {
    margin-top: 1.4em; /* a blank line between paragraphs */
}

.thought_body h3 {
    margin-top: 2.25rem;
    color: var(--paper-ink);
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.thought_body h3:first-child {
    margin-top: 0;
}

.thought_body h3 + p {
    margin-top: .9rem;
}

.thought_body strong {
    font-weight: 600;
}

.thought_body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: .15em;
}

.thought_body a:hover {
    color: var(--paper-gray);
}

.thought_body blockquote {
    margin: 1.4em 0 0;
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--paper-rule);
}

.thought_body blockquote p + p {
    margin-top: .7em;
}

.thought_body .thought_note {
    color: var(--paper-gray);
}

/* Embeds (Figma "Embed if any") */
.thought_embed {
    margin-top: 3rem;
    border-radius: var(--radius);
    background: var(--paper-embed);
    overflow: hidden;
}

.thought_embed iframe {
    display: block;
    width: 100%;
    border: 0;
}

.thought_embed.is-music iframe {
    height: 175px;
}

/* Back: a white key, like "Read my CV" on About (--key-*, css/styles.css) */
.thought-card_foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.25rem;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.thought-card_back {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    padding: .7em 1.5em;
    border: 0;
    border-radius: 999px;
    background: var(--key-bg);
    box-shadow: var(--key-shadow);
    color: var(--key-text);
    font-family: Geist, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    text-shadow: var(--key-text-emboss);
    cursor: pointer;
    pointer-events: auto;
    transition: scale .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}

.thought-card_back::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--key-press-bg);
    box-shadow: var(--key-press-shadow);
    opacity: 0;
    transition: opacity .2s ease;
}

.thought-card_back:hover {
    scale: 1.03;
}

.thought-card_back:active {
    scale: var(--press-scale);
}

.thought-card_back:active::after {
    opacity: 1;
    transition-duration: .05s;
}

.thought-card_back:focus-visible {
    outline: 2px solid var(--gundam-blue);
    outline-offset: 3px;
}

/* ---- Smaller screens ---- */

@media screen and (max-width: 767px) {
    .thought-card_scroll {
        padding: 2.5rem 2rem 7rem;
    }

    .thought_title {
        margin-top: 3rem;
        font-size: 3rem;
    }

    /* Phones: smaller sheets, the rows spread out down the page */
    .thoughts-desk {
        --sheet-w: clamp(6.5rem, 28vw, 9rem);
        --row: calc(var(--sheet-h) * 1.25);
        height: calc(var(--sheet-h) * 5.6);
    }

    .thought-card {
        top: 5.5rem;
        bottom: 1.5rem;
    }
}

@media screen and (max-width: 479px) {
    .thought-card_scroll {
        padding: 2rem 1.5rem 6.5rem;
    }

    .thought_title {
        font-size: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thought-tile.is-returning::before,
    .thought-tile.is-returning .thought-tile_date {
        animation: none;
    }

    .thoughts-desk,
    .thought-tile,
    .thought-card_back {
        transition: none;
    }

    .thought-tile:hover,
    .thought-tile:active,
    .thought-card_back:hover,
    .thought-card_back:active {
        translate: none;
        scale: 1;
    }

    .thought-card.is-moving,
    .thought-card.is-closing {
        transition: none;
    }

    .thought-card.is-shown *,
    .thoughts-desk > li {
        animation: none !important;
    }
}