/* =============================================
   VIBHA BIRTHDAY WEBSITE — style.css v3
   Video Wall, Reels Section added
   ============================================= */

/* ── RESET ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── ROOT TOKENS ────────────────────────────── */
:root{
  --bg:       #080810;
  --bg2:      #0f0f1a;
  --surf:     #14142b;
  --surf2:    #1c1c35;
  --border:   rgba(255,255,255,0.06);
  --acc:      #a78bfa;   /* purple */
  --acc2:     #f472b6;   /* pink */
  --acc3:     #38bdf8;   /* blue */
  --gold:     #fbbf24;
  --txt:      #e2e8f0;
  --muted:    #94a3b8;
  --faint:    #3f4f6a;
  --r:        14px;
  --r2:       24px;
  --ease:     cubic-bezier(.16,1,.3,1);
  --font:     'Inter',system-ui,sans-serif;
  --display:  'Syne',system-ui,sans-serif;
  --hand:     'Caveat',cursive;
}

html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--bg);color:var(--txt);font-family:var(--font);line-height:1.7;overflow-x:hidden;cursor:none;}
@media(hover:none){body{cursor:auto;}}

/* ── BACKGROUND VIDEO ────────────────────────
   Fixed full-viewport video sits behind everything;
   a dark overlay keeps text readable on top of it.  */
#bg-video{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
  pointer-events:none;
}
#bg-overlay{
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(167,139,250,0.12) 0%, transparent 60%),
    rgba(8,8,16,0.74);
  z-index:-1;
  pointer-events:none;
}

/* ── CURSOR GLOW ────────────────────────────── */
#cursor-glow{
  pointer-events:none;
  position:fixed;
  width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(167,139,250,0.08) 0%, transparent 70%);
  transform:translate(-50%,-50%);
  z-index:0;
  transition:transform 0.08s linear;
}

/* ── SCROLLBAR ──────────────────────────────── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--acc);border-radius:9px;}
::selection{background:rgba(167,139,250,0.25);color:#fff;}

/* ── SECTION SHARED ─────────────────────────── */
section{
  position:relative;z-index:1;
  padding:110px 24px;
  max-width:1100px;margin:0 auto;
}

.section-label{
  font-family:var(--display);
  font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);margin-bottom:14px;
}

.section-title{
  font-family:var(--display);
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800;color:#fff;
  line-height:1.1;margin-bottom:52px;
}
.section-title span{color:var(--acc2);}
.section-sub{color:var(--muted);font-size:.9rem;margin-top:-38px;margin-bottom:48px;}

.gradient-text{
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── REVEAL SYSTEM ──────────────────────────── */
.reveal-up,.reveal-left,.reveal-right{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js-hy{opacity:0;transform:translateY(48px);}
.js-hl{opacity:0;transform:translateX(-56px);}
.js-hr{opacity:0;transform:translateX(56px);}
.js-show{opacity:1!important;transform:none!important;}

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
#hero{
  min-height:100vh;max-width:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(167,139,250,0.18) 0%, transparent 70%),
    transparent;
  overflow:hidden;
}

.hero-bg-text{
  position:absolute;
  font-family:var(--display);font-weight:800;
  font-size:clamp(100px,22vw,260px);
  color:rgba(255,255,255,0.025);
  letter-spacing:-.02em;
  user-select:none;pointer-events:none;
  white-space:nowrap;
  animation:bgdrift 12s ease-in-out infinite alternate;
}

@keyframes bgdrift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}

.hero-content{position:relative;z-index:2;max-width:780px;}

.hero-pill{
  display:inline-block;
  font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc2);
  background:rgba(244,114,182,.1);
  border:1px solid rgba(244,114,182,.22);
  padding:7px 20px;border-radius:99px;
  margin-bottom:28px;
  animation:fadeup .8s var(--ease) both;
}

.hero-h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(3rem,9vw,6.5rem);
  line-height:1.05;color:#fff;
  margin-bottom:24px;
}

.line-1{
  display:block;font-size:.55em;
  color:var(--muted);font-weight:400;
  margin-bottom:8px;
  animation:fadeup .8s var(--ease) .1s both;
}
.line-2{
  display:block;
  animation:fadeup .8s var(--ease) .2s both;
}
.line-3{
  display:block;
  font-family:var(--hand);font-size:.42em;
  color:var(--gold);-webkit-text-fill-color:var(--gold);background:none;
  font-weight:600;letter-spacing:.02em;margin-top:8px;
  animation:fadeup .8s var(--ease) .35s both;
}

.hero-sub{
  font-size:clamp(.95rem,2vw,1.1rem);
  color:var(--muted);margin-bottom:40px;line-height:1.85;
  animation:fadeup .8s var(--ease) .5s both;
}

.hero-btn{
  display:inline-block;text-decoration:none;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#fff;font-weight:600;font-size:.9rem;
  padding:14px 36px;border-radius:99px;
  letter-spacing:.04em;
  box-shadow:0 8px 32px rgba(167,139,250,.35);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  animation:fadeup .8s var(--ease) .65s both;
}
.hero-btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(167,139,250,.5);}

.hero-scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);animation:pulse 2.5s ease-in-out infinite;
}

@keyframes fadeup{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ════════════════════════════════════════════
   VIBES GRID
════════════════════════════════════════════ */
#vibes{padding-bottom:80px;}

.vibes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}

.vibe-card{
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:28px 26px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  position:relative;overflow:hidden;
}
.vibe-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(167,139,250,.06),transparent);
  opacity:0;transition:opacity .3s;
}
.vibe-card:hover{transform:translateY(-6px);border-color:rgba(167,139,250,.25);box-shadow:0 20px 40px rgba(0,0,0,.4);}
.vibe-card:hover::before{opacity:1;}

.vibe-emoji{font-size:2rem;display:block;margin-bottom:14px;}
.vibe-card h3{font-family:var(--display);font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:8px;}
.vibe-card p{color:var(--muted);font-size:.88rem;line-height:1.7;}

/* ════════════════════════════════════════════
   TIMELINE
════════════════════════════════════════════ */
#timeline{background:linear-gradient(180deg,transparent,rgba(167,139,250,.04),transparent);}

.tl-track{
  position:relative;
  display:flex;flex-direction:column;gap:0;
  padding-left:32px;
}
.tl-track::before{
  content:'';position:absolute;left:12px;top:0;bottom:0;
  width:2px;
  background:linear-gradient(to bottom,transparent,var(--acc),var(--acc2),var(--acc3),transparent);
  opacity:.25;
}

.tl-row{
  display:flex;gap:28px;margin-bottom:52px;position:relative;
}

.tl-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--surf2);border:2px solid rgba(167,139,250,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;flex-shrink:0;
  position:absolute;left:-44px;
  box-shadow:0 0 0 6px var(--bg);
}

.tl-body{padding-left:16px;}
.tl-year{
  display:inline-block;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc2);background:rgba(244,114,182,.1);
  padding:3px 12px;border-radius:99px;margin-bottom:10px;
}
.tl-body h3{font-family:var(--display);font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:8px;}
.tl-body p{color:var(--muted);font-size:.92rem;max-width:600px;}

/* ════════════════════════════════════════════
   VIDEO WALL
════════════════════════════════════════════ */
#video-wall{padding-bottom:60px;}

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.vid-card{
  border-radius:var(--r2);overflow:hidden;
  position:relative;
  box-shadow:0 12px 30px rgba(0,0,0,0.5);
  transition:transform 0.3s ease,box-shadow 0.3s ease;
  aspect-ratio: 9/16;
}
.vid-card video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.vid-card:hover{
  transform:scale(1.02);
  box-shadow:0 20px 40px rgba(167,139,250,0.3);
}

/* ════════════════════════════════════════════
   GALLERY — INFINITE MARQUEE
════════════════════════════════════════════ */
#gallery{
  max-width:100%;padding:110px 0;
  overflow:hidden;
}
#gallery .section-label,
#gallery .section-title,
#gallery .section-sub{
  padding:0 24px;
  text-align: center;
}

.marquee-wrap{
  overflow:hidden;
  padding:10px 0;
  mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
}

.marquee{width:100%;overflow:visible;}

.marquee-track{
  display:flex;gap:16px;
  width:max-content;
}

.marquee--left .marquee-track{
  animation:scroll-left 40s linear infinite;
}
.marquee--right .marquee-track{
  animation:scroll-right 45s linear infinite;
}

.marquee-wrap:hover .marquee-track{animation-play-state:paused;}

@keyframes scroll-left{
  from{transform:translateX(0)}
  to{transform:translateX(-1380px)} /* 5 items * (260px + 16px gap) = 1380px */
}
@keyframes scroll-right{
  from{transform:translateX(-1380px)}
  to{transform:translateX(0)}
}

.m-item{
  width:260px;height:280px;
  border-radius:18px;overflow:hidden;
  position:relative;flex-shrink:0;
  cursor:pointer;
  /* random tilts */
  transform:rotate(var(--tilt,0deg));
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}

.m-item:nth-child(3n+1){--tilt:-1.5deg;}
.m-item:nth-child(3n+2){--tilt:1deg;}
.m-item:nth-child(3n){--tilt:-0.5deg;}

.m-item:hover{transform:rotate(0deg) scale(1.06);box-shadow:0 20px 50px rgba(167,139,250,.3);z-index:10;}

.m-item img,.m-item video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.m-item:hover img,.m-item:hover video{transform:scale(1.1);}

.m-item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 55%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.m-item:hover::after{opacity:1;}

/* ════════════════════════════════════════════
   THE REELS ECONOMY
════════════════════════════════════════════ */
#reels{padding-bottom:80px;}

.reels-container{
  display:flex;align-items:center;gap:30px;
  background:linear-gradient(135deg,rgba(167,139,250,.1),rgba(56,189,248,.1));
  border:1px solid rgba(167,139,250,.2);
  border-radius:var(--r2);padding:40px;
}

.reel-mockup{
  flex-shrink:0;
  background:var(--surf);border:1px solid var(--border);
  padding:20px;border-radius:20px;
  width:240px;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transform:rotate(-2deg);
}

.reel-icon{font-size:3rem;margin-bottom:10px;animation:pulse 2s infinite;}
.reel-mockup p{font-size:0.9rem;color:var(--txt);line-height:1.5;font-style:italic;}

.reel-chat p{
  color:var(--txt);font-size:1.05rem;line-height:1.7;
}

/* ════════════════════════════════════════════
   RANT CORNER
════════════════════════════════════════════ */
#rants{padding-bottom:80px;}
.rant-grid{
  display:flex;flex-direction:column;gap:16px;margin-bottom:40px;
}

.rant-bubble{
  max-width:520px;
  padding:18px 24px;
  border-radius:20px;
  font-size:.95rem;line-height:1.6;
}
.rant-bubble p{color:var(--txt);}
.rant-bubble--left{
  align-self:flex-start;
  background:var(--surf);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.rant-bubble--right{
  align-self:flex-end;
  background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(244,114,182,.1));
  border:1px solid rgba(167,139,250,.2);
  border-bottom-right-radius:4px;
}

.rant-footer{
  text-align:center;color:var(--muted);
  font-style:italic;font-size:.9rem;
  max-width:520px;margin:0 auto;
  padding-top:8px;
  border-top:1px solid var(--border);
}

/* ════════════════════════════════════════════
   BAUNA DEVTA
════════════════════════════════════════════ */
#bauna{background:linear-gradient(180deg,transparent,rgba(244,114,182,.04),transparent);}

.bauna-wrap{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;align-items:start;
}

.bauna-card{
  background:var(--surf);border:1px solid var(--border);
  border-radius:var(--r2);padding:30px 26px;
  transition:transform .3s var(--ease);
}
.bauna-card:hover{transform:translateY(-5px);}
.bauna-icon{font-size:2.2rem;margin-bottom:14px;display:block;}
.bauna-card h3{font-family:var(--display);font-size:1rem;font-weight:700;color:#fff;margin-bottom:10px;}
.bauna-card p{color:var(--muted);font-size:.88rem;line-height:1.7;}

.bauna-center{text-align:center;}
.bauna-caption{font-size:.75rem;color:var(--faint);margin-top:12px;font-style:italic;}

.height-anim{
  display:flex;align-items:flex-end;justify-content:center;
  gap:40px;padding:20px 0 16px;
}
.hbar{display:flex;flex-direction:column;align-items:center;gap:10px;}
.hbar-fill{
  width:52px;border-radius:10px 10px 0 0;
  animation:growup 1.2s var(--ease) forwards;
  opacity:0;
}
.hbar-fill-me{
  height:110px;
  background:linear-gradient(to top,var(--acc),var(--acc2));
}
.hbar-fill-her{
  height:66px;
  background:linear-gradient(to top,var(--gold),#f59e0b);
}
.hbar span{font-size:.78rem;font-weight:600;color:var(--muted);}

@keyframes growup{from{opacity:0;transform:scaleY(0);transform-origin:bottom}to{opacity:1;transform:scaleY(1);transform-origin:bottom}}

.bhai-quote{
  margin-top:14px;padding:12px 16px;
  background:rgba(167,139,250,.08);
  border-left:3px solid var(--acc);
  border-radius:0 8px 8px 0;
  font-family:var(--hand);font-size:1rem;
  color:var(--txt);line-height:1.6;
}
.bhai-quote small{font-family:var(--font);font-size:.75rem;color:var(--faint);}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
#footer{
  position:relative;z-index:1;
  text-align:center;
  padding:100px 24px 80px;
  overflow:hidden;
}
.footer-glow{
  position:absolute;
  width:600px;height:400px;
  background:radial-gradient(ellipse,rgba(167,139,250,.12) 0%,transparent 70%);
  top:0;left:50%;transform:translateX(-50%);
  pointer-events:none;
}
.footer-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;}
.footer-bday{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,6vw,3.5rem);
  color:#fff;margin-bottom:24px;
}
.g-text{
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.footer-msg{color:var(--muted);font-size:.97rem;line-height:1.85;margin-bottom:40px;}

.footer-task{
  display:flex;align-items:center;justify-content:center;gap:20px;
  background:var(--surf);border:1px solid var(--border);
  border-radius:var(--r2);padding:28px 32px;margin-bottom:40px;
}
.task-emoji{font-size:2rem;flex-shrink:0;}
.task-text{font-size:1rem;line-height:1.7;color:var(--txt);text-align:left;}
.task-text strong{color:var(--acc2);}
.task-text small{color:var(--muted);font-size:.82rem;}

.footer-sign{color:var(--muted);font-size:.9rem;margin-bottom:10px;}
.footer-years{color:var(--faint);font-size:.8rem;}

/* ════════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════════ */
#lb{position:fixed;inset:0;z-index:9999;}
#lb[hidden]{display:none!important;}
#lb-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(10px);
  cursor:pointer;
}
#lb-content{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;pointer-events:none;
}
#lb-img{
  max-width:90vw;max-height:88vh;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  pointer-events:auto;
}
#lb-close{
  position:fixed;top:20px;right:20px;
  background:rgba(255,255,255,.1);
  border:none;color:#fff;
  width:40px;height:40px;border-radius:50%;
  font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;
  transition:background .2s;
}
#lb-close:hover{background:rgba(255,255,255,.2);}

/* ════════════════════════════════════════════
   MUSIC
════════════════════════════════════════════ */
#music-player{
  position:fixed;bottom:24px;right:24px;z-index:1000;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
#music-toggle{
  width:48px;height:48px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#fff;font-size:1.2rem;cursor:pointer;
  box-shadow:0 8px 24px rgba(167,139,250,.4);
  transition:transform .2s,box-shadow .2s;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
#music-toggle:hover{transform:scale(1.12);box-shadow:0 12px 32px rgba(167,139,250,.6);}

/* Volume slider — hidden pill that reveals above the toggle on hover/focus */
#volume-control{
  height:112px;width:38px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:99px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;transform:translateY(10px) scale(.9);
  pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
#music-player:hover #volume-control,
#music-player:focus-within #volume-control{
  opacity:1;transform:translateY(0) scale(1);
  pointer-events:auto;
}
#volume-slider{
  writing-mode:vertical-lr;
  direction:rtl;
  width:6px;height:88px;
  accent-color:var(--acc);
  cursor:pointer;
  background:transparent;
}
@media(hover:none){
  /* touch devices: no hover, so tapping the button toggles the slider open */
  #volume-control{transition:opacity .25s var(--ease);}
  #music-player.show-volume #volume-control{opacity:1;pointer-events:auto;transform:none;}
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media(max-width:900px){
  .bauna-wrap{grid-template-columns:1fr 1fr;}
  .bauna-center{grid-column:1/-1;order:-1;}
}
@media(max-width:640px){
  section{padding:80px 20px;}
  .vibes-grid{grid-template-columns:1fr;}
  .bauna-wrap{grid-template-columns:1fr;}
  .m-item{width:200px;height:220px;}
  .footer-task{flex-direction:column;text-align:center;}
  .task-text{text-align:center;}
  #gallery{padding:80px 0;}
  .reels-container{flex-direction:column;text-align:center;}
}