.bg-iframe.landing {
  pointer-events: none;
}

#space-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: #000;
  touch-action: none;
  pointer-events: none;
}

@media (pointer: coarse) {
  /* Let scrolling feel normal on touch devices and prevent touch-driven "camera" movement. */
  #space-canvas {
    touch-action: pan-y;
  }
}

.landing-page .bg-overlay {
  background: radial-gradient(circle at top, rgba(20, 30, 60, 0.18), rgba(7, 9, 20, 0.45));
}

.landing-page .hud,
.landing-page .glass {
  backdrop-filter: blur(10px);
}

.landing-page .glass {
  background: rgba(10, 16, 32, 0.42);
  border-color: rgba(114, 170, 255, 0.16);
  box-shadow: 0 10px 26px rgba(3, 8, 22, 0.32);
}

.hero-avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(102, 224, 255, 0.6);
  object-fit: cover;
  object-position: 50% 66%;
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(102, 224, 255, 0.4);
}

.hero-accent {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-accent-line {
  height: 2px;
  flex: 1;
  background: linear-gradient(90deg, rgba(102, 224, 255, 0.7), transparent);
}

.hero-card--primary {
  padding: 32px;
  gap: 20px;
}

.hero-card--secondary {
  padding: 22px;
  gap: 12px;
  font-size: 1.22rem;
  text-align: left;
  align-content: start;
}

.hero-card--secondary p + p {
  margin-top: 18px;
}


.hero-card--secondary .section-title {
  margin-bottom: 10px;
}

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: center;
}

.about-media {
  min-height: 160px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(102, 224, 255, 0.25), rgba(164, 123, 255, 0.2));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 10px 0;
}

.about-text {
  padding: 28px;
}

.draftworks-line {
  font-size: 1.12rem;
  margin-top: 8px;
}

.accent-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  transition: transform 0.2s ease;
  text-align: center;
}

.accent-thumb {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  border: 1px solid rgba(114, 170, 255, 0.35);
  background: linear-gradient(135deg, rgba(96, 214, 255, 0.35), rgba(164, 123, 255, 0.3));
  box-shadow: 0 8px 20px rgba(6, 12, 26, 0.35);
  object-fit: cover;
  object-position: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.accent-card:hover .accent-thumb {
  transform: scale(1.18);
  box-shadow: 0 12px 26px rgba(6, 12, 26, 0.45);
}

.tech-marquee {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.tech-track {
  display: flex;
  gap: 24px;
  align-items: center;
}

.tech-item {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  border: 1px solid rgba(114, 170, 255, 0.25);
  background-color: rgba(6, 12, 26, 0.3);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.tech-item.tech-python { background-image: url('../assets/icons/python.svg'); }
.tech-item.tech-c { background-image: url('../assets/icons/c.svg'); }
.tech-item.tech-javascript { background-image: url('../assets/icons/javascript.svg'); }
.tech-item.tech-typescript { background-image: url('../assets/icons/typescript.svg'); }
.tech-item.tech-java { background-image: url('../assets/icons/java.svg'); }
.tech-item.tech-bash { background-image: url('../assets/icons/bash.svg'); }
.tech-item.tech-react { background-image: url('../assets/icons/react.svg'); }
.tech-item.tech-nodejs { background-image: url('../assets/icons/nodejs.svg'); }
.tech-item.tech-spring { background-image: url('../assets/icons/spring.svg'); }
.tech-item.tech-postgresql { background-image: url('../assets/icons/postgresql.svg'); }
.tech-item.tech-mysql { background-image: url('../assets/icons/mysql.svg'); }
.tech-item.tech-azure { background-image: url('../assets/icons/azure.svg'); }
.tech-item.tech-flask { background-image: url('../assets/icons/flask.svg'); }
.tech-item.tech-scikitlearn { background-image: url('../assets/icons/scikitlearn.svg'); }

.tech-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(102, 224, 255, 0.55), rgba(164, 123, 255, 0.4));
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}

.tech-item:hover {
  transform: scale(1.25);
  z-index: 1;
}

.about-media:hover .tech-marquee {
  cursor: pointer;
}

.about-text p + p {
  margin-top: 12px;
}