/* hometapes.css: HOME. The home-recorded tapes: flat piles in the bottom cubby (desktop), the HOME TAPES shoebox
   (narrow / short screens), their hand-labelled cassettes, and the worse-than-retail picture while one plays.
   Namespace: .hm-*, --hm-*. Load after screen.css. Reaches into existing markup only for home ids
   ([data-id^="home-"]) and for the #screen layers while .screen.hm-on is set by js/hometapes.js. */

/* ------------------------------------------------------------------ the stash cubby: three piles lying flat */
.stash.hm-stash { display: flex; align-items: flex-end; gap: clamp(10px, 1.4vw, 18px); grid-template-rows: none; }
.hm-pile { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.hm-tape { position: relative; display: block; padding: 0; margin: 0; border: 0; background: #111; cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; overflow: hidden; border-radius: 1.5px; }
.hm-tape.flat { --w: clamp(118px, calc(var(--tvw, 560px) * .3), 182px); width: var(--w); height: calc(var(--w) * 1.05 / 7.4); margin-top: -1px;
  transform: translateX(calc(var(--hm-r) * 10px)) rotate(calc(var(--hm-r) * 1.6deg));
  box-shadow: 0 2px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); transition: transform .22s var(--ease-hand, ease), filter .2s; }
.hm-tape.flat.hm-alt { margin-left: 6px; }
/* the spine art is drawn standing up: lay it down, reading left to right */
.hm-tape.flat > .hm-spine-img { position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 1.05 / 7.4); height: var(--w);
  transform: translate(-50%, -50%) rotate(-90deg); display: block; pointer-events: none; }
.hm-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 38%, rgba(0,0,0,.42)); }
.hm-tape.flat .hm-shade { background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%, rgba(0,0,0,.5)),
  linear-gradient(90deg, rgba(0,0,0,.25), transparent 8%, transparent 92%, rgba(0,0,0,.3)); }
@media (hover: hover) { .hm-tape.flat:hover { transform: translate(calc(var(--hm-r) * 10px), -3px) rotate(-.6deg); filter: brightness(1.15); z-index: 2; } }
.hm-tape:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; z-index: 3; }
.hm-tape.flat:focus-visible { transform: translate(calc(var(--hm-r) * 10px), -3px) rotate(-.6deg); }
.hm-tape.out { visibility: hidden; pointer-events: none; transition: none; }
/* pull one out of a pile and the ones on top of it settle down into the gap */
.hm-pile > .hm-tape { transition: transform .22s var(--ease-hand, ease), filter .2s, translate .32s cubic-bezier(.5,0,.75,0); }
.hm-pile > .hm-tape.out ~ .hm-tape { translate: 0 calc(var(--w) * 1.05 / 7.4 - 1px); }
.hm-tape.empty { filter: brightness(.62) saturate(.8); }
.hm-tape.empty > .hm-note { display: block; }
.hm-note { display: none; position: absolute; right: 6%; top: 50%; transform: translateY(-50%) rotate(-3deg); padding: 0 5px; background: #f7e78a;
  font: 400 9px/14px 'Permanent Marker', cursive; color: #1f2a6b; box-shadow: 0 1px 2px rgba(0,0,0,.4); pointer-events: none; }
.hm-note::after { content: 'VCR'; }
.hm-tape.hm-stand > .hm-note { right: auto; left: 50%; top: -6px; transform: translateX(-50%) rotate(-4deg); }

/* ------------------------------------------------------------------ the HOME TAPES shoebox (stash hidden) */
.hm-box { --sh: clamp(132px, 40vw, 172px); --sw: calc(var(--sh) * 1.05 / 7.4); position: relative; margin: 26px 10px 18px; }
.hm-box-in { position: relative; border-radius: 3px 3px 0 0; padding: 18px 12px 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  background: linear-gradient(180deg, #4a3520, #6b4e2e 14%, #8a6a40 100%);
  box-shadow: inset 0 14px 18px rgba(0,0,0,.55), inset 8px 0 10px rgba(0,0,0,.3), inset -8px 0 10px rgba(0,0,0,.3); }
.hm-box-in::-webkit-scrollbar { display: none; }
.hm-row { display: flex; align-items: flex-end; gap: 1px; min-width: max-content; padding: 0 2px; }
.hm-tape.hm-stand { flex: none; width: var(--sw); height: var(--sh); transform: rotate(calc(var(--hm-r) * 1.4deg)); transform-origin: 50% 100%;
  box-shadow: 1px 0 2px rgba(0,0,0,.5); transition: transform .2s var(--ease-hand, ease); }
.hm-tape.hm-stand > .hm-spine-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
@media (hover: hover) { .hm-tape.hm-stand:hover { transform: translateY(-6px); } }
.hm-tape.hm-stand:focus-visible { transform: translateY(-6px); }
/* the box's front wall, kraft card with the label written on masking tape */
.hm-box-lip { position: relative; height: 34px; margin-top: -10px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #b48a55, #9b743f 60%, #85612f); box-shadow: 0 6px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; }
.hm-box-label { font: 400 15px/1 'Permanent Marker', cursive; color: #1d2a6b; padding: 5px 12px 3px; background: #e9dcb2; transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.3); letter-spacing: .04em; }
/* the shoebox is for phones (portrait, and short landscape); desktops use the cubby or the coffee table */
@media (min-width: 821px) and (min-height: 501px) { .hm-box { display: none; } }

/* ------------------------------------------------------------------ short desktops: two piles on the coffee table */
.hm-table { display: none; position: absolute; bottom: 14px; flex-direction: row-reverse;
  /* tucked just left of the hint tray (same geometry as style.css's .lap) */
  right: calc(var(--gut-r, 0px) + 30px + min(600px, calc(var(--den-w, 100vw) - var(--tvw, 560px) - 70px)) + 18px); z-index: 1; pointer-events: auto; gap: 12px; align-items: flex-end;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }
.hm-table .hm-tape.flat { --w: clamp(100px, 9vw, 140px); }
.hm-table .hm-pile:nth-child(2) { transform: rotate(-3deg) translateY(-2px); }
@media (min-width: 821px) and (min-height: 501px) and (max-height: 829px) { .hm-table { display: flex; } }
body.holding .hm-table { opacity: .0; pointer-events: none; transition: opacity .2s; }

/* ------------------------------------------------------------------ home cassettes: the hand-written slot edge */
.slot-tape-face[data-id^="home-"] .stf-studio, .slot-tape-face[data-id^="home-"] .stf-vhs { display: none; }
.slot-tape-face[data-id^="home-"] .stf-label { background: #f2ece0; }
.slot-tape-face[data-id^="home-"] .stf-title { font-family: 'Permanent Marker', cursive; text-transform: none; color: #1d2a6b; letter-spacing: .02em; }

/* ------------------------------------------------------------------ the picture: worse than a store tape */
.screen > .hm-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; opacity: 0; transition: opacity .2s; }
.screen.hm-on:is([data-mode="video"], [data-mode="tap"], [data-mode="search"], [data-mode="rsearch"]) > .hm-fx { opacity: 1; }
.hm-noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; mix-blend-mode: normal; }
/* colour bleed + softness: chroma smears, reds bloom, EP gets mushy. NEVER put a CSS filter on .yt-wrap or any
   ancestor of the YouTube iframe: Chrome then refuses to start the video (the tape reads as chewed). A
   backdrop-filter on our own overlay renders the same look and leaves playback alone. */
.screen.hm-on > .hm-fx { -webkit-backdrop-filter: saturate(1.28) contrast(.93) blur(.45px); backdrop-filter: saturate(1.28) contrast(.93) blur(.45px); }
/* LP and EP lose chroma (less bandwidth for colour): paler, smearier, never hotter. Boosting saturation here turned
   EP skin tones magenta. */
.screen.hm-on.hm-lp > .hm-fx { -webkit-backdrop-filter: saturate(.92) contrast(.9) brightness(1.03) blur(.7px); backdrop-filter: saturate(.92) contrast(.9) brightness(1.03) blur(.7px); }
.screen.hm-on.hm-ep > .hm-fx { -webkit-backdrop-filter: saturate(.62) contrast(.86) brightness(1.04) blur(.95px); backdrop-filter: saturate(.62) contrast(.86) brightness(1.04) blur(.95px); }
/* EP's colour smears sideways in soft, desaturated blotches rather than a red fringe */
.screen.hm-on.hm-ep > .hm-fx::after { opacity: .35; }
.screen.hm-on.hm-k-camcorder > .hm-fx { -webkit-backdrop-filter: saturate(1.22) contrast(.95) sepia(.08) blur(.5px); backdrop-filter: saturate(1.22) contrast(.95) sepia(.08) blur(.5px); }
.screen.hm-on.hm-drop-big > .hm-fx { -webkit-backdrop-filter: saturate(2.2) hue-rotate(40deg) contrast(1.3) blur(1.2px); backdrop-filter: saturate(2.2) hue-rotate(40deg) contrast(1.3) blur(1.2px); }
/* chroma bleed: a soft red fringe that drifts right of edges, the way VHS colour lags the picture */
.hm-fx::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(90deg, rgba(255,30,60,.06), transparent 30%, transparent 70%, rgba(40,120,255,.06)); }
/* the camcorder's burned-in clock */
.hm-stamp { position: absolute; right: 10%; bottom: 15%; display: flex; flex-direction: column; align-items: flex-end; gap: .25em; opacity: 0;
  font: 400 4.8cqw/1 VT323, 'Share Tech Mono', monospace; color: #f4f4f0; letter-spacing: .06em;
  text-shadow: .12em .12em 0 rgba(0,0,0,.75), -.04em 0 0 rgba(255,40,60,.5), .05em 0 0 rgba(40,160,255,.45); }
.hm-stamp.on { opacity: .92; }
@supports not (font-size: 1cqw) { .hm-stamp { font-size: 22px; } }
/* the blank: all snow */
.screen.hm-snowing > .hm-fx { background: #8a8d96; }
/* a tape-over dropout: the picture rolls and tears, snow bleeds through */
.hm-roll { position: absolute; left: 0; right: 0; top: -12%; height: 12%; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.92) 30%, rgba(0,0,0,.92) 70%, rgba(255,255,255,.3) 78%, transparent); }
.screen.hm-drop > .hm-fx { background: rgba(130,134,145,.35); }
.screen.hm-drop > .hm-fx > .hm-roll { animation: hm-roll .42s linear infinite; opacity: 1; }
.screen.hm-drop > .yt-wrap { animation: hm-jump .42s steps(3) infinite; }
.screen.hm-drop-big > .yt-wrap { animation: hm-jump .3s steps(3) infinite; }
.screen.hm-surface > .yt-wrap { animation: hm-jump .35s steps(3) 2; }
@keyframes hm-roll { from { transform: translateY(0); } to { transform: translateY(950%); } }
@keyframes hm-jump { 0% { transform: translateY(0); } 33% { transform: translate(-1.5%, 7%); } 66% { transform: translate(1%, -4%); } 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hm-tape.flat, .hm-tape.hm-stand, .hm-pile > .hm-tape { transition: none; }
  .hm-tape.flat:hover, .hm-tape.hm-stand:hover { transform: none !important; }
  .screen.hm-drop > .hm-fx > .hm-roll, .screen.hm-drop > .yt-wrap, .screen.hm-drop-big > .yt-wrap, .screen.hm-surface > .yt-wrap { animation: none !important; }
  .screen.hm-drop > .hm-fx { background: rgba(130,134,145,.85); }
}
/* per-tape framing: fx.zoom/x/y in hometapes.json push borders + uploader watermarks into the overscan */
.screen.hm-on.hm-zoom > .yt-wrap iframe, .screen.hm-on.hm-zoom > .yt-wrap #yt {
  transform: translate(var(--hm-x, 0%), var(--hm-y, 0%)) scale(var(--hm-zoom, 1)); transform-origin: 50% 50%; }