@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-latin.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@property --wild-start {
  syntax: '<color>';
  inherits: true;
  initial-value: #4322a8;
}
@property --wild-end {
  syntax: '<color>';
  inherits: true;
  initial-value: #921b90;
}
@property --wild-base {
  syntax: '<color>';
  inherits: true;
  initial-value: #302399;
}
@property --burst-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 80%;
}
@property --burst-y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 35%;
}

:root {
  color-scheme: dark;
  font-family: Manrope, sans-serif;
  color: #f3f1ed;
  background: #263cde;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --page-gutter: clamp(24px, 5.5vw, 100px);
  --page-height: max(720px, 100svh);
  --color-fade-duration: 8s;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }
::selection { background: #f3f1ed; color: #263cde; }

.page {
  position: relative;
  isolation: isolate;
  min-height: var(--page-height);
  overflow: hidden;
  background: radial-gradient(ellipse at 73% 44%, #5b6ef2 0, #384ce4 31%, transparent 65%), linear-gradient(125deg, #222fc5, #2c43e4 65%, #2a3ed1);
}
.page::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23noise)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.page::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(0deg, #0c123b70, transparent 65%), linear-gradient(90deg, #0c123b55, transparent 65%), radial-gradient(ellipse at var(--burst-x) var(--burst-y), var(--wild-start), transparent 65%), radial-gradient(ellipse at 55% 100%, var(--wild-end), transparent 75%), var(--wild-base);
  transition: opacity var(--color-fade-duration), --wild-start var(--color-fade-duration), --wild-end var(--color-fade-duration), --wild-base var(--color-fade-duration), --burst-x 24s, --burst-y 24s;
}
.wild-mode .page::before { opacity: 1; }
.header, .footer {
  position: absolute;
  z-index: 4;
  left: var(--page-gutter);
  right: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header { top: clamp(24px, 4.8vh, 56px); }
.color-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin-left: -17px; padding: 0; border: 0; border-radius: 50%; background: none; opacity: .5; transition: opacity .25s; }
.color-button:hover, .color-button:focus-visible { opacity: 1; }
.color-swatch { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; transition: background-color var(--color-fade-duration), border-color var(--color-fade-duration); }
.wild-mode .color-swatch { background-color: var(--burst-accent); border-color: var(--burst-accent); }
.monogram { display: block; width: 44px; height: 44px; margin-left: -8px; }
.monogram svg { width: 100%; height: 100%; }
.monogram[role='button'] { cursor: pointer; }
.monogram:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }
.motion-button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; }
.motion-icon { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; width: 34px; height: 34px; border: 1px solid #f3f1ed4d; border-radius: 50%; opacity: .6; transition: opacity .2s, border-color .2s; }
.motion-icon i { width: 2px; height: 9px; background: currentColor; }
.motion-button[aria-pressed='true'] .motion-icon { gap: 0; }
.motion-button[aria-pressed='true'] .motion-icon i:first-child { width: 0; height: 0; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; background: none; }
.motion-button[aria-pressed='true'] .motion-icon i:last-child { display: none; }
.motion-button:hover .motion-icon, .motion-button:focus-visible .motion-icon { opacity: 1; border-color: #f3f1ed; }

.main { position: relative; height: var(--page-height); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 36px; padding: 100px var(--page-gutter) 120px; }
.identity { position: relative; z-index: 2; width: max-content; max-width: 100%; margin: 0; padding: 0; pointer-events: none; }
h1 { display: flex; gap: .12em; margin: 0 0 24px -.065em; font-size: clamp(50px, 4.6vw, 84px); font-weight: 600; letter-spacing: -.07em; line-height: 1; }
.name-line { display: block; overflow: hidden; padding: 0 .12em .1em .065em; margin-bottom: -.1em; }
.name-line > span { display: block; animation: name-enter 1.3s cubic-bezier(.16, 1, .3, 1) both; }
.name-line:nth-child(2) > span { animation-delay: .12s; }
.name-period { color: #c2c9ff; transition: color var(--color-fade-duration), text-shadow var(--color-fade-duration); }
.wild-mode .name-period { color: var(--burst-accent, #ffea57); text-shadow: 0 0 30px currentColor; }
.linkedin { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 20px; border: 1px solid #f3f1ed80; border-radius: 100px; font-size: 14px; font-weight: 500; pointer-events: auto; transition: background .25s, color .25s, border-color .25s; animation: enter .9s .45s both; }
.linkedin-icon { width: 18px; height: 18px; }
.link-arrow { width: 19px; height: 19px; margin-left: 17px; transition: transform .25s; }
.linkedin:hover { color: #263cde; background: #f3f1ed; border-color: #f3f1ed; }
.linkedin:hover .link-arrow { transform: translate(2px, -2px); }

.sculpture { position: relative; align-self: center; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 620px; overflow: hidden; contain: size layout; touch-action: manipulation; z-index: 1; animation: sculpture-enter 1.8s cubic-bezier(.16, 1, .3, 1) both; }
/* The bitmap must never contribute intrinsic dimensions to the page layout. */
#sculpture-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.scene-ready #sculpture-canvas { opacity: 1; }
.scene-ready .sculpture { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.scene-ready .sculpture.is-interacting { cursor: grabbing; }
.motion-paused .sculpture { cursor: default; }
.sculpture-fallback { position: absolute; top: 50%; left: 50%; width: min(85%, 740px); height: 100%; max-height: 100%; transform: translate(-50%, -50%) rotate(-20deg); filter: drop-shadow(0 30px 30px #1422994d); transition: opacity .6s; }
.scene-ready .sculpture-fallback { opacity: 0; }
.sculpture-glow { position: absolute; inset: 23% 15% 20%; border-radius: 50%; background: #b4baff; opacity: .1; filter: blur(90px); }

.footer { bottom: clamp(24px, 4.8vh, 56px); min-height: 44px; font-size: 11px; animation: enter 1s .65s both; }
.remix-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; background: none; border: 0; font-size: 11px; font-weight: 500; opacity: .65; transition: opacity .25s; }
.remix-button:hover, .remix-button:focus-visible { opacity: 1; }
.remix-button svg { width: 18px; height: 18px; transition: transform .5s; }
.remix-button:hover svg { transform: rotate(90deg); }
.remix-button:active svg { transform: rotate(180deg); }
.print-button { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0; margin-left: auto; border: 0; background: none; font-size: 11px; opacity: .6; transition: opacity .25s; }
.print-button svg { width: 17px; height: 17px; }
.print-button:hover, .print-button:focus-visible { opacity: 1; }
.print-button:disabled { cursor: wait; opacity: .3; }

body.room-mode { overflow: hidden; }
.room-mode .header, .room-mode .footer { position: fixed; z-index: 10; }
.room-mode .sculpture { position: fixed; z-index: 8; inset: 0; width: 100%; height: 100%; max-height: none; animation: room-enter 1.2s cubic-bezier(.16, 1, .3, 1) both; }
.room-mode .identity { visibility: hidden; }
.room-mode .color-button, .room-mode .remix-button, .room-mode .interaction-hint { display: none; }
.room-mode .print-button:not([hidden]) { display: inline-flex; }
@keyframes room-enter { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes name-enter { from { transform: translateY(115%) rotate(3deg); } to { transform: translateY(0) rotate(0); } }
@keyframes sculpture-enter { from { opacity: 0; transform: scale(.8) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes enter { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px), (max-width: 1000px) and (max-aspect-ratio: 1/1) {
  :root { --page-height: max(760px, 100svh); }
  .header { top: 22px; }
  .monogram { width: 40px; height: 40px; }
  .motion-button { gap: 8px; }
  .main { gap: 0; padding: 72px 0 132px; }
  .identity { width: 100%; max-width: calc(100% - var(--page-gutter) * 2); margin-left: var(--page-gutter); }
  h1 { display: block; font-size: clamp(74px, 17.1vw, 130px); margin-bottom: 29px; letter-spacing: -.08em; line-height: .96; }
  .linkedin { min-height: 50px; font-size: 13px; padding: 0 18px; }
  .sculpture { width: 103%; max-height: none; }
  .sculpture-fallback { width: 88%; }
  .footer { bottom: 22px; font-size: 10px; align-items: flex-end; gap: 20px; }
  .remix-button { font-size: 11px; flex-shrink: 0; }
}
@media (max-width: 380px) {
  :root { --page-gutter: 20px; --page-height: max(700px, 100svh); }
  .main { padding-bottom: 134px; }
  h1 { font-size: 16.7vw; }
}
@media (max-height: 580px) and (orientation: landscape) {
  :root { --page-height: max(320px, 100svh); }
  .header { top: 12px; }
  .footer { bottom: 10px; }
  .main { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; padding: 64px var(--page-gutter); }
  .sculpture { grid-column: 2; grid-row: 1; position: relative; align-self: center; left: auto; right: auto; top: auto; bottom: auto; width: 100%; height: min(360px, calc(var(--page-height) - 24px)); max-height: none; }
  .identity { grid-column: 1; grid-row: 1; width: 100%; max-width: 100%; margin: 0; padding: 0; }
  h1 { display: block; font-size: clamp(44px, 8vw, 86px); margin-bottom: 24px; letter-spacing: -.08em; line-height: .96; }
  .linkedin { min-height: 50px; font-size: 13px; padding: 0 18px; }
}
@media (max-height: 350px) and (orientation: landscape) {
  h1 { font-size: clamp(44px, 8vw, 58px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }