/* Shombhabona is a Bijoy (ANSI) Bangla font: js/bijoy.js converts the text and wraps it in .bj */
@font-face { font-family: "ShombhabonaBJ"; font-weight: 400; src: url("../assets/fonts/shombhabona-400.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "ShombhabonaBJ"; font-weight: 600; src: url("../assets/fonts/shombhabona-600.woff2") format("woff2"); font-display: block; }

:root {
  --navy: #0a1f6b;
  --navy-deep: #06123f;
  --blue: #1d4fc4;
  --cyan: #19aaf8;
  --white: #ffffff;
  --bn: system-ui, sans-serif;   /* only until Shombhabona has loaded */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--navy-deep); color: var(--white); font-family: var(--bn); -webkit-tap-highlight-color: transparent; }
button { font: inherit; border: 0; cursor: pointer; }
.bj { font-family: "ShombhabonaBJ", sans-serif; font-size: 1.12em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#camerafeed { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }


/* ---------- phases ---------- */
#intro, #loading, #scan, #hud, #hint, #error, #device { position: fixed; z-index: 10; }
#intro, #loading, #scan, #hud { display: none; }
body[data-phase="intro"] #intro { display: flex; }
body[data-phase="loading"] #loading { display: flex; }
body[data-phase="scanning"] #scan { display: flex; }
body[data-phase="ar"] #hud { display: flex; }

/* ---------- intro: full-screen key visual, button over the grass ---------- */
#intro { inset: 0; overflow: hidden; background: linear-gradient(180deg, #1a64d8 0%, #3d8fe0 45%, #2f8a3a 75%, #1f6a2a 100%); }
#intro .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
#intro .start {
  position: absolute; left: 0; right: 0; bottom: calc(4.5vh + var(--safe-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#start { width: min(64vw, 290px, 34vh); padding: 0; background: none; filter: drop-shadow(0 8px 18px rgba(0, 40, 120, .45)); transition: transform .15s; }
#start img { display: block; width: 100%; height: auto; }
#start:active { transform: scale(.96); }
#intro .note { font-size: 14px; text-shadow: 0 1px 3px rgba(0, 30, 10, .9), 0 0 12px rgba(0, 30, 10, .6); }
/* wider than the 9:16 artwork (tablets, computers): show all of it on a blurred copy */
@media (min-aspect-ratio: 10/16) {
  #intro::before { content: ""; position: absolute; inset: -40px; background: url("../assets/img/intro_bg_720.webp") center / cover; filter: blur(28px) brightness(.85); }
  #intro .bg { object-fit: contain; object-position: 50% 50%; }
}

.cta {
  min-width: 240px; padding: 15px 30px; border-radius: 999px;
  background: linear-gradient(90deg, #2a7cf6, var(--cyan));
  color: var(--white); font-size: 21px; letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(25, 170, 248, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .15s;
}
.cta:active { transform: scale(.96); }
.note { font-size: 14px; text-align: center; line-height: 1.5; }

/* ---------- loading ---------- */
#loading { inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; text-align: center; background: var(--navy-deep); }
#loading .status { min-height: 1.5em; font-size: 15px; opacity: .85; }
#loading p, .cta, #hint, #rec .label, #rec-sheet .busy, #rec-sheet .ghost { font-weight: 600; }
#loading .retry { display: none; margin-top: 8px; }
#loading.slow .retry { display: inline-block; }

.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: var(--cyan); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- scanning ---------- */
#scan { inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 22px; pointer-events: none; }
#scan .frame { position: relative; width: min(86vw, 70vh * 1.75); aspect-ratio: 35 / 20; }
#scan .frame i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--white); filter: drop-shadow(0 0 6px rgba(25, 170, 248, .9)); }
#scan .frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
#scan .frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
#scan .frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
#scan .frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
#scan .sweep { position: absolute; left: 4px; right: 4px; height: 3px; top: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 14px var(--cyan); animation: scan 2s ease-in-out infinite alternate; }
@keyframes scan { to { top: calc(100% - 3px); } }
#scan p { text-align: center; font-size: 19px; font-weight: 600; line-height: 1.5; padding: 10px 18px; border-radius: 14px; background: rgba(6, 18, 63, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- HUD (pinned to the frame, lower part, as in Canva) ---------- */
#hud {
  left: 0; right: 0; bottom: 0;
  flex-direction: column; align-items: center; gap: 8px;
  padding: 48px 16px calc(14px + var(--safe-bottom));
  background: linear-gradient(0deg, rgba(6, 18, 63, .72) 0%, rgba(6, 18, 63, .4) 55%, transparent 100%);
  pointer-events: none;
}
#title { width: min(56vw, 280px); max-height: 14vh; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 10, 50, .4)); }
#hud.swap #title { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.97); } }
#action {
  pointer-events: auto; width: min(43vw, 175px); padding: 0; background: none;
  filter: drop-shadow(0 6px 14px rgba(25, 120, 248, .45));
  transition: opacity .3s, transform .15s;
}
#action img { display: block; width: 100%; height: auto; }
#action:active { transform: scale(.96); }
#action.surprise { animation: pulse 1.2s ease-in-out infinite; }
#action.busy { opacity: 0; pointer-events: none; }
@keyframes pulse { 50% { transform: scale(1.05); } }
#hud .lockup { width: 105px; margin-top: 2px; }

#hint {
  left: 50%; top: calc(20px + var(--safe-top)); transform: translate(-50%, 20px);
  padding: 10px 18px; border-radius: 999px; font-size: 16px; white-space: nowrap;
  background: rgba(6, 18, 63, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
}
#hint.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- record ---------- */
#rec {
  position: fixed; z-index: 12; top: calc(14px + var(--safe-top)); right: 14px; display: none;
  width: 58px; height: 58px; border-radius: 50%; padding: 0; color: var(--white);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(0, 10, 50, .45);
}
#rec.on { background: #ff3b4e; animation: recpulse 1.4s ease-in-out infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 8px rgba(255, 59, 78, .28), 0 4px 14px rgba(0, 10, 50, .45); } }
body[data-phase="ar"] #rec { display: grid; place-items: center; }
#rec::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: rgba(6, 18, 63, .6); }
#rec .dot { position: relative; width: 24px; height: 24px; border-radius: 50%; background: #ff3b4e; transition: all .2s; }
#rec.on .dot { width: 18px; height: 18px; border-radius: 4px; }
#rec.busy { opacity: .6; pointer-events: none; }
#rec .label, #rec .time { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; text-shadow: 0 1px 4px rgba(0, 10, 50, .8); }
#rec .time { display: none; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #ff3b4e; text-shadow: none; }
#rec.on .time { display: block; }
#rec.on .label { display: none; }
#rec-sheet {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: calc(56px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
  background: rgba(4, 12, 44, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#rec-sheet[hidden] { display: none; }
#rec-sheet video { display: none; max-width: 100%; max-height: 56vh; border-radius: 16px; background: #000; box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
#rec-sheet .busy { display: none; flex-direction: column; align-items: center; gap: 12px; font-size: 18px; }
#rec-sheet .hint { display: none; max-width: 320px; text-align: center; font-size: 14px; line-height: 1.5; opacity: .9; }
#rec-sheet .save, #rec-sheet .actions { display: none; }
#rec-sheet .actions { gap: 10px; }
#rec-sheet .ghost { padding: 11px 18px; border-radius: 999px; color: var(--white); font-size: 16px; background: rgba(255, 255, 255, .14); }
#rec-sheet .close { position: absolute; top: calc(14px + var(--safe-top)); right: 14px; width: 42px; height: 42px; border-radius: 50%; color: var(--white); font-size: 20px; background: rgba(255, 255, 255, .14); }
#rec-sheet[data-state="processing"] .busy { display: flex; }
#rec-sheet[data-state="ready"] video, #rec-sheet[data-state="ready"] .save { display: block; }
#rec-sheet[data-state="ready"] .actions { display: flex; }
#rec-sheet[data-state="ready"].ios .hint.ios, #rec-sheet .hint.done.show { display: block; }
#rec-sheet:not(.can-share) .share { display: none; }

#error { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; background: var(--navy-deep); font-size: 18px; line-height: 1.5; }
#error[hidden] { display: none; }
#error b, #device b { font-weight: 600; color: #7fd3ff; }

/* ---------- desktop / unsupported browser ---------- */
#device { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; background: var(--navy-deep); font-size: 19px; line-height: 1.6; }
#device[hidden] { display: none; }
#device .logo { width: 170px; }
#device .qr { width: 220px; height: 220px; padding: 14px; border-radius: 16px; background: #fff; }
#device .qr[hidden], #device .copy[hidden] { display: none; }
#device .qr svg { display: block; width: 100%; height: 100%; }

body.leaving::after { content: ""; position: fixed; inset: 0; z-index: 50; background: var(--white); animation: flash .45s ease-out forwards; }
@keyframes flash { from { opacity: 0; } to { opacity: 1; } }