/* Reveal-on-scroll motion and visual polish. Content stays visible without JavaScript. */
.reveal,
.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item:nth-child(2) { transition-delay: 90ms; }
.reveal-item:nth-child(3) { transition-delay: 180ms; }

body {
  background-image:
    radial-gradient(ellipse at 50% -18rem, rgba(56, 189, 248, 0.12), transparent 42rem),
    radial-gradient(ellipse at 100% 58rem, rgba(56, 189, 248, 0.045), transparent 32rem);
  background-attachment: fixed;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -12%;
  width: min(52vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(56, 189, 248, 0.08);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.075), transparent 68%);
  content: "";
  pointer-events: none;
}

.hero::after {
  position: absolute;
  z-index: -1;
  top: 16%;
  right: 2%;
  width: min(38vw, 390px);
  aspect-ratio: 1;
  border: 1px solid rgba(56, 189, 248, 0.06);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.hero > * { position: relative; }

.eyebrow {
  border-radius: 999px;
  padding-inline: 0.85rem;
  letter-spacing: 0.045em;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.08);
}

h1 {
  text-wrap: balance;
  background: linear-gradient(110deg, #f3f7fb 8%, #c7eafa 62%, #91d9f7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-heading { position: relative; }
.section-heading h2::after {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.38em;
  border-radius: 2px;
  background: var(--accent);
  content: "";
  transform: translateY(-0.02em);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
}

.info-card,
.project-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(68, 78, 94, 0.42);
  background: linear-gradient(145deg, rgba(24, 28, 36, 0.96), rgba(17, 20, 26, 0.96));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.info-card::before,
.project-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.34), transparent);
  content: "";
  opacity: 0.6;
}

.info-card:hover,
.project-card:hover {
  border-color: rgba(56, 189, 248, 0.46);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), 0 0 28px rgba(56, 189, 248, 0.055);
}

.project-mark {
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 6px 18px rgba(56, 189, 248, 0.06);
}

.tags span {
  border: 1px solid rgba(68, 78, 94, 0.35);
  background: rgba(12, 13, 16, 0.58);
}

.contact-link {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, rgba(24, 28, 36, 0.92), rgba(17, 20, 26, 0.92));
}

.contact-link::after {
  color: var(--accent);
  content: "↗";
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.contact-link:hover::after,
.contact-link:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

@media (max-width: 760px) {
  .hero::before { right: -45%; width: 75vw; }
  .hero::after { right: -22%; width: 58vw; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}