/* Gage. home screen: a 2x2 grid of big app icons, one screen, no scrolling.
   Plus the first-visit entrance (closed flip phone) and the boot screen.
   Shell is in shell.css. Every size is a whole number of LCD pixels (--u). */

.home {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: calc(var(--u) * 8); padding-block: calc(var(--u) * 8);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Nokia main menu: one section at a time ---------- */
.nk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 4); }
.nk-mid { position: relative; display: grid; justify-items: center; }
.nk-item {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8);
  text-align: center; color: var(--lcd-pixel); text-decoration: none; padding: calc(var(--u) * 4);
}
/* only the current item is on screen; the others stay in the page as links (Tab brings them up) */
.nk-item:not(.is-cur) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
.nk-title { font: 400 var(--t2)/var(--lh2) var(--font-display); }
.nk-ico { --ico: max(calc(var(--u) * 48), round(down, min(34vh, 40vw, calc(var(--u) * 96)), calc(var(--u) * 8))); width: var(--ico); height: var(--ico); }
@supports not (width: round(down, 10px, 3px)) { .nk-ico { --ico: calc(var(--u) * 64); } }
.nk-ico svg { display: block; width: 100%; height: 100%; }
.nk-hint { font: 400 var(--t1)/var(--lh1-body) var(--font-body); color: var(--ink-600); max-width: 40ch; min-height: calc(var(--lh1-body) * 2); }
.nk-item:focus-visible { outline: none; }
.nk-item:focus-visible .nk-title { text-decoration: underline var(--accent); text-decoration-thickness: var(--u); text-underline-offset: calc(var(--u) * 3); }
.nk-item.in-l .nk-ico { animation: nk-in-l .18s steps(4) both; }
.nk-item.in-r .nk-ico { animation: nk-in-r .18s steps(4) both; }
@keyframes nk-in-l { from { transform: translateX(calc(var(--u) * 24)); opacity: 0; } }
@keyframes nk-in-r { from { transform: translateX(calc(var(--u) * -24)); opacity: 0; } }

.nk-arrow { border: 0; background: none; cursor: pointer; color: var(--ink-600); padding: calc(var(--u) * 6); font: 400 var(--t2)/var(--lh2) var(--font-display); }
.nk-arrow:hover { color: var(--lcd-pixel); }
.nk-dots { display: flex; gap: calc(var(--u) * 4); justify-content: center; }
.nk-dots i { width: calc(var(--u) * 4); height: calc(var(--u) * 4); background: var(--lcd-ghost); }
.nk-dots i.on { background: var(--lcd-pixel); }
.nk-scroll {
  position: absolute; right: max(calc(var(--u) * 3), env(safe-area-inset-right, 0px)); top: calc(var(--u) * 8); bottom: calc(var(--u) * 8); width: calc(var(--u) * 4); pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--lcd-ghost) 0 var(--u), transparent var(--u) calc(var(--u) * 3)) center / var(--u) 100% no-repeat;
}
.nk-scroll i { position: absolute; left: 0; width: calc(var(--u) * 4); height: 20%; background: var(--lcd-pixel); transition: top .12s steps(3); }

/* ---------- Messenger pop-up ---------- */
.im {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--u) * 34 + env(safe-area-inset-bottom, 0px)); width: min(calc(var(--u) * 170), calc(100vw - var(--u) * 16));
}
@media (min-width: 760px) {   /* like the old Messenger toast: bottom right */
  .im { left: auto; right: var(--gutter); transform: none; bottom: calc(var(--u) * 30); }
}
.im:not([hidden]) { animation: im-up .3s steps(6) both; }
@keyframes im-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.im-body { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 5); align-items: center; padding: calc(var(--u) * 6); }
.im-body .av { width: calc(var(--u) * 24); height: calc(var(--u) * 24); display: grid; place-items: center; border: var(--u) solid var(--lcd-pixel); background: var(--lcd-screen); }
.im-body .av svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.im-from { margin: 0; color: var(--ink-600); }
.im-msg { margin: 0; }
.im-actions { display: flex; justify-content: flex-end; padding: 0 calc(var(--u) * 6) calc(var(--u) * 6); }

/* ======================================================================
   ENTRANCE: the closed flip phone's lid fills the screen, first visit only.
   The lid is a real slab in CSS 3D (front face, edges, inside face) hinged at the top.
   Opening swings it up and away from the viewer, revealing the screen underneath.
   (Placement and animation unchanged.) The lid is drawn like an early-2000s clamshell
   (Motorola V500 / Samsung E330): a full-screen slab of rounded silver plastic, a recessed
   perforated inlay flowing down the middle, a chrome camera ring, a wide dark display
   window, an orange carrier-style badge and a round chrome emblem.
   ====================================================================== */
#lid { display: none; }
html.lid-on #lid {
  --pt: calc(var(--u) * 12);   /* lid thickness */
  /* the pebble outline, shared by the front, the inside face and the shade */
  --lid-inset: 0;
  --lid-round: 0 0 calc(var(--u) * 24) calc(var(--u) * 24);
  position: fixed; inset: 0; z-index: 59; cursor: pointer;
  display: block; perspective: 2400px; perspective-origin: 50% 45%;
}
#lid:focus-visible { outline: none; }
.flid { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 0; }
.flid-front, .flid-back { position: absolute; inset: var(--lid-inset); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--lid-round); }
.flid-front {
  transform: translateZ(calc(var(--pt) / 2));
  /* rounded silver plastic: soft light from the top left, the curve falling away into shadow at every edge */
  background:
    radial-gradient(70% 45% at 30% 18%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    radial-gradient(120% 90% at 50% 40%, #dfe3e8 0%, #c9ced6 45%, #a9b1bc 80%, #8a93a0 100%);
  box-shadow:
    inset 0 0 0 2px #7c8593,
    inset 0 3px 0 2px rgba(255, 255, 255, .6),
    inset 0 0 48px 6px rgba(68, 79, 94, .45),
    inset 0 -18px 30px rgba(44, 54, 68, .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.flid-back { transform: rotateX(180deg) translateZ(calc(var(--pt) / 2)); background: radial-gradient(120% 90% at 50% 40%, #c9ced6, #8a93a0); box-shadow: inset 0 0 0 2px #7c8593; }
/* hinge barrel tucked between the rounded top corners */
.hinge {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 14); border-radius: 0;
  background: linear-gradient(to bottom, #66707e, #f1f3f5 35%, #b5bcc6 60%, #66707e);
  box-shadow: 0 2px 3px rgba(44, 54, 68, .5);
}
.flid-edge { position: absolute; left: 0; right: 0; height: var(--pt); top: calc(100% - var(--pt) / 2); transform: rotateX(90deg); background: linear-gradient(90deg, #66707e, #b5bcc6 50%, #66707e); border-radius: 99px; }
.flid-shade { position: absolute; inset: var(--lid-inset); border-radius: var(--lid-round); transform: translateZ(calc(var(--pt) / 2 + 1px)); background: var(--ink-950); opacity: 0; pointer-events: none; }

/* the recessed inlay: a dark grey capsule with a perforated speaker-mesh texture */
.lid-inlay {
  container-type: inline-size;
  --iw: min(64vw, 50vh, 460px);
  width: var(--iw); height: min(84vh, calc(var(--iw) * 1.95));
  border-radius: 50% 50% 46% 46% / 22% 22% 26% 26%;
  background:
    radial-gradient(circle at 50% 50%, rgba(11, 16, 23, .55) 0 1.3px, transparent 1.8px) 0 0 / 9px 9px,
    radial-gradient(90% 60% at 40% 20%, #5b6574, #3c4654 60%, #2c3644);
  box-shadow:
    0 0 0 3px #e3e7ec, 0 0 0 4.5px #7c8593, 0 2px 0 5px rgba(255, 255, 255, .35),
    inset 0 6px 14px rgba(11, 16, 23, .6), inset 0 -2px 6px rgba(255, 255, 255, .12);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(var(--iw) * .09) 0 0; box-sizing: border-box; gap: calc(var(--iw) * .06);
}
.lid-inlay > * { flex: none; }
.lid-cam-row { position: relative; width: 78cqw; height: calc(22cqw + 24px); }
.lid-cam {
  position: absolute; left: 28cqw; top: 0; width: 22cqw; height: 22cqw; border-radius: 50%;
  /* glass lens in a dark barrel, inside a thick chrome ring */
  background:
    radial-gradient(circle at 50% 50%, #0b1017 0 4%, #1e2734 14%, #0b1017 28%, #2c3644 33%, #141b25 40%, transparent 41%),
    radial-gradient(circle at 44% 42%, rgba(91, 107, 128, .9) 0 5%, transparent 14%),
    radial-gradient(circle at 50% 50%, #444f5e 0 47%, transparent 48%),
    radial-gradient(circle at 35% 28%, #fff, #d0d5dc 35%, #8e97a3 70%, #c9ced6);
  box-shadow: 0 2px 4px rgba(11, 16, 23, .5), inset 0 0 0 1.5px #66707e;
}
.lid-cam i { position: absolute; left: 41%; top: 40%; width: 7%; height: 7%; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.lid-led { position: absolute; left: 55cqw; top: 8.75cqw; width: 4.5cqw; height: 4.5cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: blink 1.2s steps(1) infinite; }
.lid-print { position: absolute; left: 0; right: 0; text-align: center; top: calc(22cqw + 6px); color: #b5bcc6; font: 400 18.6667px/16px var(--font-display); letter-spacing: 2px; white-space: nowrap; }

/* the wide dark window with the outer display in it */
.lid-window {
  width: 84cqw; padding: 3.5cqw; box-sizing: border-box; border-radius: 4cqw;
  background: linear-gradient(180deg, #1e2734, #0b1017);
  box-shadow: 0 0 0 2px #7c8593, inset 0 2px 6px rgba(0, 0, 0, .6);
}
.lid-lcd {
  border-radius: 2cqw; background: var(--lcd-screen); color: var(--lcd-pixel); padding: 8px 10px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: inset 0 2px 4px rgba(11, 16, 23, .35);
}
.lid-top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.lid-top svg { display: block; width: 24px; height: 10px; }
.lid-top span + span svg { width: 24px; height: 12px; }
.lid-clock { margin: 0; font: 400 37.3333px/42px var(--font-display); }
.lid-msg { display: flex; align-items: center; gap: 8px; }
.lid-msg svg { display: block; width: 24px; height: 24px; flex: none; animation: blink 1.2s steps(1) infinite; }
.lid-msg p { margin: 0; font: 400 18.6667px/20px var(--font-display); white-space: nowrap; }
.lid-hint { margin: 0; font: 400 18.6667px/16px var(--font-display); text-transform: uppercase; letter-spacing: 1px; animation: blink 1.2s steps(1) infinite; }

/* carrier-style badge and the round chrome emblem */
.lid-badge {
  margin-top: 4cqw; padding: 2.5cqw 4cqw; border-radius: 2.5cqw; background: linear-gradient(180deg, #ff6a47, var(--accent) 50%, #d8391a);
  box-shadow: 0 2px 3px rgba(11, 16, 23, .5), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.lid-badge svg { display: block; width: 26cqw; height: auto; }
.lid-emblem {
  margin-top: auto; margin-bottom: 9cqw; width: 22cqw; height: 22cqw; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, #d0d5dc 40%, #8e97a3 80%, #c9ced6);
  box-shadow: 0 2px 4px rgba(11, 16, 23, .55), inset 0 0 0 1.5px #66707e, inset 0 -3px 5px rgba(68, 79, 94, .5);
}
.lid-emblem svg { width: 60%; height: 60%; }
.lid-notch { position: absolute; left: 50%; bottom: 10px; width: 48px; height: 8px; margin-left: -24px; border-radius: 99px; background: #444f5e; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .5); }

/* opening: the lid swings up and away on its top hinge, darkening as it turns from the light */
html.lid-on #lid.open .flid { animation: lid-swing .8s cubic-bezier(.4, 0, .6, 1) forwards; }
html.lid-on #lid.open .flid-shade { animation: lid-shade .8s cubic-bezier(.4, 0, .6, 1) forwards; }
html.lid-on #lid.open .hinge-shadow { animation: hinge-shadow .8s cubic-bezier(.4, 0, .6, 1) forwards; }
/* positive rotateX: the free (bottom) edge lifts toward the viewer and swings up over the hinge */
@keyframes lid-swing { from { transform: rotateX(0deg); } to { transform: rotateX(165deg); } }
/* the shadow the lid throws on the screen underneath, strongest just as it lifts */
.hinge-shadow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--ink-950) 45%, transparent), transparent 28%); }
@keyframes hinge-shadow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: .2; } }
@keyframes lid-shade { 0% { opacity: 0; } 50% { opacity: .35; } 100% { opacity: .6; } }

/* ======================================================================
   BOOT + TERMINAL REVEAL
   ====================================================================== */
@keyframes blink { 50% { opacity: 0; } }
html:not(.anim) #boot { display: none; }
#boot {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: var(--lcd-screen);
}
#boot .boot-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 8); }
/* the Gage logo, redrawn on the LCD grid: 128 x 49 LCD pixels. The tagline is set in the pixel font. */
.boot-logo { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.boot-mark { display: block; width: calc(var(--u) * 128); max-width: calc(100vw - var(--u) * 24); height: auto; color: var(--lcd-pixel); }
.boot-tag { margin: 0; font: 400 var(--t1)/var(--lh1) var(--font-display); letter-spacing: 2px; white-space: nowrap; min-height: var(--lh1); }
.boot-bar { display: grid; grid-template-columns: repeat(12, calc(var(--u) * 6)); gap: calc(var(--u) * 2); }
.boot-bar i { height: calc(var(--u) * 6); background: var(--lcd-ghost); }
.boot-bar i.on { background: var(--lcd-pixel); }
.boot-keys { background-image: none; }
/* the hinge sits at the very top of the window now */

html.anim #boot .bar, html.anim #boot .cell { fill-opacity: .35; }
html.anim #boot .bar.on, html.anim #boot .cell.on { fill-opacity: 1; }
html.anim #boot .ant { visibility: hidden; }
html.anim #boot .ant.on { visibility: visible; }
html.anim .boot-mark { clip-path: inset(0 0 100% 0); }
html.anim .boot-mark.show { animation: rows .5s steps(25) forwards; }

/* home: everything waits, then draws in like a terminal */
html.anim [data-step]:not(.shown),
html.anim [data-type]:not(.shown) { visibility: hidden; }
html.anim .ch:not(.on) { opacity: 0; }
/* zero-width so the cursor never pushes text onto a new line while typing */
.term-cursor { position: relative; display: inline-block; width: 0; height: 0; }
.term-cursor::after { content: ""; position: absolute; left: 1px; bottom: 0; width: 5px; height: 10px; background: var(--accent); }
.home-title .term-cursor::after { left: 3px; width: 15px; height: 30px; }
@keyframes rows { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
html.anim .nk-ico.shown { animation: rows .4s steps(16) both; }
html.anim .nk-arrow.shown, html.anim .nk-dots.shown, html.anim .nk-scroll.shown { animation: rows .16s steps(3) both; }
html.anim .page-status.shown, html.anim .page-keys.shown { animation: rows .18s steps(3) both; }

html.anim #boot.on .boot-center { animation: backlight .5s steps(1) both; }
html.anim #boot.out { animation: wipe .45s steps(12) forwards; }
@keyframes backlight { 0% { background: var(--ink-400); } 25% { background: var(--ink-200); } 40% { background: var(--ink-300); } 60%, 100% { background: var(--ink-200); } }
@keyframes wipe { to { clip-path: inset(100% 0 0 0); } }

/* failsafe: if the script stops, show the page anyway (not while the closed lid is waiting for a tap) */
html.anim:not(.lid-on) #boot:not(.on):not(.out) { animation: failboot 0s 12s forwards; }
@keyframes failboot { to { visibility: hidden; } }
html.anim:not(.lid-on) [data-step], html.anim:not(.lid-on) [data-type], html.anim:not(.lid-on) .ch { animation-name: failshow; animation-duration: 0s; animation-delay: 13s; animation-fill-mode: forwards; }
@keyframes failshow { to { visibility: visible; opacity: 1; } }