/* =====================================================================
   POS MALAYSIA CONCIERGE  —  STYLES  (fluid / responsive, robust)
   ---------------------------------------------------------------------
   Fills any screen without letterboxing and stays clean across:
     - portrait 9:16 / 10:16 (TVs, kiosks)         <- primary, pixel-tuned
     - portrait 3:4 / near-square (tablets)
     - tall/narrow portrait (phones)
     - landscape (gets its own side-by-side layout)
   Sizing uses clamp(min, <vw>, <vh-cap>); the <vw> term reproduces the
   1080x1920 (9:16) design (1vw=10.8px, 1vh=19.2px at 9:16), the <vh> term
   caps growth on shorter/wider screens. The title is pinned BELOW the
   header, and the avatar is kept clear of the QR, so nothing collides.
   ===================================================================== */

/* ---- Fonts (self-hosted, work offline) ---- */
@font-face { font-family:"Poppins"; font-weight:400; font-style:normal; font-display:swap; src:url("../assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:500; font-style:normal; font-display:swap; src:url("../assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:600; font-style:normal; font-display:swap; src:url("../assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:700; font-style:normal; font-display:swap; src:url("../assets/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:800; font-style:normal; font-display:swap; src:url("../assets/fonts/poppins-800.woff2") format("woff2"); }

/* ---- Brand tokens + responsive metrics ---- */
:root {
  --pos-red:        #D81F32;
  --pos-blue:       #0C51A0;
  --pos-navy:       #073B7A;
  --ink:            #0E2A4A;
  --muted:          #5E7898;
  --paper:          #FFFFFF;

  --font: "Poppins", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;

  --pad-x:   clamp(14px, 6.6vw, 120px);
  --pad-top: clamp(14px, 3.3vh, 96px);
  --logo-h:  clamp(34px, 9.6vw, 8.1vh);   /* also used as the header-height proxy */

  /* QR / scan column width. On portrait the vw term wins; on landscape the
     vh term keeps it from getting too wide. */
  --scan-w:  clamp(148px, 40vw, 40vh);

  /* Avatar: video is 3:4 (1248x1664) and the person is centred in it, so the
     left edge = person-x - (videoWidth/2) = person-x - 0.375*height. Height
     grows with width but is capped by height so it never crowds the title. */
  --avatar-h:  min(129vw, 72vh);
  --person-x:  28vw;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #EAF2FB;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.viewport {
  position: fixed; inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.stage {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #ffffff;
  opacity: 0;
  transition: opacity .7s ease;
}
.stage.is-ready { opacity: 1; }

/* =====================================================================
   Background layers
   ===================================================================== */
.bg { position: absolute; inset: 0; }

.bg--gradient {
  background: linear-gradient(180deg,
    #DBEAF8 0%,
    #E9F2FB 12%,
    #FBFDFF 26%,
    #FFFFFF 42%,
    #FFFFFF 80%,
    #EFF6FC 100%);
}

.bg--image {
  background-image: url("../assets/avatar-background.png");
  background-size: cover;
  background-position: center top;
  opacity: 0;
  mix-blend-mode: multiply;
}

.bg--blobs .blob { position: absolute; border-radius: 50%; filter: blur(6vmin); }
.blob--red  { width: 52vmax; height: 52vmax; right: -12vmax; top: 34%;
  background: radial-gradient(circle, rgba(216,31,50,.16), rgba(216,31,50,0) 70%); }
.blob--blue { width: 60vmax; height: 60vmax; left: -22vmax; top: 58%;
  background: radial-gradient(circle, rgba(12,81,160,.15), rgba(12,81,160,0) 70%); }

/* =====================================================================
   Header (logo + clock) — pinned to the top
   ===================================================================== */
.header {
  position: absolute; top: var(--pad-top); left: var(--pad-x); right: var(--pad-x);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  z-index: 6;
}
.logo {
  height: var(--logo-h); width: auto; display: block;
  filter: drop-shadow(0 6px 14px rgba(12,81,160,.14));
}
.clock { text-align: right; padding-top: 2px; flex: 0 0 auto; }
.clock__time {
  font-size: clamp(15px, 4.26vw, 3.6vh); font-weight: 700; color: var(--pos-navy);
  letter-spacing: .5px; line-height: 1; text-transform: uppercase;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.clock__date {
  margin-top: .35em; font-size: clamp(9px, 2.04vw, 1.72vh); font-weight: 500; color: var(--muted);
  letter-spacing: .3px; white-space: nowrap;
}

/* =====================================================================
   Welcome title — always pinned just BELOW the header
   ===================================================================== */
.titles {
  position: absolute;
  top: calc(var(--pad-top) + var(--logo-h) + clamp(12px, 2.4vh, 48px));
  left: var(--pad-x); right: var(--pad-x);
  z-index: 5;
  animation: rise .9s .15s both ease-out;
}
.eyebrow {
  font-size: clamp(10px, 2.78vw, 2.34vh); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pos-red);
  margin-bottom: .5em;
}
.eyebrow:empty { display: none; }
.title {
  font-size: clamp(24px, 8.5vw, 7.2vh); font-weight: 800; line-height: 1.03;
  color: var(--pos-navy); letter-spacing: -0.018em;
  max-width: 13ch;
  text-wrap: balance;
}
.title__rule {
  display: block; margin-top: clamp(10px, 2.78vw, 2.34vh);
  width: clamp(60px, 15.5vw, 13vh); height: clamp(3px, 0.83vw, 0.7vh); border-radius: 6px;
  background: linear-gradient(90deg, var(--pos-red) 0%, var(--pos-red) 45%, var(--pos-blue) 55%, var(--pos-blue) 100%);
}

/* =====================================================================
   Avatar (looping video) — feathered so its white backdrop melts away
   ===================================================================== */
.avatar-wrap { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.avatar {
  position: absolute; bottom: 0;
  height: var(--avatar-h); width: auto;
  left: calc(var(--person-x) - 0.375 * var(--avatar-h));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 5.5%, #000 95%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 5.5%, #000 95%, rgba(0,0,0,0) 100%);
  animation: avatarIn 1.1s .2s both ease-out;
}

.avatar-shadow {
  position: absolute; bottom: clamp(20px, 5vh, 150px);
  width: calc(0.4 * var(--avatar-h)); height: clamp(28px, 4.2vh, 120px);
  left: calc(var(--person-x) - 0.2 * var(--avatar-h));
  background: radial-gradient(ellipse at center, rgba(7,59,122,.30) 0%, rgba(7,59,122,0) 70%);
  filter: blur(8px);
  animation: rise 1s .35s both ease-out;
}

/* =====================================================================
   Scan / QR panel  — right column, vertically centred
   ===================================================================== */
.scan {
  position: absolute; right: var(--pad-x); top: 56%;
  width: var(--scan-w);
  text-align: right; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-end;
  transform: translateY(-50%);
  animation: riseScan .9s .35s both ease-out;
}
.scan__headline {
  font-size: clamp(16px, 4.26vw, 3.6vh); font-weight: 700; line-height: 1.12;
  color: var(--pos-navy); letter-spacing: -.01em;
  margin-bottom: .8em;
}
.scan__subtext {
  margin-top: 1em; font-size: clamp(10px, 2.4vw, 2vh); font-weight: 500;
  color: var(--muted); line-height: 1.35; letter-spacing: .2px;
}
.scan__subtext:empty { display: none; }

/* QR card */
.qr-card {
  position: relative;
  background: #ffffff;
  border-radius: clamp(14px, 3.15vw, 40px);
  padding: clamp(12px, 3.15vw, 2.65vh);
  box-shadow: 0 34px 70px rgba(7,59,122,.20), 0 6px 18px rgba(7,59,122,.10);
  border: 1px solid rgba(12,81,160,.08);
  animation: floaty 5.5s ease-in-out infinite;
  max-width: 100%;
}
.qr-card__label {
  display: flex; align-items: center; gap: .5em;
  margin-bottom: clamp(10px, 2vw, 1.7vh);
}
.qr-card__icon { width: clamp(16px, 2.6vw, 2.2vh); height: clamp(16px, 2.6vw, 2.2vh); display: block; }
.qr-card__label-text {
  font-size: clamp(10px, 1.85vw, 1.6vh); font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--pos-red); white-space: nowrap;
}
.qr-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: clamp(9px, 1.4vw, 1.2vh); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #178A4E; background: rgba(33,194,106,.12);
  padding: .35em .8em; border-radius: 999px; white-space: nowrap;
}
.qr-live i {
  width: .6em; height: .6em; border-radius: 50%; background: #21C26A;
  animation: livedot 1.8s ease-out infinite;
}

.qr-frame { position: relative; display: grid; place-items: center; }
.qr {
  position: relative;
  width: clamp(118px, 29.6vw, 23vh); height: clamp(118px, 29.6vw, 23vh);
  border-radius: 12px; overflow: hidden; background: #ffffff;
}
.qr svg { display: block; width: 100%; height: 100%; }
.qr iframe {
  position: absolute; top: 0; left: 0; z-index: 1; border: 0;
  transform-origin: 0 0; pointer-events: none; background: #fff;
}
.qr-loading {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #ffffff; color: var(--muted);
  font-size: clamp(12px, 1.7vw, 1.5vh); font-weight: 600; text-align: center;
}
.qr-loading img { width: clamp(26px, 3.5vw, 3vh); height: clamp(26px, 3.5vw, 3vh); opacity: .85; animation: spin 1.5s linear infinite; }
.qr.is-live .qr-loading { opacity: 0; visibility: hidden; transition: opacity .4s ease; }

.qr-pulse {
  position: absolute; inset: clamp(-16px, -1.3vw, -10px);
  border: clamp(2px, .3vw, 4px) solid var(--pos-red);
  border-radius: clamp(14px, 2vw, 24px);
  opacity: 0; animation: pulse 2.4s ease-out infinite;
}

.qr-card__corner {
  position: absolute; width: clamp(18px, 2.8vw, 36px); height: clamp(18px, 2.8vw, 36px); pointer-events: none;
  border: clamp(3px, .46vw, 6px) solid var(--pos-blue); border-radius: 4px;
}
.qr-card__corner--tl { top: clamp(9px,1.5vw,20px); left: clamp(9px,1.5vw,20px); border-right: none; border-bottom: none; }
.qr-card__corner--tr { top: clamp(9px,1.5vw,20px); right: clamp(9px,1.5vw,20px); border-left: none; border-bottom: none; }
.qr-card__corner--bl { bottom: clamp(9px,1.5vw,20px); left: clamp(9px,1.5vw,20px); border-right: none; border-top: none; }
.qr-card__corner--br { bottom: clamp(9px,1.5vw,20px); right: clamp(9px,1.5vw,20px); border-left: none; border-top: none; }

/* =====================================================================
   Wide portrait (≈3:4 tablets up to square): shorten the avatar so it
   clears the title, and trim the title a touch. (9:16 / 10:16 unaffected.)
   ===================================================================== */
@media (min-aspect-ratio: 17/25) and (max-aspect-ratio: 1/1) {
  :root { --avatar-h: min(122vw, 63vh); --person-x: 27vw; }
  .title { font-size: clamp(24px, 7.8vw, 6.2vh); max-width: 12ch; }
  .scan  { top: 61%; }
}

/* =====================================================================
   Landscape (wider than tall): avatar fills the left, title + QR sit on
   the right so they never collide with a tall standing figure.
   ===================================================================== */
@media (min-aspect-ratio: 1/1) {
  :root {
    --avatar-h: min(62vw, 95vh);
    --person-x: 24vw;
    --scan-w: clamp(180px, 34vw, 52vh);
  }
  /* Title pinned top-right (clear of the avatar on the left). */
  .titles {
    left: 46vw; right: var(--pad-x);
    top: calc(var(--pad-top) + var(--logo-h) + clamp(10px, 2.2vh, 40px));
  }
  .eyebrow { display: none; }                 /* save vertical room in landscape */
  .title { font-size: clamp(20px, 3.8vw, 8.5vh); max-width: 18ch; }
  /* QR block anchored bottom-right so it stacks cleanly under the title. */
  .scan {
    top: auto; bottom: clamp(16px, 5vh, 80px);
    transform: none;
    animation: rise .9s .35s both ease-out;
  }
  .scan__headline { font-size: clamp(15px, 2.8vw, 5vh); }
  .qr { width: clamp(140px, 20vw, 30vh); height: clamp(140px, 20vw, 30vh); }
}

/* =====================================================================
   Animations
   ===================================================================== */
@keyframes rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes riseScan {
  from { opacity: 0; transform: translateY(calc(-50% + 30px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}
@keyframes avatarIn {
  from { opacity: 0; transform: translateY(40px) scale(1.01); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes pulse {
  0%   { opacity: .7; transform: scale(.92); }
  70%  { opacity: 0;  transform: scale(1.12); }
  100% { opacity: 0;  transform: scale(1.12); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes livedot {
  0%   { box-shadow: 0 0 0 0 rgba(33,194,106,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(33,194,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(33,194,106,0); }
}

@media (prefers-reduced-motion: reduce) {
  .titles, .avatar, .avatar-shadow { animation: none; }
  .scan { animation: none; }
  .qr-card { animation: none; }
  .qr-pulse { display: none; }
  .qr-live i, .qr-loading img { animation: none; }
}

/* ---- NoScript notice ---- */
.noscript {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: #062f5e; color: #fff; font-family: var(--font);
  font-size: 28px; padding: 40px; text-align: center;
}