/* ==========================================================================
   SECTIONS.CSS — Sprint 2
   Journey · About · Craft · Work · Education · Contact · Footer
   Reskinned to inherit the Hero's Neo-Futuristic Premium language:
   glassmorphic cards, soft gradients, consistent radius, generous
   whitespace, restrained color. No structural/markup changes from
   Sprint 1 — every selector below targets the same HTML.
   ========================================================================== */

/* ==========================================================================
   SHARED UTILITIES
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--space-md);
}

.eyebrow__line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gradient-accent-2);
}

/* Gradient accent word — the same treatment as the Hero's "Rozan,"
   applied once per section heading for typographic rhythm continuity. */
.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Generic scroll-triggered reveal, driven by sections.js toggling
   `is-visible` on elements carrying [data-reveal]. Lift + fade reads
   as "Framer motion language" rather than the old pure blur-fade. */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), filter 800ms var(--ease-out);
  filter: blur(2px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-reveal="mask"] {
  opacity: 1;
  filter: none;
  transform: none;
  overflow: hidden;
  transition: none;
}

[data-reveal="mask"] > .mask-line {
  display: block;
  transform: translateY(115%);
  transition: transform 1000ms var(--ease-out);
}

[data-reveal="mask"].is-visible > .mask-line {
  transform: translateY(0);
}

section[id] {
  scroll-margin-top: var(--nav-height);
}

/* ==========================================================================
   STATS
   A compact credibility band between Hero and Journey — four glass
   cards, gradient numerals, counters animate in once on scroll.
   ========================================================================== */

.stats {
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.stats__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.stats__item:hover {
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
  transform: translateY(-3px);
}

.stats__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.stats__value--infinite {
  animation: statsInfinitePulse 2.6s ease-in-out infinite;
}

.stats__label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--stone);
}

/* ==========================================================================
   01 · JOURNEY
   A vertical stack of glass cards along a gradient spine — the
   Linear/product-changelog pattern: each milestone is its own modern
   card, not a plain divided list.
   ========================================================================== */

.journey {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

.journey__intro {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

.journey__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--soft-white);
  margin-bottom: var(--space-md);
}

.journey__lede {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--stone);
  max-width: 52ch;
}

.journey__list {
  position: relative;
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.journey__list::before {
  content: '';
  position: absolute;
  left: 44px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--glass-border-strong) 8%, var(--glass-border-strong) 92%, transparent);
}

.journey__item {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-radius: var(--radius-lg);
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  border: 1px solid transparent;
}

.journey__item:hover {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  transform: translateY(-2px);
}

.journey__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--glass-border-strong);
  line-height: 1;
  padding-left: var(--space-md);
  transition: -webkit-text-stroke-color var(--dur-med) var(--ease-out);
}

.journey__item:hover .journey__number {
  -webkit-text-stroke-color: var(--aurora-blue);
}

.journey__node {
  position: absolute;
  left: 40px;
  top: var(--space-md);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-main);
  border: 1px solid var(--aurora-blue);
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

.journey__item:hover .journey__node {
  background: var(--gradient-accent-2);
  transform: scale(1.3);
}

.journey__content {
  max-width: 60ch;
}

.journey__year {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aurora-blue);
  margin-bottom: var(--space-xs);
}

.journey__heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--soft-white);
  margin-bottom: var(--space-xs);
  transition: transform var(--dur-med) var(--ease-out);
}

.journey__item:hover .journey__heading {
  transform: translateX(4px);
}

.journey__text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--stone);
}

/* ==========================================================================
   02 · ABOUT
   Sticky glass portrait card + flowing text column. Values become a
   pair of modern cards instead of plain top-bordered text.
   ========================================================================== */

.about {
  background: var(--bg-surface);
  padding: var(--space-2xl) var(--space-lg);
}

.about__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: var(--space-xl);
  align-items: start;
}

.about__editorial {
  display: flex;
  flex-direction: column;
}

.about__portrait {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.about__portrait-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, rgba(76, 130, 255, 0.16), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(139, 92, 246, 0.12), transparent 55%),
    var(--bg-elevated);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-card);
}

.about__portrait-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.about__portrait-caption {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--stone);
  padding-left: var(--space-xs);
}

.about__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--soft-white);
  max-width: 16ch;
  margin-bottom: var(--space-lg);
}

.about__quote {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  color: var(--marble);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--aurora-blue);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: 0 0 var(--space-lg);
  max-width: 46ch;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 62ch;
  margin-bottom: var(--space-xl);
}

.about__body p {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--stone);
}

.about__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.about__value {
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  padding: var(--space-md);
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

.about__value:hover {
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
  transform: translateY(-3px);
}

.about__value-mark {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--aurora-blue);
  margin-bottom: var(--space-sm);
}

.about__value h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--soft-white);
  margin-bottom: var(--space-xs);
}

.about__value p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--stone);
}

/* ---------------------------------------------------------------------
   Personal Information — biodata glass card
   --------------------------------------------------------------------- */

.about__biodata {
  margin-top: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  padding: var(--space-lg);
  transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

.about__biodata:hover {
  border-color: var(--glass-border-strong);
}

.about__biodata-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--soft-white);
  margin-bottom: var(--space-md);
}

.about__biodata-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}

.about__biodata-row dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aurora-blue);
  margin-bottom: 0.3rem;
}

.about__biodata-row dd {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--marble);
  margin: 0;
}

.about__biodata-interests {
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
}

.about__biodata-interests-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aurora-blue);
  margin-bottom: var(--space-sm);
}

.about__biodata-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.about__biodata-tags li {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--marble);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.85rem;
}

/* ==========================================================================
   02B · PHILOSOPHY
   A quiet, centered statement — the calmest section on the page by
   design, a beat of stillness between About and Craft.
   ========================================================================== */

.philosophy {
  padding: var(--space-xl) var(--space-lg);
}

.philosophy__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.philosophy__inner .eyebrow {
  justify-content: center;
}

.philosophy__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--soft-white);
  margin-bottom: var(--space-lg);
}

.philosophy__card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  padding: var(--space-lg);
  overflow: hidden;
}

.philosophy__mark {
  position: absolute;
  top: -0.5rem;
  left: var(--space-md);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.35;
  pointer-events: none;
}

.philosophy__text {
  position: relative;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--marble);
}

/* ==========================================================================
   03 · CRAFT / SKILLS
   Individual glass cards in a real grid (gap, not a hairline mesh),
   each lifting gently on hover/open.
   ========================================================================== */

.craft {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

.craft__intro {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

.craft__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  letter-spacing: -0.01em;
  color: var(--soft-white);
  margin-bottom: var(--space-md);
}

.craft__lede {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--stone);
  max-width: 52ch;
}

.craft__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.skill-module {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  position: relative;
  --mx: 50%;
  --my: 50%;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.skill-module::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(76, 130, 255, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.skill-module:hover::before,
.skill-module[open]::before {
  opacity: 1;
}

.skill-module:hover,
.skill-module[open] {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  transform: translateY(-3px);
}

.skill-module__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  list-style: none;
  padding: var(--space-xs) 0;
}

.skill-module__head::-webkit-details-marker {
  display: none;
}

.skill-module__index {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--aurora-blue);
}

.skill-module__name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--soft-white);
}

.skill-module__chevron {
  position: relative;
  width: 14px;
  height: 14px;
}

.skill-module__chevron::before,
.skill-module__chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: var(--stone);
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.skill-module__chevron::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.skill-module__chevron::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.skill-module[open] .skill-module__chevron::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.skill-module[open] .skill-module__chevron::before,
.skill-module[open] .skill-module__chevron::after {
  background: var(--aurora-blue);
}

.skill-module__body {
  padding-top: var(--space-sm);
  animation: skillBodyIn 480ms var(--ease-out);
}

@keyframes skillBodyIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.skill-module__body p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--stone);
  margin-bottom: var(--space-sm);
}

.skill-module__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.skill-module__tags li {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--marble);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.85rem;
}

/* ==========================================================================
   04 · FEATURED PROJECTS
   Large glass showcase cards, alternating layout, gradient window-
   chrome and index numerals — evidence of shipped work, product-card
   framing instead of an editorial case study.
   ========================================================================== */

.work {
  background: var(--bg-surface);
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.work__intro {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-xl);
}

.work__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  letter-spacing: -0.01em;
  color: var(--soft-white);
}

.project {
  max-width: var(--container-max);
  margin: 0 auto var(--space-lg);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-xl);
  align-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

.project:hover {
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
}

.project--left {
  grid-template-columns: 1.05fr 1fr;
}

.project--left .project__visual {
  order: 2;
}

.project--left .project__body {
  order: 1;
}

/* ---------- Presentation frame: window-chrome, not a screenshot ---------- */

.project__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  --mx: 50%;
  --my: 50%;
  background:
    radial-gradient(320px circle at var(--mx) var(--my), rgba(76, 130, 255, 0.14), transparent 65%),
    radial-gradient(circle at 75% 20%, rgba(139, 92, 246, 0.14), transparent 55%),
    var(--bg-elevated);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 900ms var(--ease-out);
}

.project:hover .project__frame {
  transform: scale(1.01);
}

.project__frame-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.project__frame-chrome span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0.85;
}

.project__frame-chrome span:nth-child(1) { background: var(--aurora-blue); }
.project__frame-chrome span:nth-child(2) { background: var(--aurora-violet); }
.project__frame-chrome span:nth-child(3) { background: var(--aurora-teal); }

.project__frame-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project__frame-index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.6rem;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.55;
  line-height: 1;
}

.project__frame-caption {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--glass-border);
  font-family: monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--stone);
}

/* ---------- Content: title dominant, metadata quiet ---------- */

.project__heading {
  margin-bottom: var(--space-md);
}

.project__meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aurora-blue);
  margin-bottom: 0.6rem;
}

.project__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--soft-white);
}

.project__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.4rem;
}

.project__problem {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--stone);
  max-width: 52ch;
  margin-bottom: var(--space-lg);
}

.project__case {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-main);
  padding: var(--space-md);
  margin: 0 0 var(--space-lg);
  max-width: 52ch;
}

.project__case-row dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aurora-violet);
  margin-bottom: 0.3rem;
}

.project__case-row dd {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--stone);
  margin: 0;
}

.project__case-row code {
  font-family: monospace;
  font-size: 0.85em;
  color: var(--marble);
  background: var(--glass-bg-strong);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.project__outcome {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--marble);
  max-width: 52ch;
  margin-bottom: var(--space-lg);
}

.project__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--glass-border);
}

.project__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project__stack span {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--marble);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 0.32rem 0.7rem;
}

/* Secondary, quiet actions — the card is the focus, not the button */
.project__actions {
  display: flex;
  gap: var(--space-md);
}

.project__link {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--marble);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}

.project__link span {
  transition: transform var(--dur-fast) var(--ease-out);
}

.project__link:hover {
  color: var(--aurora-blue);
  gap: 0.6rem;
}

.project__link:hover span {
  transform: translateX(2px);
}

/* ==========================================================================
   05 · EDUCATION
   Simple glass row-cards — quieter than Journey, no nodes, no spine.
   ========================================================================== */

.education {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

.education__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--soft-white);
  margin-bottom: var(--space-xl);
  max-width: 20ch;
}

.education__card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  padding: var(--space-lg);
  transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

.education__card:hover {
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
}

.education__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-xl);
}

.education__row dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aurora-blue);
  margin-bottom: 0.35rem;
}

.education__row dd {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--soft-white);
  margin: 0;
}

/* ==========================================================================
   06 · CONTACT
   Centered close, with a real glass form panel and gradient submit —
   a product contact card rather than editorial underline inputs.
   ========================================================================== */

.contact {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(76, 130, 255, 0.08), transparent 60%),
    var(--bg-surface);
  padding: var(--space-2xl) var(--space-lg);
}

.contact__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.contact .eyebrow {
  justify-content: center;
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.01em;
  color: var(--soft-white);
  margin-bottom: var(--space-md);
}

.contact__lede {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--stone);
  max-width: 52ch;
  margin: 0 auto var(--space-xl);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-lg);
  text-align: left;
  margin-top: var(--space-lg);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}

.field {
  position: relative;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--soft-white);
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 1.4rem 1rem 0.6rem;
  resize: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.field textarea {
  padding-top: 1.5rem;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--aurora-blue);
  background: var(--bg-elevated);
}

.field label {
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  font-size: 0.98rem;
  color: var(--stone);
  pointer-events: none;
  transition: transform var(--dur-med) var(--ease-out), font-size var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-out);
  transform-origin: left top;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-0.6rem);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--aurora-blue);
}

.field__line {
  display: none;
}

.contact__submit {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.contact__status {
  font-size: 0.85rem;
  color: var(--aurora-teal);
  min-height: 1.2em;
}

.contact__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}

.contact__meta-block {
  display: flex;
  flex-direction: column;
}

.contact__meta-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aurora-blue);
  margin-bottom: 0.4rem;
}

.contact__meta-value {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  color: var(--marble);
  transition: color var(--dur-fast) var(--ease-out);
}

a.contact__meta-value:hover {
  color: var(--aurora-blue);
}

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--aurora-blue);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.contact__socials {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.contact__socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--marble);
  width: fit-content;
  position: relative;
  transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.contact__socials a:hover {
  color: var(--aurora-blue);
}

.contact__socials a:hover .icon {
  transform: translateY(-1px) scale(1.08);
}

/* ==========================================================================
   07 · FOOTER
   Quiet closure, gradient hairline top border.
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--glass-border);
  padding: var(--space-xl) var(--space-lg);
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 60%);
  height: 1px;
  background: var(--gradient-accent);
  opacity: 0.6;
}

/* ---------- Footer atmosphere ----------
   z-index: -1 (rather than the default 0) so it paints behind the
   normal-flow .site-footer__inner content instead of on top of it;
   overflow: hidden is scoped to this wrapper alone so the ::before
   hairline above (which sits at top: -1px, just outside the footer's
   own box) is never clipped. */

.site-footer__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.site-footer__glow {
  position: absolute;
  bottom: -30%;
  width: 34vw;
  height: 34vw;
  max-width: 480px;
  max-height: 480px;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform, opacity;
}

.site-footer__glow--a {
  left: 15%;
  background: radial-gradient(circle at 45% 45%, rgba(76, 130, 255, 0.22), transparent 70%);
  animation: footerGlowDriftA 20s ease-in-out infinite;
}

.site-footer__glow--b {
  right: 12%;
  background: radial-gradient(circle at 55% 45%, rgba(45, 212, 191, 0.16), transparent 70%);
  animation: footerGlowDriftB 26s ease-in-out infinite;
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.site-footer__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--gradient-accent-2);
}

.site-footer__socials {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--stone);
  /* --magnet-x/--magnet-y come from js/interactions.js; default 0px keeps
     the hover-lift below as the only motion when JS is disabled. */
  transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.site-footer__socials a .icon {
  color: currentColor;
}

.site-footer__socials a:hover {
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
  color: var(--aurora-blue);
  transform: translate3d(var(--magnet-x, 0px), calc(-2px + var(--magnet-y, 0px)), 0);
}

.site-footer__quote {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--marble);
  opacity: 0.8;
}

.site-footer__copy {
  font-size: 0.78rem;
  color: var(--stone);
  letter-spacing: 0.02em;
}