/* =========================================================
   Domain Variants — Premium 2026 (v2)
   Animations, polish, micro-interactions
   ========================================================= */
:root{--seo-radius:22px;--grain:rgba(255,255,255,.028)}
body{font-feature-settings:"cv02","cv03","cv04","kern"}
body::after{
  background:
    radial-gradient(circle at 50% 0,rgba(var(--accent-a),.10),transparent 30%),
    linear-gradient(120deg,rgba(255,255,255,.045),transparent 26%,transparent 70%,rgba(var(--accent-b),.055));
  opacity:.7;
}
main{position:relative}
main::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.035) 50%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 78%,transparent 100%);
  opacity:.32;
}

/* ---------- Motion orbs (decorative particles) ---------- */
.motion-orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.motion-orb{position:absolute;border-radius:999px;
  background:radial-gradient(circle,#fff,rgba(var(--accent-b),.55) 45%,transparent 72%);
  filter:blur(.4px);opacity:.22;animation:orbFloat 18s ease-in-out infinite;
}
.motion-orb:nth-child(1){left:8%;top:22%;width:14px;height:14px;animation-delay:0s}
.motion-orb:nth-child(2){left:82%;top:16%;width:22px;height:22px;animation-delay:-3s}
.motion-orb:nth-child(3){left:18%;top:78%;width:18px;height:18px;animation-delay:-6s}
.motion-orb:nth-child(4){left:76%;top:72%;width:12px;height:12px;animation-delay:-9s}
.motion-orb:nth-child(5){left:52%;top:38%;width:10px;height:10px;animation-delay:-12s}
.motion-orb:nth-child(6){left:42%;top:88%;width:24px;height:24px;animation-delay:-15s}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(20px,-30px)}50%{transform:translate(-15px,-15px)}75%{transform:translate(-25px,20px)}}

/* ---------- Brand logo shine ---------- */
.brand-logo{position:relative;overflow:hidden}

/* ---------- Nav link underline ---------- */
.nav-links a{position:relative;overflow:hidden}
.nav-links a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:7px;height:2px;border-radius:999px;
  background:currentColor;opacity:0;transform:scaleX(.2);transition:.2s var(--ease);
}
.nav-links a:hover::after{opacity:.35;transform:scaleX(1)}
.nav-links a.active::after{display:none}

/* ---------- Hero h1 wrap ---------- */
.hero h1{text-wrap:balance}
.lead{text-wrap:pretty}
.section-title{text-wrap:balance}

/* ---------- Card lit (spotlight) ---------- */
.hero-card,.cardx,.project-card,.glass,.cert-card,.stat,.seo-panel article,.tech-cat,.contact-item{position:relative;isolation:isolate}
.hero-card::after,.cardx::after,.project-card::after,.glass::after,.cert-card::after,.stat::after,.seo-panel article::after,.tech-cat::after,.contact-item::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 36%,transparent 70%,rgba(var(--accent-b),.10));
  opacity:.7;z-index:-1;
}
.hero-card.is-lit::after,.cardx.is-lit::after,.project-card.is-lit::after,.glass.is-lit::after,.cert-card.is-lit::after,.seo-panel article.is-lit::after,.tech-cat.is-lit::after,.contact-item.is-lit::after{
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.20),rgba(var(--accent-b),.14) 18%,transparent 44%),linear-gradient(145deg,rgba(255,255,255,.12),transparent 40%,rgba(var(--accent-a),.10));
  opacity:1;
}

/* ---------- Card hover ---------- */
.cardx,.project-card,.cert-card,.btn,.seo-mini a,.social a,.seo-panel article,.tech-cat,.contact-item{will-change:transform}
.cardx h3,.project-card h2{letter-spacing:-.045em}
.url{opacity:.85;transition:.2s var(--ease)}
.cardx:hover .url{opacity:1;transform:translateX(3px)}

/* ---------- Project card ---------- */
.project-card{overflow:hidden}

/* ---------- Terminal cursor ---------- */
.terminal{position:relative}
.terminal::after{
  content:"";display:inline-block;width:7px;height:14px;margin-left:6px;vertical-align:-2px;
  background:currentColor;animation:blink 1s steps(2,end) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ---------- Avatar subtle pulse ---------- */
.avatar-wrap::after{
  content:"";position:absolute;inset:-4px;border-radius:28px;
  border:1px solid rgba(var(--accent-a),.32);opacity:0;
  animation:avatarPulse 3s ease-in-out infinite;
}
@keyframes avatarPulse{0%,100%{opacity:0;transform:scale(.92)}50%{opacity:.6;transform:scale(1.04)}}

/* ---------- SEO panel (legacy, kept for backward compat) ---------- */
.seo-panel{padding:0 0 18px;margin-top:-18px}
.seo-panel-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.seo-panel article{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  padding:18px 18px 16px;box-shadow:0 18px 50px rgba(0,0,0,.16);
  opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.seo-panel article.visible{opacity:1;transform:none}
.seo-panel article span{display:inline-flex;margin-bottom:10px;color:rgb(var(--accent-b));font-size:10.5px;font-weight:950;text-transform:uppercase;letter-spacing:.16em}
.seo-panel article b{display:block;color:#fff;font-size:17px;letter-spacing:-.04em}
.seo-panel article p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.seo-panel article::before{content:"";position:absolute;right:-26px;top:-28px;width:84px;height:84px;border-radius:50%;background:rgba(var(--accent-a),.12);filter:blur(3px)}

/* ---------- SEO mini links (legacy) ---------- */
.seo-mini{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.seo-mini a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.052);
  padding:12px 14px;color:var(--text-soft);font-size:13px;font-weight:850;transition:.2s var(--ease);
}
.seo-mini a:hover{background:rgba(255,255,255,.10);color:#fff;transform:translateY(-1px);border-color:var(--line-strong)}
.seo-mini span{color:var(--muted);font-size:12px}

/* ---------- Domain bridge (legacy, kept for compat) ---------- */
.domain-bridge{
  position:fixed;right:18px;bottom:18px;z-index:120;display:flex;gap:8px;align-items:center;padding:8px;
  border:1px solid var(--line-strong);border-radius:999px;background:rgba(5,8,16,.78);
  backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 18px 52px rgba(0,0,0,.30);transition:.22s var(--ease);
}
.domain-bridge:hover{transform:translateY(-2px);background:rgba(5,8,16,.95)}
.domain-bridge a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900;color:var(--muted);border:1px solid transparent;white-space:nowrap;transition:.2s var(--ease)}
.domain-bridge a:hover,.domain-bridge a.active{color:#07111f;background:linear-gradient(135deg,#fff,#d9e6ff)}
.domain-bridge small{display:block;margin-right:2px;padding-left:8px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}

/* ---------- Gresik variant quirks ---------- */
html[data-variant="gresik"] .hero-card{transform:rotate(-.35deg)}
html[data-variant="gresik"] .profile-panel{background:linear-gradient(180deg,rgba(8,13,24,.85),rgba(9,18,34,.74))}
html[data-variant="gresik"] .cardx:nth-child(odd){border-radius:30px 18px 30px 18px}
html[data-variant="gresik"] .project-card:nth-child(odd){border-radius:30px 18px 30px 18px}
html[data-variant="gresik"] .eyebrow{box-shadow:0 12px 34px rgba(106,167,255,.10)}

/* ---------- Touch device safety ---------- */
@media(hover:none){
  .cardx:hover,.project-card:hover,.cert-card:hover,.btn:hover,.tech-cat:hover,.contact-item:hover{transform:none!important}
  .cardx:hover img,.cert-card:hover img{transform:none!important}
  .motion-orbs{display:none}
  .aurora{display:none}
  .grain{display:none}
}

/* ---------- Tablet ---------- */
@media(max-width:980px){
  .hero::before{top:32px}
  .project-card::before{width:100%;height:3px}
  .project-card:hover::before{height:3px}
  .seo-panel-inner{grid-template-columns:1fr 1fr}
}

/* ---------- Mobile ---------- */
@media(max-width:720px){
  main::before{display:none}
  .domain-bridge{left:12px;right:12px;bottom:12px;justify-content:center;border-radius:22px}
  .domain-bridge small{display:none}
  .domain-bridge a{flex:1;padding:9px 8px}
  .footer{padding-bottom:96px}
  .seo-mini{grid-template-columns:1fr}
  .seo-panel{margin-top:-8px;padding-bottom:8px}
  .seo-panel-inner{grid-template-columns:1fr}
  .seo-panel article{padding:15px 15px 14px}
  .hero-card{transform:none!important}
  .hero::before{left:12px;top:24px;width:58px;height:4px}
  .hero h1,.page-hero h1{letter-spacing:-.07em}
  .cardx,.project-card,.glass{box-shadow:0 16px 45px rgba(0,0,0,.20)}
}

@media(max-width:420px){
  .domain-bridge a{font-size:11px}
  .domain-bridge{gap:6px;padding:6px}
  .seo-mini a{padding:11px 12px}
  .hero::before{display:none}
  .nav-inner{gap:10px}
  .brand-logo{flex:0 0 auto}
}

@media(prefers-reduced-motion:reduce){
  .terminal::after{animation:none}
  .brand-logo::after{display:none}
  .motion-orbs{display:none}
  .seo-panel article{opacity:1;transform:none}
  .avatar-wrap::after{animation:none}
}