:root {
  --bg: #07070b;
  --surface: #0f0f15;
  --border: rgba(255,255,255,.08);
  --text-primary: #f3f4f6;
  --text-muted: #9ca3af;
  --accent: #4f46e5;
  --accent-green: #22c55e;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --forest-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --forest-body: Alegreya, "Iowan Old Style", Georgia, serif;
  --forest-sans: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --forest-bg: #070a08;
  --forest-ink: #f2efe4;
  --forest-soft: #bcc6b4;
  --forest-muted: #7d8877;
  --forest-line: rgba(226, 235, 209, .13);
  --forest-accent: #e8b86b;
  --forest-accent-rgb: 232, 184, 107;
  --vfx-violet: #e8b86b;
  --vfx-cyan: #8fe6ae;
  --vfx-warm: #f7d39a;
  --vfx-duration-orbit: calc(var(--forest-trails-duration-flow) + var(--forest-trails-duration-flow));
  --vfx-duration-orbit-reverse: calc(
    var(--forest-trails-duration-flow) + var(--forest-trails-duration-flow) +
    var(--forest-trails-duration-flow) + var(--duration-loop) + var(--duration-loop)
  );
  --vfx-delay-none: calc(var(--duration-fast) - var(--duration-fast));
}

.vfx-page { overflow: clip; }

.vfx-hero {
  min-height: calc(100svh - 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .62fr);
  align-items: center;
  gap: clamp(40px, 8vw, 110px);
}

.vfx-hero-copy { position: relative; }

.vfx-hero-copy::before {
  content: "01";
  position: absolute;
  z-index: -1;
  top: -90px;
  left: -28px;
  color: rgba(232,184,107, .04);
  font: 700 clamp(180px, 28vw, 390px)/1 var(--forest-display);
  letter-spacing: 0;
}

.vfx-hero h1 {
  max-width: 9ch;
  margin: 0;
  font: 650 clamp(68px, 12vw, 160px)/.9 var(--forest-display);
  letter-spacing: 0;
}

.vfx-role {
  max-width: 660px;
  margin: 30px 0 0;
  color: var(--forest-ink);
  font: 600 clamp(19px, 2.4vw, 26px)/1.42 var(--forest-display);
  letter-spacing: 0;
}

.vfx-subtitle {
  max-width: 540px;
  margin: 18px 0 0;
  color: var(--forest-soft);
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.6;
}

.vfx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.vfx-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid rgba(232,184,107,.45);
  border-radius: 999px;
  color: var(--forest-ink);
  background: rgba(232,184,107,.1);
  font: 700 11px/1 var(--forest-sans);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background var(--duration-scroll-state) var(--ease-standard),
    border-color var(--duration-scroll-state) var(--ease-standard);
}

.vfx-button:hover { border-color: var(--vfx-violet); background: rgba(232,184,107,.18); }
.vfx-button.secondary { border-color: var(--forest-line); background: rgba(255,255,255,.025); }

.vfx-portrait-wrap {
  position: relative;
  width: min(100%, 410px);
  justify-self: end;
  padding: 15px;
  border: 1px solid rgba(232,184,107,.26);
  border-radius: 42% 42% 26px 26px;
  background: linear-gradient(145deg, rgba(232,184,107,.13), rgba(143,230,174,.025));
  box-shadow: 0 50px 110px rgba(0,0,0,.42), 0 0 80px rgba(232,184,107,.08);
  transform: rotate(1.5deg);
}

.vfx-portrait-wrap::before,
.vfx-portrait-wrap::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(143,230,174,.18);
  border-radius: 50%;
  pointer-events: none;
  animation: vfx-orbit var(--vfx-duration-orbit) var(--ease-linear) infinite;
}
.vfx-portrait-wrap::before { inset: -32px; border-style: dashed; }
.vfx-portrait-wrap::after {
  inset: -62px;
  border-color: rgba(232,184,107,.08);
  animation-direction: reverse;
  animation-duration: var(--vfx-duration-orbit-reverse);
}

@keyframes vfx-orbit { to { transform: rotate(360deg); } }

.vfx-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 42% 42% 18px 18px;
  filter: saturate(.86) contrast(1.03);
}

.vfx-portrait-label {
  position: absolute;
  right: -12px;
  bottom: 26px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(143,230,174,.34);
  border-radius: 999px;
  background: rgba(4,8,6,.86);
  color: var(--vfx-cyan);
  font: 700 9px/1 var(--forest-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.vfx-section { margin-top: clamp(100px, 15vw, 190px); }

.vfx-section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 28px;
  margin-bottom: clamp(30px, 5vw, 58px);
}

.vfx-section-number {
  color: var(--vfx-violet);
  font: 700 11px/1 var(--forest-sans);
  letter-spacing: .18em;
}

.vfx-section-head h2 {
  margin: 0;
  font: 650 clamp(42px, 7.7vw, 94px)/.95 var(--forest-display);
  letter-spacing: 0;
}

.vfx-section-head p {
  grid-column: 2;
  max-width: 620px;
  margin: -10px 0 0;
  color: var(--forest-muted);
  font-size: 15px;
  line-height: 1.6;
}

.showreel-frame {
  position: relative;
  padding: 20px 20px 46px;
  border: 1px solid rgba(232,184,107,.22);
  border-radius: 28px;
  background: rgba(5,8,7,.88);
  box-shadow: 0 50px 110px rgba(0,0,0,.42);
}

.showreel-frame::before,
.showreel-frame::after {
  content: "····································";
  position: absolute;
  left: 22px;
  right: 22px;
  height: 16px;
  overflow: hidden;
  color: rgba(232,184,107,.28);
  font: 22px/8px monospace;
  letter-spacing: 11px;
  white-space: nowrap;
}
.showreel-frame::before { top: 1px; }
.showreel-frame::after { bottom: 18px; }

.video-ratio {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: #000;
}
.video-ratio iframe { width: 100%; height: 100%; border: 0; }

.showreel-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  color: var(--forest-muted);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.showreel-caption a { color: var(--vfx-cyan); text-decoration: none; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.work-card {
  overflow: hidden;
  border: 1px solid var(--forest-line);
  border-radius: 22px;
  background: rgba(7,12,9,.82);
  transition:
    border-color var(--duration-scroll-settle) var(--ease-standard),
    box-shadow var(--duration-scroll-settle) var(--ease-standard);
}
.work-card:hover { border-color: rgba(232,184,107,.42); box-shadow: 0 28px 64px rgba(0,0,0,.28); }
.work-card .video-ratio { border-radius: 0; }
.work-card-copy { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 20px; }
.work-card h3 { margin: 0; font: 650 clamp(20px, 2.2vw, 28px)/1.12 var(--forest-display); letter-spacing: 0; }
.work-card p { margin: 8px 0 0; color: var(--forest-muted); font-size: 12px; line-height: 1.4; }
.work-card a { align-self: center; color: var(--vfx-cyan); font: 700 10px/1 var(--forest-sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }

.about-grid {
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: clamp(36px, 8vw, 110px);
  align-items: start;
}
.about-aside { color: var(--vfx-violet); font: 700 11px/1.5 var(--forest-sans); letter-spacing: .16em; text-transform: uppercase; }
.about-copy p { margin: 0 0 24px; color: var(--forest-soft); font-size: clamp(20px, 2.8vw, 31px); line-height: 1.42; letter-spacing: 0; }

.timeline { position: relative; display: grid; gap: 18px; }
.timeline::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 17px; width: 1px; background: linear-gradient(var(--vfx-violet), rgba(232,184,107,.06)); }
.experience-card {
  position: relative;
  margin-left: 46px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--forest-line);
  border-radius: 22px;
  background: rgba(7,12,9,.78);
}
.experience-card::before { content: ""; position: absolute; top: 32px; left: -37px; width: 15px; height: 15px; border: 2px solid var(--vfx-violet); border-radius: 50%; background: #060a07; box-shadow: 0 0 18px rgba(232,184,107,.42); }
.experience-top { display: grid; grid-template-columns: 1fr auto; gap: 20px; }
.experience-role { margin: 0; font: 650 clamp(20px, 2.75vw, 29px)/1.15 var(--forest-display); letter-spacing: 0; }
.experience-company { margin-top: 7px; color: var(--vfx-violet); font-size: 13px; font-weight: 700; }
.experience-date { color: var(--forest-muted); font: 650 11px/1.4 var(--forest-sans); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.experience-location { display: block; margin-top: 4px; color: #657067; letter-spacing: 0; text-transform: none; }
.experience-description { max-width: 850px; margin: 22px 0 0; color: var(--forest-soft); font-size: 14px; line-height: 1.65; }
.experience-card ul { margin: 18px 0 0; padding-left: 18px; color: var(--forest-muted); font-size: 13px; line-height: 1.65; }
.experience-links, .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.experience-links a, .tag {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(232,184,107,.22);
  border-radius: 999px;
  color: var(--forest-soft);
  background: rgba(232,184,107,.05);
  font: 650 9px/1 var(--forest-sans);
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}
.experience-links a { color: var(--vfx-cyan); }

.games-collection { padding: clamp(24px, 4vw, 42px); }
.games-lede { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; }
.games-lede h3 { margin: 0; font: 650 clamp(33px, 5.5vw, 64px)/1 var(--forest-display); letter-spacing: 0; }
.games-lede p { max-width: 620px; margin: 16px 0 0; color: var(--forest-soft); font-size: 15px; line-height: 1.6; }
.games-lede a { color: var(--vfx-cyan); font: 700 10px/1 var(--forest-sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.games-collection summary { min-height: 46px; display: flex; align-items: center; gap: 10px; width: fit-content; margin-top: 28px; color: var(--forest-ink); cursor: pointer; font: 700 11px/1 var(--forest-sans); letter-spacing: .1em; text-transform: uppercase; }
.games-collection summary::marker { color: var(--vfx-violet); }
.games-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.game-link { min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 9px 12px; border: 1px solid rgba(213,239,215,.08); border-radius: 12px; color: var(--forest-soft); background: rgba(255,255,255,.018); font-size: 11px; line-height: 1.2; text-decoration: none; }
.game-link:hover { border-color: rgba(232,184,107,.35); color: var(--forest-ink); }
.game-link span { color: var(--forest-muted); font-size: 9px; }

.skills-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.skill-card { padding: clamp(22px, 3vw, 32px); }
.skill-card h3 { margin: 0 0 20px; color: var(--vfx-violet); font: 700 11px/1 var(--forest-sans); letter-spacing: .14em; text-transform: uppercase; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-list span { min-height: 32px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--forest-line); border-radius: 999px; color: var(--forest-soft); font-size: 11px; }

.language-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.language { padding: 18px; }
.language strong { display: block; font: 650 19px/1 var(--forest-display); }
.language span { display: block; margin-top: 9px; color: var(--forest-muted); font-size: 11px; }

.education-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.education-card { padding: clamp(22px,3vw,32px); }
.education-date { color: var(--vfx-violet); font: 700 10px/1 var(--forest-sans); letter-spacing: .1em; text-transform: uppercase; }
.education-card h3 { margin: 16px 0 7px; font: 650 24px/1.2 var(--forest-display); letter-spacing: 0; }
.education-card strong { color: var(--forest-soft); font-size: 13px; }
.education-card p { margin: 16px 0 0; color: var(--forest-muted); font-size: 13px; line-height: 1.6; }

.contact-panel { position: relative; overflow: hidden; padding: clamp(32px, 7vw, 82px); }
.contact-panel::after { content: ""; position: absolute; width: 420px; aspect-ratio: 1; right: -160px; top: -170px; border: 1px solid rgba(232,184,107,.18); border-radius: 50%; box-shadow: 0 0 90px rgba(232,184,107,.07); }
.contact-panel h2 { max-width: 9ch; margin: 0; font: 650 clamp(53px, 10vw, 118px)/.92 var(--forest-display); letter-spacing: 0; }
.contact-panel p { max-width: 540px; margin: 26px 0 0; color: var(--forest-soft); font-size: 17px; line-height: 1.6; }
.contact-links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Motion layer ─────────────────────────────────────────────── */

/* Hero entrance: the reel warms up — copy rises, the portrait grades in
   from ungraded footage to its final look. */
@media (prefers-reduced-motion: no-preference) {
  .vfx-hero-copy .forest-kicker {
    animation: vfx-rise var(--duration-slow) var(--ease-out) backwards;
  }
  .vfx-hero h1 {
    animation:
      vfx-rise var(--duration-hero) var(--ease-out)
      var(--delay-stagger-xs) backwards;
  }
  .vfx-role {
    animation:
      vfx-rise var(--duration-crown-enter) var(--ease-out)
      var(--delay-stagger-md) backwards;
  }
  .vfx-subtitle {
    animation:
      vfx-rise var(--duration-crown-enter) var(--ease-out)
      calc(var(--delay-stagger-md) + var(--stagger-list) + var(--stagger-list)) backwards;
  }
  .vfx-hero-actions {
    animation:
      vfx-rise var(--duration-crown-enter) var(--ease-out)
      var(--duration-normal) backwards;
  }
  .vfx-portrait-wrap {
    animation:
      vfx-develop var(--duration-highlight) var(--ease-out)
      var(--delay-hero-kicker) backwards;
  }
  .vfx-portrait {
    animation:
      vfx-grade calc(var(--duration-highlight) + var(--duration-slow))
      var(--ease-standard) var(--stagger-dot) backwards;
  }
}
@keyframes vfx-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes vfx-develop { from { opacity: 0; transform: scale(.955); } }
@keyframes vfx-grade {
  from { filter: saturate(0) contrast(1.25) brightness(.72); }
  to { filter: saturate(.86) contrast(1.03); }
}

/* Work cards: hover reads as picking the frame up — the card tips back,
   footage swells a step ahead of the copy, a glare crosses the frame. */
.work-grid { perspective: 1100px; }
.work-card {
  transition:
    border-color var(--duration-scroll-settle) var(--ease-standard),
    box-shadow var(--duration-scroll-settle) var(--ease-standard),
    transform var(--duration-spring) var(--ease-out);
}
.work-card:hover { transform: translateY(-5px) rotateX(1.5deg); }
.work-card .video-ratio {
  transition: transform var(--duration-recovery) var(--ease-out);
}
.work-card:hover .video-ratio { transform: scale(1.03); }
.work-card .video-ratio::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.1) 47%, transparent 62%);
  transform: translateX(-135%);
  transition: transform var(--duration-hero) var(--ease-standard);
}
.work-card:hover .video-ratio::after { transform: translateX(135%); }
.work-card-copy {
  transition: transform var(--duration-recovery) var(--ease-out);
}
.work-card:hover .work-card-copy { transform: translateY(-2px); }

/* Section children arrive on their own beats inside a revealed section. */
.reveal .work-card, .reveal .experience-card, .reveal .skill-card,
.reveal .education-card, .reveal .language {
  opacity: 0;
  translate: 0 22px;
  transition-property: opacity, translate, border-color, box-shadow, transform;
  transition-duration:
    var(--duration-slow), var(--duration-slow),
    var(--duration-scroll-settle), var(--duration-scroll-settle),
    var(--duration-spring);
  transition-timing-function:
    var(--ease-standard), var(--ease-out), var(--ease-standard),
    var(--ease-standard), var(--ease-out);
  transition-delay:
    var(--sd, var(--vfx-delay-none)), var(--sd, var(--vfx-delay-none)),
    var(--vfx-delay-none), var(--vfx-delay-none), var(--vfx-delay-none);
}
.reveal.is-visible .work-card, .reveal.is-visible .experience-card,
.reveal.is-visible .skill-card, .reveal.is-visible .education-card,
.reveal.is-visible .language {
  opacity: 1;
  translate: none;
}
.work-card:nth-child(2), .skill-card:nth-child(2), .education-card:nth-child(2), .language:nth-child(2) {
  --sd: var(--delay-stagger-xs);
}
.work-card:nth-child(3), .skill-card:nth-child(3), .language:nth-child(3) {
  --sd: var(--duration-scroll-state);
}
.work-card:nth-child(4), .skill-card:nth-child(4), .language:nth-child(4) {
  --sd: var(--duration-scroll-settle);
}
.work-card:nth-child(5), .skill-card:nth-child(5) {
  --sd: var(--duration-spring);
}
.work-card:nth-child(6), .skill-card:nth-child(6) {
  --sd: var(--duration-recovery);
}
.experience-card:nth-child(2) { --sd: var(--delay-stagger-xs); }
.experience-card:nth-child(3) { --sd: var(--delay-stagger-md); }
.experience-card:nth-child(4) { --sd: var(--delay-stagger-lg); }
.experience-card:nth-child(5) {
  --sd: calc(var(--delay-stagger-md) + var(--delay-stagger-md));
}
.experience-card:nth-child(6) { --sd: var(--duration-spring); }
.experience-card:nth-child(7) {
  --sd: calc(var(--delay-stagger-lg) + var(--delay-stagger-lg));
}
.experience-card:nth-child(n+8) { --sd: var(--duration-slow); }

/* The career line draws itself downward; each waypoint pops as its card lands. */
.reveal .timeline::before {
  transform: scaleY(0);
  transform-origin: top;
  transition:
    transform calc(var(--duration-hero) + var(--duration-slow))
    var(--ease-out) var(--delay-stagger-sm);
}
.reveal.is-visible .timeline::before { transform: scaleY(1); }
.reveal .experience-card::before {
  opacity: 0;
  scale: .3;
  transition:
    opacity var(--duration-spring) var(--ease-standard)
    calc(var(--sd, var(--vfx-delay-none)) + var(--duration-normal)),
    scale var(--duration-recovery) var(--spring)
    calc(var(--sd, var(--vfx-delay-none)) + var(--duration-normal));
}
.reveal.is-visible .experience-card::before { opacity: 1; scale: 1; }

/* Game collection: links ripple in when the drawer opens. */
details[open] .game-link {
  animation: game-pop var(--duration-recovery) var(--spring) backwards;
}
details[open] .game-link:nth-child(3n+2) {
  animation-delay: var(--delay-stagger-xs);
}
details[open] .game-link:nth-child(3n) {
  animation-delay: var(--duration-fast);
}
@keyframes game-pop { from { opacity: 0; transform: translateY(10px) scale(.95); } }

@media (max-width: 850px) {
  .vfx-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 50px; }
  .vfx-portrait-wrap { width: min(72vw, 360px); justify-self: center; order: -1; }
  .work-grid, .about-grid { grid-template-columns: 1fr; }
  .about-grid { gap: 20px; }
  .games-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .vfx-hero h1 { font-size: clamp(60px, 21vw, 100px); }
  .vfx-section-head { grid-template-columns: 1fr; gap: 10px; }
  .vfx-section-head p { grid-column: 1; margin-top: 0; }
  .experience-top { grid-template-columns: 1fr; }
  .experience-date { text-align: left; }
  .experience-card { margin-left: 34px; }
  .experience-card::before { left: -29px; }
  .timeline::before { left: 13px; }
  .games-lede { grid-template-columns: 1fr; }
  .games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .skills-grid, .education-grid { grid-template-columns: 1fr; }
  .language-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .showreel-frame { padding: 11px 11px 38px; }
  .showreel-caption { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal .work-card, .reveal .experience-card, .reveal .skill-card,
  .reveal .education-card, .reveal .language { opacity: 1; translate: none; }
  .reveal .timeline::before { transform: none; }
  .reveal .experience-card::before { opacity: 1; scale: 1; }
  .work-card:hover { transform: none; }
  .work-card:hover .video-ratio { transform: none; }
  .work-card .video-ratio::after { display: none; }
}