:root {
  /* Tinted neutrals — every step pulls slightly toward the gold hue (≈75°)
     so blacks read warm, not televisual. No #000 / #fff anywhere. */
  --bg:            oklch(13% 0.005 75);
  --bg-deep:       oklch(9%  0.004 75);
  --surface:       oklch(18% 0.007 75);
  --surface-2:     oklch(22% 0.009 75);
  --surface-3:     oklch(26% 0.011 75);
  --border:        oklch(28% 0.010 75);
  --border-strong: oklch(40% 0.014 75);

  --text:          oklch(96% 0.006 75);
  --text-soft:     oklch(86% 0.008 75);
  --text-muted:    oklch(66% 0.012 75);
  --text-faint:    oklch(48% 0.010 75);

  /* Gold — the brand commits here. Saturated mid, lighter highlight,
     deep shadow tone for inset edges. */
  --accent:        oklch(74% 0.135 80);
  --accent-2:      oklch(84% 0.145 85);
  --accent-3:      oklch(92% 0.090 88);
  --accent-deep:   oklch(50% 0.105 70);
  --on-accent:     oklch(18% 0.040 60);

  /* Cardio danger — desaturated below pure red so it sits with the gold. */
  --danger:        oklch(58% 0.215 18);
  --danger-2:      oklch(68% 0.235 22);
  --danger-deep:   oklch(40% 0.180 15);

  --radius:    20px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --shadow-card:
    0 1px 0 oklch(100% 0 0 / 0.04) inset,
    0 24px 48px -24px oklch(0% 0 0 / 0.8);
  --shadow-card-lift:
    0 1px 0 oklch(100% 0 0 / 0.06) inset,
    0 32px 64px -22px oklch(0% 0 0 / 0.9);

  /* Expo-out — Emil/Linear curve. Long deceleration, no overshoot.
     Built-in CSS easings are too weak; these have the punch UI needs. */
  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);   /* Emil's strong ease-out */
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);    /* expo */
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);  /* Emil's strong ease-in-out */
  --ease-drawer:     cubic-bezier(0.32, 0.72, 0, 1);   /* iOS feel — for press release */

  /* UI animations stay under 300ms. ease-out at 200ms feels faster than
     ease-in at 200ms because the user sees immediate movement. */
  --duration-press:   120ms;   /* press feedback — must be instant */
  --duration-fast:    180ms;
  --duration-normal:  240ms;   /* hover, focus, color */
  --duration-reveal:  640ms;   /* one-time entrance — can breathe */
  --duration-slow:    560ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 14px; border-radius: 8px; z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── BACKGROUND ────────────────────────────────────────────── */
.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: var(--bg);
}
.bg__image {
  position: absolute; inset: 0;
  background-image: url('assets/background.png');
  background-repeat: repeat;
  background-size: 520px auto;
  opacity: .35;
  filter: contrast(1.05);
}
.bg__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%,
      transparent 0%,
      oklch(9% 0.004 75 / 0.55) 70%,
      oklch(8% 0.003 75 / 0.88) 100%),
    linear-gradient(180deg,
      oklch(9% 0.004 75 / 0.18),
      oklch(8% 0.003 75 / 0.62));
}
.bg__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/></svg>");
  opacity: .06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── PAGE LAYOUT ───────────────────────────────────────────── */
.page {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 48px) clamp(16px, 5vw, 28px) 48px;
  padding-top: max(env(safe-area-inset-top), clamp(24px, 6vw, 48px));
  padding-bottom: max(env(safe-area-inset-bottom), 48px);
}

/* ── HERO ──────────────────────────────────────────────────── */
.hero { text-align: center; }

.profile { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.profile__photo {
  position: relative;
  width: 132px; height: 132px;
  border-radius: 50%;
  isolation: isolate;
  animation: profile-float 5.5s ease-in-out infinite;
}
/* Soft golden halo behind the photo — gives the floating feel */
.profile__photo::before {
  content: '';
  position: absolute;
  inset: -36px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%,
    oklch(86% 0.150 85 / 0.45) 0%,
    oklch(76% 0.140 80 / 0.28) 28%,
    oklch(74% 0.135 80 / 0.10) 55%,
    transparent 78%);
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
  animation: profile-glow 5.5s ease-in-out infinite;
}
@keyframes profile-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes profile-glow {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1;  }
}
.profile__photo img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}
/* Polished metal ring around the photo.
   Two layers, two timings, two senses of rotation:
     - Base conic carries the warm metal body (4 dim/bright zones).
     - ::after carries two sharp specular highlights at 90° and 270°,
       counter-rotating slowly under mix-blend-mode: screen.
   The non-multiple periods (26s vs 38s) mean the parallax never quite
   repeats, which is what sells "metal", not "spinning gif". */
.profile__ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;

  /* Warm gold body: two opposing dim troughs (0°, 180°) and two
     bright zones (90°, 270°). Brighter peaks pushed to ~88% lightness
     so the gold reads premium, not muted. */
  background: conic-gradient(
    from 0deg,
    oklch(58% 0.110 70 / 0.65)  0deg,
    oklch(76% 0.135 78 / 0.92) 45deg,
    oklch(88% 0.150 84 / 1.00) 90deg,
    oklch(76% 0.135 78 / 0.92) 135deg,
    oklch(58% 0.110 70 / 0.65) 180deg,
    oklch(76% 0.135 78 / 0.92) 225deg,
    oklch(88% 0.150 84 / 1.00) 270deg,
    oklch(76% 0.135 78 / 0.92) 315deg,
    oklch(58% 0.110 70 / 0.65) 360deg
  );

  /* Wider opaque band (89–99%) — the rim catches more light without
     losing the soft AA at both edges. */
  -webkit-mask: radial-gradient(circle,
    transparent 84%,
    oklch(0% 0 0) 89%,
    oklch(0% 0 0) 99%,
    transparent 100%);
          mask: radial-gradient(circle,
    transparent 84%,
    oklch(0% 0 0) 89%,
    oklch(0% 0 0) 99%,
    transparent 100%);

  animation: profile-spin 26s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Specular pass — two sharp highlights, screen-blended onto the metal,
   counter-rotating. Wider highlight arcs (50°→130° and 230°→310°)
   sweep more visibly across the rim without losing crispness. */
.profile__ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 50deg,
    oklch(99% 0.085 88 / 1.00) 90deg,
    transparent 130deg,
    transparent 230deg,
    oklch(96% 0.075 88 / 0.92) 270deg,
    transparent 310deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(circle,
    transparent 87%,
    oklch(0% 0 0) 91%,
    oklch(0% 0 0) 98%,
    transparent 100%);
          mask: radial-gradient(circle,
    transparent 87%,
    oklch(0% 0 0) 91%,
    oklch(0% 0 0) 98%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: profile-spin-rev 38s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@keyframes profile-spin {
  from { transform: translate3d(0, 0, 0) rotate(0deg);   }
  to   { transform: translate3d(0, 0, 0) rotate(360deg); }
}
@keyframes profile-spin-rev {
  from { transform: translate3d(0, 0, 0) rotate(0deg);    }
  to   { transform: translate3d(0, 0, 0) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .profile__ring,
  .profile__ring::after,
  .profile__photo,
  .profile__photo::before { animation: none !important; }
}

.profile__wordmark {
  width: clamp(220px, 60%, 320px);
  height: auto;
  margin-top: 6px;
  filter: drop-shadow(0 6px 18px oklch(0% 0 0 / 0.62));
}

.profile__handle {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profile__bio {
  margin: 6px auto 0;
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: balance;
}

/* ── SOCIALS ───────────────────────────────────────────────── */
.socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.social {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-press) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Hover gated to fine pointers — touch devices would otherwise hold
   sticky hover after every tap. Mobile-first means this matters. */
@media (hover: hover) and (pointer: fine) {
  .social:hover {
    background: var(--surface-2);
    border-color: oklch(74% 0.135 80 / 0.45);
    color: var(--accent-2);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px oklch(74% 0.135 80 / 0.45);
  }
}
/* Focus ring: hard line + soft outer glow. Designed, not browser-default. */
.social:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px oklch(74% 0.135 80 / 0.18);
}
/* Press: instant CSS feedback. .is-pressed kept as JS fallback for
   browsers/inputs where :active doesn't fire reliably. */
.social:active,
.social.is-pressed {
  transform: scale(.94);
  transition-duration: var(--duration-press);
}

/* ── LINKS / CARDS ─────────────────────────────────────────── */
/* Rhythm, not uniform gap. Featured card gets breathing room above and
   below; the two middle cards group tighter; the danger card breaks
   away from the gold cluster with a wider gap. */
.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 40px 0 32px;
}
.links > .card--featured { margin-bottom: 6px; }
.links > .card--cardio { margin-top: 14px; }

.card {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  /* Specify exact properties — never `transition: all`.
     Press uses its own (faster) timing below. */
  transition:
    transform var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-card);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Traveling specular highlight — only on fine-pointer hover.
   Decorative, so it can run longer (720ms) without feeling slow. */
.card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    oklch(100% 0 0 / 0.06) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 720ms var(--ease-out-strong);
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-2);
    box-shadow: var(--shadow-card-lift);
  }
  .card:hover::after { transform: translateX(100%); }
}

/* Focus ring — hard outline + soft accent halo. */
.card:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  box-shadow:
    var(--shadow-card-lift),
    0 0 0 6px oklch(74% 0.135 80 / 0.20);
}

/* Press: subtle scale, instant. Asymmetric — press is fast in, default
   transition handles the slower release back via ease-out. */
.card:active,
.card.is-pressed {
  transform: scale(.985);
  transition:
    transform var(--duration-press) var(--ease-out),
    border-color var(--duration-press) var(--ease-out),
    background var(--duration-press) var(--ease-out);
}

.card__media {
  position: relative;
  background:
    radial-gradient(120% 120% at 0% 0%, oklch(74% 0.135 80 / 0.20), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--bg-deep));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* Softer edge instead of a hard 1px border-stripe */
  box-shadow: inset -1px 0 0 oklch(0% 0 0 / 0.5),
              inset 1px 0 0 oklch(100% 0 0 / 0.02);
}
.card__media::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('assets/background.png');
  background-size: 220px auto;
  background-repeat: repeat;
  opacity: .22;
  mix-blend-mode: screen;
}
.card__media--logo::before { display: none; }
.card__media--cardio {
  background:
    radial-gradient(120% 120% at 30% 30%, var(--danger-2) 0%, var(--danger) 55%, var(--danger-deep) 100%);
}
.card__logo--full {
  width: 86%;
  max-width: 100px;
  height: auto;
  max-height: none;
  filter: drop-shadow(0 2px 8px oklch(0% 0 0 / 0.32));
  opacity: 1;
  transition: transform var(--duration-slow) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__logo--full { transform: scale(1.04); }
}

.card--cardio {
  border-color: oklch(58% 0.215 18 / 0.0);
  box-shadow:
    0 1px 0 oklch(72% 0.18 22 / 0.18) inset,
    0 0 0 1px oklch(58% 0.215 18 / 0.55),
    0 24px 48px -20px oklch(0% 0 0 / 0.85),
    0 0 36px -12px oklch(58% 0.215 18 / 0.38);
}
.card--cardio .card__tag { color: var(--text); }
.card--cardio .card__cta { color: oklch(88% 0.18 95); }
@media (hover: hover) and (pointer: fine) {
  .card--cardio:hover {
    box-shadow:
      0 1px 0 oklch(80% 0.18 22 / 0.25) inset,
      0 0 0 1px oklch(68% 0.235 22 / 0.75),
      0 30px 56px -20px oklch(0% 0 0 / 0.92),
      0 0 56px -12px oklch(58% 0.215 18 / 0.55);
  }
  .card--cardio:hover .card__cta { color: oklch(94% 0.16 95); }
}
.card--cardio:focus-visible {
  outline-color: oklch(78% 0.22 22);
  box-shadow:
    var(--shadow-card-lift),
    0 0 0 6px oklch(58% 0.215 18 / 0.22);
}
.card__logo {
  position: relative;
  width: auto;
  height: 44%;
  max-height: 52px;
  max-width: 60%;
  object-fit: contain;
  opacity: .94;
  filter: drop-shadow(0 2px 8px oklch(0% 0 0 / 0.5));
  transition: transform var(--duration-slow) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__logo { transform: scale(1.04); }
}

.card__sigil {
  position: relative;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 38px;
  color: oklch(96% 0.006 75 / 0.92);
  letter-spacing: -.02em;
  transform: rotate(-8deg);
  text-shadow: 0 4px 12px oklch(0% 0 0 / 0.6);
}
.card__tag {
  position: absolute;
  top: 10px; left: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--text-muted);
  text-transform: uppercase;
  z-index: 1;
}

.card__body {
  padding: 18px 20px 18px 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-width: 0;
}
.card__title {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 5.2vw, 26px);
  line-height: 1.04;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}
.card__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
  text-wrap: pretty;
}
.card__cta {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  transition:
    gap var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}
.card__cta svg {
  /* translate3d wins hardware accel even where transform might not. */
  transform: translate3d(0, 0, 0);
  transition: transform var(--duration-normal) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__cta { gap: 10px; }
  .card:hover .card__cta svg { transform: translate3d(3px, 0, 0); }
}
/* Mirror the CTA nudge on press for touch devices — without hover,
   tap is the only interaction and deserves its own micro-feedback. */
.card:active .card__cta svg,
.card.is-pressed .card__cta svg {
  transform: translate3d(2px, 0, 0);
  transition-duration: var(--duration-press);
}

/* Variants */
.card--featured {
  border-color: transparent;
  background:
    linear-gradient(180deg,
      oklch(20% 0.038 75) 0%,
      oklch(15% 0.028 75) 60%,
      oklch(11% 0.018 75) 100%);
  box-shadow:
    0 1px 0 oklch(84% 0.145 85 / 0.20) inset,
    0 0 0 1px oklch(74% 0.135 80 / 0.55),
    0 24px 48px -20px oklch(0% 0 0 / 0.85),
    0 0 48px -10px oklch(74% 0.135 80 / 0.22);
  position: relative;
}
/* Soft ambient gold halo bleed — not a hard outline */
.card--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    var(--accent-2) 0%,
    oklch(74% 0.135 80 / 0.20) 35%,
    transparent 55%,
    oklch(84% 0.145 85 / 0.42) 85%,
    var(--accent-2) 100%);
  -webkit-mask: linear-gradient(oklch(0% 0 0) 0 0) content-box, linear-gradient(oklch(0% 0 0) 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.card--featured .card__media {
  background:
    radial-gradient(120% 140% at 0% 0%, oklch(84% 0.145 85 / 0.38), transparent 60%),
    linear-gradient(180deg,
      oklch(28% 0.060 75) 0%,
      oklch(18% 0.035 75) 70%,
      oklch(11% 0.018 75) 100%);
  box-shadow: inset -1px 0 0 oklch(74% 0.135 80 / 0.22);
}
.card--featured .card__tag {
  color: var(--accent-2);
  letter-spacing: .26em;
}
.card--featured .card__cta { color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) {
  .card--featured:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 oklch(84% 0.145 85 / 0.28) inset,
      0 0 0 1px oklch(84% 0.145 85 / 0.72) inset,
      0 32px 64px -20px oklch(0% 0 0 / 0.92),
      0 0 72px -10px oklch(74% 0.135 80 / 0.40);
  }
}
.card--featured .card__sigil { color: var(--text); }

.card--accent {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-deep) 100%);
  color: var(--on-accent);
}
.card--accent .card__media {
  background:
    radial-gradient(120% 120% at 0% 0%, oklch(100% 0 0 / 0.22), transparent 60%),
    linear-gradient(180deg, oklch(64% 0.110 70), oklch(46% 0.085 70));
}
.card--accent .card__sigil {
  color: var(--on-accent);
  text-shadow: 0 2px 6px oklch(94% 0.06 90 / 0.45);
}
.card--accent .card__tag { color: oklch(18% 0.040 60 / 0.85); }
.card--accent .card__title { color: var(--on-accent); }
.card--accent .card__sub { color: oklch(18% 0.040 60 / 0.78); }
.card--accent .card__cta { color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .card--accent:hover { transform: translateY(-2px); border-color: var(--text); }
  .card--accent:hover .card__cta { color: var(--on-accent); }
}

/* ── FOOTER ────────────────────────────────────────────────── */
.foot {
  text-align: center;
  font-size: 11px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: 8px;
}
.foot p { margin: 0; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (min-width: 480px) {
  .card { grid-template-columns: 120px 1fr; }
  .card__sigil { font-size: 44px; }
}

@media (min-width: 720px) {
  .page { max-width: 600px; }
  .profile__photo { width: 152px; height: 152px; }
}

/* ── ENTRANCE CHOREOGRAPHY ─────────────────────────────────── */
/* Brand register permits orchestrated page-load. Single timeline,
   per-element personality. The blur unmask is Emil's bridge — the eye
   reads one smooth motion instead of compositing artifacts.

   Curve: ease-drawer (iOS) for that physical "settling" feel rather
   than abstract deceleration. */

/* Photo — focal moment. Scales in like a lens focusing, no Y translation.
   Slight blur unmask softens the pixel snap of the rotating ring. */
@keyframes reveal-photo {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.92);
    filter: blur(6px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

/* Wordmark / bio / socials / foot — translate up + opacity + brief blur. */
@keyframes reveal-text {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(3px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* Cards — translate up + scale up from 0.98. The combined motion makes
   them feel like they're settling into position from below, not just
   appearing flat. */
@keyframes reveal-card {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
    filter: blur(4px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

/* Featured card — slightly more pronounced. Mirrors hierarchy in design. */
@keyframes reveal-card-featured {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.96);
    filter: blur(5px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Initial state: opacity 0 prevents flash-before-animation. */
.profile__photo,
.profile__wordmark,
.profile__bio,
.socials .social,
.card,
.foot {
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* Hero stack — 80ms beat before the photo, then staggered reveals. */
.profile__photo {
  animation: reveal-photo var(--duration-reveal) var(--ease-drawer) 80ms both;
}
.profile__wordmark {
  animation: reveal-text var(--duration-reveal) var(--ease-drawer) 180ms both;
}
.profile__bio {
  animation: reveal-text 540ms var(--ease-drawer) 280ms both;
}

/* Socials — inner stagger. Each button settles in 40ms after the prior.
   Container stays static so flex layout doesn't shift mid-animation. */
.socials .social:nth-child(1) {
  animation: reveal-text 480ms var(--ease-drawer) 360ms both;
}
.socials .social:nth-child(2) {
  animation: reveal-text 480ms var(--ease-drawer) 400ms both;
}
.socials .social:nth-child(3) {
  animation: reveal-text 480ms var(--ease-drawer) 440ms both;
}

/* Cards — featured gets its own keyframe; rest use the standard one.
   Tight 70ms stagger between cards reads as a quick cascade. */
.links .card:nth-child(1) {
  animation: reveal-card-featured var(--duration-reveal) var(--ease-drawer) 520ms both;
}
.links .card:nth-child(2) {
  animation: reveal-card var(--duration-reveal) var(--ease-drawer) 590ms both;
}
.links .card:nth-child(3) {
  animation: reveal-card var(--duration-reveal) var(--ease-drawer) 660ms both;
}
.links .card:nth-child(4) {
  animation: reveal-card var(--duration-reveal) var(--ease-drawer) 730ms both;
}
.links .card:nth-child(5) {
  animation: reveal-card var(--duration-reveal) var(--ease-drawer) 800ms both;
}

/* Foot — last, opacity-only. Closes the timeline quietly. */
.foot {
  animation: reveal-fade 480ms var(--ease-out) 880ms both;
}

/* Reduced motion: keep opacity transitions (they aid comprehension),
   strip transforms, blurs, and ambient loops. Emil: reduced motion
   means fewer and gentler animations, not zero. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--duration-press) !important;
  }
  .profile__photo,
  .profile__wordmark,
  .profile__bio,
  .socials,
  .socials .social,
  .card,
  .foot {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }
  .card::after { display: none; }
  .profile__ring,
  .profile__photo,
  .profile__photo::before { animation: none !important; }
}