/* ══════════════════════════════════════════════
   lux.css — v12 premium finish (loaded last)
   • Fixed glass header (always visible on scroll)
   • Deeper, more cinematic hero
   • Final responsive + smoothness polish
══════════════════════════════════════════════ */

/* ── 1. FIXED HEADER ─────────────────────────── */
:root{--header-h:78px;}
@media (max-width:820px){:root{--header-h:66px;}}
@media (max-width:380px){:root{--header-h:62px;}}

.site-header{
  position:fixed!important;
  top:0;left:0;right:0;
  z-index:210!important;
  padding-top:env(safe-area-inset-top);
}

/* Reserve the exact header height so nothing hides underneath */
body{
  padding-top:calc(var(--header-h) + env(safe-area-inset-top))!important;
}

/* Anchors and Lenis jumps never land under the header */
html{scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 18px)!important;}

/* Softer, deeper glass as you scroll */
.site-header.scrolled{
  background:linear-gradient(180deg,rgba(9,4,4,.92),rgba(9,4,4,.78))!important;
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95),0 2px 22px -8px rgba(239,68,68,.18)!important;
}

/* Top hairline that lights up on scroll */
.site-header::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 4%,rgba(239,68,68,.55) 28%,rgba(251,191,36,.5) 50%,rgba(239,68,68,.55) 72%,transparent 96%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.site-header.scrolled::before{opacity:.75;}

/* Header never hides while scrolling (removed auto-hide) */
.site-header.header-hidden{transform:none!important;}

/* ── 2. HERO — cinematic upgrade ────────────── */

/* Slanted light beams drifting across the hero */
.hero-beam{
  position:absolute;z-index:0;pointer-events:none;width:46vw;min-width:340px;height:140%;
  top:-25%;filter:blur(46px);opacity:.16;
  background:linear-gradient(180deg,transparent,rgba(239,68,68,.5) 45%,rgba(249,115,22,.3) 60%,transparent);
  transform:skewX(-18deg);
  animation:beamDrift 16s ease-in-out infinite alternate;
}
.hero-beam.hb1{left:-8%;}
.hero-beam.hb2{right:-6%;transform:skewX(18deg);opacity:.12;animation-duration:21s;animation-delay:-8s;
  background:linear-gradient(180deg,transparent,rgba(249,115,22,.45) 50%,rgba(239,68,68,.25) 62%,transparent);}
@keyframes beamDrift{from{transform:translateX(-6%) skewX(-18deg)}to{transform:translateX(14%) skewX(-12deg)}}

/* Rotating conic halo behind the profile photo */
.hero-photo-wrap{position:relative;}
.hero-photo-wrap::before{
  content:"";position:absolute;inset:-7.5%;border-radius:50%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0%,rgba(239,68,68,.55) 18%,transparent 34%,transparent 55%,rgba(249,115,22,.45) 72%,transparent 88%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:haloSpin 14s linear infinite;
  opacity:.85;
}
@keyframes haloSpin{to{transform:rotate(360deg)}}

/* Shine sweep across the photo frame */
.hero-photo-frame{position:relative;overflow:visible;}
.hero-photo-frame::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:5;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.16) 47%,transparent 62%);
  transform:translateX(-130%) skewX(-8deg);
  animation:frameSweep 7s ease-in-out 2.5s infinite;
}
@keyframes frameSweep{0%{transform:translateX(-130%) skewX(-8deg)}48%,100%{transform:translateX(130%) skewX(-8deg)}}

/* Name underline flourish */
.hero-name-line{position:relative;}
.hero-name-line::after{
  content:"";position:absolute;left:2%;bottom:-.18em;width:96%;height:3px;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(239,68,68,.75) 25%,rgba(249,115,22,.85) 55%,rgba(251,191,36,.55) 78%,transparent);
  filter:drop-shadow(0 0 10px rgba(239,68,68,.6));
  transform:scaleX(0);transform-origin:left;
  animation:underlineIn 1.2s cubic-bezier(.2,.8,.2,1) 1s forwards;
}
@keyframes underlineIn{to{transform:scaleX(1)}}

/* Badge: gentle sheen */
.hero .badge{position:relative;overflow:hidden;}
.hero .badge::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
  transform:translateX(-120%);animation:badgeSheen 5.5s ease-in-out 2s infinite;
}
@keyframes badgeSheen{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}

/* Hero description softened */
.hero .hero-desc{color:rgba(255,255,255,.72);max-width:52ch;}

/* Scroll cue: brighter pulse */
.hero .scroll-cue span{
  background:linear-gradient(90deg,#fecaca,#fb923c);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:cuePulse 2.6s ease-in-out infinite;
}
@keyframes cuePulse{50%{opacity:.45}}

/* ── 3. GLOBAL SMOOTHNESS ───────────────────── */
html{overscroll-behavior-y:none;}
main{scroll-margin-top:calc(var(--header-h) + 8px);}

/* Buttery card transitions everywhere */
.feature-card,.stat-card,.journey-card,.tech-badge,.contact-item,.skill-card{
  will-change:transform;
}
@media (max-width:768px){
  .feature-card,.stat-card,.journey-card,.tech-badge,.contact-item,.skill-card{will-change:auto;}
}

/* Images never break their frames */
img{object-fit:cover;}

/* ── 4. RESPONSIVE SAFETY NET ───────────────── */
@media (max-width:900px){
  .hero-beam{opacity:.1;filter:blur(34px);}
  .hero-photo-wrap::before{inset:-6%;}
}
@media (max-width:640px){
  .hero-beam{display:none;}
  .hero-photo-wrap::before{opacity:.6;}
  .hero-photo-frame::after{animation-duration:9s;}
  .hero-name-line::after{bottom:-.14em;height:2.5px;}
  /* one-tap menus feel instant */
  .nav-mobile .nav-link{transition-duration:.18s!important;}
}
@media (max-width:380px){
  .hero-chip{font-size:.62rem;padding:.4rem .6rem;}
}

@media (prefers-reduced-motion:reduce){
  .hero-beam,.hero-photo-wrap::before,.hero-photo-frame::after,
  .hero .badge::after,.hero .scroll-cue span,.hero-name-line::after{animation:none!important;}
  .hero-name-line::after{transform:scaleX(1);}
}