/* airport screen app. Grammar from the Incheon departures board (style-lock.md, design-lab references/approved).
   never: rounded cards, soft drop shadows, glass, gradient text, pill badges, grey uppercase widget labels, UI floating over the photo. */
@font-face { font-family: NG; src: url("assets/fonts/NanumGothicBold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: NG; src: url("assets/fonts/NanumGothicExtraBold.woff2") format("woff2"); font-weight: 800; font-display: block; }

:root {
  --body: #2f5b8d; --body-hi: #33639a; --body-lo: #284f7c;
  --slot: #1d2f9e; --gap: #142272; --ink: #f3f3ee; --sub: #c9d6ea; --strip: #182a8a;
  --sign: #18233f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body { font-family: NG, sans-serif; color: var(--ink); word-break: keep-all; font-variant-numeric: tabular-nums; cursor: none; }
body.pointer { cursor: default; }

#fit { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; }

/* ---------- the gate scene: every screen sits on its own rectangle in the photo ---------- */
#scene { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
#bg { position: absolute; inset: 0; width: 1920px; height: 1080px; object-fit: cover; }
/* the wall tv: a lit panel in a bright hall. The picture sits a touch flatter than a monitor, the room shows faintly in the glass,
   the bezel throws a thin shadow on the picture's edge. pointer-events off so youtube never sees a hover. */
#tvset { position: absolute; pointer-events: none;           /* bezel colours sampled from the photo's tv (bg.jpg, column 780 and row 470) */
         background: linear-gradient(180deg, #2d2c2a 0, #343432 4px, #3f3f3e 9px, #474746 calc(100% - 12px), #4a4948 calc(100% - 4px), #363533 100%);
         box-shadow: 0 0 0 1px #1e1a17, 0 3px 4px rgba(60,44,36,.45), 0 -1px 2px rgba(60,44,36,.25); }
#tv { position: absolute; background: #050608; overflow: hidden; pointer-events: none; box-shadow: 0 0 0 1px rgba(150,150,150,.35); }
#tv .face { position: absolute; filter: contrast(.92) saturate(.9) brightness(1.04) blur(.35px); transition: opacity .8s; }   /* as soft as the photo around it */
#tv .face.blank { opacity: 0; transition: none; }
#tv iframe, #tv video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
#tv .refl { position: absolute; inset: 0; background: url("assets/bg.jpg") no-repeat; background-size: 1920px 1080px;
            transform: scaleX(-1); filter: blur(9px); opacity: .11; mix-blend-mode: screen; }
#tv .glass { position: absolute; inset: 0;
             background: linear-gradient(103deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.075) 24%, rgba(255,255,255,0) 36%),
                         linear-gradient(180deg, rgba(222,232,248,.09), rgba(222,232,248,.035) 32%, rgba(222,232,248,.025));
             mix-blend-mode: screen; box-shadow: inset 0 0 0 2px rgba(6,7,9,.9), inset 0 0 26px rgba(0,0,0,.42); }
#sign { position: absolute; background: var(--sign); display: flex; align-items: center; gap: 26px; padding: 0 28px; }
#sign .gatebox { border: 4px solid var(--ink); padding: 6px 16px; font-weight: 800; font-size: 44px; line-height: 1; }
#sign .dest { font-weight: 800; font-size: 50px; line-height: 1; }
#sign .fl { margin-left: auto; text-align: right; font-weight: 700; font-size: 28px; line-height: 1.25; opacity: .9; }

/* ---------- flap modules (one character each) ---------- */
.field { display: flex; gap: var(--mg, 4px); }
.mod { position: relative; width: var(--mw); height: var(--mh); background: var(--slot); perspective: 300px; flex: none;
       box-shadow: inset 0 2px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.25); }
.mod.narrow { width: calc(var(--mw) * .5); }
.mod::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--gap); z-index: 5; }
.mod .h { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: var(--slot); backface-visibility: hidden; }
.mod .h span { position: absolute; left: 0; width: 100%; height: 200%; display: grid; place-items: center; font-weight: 800; font-size: var(--fs); line-height: 1; }
.mod .t, .mod .ft { top: 0; transform-origin: 50% 100%; }
.mod .b, .mod .fb { top: 50%; transform-origin: 50% 0; }
.mod .t span, .mod .ft span { top: 0; }
.mod .b span, .mod .fb span { top: -100%; }
.mod .t { z-index: 1; } .mod .b { z-index: 1; } .mod .ft { z-index: 3; } .mod .fb { z-index: 3; }
.mod .ft, .mod .fb { visibility: hidden; }
.logo { width: var(--lw); height: var(--mh); background: #f5f6f8; display: grid; place-items: center; flex: none; }
.logo svg { width: 72%; height: 72%; }
.lamp { width: var(--dot); height: var(--dot); border-radius: 50%; background: #fff; align-self: center; margin-left: 8px; visibility: hidden; }
.lamp.on { visibility: visible; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .1; } }

/* ---------- the wall board (portrait, inside the photo's blue cabinet) ---------- */
#wallboard { position: absolute; background: linear-gradient(180deg, var(--body-hi), var(--body) 45%, var(--body-lo)); padding: 16px 12px; overflow: hidden;
             --mw: 17px; --mh: 26px; --fs: 18px; --mg: 2px; --lw: 30px; --dot: 8px; }
#wallboard .hd { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
#wallboard .pict { width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 4px; display: grid; place-items: center; }
#wallboard .pict svg { width: 30px; }
#wallboard .t1 { font-weight: 800; font-size: 22px; } #wallboard .t2 { font-weight: 700; font-size: 16px; }
#wallboard .wrow { margin-top: 12px; }
#wallboard .wl { display: flex; gap: 6px; align-items: center; }
#wallboard .wl + .wl { margin-top: 4px; padding-left: 36px; }

/* ---------- the full departures board ---------- */
#full { position: absolute; inset: 0; background: linear-gradient(180deg, var(--body-hi) 0%, var(--body) 40%, var(--body-lo) 100%);
        opacity: 0; visibility: hidden; --mw: 47px; --mh: 72px; --fs: 46px; --mg: 4px; --lw: 84px; --dot: 20px; }
#full.show { visibility: visible; }
#full .hd { position: absolute; left: 64px; top: 40px; display: flex; align-items: center; gap: 26px; }
#full .pict { width: 112px; height: 112px; border: 4px solid var(--ink); border-radius: 6px; display: grid; place-items: center; }
#full .pict svg { width: 84px; }
#full .t1 { font-weight: 800; font-size: 54px; } #full .t1 i { font-style: normal; font-weight: 700; margin: 0 18px; opacity: .8; }
#full .t2 { font-weight: 700; font-size: 44px; margin-top: 4px; }
#full .clock { position: absolute; right: 64px; top: 52px; background: #0a1440; border: 4px solid #0f1d55; padding: 10px 22px; }
#full .clock svg { height: 84px; display: block; }
#full .cols { position: absolute; top: 196px; left: 64px; display: flex; gap: 22px; }
#full .cols div { font-weight: 800; font-size: 24px; line-height: 1.15; }
#full .cols small { display: block; font-weight: 700; font-size: 19px; color: var(--sub); }
#full .rows { position: absolute; top: 282px; left: 64px; }
#full .frow { display: flex; gap: 22px; align-items: center; height: 72px; margin-bottom: 26px; }
#full .strip { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; background: var(--strip); border-top: 4px solid #12206f; overflow: hidden; }
#full .strip .run { position: absolute; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; font-weight: 800; font-size: 34px;
                    animation: run 60s linear infinite; }
#full .strip .run i { font-style: normal; margin: 0 34px; opacity: .6; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- operator-only layers ---------- */
.op { position: absolute; inset: 0; display: none; place-items: center; background: rgba(5,10,30,.82); z-index: 50; font-weight: 700; }
.op.show { display: grid; }
.op .box { width: 1100px; background: #0d1a4a; border: 4px solid #c9d6ea; padding: 44px 52px; font-size: 30px; line-height: 1.6; }
.op h2 { font-weight: 800; font-size: 44px; margin-bottom: 18px; }
.op input { width: 100%; font: 700 28px NG, sans-serif; padding: 14px 18px; margin: 18px 0 8px; background: #fff; color: #111; border: 0; }
.op kbd { display: inline-block; min-width: 48px; padding: 0 10px; margin-right: 12px; background: #c9d6ea; color: #0d1a4a; text-align: center; font: 800 26px NG; }
.op .note { font-size: 24px; color: var(--sub); }
.op .note.taps { display: none; }

/* phone rehearsal: tap to step through the scenes; the scene name shows briefly, a block of the board's own blue */
#step { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 40; background: var(--slot); border: 4px solid var(--ink);
        padding: 14px 34px; font-weight: 800; font-size: 46px; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity .3s; pointer-events: none; }
#step.show { opacity: 1; }
#step b { font-weight: 700; color: var(--sub); margin-right: 22px; }
#turn { display: none; }
@media (pointer: coarse) {
  .op .note.keys { display: none; } .op .note.taps { display: block; }
  .op .box { font-size: 38px; } .op .note { font-size: 32px; }
}
@media (pointer: coarse) and (orientation: portrait) {
  #turn { display: block; position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; font-weight: 800; font-size: 20px; color: var(--sub); z-index: 60; }
}

/* takeoff: the last thing this screen plays; it ends on clouds and holds there */
#takeoff { position: absolute; inset: 0; width: 1920px; height: 1080px; background: #000; opacity: 0; visibility: hidden; }
#takeoff.show { visibility: visible; }