/* ===== Vesak Lights — Dialog theme ===========================================
   Brand palette pulled from the Dialog logo: red, orange, magenta/purple.
   Dark festive base so the colours glow like Vesak lanterns.
============================================================================== */
:root {
  --red:     #E2231A;
  --orange:  #F58220;
  --magenta: #E6007E;
  --purple:  #7A1FA2;
  --ink:     #120208;
  --ink-2:   #2a0710;
  --paper:   #fff;
  --glow:    0 0 40px rgba(230, 0, 126, .55), 0 0 90px rgba(245, 130, 32, .35);
  /* size of the square palm-scan area — big, because a real hand is placed on it.
     min() keeps it large in portrait yet fits the height in landscape. */
  --palm:    clamp(280px, min(66vmin, 56vh), 640px);
}

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

html, body {
  height: 100%;
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  color: var(--paper);
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(245,130,32,.18), transparent 60%),
    radial-gradient(1000px 700px at 90% 110%, rgba(230,0,126,.20), transparent 60%),
    radial-gradient(900px 700px at 5% 100%, rgba(122,31,162,.22), transparent 60%),
    linear-gradient(160deg, var(--ink), var(--ink-2));
  background-attachment: fixed;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(24px, 4vh, 60px) clamp(20px, 4vw, 80px);
  text-align: center;
}

/* Centres the main interactive element (button / palm / switch) in the space
   below the logo, so every page is balanced and properly centred. */
.stage {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.5vh, 36px);
  min-height: 0;
}

/* ---- Header / logo ---- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* Logo is now near-square (Dialog 5G Ultra) — size by height. */
.brand img { height: clamp(120px, 17vh, 220px); width: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.5)); }
.brand .sub {
  font-size: clamp(16px, 2.4vw, 28px);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #ffd9a8;
  opacity: .9;
}

.title {
  font-size: clamp(34px, 7vw, 84px);
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(90deg, var(--orange), var(--magenta), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(230,0,126,.25);
}
.title .small { display:block; font-size: .42em; font-weight: 600; letter-spacing:.2em; color:#ffd9a8; -webkit-text-fill-color:#ffd9a8; margin-top:.4em;}

/* ===== START button (index) ================================================ */
.start-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.start-btn {
  position: relative;
  width: clamp(220px, 34vw, 360px);
  height: clamp(220px, 34vw, 360px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: radial-gradient(circle at 35% 30%, #ff5b52, var(--red) 55%, #9c0f0a);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    inset 0 -10px 30px rgba(0,0,0,.35),
    inset 0 8px 20px rgba(255,255,255,.25);
  animation: breathe 1.4s ease-in-out infinite;
  transition: transform .08s ease;
}
.start-btn::after {
  content: "";
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 4px solid rgba(255,90,82,.6);
  animation: ring 1.4s ease-out infinite;
}
.start-btn:active { transform: scale(.96); }
.start-btn:disabled { animation: none; opacity: .6; cursor: default; }
.start-btn:disabled::after { display: none; }

@keyframes breathe {
  0%,100% { box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 -10px 30px rgba(0,0,0,.35), inset 0 8px 20px rgba(255,255,255,.25), 0 0 0 rgba(226,35,26,.0); }
  50%     { box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 -10px 30px rgba(0,0,0,.35), inset 0 8px 20px rgba(255,255,255,.25), 0 0 70px rgba(226,35,26,.85); transform: scale(1.03); }
}
@keyframes ring {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}

.hint { font-size: clamp(14px, 2vw, 22px); color: #ffd9a8; opacity: .8; letter-spacing: .1em; }

/* ---- Countdown overlay ---- */
.overlay {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.9));
  backdrop-filter: blur(4px);
  z-index: 50;
}
.overlay.show { display: flex; }
.count {
  font-size: clamp(160px, 40vw, 460px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(90deg, var(--orange), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: var(--glow);
  animation: pop .5s ease;
}
.count.go {
  font-size: clamp(70px, 16vw, 200px);
  letter-spacing: .05em;
}
@keyframes pop {
  0% { transform: scale(.3); opacity: 0; }
  60%{ transform: scale(1.15); opacity: 1; }
  100%{ transform: scale(1); }
}

.status { margin-top: 10px; font-size: clamp(14px,2vw,20px); color:#9affc1; min-height: 1.4em; letter-spacing:.05em;}

/* ===== Display page (a.html) =============================================== */
.display { justify-content: center; gap: clamp(20px, 5vh, 60px); }

.waiting {
  font-size: clamp(28px, 5vw, 60px);
  font-weight: 700;
  color: #cfd0ff;
  opacity: .85;
  animation: dim 2.4s ease-in-out infinite;
}
.waiting .dots::after { content: "..."; animation: dots 1.6s steps(4,end) infinite; }
@keyframes dim { 0%,100%{opacity:.45;} 50%{opacity:.95;} }
@keyframes dots { 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} }

.lights-msg {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vh, 40px);
}
body.lit { animation: flash 0.55s steps(1) infinite; }
@keyframes flash {
  0%   { background: linear-gradient(160deg, #1a0008, #2a0710); }
  50%  { background: radial-gradient(circle at 50% 40%, rgba(245,130,32,.5), transparent 60%), linear-gradient(160deg,#3a0014,#5a0020); }
}

.lights-msg .big {
  font-size: clamp(60px, 14vw, 220px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: .95;
  background: linear-gradient(90deg, #ffd400, var(--orange), var(--magenta), #ffd400);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 50px rgba(255,212,0,.5);
  animation: blink 0.5s steps(1) infinite, shimmer 2s linear infinite;
}
@keyframes blink { 0%,100%{ filter: brightness(1.25); } 50%{ filter: brightness(.55); } }
@keyframes shimmer { to { background-position: 300% 0; } }

.lights-msg .lanterns { font-size: clamp(40px, 9vw, 120px); letter-spacing: .15em; animation: sway 1.2s ease-in-out infinite; }
@keyframes sway { 0%,100%{ transform: translateY(0) rotate(-3deg);} 50%{ transform: translateY(-12px) rotate(3deg);} }

.lights-msg .meta { font-size: clamp(14px,2.2vw,22px); color:#ffe9c2; opacity:.85; letter-spacing:.1em;}

/* small operator controls */
.ops { position: fixed; bottom: 14px; right: 16px; display:flex; gap:10px; z-index: 60; }
.ops button {
  background: rgba(255,255,255,.08);
  color: #fff; border: 1px solid rgba(255,255,255,.25);
  padding: 8px 14px; border-radius: 10px; font-size: 13px; cursor: pointer;
  letter-spacing: .05em;
}
.ops button:hover { background: rgba(255,255,255,.18); }

.conn {
  position: fixed; top: 14px; right: 16px; z-index: 60;
  font-size: 12px; letter-spacing:.08em; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); color:#cfd0ff;
}
.conn.ok  { color:#9affc1; border-color: rgba(154,255,193,.4); }
.conn.bad { color:#ff9a9a; border-color: rgba(255,154,154,.4); }

/* ===== Sinhala text ======================================================== */
.si { font-family: "Noto Sans Sinhala", "Iskoola Pota", "Nirmala UI", "Segoe UI", sans-serif; }

/* National Vesak Zone heading shown under the logo on palm / switch pages */
.kalapaya {
  font-size: clamp(26px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.2;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--orange), var(--magenta), var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 50px rgba(230,0,126,.25);
}

/* ===== Palm scanner (palm.html) ============================================ */
.palm { display:flex; flex-direction:column; align-items:center; gap: clamp(16px,3vh,30px); width:100%; }

.palm-frame {
  position: relative;
  width: var(--palm);
  height: var(--palm);
  max-width: 94vw;
  border-radius: 32px;
  background: #150208;
  border: 2px solid rgba(245,130,32,.40);
  box-shadow: inset 0 0 90px rgba(0,0,0,.65), 0 20px 70px rgba(0,0,0,.55);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s, transform .08s;
  -webkit-user-select: none; user-select: none;
  touch-action: none;          /* keep press-and-hold from scrolling the page */
}
.palm-frame:active { transform: scale(.99); }

/* the generated circuit-hand image fills the frame */
.palm-frame .palm-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; pointer-events:none;
  filter: brightness(.68) saturate(.9);
  transition: filter .4s ease;
}
/* idle: gentle "alive" breathing glow so it invites a touch */
.palm-frame.idle .palm-img { animation: palmBreathe 2.6s ease-in-out infinite; }
@keyframes palmBreathe {
  0%,100% { filter: brightness(.62) saturate(.85); }
  50%     { filter: brightness(.92) saturate(1.1); }
}
/* scanning: image lights up fully */
.palm-frame.scanning { border-color: var(--magenta); box-shadow: inset 0 0 110px rgba(230,0,126,.30), 0 0 80px rgba(230,0,126,.5); }
.palm-frame.scanning .palm-img { filter: brightness(1.2) saturate(1.35) contrast(1.05); animation: none; }

/* sweeping scan line (complements the beam baked into the image) */
.palm-frame .scanline {
  position:absolute; left:0; right:0; top:0; height:10px; opacity:0;
  background: linear-gradient(90deg, transparent, #ffd400 20%, #ff7a00 50%, var(--magenta) 75%, transparent);
  box-shadow: 0 0 30px 10px rgba(255,170,0,.55);
  border-radius: 10px;
}
.palm-frame.scanning .scanline { opacity:1; animation: scanSweep 1.4s ease-in-out infinite; }
@keyframes scanSweep { 0%{ top:2%; } 50%{ top:95%; } 100%{ top:2%; } }

/* faint moving grid for a "capturing data" vibe */
.palm-frame .grid {
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,170,0,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,170,0,.12) 1px, transparent 1px);
  background-size: 34px 34px;
}
.palm-frame.scanning .grid { opacity:1; animation: gridShift 1.4s linear infinite; }
@keyframes gridShift { to { background-position: 0 34px, 34px 0; } }

/* corner brackets */
.palm-frame .corner { position:absolute; width:46px; height:46px; border:5px solid rgba(245,130,32,.8); pointer-events:none; transition: border-color .25s; }
.palm-frame .corner.tl { top:18px; left:18px; border-right:none; border-bottom:none; border-radius:12px 0 0 0; }
.palm-frame .corner.tr { top:18px; right:18px; border-left:none; border-bottom:none; border-radius:0 12px 0 0; }
.palm-frame .corner.bl { bottom:18px; left:18px; border-right:none; border-top:none; border-radius:0 0 0 12px; }
.palm-frame .corner.br { bottom:18px; right:18px; border-left:none; border-top:none; border-radius:0 0 12px 0; }
.palm-frame.scanning .corner { border-color: var(--magenta); animation: cornerPulse 1s ease-in-out infinite; }
@keyframes cornerPulse { 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* capture flash on success */
.palm-frame .capture-flash {
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background: radial-gradient(circle at 50% 50%, rgba(255,230,150,.95), rgba(255,140,0,.25) 55%, transparent 72%);
}
.palm-frame.captured .capture-flash { animation: captureFlash .7s ease-out; }
.palm-frame.captured { border-color: #ffd400; box-shadow: 0 0 90px rgba(255,212,0,.6); }
@keyframes captureFlash { 0%{ opacity:0; transform:scale(.5);} 30%{ opacity:1;} 100%{ opacity:0; transform:scale(1.4);} }

.scan-progress { width: var(--palm); max-width:94vw; height: 14px; border-radius: 999px; background: rgba(255,255,255,.12); overflow:hidden; }
/* width is set from JS as the palm is held; transition smooths frame-to-frame */
.scan-bar { width:0; height:100%; border-radius:999px; background: linear-gradient(90deg, var(--orange), var(--magenta)); box-shadow: 0 0 16px rgba(230,0,126,.6); transition: width .12s linear; }

.palm-hint { font-size: clamp(17px,2.6vw,26px); color:#ffd9a8; opacity:.9; letter-spacing:.06em; }

/* ===== Switch (switch.html) ================================================ */
.switch-wrap { display:flex; flex-direction:column; align-items:center; gap: clamp(20px,4vh,40px); }
.lever {
  position: relative;
  width: clamp(120px, 16vw, 160px);
  height: clamp(260px, 34vw, 340px);
  border-radius: 70px;
  border: 4px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, #2a0710, #1a0008);
  box-shadow: inset 0 8px 30px rgba(0,0,0,.6);
  cursor: pointer;
  padding: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.lever .knob {
  position:absolute; left:12px; right:12px; bottom:12px;
  height: calc(50% - 12px);
  border-radius: 56px;
  background: radial-gradient(circle at 50% 30%, #ff5b52, var(--red) 60%, #9c0f0a);
  box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 6px 14px rgba(255,255,255,.25);
  transition: top .35s cubic-bezier(.2,.9,.2,1.2), bottom .35s cubic-bezier(.2,.9,.2,1.2), background .3s;
}
.lever.on { border-color: var(--magenta); box-shadow: inset 0 8px 30px rgba(0,0,0,.6), 0 0 50px rgba(230,0,126,.5); }
.lever.on .knob {
  bottom: auto; top: 12px;
  background: radial-gradient(circle at 50% 30%, #ffe27a, #ffd400 55%, var(--orange));
  box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 6px 14px rgba(255,255,255,.4), 0 0 40px rgba(255,212,0,.6);
}
.switch-hint { font-size: clamp(16px,2.4vw,24px); color:#ffd9a8; opacity:.85; letter-spacing:.06em; }

/* ===== Celebration (palm + switch, stays on screen) ======================== */
.celebrate {
  display:none;
  position: fixed; inset: 0;
  flex-direction: column; align-items:center; justify-content:center;
  gap: clamp(20px,5vh,50px);
  background: radial-gradient(circle at 50% 40%, rgba(245,130,32,.22), #0a0105 75%);
  backdrop-filter: blur(8px);
  z-index: 40;
  animation: glowbg 2.4s ease-in-out infinite;
}
.celebrate.show { display:flex; }
.celebrate-logo { height: clamp(96px, 15vh, 200px); width:auto; filter: drop-shadow(0 6px 26px rgba(0,0,0,.6)); }
@keyframes glowbg {
  0%,100% { background: radial-gradient(circle at 50% 40%, rgba(245,130,32,.18), #0a0105 78%); }
  50%     { background: radial-gradient(circle at 50% 40%, rgba(230,0,126,.34), #0a0105 70%); }
}
.celebrate .lanterns { font-size: clamp(44px, 9vw, 120px); letter-spacing:.12em; animation: sway 1.2s ease-in-out infinite; }
.wesak-text {
  font-size: clamp(40px, 8vw, 120px);
  font-weight: 800;
  line-height: 1.25;
  padding: 0 14px;
  text-align: center;
  width: 100%;
  background: linear-gradient(90deg, #ffd400, var(--orange), var(--magenta), #ffd400);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(255,212,0,.45);
  animation: shimmer 2.4s linear infinite, glowpulse 1.2s ease-in-out infinite;
}
@keyframes glowpulse { 0%,100%{ filter: brightness(1.15); } 50%{ filter: brightness(.8); } }