.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
.blob-1 { width: 720px; height: 720px; left: -180px; top: -260px; background: radial-gradient(circle, var(--blob-1), transparent 68%); animation: blob-a 22s ease-in-out infinite alternate; }
.blob-2 { width: 640px; height: 640px; right: -160px; top: 60px; background: radial-gradient(circle, var(--blob-2), transparent 68%); animation: blob-b 26s ease-in-out infinite alternate; }
.blob-3 { width: 520px; height: 520px; left: 35%; bottom: -260px; background: radial-gradient(circle, var(--blob-3), transparent 68%); animation: blob-c 30s ease-in-out infinite alternate; }
@keyframes blob-a { to { transform: translate(160px, 120px) scale(1.15); } }
@keyframes blob-b { to { transform: translate(-140px, 90px) scale(.9); } }
@keyframes blob-c { to { transform: translate(-120px, -140px) scale(1.2); } }

.hero h1 { position: relative; }
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .word-inner { display: inline-block; transform: translateY(105%); animation: word-up .9s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 120ms + 150ms); will-change: transform; }
@keyframes word-up { to { transform: none; } }

.name-shine { position: absolute; inset: 0; pointer-events: none; }
.name-shine-band {
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%; overflow: hidden;
  transform: translateX(-100%); will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
}
.name-shine-text {
  position: absolute; top: 0; left: 0; width: 250%; height: 100%;
  transform: translateX(40%); will-change: transform;
  background: linear-gradient(90deg, #c8996b, #f3d3a8 50%, #c8996b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.name-shine-text::before { content: attr(data-text); }
.hero h1.is-shining .name-shine-band { animation: shine-band 1.5s cubic-bezier(.45, 0, .55, 1); }
.hero h1.is-shining .name-shine-text { animation: shine-text 1.5s cubic-bezier(.45, 0, .55, 1); }
@keyframes shine-band { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes shine-text { from { transform: translateX(40%); } to { transform: translateX(-100%); } }

.js .eyebrow-typed { min-height: 1.6em; }
.js .eyebrow-typed .typed-static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.typed::after { content: ""; display: inline-block; width: 3px; height: 1.05em; margin-left: 4px; vertical-align: -.15em; background: var(--gold); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.typed.is-typing::after { animation: none; }

.photo-card { animation: float 7s ease-in-out infinite; will-change: transform; }
@keyframes float { 50% { transform: translateY(-10px); } }

.hero-photo { perspective: 1000px; }
.photo-frame {
  position: relative; z-index: 1; overflow: hidden; border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow); transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform;
}
.hero-photo .photo-frame img { box-shadow: none; border-radius: 0; }
.hero-photo::before { transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.hero-photo.is-tilting .photo-frame { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02); transition-duration: .12s; }
.hero-photo.is-tilting::before { transform: translate(calc(22px - var(--tx, 0px)), calc(22px - var(--ty, 0px))); transition-duration: .12s; }
.photo-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-110%); will-change: transform;
}
.hero-photo:hover .photo-frame::after { animation: photo-shine 1s cubic-bezier(.45, 0, .55, 1); }
@keyframes photo-shine { to { transform: translateX(110%); } }

.stat-value { font-variant-numeric: tabular-nums; }
.stat { transition: border-color .3s; }
.stat:hover { border-top-color: var(--heading); }

.js .clients .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.js .clients .marquee-track { display: flex; width: max-content; animation: marquee 45s linear infinite; will-change: transform; }
.js .clients .marquee-track .client-list { flex-wrap: nowrap; padding-right: 34px; }
.js .clients .marquee:hover .marquee-track, .js .clients .marquee:focus-within .marquee-track { animation-play-state: paused; }
.client-list li { transition: color .2s; }
.client-list li:hover { color: var(--heading); }
@keyframes marquee { to { transform: translateX(-50%); } }

.focus-card {
  position: relative; overflow: hidden;
  filter: drop-shadow(0 0 0 rgba(20, 36, 58, 0));
  transition: transform .2s ease, filter .25s ease, border-color .25s;
}
.focus-card:hover { box-shadow: none; border-color: rgba(200, 153, 107, .55); filter: drop-shadow(0 14px 22px var(--hover-shadow)); }
.focus-card::before {
  content: ""; position: absolute; left: -210px; top: -210px; width: 420px; height: 420px; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(200, 153, 107, .22), transparent);
  transform: translate(var(--mx, -999px), var(--my, -999px)); opacity: 0; transition: opacity .3s; will-change: transform, opacity;
}
.focus-card:hover::before { opacity: 1; }
.focus-icon { transition: transform .5s cubic-bezier(.2, .8, .2, 1), background .3s, color .3s; }
.focus-card:hover .focus-icon { transform: rotate(-8deg) scale(1.12); background: var(--accent); color: var(--gold-on-navy); }

.js .section-title::after { width: 72px; transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .8, .2, 1) .15s; }
.js .section-title.is-drawn::after { transform: scaleX(1); }

.timeline::after {
  content: ""; position: absolute; left: 172px; top: 12px; bottom: 12px; width: 2px; background: var(--gold);
  transform-origin: top; transform: scaleY(var(--p, 0)); will-change: transform;
}
.timeline li::before { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); z-index: 1; }
.timeline li.is-visible::before { transform: scale(1.15); background: var(--gold); box-shadow: 0 0 0 6px rgba(200, 153, 107, .18); }

.js .skill-group .chips li { opacity: 0; transform: translateY(10px) scale(.92); transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1), border-color .2s, background .2s; transition-delay: calc(var(--i, 0) * 45ms); }
.js .skill-group.is-visible .chips li { opacity: 1; transform: none; }
.chips-lg li:hover { border-color: var(--gold); background: var(--gold-soft); }

.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-primary:hover::after { animation: btn-shine .9s ease; }
@keyframes btn-shine { to { transform: translateX(120%); } }
.btn.is-magnetic { transition: transform .2s ease-out, background .15s; will-change: transform; }

.scroll-progress {
  position: fixed; left: 0; top: 0; z-index: 60; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--gold), #e2b88d, var(--gold));
  transform-origin: left; transform: scaleX(var(--scroll, 0)); will-change: transform;
}

.contact::before { display: none; }
.contact-rings { position: absolute; right: -140px; top: -140px; width: 520px; height: 520px; pointer-events: none; }
.contact-rings span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(226, 184, 141, .35); will-change: transform; }
.contact-rings span:nth-child(1) { border-style: dashed; animation: spin 60s linear infinite; }
.contact-rings span:nth-child(2) { inset: 70px; border-color: rgba(226, 184, 141, .25); animation: spin 40s linear infinite reverse; border-top-color: #e2b88d; }
.contact-rings span:nth-child(3) { inset: 150px; border-color: rgba(255, 255, 255, .12); animation: pulse 5s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .5; } }

.project {
  position: relative; overflow: hidden; border-top: 1px solid var(--line);
  filter: drop-shadow(0 0 0 rgba(20, 36, 58, 0));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}
.project::before {
  content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 5px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, var(--gold) 75%, #e2b88d 100%);
  transform: translateX(0); transition: transform .6s cubic-bezier(.45, 0, .55, 1); will-change: transform;
}
.project:hover { transform: translateY(-6px); box-shadow: none; filter: drop-shadow(0 16px 24px var(--hover-shadow)); }
.project:hover::before { transform: translateX(-50%); }

.btn-cv {
  --gold-1: #9c6e2a; --gold-2: #b8893f; --gold-3: #c99a45; --gold-4: #e8c574; --gold-5: #f6e29a; --gold-6: #fff3c4;
  --metal: linear-gradient(115deg, var(--gold-2) 0%, var(--gold-5) 18%, var(--gold-3) 36%, var(--gold-6) 50%, var(--gold-2) 63%, var(--gold-4) 80%, var(--gold-2) 100%);
  position: relative; isolation: isolate; overflow: visible;
  border: 0; padding: 0 30px; background: var(--surface); color: var(--heading);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .35s ease;
}
.btn-cv > .cv-icon, .btn-cv > .cv-label, .btn-cv > .btn-meta { position: relative; z-index: 3; }
.btn-cv .cv-icon { display: inline-grid; place-items: center; color: var(--gold-ink); transition: color .35s; }
.btn-cv .btn-meta { transition: background .35s, color .35s; }

.cv-glow {
  position: absolute; inset: 0; z-index: -1; border-radius: 999px; pointer-events: none;
  box-shadow: 0 10px 34px -8px rgba(214, 168, 80, .65), 0 0 22px rgba(246, 226, 154, .35);
  opacity: 0; transition: opacity .45s ease;
}

.cv-fill {
  position: absolute; inset: 0; z-index: 1; border-radius: 999px; overflow: hidden; pointer-events: none;
  background: var(--metal); opacity: 0; transition: opacity .45s ease;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -3px 8px rgba(110, 72, 18, .38), inset 0 0 0 1px rgba(255, 240, 190, .35);
}
.cv-sheen {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
  translate: -130% 0; will-change: translate;
}

.cv-ring {
  position: absolute; inset: 0; z-index: 2; border-radius: 999px; overflow: hidden; pointer-events: none;
  padding: 2px; background: var(--metal);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.cv-ring::before,
.cv-ring::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; margin: -130% 0 0 -130%;
  background: conic-gradient(from 0deg, transparent 0deg 290deg, rgba(255, 252, 235, .0) 290deg, rgba(255, 252, 235, .95) 335deg, #fff 345deg, transparent 360deg);
  will-change: rotate;
}
.cv-ring::before { animation: cv-orbit 6s linear infinite; }
.cv-ring::after { opacity: 0; animation: cv-orbit 1.6s linear infinite; transition: opacity .4s; }
@keyframes cv-orbit { to { rotate: 360deg; } }

.cv-twinkles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cv-twinkles i {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: radial-gradient(circle, #fff 0 26%, #fff8dc 40%, var(--gold-4) 70%, var(--gold-3) 100%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0; scale: 0; will-change: scale, opacity;
}
.cv-twinkles i:nth-child(1) { left: 6%;  top: 4%;  --d: 0s; }
.cv-twinkles i:nth-child(2) { left: 38%; top: -6%; --d: .45s; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.cv-twinkles i:nth-child(3) { left: 74%; top: 2%;  --d: .9s; }
.cv-twinkles i:nth-child(4) { left: 98%; top: 52%; --d: .25s; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.cv-twinkles i:nth-child(5) { left: 62%; top: 100%; --d: .65s; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.cv-twinkles i:nth-child(6) { left: 16%; top: 96%; --d: 1.1s; }
@keyframes cv-twinkle {
  0%, 100% { opacity: 0; scale: 0; rotate: 0deg; }
  45%      { opacity: 1; scale: 1.15; rotate: 45deg; }
  70%      { opacity: .85; scale: .7; rotate: 90deg; }
}

.cv-confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cv-p { position: absolute; top: 50%; }
.cv-p--rect { width: 7px; height: 12px; margin: -6px 0 0 -3.5px; border-radius: 1.5px; }
.cv-p--dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; }
.cv-p--star { width: 12px; height: 12px; margin: -6px 0 0 -6px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.cv-p--glitter { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fffbea; box-shadow: 0 0 6px 2px rgba(255, 236, 170, .9); }

.btn-cv:hover, .btn-cv:focus-visible { color: #2b1c07; }
.btn-cv:hover .cv-icon, .btn-cv:focus-visible .cv-icon { color: #4a3210; }
.btn-cv:hover .btn-meta, .btn-cv:focus-visible .btn-meta { background: #2b1c07; color: var(--gold-5); }
.btn-cv:hover .cv-fill, .btn-cv:focus-visible .cv-fill,
.btn-cv:hover .cv-glow, .btn-cv:focus-visible .cv-glow { opacity: 1; }
.btn-cv:hover .cv-ring::after, .btn-cv:focus-visible .cv-ring::after { opacity: 1; }
.btn-cv:hover .cv-sheen, .btn-cv:focus-visible .cv-sheen { animation: cv-sheen 2.2s cubic-bezier(.45, 0, .55, 1) .1s infinite; }
.btn-cv:hover .cv-twinkles i { animation: cv-twinkle 1.5s ease-in-out var(--d) infinite; }
@keyframes cv-sheen { 0% { translate: -130% 0; } 55%, 100% { translate: 300% 0; } }
.btn-cv:active { transform: translateY(0) scale(.98); transition-duration: .1s; }

@media (max-width: 640px) {
  .timeline::after { left: 6px; }
  .contact-rings { display: none; }
}

.wave { display: inline-block; transform-origin: 70% 80%; }
.wave.is-waving { animation: wave 2s ease-in-out .3s; }
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(16deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wave.is-waving { animation: none; }
  .blob, .photo-card, .contact-rings span, .typed::after { animation: none !important; }
  .hero h1 .word-inner { animation: none; transform: none; }
  .name-shine { display: none; }
  .js .clients .marquee-track { animation: none; flex-wrap: wrap; }
  .js .clients .marquee-track .client-list:last-child { display: none; }
  .js .clients .marquee-track .client-list { flex-wrap: wrap; }
  .js .clients .marquee { -webkit-mask-image: none; mask-image: none; }
  .js .skill-group .chips li { opacity: 1; transform: none; transition: none; }
  .js .section-title::after { transform: none; transition: none; }
  .hero-photo:hover .photo-frame::after, .btn-primary:hover::after { animation: none; }
  .timeline::after { transform: scaleY(1); }
  .project, .project:hover { transform: none; }
  .cv-ring::before, .cv-ring::after, .btn-cv:hover .cv-sheen, .btn-cv:hover .cv-twinkles i { animation: none !important; }
  .cv-confetti { display: none; }
}