/* Reusable UI components: header/nav, footer, buttons, hero, cards, overlays, grids, testimonials, skills, preloader, utilities */

/* =Light‑mode polish */
body.light-mode .primary-cta,
body.light-mode .overlay-button,
body.light-mode .overlay-action-button,
body.light-mode .scroll-top-btn { color: #fff; }
body.light-mode .primary-cta:hover,
body.light-mode .overlay-button:hover,
body.light-mode .overlay-action-button:hover {
  color: var(--accent-color-primary-light);
  border-color: var(--accent-color-primary-light);
}
body.light-mode .project-card,
body.light-mode .project-showcase-card,
body.light-mode .skill-card,
body.light-mode .testimonial-card,
body.light-mode .testimonial-item-card {
  background: var(--bg-secondary);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
body.light-mode #main-header.scrolled{ box-shadow: 0 10px 22px rgba(0,0,0,.08); }

/* =========================
   =Header / Navigation
   ========================= */
#main-header{
  position: fixed; inset-inline: 0; top: 0; z-index: 1000;

  height: calc(var(--header-height) + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);

  background-color: var(--header-bg, rgba(13,13,26,.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--border-color, rgba(0,240,255,.3));
  transition: background-color .3s, border-color .3s, top .3s, box-shadow .3s;
}
#main-header.scrolled{ box-shadow: 0 10px 30px rgba(0,0,0,.25); }

.header-container{
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}

/* Logo */
.logo{ min-width: 0; } /* allow logo flex child to shrink */
.logo .logo-text{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 62vw; /* keep room for buttons on the right */

  font-family: var(--font-heading);
  font-weight: 700; letter-spacing: 1px;
  /* responsive font size (overrides earlier static size) */
  font-size: clamp(1.05rem, 5.4vw, 1.6rem);
  color: var(--accent-primary);

  transition: color .25s, text-shadow .25s;
}
.logo:hover .logo-text{
  color: var(--accent-secondary);
  text-shadow: 0 0 10px var(--accent-glow, rgba(0,240,255,.4));
}

/* Nav */
.nav-links ul{ display: flex; list-style: none; }
.nav-links ul li{ margin-left: 24px; }
.nav-item{
  position: relative; display: inline-block;
  padding: 8px 12px; letter-spacing: .5px;
  color: var(--text-color); font-weight: 500;
  transition: color .25s, text-shadow .25s;
}
.nav-item:hover, .nav-item.active{
  color: var(--accent-primary);
  text-shadow: 0 0 6px var(--accent-glow, rgba(0,240,255,.4));
}
.nav-item::before{
  content:""; position:absolute; left:10%; bottom:0; width:0; height:2px;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-glow, rgba(0,240,255,.4));
  transition: width .25s, left .25s;
}
.nav-item:hover::before, .nav-item.active::before{ width:80%; left:10%; }

.header-actions{
  display:flex; align-items:center; gap:12px;
  flex-shrink: 0; /* keep action buttons from shrinking awkwardly */
}

/* Theme toggle */
.theme-toggle-button{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius: 50%;

  background: transparent;
  color: var(--text-color);
  border:1px solid var(--border-color, rgba(0,240,255,.3));

  font-size:1.1rem;
  transition: color .25s, border-color .25s, transform .15s;
}
.theme-toggle-button:hover{
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: rotate(15deg) scale(1.05);
}
.theme-toggle-button .sun-icon{ display:none; }
body.light-mode .theme-toggle-button .sun-icon{ display:inline-block; }
body.light-mode .theme-toggle-button .moon-icon{ display:none; }

/* Hamburger */
.menu-toggle{ display:none; background:transparent; border:0; padding:10px; }
.hamburger-line{
  display:block; width:25px; height:3px; margin:5px 0;
  background: var(--text-color);
  transition: transform .25s, opacity .2s;
}
.menu-toggle.active .hamburger-line:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.active .hamburger-line:nth-child(2){ opacity:0; }
.menu-toggle.active .hamburger-line:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav dropdown */
@media (max-width: 992px){
  #main-header{ position: sticky; top: 0; }
  .menu-toggle{ display:block; }

  .nav-links{
    position: fixed; top: calc(var(--header-height) + var(--safe-top)); left: 0; right: 0; width: 100%;
    display: none; padding: .6rem 0;

    background: var(--header-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border-color);
  }
  .nav-links.active{ display:flex; }
  .nav-links ul{ flex-direction: column; width:100%; }
  .nav-links ul li{ margin:0; }
  .nav-item{ display:block; padding: 1rem 1.2rem; text-align: center; border-bottom: 1px solid rgba(127,0,255,.1); }
  .nav-item::before{ display:none; }
  .nav-links ul li:last-child .nav-item{ border-bottom: 0; }
}

/* Tighten header controls on very small screens */
@media (max-width: 480px){
  #main-header .container{ width: calc(100% - 16px); }
  .header-actions{ gap: 8px; }
  .theme-toggle-button{ width: 36px; height: 36px; }
  .menu-toggle{ padding: 8px; }
  .hamburger-line{ width: 22px; }
}
@media (max-width: 360px){
  .logo .logo-text{ max-width: 58vw; }
  .theme-toggle-button{ width: 34px; height: 34px; }
  .menu-toggle{ padding: 6px; }
  .hamburger-line{ width: 20px; }
}

/* =========================
   =Footer
   ========================= */
#main-footer{
  padding: 3rem 0 1.5rem;
  color: var(--text-color);
  background: var(--footer-bg, #101020);
  border-top:1px solid var(--border-color);
  transition: background-color .3s, border-color .3s, color .3s;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 2rem; padding-bottom:1.5rem; border-bottom: 1px dashed var(--border-color);
}
.footer-logo-text{
  font-family: var(--font-heading);
  font-size: 1.3rem; letter-spacing: 1px; color: var(--accent-secondary);
}
.footer-social-links a{
  display:inline-flex; align-items:center; gap:8px;
  margin-left: 16px; color: var(--text-color);
  transition: color .25s, text-shadow .25s;
}
.footer-social-links a i{ font-size:1.25rem; transition: transform .15s; }
.footer-social-links a:hover{ color: var(--accent-primary); text-shadow: 0 0 6px var(--accent-glow, rgba(0,240,255,.35)); }
.footer-social-links a:hover i{ transform: scale(1.1) rotate(-5deg); }
.footer-bottom{ text-align:center; }
.status-ok{ color:#00ff00; font-weight:700; text-shadow: 0 0 5px rgba(0,255,0,.5); }

@media (max-width: 768px){
  .footer-top{ flex-direction: column; text-align: center; }
  .footer-social-links a{ margin: 0 10px 10px; }
}

/* =========================
   =Buttons / CTAs / Tags
   ========================= */
.cta-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 28px; border-radius: 6px; border: 2px solid transparent;

  font-family: var(--font-heading);
  font-weight: 600; letter-spacing: .5px;
  transition: all .25s ease;
}
.cta-button i{ font-size: 1.1em; }

.primary-cta{ background: var(--accent-primary); color: var(--bg-color); border-color: var(--accent-primary); }
.primary-cta:hover{ background: transparent; color: var(--accent-primary); box-shadow: 0 0 15px var(--accent-glow, rgba(0,240,255,.35)); transform: translateY(-2px); }

.secondary-cta{ background: transparent; color: var(--accent-secondary); border-color: var(--accent-secondary); }
.secondary-cta:hover{ background: var(--accent-secondary); color: var(--bg-color); box-shadow: 0 0 15px rgba(var(--accent-secondary-rgb, 255,0,255), .45); transform: translateY(-2px); }

.large-cta{ padding: 15px 40px; font-size: 1.05rem; }

/* Tag badge */
.tag, .project-card-tech-stack span{
  font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 4px;

  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 0,240,255), .1);
  border:1px solid rgba(var(--accent-primary-rgb, 0,240,255), .2);
}

/* =========================
   =Hero (generic) — Static mesh
   ========================= */
.hero-section{
  position: relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height: calc(100vh - var(--header-height));
  padding: 64px 0;
  background: var(--bg-color);
}
.hero-container{ width:100%; display:flex; align-items:center; justify-content:space-between; gap: 40px; }
.hero-text-content{ flex-basis:60%; max-width: 720px; z-index: 2; }
.hero-visual-area{ flex-basis:40%; display:flex; align-items:center; justify-content:center; z-index:1; }

/* Soft static mesh */
.hero-section::before{
  content:""; position:absolute; inset:-20% -10% -10% -10%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 45% at 18% 25%, rgba(var(--accent-primary-rgb,0,240,255), .12), transparent 60%),
    radial-gradient(35% 40% at 80% 75%, rgba(var(--accent-secondary-rgb,255,0,255), .10), transparent 60%),
    radial-gradient(30% 30% at 70% 20%, rgba(0,255,170,.10), transparent 65%);
  filter: blur(60px); opacity: .55;
}
body.light-mode .hero-section::before{ opacity: .38; filter: blur(55px); }

.hero-headline{
  margin-bottom: .5em;
  font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.1;
  color: var(--text-color);
}
.greeting-line{ display:block; margin-bottom: .15em; font-size: .5em; color: var(--accent-secondary); letter-spacing: 1px; }
.name-line{ display:block; position: relative; color: var(--accent-primary); }

.hero-subtitle-wrapper{ margin: 1.1rem 0; height: 2.1em; }
.hero-subtitle{ font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 600; }
.role-typer-text{ color: var(--accent-primary); text-shadow: 0 0 5px var(--accent-glow, rgba(0,240,255,.35)); }
.cursor{ display:inline-block; width: 10px; height: 1.4em; margin-left: 2px; background: var(--accent-primary); vertical-align: text-bottom; animation: cursorBlink 1s step-end infinite; }
@keyframes cursorBlink{ 0%,100%{ background: transparent; } 50%{ background: var(--accent-primary); } }

.hero-intro{ max-width: 640px; margin-bottom: 2rem; font-size: 1rem; opacity: .95; }
.visual-placeholder{ width:100%; max-width: 420px; }
.ascii-art{
  white-space: pre; line-height: 1.1; opacity: .65;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: clamp(.32rem, 2vw, .62rem); color: var(--accent-primary);
  text-shadow: 0 0 5px var(--accent-glow, rgba(0,240,255,.35));
  animation: fadeInAscii 1.6s ease-out both;
}
@keyframes fadeInAscii{ from{ opacity:0; transform: translateY(16px); } to{ opacity:.65; transform: translateY(0); } }

.scroll-down-indicator{
  position:absolute; left:50%; bottom: 24px; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; color: var(--text-color); opacity:.75;
  animation: scrollBounce 2s infinite;
}
.scroll-down-indicator a{ color: inherit; display:inherit; align-items:center; gap:6px; flex-direction:column; }
.scroll-down-indicator a:hover{ opacity:1; color: var(--accent-primary); }
.scroll-down-indicator i{ font-size: 1.5rem; }
@keyframes scrollBounce{
  0%,20%,50%,80%,100%{ transform: translateX(-50%) translateY(0); }
  40%{ transform: translateX(-50%) translateY(-10px); }
  60%{ transform: translateX(-50%) translateY(-5px); }
}
.background-glitch-overlay{ display: none !important; }

@media (max-width: 992px){
  .hero-container{ flex-direction: column-reverse; text-align: center; }
  .hero-visual-area{ max-width: 320px; margin-bottom: 24px; }
  .hero-intro{ margin-left:auto; margin-right:auto; max-width: 90%; }
  .hero-cta-buttons{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
}
@media (max-width: 480px){
  .hero-headline{ font-size: 2.2rem; }
  .hero-subtitle{ font-size: 1.15rem; }
}

/* =========================
   =Headings (glitch disabled -> clean gradient text)
   ========================= */
.glitch{
  color: transparent;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 8px var(--accent-glow));
  animation: none !important; text-shadow: none !important;
}
.glitch span{
  position: static !important; display: inline !important; opacity: 1 !important;
  clip-path: none !important; animation: none !important; transform: none !important;
}
body.light-mode .glitch{ filter: drop-shadow(0 0 6px var(--accent-color-glow-light)); }

/* =========================
   =Cards / Grids (reusable)
   ========================= */
.projects-grid,
.projects-showcase-grid{
  display:grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
}
@media (min-width: 1024px){ .projects-showcase-grid{ grid-template-columns: repeat(3, 1fr); } }

.project-card,
.project-showcase-card{
  display:flex; flex-direction:column; overflow:hidden;
  background: var(--bg-color);
  border:1px solid var(--border-color); border-radius: 8px;
  box-shadow: 0 5px 18px rgba(0,0,0,.12);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.project-card:hover,
.project-showcase-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 14px 32px rgba(var(--accent-primary-rgb,0,240,255), .15);
}

.project-image-wrapper,
.project-card-image-wrapper{
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; height: auto; min-height: 160px;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-primary-rgb,0,240,255), .06),
    rgba(var(--accent-secondary-rgb,255,0,255), .06)
  );
}

/* Placeholder when image missing */
.project-image-wrapper.no-image,
.project-card-image-wrapper.no-image{
  display: grid; place-items: center;
  background:
    radial-gradient(40% 45% at 50% 50%, rgba(var(--accent-primary-rgb,0,240,255), .12), transparent 60%),
    radial-gradient(35% 40% at 60% 60%, rgba(var(--accent-secondary-rgb,255,0,255), .10), transparent 60%),
    var(--bg-secondary);
  border-bottom: 1px dashed var(--border-color);
}
.project-image-wrapper.no-image::before,
.project-card-image-wrapper.no-image::before{
  content: "\f03e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 2.2rem; color: rgba(var(--accent-primary-rgb,0,240,255), .85);
  text-shadow: 0 0 12px var(--accent-glow); opacity: .9;
}
.project-image-wrapper.no-image .project-overlay,
.project-card-image-wrapper.no-image .project-card-overlay{
  opacity: 1; background: transparent;
}

.project-thumbnail,
.project-card-thumbnail{
  width:100%; height:100%; object-fit: cover; transition: transform .35s;
}
.project-card:hover .project-thumbnail,
.project-showcase-card:hover .project-card-thumbnail{ transform: scale(1.06); }

.project-overlay,
.project-card-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction: column; gap:10px;
  padding: 16px; opacity:0;
  background: color-mix(in oklab, var(--bg-color) 70%, transparent);
  backdrop-filter: blur(3px);
  transition: opacity .3s;
}
.project-card:hover .project-overlay,
.project-showcase-card:hover .project-card-overlay{ opacity:1; }

.overlay-button,
.overlay-action-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width: 180px; padding: 10px 20px; border-radius: 6px;

  font-family: var(--font-heading); font-size: .95rem;

  background: var(--accent-primary); color: var(--bg-color);
  border:2px solid var(--accent-primary);

  transition: background .25s, color .25s, transform .2s;
}
.overlay-button:hover,
.overlay-action-button:hover{ background: transparent; color: var(--accent-primary); transform: scale(1.04); }
.overlay-button.secondary,
.overlay-action-button.secondary{ border-color: var(--accent-secondary); background: var(--accent-secondary); }
.overlay-button.secondary:hover,
.overlay-action-button.secondary:hover{ background: transparent; color: var(--accent-secondary); }

.project-content,
.project-card-content{ display:flex; flex-direction:column; flex-grow:1; padding: 22px 24px; }
.project-title,
.project-card-title{ margin-bottom: 8px; font-size: 1.35rem; font-weight: 700; color: var(--text-color); transition: color .25s; }
.project-title a{ color: inherit; }
.project-card:hover .project-card-title,
.project-showcase-card:hover .project-card-title{ color: var(--accent-primary); }
.project-description,
.project-card-short-desc{ margin-bottom: 16px; flex-grow:1; font-size: .95rem; line-height: 1.6; color: var(--text-color); opacity: .9; }
.project-tags,
.project-card-tech-stack{ display:flex; flex-wrap: wrap; gap:8px; margin-top:auto; }

/* =========================
   =Skills cards — Pointer‑Reactive Aurora
   ========================= */
.skills-grid{
  display:grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
}
.skill-card{
  position: relative; overflow:hidden; isolation:isolate;
  padding: 28px 22px; text-align:center;

  background: var(--bg-color);
  border:1px solid var(--border-color); border-radius: 10px;

  transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.skill-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 36px rgba(var(--accent-primary-rgb,0,240,255), .16);
  border-color: var(--accent-primary);
}
.skill-card::before, .skill-card::after{ pointer-events:none; }
.skill-card::before{
  content:""; position:absolute; inset:-18% -10% -10% -10%; z-index:0; border-radius: 16px;
  background:
    radial-gradient(34% 30% at var(--spot-x-p,50%) var(--spot-y-p,50%), rgba(var(--accent-primary-rgb,0,240,255), .16), transparent 68%),
    radial-gradient(28% 26% at calc((var(--spot-x-p,50%))*0.92) calc((var(--spot-y-p,50%))*1.06), rgba(var(--accent-secondary-rgb,255,0,255), .13), transparent 70%),
    radial-gradient(24% 22% at calc((var(--spot-x-p,50%))*1.08) calc((var(--spot-y-p,50%))*0.90), rgba(0,255,170,.10), transparent 72%);
  filter: blur(40px); opacity:.60; transition: opacity .25s ease;
}
.skill-card:hover::before{ opacity:.74; }
.skill-icon{
  position: relative; z-index:2;
  margin-bottom: 14px; font-size: 2.6rem; color: var(--accent-primary);
  transition: transform .25s ease, text-shadow .25s ease;
}
.skill-card:hover .skill-icon{ transform: translateY(-2px); text-shadow: 0 0 14px var(--accent-glow, rgba(0,240,255,.35)); }
.skill-name{ position: relative; z-index:2; margin-bottom: 10px; font-size: 1.2rem; font-weight: 700; color: var(--text-color); }
.skill-description{ position: relative; z-index:2; opacity:.85; }
body.light-mode .skill-card::before{ opacity:.48; filter: blur(36px); }

/* =========================
   =Testimonials cards
   ========================= */
.testimonials-grid,
.testimonials-listing-grid{
  display:grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
}
.testimonial-card,
.testimonial-item-card{
  position: relative;
  padding: 28px; border-radius: 8px;
  background: var(--bg-secondary);
  border:1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.testimonial-card:hover,
.testimonial-item-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 34px rgba(var(--accent-secondary-rgb,255,0,255), .12); }
.testimonial-quote-icon{ position:absolute; top:16px; left:20px; font-size: 2.2rem; color: var(--accent-secondary); opacity:.35; }
.testimonial-text{ padding-top: 20px; font-size: 1rem; line-height: 1.8; opacity:.95; font-style: italic; }
.testimonial-author{ display:flex; align-items:center; gap:14px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border-color); }
.author-photo{ width: 60px; height:60px; object-fit: cover; border-radius: 50%; border:2px solid var(--accent-primary); }
.author-name{ font-size: 1.05rem; font-weight: 700; color: var(--accent-primary); }

/* =========================
   =Final CTA decorative elements
   ========================= */
.cta-background-elements{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.bg-element{ position:absolute; border-radius: 2px; opacity:.08; background: var(--accent-primary); animation: pulseElement 5s infinite alternate ease-in-out; }
@keyframes pulseElement{ from{ opacity:.05; transform: scale(.96); } to{ opacity:.1; transform: scale(1.04); } }
.element-1{ width: 150px; height: 3px; top: 15%; left: 10%; transform: rotate(45deg); animation-delay: 0s;}
.element-2{ width: 80px; height: 80px; top: 70%; right: 12%; border-radius: 50%; background: var(--accent-secondary); animation-delay: 1s;}
.element-3{ width: 5px; height: 100px; bottom: 5%; left: 30%; transform: rotate(-30deg); animation-delay: 2s;}
.element-4{ width: 60px; height: 60px; top: 20%; right: 25%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); animation-delay: 3s; }

/* =========================
   =HUD Preloader
   ========================= */
.hud-noscroll{ overflow:hidden; } /* duplicate of base.css by design (safe) */
#hud-preloader{
  --accent: #00f0ff; --accent-soft: rgba(0,255,255,.35); --bg: #040b12; --grid: rgba(0,255,255,.06);
  position: fixed; inset: 0; z-index: 9999; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 50%, rgba(0,255,255,.06), transparent 60%), var(--bg);
  color: #8ff; font-family: 'Rajdhani','Orbitron','Montserrat', system-ui, sans-serif; letter-spacing: .08em; overflow:hidden;
}
#hud-preloader::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 32px);
  animation: hud-grid-pan 12s linear infinite; opacity:.7;
}
#hud-preloader::after{ content:""; position:absolute; inset:0; background: radial-gradient(70% 70% at 50% 50%, transparent 60%, rgba(0,0,0,.45) 85%, rgba(0,0,0,.65) 100%); pointer-events:none; }
#hud-preloader .hud-wrap{ position:relative; display:grid; place-items:center; gap:14px; text-align:center; }
#hud-preloader .hud-core{ position:relative; width:180px; height:180px; display:grid; place-items:center; }
#hud-preloader .hud-core::before,
#hud-preloader .hud-core::after{ content:""; position:absolute; opacity:.7; background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); }
#hud-preloader .hud-core::before{ width:120px; height:1px; left:50%; top:50%; transform:translate(-50%,-50%); }
#hud-preloader .hud-core::after{ width:1px; height:120px; left:50%; top:50%; transform:translate(-50%,-50%); }
#hud-preloader .hud-ring-dashed{
  position:absolute; width:170px; height:170px; border-radius:50%;
  background: repeating-conic-gradient(from 0deg, rgba(0,255,255,.8) 0 6deg, transparent 6deg 14deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0);
  opacity:.75; animation: hud-spin-rev 8s linear infinite; filter: drop-shadow(0 0 10px rgba(0,255,255,.25));
}
#hud-preloader .hud-ring{
  position:absolute; width:140px; height:140px; border-radius:50%;
  border:2px solid rgba(0,255,255,.15); border-top-color: var(--accent); border-bottom-color: rgba(0,255,255,.35);
  box-shadow: 0 0 18px rgba(0,255,255,.35) inset, 0 0 10px rgba(0,255,255,.25);
  animation: hud-spin 1.3s linear infinite;
}
#hud-preloader .hud-hex{
  --size: 112px; position:relative; width: var(--size); aspect-ratio: 1; display:grid; place-items:center; padding:6px;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  background: conic-gradient(from 0deg,
      rgba(0,255,255,.6), rgba(0,255,255,0) 60deg,
      rgba(0,255,255,.6) 120deg, rgba(0,255,255,0) 180deg,
      rgba(0,255,255,.6) 240deg, rgba(0,255,255,0) 300deg,
      rgba(0,255,255,.6) 360deg);
  animation: hud-spin 10s linear infinite; filter: drop-shadow(0 0 10px rgba(0,255,255,.25));
}
#hud-preloader .hud-hex-inner{ width:100%; height:100%; clip-path: inherit; overflow:hidden; background: rgba(0,255,255,.03); border:1px solid rgba(0,255,255,.25); position: relative; }
#hud-preloader .hud-avatar{ width:100%; height:100%; object-fit: cover; transform: scale(1.02); filter: saturate(1.05) contrast(1.05); }
#hud-preloader .hud-hex-inner::after{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(0,255,255,.30) 45%, transparent 60%); mix-blend-mode: screen; animation: hud-sweep 2.6s ease-in-out infinite; }
#hud-preloader .hud-scan{ position:absolute; left:0; right:0; top:0; height:2px; background: linear-gradient(90deg, transparent, rgba(0,255,255,.7), transparent); animation: hud-scanline 1.8s linear infinite; opacity:.7; }
#hud-preloader .hud-text{ margin: 6px 0 2px; font-size: 13px; text-transform: uppercase; opacity:.9; text-shadow: 0 0 8px rgba(0,255,255,.4); animation: hud-glow 2.2s ease-in-out infinite; }
#hud-preloader .hud-percent{ font-size: 12px; opacity:.85; letter-spacing: .12em; }
#hud-preloader .hud-progress{ width: min(260px, 68vw); height: 6px; border: 1px solid var(--accent-soft); background: rgba(0,255,255,.06); border-radius: 999px; overflow: hidden; }
#hud-preloader .hud-progress-fill{ position: relative; width:0%; height:100%; background: linear-gradient(90deg, rgba(0,255,255,.25), var(--accent)); box-shadow: 0 0 12px var(--accent); background-size: 200% 100%; animation: hud-flow 1.6s linear infinite; }
#hud-preloader .hud-progress-fill::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 6px, rgba(255,255,255,0) 6px 12px); mix-blend-mode: overlay; animation: hud-stripes 1.1s linear infinite; }
#hud-preloader.hud-fade{ opacity:0; transition: opacity .35s ease; pointer-events:none; }

@keyframes hud-spin{ to{ transform: rotate(360deg); } }
@keyframes hud-spin-rev{ to{ transform: rotate(-360deg); } }
@keyframes hud-grid-pan{ from{ background-position: 0 0, 0 0; } to{ background-position: 60px 0, 0 60px; } }
@keyframes hud-sweep{ 0%{ transform: translateX(-120%); opacity:0; } 40%{ opacity:.8; } 60%{ opacity:.8; } 100%{ transform: translateX(120%); opacity:0; } }
@keyframes hud-scanline{ 0%{ transform: translateY(-100%); } 100%{ transform: translateY(200vh);} }
@keyframes hud-flow{ to{ background-position: -200% 0; } }
@keyframes hud-stripes{ to{ transform: translateX(-24px); } }
@keyframes hud-glow{ 0%,100%{ text-shadow: 0 0 6px rgba(0,255,255,.25), 0 0 14px rgba(0,255,255,.15); } 50%{ text-shadow: 0 0 10px rgba(0,255,255,.55), 0 0 18px rgba(0,255,255,.35); } }

@media (prefers-reduced-motion: reduce){
  #hud-preloader .hud-ring,
  #hud-preloader .hud-ring-dashed,
  #hud-preloader .hud-hex,
  #hud-preloader .hud-hex-inner::after,
  #hud-preloader .hud-scan,
  #hud-preloader::before,
  #hud-preloader .hud-progress-fill{
    animation: none !important;
  }
}