:root {
  color-scheme: dark;
  --cream: #ffe9ad;
  --pink: #f080a0;
  --plum: #713576;
  --screen-scale: 1;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: #10081b; font-family: "Trebuchet MS", system-ui, sans-serif; cursor: none; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, a, [role="button"] { cursor: none !important; }
button { font: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.custom-cursor {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  opacity: 0;
  background: url("assets/ui/cursor-normal.png") no-repeat center / contain;
  transform: translate(-6px, -20px);
  transition: opacity 100ms ease;
}
body.cursor-on .custom-cursor { opacity: 1; }
.custom-cursor.hover {
  background-image: url("assets/ui/cursor-hover.png");
  animation: cursor-glow 1.5s infinite ease-in-out;
}
.custom-cursor.tap { animation: none; transform: translate(-6px, -20px) scale(.94); }
.custom-cursor.drag-ready,
.custom-cursor.drag-active {
  width: 40px;
  height: 46px;
  background-image: url("assets/ui/cursors/Hand.png");
  transform: translate(-20px, -12px);
  animation: none;
  filter: none;
}
.custom-cursor.drag-active {
  background-image: url("assets/ui/cursors/Hand_grab.png");
  transform: translate(-20px, -12px);
}
@keyframes cursor-glow {
  0%, 100% { filter: drop-shadow(0 0 3px #fff0b4b3); transform: translate(-6px, -20px) scale(1.05); }
  50% { filter: drop-shadow(0 0 7px #fff0b4); transform: translate(-6px, -20px) scale(1.14); }
}

.viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.desktop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  flex: 0 0 auto;
  transform: translate(-50%, -50%) scale(var(--screen-scale));
  transform-origin: center;
  overflow: hidden;
  isolation: isolate;
  background: #5a276e;
  box-shadow: 0 20px 90px #000c;
}

.desktop-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 650ms ease;
}
.desktop-corrupt { opacity: 0; }
.desktop.is-corrupt .desktop-normal { opacity: 0; }
.desktop.is-corrupt .desktop-corrupt { opacity: 1; }

.desktop-icons { position: absolute; inset: 0; z-index: 2; }
.desktop-icon {
  position: absolute;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  transform-origin: 50% 50%;
  isolation: isolate;
}
.desktop-icon::before { content: none; }
.desktop-icon::after { content: none; }
.desktop-icon > img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; transform-origin: center; transition: transform 140ms ease, filter 140ms ease; }
.desktop-icon:hover > img, .desktop-icon:focus-visible > img { transform: scale(1.025); filter: drop-shadow(0 0 5px #fff1bc99) drop-shadow(0 0 10px #ff8dca66); }
.desktop.is-corrupt .desktop-icon:hover > img,
.desktop.is-corrupt .desktop-icon:focus-visible > img {
  filter: brightness(1.12) drop-shadow(0 0 7px #ff796d) drop-shadow(0 0 18px #6d001e);
}
.desktop-icon:focus-visible { outline: none; }
.icon-label { position: absolute; z-index: 2; object-fit: contain; pointer-events: none; }
.education { left: 3.2292%; top: 1.2037%; width: 8.3854%; height: 15.8333%; } .education-label { left: 2.1875%; top: 15.2778%; width: 9.2708%; }
.about { left: 13.8021%; top: 7.2222%; width: 7.4479%; height: 16.4815%; } .about-label { left: 12.3438%; top: 21.8519%; width: 9.6354%; }
.experience { left: 2.8125%; top: 20.5556%; width: 9.9479%; height: 17.0370%; } .experience-label { left: 2.4479%; top: 35.8333%; width: 10.4167%; }
.skills { left: 16.1458%; top: 30.5556%; width: 9.1667%; height: 13.3333%; } .skills-label { left: 17.9167%; top: 42.6852%; width: 5.2083%; }
.player { left: 47.7604%; top: 8.6111%; width: 8.4375%; height: 11.9444%; } .player-label { left: 48.8542%; top: 18.8889%; width: 6.5104%; }
.camera { left: 55.7813%; top: 20.9259%; width: 8.0729%; height: 11.9444%; } .camera-label { left: 56.1458%; top: 31.3889%; width: 7.2917%; }
.winlab { left: 77.7083%; top: .1852%; width: 8.1250%; height: 16.2963%; } .winlab-label { left: 78.0729%; top: 14.5370%; width: 7.2396%; }
.nda { left: 89.2188%; top: .3704%; width: 9.1146%; height: 17.1296%; } .nda-label { left: 91.6667%; top: 16.2037%; width: 4.2708%; }
.craft { left: 80.5729%; top: 19.5370%; width: 9.3229%; height: 15.3704%; } .craft-label { left: 82.8646%; top: 33.4259%; width: 4.9479%; }
.retro { left: 89.0625%; top: 28.8889%; width: 8.9063%; height: 15.9259%; } .retro-label { left: 88.2292%; top: 43.0556%; width: 10.5208%; }
.freelance { left: 79.8438%; top: 41.6667%; width: 9.0104%; height: 17.7778%; } .freelance-label { left: 80.0000%; top: 57.1296%; width: 9.2188%; }
.rooked { left: 8.1250%; top: 62.6852%; width: 9.5313%; height: 14.3519%; } .rooked-label { left: 9.0625%; top: 75.4630%; width: 7.2917%; }
.peppermint { left: 20.8854%; top: 67.2222%; width: 9.6354%; height: 16.8519%; } .peppermint-label { left: 18.2813%; top: 82.1296%; width: 14.2708%; }
.centum { left: 34.7396%; top: 59.8148%; width: 7.5000%; height: 16.8519%; } .centum-label { left: 34.7917%; top: 74.4444%; width: 7.2396%; }
.trash { left: 87.8646%; top: 72.4074%; width: 7.5521%; height: 15.5556%; } .trash-label { left: 83.9583%; top: 86.2963%; width: 14.8958%; }

.gavryusha {
  position: absolute;
  left: 71.6%;
  top: 69.3%;
  z-index: 4;
  width: 11.4%;
  aspect-ratio: .927;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 4px 2px #2b123a85);
  transition: filter 160ms ease, transform 160ms ease;
}
.gavryusha img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gavryusha:hover, .gavryusha:focus-visible {
  transform: translateY(-1.5%) scale(1.035);
  filter: drop-shadow(0 0 6px #ffe39d) drop-shadow(0 0 13px #ff75c4);
  outline: none;
}
.desktop.is-corrupt .gavryusha {
  filter: drop-shadow(0 0 7px #ff796d) drop-shadow(0 0 18px #6d001e);
}
.desktop-icons,
.task-button,
.asset-window {
  transition: filter 320ms ease;
}
.desktop.is-corrupt .desktop-icons,
.desktop.is-corrupt .task-button,
.desktop.is-corrupt .asset-window {
  filter: brightness(.84) saturate(.88);
}
.desktop.is-corrupt .desktop-icon:hover,
.desktop.is-corrupt .desktop-icon:focus-visible {
  filter: brightness(1.16);
}

.glitch-overlay {
  position: absolute;
  inset: 0;
  z-index: 88;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, #05010a00 0 3px, #05010a3d 4px 5px),
    repeating-radial-gradient(circle at 20% 40%, #f7d3c005 0 1px, #1607130d 1px 3px),
    linear-gradient(115deg, #16020b24, #5d102b1f 46%, #10031631);
  background-size: 100% 100%, 5px 5px, 100% 100%;
  mix-blend-mode: normal;
}
.desktop.switching .glitch-overlay {
  animation: hard-glitch 760ms steps(2, end);
}
@keyframes hard-glitch {
  0%   { opacity: 0; clip-path: inset(0); transform: none; filter: contrast(1); }
  6%   { opacity: .92; clip-path: inset(5% 0 72% 0); transform: translateX(-4%); filter: contrast(2.1) saturate(1.8); }
  12%  { opacity: .55; clip-path: inset(68% 0 7% 0); transform: translateX(5%); }
  18%  { opacity: .96; clip-path: inset(23% 0 50% 0); transform: translateX(-2.5%) skewX(2deg); filter: hue-rotate(38deg) contrast(2.3); }
  25%  { opacity: .35; clip-path: inset(0 0 0 0); transform: translateX(1%); }
  33%  { opacity: .9; clip-path: inset(42% 0 36% 0); transform: translateX(6%); filter: hue-rotate(-28deg) contrast(2.4); }
  41%  { opacity: .66; clip-path: inset(76% 0 3% 0); transform: translateX(-6%); }
  49%  { opacity: .95; clip-path: inset(9% 0 66% 0); transform: translateX(3%); filter: saturate(.2) contrast(3); }
  58%  { opacity: .52; clip-path: inset(31% 0 38% 0); transform: translateX(-3%); }
  68%  { opacity: .82; clip-path: inset(57% 0 15% 0); transform: translateX(4%); filter: hue-rotate(65deg) contrast(2); }
  80%  { opacity: .33; clip-path: inset(0); transform: translateX(-1%); }
  91%  { opacity: .7; clip-path: inset(45% 0 43% 0); transform: translateX(2%); }
  100% { opacity: 0; clip-path: inset(0); transform: none; }
}
.desktop.is-corrupt:not(.switching) .glitch-overlay {
  animation: corrupt-loop 2.35s steps(2, end) infinite;
}
@keyframes corrupt-loop {
  0%, 7%, 18%, 38%, 62%, 81%, 100% {
    opacity: .14;
    clip-path: inset(0);
    transform: none;
    filter: contrast(1.15) saturate(.72);
  }
  8% {
    opacity: .28;
    clip-path: inset(8% 0 76% 0);
    transform: translateX(-1.8%);
    filter: contrast(2.1) hue-rotate(18deg);
  }
  10% {
    opacity: .18;
    clip-path: inset(67% 0 15% 0);
    transform: translateX(1.2%);
  }
  19% {
    opacity: .24;
    clip-path: inset(35% 0 48% 0);
    transform: translateX(1.6%);
    filter: contrast(2.3) saturate(.45);
  }
  21% {
    opacity: .13;
    clip-path: inset(0);
    transform: translateX(-.25%);
  }
  39% {
    opacity: .22;
    clip-path: inset(74% 0 9% 0);
    transform: translateX(-1.4%);
    filter: contrast(2) hue-rotate(-20deg);
  }
  41% {
    opacity: .16;
    clip-path: inset(12% 0 70% 0);
    transform: translateX(.8%);
  }
  63% {
    opacity: .25;
    clip-path: inset(47% 0 36% 0);
    transform: translateX(1.7%);
    filter: contrast(2.5) saturate(.3);
  }
  65% {
    opacity: .15;
    clip-path: inset(3% 0 83% 0);
    transform: translateX(-1%);
  }
  82% {
    opacity: .23;
    clip-path: inset(20% 0 62% 0);
    transform: translateX(-1.5%);
    filter: contrast(2.2) hue-rotate(24deg);
  }
  84% {
    opacity: .13;
    clip-path: inset(0);
    transform: translateX(.2%);
  }
}

.task-button {
  position: absolute;
  bottom: .1458%;
  z-index: 4;
  height: auto;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  transform-origin: 50% 50%;
  transition: background 160ms ease, filter 160ms ease;
}
.player-task { left: 16.5927%; width: 11.3021%; }
.camera-task { left: 27.7494%; width: 11.4063%; }
.email-task { left: 38.9061%; width: 11.4063%; }
.task-button img { width: 100%; height: auto; display: block; object-fit: contain; pointer-events: none; }
.asset-window {
  position: absolute;
  z-index: 30;
  width: min(76%, 980px);
  aspect-ratio: 872 / 619;
  left: 12%;
  top: 9%;
  filter: drop-shadow(0 18px 24px #2b0e4388);
  animation: open-window 230ms cubic-bezier(.18,.8,.28,1.18);
  transform-origin: 50% 85%;
}
.asset-window[hidden] { display: none; }
.asset-window > img:not(.media-animation) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.drag-handle { position: absolute; z-index: 4; left: 2.5%; right: 14%; top: 1.5%; height: 11%; cursor: none; touch-action: none; user-select: none; }
.frame-close {
  position: absolute;
  z-index: 5;
  right: 4.25%;
  top: 5.3%;
  width: 5.4%;
  aspect-ratio: 1;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 18%;
}
/* Player and Camera retain the restrained button highlight they had before. */
.task-button:hover,
.task-button:focus-visible,
.frame-close:hover,
.frame-close:focus-visible,
.camera-close:hover,
.camera-close:focus-visible {
  background: radial-gradient(ellipse at center, #fff6 0 24%, #ffe8b826 53%, transparent 76%);
  filter: drop-shadow(0 0 4px #fff1bc99);
}
@keyframes open-window { from { opacity: 0; transform: scale(.72) translateY(10%); } }

.about-window {
  width: min(73.5%, 1000px);
  aspect-ratio: 872 / 619;
  left: 13.25%;
  top: 4%;
  overflow: visible;
}
.about-window .drag-handle { left: 3.5%; right: 16%; top: 3.8%; height: 9%; }
.about-window .frame-close {
  right: 4.25%;
  top: 5.3%;
  width: 5.4%;
}
.asset-window.about-window > img.about-base { z-index: 1; }
.asset-window.about-window > img.about-person {
  z-index: 2;
  left: 10.8%;
  top: 21.4%;
  width: 39.8%;
  height: auto;
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
}
.about-skills { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.about-skill {
  position: absolute;
  width: 13.75%;
  height: 8.3%;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  transition: filter 120ms ease, transform 120ms ease;
}
.about-skill:hover, .about-skill[aria-expanded="true"] {
  transform: scale(1.008);
  background: radial-gradient(ellipse at center, #fff1b74d 0%, #ff83c92b 52%, transparent 78%);
  filter: drop-shadow(0 0 4px #ffe39dcc) drop-shadow(0 0 8px #ff75c499);
}
.about-skill.games { left: 53.7%; top: 69.4%; }
.about-skill.illustr { left: 67.1%; top: 69.4%; }
.about-skill.motion { left: 80.45%; top: 69.4%; }
.about-skill.ux { left: 53.7%; top: 78.9%; }
.about-skill.design { left: 67.1%; top: 78.9%; }
.about-skill.craft-skill { left: 80.45%; top: 78.9%; }
.about-popups { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.about-popups img {
  position: absolute;
  width: 12.85%;
  height: auto;
  filter: drop-shadow(0 5px 4px #5d245566);
}
.about-popups img[hidden] { display: none; }
.about-popups [data-about-popup="games"] { left: 54.15%; top: 76.5%; }
.about-popups [data-about-popup="illustr"] { left: 67.55%; top: 76.5%; }
.about-popups [data-about-popup="motion"] { left: 80.9%; top: 76.5%; }
/* Both rows open in the same direction: downward from their buttons. */
.about-popups [data-about-popup="ux"] { left: 54.15%; top: 86%; }
.about-popups [data-about-popup="design"] { left: 67.55%; top: 86%; }
.about-popups [data-about-popup="craft"] { left: 80.9%; top: 86%; }
.about-toy {
  position: absolute;
  z-index: 6;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: filter 120ms ease, transform 120ms ease;
}
.about-toy:hover {
  transform: scale(1.008);
  filter: drop-shadow(0 0 4px #ffe39dcc) drop-shadow(0 0 8px #ff75c499);
}
.about-family { left: 6.3%; top: 55.3%; width: 8.6%; height: 13.1%; }
.about-home { left: 14.7%; top: 57%; width: 7.4%; height: 11.2%; }
.about-main-heart { left: 8.5%; top: 67.5%; width: 10.5%; height: 15.8%; }
.about-small-heart { left: 19.3%; top: 67.5%; width: 7.5%; height: 11.7%; }
.about-minus-left { left: 5.1%; top: 66.5%; width: 5.2%; height: 8%; }
.about-minus-right { left: 18.1%; top: 80%; width: 6.1%; height: 8.5%; }
.click-sparkle {
  position: fixed;
  z-index: 10000;
  width: 5px;
  height: 5px;
  pointer-events: none;
  background: #fff2b6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px #ff89c7);
  animation: sparkle-pop 620ms ease-out forwards;
}
@keyframes sparkle-pop {
  from { opacity: 1; transform: translate(0, 0) scale(.5) rotate(0); }
  to { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(1.5) rotate(150deg); }
}

.skills-content {
  position: absolute;
  z-index: 2;
  left: 4.6%;
  right: 9.4%;
  top: 15.5%;
  bottom: 11%;
  padding: 1.8% 2.2% 5%;
  overflow-y: auto;
  color: #74356f;
  scrollbar-width: thin;
  scrollbar-color: #ed7d9f transparent;
}
.skills-content article {
  display: grid;
  grid-template-columns: 10% 1fr;
  gap: 2%;
  align-items: start;
  margin-bottom: 2.4%;
  padding: 2.2%;
  border: 2px solid #d15f90;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffd5b5e8, #f4a0a9df);
  box-shadow: 0 5px 0 #a33f7c, inset 0 2px 3px #fff8;
}
.skills-content article > span { font-size: clamp(18px, 2vw, 36px); font-weight: 900; color: #e55091; }
.skills-content h2 { margin: 0; font-size: clamp(16px, 1.55vw, 28px); }
.skills-content p { margin: .35em 0; font-size: clamp(11px, .95vw, 18px); line-height: 1.35; }
.skills-content small { font-size: clamp(9px, .77vw, 14px); font-weight: 800; opacity: .78; }

.trash-window {
  width: 65.8854%;
  aspect-ratio: 1265 / 915;
  left: 7%;
  top: 1%;
  overflow: hidden;
  filter: none;
}
.asset-window.trash-window > img.trash-base { z-index: 1; object-fit: fill; }
.trash-window .drag-handle { z-index: 8; left: 2%; right: 11%; top: 1.2%; height: 7%; }
.trash-window .frame-close { z-index: 10; right: 1.6%; top: 2.25%; width: 4.25%; }
.trash-item {
  position: absolute;
  z-index: 5;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
  cursor: none;
}
.trash-item:hover,
.trash-item:focus-visible,
.trash-item.selected {
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
}
.trash-item::before,
.trash-item::after { content: none; }
.trash-item:hover .trash-project-icon,
.trash-item:focus-visible .trash-project-icon {
  transform: scale(1.025);
  filter: brightness(1.06);
}
.trash-item:focus-visible { outline: none; }
.trash-item img { position: absolute; display: block; object-fit: contain; pointer-events: none; }
.trash-project-icon {
  top: 0;
  left: 50%;
  height: auto;
  translate: -50% 0;
  transform-origin: center;
  transition: transform 150ms ease, filter 150ms ease;
}
.trash-project-label { left: 0; bottom: 0; width: 100%; height: auto; }
.trash-chicken { left: 40.71%; top: 11.04%; width: 17.08%; height: 20.98%; }
.trash-chicken .trash-project-icon { width: 59.26%; }
.trash-darkness { left: 37.94%; top: 33.01%; width: 23.24%; height: 21.09%; }
.trash-darkness .trash-project-icon { width: 46.94%; }
.trash-forest { left: 5.85%; top: 60%; width: 19.53%; height: 21.86%; }
.trash-forest .trash-project-icon { width: 50.20%; }
.trash-something { left: 81.58%; top: 60.77%; width: 15.10%; height: 22.08%; }
.trash-something .trash-project-icon { width: 80.63%; }

.nda-window {
  width: 72.1354%;
  aspect-ratio: 1385 / 918;
  left: 7%;
  top: 1%;
  overflow: hidden;
  filter: none;
}
.asset-window.nda-window > img.nda-base { z-index: 1; object-fit: fill; }
.nda-window .drag-handle { z-index: 8; left: 2%; right: 11%; top: 1.2%; height: 7%; }
.nda-window .frame-close { z-index: 10; right: 1.7%; top: 2.35%; width: 3.45%; }

.media-window { filter: drop-shadow(0 18px 24px #250d3f91); }
.media-original {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.player-window { width: min(46%, 610px); aspect-ratio: 963 / 950; left: 28%; top: 8%; }
.player-window .drag-handle { right: 14%; top: 1.5%; height: 13%; }
.player-window .frame-close { right: 5.2%; top: 4.7%; width: 7.1%; }
.camera-window { width: 27.0833%; aspect-ratio: 936 / 640; left: 38%; top: 24%; }
.camera-window .camera-drag { left: 2%; right: 1%; top: 0; height: 18%; }
.camera-close { position: absolute; z-index: 5; right: 1.6%; top: 2.5%; width: 8%; aspect-ratio: 1; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
@keyframes media-screen-breathe {
  from { filter: brightness(.98) saturate(.98); }
  to { filter: brightness(1.05) saturate(1.06); }
}

.simple-content, .project-content {
  position: absolute;
  z-index: 2;
  left: 5%;
  right: 9%;
  top: 15%;
  bottom: 11%;
  overflow-y: auto;
  color: #71356f;
  text-align: center;
  padding: 1% 3% 4%;
}
.simple-content h1, .project-content h2 { margin: .15em 0; font-size: clamp(26px, 3.5vw, 60px); line-height: 1; }
.simple-content .lead { font-size: clamp(12px, 1.25vw, 22px); font-weight: 700; }
.simple-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2%; margin-top: 3%; }
.simple-grid article { padding: 8% 6%; border: 2px solid #d15e91; border-radius: 18px; background: #ffc8a9d9; box-shadow: 0 5px 0 #a3407c; }
.simple-grid b { font-size: clamp(13px, 1.25vw, 23px); }
.simple-grid p { font-size: clamp(10px, .86vw, 16px); line-height: 1.35; }

.project-content header p { margin: 0; font-size: clamp(9px, .8vw, 14px); letter-spacing: .22em; font-weight: 900; }
.project-layout { display: grid; grid-template-columns: 43% 1fr; gap: 4%; margin-top: 3%; text-align: left; }
.project-preview { min-height: 250px; display: grid; place-items: center; border: 3px solid #b94b87; border-radius: 20px; background: radial-gradient(circle at 50% 35%, #ffcfb8, #c0588d 55%, #5f296e); box-shadow: inset 0 0 25px #4c1b6077, 0 6px 0 #913676; color: #ffeab0; }
.project-preview span { font-size: clamp(55px, 8vw, 140px); font-weight: 900; text-shadow: 0 6px 0 #793273; }
.project-layout h2 { margin: .2em 0; font-size: clamp(15px, 1.4vw, 25px); }
.project-layout p { margin: 0 0 1em; font-size: clamp(10px, .95vw, 17px); line-height: 1.4; }
.project-layout a { display: inline-block; padding: .7em 1.1em; border: 2px solid #a64080; border-radius: 12px; background: linear-gradient(#ffd1b5, #ed7d9e); box-shadow: 0 5px 0 #883371; color: #6e2e6c; text-decoration: none; font-weight: 900; }

/* Centum is the first project window with segmented video and a media carousel. */
.centum-window {
  width: 72.0313%;
  aspect-ratio: 1383 / 885;
  left: 7%;
  top: 1%;
  overflow: hidden;
}
.asset-window.centum-window > img.centum-base { z-index: 1; object-fit: fill; }
.centum-window .drag-handle { z-index: 8; left: 2%; right: 11%; top: 1.2%; height: 7%; }
.centum-window .frame-close { z-index: 10; right: 1.65%; top: 2.2%; width: 3.4%; }

.centum-main-media {
  position: absolute;
  z-index: 2;
  left: 3.977%;
  top: 13.559%;
  width: 38.322%;
  aspect-ratio: 530 / 390;
  overflow: hidden;
  border-radius: 5.4%;
  background: #170c1b;
}
.centum-main-media video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.centum-main-media > img.project-media-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.centum-main-media > img.project-main-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

.centum-carousel {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 61%;
  width: 33%;
  height: 15%;
  overflow: hidden;
  pointer-events: none;
}
.carousel-gesture-area { touch-action: pan-y; }
.centum-carousel.carousel-gesture-area { pointer-events: auto; }
.centum-carousel-item {
  position: absolute;
  top: 12.17%;
  overflow: hidden;
  border-radius: 20%;
  background: #170c1b;
  transition: left 420ms cubic-bezier(.22,.72,.22,1), width 420ms cubic-bezier(.22,.72,.22,1), height 420ms cubic-bezier(.22,.72,.22,1);
}
.centum-carousel-item.is-small { width: 27.17%; height: 68.55%; }
.centum-carousel-item.is-medium { width: 33.09%; height: 85.12%; }
.centum-carousel-item.slot-left { left: 3.33%; }
.centum-carousel-item.slot-center { left: 32.91%; }
.centum-carousel-item.slot-right { left: 68.84%; }
.centum-carousel-item.slot-before { left: -32%; }
.centum-carousel-item.slot-after { left: 104%; }
.centum-thumbnail {
  position: absolute;
  inset: 3.3%;
  z-index: 1;
  border-radius: 20%;
  background: #241329 center / cover no-repeat;
}
.centum-carousel-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 250ms ease;
}
.centum-frame-small { opacity: 1; }
.centum-frame-medium { opacity: 0; }
.centum-carousel-item.is-medium .centum-frame-small { opacity: 0; }
.centum-carousel-item.is-medium .centum-frame-medium { opacity: 1; }

.centum-arrow {
  position: absolute;
  z-index: 5;
  top: 62.599%;
  width: 2.892%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform-origin: center;
}
.centum-arrow-left { left: 4.194%; }
.centum-arrow-right { left: 39.769%; }
.centum-arrow img,
.centum-project-link img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.centum-arrow img { transform-origin: center; transition: transform 150ms ease, filter 150ms ease; }
.centum-project-link {
  position: absolute;
  z-index: 5;
  left: 13.304%;
  top: 81.356%;
  width: 20.174%;
  aspect-ratio: 279 / 58;
  transform-origin: center;
  transition: transform 150ms ease, filter 150ms ease;
}
.centum-project-link:hover {
  transform: scale(1.018);
  filter: brightness(1.05) drop-shadow(0 0 5px #fff0b18f);
}
.centum-project-link:focus-visible { outline: 2px solid #fff0b1; outline-offset: 3px; }

/* Project-specific placement from the supplied full-window references. */
.rooked-window {
  width: 69.375%;
  aspect-ratio: 1332 / 918;
}
.rooked-window .centum-main-media { left: 4.58%; top: 12.42%; width: 39.79%; }
.rooked-window .centum-carousel { left: 7.70%; top: 59.80%; width: 34.26%; height: 14.46%; }
.rooked-window .centum-arrow { top: 61.33%; width: 3.003%; }
.rooked-window .centum-arrow-left { left: 4.805%; }
.rooked-window .centum-arrow-right { left: 41.59%; }
.rooked-window .centum-project-link { left: 14.34%; top: 81.70%; width: 20.95%; }

.peppermint-window {
  width: 64.375%;
  aspect-ratio: 1236 / 915;
}
.peppermint-window .centum-main-media { left: 4.98%; top: 11.37%; width: 42.88%; }
.peppermint-window .centum-carousel { left: 8.33%; top: 56.95%; width: 36.93%; height: 14.51%; }
.peppermint-window .centum-arrow { top: 58.15%; width: 3.236%; }
.peppermint-window .centum-arrow-left { left: 5.12%; }
.peppermint-window .centum-arrow-right { left: 44.80%; }
.peppermint-window .centum-project-link { left: 15.42%; top: 74.54%; width: 22.57%; }

.winlab-window {
  width: 65.8854%;
  aspect-ratio: 1265 / 915;
  filter: none;
}
.winlab-window .centum-main-media { left: 4.90%; top: 11.31%; width: 41.90%; }
.winlab-window .centum-carousel { left: 8.14%; top: 56.86%; width: 36.08%; height: 14.51%; }
.winlab-window .centum-arrow { top: 58.13%; width: 3.162%; }
.winlab-window .centum-arrow-left { left: 5.04%; }
.winlab-window .centum-arrow-right { left: 43.87%; }
.winlab-window .centum-project-link { left: 15.11%; top: 74.37%; width: 22.06%; }

.freelance-window {
  width: 69.375%;
  aspect-ratio: 1332 / 918;
}
.freelance-window .centum-main-media { left: 4.605%; top: 13.456%; width: 39.79%; }
.freelance-window .centum-carousel { left: 7.69%; top: 61.86%; width: 34.26%; height: 14.46%; }
.freelance-window .centum-arrow { top: 63.27%; width: 3.003%; }
.freelance-window .centum-arrow-left { left: 4.74%; }
.freelance-window .centum-arrow-right { left: 41.52%; }

.retrogaze-window {
  width: 65.8854%;
  aspect-ratio: 1265 / 915;
}
.retrogaze-window .centum-main-media { left: 4.90%; top: 11.31%; width: 41.90%; }
.retrogaze-window .centum-carousel { left: 8.14%; top: 56.86%; width: 36.08%; height: 14.51%; }
.retrogaze-window .centum-arrow { top: 58.13%; width: 3.162%; }
.retrogaze-window .centum-arrow-left { left: 5.04%; }
.retrogaze-window .centum-arrow-right { left: 43.87%; }

/* Preserve corrupted-mode dimming without restoring the parent drop-shadow. */
.desktop.is-corrupt .asset-window.winlab-window,
.desktop.is-corrupt .asset-window.nda-window,
.desktop.is-corrupt .asset-window.trash-window {
  filter: brightness(.84) saturate(.88);
}

.craft-window {
  width: 72.0313%;
  aspect-ratio: 1383 / 961;
  left: 7%;
  top: 1%;
  overflow: hidden;
}
.asset-window.craft-window > img.craft-base { z-index: 1; object-fit: fill; }
.craft-window .drag-handle { z-index: 8; left: 2%; right: 11%; top: 1.2%; height: 7%; }
.craft-window .frame-close { z-index: 10; right: 1.65%; top: 2.2%; width: 3.4%; }
.craft-main-media {
  position: absolute;
  z-index: 2;
  left: 4.96%;
  top: 11.93%;
  width: 30.95%;
  aspect-ratio: 428 / 659;
  overflow: hidden;
  border-radius: 5.4%;
  background: #170c1b;
}
.craft-main-media video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: brightness(.94);
}
.craft-media-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.craft-arrow,
.craft-link {
  position: absolute;
  z-index: 5;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform-origin: center;
}
.craft-arrow { top: 82.84%; width: 4.05%; aspect-ratio: 1; }
.craft-arrow-left { left: 13.40%; }
.craft-arrow-right { left: 22.20%; }
.craft-link { top: 83.45%; width: 20.17%; aspect-ratio: 279 / 58; }
.craft-gavryusha-link { left: 44.09%; }
.craft-instagram-link { left: 70.68%; }
.craft-arrow img,
.craft-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center;
  transition: transform 150ms ease, filter 150ms ease;
}
.centum-arrow:hover img,
.centum-arrow:focus-visible img,
.craft-arrow:hover img,
.craft-arrow:focus-visible img {
  transform: scale(1.025);
  filter: brightness(1.1) drop-shadow(0 0 5px #fff2b9);
}
.craft-link:hover img,
.craft-link:focus-visible img {
  transform: scale(1.018);
  filter: brightness(1.05) drop-shadow(0 0 5px #fff0b18f);
}
.freelance-instagram-link { left: 14.20%; top: 82.75%; width: 20.95%; }
.retrogaze-project-link { left: 15.70%; top: 76.20%; width: 22.06%; }
.centum-arrow:focus-visible,
.craft-arrow:focus-visible,
.craft-link:focus-visible { outline: none; }

.corrupt-flash { position: absolute; inset: 0; z-index: 90; pointer-events: none; opacity: 0; background: #fff; mix-blend-mode: screen; }
.desktop.switching .corrupt-flash { animation: corrupt-flash 760ms steps(2); }
@keyframes corrupt-flash {
  0% { opacity: 0; background: #fff; }
  12% { opacity: .42; }
  23% { opacity: 0; }
  34% { opacity: .32; background: #ff3e84; transform: translateX(2px); }
  46% { opacity: .06; transform: translateX(-2px); }
  100% { opacity: 0; }
}
.desktop.is-corrupt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .08;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #020108 4px);
  mix-blend-mode: multiply;
  animation: scan 2.1s steps(2) infinite;
}
@keyframes scan { 49% { transform: none; } 50% { transform: translate(2px, -1px); } 52% { transform: none; } }

.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: #08010b;
  opacity: 1;
  transition: opacity 650ms ease, visibility 650ms;
}
.loading-screen.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-screen > img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.loading-screen:not(.leaving) > img {
  animation: loading-breathe 2.6s ease-in-out infinite;
}
.loading-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .2;
  background:
    radial-gradient(ellipse 28% 22% at 50% 46%, #ffacd455, transparent 72%),
    radial-gradient(ellipse 30% 9% at 50% 79%, #ff87c844, transparent 74%);
  mix-blend-mode: screen;
  animation: loading-glow 2.6s ease-in-out infinite;
}
@keyframes loading-breathe {
  0%, 100% { filter: brightness(.97) saturate(.98); }
  50% { filter: brightness(1.045) saturate(1.06); }
}
@keyframes loading-glow {
  0%, 100% { opacity: .13; transform: scale(.995); }
  50% { opacity: .34; transform: scale(1.012); }
}
.loading-segment {
  position: absolute;
  z-index: 2;
  left: 38.4%;
  top: 76.8%;
  width: 23.1%;
  height: 4.1%;
  overflow: hidden;
  border-radius: 999px;
}
.loading-segment i {
  position: absolute;
  top: 18%;
  width: 7.5%;
  height: 64%;
  border-radius: 3px;
  background: linear-gradient(#ffe2bb, #f37ca2 48%, #9c3d8b);
  box-shadow: 0 0 7px #ff9ecf;
  animation: load 1.25s linear infinite;
}
.loading-segment i:nth-child(2) { animation-delay: 100ms; }
.loading-segment i:nth-child(3) { animation-delay: 200ms; }
@keyframes load { from { left: -18%; } to { left: 108%; } }
#skipLoading {
  position: absolute;
  z-index: 5;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.loading-screen.leaving {
  animation: loading-exit 680ms steps(2, end);
}
.loading-screen.leaving > img {
  animation: loading-image-glitch 680ms steps(2, end);
}
.loading-screen.leaving::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, #120218b8 4px 6px),
    linear-gradient(90deg, #ff3f9b66, transparent 35%, #8b63ff66 70%, transparent);
  mix-blend-mode: screen;
  animation: loading-tear 680ms steps(2, end);
}
@keyframes loading-exit {
  0%, 76% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes loading-image-glitch {
  0%, 8%, 100% { transform: none; filter: brightness(1); clip-path: inset(0); }
  12% { transform: translateX(-2.2%); filter: contrast(1.9) saturate(1.5); clip-path: inset(6% 0 71% 0); }
  20% { transform: translateX(2.8%); filter: hue-rotate(35deg) contrast(2.2); clip-path: inset(62% 0 13% 0); }
  29% { transform: translateX(-1.3%); filter: saturate(.25) contrast(2.7); clip-path: inset(26% 0 48% 0); }
  39% { transform: translateX(1.7%); filter: hue-rotate(-30deg) contrast(2.1); clip-path: inset(74% 0 4% 0); }
  51% { transform: translateX(-.7%); filter: brightness(1.7) contrast(2); clip-path: inset(0); }
  66% { transform: translateX(2%); filter: contrast(2.4); clip-path: inset(44% 0 39% 0); }
  78% { transform: none; filter: brightness(2.1); clip-path: inset(0); }
}
@keyframes loading-tear {
  0%, 10%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  14% { opacity: .72; transform: translateX(3%); clip-path: inset(9% 0 75% 0); }
  23% { opacity: .5; transform: translateX(-4%); clip-path: inset(66% 0 11% 0); }
  33% { opacity: .8; transform: translateX(2%); clip-path: inset(31% 0 49% 0); }
  46% { opacity: .34; transform: translateX(-2%); clip-path: inset(0); }
  60% { opacity: .65; transform: translateX(3.5%); clip-path: inset(52% 0 30% 0); }
  76% { opacity: .25; transform: none; clip-path: inset(0); }
}

/* Skills: clean frame, independently scrollable content and one functional scrollbar. */
.skills-window {
  width: min(75%, 1000px);
  aspect-ratio: var(--window-ratio, 864 / 619);
  left: 12.5%;
  top: 7%;
  overflow: visible;
}
.experience-window { --window-ratio: 879 / 615; }
.education-window { --window-ratio: 864 / 607; }
.asset-window.skills-window > .skills-frame { z-index: 1; object-fit: fill; }
.skills-window .drag-handle { z-index: 8; left: 2%; right: 14%; top: 1%; height: 10%; }
.skills-window .frame-close { z-index: 10; right: 3.15%; top: 2.4%; width: 5.3%; }
.skills-scroll-viewport {
  position: absolute;
  z-index: 3;
  left: 4.4%;
  top: 12.601%;
  bottom: 13.409%;
  width: 80.8%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  contain: paint;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: #f8e2a9;
  border-radius: 1.2%;
}
.skills-scroll-viewport::-webkit-scrollbar { display: none; }
.skills-scroll-viewport > img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}
.education-window .skills-scroll-viewport { top: 12.85%; bottom: 11.697%; }
.experience-window .skills-scroll-viewport { top: 14.472%; bottom: 11.057%; }
.skills-scrollbar {
  position: absolute;
  z-index: 9;
  width: 9.95%;
}
.skills-window:not(.education-window):not(.experience-window) .skills-scrollbar {
  top: 12.278%;
  right: 3.241%;
  height: 75.444%;
}
.education-window .skills-scrollbar {
  top: 12.521%;
  right: 3.241%;
  height: 76.936%;
}
.experience-window .skills-scrollbar {
  top: 13.984%;
  right: 3.299%;
  height: 76.098%;
}
.skills-track { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.skills-scroll-button,
.skills-scroll-thumb {
  position: absolute;
  left: 24%;
  width: 49%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: none;
}
.skills-scroll-button img,
.skills-scroll-thumb img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.skills-scroll-up { top: 3.2%; height: 7.5%; }
.skills-scroll-down { bottom: 3.1%; height: 7.5%; }
.skills-scroll-thumb { top: 10.7%; height: 44.3%; touch-action: none; cursor: grab; }
.skills-scroll-thumb:active { cursor: grabbing; }
.skills-scroll-button:hover,
.skills-scroll-button:focus-visible,
.skills-scroll-thumb:hover,
.skills-scroll-thumb:focus-visible { filter: brightness(1.12) drop-shadow(0 0 5px #fff2b9); }

.rotate-message { display: none; position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #12091c; }
.rotate-message img { position: absolute; display: block; user-select: none; pointer-events: none; }
.rotate-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rotate-arrow { left: 18%; top: 25.2%; width: 64%; height: auto; transform-origin: 50% 53%; animation: device-turn 2.4s ease-in-out infinite; }
.rotate-stars { left: 30.7%; top: 31.1%; width: 38.6%; height: auto; animation: rotate-twinkle 1.8s ease-in-out infinite alternate; }
.rotate-copy { left: 16.8%; top: 60.6%; width: 66.4%; height: auto; animation: copy-pulse 2.1s ease-in-out infinite alternate; }
@keyframes device-turn { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(8deg); } }
@keyframes rotate-twinkle { from { opacity: .7; transform: scale(.97); filter: brightness(.9); } to { opacity: 1; transform: scale(1.035); filter: brightness(1.25) drop-shadow(0 0 8px #ffd2f0); } }
@keyframes copy-pulse { from { opacity: .82; transform: scale(.985); filter: brightness(.92); } to { opacity: 1; transform: scale(1.02); filter: brightness(1.18) drop-shadow(0 0 10px #ff9add); } }

@media (orientation: portrait) {
  .desktop { display: none; }
  .rotate-message { display: block; }
}
@media (any-hover: none) and (any-pointer: coarse) {
  body,
  button,
  a,
  [role="button"] { cursor: auto !important; }
  .custom-cursor { display: none !important; }
}
@media (any-hover: none) {
  button:hover,
  a:hover {
    transform: none !important;
    filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  button:hover img,
  a:hover img {
    transform: none !important;
    filter: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}