*,*::before,*::after{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html{
overflow-x:hidden;
}

:root{
--bg:#ebebeb;
--white:#f8f8f7;
--black:#111111;
--gray:#8d8d8d;
--lgray:#cccccc;
--tag:#ffffffd7;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'DM Sans',sans-serif;
background:var(--bg);
color:var(--black);
overflow:hidden;
/* restore default cursor */
cursor:auto;
user-select:none;
}

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

#loader{
position:fixed;
inset:0;
background:#ececec;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
transition:1s ease;
}


#cur{
width:10px;
height:10px;
background:#111;
border-radius:50%;
position:fixed;
pointer-events:none;
z-index:9999;
transform:translate(-50%,-50%);
}

#cur2{
width:36px;
border:1.5px solid #222;
border-radius:50%;
position:fixed;
pointer-events:none;
z-index:9998;
transform:translate(-50%,-50%);
transition: left .12s ease, top .12s ease, transform .15s ease;

}

/* =========================
NAV
========================= */

nav{
position:absolute;
top:0;
left:0;
right:0;
padding:20px 44px;
display:flex;
align-items:center;
justify-content:space-between;
z-index:100;
background:rgba(235,235,235,.78);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(0,0,0,.06);
}

.nav-left{
display:flex;
align-items:center;
gap:34px;
}

.nav-logo{
width:42px;
height:42px;
border-radius:50%;
border:2px solid var(--black);
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:700;
transition:.3s;
}

.nav-logo:hover{
background:var(--black);
color:#fff;
}

.nav-links{
display:flex;
gap:28px;
}

.nav-links a{
text-decoration:none;
color:var(--black);
font-size:14px;
position:relative;
padding-bottom:2px;
}

.nav-links a::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:0;
height:1px;
background:var(--black);
transition:.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after{
width:100%;
}

.theme-btn{
padding:10px 18px;
border:none;
background:rgba(255,255,255,.7);
backdrop-filter:blur(10px);
border-radius:40px;
font-size:11px;
cursor:pointer;
}

/* =========================
PAGES
========================= */

.page{
position:fixed;
inset:0;
opacity:0;
pointer-events:none;
overflow:hidden;
transition:opacity .6s ease;
}

.page.active{
opacity:1;
pointer-events:all;
}

/* =========================
WATERMARK
========================= */

.wm{
position:absolute;
right:-20px;
top:50%;
transform:translateY(-50%);
font-family:'Bebas Neue',sans-serif;
font-size:clamp(80px,14vw,190px);
color:rgba(0,0,0,.05);
letter-spacing:.02em;
white-space:nowrap;
pointer-events:none;
overflow:hidden;
max-width:100vw;
}

/* =========================
HERO
========================= */

.hero-img{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:5;
}

.hero-img img{
height:100vh;
max-width:65vw;
object-fit:cover;
object-position:center;
filter:grayscale(100%) contrast(1.05);
}

.hero-content{
position:absolute;
left:44px;
bottom:120px;
z-index:20;
}

.hero-title{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(80px,10vw,140px);
line-height:.88;
letter-spacing:-.03em;
overflow:hidden;
}

.hero-title span{
display:block;
transform:translateY(110%);
animation:slideUp .9s cubic-bezier(.16,1,.3,1) .2s forwards;
}

@keyframes slideUp{
to{
transform:translateY(0);
}
}

.hero-sub{
font-size:13px;
color:var(--gray);
margin-top:8px;
opacity:0;
animation:fadeIn .7s ease .8s forwards;
}

.typing{
margin-top:16px;
font-size:13px;
color:#555;
height:20px;
letter-spacing:.06em;
opacity:0;
animation:fadeIn .7s ease 1s forwards;
}

.typing::after{
content:'|';
animation:blink .7s infinite;
}

@keyframes blink{
50%{
opacity:0;
}
}

.hero-power{
margin-top:28px;
opacity:0;
animation:fadeIn .7s ease 1.2s forwards;
}

.hero-power h4{
font-size:13px;
margin-bottom:5px;
}

.hero-power p{
font-size:12px;
line-height:1.8;
color:#666;
max-width:260px;
}

@keyframes fadeIn{
to{
opacity:1;
}
}

/* =========================
FLOATING TAGS
========================= */

.ftag{
position:absolute;
background:var(--tag);
backdrop-filter:blur(12px);
padding:8px 14px;
border-radius:7px;
font-size:12px;
display:flex;
align-items:center;
gap:8px;
z-index:30;
animation:float 3s ease-in-out infinite;
box-shadow:0 4px 24px rgba(0,0,0,.07);
}

.ftag::before{
content:'';
width:7px;
height:7px;
border-radius:50%;
background:var(--black);
}

@keyframes float{
50%{
transform:translateY(-8px);
}
}

/* =========================
SLIDE DOTS
========================= */

.slide-dots{
position:absolute;
right:44px;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:10px;
align-items:center;
z-index:50;
}

.slide-num{
font-size:11px;
color:#999;
}

.dot{
width:7px;
height:7px;
background:#ccc;
border-radius:50%;
transition:.3s;
}

.dot.on{
width:10px;
height:10px;
border:2px solid #111;
background:transparent;
}

/* =========================
SCROLL
========================= */

.scroll-hint{
position:absolute;
left:44px;
bottom:30px;
display:flex;
align-items:center;
gap:10px;
font-size:12px;
color:#777;
z-index:50;
}

.scroll-icon{
width:22px;
height:34px;
border:1.5px solid #bbb;
border-radius:12px;
position:relative;
}

.scroll-icon::after{
content:'';
width:3px;
height:7px;
background:#111;
border-radius:2px;
position:absolute;
left:50%;
top:6px;
transform:translateX(-50%);
animation:scroll 1.6s infinite;
}

@keyframes scroll{
100%{
top:22px;
opacity:0;
}
}

/* =========================
CHAR ICON
========================= */

.char-icon{
position:absolute;
bottom:30px;
right:44px;
width:46px;
height:46px;
border-radius:50%;
overflow:hidden;
border:2px solid rgba(0,0,0,.15);
z-index:50;
}

.char-icon img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(100%);
}

/* =========================
PROJECTS
========================= */

.movie-grid{
position:absolute;
inset:0;
padding:100px 44px 44px;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:auto auto;
gap:16px;
}

.movie-card{
background:#ddd;
border-radius:14px;
overflow:hidden;
position:relative;
transition:.4s;
}

.movie-card:hover{
transform:scale(1.02);
box-shadow:0 18px 60px rgba(0,0,0,.12);
}

.movie-card:first-child{
grid-column:span 2;
}

.movie-card img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
filter:grayscale(100%);
transition:.4s;
}

.movie-card:hover img{
transform:scale(1.04);
filter:grayscale(70%);
}

.movie-card-info{
position:absolute;
left:0;
right:0;
bottom:0;
padding:20px;
background:linear-gradient(transparent,rgba(0,0,0,.75));
color:#fff;
}

.movie-card-info h3{
font-family:'Bebas Neue';
font-size:24px;
letter-spacing:.03em;
}

.movie-card-info p{
font-size:11px;
opacity:.75;
margin-top:2px;
}

.movie-card-tag{
position:absolute;
top:14px;
right:14px;
background:rgba(255,255,255,.92);
padding:5px 12px;
border-radius:30px;
font-size:10px;
font-weight:700;
}

/* =========================
ABOUT
========================= */

.about-inner{
position:absolute;
inset:0;
padding:100px 44px 44px;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-img-wrap{
position:relative;
height:70vh;
border-radius:18px;
overflow:hidden;
}

.about-img-wrap img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(100%);
}

.about-badge{
position:absolute;
top:24px;
right:-20px;
width:100px;
height:100px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
animation:spin 8s linear infinite;
}

@keyframes spin{
100%{
transform:rotate(360deg);
}
}

.about-badge span:first-child{
font-family:'Bebas Neue';
font-size:28px;
}

.about-badge span:last-child{
font-size:9px;
letter-spacing:.08em;
}

.about-text .label{
font-size:11px;
letter-spacing:.12em;
color:#777;
margin-bottom:14px;
text-transform:uppercase;
}

.about-text h2{
font-family:'Bebas Neue';
font-size:clamp(44px,6vw,80px);
line-height:.95;
margin-bottom:24px;
}

.about-text p{
font-size:14px;
line-height:1.9;
color:#555;
margin-bottom:18px;
}

.about-stats{
display:flex;
gap:34px;
margin-top:28px;
}

.stat h3{
font-family:'Bebas Neue';
font-size:42px;
}

.stat p{
font-size:11px;
color:#777;
margin-top:4px;
}

.about-skills{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:28px;
}

.skill-pill{
padding:7px 14px;
border-radius:30px;
border:1px solid rgba(0,0,0,.12);
font-size:11px;
transition:.3s;
}

.skill-pill:hover{
background:#111;
color:#fff;
}

/* =========================
BOOK
========================= */

.book-btn{
display:inline-block;
margin-top:18px;
padding:10px 18px;
background:#111;
color:#fff;
text-decoration:none;
border-radius:30px;
font-size:12px;
transition:.3s;
}

.book-btn:hover{
transform:translateY(-3px);
}

/* =========================
BOOK LIBRARY
========================= */

.books-container{
position:absolute;
inset:0;
padding:100px 44px 44px;
display:grid;
grid-template-columns:1fr 1.5fr;
gap:40px;
z-index:10;
}

.books-library{
overflow-y:auto;
padding-right:20px;
}

.books-library::-webkit-scrollbar{
width:4px;
}

.books-library::-webkit-scrollbar-thumb{
background:#ccc;
border-radius:2px;
}

.book-item{
background:rgba(255,255,255,.6);
backdrop-filter:blur(8px);
border-radius:12px;
padding:18px;
margin-bottom:16px;
cursor:pointer;
transition:.3s;
border:1.5px solid transparent;
}

.book-item:hover{
background:rgba(255,255,255,.8);
border-color:#111;
transform:translateX(8px);
}

.book-item h4{
font-family:'Bebas Neue';
font-size:18px;
margin-bottom:6px;
}

.book-item p{
font-size:12px;
color:#666;
line-height:1.5;
margin-bottom:12px;
}

.book-item .book-author{
font-size:11px;
color:#999;
font-weight:500;
margin-bottom:10px;
}

.book-card-row{
display:flex;
align-items:center;
gap:16px;
}

.book-card-content{
flex:1;
}

.book-cover-square{
min-width:120px;
max-width:120px;
overflow:hidden;
border-radius:16px;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.book-cover-square img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.book-read-btn {
  --stone-50: #fafaf9;
  --stone-800: #292524;
  --yellow-400: #facc15;

  font-size: 0.9rem;
  cursor: pointer;
  position: relative;
  font-family: "DM Sans", sans-serif;
  font-weight: bold;
  line-height: 1;
  padding: 1px;
  transform: translate(-4px, -4px);
  outline: 2px solid transparent;
  outline-offset: 5px;
  border-radius: 9999px;
  background-color: var(--stone-800);
  color: var(--stone-800);
  border: none;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
  text-align: center;
  box-shadow:
    0.5px 0.5px 0 0 var(--stone-800),
    1px 1px 0 0 var(--stone-800),
    1.5px 1.5px 0 0 var(--stone-800),
    2px 2px 0 0 var(--stone-800),
    2.5px 2.5px 0 0 var(--stone-800),
    3px 3px 0 0 var(--stone-800),
    0 0 0 2px var(--stone-50),
    0.5px 0.5px 0 2px var(--stone-50),
    1px 1px 0 2px var(--stone-50),
    1.5px 1.5px 0 2px var(--stone-50),
    2px 2px 0 2px var(--stone-50),
    2.5px 2.5px 0 2px var(--stone-50),
    3px 3px 0 2px var(--stone-50),
    3.5px 3.5px 0 2px var(--stone-50),
    4px 4px 0 2px var(--stone-50);
}

.book-read-btn:hover {
  transform: translate(0, 0);
  box-shadow: 0 0 0 2px var(--stone-50);
}

.book-read-btn:active,
.book-read-btn:focus-visible {
  outline-color: #facc15;
}

.book-read-btn:focus-visible {
  outline-style: dashed;
}

.book-read-btn > div {
  position: relative;
  pointer-events: none;
  background-color: var(--yellow-400);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
}

.book-read-btn > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  opacity: 0.5;
  background-image: radial-gradient(
      rgb(255 255 255 / 80%) 20%,
      transparent 20%
    ),
    radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
  background-position:
    0 0,
    4px 4px;
  background-size: 8px 8px;
  mix-blend-mode: hard-light;
  animation: dots 0.5s infinite linear;
}

.book-read-btn > div > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  gap: 0.25rem;
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25));
  color: #111;
}

.book-read-btn > div > span:active {
  transform: translateY(2px);
}

@keyframes dots {
  0% {
    background-position:
      0 0,
      4px 4px;
  }
  100% {
    background-position:
      8px 0,
      12px 4px;
  }
}

.pdf-viewer-container{
position:relative;
height:100%;
background:rgba(255,255,255,.55);
border-radius:18px;
overflow:hidden;
border:1.5px solid rgba(0,0,0,.09);
display:flex;
flex-direction:column;
}

body.theme-dark .pdf-viewer-container{
background:#0f0f18;
border-color:rgba(255,255,255,.08);
}
body.theme-glass .pdf-viewer-container{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.12);
backdrop-filter:blur(12px);
}

/* PDF toolbar */
.pdf-viewer-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:11px 16px;
background:rgba(255,255,255,.8);
border-bottom:1px solid rgba(0,0,0,.07);
flex-shrink:0;
}
body.theme-dark .pdf-viewer-toolbar{
background:rgba(20,20,32,.9);
border-bottom-color:rgba(255,255,255,.07);
}
body.theme-glass .pdf-viewer-toolbar{
background:rgba(255,255,255,.07);
border-bottom-color:rgba(255,255,255,.1);
}

.pdf-tb-dots{ display:flex; gap:6px; align-items:center; }
.pdf-tb-dot{
width:11px; height:11px; border-radius:50%;
}
.pdf-tb-dot.r{ background:#f87171; }
.pdf-tb-dot.y{ background:#fbbf24; }
.pdf-tb-dot.g{ background:#34d399; }
.pdf-tb-name{
font-size:11px;
color:var(--gray);
margin-left:10px;
}

.pdf-tb-actions{ display:flex; gap:8px; }
.pdf-tb-btn{
padding:5px 12px;
border-radius:20px;
font-size:11px;
font-weight:600;
font-family:'DM Sans',sans-serif;
border:none;
transition:.25s;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:5px;
}
.pdf-tb-btn.primary{
background:var(--black);
color:var(--bg);
}
.pdf-tb-btn.ghost{
background:rgba(0,0,0,.07);
color:var(--black);
}
body.theme-dark .pdf-tb-btn.ghost,
body.theme-glass .pdf-tb-btn.ghost{
background:rgba(255,255,255,.1);
color:var(--black);
}
.pdf-tb-btn:hover{ opacity:.85; }

.pdf-viewer-empty{
flex:1;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
color:var(--gray);
padding:40px;
text-align:center;
}

.pdf-viewer-empty svg{
width:52px;
height:52px;
margin-bottom:16px;
opacity:.3;
}

.pdf-viewer-empty p{
font-size:13px;
line-height:1.7;
}
.pdf-viewer-empty span{
font-size:11px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--gray);
margin-top:10px;
display:block;
}

.pdf-viewer-frame{
flex:1;
width:100%;
border:none;
display:none;
}

/* active book indicator */
.pdf-book-info{
padding:10px 16px;
font-size:12px;
color:var(--gray);
display:none;
align-items:center;
gap:8px;
background:rgba(0,0,0,.03);
border-top:1px solid rgba(0,0,0,.06);
}
body.theme-dark .pdf-book-info{
background:rgba(255,255,255,.02);
border-top-color:rgba(255,255,255,.06);
}
.pdf-book-info.show{ display:flex; }
.pdf-book-dot{
width:7px; height:7px; border-radius:50%;
background:#34d399;
animation:blink .9s infinite;
}

/* =========================
RESEARCH
========================= */

.blog-inner{
position:absolute;
inset:0;
padding:100px 44px 44px;
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
overflow-y:auto;
}

.blog-card{
background:rgba(255,255,255,.55);
backdrop-filter:blur(10px);
border-radius:16px;
padding:32px;
border:1px solid rgba(255,255,255,.8);
position:relative;
transition:.35s;
}

.blog-card:hover{
transform:translateY(-5px);
}

.blog-card:first-child{
grid-column:span 2;
}

.blog-date{
font-size:11px;
color:#777;
margin-bottom:12px;
letter-spacing:.06em;
}

.blog-card h3{
font-family:'Bebas Neue';
font-size:clamp(22px,2.5vw,36px);
line-height:1.04;
margin-bottom:12px;
}

.blog-card p{
font-size:13px;
line-height:1.8;
color:#555;
}

.blog-tag{
display:inline-block;
margin-top:16px;
padding:5px 12px;
border-radius:30px;
background:#111;
color:#fff;
font-size:10px;
letter-spacing:.08em;
}

.blog-card-num{
position:absolute;
right:22px;
bottom:18px;
font-family:'Bebas Neue';
font-size:60px;
color:rgba(0,0,0,.05);
}

/* =========================
PROGRESS BAR
========================= */

#progress-bar{
position:fixed;
top:0;
left:0;
height:2px;
width:0%;
background:linear-gradient(90deg,#111,#555);
z-index:999999;
transition:width .4s ease;
}

/* =========================
CONTACT PAGE
========================= */

.contact-inner{
position:absolute;
inset:0;
padding:100px 44px 44px;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.contact-left .label{
font-size:11px;
letter-spacing:.12em;
color:#777;
margin-bottom:14px;
text-transform:uppercase;
}

.contact-left h2{
font-family:'Bebas Neue';
font-size:clamp(50px,7vw,90px);
line-height:.92;
margin-bottom:24px;
}

.contact-left p{
font-size:14px;
line-height:1.9;
color:#555;
max-width:360px;
}

.contact-links{
display:flex;
flex-direction:column;
gap:12px;
margin-top:32px;
}

.contact-link{
display:flex;
align-items:center;
gap:14px;
padding:14px 20px;
background:rgba(255,255,255,.6);
backdrop-filter:blur(8px);
border-radius:12px;
border:1.5px solid transparent;
text-decoration:none;
color:var(--black);
font-size:13px;
font-weight:500;
transition:.3s;
}

.contact-link:hover{
border-color:#111;
transform:translateX(6px);
background:rgba(255,255,255,.9);
}

.contact-link-icon{
width:32px;
height:32px;
border-radius:8px;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
}

.contact-form{
background:rgba(255,255,255,.55);
backdrop-filter:blur(12px);
border-radius:20px;
padding:36px;
border:1px solid rgba(255,255,255,.8);
}

.contact-form h3{
font-family:'Bebas Neue';
font-size:28px;
margin-bottom:24px;
}

.form-group{
margin-bottom:18px;
}

.form-group label{
display:block;
font-size:11px;
letter-spacing:.08em;
color:#777;
text-transform:uppercase;
margin-bottom:7px;
}

.form-group input,
.form-group textarea{
width:100%;
background:rgba(255,255,255,.7);
border:1.5px solid rgba(0,0,0,.1);
border-radius:10px;
padding:12px 16px;
font-family:'DM Sans',sans-serif;
font-size:13px;
color:var(--black);
outline:none;
transition:.3s;
resize:none;
}

.form-group input:focus,
.form-group textarea:focus{
border-color:#111;
background:#fff;
}

.form-submit{
width:100%;
padding:14px;
background:#111;
color:#fff;
border:none;
border-radius:10px;
font-family:'DM Sans',sans-serif;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.3s;
letter-spacing:.04em;
}

.form-submit:hover{
background:#333;
transform:translateY(-2px);
}

.form-submit:active{
transform:translateY(0);
}

.sent-msg{
display:none;
text-align:center;
padding:16px;
color:#555;
font-size:13px;
}

/* old responsive rules moved to unified block above */

/* =========================
LOADER IMPROVED
========================= */

#loader h1{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(48px,8vw,90px);
letter-spacing:.12em;
animation:pulse 1s ease infinite alternate;
}

#loader p{
font-size:13px;
color:#999;
letter-spacing:.1em;
margin-top:8px;
}

@keyframes pulse{
from{ opacity:.4; }
to{ opacity:1; }
}



/* old responsive rules merged above */

/* =========================
CUSTOM CURSORS
========================= */

*{ cursor: none !important; }

#cur-outer{
  position:fixed;
  width:36px; height:36px;
  border-radius:50%;
  border:2px solid #111;
  pointer-events:none;
  z-index:99998;
  transform:translate(-50%,-50%);
  transition:left .1s ease,top .1s ease,width .2s,height .2s,border-color .3s,background .3s,border-radius .3s;
}
#cur-dot{
  position:fixed;
  width:8px; height:8px;
  border-radius:50%;
  background:#111;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:background .3s, width .2s, height .2s;
}
#cur-outer.hover{
  width:56px; height:56px;
  background:rgba(0,0,0,.07);
}

/* dark cursor */
body.theme-dark #cur-outer{ border-color:#a78bfa; }
body.theme-dark #cur-dot{ background:#a78bfa; }
body.theme-dark #cur-outer.hover{ background:rgba(167,139,250,.12); }

/* glass cursor */
body.theme-glass #cur-outer{ border-color:#38bdf8; background:rgba(56,189,248,.05); }
body.theme-glass #cur-dot{ background:#38bdf8; }
body.theme-glass #cur-outer.hover{ background:rgba(56,189,248,.18); }

/* =========================
THEME VARS — DARK
========================= */
body.theme-dark{
--bg:#0a0a0f;
--white:#13131a;
--black:#e8e8f0;
--gray:#6b6b80;
--lgray:#2a2a38;
--tag:#1c1c2ad7;
--accent:#a78bfa;
}

/* =========================
THEME VARS — GLASS
========================= */
body.theme-glass{
--black:#e0f2fe;
--gray:#94a3b8;
--lgray:rgba(255,255,255,.15);
--tag:rgba(255,255,255,.12);
--accent:#38bdf8;
}

/* =========================
DARK THEME OVERRIDES
========================= */
body.theme-dark{
background:#0a0a0f;
color:#e8e8f0;
}
body.theme-dark nav{
background:rgba(10,10,15,.88) !important;
border-bottom-color:rgba(255,255,255,.07) !important;
}
body.theme-dark .movie-card{ background:#13131a; border:1px solid rgba(255,255,255,.07); }
body.theme-dark .blog-card{ background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.08) !important; }
body.theme-dark .book-item{ background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.08) !important; }
body.theme-dark .contact-form{ background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.08) !important; }
body.theme-dark .contact-link{ background:rgba(255,255,255,.04) !important; color:#e8e8f0 !important; }
body.theme-dark .contact-link:hover{ border-color:#a78bfa !important; }
body.theme-dark .form-group input,
body.theme-dark .form-group textarea{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; color:#e8e8f0 !important; }
body.theme-dark .form-group input:focus,
body.theme-dark .form-group textarea:focus{ border-color:#a78bfa !important; }
body.theme-dark .blog-tag{ background:#a78bfa !important; color:#0a0a0f !important; }
body.theme-dark .about-badge{ background:#a78bfa !important; color:#0a0a0f !important; }
body.theme-dark .form-submit{ background:#a78bfa !important; color:#0a0a0f !important; }
body.theme-dark .contact-link-icon{ background:#a78bfa !important; color:#0a0a0f !important; }
body.theme-dark .skill-pill:hover{ background:#a78bfa !important; border-color:#a78bfa !important; color:#0a0a0f !important; }
body.theme-dark .wm{ color:rgba(255,255,255,.04); }
body.theme-dark .movie-card-tag{ background:rgba(167,139,250,.2); color:#a78bfa; }
body.theme-dark #progress-bar{ background:linear-gradient(90deg,#a78bfa,#7c3aed) !important; }
body.theme-dark .nav-logo:hover{ background:#a78bfa; border-color:#a78bfa; color:#0a0a0f; }
body.theme-dark .theme-btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#e8e8f0; }
body.theme-dark .theme-dropdown{ background:rgba(15,15,25,.95); border-color:rgba(255,255,255,.1); }
body.theme-dark .theme-option{ color:#e8e8f0; }
body.theme-dark .theme-option:hover{ background:rgba(167,139,250,.12); }
body.theme-dark .pdf-viewer-container{ background:#13131a; border-color:rgba(255,255,255,.07); }
body.theme-dark .music-widget-mini{ background:#1a1a28; border-color:#2a2a38; }

/* =========================
GLASS THEME OVERRIDES
========================= */
body.theme-glass{
background: linear-gradient(135deg,#0f172a 0%,#1e1b4b 45%,#0c4a6e 100%) fixed;
color:#e0f2fe;
}
body.theme-glass nav{
background:rgba(15,23,42,.75) !important;
border-bottom-color:rgba(255,255,255,.1) !important;
backdrop-filter:blur(20px);
}
body.theme-glass .movie-card{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(16px);
}
body.theme-glass .blog-card{
background:rgba(255,255,255,.07) !important;
border-color:rgba(255,255,255,.15) !important;
backdrop-filter:blur(16px);
}
body.theme-glass .book-item{
background:rgba(255,255,255,.06) !important;
border-color:rgba(255,255,255,.15) !important;
backdrop-filter:blur(12px);
}
body.theme-glass .contact-form{
background:rgba(255,255,255,.07) !important;
border-color:rgba(255,255,255,.18) !important;
backdrop-filter:blur(20px);
}
body.theme-glass .contact-link{
background:rgba(255,255,255,.06) !important;
border-color:rgba(255,255,255,.15) !important;
color:#e0f2fe !important;
backdrop-filter:blur(12px);
}
body.theme-glass .contact-link:hover{ border-color:#38bdf8 !important; }
body.theme-glass .form-group input,
body.theme-glass .form-group textarea{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.15) !important;
color:#e0f2fe !important;
}
body.theme-glass .form-group input:focus,
body.theme-glass .form-group textarea:focus{ border-color:#38bdf8 !important; }
body.theme-glass .blog-tag{ background:#38bdf8 !important; color:#0f172a !important; }
body.theme-glass .about-badge{ background:rgba(56,189,248,.2) !important; color:#38bdf8 !important; border:1px solid #38bdf8; }
body.theme-glass .form-submit{ background:linear-gradient(135deg,#38bdf8,#818cf8) !important; color:#0f172a !important; }
body.theme-glass .contact-link-icon{ background:rgba(56,189,248,.2) !important; color:#38bdf8 !important; }
body.theme-glass .skill-pill{ border-color:rgba(255,255,255,.18); color:#e0f2fe; }
body.theme-glass .skill-pill:hover{ background:#38bdf8 !important; border-color:#38bdf8 !important; color:#0f172a !important; }
body.theme-glass .wm{ color:rgba(255,255,255,.05); }
body.theme-glass .movie-card-tag{ background:rgba(56,189,248,.18); color:#38bdf8; }
body.theme-glass #progress-bar{ background:linear-gradient(90deg,#38bdf8,#818cf8) !important; }
body.theme-glass .nav-logo{ border-color:rgba(56,189,248,.5); color:#38bdf8; }
body.theme-glass .nav-logo:hover{ background:#38bdf8; color:#0f172a; }
body.theme-glass .nav-links a{ color:#e0f2fe; }
body.theme-glass .nav-links a::after{ background:#38bdf8; }
body.theme-glass .theme-btn{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#e0f2fe; }
body.theme-glass .theme-dropdown{ background:rgba(15,23,42,.92); border-color:rgba(255,255,255,.15); backdrop-filter:blur(20px); }
body.theme-glass .theme-option{ color:#e0f2fe; }
body.theme-glass .theme-option:hover{ background:rgba(56,189,248,.12); }
body.theme-glass .about-text p{ color:#94a3b8; }
body.theme-glass .hero-sub{ color:#94a3b8; }
body.theme-glass .typing{ color:#38bdf8; }
body.theme-glass .ftag{ background:rgba(255,255,255,.1); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.2); color:#e0f2fe; }
body.theme-glass .ftag::before{ background:#38bdf8; }
body.theme-glass .pdf-viewer-container{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
body.theme-glass .book-cover-square{ box-shadow:0 12px 30px rgba(0,0,0,.4); }
body.theme-glass .music-widget-mini{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }

/* =========================
THEME DROPDOWN
========================= */
.theme-selector{ position:relative; }
.theme-btn{
padding:9px 18px;
border:1.5px solid rgba(0,0,0,.12);
background:rgba(255,255,255,.7);
backdrop-filter:blur(10px);
border-radius:40px;
font-size:11px;
font-family:'DM Sans',sans-serif;
display:flex;
align-items:center;
gap:6px;
transition:.3s;
}
.theme-btn:hover{ background:rgba(255,255,255,.9); }
.theme-dropdown{
position:absolute;
right:0;
top:calc(100% + 10px);
background:rgba(255,255,255,.94);
backdrop-filter:blur(20px);
border-radius:14px;
border:1px solid rgba(0,0,0,.08);
padding:8px;
display:flex;
flex-direction:column;
gap:4px;
min-width:130px;
opacity:0;
pointer-events:none;
transform:translateY(-8px);
transition:.25s cubic-bezier(.16,1,.3,1);
box-shadow:0 8px 30px rgba(0,0,0,.12);
z-index:200;
}
.theme-dropdown.open{
opacity:1;
pointer-events:all;
transform:translateY(0);
}
.theme-option{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px;
border:none;
background:transparent;
border-radius:9px;
font-size:12px;
font-family:'DM Sans',sans-serif;
color:inherit;
transition:.2s;
text-align:left;
width:100%;
}
.theme-option:hover{ background:rgba(0,0,0,.06); }
.theme-option.active{ font-weight:700; }
.theme-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.light-dot{ background:linear-gradient(135deg,#f0f0f0,#bbb); border:1px solid #ccc; }
.dark-dot{ background:linear-gradient(135deg,#1a1a2e,#a78bfa); }
.glass-dot{ background:linear-gradient(135deg,#0c4a6e,#38bdf8); }

/* =========================
STAGGER ANIMATIONS ON PAGE ENTER
========================= */
@keyframes fadeSlideUp{
from{ opacity:0; transform:translateY(36px); }
to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeSlideLeft{
from{ opacity:0; transform:translateX(36px); }
to{ opacity:1; transform:translateX(0); }
}
@keyframes scaleIn{
from{ opacity:0; transform:scale(.93); }
to{ opacity:1; transform:scale(1); }
}

/* =========================
PERFORMANCE — GPU LAYERS
========================= */
.page{ will-change:opacity; }
.movie-card, .blog-card, .book-item{ will-change:transform; }
.ftag{ will-change:transform; }
nav{ will-change:transform; }
#cur-outer, #cur-dot{ will-change:left,top; }

/* reduce motion for accessibility */
@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* touch devices — remove hover effects that cause tap delay */
@media(hover:none){
  .movie-card:hover, .blog-card:hover, .book-item:hover{ transform:none; }
  .ftag{ animation:none; }
  #cur-outer, #cur-dot{ display:none; }
  *{ cursor:auto !important; }
}

/* =========================
HAMBURGER
========================= */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:6px;
  border-radius:8px;
  transition:.2s;
  flex-shrink:0;
}
.hamburger span{
  display:block;
  width:22px; height:2px;
  background:var(--black);
  border-radius:2px;
  transition:.3s cubic-bezier(.16,1,.3,1);
  transform-origin:center;
}
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

body.theme-dark .hamburger span,
body.theme-glass .hamburger span{ background:var(--black); }

/* =========================
MOBILE NAV DRAWER
========================= */
.mobile-nav{
  position:fixed;
  top:0; right:0;
  width:min(280px, 80vw);
  height:100%;
  background:rgba(248,248,247,.97);
  backdrop-filter:blur(20px);
  z-index:9000;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:80px 20px 40px;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow:-8px 0 40px rgba(0,0,0,.1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.theme-dark .mobile-nav{
  background:rgba(13,13,22,.97);
}
body.theme-glass .mobile-nav{
  background:rgba(15,23,42,.97);
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{
  display:block;
  padding:14px 16px;
  border-radius:10px;
  font-size:16px;
  font-weight:500;
  color:var(--black);
  text-decoration:none;
  transition:.2s;
}
.mobile-nav a:hover,
.mobile-nav a:active{ background:rgba(0,0,0,.06); }
body.theme-dark .mobile-nav a:hover,
body.theme-glass .mobile-nav a:hover{ background:rgba(255,255,255,.08); }

.mobile-nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:8999;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.mobile-nav-overlay.open{ opacity:1; pointer-events:all; }

/* =========================
TABLET — 1024px
========================= */
@media(max-width:1024px){
  .hero-title{ font-size:clamp(70px,9vw,110px); }
  .hero-content{ left:32px; bottom:100px; }
  .ftag[style*="right:38%"]{ display:none; }
  .movie-grid{ grid-template-columns:1fr 1fr; gap:14px; padding:80px 24px 24px; }
  .about-inner{ gap:28px; padding:80px 24px 24px; }
  .blog-inner{ gap:16px; padding:80px 24px 24px; }
  .books-container{ padding:80px 24px 24px; gap:18px; }
  .contact-inner{ gap:36px; padding:90px 24px 24px; }
}

/* =========================
TABLET — 768px
========================= */
@media(max-width:768px){

  /* Nav */
  nav{ padding:14px 20px; }
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .theme-btn-label{ display:none; }
  .theme-btn{ padding:8px 12px; }

  /* Pages — allow scroll on mobile */
  .page{
    position:fixed;
    inset:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }

  /* Watermark — scale down */
  .wm{ font-size:clamp(60px,18vw,110px); right:-10px; }

  /* Hero */
  .hero-content{ left:20px; right:20px; bottom:80px; }
  .hero-title{ font-size:clamp(64px,14vw,96px); }
  .hero-img img{ max-width:100vw; object-position:top center; }
  .hero-power p{ max-width:100%; }
  .ftag{ display:none; }

  /* Projects */
  .movie-grid{
    grid-template-columns:1fr 1fr;
    padding:76px 16px 80px;
    gap:12px;
  }
  .movie-card:first-child{ grid-column:span 2; }
  .movie-card{ min-height:160px; }

  /* About */
  .about-inner{
    grid-template-columns:1fr;
    padding:76px 16px 80px;
    gap:20px;
  }
  .about-img-wrap{ height:38vh; min-height:220px; }
  .about-stats{ gap:16px; }
  .stat h3{ font-size:24px; }

  /* Books */
  .books-container{
    position:static;
    grid-template-columns:1fr;
    padding:76px 16px 80px;
    gap:16px;
    height:auto;
    overflow-y:visible;
  }
  .books-library{
    max-height:50vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-right:0;
  }
  .pdf-viewer-container{
    min-height:280px;
    margin-top:12px;
  }
  .book-item{ padding:16px; margin-bottom:0; }
  .book-item:hover{ transform:none; }
  .book-card-row{ flex-direction:column; align-items:stretch; }
  .book-cover-square{
    min-width:auto; max-width:100%;
    width:100%; height:180px;
    margin-top:12px;
  }
  .book-cover-square img{ height:100%; }

  /* Research/Blog */
  .blog-inner{
    grid-template-columns:1fr;
    padding:76px 16px 80px;
    gap:12px;
  }
  .blog-card:first-child{ grid-column:span 1; }
  .blog-card-num{ font-size:32px; }

  /* Contact */
  .contact-inner{
    grid-template-columns:1fr;
    padding:76px 16px 80px;
    gap:20px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .contact-left h2{ font-size:clamp(40px,12vw,70px); }

  /* Slide dots */
  .slide-dots{ right:10px; gap:7px; }
  .slide-num{ font-size:9px; }
  .dot{ width:5px; height:5px; }

  /* Scroll hint / char icon */
  .scroll-hint{ left:16px; font-size:10px; }
  .char-icon{ right:16px; width:32px; height:32px; font-size:16px; }

  /* Music */
  #musicOverlay{ right:10px; bottom:10px; }
  .music-player-panel{
    width:calc(100vw - 32px);
    right:16px; left:16px; bottom:16px;
    border-radius:16px;
  }
  .music-widget{ justify-content:flex-end; }
  .music-player-panel .book-read-btn{ width:100%; }

  /* Progress bar thinner on mobile */
  #progress-bar{ height:2px; }

  /* Theme dropdown on mobile — attach to left */
  .theme-dropdown{ right:auto; left:0; }
}

/* =========================
PHONE — 480px
========================= */
@media(max-width:480px){
  nav{ padding:12px 16px; }
  .nav-logo{ width:36px; height:36px; font-size:12px; }

  .hero-title{ font-size:clamp(52px,14vw,80px); }
  .hero-content{ left:16px; right:16px; bottom:70px; }

  .movie-grid{
    grid-template-columns:1fr;
    padding:70px 14px 70px;
    gap:10px;
  }
  .movie-card:first-child{ grid-column:span 1; }

  .about-inner{ padding:70px 14px 70px; }
  .about-stats{ flex-wrap:wrap; gap:10px; }
  .stat{ min-width:calc(50% - 5px); }

  .books-container{ padding:70px 14px 70px; }
  .blog-inner{ padding:70px 14px 70px; }
  .contact-inner{ padding:70px 14px 70px; }

  .contact-form{ padding:22px 18px; }

  .blog-card{ padding:20px; }
  .blog-card h3{ font-size:17px; }

  /* Bigger touch targets */
  .mobile-nav a{ padding:16px; font-size:17px; }
  .book-read-btn{ min-height:44px; }
  .form-submit{ min-height:48px; font-size:15px; }
}

/* =========================
LANDSCAPE PHONE
========================= */
@media(max-height:500px) and (max-width:900px){
  .hero-title{ font-size:clamp(40px,8vh,72px); }
  .hero-content{ bottom:40px; }
  .movie-grid{ padding-top:64px; }
  .about-inner, .blog-inner, .books-container, .contact-inner{ padding-top:64px; }
}

.music-widget-mini{width:72px;height:72px;border-radius:9999px;background:#fff;border:4px solid #dcdcdc;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,0.12);transition:all .32s ease}
.music-player-panel{position:absolute;right:0;bottom:0;transform:translateY(88%);opacity:0;pointer-events:none;transition:all .32s ease;width:360px}
.music-player-panel.show{transform:translateY(0);opacity:1;pointer-events:auto}
.music-art-rotating{transition:transform .6s linear}
.music-art-rotating.playing{transform:rotate(360deg)}

/* =========================
PROJECT DETAIL
========================= */

#project{ z-index:200; }

.project-detail{
position:absolute;
inset:0;
overflow-y:auto;
padding:100px 44px 44px;
}

.project-back{
display:inline-flex;
align-items:center;
gap:6px;
padding:10px 20px;
background:rgba(255,255,255,.7);
backdrop-filter:blur(10px);
border:1.5px solid rgba(0,0,0,.08);
border-radius:40px;
font-size:13px;
font-family:'DM Sans',sans-serif;
font-weight:500;
color:var(--black);
cursor:pointer;
transition:.3s;
margin-bottom:40px;
}

.project-back:hover{
background:var(--black);
color:var(--bg);
}

.project-detail-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
max-width:1100px;
margin:0 auto;
}

.project-detail-left{
border-radius:18px;
overflow:hidden;
background:rgba(255,255,255,.5);
}

.project-detail-left img{
width:100%;
height:auto;
display:block;
filter:grayscale(100%);
}

.project-detail-right{
padding-top:20px;
}

.project-detail-tag{
display:inline-block;
padding:5px 14px;
background:#111;
color:#fff;
border-radius:30px;
font-size:11px;
letter-spacing:.08em;
margin-bottom:16px;
}

.project-detail-right h1{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(44px,5vw,72px);
line-height:.92;
margin-bottom:8px;
}

.project-detail-meta{
font-size:12px;
color:var(--gray);
margin-bottom:24px;
padding-bottom:24px;
border-bottom:1px solid rgba(0,0,0,.07);
}

.project-detail-right p{
font-size:14px;
line-height:1.9;
color:#555;
margin-bottom:24px;
}

.project-detail-features{
margin-bottom:32px;
}

.project-detail-features h4{
font-size:12px;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--gray);
margin-bottom:14px;
}

.project-detail-features ul{
list-style:none;
padding:0;
}

.project-detail-features li{
padding:10px 0;
border-bottom:1px solid rgba(0,0,0,.05);
font-size:13px;
line-height:1.6;
color:#555;
display:flex;
gap:10px;
}

.project-detail-features li::before{
content:'→';
color:var(--black);
font-weight:700;
flex-shrink:0;
}

.project-link-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:14px 28px;
background:#111;
color:#fff;
text-decoration:none;
border-radius:40px;
font-size:13px;
font-weight:600;
transition:.3s;
}

.project-link-btn:hover{
background:#333;
transform:translateY(-2px);
}

/* dark theme */
body.theme-dark .project-back{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:#e8e8f0; }
body.theme-dark .project-back:hover{ background:#a78bfa; color:#0a0a0f; }
body.theme-dark .project-detail-right p{ color:#94a3b8; }
body.theme-dark .project-detail-features li{ color:#94a3b8; border-bottom-color:rgba(255,255,255,.06); }
body.theme-dark .project-detail-meta{ border-bottom-color:rgba(255,255,255,.08); }
body.theme-dark .project-detail-left{ background:rgba(255,255,255,.04); }
body.theme-dark .project-link-btn{ background:#a78bfa; color:#0a0a0f; }
body.theme-dark .project-link-btn:hover{ background:#7c3aed; }
body.theme-dark .project-detail-tag{ background:#a78bfa; color:#0a0a0f; }

/* glass theme */
body.theme-glass .project-back{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#e0f2fe; }
body.theme-glass .project-back:hover{ background:#38bdf8; color:#0f172a; }
body.theme-glass .project-detail-right p{ color:#94a3b8; }
body.theme-glass .project-detail-features li{ color:#94a3b8; border-bottom-color:rgba(255,255,255,.1); }
body.theme-glass .project-detail-meta{ border-bottom-color:rgba(255,255,255,.1); }
body.theme-glass .project-detail-left{ background:rgba(255,255,255,.05); }
body.theme-glass .project-link-btn{ background:linear-gradient(135deg,#38bdf8,#818cf8); color:#0f172a; }
body.theme-glass .project-link-btn:hover{ opacity:.85; }
body.theme-glass .project-detail-tag{ background:#38bdf8; color:#0f172a; }

/* mobile */
@media(max-width:768px){
.project-detail{ padding:76px 16px 80px; }
.project-detail-content{ grid-template-columns:1fr; gap:24px; }
.project-detail-left img{ max-height:40vh; object-fit:cover; width:100%; }
.project-detail-right h1{ font-size:clamp(36px,10vw,56px); }
.project-back{ margin-bottom:24px; font-size:12px; }
}
@media(max-width:480px){
.project-detail{ padding:70px 14px 70px; }
.project-detail-content{ gap:16px; }
}