/* Strive Haus — the films, filed: milk-glass folders (/folders.js) on the white page,
   and the cinema the films play in. Drawn at 340 × 272 and scaled to the cell. */

.desk { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px); max-width: 1240px; margin: 0 auto; }
.folder-cell { flex: 0 1 calc((100% - 2 * clamp(24px, 3vw, 48px)) / 3); display: flex; justify-content: center; min-width: 0; scroll-margin: 120px; }

.gf-root {
    --gf-px: 0;
    --gf-py: 0;
    --gf-ease: cubic-bezier(.2, .8, .2, 1);
    --gf-spring: cubic-bezier(.34, 1.36, .5, 1);
    --gf-hinge: 0deg;
    --gf-lift: 42px;
    --gf-spread: 0px;
    --gf-fan: 0deg;
    --gf-stack: 15px;
    position: relative; flex: none; isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
.gf-root:hover, .gf-root:focus-within { --gf-hinge: -11deg; --gf-lift: -34px; --gf-spread: 8px; --gf-fan: 1.4deg; --gf-stack: 10px; }
.gf-root[data-open] { --gf-hinge: -24deg; --gf-lift: -96px; --gf-spread: 40px; --gf-fan: 5deg; --gf-stack: 30px; z-index: 2; }

.gf-stage { position: absolute; left: 0; top: 0; width: 340px; height: 272px; transform-origin: 0 0; }
.gf-tilt {
    position: absolute; inset: 0;
    transform: perspective(1400px) rotateX(calc(var(--gf-py) * -3deg)) rotateY(calc(var(--gf-px) * 4deg));
    transition: transform .9s var(--gf-ease);
}
.gf-shadow {
    position: absolute; left: 18px; right: 18px; bottom: -6px; height: 60px; border-radius: 40px;
    background: rgba(16, 18, 40, .3); filter: blur(22px);
    transform: translateX(calc(var(--gf-px) * -8px));
    transition: transform .9s var(--gf-ease), opacity .9s var(--gf-ease);
}

/* back panel: the poster */
.gf-back { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #f3f3f4 0%, #e3e3e6 100%); }
.gf-art {
    position: absolute; left: -12px; top: -12px; width: 364px; height: 296px; max-width: none; object-fit: cover;
    transform: translate(calc(var(--gf-px) * -7px), calc(var(--gf-py) * -6px)) scale(1.02);
    transition: transform 1.1s var(--gf-ease);
}
.gf-back-sheen {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 22%),
        radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
}
.gf-rim { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; pointer-events: none; fill: none; }
.gf-back-rim { width: 340px; height: 272px; }
.gf-back-rim path { stroke: rgba(255, 255, 255, .45); stroke-width: 1; }

/* the frames */
.gf-files { position: absolute; inset: 0; z-index: 5; pointer-events: none; clip-path: inset(-400px -400px 10px -400px); }
.gf-sheet-slot { display: contents; }
.gf-sheet {
    position: absolute; left: 34px; top: 96px; width: 272px; height: 184px;
    margin: 0; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
    font: inherit; color: inherit; text-align: left; text-decoration: none;
    cursor: pointer; pointer-events: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f2f2f0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .1), 0 10px 26px -8px rgba(10, 12, 20, .28);
    transform-origin: 50% 100%;
    transform:
        translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)), calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1))
        rotate(calc(var(--gf-jr) + var(--gf-slot) * var(--gf-fan)));
    transition:
        transform .75s var(--gf-spring) calc(var(--gf-depth) * 40ms),
        box-shadow .4s var(--gf-ease),
        translate .9s var(--gf-ease),
        opacity .9s var(--gf-ease);
}
.gf-sheet:hover { text-decoration: none; }
.gf-sheet--art { background: #1a1a1d; }
.gf-root[data-open] .gf-sheet:hover,
.gf-root[data-open] .gf-sheet:focus-visible {
    transform:
        translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)), calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1 - 18px))
        rotate(calc(var(--gf-slot) * var(--gf-fan) * .6));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .1), 0 22px 40px -12px rgba(10, 12, 20, .42);
    transition-delay: 0s;
}
.gf-sheet-art { position: absolute; inset: 0; width: 272px; height: 184px; max-width: none; object-fit: cover; }
.gf-sheet--art::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 34%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.gf-sheet-head { position: absolute; left: 14px; right: 14px; top: 11px; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; white-space: nowrap; }
.gf-sheet-name { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; color: #18181b; }
.gf-sheet-meta { flex: none; font-size: 11px; color: rgba(24, 24, 27, .5); }
.gf-sheet--art .gf-sheet-name { color: #fafafa; }
.gf-sheet--art .gf-sheet-meta { color: rgba(250, 250, 250, .66); }
.gf-sheet-stat { position: absolute; left: 14px; right: 14px; top: 34px; font: 600 52px/1 var(--sans); letter-spacing: -.05em; color: var(--ink); }

/* the milk-glass front, hinged on its bottom edge */
.gf-front {
    position: absolute; left: 0; top: 74px; width: 340px; height: 198px; z-index: 10;
    -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    transform-origin: 50% 100%;
    transform: perspective(760px) rotateX(var(--gf-hinge));
    transition: transform .8s var(--gf-spring), translate 1s var(--gf-ease), opacity 1s var(--gf-ease);
}
.gf-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .5) 42%, rgba(252, 252, 252, .93) 100%); }
.gf-spec {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .9;
    background: radial-gradient(260px 200px at calc(50% + var(--gf-px) * 46%) calc(30% + var(--gf-py) * 40%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
}
.gf-front-rim { width: 340px; height: 198px; }
.gf-front-rim path { stroke-width: 2.4; transition: stroke-width .3s var(--gf-ease); }
.gf-hit { all: unset; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.gf-front:has(.gf-hit:focus-visible) .gf-front-rim path { stroke-width: 5; }
.gf-label { position: absolute; left: 28px; bottom: 30px; z-index: 2; display: flex; flex-direction: column; gap: 6px; max-width: 210px; pointer-events: none; color: var(--ink); }
.gf-title { font: 600 22px/1.1 var(--sans); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-meta { font: 500 12px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }

/* the key: play */
.gf-key {
    position: absolute; right: 22px; bottom: 22px; z-index: 12; width: 54px; height: 54px;
    margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    color: #fff;
    background: radial-gradient(120% 90% at 50% 0%, #3a3a3f 0%, #121214 55%, #050506 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .75), 0 14px 22px -8px rgba(0, 0, 0, .55);
    transition: transform .35s var(--gf-spring), opacity .6s var(--gf-ease) .7s, scale .7s var(--gf-spring) .7s;
}
.gf-key svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.gf-key:hover { transform: translateY(-2px); }
.gf-key:active { transform: scale(.93); transition-duration: .12s; }

/* entrance: the folder assembles itself */
.gf-root:not([data-entered]) .gf-back,
.gf-root:not([data-entered]) .gf-back-rim { translate: 0 22px; opacity: 0; }
.gf-root:not([data-entered]) .gf-sheet { translate: 0 -120px; opacity: 0; }
.gf-root:not([data-entered]) .gf-front { translate: 0 46px; opacity: 0; }
.gf-root:not([data-entered]) .gf-key { opacity: 0; scale: .6; }
.gf-root:not([data-entered]) .gf-shadow { opacity: 0; }
.gf-back, .gf-back-rim { transition: translate 1s var(--gf-ease), opacity .9s var(--gf-ease); }
.gf-root[data-entered] .gf-sheet { transition-delay: calc(var(--gf-depth) * 40ms), 0s, calc(.18s + var(--gf-depth) * 90ms), calc(.18s + var(--gf-depth) * 90ms); }
.gf-root[data-entered] .gf-front { transition-delay: 0s, .42s, .42s; }

/* faces circling a folder (films.js): behind it at z 0, in front at z 3 */
.folder-cell.has-orbit { position: relative; margin-bottom: 48px; }
.has-orbit .gf-root { z-index: 1; }
.has-orbit .gf-root[data-open] { z-index: 2; }
.orbit-head {
    position: absolute; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none;
    filter: drop-shadow(0 10px 14px rgba(20, 20, 60, .18));
    opacity: 0; will-change: transform;
}
@media (max-width: 640px) { .orbit-head { width: 52px; height: 52px; } }

/* a mascot floating over a folder's tab (films.js). It bobs above a soft shadow,
   leans in when the folder is hovered, and hops clear when it opens. */
.folder-cell.has-floater { position: relative; }
.has-floater .gf-root { z-index: 1; }
.floater {
    position: absolute; z-index: 3; left: 70%; top: 0; width: 18%; max-width: 68px; aspect-ratio: 1;
    pointer-events: none;
    transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg));
    transition: transform .7s cubic-bezier(.34, 1.36, .5, 1);
}
.floater img { display: block; width: 100%; height: 100%; animation: bob 3.2s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(36, 193, 255, .28)); }
.floater::after {
    content: ''; position: absolute; left: 18%; right: 18%; bottom: -16%; height: 10%; border-radius: 50%;
    background: rgba(16, 18, 40, .16); filter: blur(4px);
    animation: bob-shadow 3.2s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes bob-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .55; } }
.gf-root:hover ~ .floater, .gf-root:focus-within ~ .floater { --fy: -8px; --fr: -8deg; }
.gf-root[data-open] ~ .floater { --fx: 30%; --fy: -70%; --fr: 12deg; }

/* ---------- the cinema: the page dims and the film plays ---------- */
.cinema {
    position: fixed; inset: 0; z-index: 70;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    padding: var(--edge);
    background: rgba(8, 8, 10, .9);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity: 0; transition: opacity .35s ease;
}
.cinema[hidden] { display: none; }
.cinema.is-open { opacity: 1; }
.cinema { --ar: 16 / 9; }
.cinema-frame { width: min(1280px, 100%, calc((100svh - 160px) * var(--ar))); aspect-ratio: var(--ar); border-radius: 12px; overflow: hidden; background: #000; transform: scale(.97); transition: transform .5s var(--gf-ease, ease); }
.cinema.is-open .cinema-frame { transform: none; }
.cinema video { display: block; width: 100%; height: 100%; }
.cinema-bar { width: min(1280px, 100%, calc((100svh - 160px) * var(--ar))); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; }
.cinema-title { font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; margin-right: 12px; }
.cinema-meta { font: 500 14px/1.2 var(--sans); color: rgba(255, 255, 255, .6); }
.cinema-close { height: 40px; padding: 0 18px; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.cinema-close:hover { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.is-watching, .is-watching body { overflow: hidden; }

@media (max-width: 1024px) { .folder-cell { flex-basis: calc((100% - clamp(24px, 3vw, 48px)) / 2); } }
@media (max-width: 640px) { .folder-cell { flex-basis: 100%; } }
@media (hover: none) { .gf-tilt { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .gf-root *, .cinema, .cinema-frame, .floater { transition-duration: 0s !important; transition-delay: 0s !important; }
    .floater img, .floater::after { animation: none; }
    .gf-tilt { transform: none; }
}