/* ===========================================================================
   The apps at work (inc/home/show.php): the dark stage between the home
   page's hero and the mark, to the owner's mockup of 2026-10-04.

   A night-violet panel on the light page. In it: the words, a tab per app,
   and that app's screen as a window standing in space (CSS 3D) with a lit
   edge and a glow behind it, its reflection under it (the same picture
   turned over, fading), two pale glass cards in front of it (nearer to the
   reader, so they part from the window as it turns) and a few threads
   behind. assets/js/home-show.js switches the tabs and moves the window with
   the scroll and the mouse; this file is whole without it.

   Colours are the --show-* tokens in site.css. The glass is a pale, nearly
   opaque fill, never a backdrop blur. Motion is transform and opacity only;
   the idle drift of the cards and the glow runs only while the stage is on
   screen (.is-live).
   =========================================================================== */

.art-show {
    position: relative;
    padding-block: clamp(40px, 7vh, 88px) clamp(40px, 8vh, 96px);
    overflow-x: clip;
}

/* --------------------------------------------------------------- panel --- */

.show-panel {
    /* Nearly the whole width of the screen, whatever the page's column is;
       what stands on it keeps its own size. */
    --show-w: min(1880px, calc(100vw - 48px));
    /* The whole stage, with everything on it, at four fifths of its drawn
       size (owner, 2026-10-04: perfect, but huge). Lengths inside scale
       with it, the width above included. */
    zoom: .8;
    position: relative;
    left: 50%;
    width: var(--show-w);
    margin-left: calc(var(--show-w) / -2);
    isolation: isolate;
    overflow: hidden;
    padding: clamp(36px, 3.6vw, 52px) 0 clamp(32px, 3.2vw, 44px);
    border-radius: 36px;
    background: radial-gradient(ellipse 72% 62% at 50% 64%, var(--show-night-hi), var(--show-night) 74%);
    box-shadow: var(--show-shadow);
    color: var(--show-text);
}

.show-threads {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.show-threads path {
    fill: none;
    stroke: var(--show-thread);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.show-head { padding-inline: 20px; text-align: center; }
.show-kicker {
    margin: 0 0 14px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--show-kicker);
}
.show-title {
    margin: 0;
    font-family: var(--yu-font-display, inherit);
    font-weight: 600;
    font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.1rem);
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--show-text);
}
.show-title span { display: block; }
.show-title__accent { color: var(--show-accent); }

/* ---------------------------------------------------------------- tabs --- */
/* The tabs stand on the window's top edge, a part of it: they turn with it,
   and the chosen one is the same paper and the same lit edge as the window. */

.show-tabs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    margin-bottom: -2px;
}
.show-tabs[hidden] { display: none; }
.show-tab {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    appearance: none;
    padding: 10px 18px 11px;
    font: inherit;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--show-text-soft);
    background: var(--show-tab);
    border: 2px solid var(--show-tab-line);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease), padding .2s var(--ease);
}
/* A wider target than the tab looks: up into the empty stage above it and
   across the gap to its neighbours. */
.show-tab::after { content: ''; position: absolute; inset: -16px -4px 0; }
.show-tab:hover { background: var(--show-tab-hover); color: var(--show-text); }
.show-tab[aria-selected='true'] {
    padding-top: 13px;
    background: var(--card);
    border-color: var(--show-edge);
    color: var(--show-accent);
    font-weight: 600;
    box-shadow: 0 -10px 26px -10px var(--show-glow);
}
.show-tab:focus-visible { outline: 2px solid var(--show-text); outline-offset: 2px; }
/* The way to the other apps, on a phone only. */
.show-tab--others { display: none; text-decoration: none; }

/* The favourite's tab carries its label. */
.show-tab__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 0 9px 0 7px;
    border-radius: var(--r-pill);
    background: var(--show-accent);
    color: var(--show-text);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
.show-tab__badge svg { width: 11px; height: 11px; fill: currentColor; }

/* --------------------------------------------------------------- stage --- */

.show-app { position: relative; transform-style: preserve-3d; }
.show-app[hidden], .show-foot[hidden] { display: none; }

.show-stage {
    padding: clamp(70px, 5.6vw, 84px) 18% 7.5%;
    perspective: 1500px;
    perspective-origin: 50% 30%;
}
/* The window turns its right side away from the reader, behind the flat
   planes of its own wrappers, which then sit in front of the right-hand tabs
   and take their clicks. So nothing here takes the pointer but the tabs. */
.show-fly { transform-style: preserve-3d; pointer-events: none; }
.show-tab { pointer-events: auto; }
.show-win {
    position: relative;
    /* As big as the stage allows, and never taller than the screen can show. */
    max-width: min(98vh, 880px);
    margin-inline: auto;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 7deg)) rotateY(var(--ry, 10deg)) rotateZ(.8deg);
    transition: transform .45s ease-out;
}

/* The light the window gives off, behind it. */
.show-glow {
    position: absolute;
    inset: -16% -13%;
    background: radial-gradient(closest-side, var(--show-glow), transparent);
    transform: translateZ(-60px);
    opacity: .8;
    pointer-events: none;
}

.show-shot {
    position: relative;
    aspect-ratio: 1600 / 1000;
    overflow: hidden;
    background: var(--card);
    border: 2px solid var(--show-edge);
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--show-glow-soft), 0 0 46px var(--show-glow-soft);
}
.show-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}
/* Tall, narrow panels side by side. */
.show-shot--row { display: flex; gap: 1.2%; padding: 1.2%; background: var(--mist); }
.show-shot--row img { flex: 1; min-width: 0; width: auto; object-position: center top; border-radius: 8px; }

/* The reflection: the window's own picture, turned over under its foot and
   fading out. It hangs on the window, so it turns with it. */
.show-shot--mirror {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    margin-top: 5px;
    transform: scaleY(-1);
    opacity: .3;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, black, transparent 40%);
    mask-image: linear-gradient(to top, black, transparent 40%);
}

/* --------------------------------------------- the glass cards in front --- */

.show-card {
    position: absolute;
    margin: 0;
    background: var(--show-glass);
    border: 1px solid var(--show-glass-line);
    border-radius: 18px;
    box-shadow: 0 20px 40px -20px var(--show-glow);
    color: var(--ink);
    white-space: nowrap;
}
.show-card--a {
    left: -16%;
    top: 34%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px 14px 14px;
    transform: translateZ(80px);
}
.show-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mint-soft);
    color: var(--mint-ink);
}
.show-card__icon svg { width: 22px; height: 22px; }
.show-card__text { display: flex; flex-direction: column; line-height: 1.25; }
.show-card__text strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.show-card__text b { font-weight: 600; color: var(--mint-ink); }
.show-card__text > span { font-size: .8125rem; color: var(--ink-soft); }

.show-card--b {
    right: -18%;
    top: 42%;
    display: grid;
    gap: 12px;
    padding: 16px 24px 16px 18px;
    list-style: none;
    transform: translateZ(120px);
}
.show-card--b li { display: flex; align-items: center; gap: 11px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.show-card--b li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.show-card--b li:nth-child(3n + 2)::before { background: var(--warn); }
.show-card--b li:nth-child(3n + 3)::before { background: var(--danger); }
.show-card--b b { font-weight: 500; color: var(--ink-soft); }

/* ---------------------------------------------------------------- foot --- */

.show-foot {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 26px;
    margin-top: 0;
    padding-inline: 5%;
}
.show-foot__line { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--show-text); }
.show-get {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink);
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.show-get svg { flex: none; width: 19px; height: 19px; margin-right: 4px; }
.show-get strong { font-weight: 600; color: var(--show-accent); }
.show-get:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px var(--show-glow); }
.show-get:focus-visible { outline: 2px solid var(--show-edge); outline-offset: 3px; }

/* --------------------------------------------------------------- facts --- */

.show-facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: clamp(34px, 4.6vw, 56px) 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.show-fact { padding: 4px 16px; }
.show-fact + .show-fact { border-left: 1px solid var(--line-card); }
.show-fact__n {
    display: block;
    font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--art-violet);
}
.show-fact__l { display: block; margin-top: 12px; font-size: 1.0625rem; letter-spacing: .02em; color: var(--ink); }

/* -------------------------------------------------------------- voices --- */

.art-voices { margin-top: clamp(48px, 8vh, 96px); }
.art-voices__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    perspective: 1500px;
}
.art-voice { padding: 24px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .6s var(--ease); }
.art-voice:nth-child(3n + 1) { transform: rotateY(7deg); transform-origin: right center; }
.art-voice:nth-child(3n + 3) { transform: rotateY(-7deg); transform-origin: left center; }
.art-voice:hover { transform: none; }
.art-voice__quote { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.art-voice__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 18px 0 0; font-size: .875rem; color: var(--ink-soft); }
.art-voice__who strong { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------ entrance --- */
/* Hidden until the script says the part is on screen (.is-in); should the
   script never run, the fallbacks show everything after a few seconds.
   Pieces that stand in space fade by themselves (an opacity on their parent
   would flatten it), and come in with `scale`, leaving `transform` to hold
   their place and `translate` to the idle drift. */
@keyframes show-in { to { opacity: 1; translate: none; scale: none; } }
@keyframes show-in-mirror { to { opacity: .3; } }
@keyframes show-in-glow { to { opacity: .8; } }
@keyframes show-in-fly { to { transform: none; } }
@keyframes show-in-thread { to { stroke-dashoffset: 0; } }
@keyframes show-bob { from { translate: 0 5px; } to { translate: 0 -7px; } }
@keyframes show-breathe { from { opacity: .55; } to { opacity: .95; } }

@media (scripting: enabled) {
    .show-panel, .show-head > *, .show-tab, .show-foot, .show-fact, .art-voice, .show-shot, .show-card {
        opacity: 0;
        animation: show-in 0s linear 6s forwards;
    }
    .show-panel { translate: 0 34px; transition: opacity .8s var(--ease), translate 1s cubic-bezier(.2, .7, .2, 1); }
    .show-head > *, .show-foot, .show-fact, .art-voice {
        translate: 0 18px;
        transition: opacity .7s var(--ease), translate .8s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1);
    }
    .show-head > :nth-child(2) { transition-delay: .12s; }
    .show-tab {
        translate: 0 12px;
        transition: opacity .5s var(--ease) calc(.9s + var(--i, 0) * 60ms), translate .6s cubic-bezier(.2, .7, .2, 1) calc(.9s + var(--i, 0) * 60ms),
                    background-color .2s var(--ease), color .2s var(--ease), padding .2s var(--ease);
    }
    .show-fact, .art-voice { transition-delay: calc(var(--i, 0) * 90ms); }

    /* The window flies in from deep in the stage and swings to its pose. */
    .show-fly {
        transform: translateZ(-560px) rotateY(34deg) rotateX(26deg);
        animation: show-in-fly 0s linear 6s forwards;
    }
    .show-stage.is-in .show-fly { transform: none; animation: none; transition: transform 1.25s cubic-bezier(.16, .84, .24, 1); }
    .show-app.is-in .show-shot { transition: opacity .6s var(--ease); }
    .show-shot--mirror { animation-name: show-in-mirror; }
    .show-app.is-in .show-shot--mirror { transition: opacity .9s var(--ease) .55s; }
    .show-glow { opacity: 0; animation: show-in-glow 0s linear 6s forwards; }
    .show-card { scale: .82; }
    .show-app.is-in .show-card { transition: opacity .5s var(--ease) .45s, scale .7s cubic-bezier(.2, 1.4, .4, 1) .45s; }
    .show-app.is-in .show-card--b { transition-delay: .62s; }
    .show-foot { transition-delay: .3s; }
    .show-threads path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .2, 1) .3s; animation: show-in-thread 0s linear 6s forwards; }
    .show-threads path:nth-child(even) { transition-delay: .7s; }

    .show-panel.is-in, .show-panel.is-in .show-head > *, .show-panel.is-in .show-tab,
    .show-foot.is-in, .show-app.is-in .show-shot, .show-app.is-in .show-card,
    .show-facts.is-in .show-fact, .art-voices.is-in .art-voice {
        opacity: 1;
        translate: none;
        scale: none;
        animation: none;
    }
    .show-app.is-in .show-shot--mirror { opacity: .3; }
    .show-stage.is-in .show-glow { opacity: .8; animation: none; transition: opacity 1.1s var(--ease) .45s; }
    .show-panel.is-in .show-threads path { stroke-dashoffset: 0; animation: none; }

    /* A tab pressed: the window stays where it is and the new app's screen
       fades in over the old one, which waits underneath until it is covered
       (.is-leaving); the old cards and reflection fade out, the new ones
       fade in with no bounce, and the line under the stage changes in place. */
    .show-app.is-leaving { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .show-app.is-leaving .show-card, .show-app.is-leaving .show-shot--mirror { opacity: 0; transition: opacity .25s var(--ease); }
    .show-panel.is-swapped .show-app:not(.is-leaving) { z-index: 1; }
    .show-panel.is-swapped .show-app.is-in:not(.is-leaving) .show-shot { transition: opacity .45s var(--ease); }
    .show-panel.is-swapped .show-app.is-in:not(.is-leaving) .show-shot--mirror { transition: opacity .45s var(--ease) .1s; }
    .show-panel.is-swapped .show-card { scale: .95; }
    .show-panel.is-swapped .show-app.is-in:not(.is-leaving) .show-card { scale: none; transition: opacity .4s var(--ease) .15s, scale .5s var(--ease) .15s; }
    .show-panel.is-swapped .show-foot { translate: none; transition: opacity .4s var(--ease); }

    /* Idle, only while the stage is on screen: the cards drift a little and
       the glow breathes. */
    .art-show.is-live .show-app.is-in .show-card--a { animation: show-bob 5.2s ease-in-out 1.6s infinite alternate; }
    .art-show.is-live .show-app.is-in .show-card--b { animation: show-bob 6.4s ease-in-out 1.6s infinite alternate-reverse; }
    .art-show.is-live .show-stage.is-in .show-glow { animation: show-breathe 4.6s ease-in-out 1.8s infinite alternate; }
}

/* --------------------------------------------------------------- phone --- */
/* The same stage, narrower: the tabs scroll sideways inside the panel, the
   window keeps a fixed pose and fills the width, the cards sit on its lower
   corners over the reflection. */
@media (max-width: 760px) {
    .art-show { padding-block: 36px 28px; }
    .show-panel { zoom: 1; left: 0; width: auto; margin-left: 0; padding: 28px 0 24px; border-radius: 26px; }
    .show-kicker { margin-bottom: 10px; font-size: .6875rem; letter-spacing: .28em; }
    .show-title { font-size: clamp(1.6rem, 7.4vw, 2.5rem); }

    /* Room for two names and the way to the rest: Framee, Yutee, Others
       (which leads up to the list of every app in the hero). */
    .show-tabs { gap: 3px; margin-bottom: -1.5px; }
    .show-tab--extra:not([aria-selected='true']) { display: none; }
    .show-tab--others { display: inline-flex; }
    .show-tab { gap: 6px; padding: 7px 11px 8px; font-size: .8125rem; border-width: 1.5px; border-radius: 9px 9px 0 0; }
    .show-tab[aria-selected='true'] { padding-top: 9px; }
    /* The favourite keeps its heart; the words would crowd three tabs. */
    .show-tab__badge { gap: 0; min-height: 17px; padding: 0 4px; font-size: 0; }

    .show-stage { padding: 62px 7% 30%; perspective: 900px; }
    .show-win { max-width: none; transform: rotateX(6deg) rotateY(9deg) rotateZ(.6deg); transition: none; }
    .show-shot { border-radius: 10px; border-width: 1.5px; }
    .show-glow { inset: -20% -12%; }

    .show-card { border-radius: 14px; }
    .show-card--a { left: -4%; top: auto; bottom: -24%; gap: 9px; padding: 8px 14px 8px 8px; transform: translateZ(36px); }
    .show-card__icon { width: 34px; height: 34px; }
    .show-card__icon svg { width: 17px; height: 17px; }
    .show-card__text strong { font-size: .9375rem; }
    .show-card__text > span { font-size: .6875rem; }
    .show-card--b { right: -4%; top: auto; bottom: -38%; gap: 6px; padding: 10px 14px 10px 11px; transform: translateZ(56px); }
    .show-card--b li { gap: 8px; font-size: .8125rem; }
    .show-card--b li::before { width: 8px; height: 8px; }

    .show-foot { flex-direction: column; padding-inline: 18px; text-align: center; }
    .show-foot__line { font-size: 1rem; }
    .show-get { width: 100%; justify-content: center; min-height: 52px; padding: 0 16px; }

    .show-facts { margin-top: 28px; }
    .show-fact { padding: 2px 6px; }
    .show-fact__n { font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem); }
    .show-fact__l { margin-top: 8px; font-size: .8125rem; letter-spacing: 0; line-height: 1.35; }

    .art-voices__list { grid-template-columns: minmax(0, 1fr); perspective: none; }
    .art-voice:nth-child(n) { transform: none; }
}