/* DhivehiVaahaka presentation — 1920×1080 stage, Thaana / RTL */

@font-face { font-family: 'MVWaheed'; src: url(../assets/fonts/mv-waheed.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Faseyha'; src: url(../assets/fonts/mv-faseyha.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Aammu'; src: url(../assets/fonts/aammufkF.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Utheemu'; src: url(../assets/fonts/MV_Utheemu_Regular.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Rasmee'; src: url(../assets/fonts/AK_Rasmee.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Faruma'; src: url(../assets/fonts/Faruma.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Randhoo'; src: url(../assets/fonts/MVRandhoo.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'WaheedOT'; src: url(../assets/fonts/MVWaheed.otf) format('opentype'); font-display: block; }
@font-face { font-family: 'Inter'; src: url(../assets/fonts/inter-var.woff2) format('woff2'); font-weight: 100 900; font-display: block; }

:root {
  --bg0: #020a07;
  --bg1: #04140f;
  --bg2: #0b3d2e;
  --green: #00b393;
  --green-l: #5fceb3;
  --green-d: #009476;
  --gold: #f1bf4e;
  --gold-d: #dfa700;
  --teal: #19c3b1;
  --ink: #eef5f1;
  --ink2: #a9c2b8;
  --ink3: #6f8a80;
  --line: rgba(95, 206, 179, 0.22);
  --glass: rgba(12, 22, 19, 0.72);
  --glass2: rgba(20, 34, 30, 0.86);
  --accent: var(--green);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg0); }
body { font-family: 'Faseyha', 'Faruma', sans-serif; color: var(--ink); cursor: default; user-select: none; -webkit-user-select: none; }
body.idle { cursor: none; }
img { display: block; }
video { display: block; background: #000; }
.num, .ltr { font-family: 'Inter', sans-serif; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ stage */
#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; }

/* ambient background shared by all slides */
#bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 70% 0%, var(--bg2) 0%, var(--bg1) 46%, var(--bg0) 100%); }
#bg .glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.5; transition: background 1.6s var(--ease), opacity 1.6s; }
#bg .g1 { width: 900px; height: 900px; left: -260px; bottom: -420px; background: #0f6b52; animation: drift1 26s ease-in-out infinite alternate; }
#bg .g2 { width: 760px; height: 760px; right: -200px; top: -320px; background: #0b5a46; animation: drift2 31s ease-in-out infinite alternate; }
#bg .g3 { width: 520px; height: 520px; left: 52%; top: 58%; background: #6b5313; opacity: 0.28; animation: drift1 37s ease-in-out infinite alternate-reverse; }
body[data-act='2'] #bg .g1 { background: #6b5313; }
body[data-act='2'] #bg .g3 { background: #8a6a12; opacity: 0.35; }
body[data-act='3'] #bg .g1 { background: #0d6670; }
body[data-act='3'] #bg .g2 { background: #0b5560; }
body[data-act='4'] #bg .g3 { background: #8a6a12; opacity: 0.4; }
#bg canvas { position: absolute; inset: 0; }
#bg .grain { position: absolute; inset: 0; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#bg .thaana { position: absolute; inset: -100px; font-family: 'MVWaheed'; font-size: 260px; line-height: 1.25; color: rgba(95, 206, 179, 0.028); white-space: nowrap; overflow: hidden; animation: scrollT 160s linear infinite; }
@keyframes drift1 { to { transform: translate(160px, -120px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-140px, 120px) scale(0.9); } }
@keyframes scrollT { to { transform: translateX(-900px); } }

#brand { position: absolute; left: 64px; top: 48px; width: 168px; height: 52px; z-index: 40; opacity: 0; transition: opacity 0.8s var(--ease); pointer-events: none; }
#brand.on { opacity: 0.85; }
#brand svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ slides */
.slide { position: absolute; inset: 0; visibility: hidden; direction: rtl; }
.slide.active { visibility: visible; }
.slide > * { position: absolute; }

.col { right: 100px; top: 190px; width: 610px; text-align: right; }
.col.top { top: 110px; }
.stagez { left: 96px; top: 150px; width: 1080px; height: 820px; }

.kicker { display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 6px; border-radius: 999px; border: 1.5px solid rgba(95, 206, 179, 0.35); background: rgba(0, 148, 118, 0.14); color: var(--green-l); font-family: 'Aammu'; font-size: 30px; margin-bottom: 30px; }
.kicker::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); margin-bottom: 4px; }
.kicker.gold { color: var(--gold); border-color: rgba(241, 191, 78, 0.4); background: rgba(223, 167, 0, 0.12); }
.kicker.gold::before { background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.kicker.teal { color: #7be3d8; border-color: rgba(25, 195, 177, 0.4); background: rgba(25, 195, 177, 0.12); }
.kicker.teal::before { background: var(--teal); box-shadow: 0 0 14px var(--teal); }

h1, .h { font-family: 'MVWaheed'; font-weight: normal; font-size: 84px; line-height: 1.5; background: linear-gradient(180deg, #ffffff 30%, #cdf1e6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 6px; }
h1.gold, .h.gold { background-image: linear-gradient(180deg, #fff6dc 10%, #f1bf4e 100%); }
.sub { font-family: 'Faseyha'; font-size: 34px; line-height: 1.75; color: var(--ink2); margin-top: 18px; }
.sub b { color: var(--gold); font-weight: normal; }

.chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 8px; border-radius: 16px; background: var(--glass); border: 1.5px solid var(--line); font-family: 'Aammu'; font-size: 26px; color: var(--ink); backdrop-filter: blur(14px); }
.chip i { font-style: normal; color: var(--green-l); font-family: 'Inter'; font-size: 22px; }
.chip.gold { border-color: rgba(241, 191, 78, 0.45); }
.chip.gold i { color: var(--gold); }
.chip.on { border-color: var(--green); background: rgba(0, 148, 118, 0.28); box-shadow: 0 0 30px rgba(0, 179, 147, 0.35); }
.chip.gold.on { border-color: var(--gold); background: rgba(223, 167, 0, 0.2); box-shadow: 0 0 30px rgba(241, 191, 78, 0.35); }

.card { background: var(--glass2); border: 1.5px solid var(--line); border-radius: 28px; backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }

/* ------------------------------------------------------------------ device frames */
.browser { border-radius: 18px; overflow: hidden; background: #0c0e12; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 0 1.5px rgba(255, 255, 255, 0.08); direction: ltr; }
.browser .bar { height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 18px; background: #16191e; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.browser .bar i { width: 13px; height: 13px; border-radius: 50%; background: #3a3f46; }
.browser .bar i:nth-child(1) { background: #ff5f57; } .browser .bar i:nth-child(2) { background: #febc2e; } .browser .bar i:nth-child(3) { background: #28c840; }
.browser .url { margin: 0 auto; transform: translateX(-30px); height: 30px; min-width: 360px; padding: 0 22px; border-radius: 9px; background: #0c0e12; color: #a0a5ab; font: 500 15px/30px 'Inter'; text-align: center; }
.browser .url::before { content: '🔒 '; font-size: 12px; }
.browser .body { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0c0e12; }
.browser .body > video, .browser .body > img { width: 100%; height: 100%; object-fit: cover; }

.laptop { direction: ltr; }
.laptop .lid { position: relative; padding: 18px 18px 22px; border-radius: 26px 26px 10px 10px; background: linear-gradient(160deg, #3a4048, #15181c 30%, #0d0f12 70%, #2a3036); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), inset 0 0 0 1.5px rgba(255, 255, 255, 0.08); }
.laptop .lid::before { content: ''; position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: #05070a; box-shadow: inset 0 0 0 1.5px #1f2a30; }
.laptop .screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; }
.laptop .screen > video, .laptop .screen > img { width: 100%; height: 100%; object-fit: cover; }
.laptop .base { height: 22px; margin: 0 -60px; border-radius: 0 0 26px 26px; background: linear-gradient(180deg, #4a5058, #1d2126 60%, #0d0f12); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); position: relative; }
.laptop .base::before { content: ''; position: absolute; left: 50%; top: 0; width: 180px; height: 9px; margin-left: -90px; border-radius: 0 0 10px 10px; background: #0f1215; }

.phone { width: 400px; height: 866px; padding: 13px; border-radius: 62px; background: linear-gradient(150deg, #4b535b 0%, #1d2126 22%, #121417 60%, #3b4249 100%); box-shadow: 0 50px 110px rgba(0, 0, 0, 0.65), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); direction: ltr; }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: 50px; overflow: hidden; background: #06070a; }
.phone .scr::after { content: ''; position: absolute; top: 12px; left: 50%; width: 112px; height: 32px; margin-left: -56px; border-radius: 20px; background: #000; z-index: 20; }
.phone .scr > img, .phone .scr > video, .phone .scr .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone.sm { width: 300px; height: 650px; padding: 10px; border-radius: 48px; }
.phone.sm .scr { border-radius: 38px; }
.phone.sm .scr::after { width: 86px; height: 25px; margin-left: -43px; top: 9px; }

/* ------------------------------------------------------------------ misc components */
.ready { position: absolute; left: 52px; bottom: 38px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); opacity: 0; z-index: 60; transition: opacity 0.5s; }
.ready::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--green); animation: ring 1.6s ease-out infinite; }
.ready.on { opacity: 0.9; }
@keyframes ring { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

.pulse { position: relative; }
.pulse::after { content: ''; position: absolute; inset: -10px; border-radius: inherit; border: 3px solid var(--gold); animation: pulse 1.4s ease-out infinite; pointer-events: none; }
@keyframes pulse { from { transform: scale(0.96); opacity: 1; } to { transform: scale(1.12); opacity: 0; } }

.ff { position: absolute; z-index: 8; left: 24px; top: 24px; padding: 8px 18px; border-radius: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; font: 700 22px/1 'Inter'; letter-spacing: -3px; opacity: 0; backdrop-filter: blur(8px); }
.ff.on { opacity: 1; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.4; } }

.ripple { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid var(--gold); background: rgba(241, 191, 78, 0.35); pointer-events: none; animation: rip 0.7s ease-out forwards; z-index: 30; }
@keyframes rip { to { transform: scale(4); opacity: 0; } }

.tick { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 179, 147, 0.15); border: 2px solid var(--line); color: transparent; font: 700 22px/1 'Inter'; transition: all 0.4s var(--ease); flex: none; }
.tick.on { background: var(--green); border-color: var(--green); color: #04140f; box-shadow: 0 0 22px rgba(0, 179, 147, 0.6); }

/* ------------------------------------------------------------------ HUD */
#hud { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 100; display: flex; align-items: center; gap: 20px; padding: 0 28px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent); opacity: 0; transition: opacity 0.4s; direction: rtl; pointer-events: none; }
body.hud #hud { opacity: 1; pointer-events: auto; }
#hud .segs { flex: 1; display: flex; gap: 6px; height: 5px; direction: rtl; }
#hud .seg { position: relative; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; cursor: pointer; }
#hud .seg b { position: absolute; inset: 0 0 0 auto; width: 0; background: var(--green); transition: width 0.5s var(--ease); }
#hud .label { font-family: 'Aammu'; font-size: 20px; color: var(--ink2); white-space: nowrap; }
#hud .count { font: 600 15px 'Inter'; color: var(--ink2); }
#hud button { pointer-events: auto; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--ink); border-radius: 10px; height: 34px; padding: 0 12px; font: 600 13px 'Inter'; cursor: pointer; }
#hud button.on { background: var(--green); color: #04140f; }

#blank { position: fixed; inset: 0; z-index: 200; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
body.blank #blank { opacity: 1; pointer-events: auto; }

#overview { position: fixed; inset: 0; z-index: 150; background: rgba(2, 10, 7, 0.94); backdrop-filter: blur(10px); display: none; padding: 60px 80px; overflow: auto; direction: rtl; }
body.ov #overview { display: block; }
#overview .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
#overview .t { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; border: 1.5px solid var(--line); background: var(--glass2); padding: 16px; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
#overview .t:hover { border-color: var(--green); }
#overview .t.cur { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
#overview .t .n { position: absolute; left: 14px; top: 10px; font: 700 26px 'Inter'; color: rgba(255, 255, 255, 0.25); }
#overview .t .ti { font-family: 'Aammu'; font-size: 20px; line-height: 1.6; }
#overview .t .ac { font-family: 'Aammu'; font-size: 15px; color: var(--ink3); }
#overview h2 { font-family: 'MVWaheed'; font-weight: normal; font-size: 40px; margin-bottom: 30px; }

#helpbox { position: fixed; z-index: 160; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 680px; padding: 36px 44px; border-radius: 24px; background: var(--glass2); border: 1.5px solid var(--line); display: none; direction: rtl; font-size: 22px; line-height: 2; }
body.help #helpbox { display: block; }
#helpbox kbd { font: 600 15px 'Inter'; padding: 2px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); margin: 0 3px; }

#audiohint { position: fixed; z-index: 120; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 14px 28px 10px; border-radius: 999px; background: var(--gold); color: #1a1300; font-family: 'Aammu'; font-size: 24px; display: none; cursor: pointer; }
body.needaudio #audiohint { display: block; }

@media (prefers-reduced-motion: reduce) {
  #bg .glow, #bg .thaana { animation: none; }
}