/* iOS 26 glass + smoothness pass — load LAST */
:root{--ios-spring:cubic-bezier(.32,.72,0,1);--ios-out:cubic-bezier(.22,1,.36,1);--ios-rim:rgba(255,255,255,.78)}

/* Cards: layered iOS glass without per-card backdrop-filter (the main scroll-jank source) */
.glass-card,.exp-card,.cert-card,.proj-card,.edu-card,.award-card,.about-highlight,.info-item,.faq-item,.u-card{
  background:linear-gradient(150deg,rgba(255,255,255,.78) 0%,rgba(255,248,238,.56) 55%,rgba(255,255,255,.7) 100%)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:1px solid var(--ios-rim)!important;border-radius:26px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(212,129,58,.14),inset 1px 0 0 rgba(255,255,255,.6),0 1px 2px rgba(70,45,20,.06),0 18px 40px -18px rgba(120,80,40,.3)!important;
  transition:transform .55s var(--ios-spring),box-shadow .55s var(--ios-out)!important;
  transform:translateZ(0)}
@media(hover:hover){
  .exp-card:hover,.cert-card:hover,.proj-card:hover,.edu-card:hover,.award-card:hover{
    transform:translate3d(0,-5px,0)!important;
    box-shadow:inset 0 1.5px 0 #fff,inset 0 -1px 0 rgba(212,129,58,.2),0 2px 4px rgba(70,45,20,.06),0 28px 52px -20px rgba(120,80,40,.38)!important}}
.glass-card:active,.exp-card:active,.cert-card:active,.proj-card:active{transform:scale(.985)!important;transition-duration:.18s!important}

/* Only a few floating surfaces keep real blur (iOS-style: strong, saturated, but limited) */
header nav,.tabbar,.mob-menu-inner{-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.tabbar{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),0 10px 30px -10px rgba(80,50,20,.28)}

/* Softer, springier reveal */
.reveal,.reveal-left,.reveal-right{transition:opacity .8s var(--ios-out),transform .9s var(--ios-spring)!important;will-change:auto}
.reveal:not(.visible):not(.in):not(.revealed){will-change:transform,opacity}

/* Scroll progress on the compositor (transform, not width) */
#readingProgress,.reading-progress{width:100%!important;transform-origin:0 50%;transform:scaleX(var(--p,0));transition:none!important}

/* While scrolling: no hover repaints; offscreen / hidden tab: pause animations */
body.is-scrolling .exp-card,body.is-scrolling .cert-card,body.is-scrolling .proj-card,body.is-scrolling .award-card,body.is-scrolling .edu-card{pointer-events:none}
section.is-off *,section.is-off *::before,section.is-off *::after,body.tab-hidden *,body.tab-hidden *::before,body.tab-hidden *::after{animation-play-state:paused!important}
img{-webkit-user-drag:none}
html{scroll-padding-top:84px;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){.exp-card,.cert-card,.proj-card,.award-card{transition:none!important}}

/* ── Text safety: no clipping / collisions ── */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{text-wrap:balance}p,li,.exp-ach-item span,.award-desc{text-wrap:pretty}
.skill-pill-name,.exp-company,.exp-role,.award-title,.award-org,.exp-ach-item span,.proj-card *{overflow-wrap:break-word;min-width:0}
.skill-pill{min-width:0}.skill-pill-info{min-width:0;display:flex;flex-direction:column;gap:.3rem}
.skill-pill-name{margin-bottom:0!important;line-height:1.25}
.skill-pill-info>:not(.skill-bar):not(.skill-pill-name){display:flex;flex-wrap:wrap;gap:.25rem;white-space:nowrap}
.cert-stat,.extra-card,.award-spot,.skill-pill,.exp-impact>div,.exp-tag,.nav-cta,.nav-docs-btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ── Mobile: give timeline cards real width ── */
@media(max-width:640px){
  .exp-item{gap:.6rem!important;margin-bottom:1.6rem!important}
  .exp-marker{width:14px!important}
  .exp-card{padding:1.15rem!important;min-width:0}
  .exp-card-top,.exp-company-row{flex-direction:column;align-items:flex-start!important;gap:.6rem!important}
  .exp-meta{align-items:flex-start!important;text-align:left!important;width:100%}
  .exp-role,.exp-period{text-align:left!important}
  .exp-ach-item{padding:.7rem .8rem!important;gap:.6rem!important}
  .exp-ach-item span{font-size:.86rem;line-height:1.55}
  .exp-impact{grid-template-columns:1fr 1fr!important}
  .skill-pill{padding:.8rem!important;gap:.65rem!important}
  .skill-pill-icon{width:36px!important;height:36px!important;font-size:1rem!important;border-radius:11px}
  .skill-pill-name{font-size:.82rem!important}
  .cert-stat,.extra-card{padding-inline:.9rem!important}
}

/* ── Detailing: iOS-style controls, focus, selection, scrollbar ── */
::selection{background:rgba(212,129,58,.28)}
:focus-visible{outline:2px solid rgba(212,129,58,.75);outline-offset:3px;border-radius:12px}
.nav-cta,.nav-docs-btn,.exp-tag,.skill-pill,.cert-stat{transition:transform .4s var(--ios-spring),box-shadow .4s var(--ios-out),background .3s ease!important}
.nav-cta:active,.nav-docs-btn:active,button:active{transform:scale(.95);transition-duration:.12s!important}
.exp-tag,.exp-impact>div{background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,244,230,.6))!important;border:1px solid rgba(255,255,255,.8)!important;box-shadow:inset 0 1px 0 #fff,0 2px 8px -3px rgba(120,80,40,.2)}
.skill-bar{background:rgba(212,129,58,.14)!important;box-shadow:inset 0 1px 2px rgba(120,80,40,.15)}
.skill-bar-fill{transition:width 1.2s var(--ios-out)!important;box-shadow:0 0 10px rgba(212,129,58,.45)}
.exp-dot{box-shadow:0 0 0 4px rgba(212,129,58,.16),0 0 0 9px rgba(212,129,58,.07),0 4px 10px rgba(212,129,58,.35)!important}
@media(hover:hover){.skill-pill:hover,.cert-stat:hover,.extra-card:hover{transform:translate3d(0,-4px,0)!important}}
@supports(scrollbar-width:thin){html{scrollbar-width:thin;scrollbar-color:rgba(212,129,58,.45) transparent}}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:rgba(212,129,58,.4);border-radius:9px;border:2px solid transparent;background-clip:content-box}