/* =========================================
ROOT
========================================= */

:root{

--bg-dark:#0f0b05;

--gold-1:#fff4da;
--gold-2:#f4d08d;
--gold-3:#d6a754;
--gold-4:#a26d1f;

--card:#fffdf9;

--text:#161616;

--muted:#575757;

--line:#ead8b0;

--shadow:
0 40px 140px rgba(0,0,0,.45);

--radius:42px;

--app-width:620px;
}

/* =========================================
RESET
========================================= */

*{

margin:0;
padding:0;

box-sizing:border-box;
}

html{

scroll-behavior:smooth;
}

html,
body{

width:100%;
height:100%;

overflow:hidden;

font-family:
'Inter',
sans-serif;

background:

radial-gradient(
circle at top,
rgba(255,215,140,.16),
transparent 28%
),

radial-gradient(
circle at bottom,
rgba(255,190,90,.12),
transparent 30%
),

linear-gradient(
180deg,
#0f0b05 0%,
#161006 35%,
#241707 100%
);

-webkit-font-smoothing:
antialiased;

text-rendering:
optimizeLegibility;

touch-action:
manipulation;

-webkit-tap-highlight-color:
transparent;
}

body{

position:relative;

color:white;
}

/* =========================================
BACKGROUND
========================================= */

.bg-grid{

position:fixed;

inset:0;

z-index:-30;

opacity:.08;

background:

linear-gradient(
rgba(255,255,255,.22) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.22) 1px,
transparent 1px
);

background-size:
42px 42px;

mask-image:
radial-gradient(
circle at center,
black 12%,
transparent 88%
);
}

.bg-orb{

position:fixed;

border-radius:50%;

filter:blur(140px);

pointer-events:none;

z-index:-20;
}

.orb-1{

width:520px;
height:520px;

background:
rgba(255,220,140,.12);

top:-180px;
left:-140px;
}

.orb-2{

width:460px;
height:460px;

background:
rgba(255,180,70,.08);

right:-120px;
bottom:-120px;
}

/* =========================================
UTILS
========================================= */

.hidden{

display:none !important;
}

/* =========================================
LOGIN SCREEN
========================================= */

.login-screen{

position:fixed;

inset:0;

display:flex;
justify-content:center;
align-items:center;

padding:24px;
}

/* =========================================
LOGIN CARD
========================================= */

.login-card{

position:relative;

width:min(100%,430px);

padding:
48px
32px
36px;

border-radius:42px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

backdrop-filter:
blur(34px);

border:
1px solid rgba(255,255,255,.08);

box-shadow:

0 40px 140px rgba(0,0,0,.55),

0 0 80px rgba(255,190,80,.08);

overflow:hidden;
}

.login-card::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle at top,
rgba(255,255,255,.12),
transparent 42%
);

pointer-events:none;
}

/* =========================================
LOGIN TYPOGRAPHY
========================================= */

.brand-mark{

font-size:72px;

line-height:1;

text-align:center;

color:#fff6e4;

text-shadow:
0 0 40px rgba(255,210,120,.22);
}

.brand-title{

margin-top:26px;

text-align:center;

font-size:46px;

line-height:1.08;

font-family:
'Cinzel',
serif;

font-weight:700;

color:#fff7e8;

text-shadow:

0 6px 40px rgba(0,0,0,.22);
}

.brand-sub{

margin-top:24px;

text-align:center;

font-size:16px;

line-height:2;

color:
rgba(255,244,220,.72);
}

/* =========================================
LOGIN FORM
========================================= */

.login-form{

margin-top:38px;
}

.input{

width:100%;

margin-bottom:16px;

padding:
19px
18px;

border:none;

outline:none;

border-radius:22px;

background:
rgba(255,255,255,.06);

backdrop-filter:
blur(20px);

border:
1px solid rgba(255,255,255,.08);

color:#fff8ea;

font-size:16px;

font-weight:600;

transition:
all .25s ease;
}

.input::placeholder{

color:
rgba(255,245,225,.48);
}

.input:focus{

background:
rgba(255,255,255,.1);

border-color:
rgba(255,215,140,.18);

transform:
translateY(-1px);

box-shadow:

0 0 0 4px
rgba(255,215,140,.05);
}

/* =========================================
LOGIN BUTTON
========================================= */

.login-btn{

width:100%;

margin-top:10px;

padding:19px;

border:none;

outline:none;

cursor:pointer;

border-radius:22px;

background:

linear-gradient(
135deg,
#fff7e2,
#f2d08f,
#d5a34c
);

color:#111;

font-size:15px;

font-weight:800;

letter-spacing:2px;

transition:
transform .2s ease,
box-shadow .2s ease;
}

.login-btn:hover{

box-shadow:

0 18px 60px rgba(255,210,120,.18);
}

.login-btn:active{

transform:scale(.985);
}

.login-status{

margin-top:18px;

min-height:20px;

text-align:center;

font-size:13px;

font-weight:600;

color:#fff3dd;
}

/* =========================================
APP
========================================= */

.app-screen{

position:fixed;

inset:0;

background:

radial-gradient(
circle at center,
rgba(255,210,120,.12),
transparent 26%
),

linear-gradient(
180deg,
#0f0b05 0%,
#181105 40%,
#241706 100%
);
}

/* =========================================
TOPBAR
========================================= */

.topbar{

position:fixed;

top:0;
left:0;
right:0;

height:76px;

display:flex;
justify-content:space-between;
align-items:center;

padding:
env(safe-area-inset-top)
18px
0
18px;

z-index:200;

background:

linear-gradient(
to bottom,
rgba(0,0,0,.32),
transparent
);

backdrop-filter:
blur(18px);
}

.topbar-left{

display:flex;
align-items:center;
gap:14px;
}

.mini-om{

font-size:28px;

color:#d9a958;
}

.topbar-title{

font-size:16px;

font-weight:800;

color:#fff6e2;
}

.topbar-sub{

margin-top:2px;

font-size:11px;

font-weight:600;

opacity:.7;

color:#e7cfaa;
}

.logout-btn{

border:none;

padding:
12px
16px;

border-radius:16px;

background:
rgba(255,255,255,.08);

backdrop-filter:
blur(18px);

color:#fff4de;

font-size:13px;

font-weight:700;

cursor:pointer;
}

/* =========================================
REELS
========================================= */

.reels-container{

height:100vh;

overflow-y:auto;

scroll-snap-type:
y mandatory;

scroll-snap-stop:
always;

scroll-behavior:smooth;

overscroll-behavior-y:
contain;

-ms-overflow-style:none;

scrollbar-width:none;
}

.reels-container::-webkit-scrollbar{

display:none;
}

/* =========================================
REEL
========================================= */

.reel{

position:relative;

width:100%;

height:100vh;

scroll-snap-align:start;

display:flex;
justify-content:center;
align-items:center;

padding:

96px
18px
34px;
}

/* =========================================
CARD
========================================= */

.reel-card{

position:relative;

width:min(100%,var(--app-width));

height:min(84vh,860px);

background:
rgba(255,255,255,.985);

border:
1px solid rgba(255,255,255,.92);

backdrop-filter:
blur(30px);

border-radius:42px;

padding:

42px
30px
40px;

display:flex;
flex-direction:column;

overflow:hidden;

box-shadow:

0 30px 120px rgba(0,0,0,.42),

0 0 80px rgba(255,220,140,.08);
}

.reel-card::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;

height:10px;

background:

linear-gradient(
90deg,
#fff7df,
#d7a44c,
#fff7df
);
}

.reel-card::after{

content:"";

position:absolute;

top:-120px;
left:-120px;

width:260px;
height:260px;

border-radius:50%;

background:
rgba(255,220,150,.16);

filter:blur(60px);

pointer-events:none;
}

/* =========================================
BADGE
========================================= */

.gita-badge{

display:inline-flex;
align-items:center;
justify-content:center;

margin:0 auto;

padding:
12px
22px;

border-radius:999px;

background:
rgba(215,165,79,.1);

color:#8d631f;

font-size:12px;

font-weight:800;

letter-spacing:2px;

text-transform:uppercase;
}

/* =========================================
SLOKA
========================================= */

.sloka{

margin-top:62px;

padding:
0 12px;

text-align:center;

font-family:
'Noto Serif Telugu',
serif;

font-size:34px;

line-height:2.2;

letter-spacing:.2px;

font-weight:700;

color:#111;

overflow-wrap:break-word;
}

/* =========================================
EXPLANATION
========================================= */

.explanation{

margin-top:60px;

padding:

0
16px
44px;

flex:1;

overflow:auto;

font-family:
'Noto Serif Telugu',
serif;

font-size:21px;

line-height:2.4;

letter-spacing:.15px;

color:#5c5c5c;

text-align:left;

white-space:pre-line;
}

.explanation::-webkit-scrollbar{

width:4px;
}

.explanation::-webkit-scrollbar-thumb{

background:
rgba(0,0,0,.12);

border-radius:999px;
}

/* =========================================
BATCH LOADER
========================================= */

.batch-loader{

position:fixed;

left:50%;
bottom:28px;

transform:
translateX(-50%);

padding:
14px
20px;

border-radius:999px;

background:
rgba(255,255,255,.08);

backdrop-filter:
blur(20px);

color:#fff4dd;

font-size:13px;

font-weight:700;

z-index:400;
}

/* =========================================
BOOT LOADER
========================================= */

.boot-loader{

position:fixed;

inset:0;

background:

linear-gradient(
180deg,
#0f0b05 0%,
#1b1205 45%,
#241706 100%
);

display:flex;
justify-content:center;
align-items:center;
flex-direction:column;

z-index:9999;

transition:
opacity .5s ease;
}

.boot-ring{

width:92px;
height:92px;

border-radius:50%;

border:
3px solid rgba(255,255,255,.08);

border-top:
3px solid #f3cf8d;

animation:
spin 1s linear infinite;
}

.boot-text{

margin-top:26px;

font-size:14px;

font-weight:700;

letter-spacing:3px;

color:#fff3dd;
}

@keyframes spin{

to{
transform:rotate(360deg);
}
}

/* =========================================
INSTALL BUTTON
========================================= */

.install-btn{

position:fixed;

left:18px;
bottom:22px;

z-index:9999;

border:none;

padding:
14px
18px;

border-radius:999px;

background:
rgba(255,255,255,.12);

backdrop-filter:
blur(20px);

color:#fff5e4;

font-size:13px;

font-weight:800;

box-shadow:

0 12px 40px rgba(0,0,0,.28);

cursor:pointer;
}

/* =========================================
TABLET
========================================= */

@media(max-width:900px){

.reel-card{

height:86vh;
}
}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

.brand-title{

font-size:38px;
}

.brand-sub{

font-size:15px;
}

.reel{

padding:

88px
14px
28px;
}

.reel-card{

height:86vh;

padding:

34px
22px
28px;

border-radius:34px;
}

.sloka{

margin-top:50px;

font-size:27px;

line-height:2.05;
}

.explanation{

margin-top:48px;

font-size:18px;

line-height:2.15;

padding-bottom:34px;
}
}

/* =========================================
SMALL MOBILE
========================================= */

@media(max-width:420px){

.brand-title{

font-size:33px;
}

.login-card{

padding:
40px
22px
28px;
}

.sloka{

font-size:24px;
}

.explanation{

font-size:17px;

line-height:2.05;
}
}