/* =====================================================
   1. FONTS
   ===================================================== */

/* CUSTOM FONTS */

@font-face {
  font-family: "TuskerGrotesk-3600Semibold";
  src: url("fonts/TuskerGrotesk-3600Semibold.otf") format("opentype");
}

@font-face {
  font-family: "Cocogoose-Classic-Medium";
  src: url("fonts/Cocogoose-Classic-Medium.otf") format("opentype");
}

@font-face {
  font-family: "Cocogoose-Classic-Extra-Bold";
  src: url("fonts/Cocogoose-Classic-Extra-Bold.otf") format("opentype");
}

@font-face {
  font-family: "Cocogoose-Classic-Regular";
  src: url("fonts/Cocogoose-Classic-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Cocogoose-Classic-Extra-Light";
  src: url("fonts/Cocogoose-Classic-Extra-Light.otf") format("opentype");
}

/* =====================================================
   2. GLOBAL VARIABLES
   ===================================================== */

:root {
  --font-title: "TuskerGrotesk-3600Semibold";
  --font-windowtitle: "Cocogoose-Classic-Medium";
  --font-subtitle: "Cocogoose-Classic-Extra-Bold";
  --font-paragraph: "Cocogoose-Classic-Regular";
  --font-subtext: "Cocogoose-Classic-Extra-Light";

  --brand-black: #1a1a1a;
  --brand-orange: #f6a23a;
  --brand-muted: rgba(26, 26, 26, 0.6);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* =====================================================
   3. TYPOGRAPHY
   ===================================================== */

/* TITLES */

h1 {
  font-family: var(--font-title);
}

/* IMPROVE TITLE RENDERING */

h1,
h2,
h3 {
  text-rendering: geometricPrecision;
}

/* WINDOW TITLES */

.window-title,
.main-window-title {
  font-family: var(--font-windowtitle);
}

/* SUBTITLES / NAV LABELS */

h2,
h3,
.nav-grid span {
  font-family: var(--font-subtitle);
}

/* MAIN PARAGRAPH TEXT */

p {
  font-family: var(--font-paragraph);
}

/* SMALLER SUPPORT TEXT */

.subtext {
  font-family: var(--font-subtext);
}

/* =====================================================
   4. LETTER SPACING / TYPE FEEL
   ===================================================== */

h1 {
  letter-spacing: 0.025em;
}

.window-title,
.main-window-title {
  letter-spacing: 0.04em;
}

.nav-grid span {
  letter-spacing: 0.03em;
}

p {
  letter-spacing: 0.01em;
}

/* =====================================================
   5. THEMES//SOUND
   ===================================================== */

body.light {
  --bg: #f4f7fa;
  --text: #111;
  --muted: rgba(32, 38, 46, 0.5);
  --window: rgba(248, 250, 252, 0.9);
}

body.dark {
  --bg: #0f1724;
  --text: #f6f6f4;
  --muted: rgba(255, 255, 255, 0.5);
  --window: rgba(242, 238, 234, 0.12);
}

body.dark .theme-toggle,
body.dark .sound-toggle {
  color: rgba(255, 255, 255, 0.82);
}

.theme-toggle,
.sound-toggle {
  position: fixed;
  top: 30px;
  z-index: 1000;

  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;

  font-size: 0;
  color: transparent;

  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}

/* desktop */
.theme-toggle {
  right: 40px;
}

.sound-toggle {
  right: 84px;
}

/* THEME ICONS */
body.light .theme-toggle {
  background-image: url("images/icons/Light.svg");
}

body.dark .theme-toggle {
  background-image: url("images/icons/Dark.svg");
}

/* SOUND ICONS */
/* LIGHT MODE */
body.light:not(.sound-off) .sound-toggle {
  background-image: url("images/icons/Sound-On.svg");
}

body.light.sound-off .sound-toggle {
  background-image: url("images/icons/Sound-Off.svg");
}

/* DARK MODE */
body.dark:not(.sound-off) .sound-toggle {
  background-image: url("images/icons/Sound-On-Dark.svg");
}

body.dark.sound-off .sound-toggle {
  background-image: url("images/icons/Sound-Off-Dark.svg");
}

body.dark .sound-toggle {
  filter: drop-shadow(0 0 6px rgba(160, 190, 255, 0.35));
  transition: filter 0.3s ease;
}

body.dark .sound-toggle:hover {
  filter: drop-shadow(0 0 10px rgba(160, 190, 255, 0.55));
}

/* mobile ONLY */
@media (max-width: 900px) {
  .theme-toggle,
  .sound-toggle {
    top: 18px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .theme-toggle {
    right: 14px !important;
    transform: none !important;
  }

  .sound-toggle {
    right: 14px !important;
    transform: translateX(-38px) translateY(6px) !important;
  }
}
/* =====================================================
   6. GLOBAL LAYOUT
   ===================================================== */

body {
  margin: 0;
  background: radial-gradient(
    circle at 50% 22%,
    rgba(250, 252, 255, 0.98) 0%,
    rgba(244, 247, 251, 0.97) 38%,
    rgba(238, 242, 247, 0.95) 72%,
    rgba(232, 236, 241, 0.93) 100%
  );
  color: var(--text);
  font-family: var(--font-paragraph);
  height: 100%;
  overflow: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.dark {
  background: radial-gradient(
    circle at 50% 20%,
    rgba(38, 52, 82, 0.96) 0%,
    rgba(24, 35, 58, 0.96) 38%,
    rgba(15, 24, 40, 0.98) 72%,
    rgba(10, 16, 28, 1) 100%
  );
}

/* =====================================================
   7. UI ELEMENTS
   ===================================================== */

/* GRAIN TEXTURE */

.grain {
  position: fixed;
  inset: 0;
  background-image: url("https://grainy-gradients.vercel.app/noise.svg");
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

/* BACKGROUND TEXT */

.background-text {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -20%);
  font-size: clamp(150px, 21vw, 400px);
  line-height: 1.15;
  opacity: 0.065;
  pointer-events: none;
  z-index: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-family: var(--font-title);

  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 58%,
    rgba(0, 0, 0, 0.82) 72%,
    rgba(0, 0, 0, 0.42) 86%,
    rgba(0, 0, 0, 0.08) 96%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 58%,
    rgba(0, 0, 0, 0.82) 72%,
    rgba(0, 0, 0, 0.42) 86%,
    rgba(0, 0, 0, 0.08) 96%,
    rgba(0, 0, 0, 0) 100%
  );
}

body.dark .background-text {
  opacity: 0.16;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 20px rgba(120, 160, 255, 0.12);

  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 54%,
    rgba(0, 0, 0, 0.8) 70%,
    rgba(0, 0, 0, 0.38) 84%,
    rgba(0, 0, 0, 0.07) 95%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 54%,
    rgba(0, 0, 0, 0.8) 70%,
    rgba(0, 0, 0, 0.38) 84%,
    rgba(0, 0, 0, 0.07) 95%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* =====================================================
   8. HERO SECTION
   ===================================================== */

.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 120px;
  z-index: 2;
}

/* MAIN TITLE */

.hero-title {
  column-gap: 6px;
  row-gap: 0px;
  font-family: "TuskerGrotesk-3600Semibold", sans-serif;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  top: -135px;
}

.title-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.title-saya,
.title-aku {
  font-size: 130px;
  line-height: 0.95;
  font-weight: 600;
}

.title-aku {
  color: #f4a037;
}

/* CREATIONS SUBTITLE */

.hero-subtitle {
  position: relative;
  top: -130px;
  transform: translateX(113px);
  font-size: 24px;
  letter-spacing: 0.24em;
  font-family: "Cocogoose-Classic-Extra-Bold", sans-serif;
}

/* AKU ACCENT */

.hero-title-accent {
  color: var(--brand-orange);
  position: relative;
  display: inline-block;
}

/* =====================================================
   8.5. Merged Image Block
   ===================================================== */

.project-card img,
.gallery-block img,
#gallery-content img,
.window-image {
  width: 100%;
  display: block;
}

/* slight rounding only for overview cards */
.project-card img {
  border-radius: 5px;
}

/* ===== OPTIONAL UI ENHANCEMENTS START ===== */

/* Gallery image interaction */
.project-card img {
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.project-card:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* Prevent image dragging */
.project-card img,
.gallery-block img {
  user-select: none;
  -webkit-user-drag: none;
}

/* ===== OPTIONAL UI ENHANCEMENTS END ===== */

/* =====================================================
  8.6 STICKY NOTE IMAGE OVERRIDE
===================================================== */

.about-sticky img {
  width: 280px; /* desired width */
  height: auto; /* preserve aspect ratio */
  display: block;
}

/* =====================================================
   9. NAVIGATION GRID
   ===================================================== */

.nav-grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  gap: 78px;
  margin-bottom: 0;
  padding-top: 72px;
}

.hero {
  justify-content: center;
  align-items: flex-start;
  padding-top: 150px;
}

.nav-grid button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@keyframes navFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}

.nav-grid button img {
  animation: navFloat 6s ease-in-out infinite;
  transform-origin: center center;
}

.nav-grid button:nth-child(2) {
  animation-delay: 0.5s;
}
.nav-grid button:nth-child(3) {
  animation-delay: 1s;
}
.nav-grid button:nth-child(4) {
  animation-delay: 1.5s;
}
.nav-grid button:nth-child(5) {
  animation-delay: 2s;
}

/* LIGHT MODE */
.nav-grid button:nth-child(1) img {
  content: url("images/icons/About.svg");
}

.nav-grid button:nth-child(2) img {
  content: url("images/icons/Projects.svg");
}

.nav-grid button:nth-child(3) img {
  content: url("images/icons/Designs.svg");
}

.nav-grid button:nth-child(4) img {
  content: url("images/icons/Misc.svg");
}

.nav-grid button:nth-child(5) img {
  content: url("images/icons/Contact.svg");
}

/* DARK MODE */
body.dark .nav-grid button:nth-child(1) img {
  content: url("images/icons/About-Dark.svg");
}

body.dark .nav-grid button:nth-child(2) img {
  content: url("images/icons/Projects-Dark.svg");
}

body.dark .nav-grid button:nth-child(3) img {
  content: url("images/icons/Designs-Dark.svg");
}

body.dark .nav-grid button:nth-child(4) img {
  content: url("images/icons/Misc-Dark.svg");
}

body.dark .nav-grid button:nth-child(5) img {
  content: url("images/icons/Contact-Dark.svg");
}

.nav,
.nav button,
.hero-buttons,
.hero-buttons button {
  pointer-events: auto;
  position: relative;
  z-index: 20;
}

.nav-grid img {
  width: 108px;
  height: 74px;
  object-fit: contain;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.9, 0.2, 1),
    opacity 0.35s ease,
    filter 0.6s ease;
}

.nav-grid span {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.62);
}

body.dark .nav-grid span {
  color: rgba(255, 255, 255, 0.68);
}

/* HOVER EFFECT */

.nav-grid button:hover img {
  transform: translateY(-3px) scale(1.04);
  opacity: 1;
}

body.dark .nav-grid img {
  filter: brightness(1);
}

.nav-grid button {
  position: relative;
}

.nav-grid button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 78px;
  height: 78px;
  transform: translate(-50%, -50%) scale(0.92);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

body.dark .nav-grid button::after {
  background: radial-gradient(
    circle,
    rgba(150, 185, 255, 0.34) 0%,
    rgba(120, 160, 255, 0.22) 35%,
    rgba(120, 160, 255, 0.1) 58%,
    rgba(120, 160, 255, 0) 76%
  );
  filter: blur(14px);
}

body.dark .nav-grid button:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}
/* =====================================================
   10. HERO TEXT
   ===================================================== */

.hero-paragraph {
  font-family: var(--font-paragraph);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--brand-muted);
  margin-top: 80px;
  text-align: center;

  opacity: 0;
  transform: translateY(20px);
  animation: riseIn 0.8s ease forwards;
  animation-delay: 0.15s;
}

/* =====================================================
   11. OVERLAY
   ===================================================== */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
  pointer-events: none;
}

.overlay.active {
  opacity: 1;
}

/* =====================================================
   12. HERO WINDOW
   ===================================================== */

.hero-window {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  height: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.dark .hero-window {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.main-window-bar,
.main-window-close {
  display: none !important;
}

.hero-float {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.hero-float-top-left {
  top: 24px;
  left: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.72);
}

.hero-float-top-sub {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(20, 20, 20, 0.48);
}

.hero-float-bottom {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.72);

  pointer-events: auto;
  text-align: center;

  width: max-content;
  max-width: calc(100vw - 32px);
}

.hero-bottom-line-main,
.hero-bottom-line-sub {
  display: block;
  text-align: center;
  width: 100%;
}

.hero-bottom-line-main {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-bottom-line-sub {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}

.hero-contact-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 2px;
}

.hero-contact-icons a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  color: inherit;
  text-decoration: none;

  opacity: 0.75;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.hero-contact-icons a:hover {
  transform: translateY(-2px);
  opacity: 1;
}

body.dark .hero-float-top-left {
  color: rgba(255, 255, 255, 0.76);
}

body.dark .hero-float-top-sub {
  color: rgba(255, 255, 255, 0.56);
}

body.dark .hero-float-bottom {
  color: rgba(255, 255, 255, 0.5);
}

body.dark .hero-bottom-line-sub {
  opacity: 0.82;
}

.hero-content {
  margin-top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-title,
.hero-subtitle,
.hero-paragraph {
  display: none;
}

/* =====================================================
   13. MAIN HERO WINDOW BAR
   ===================================================== */

.main-window-bar {
  position: absolute;
  overflow: hidden;

  top: 0;
  left: 0;
  right: 0;

  height: 46px;

  display: flex;
  align-items: center;

  padding: 0 24px 0 16px;

  border-radius: 10px 10px 0 0;

  background: rgba(66, 72, 80, 0.88);
  border-bottom: 1px solid rgba(24, 28, 34, 0.28);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.main-window-title {
  font-family: "Cocogoose-Classic-Regular", sans-serif;
  font-size: 0.74rem;
  font-weight: 400;

  color: rgba(244, 247, 250, 0.9);

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.dark .main-window-bar {
  background: rgba(244, 239, 234, 0.16);
  border-bottom: 1px solid rgba(240, 235, 230, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 250, 246, 0.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.dark .main-window-title {
  color: rgba(252, 248, 244, 0.9);
}

/* =====================================
   UNIVERSAL WINDOW CLOSE BUTTON
===================================== */

.main-window-close {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  cursor: pointer;

  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;

  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0.82;
  overflow: visible;
  z-index: 10;

  transition:
    opacity 0.18s ease,
    filter 0.2s ease;
}

.main-window-close:hover {
  opacity: 1;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 4px rgba(210, 220, 232, 0.2));
}

body.dark .main-window-close:hover {
  filter: drop-shadow(0 0 5px rgba(236, 242, 255, 0.2));
}

.main-window-close::before,
.main-window-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2px;
  height: 14px;
  border-radius: 999px;
  transform-origin: center center;
  background: rgba(244, 247, 250, 0.86);
}

body.dark .main-window-close::before,
body.dark .main-window-close::after {
  background: rgba(252, 248, 244, 0.9);
}

.main-window-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.main-window-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =====================================
   DRAGGABLE WINDOW CLOSE BUTTON
===================================== */

.window-close {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  cursor: pointer;

  width: 20px;
  height: 20px;

  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);

  display: block;
  opacity: 1;
  z-index: 20;
  overflow: visible;
}

.window-close::before,
.window-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.4px;
  height: 15px;
  border-radius: 999px;
  background: rgba(246, 248, 250, 0.94);
  transform-origin: center center;
  transition: transform 0.28s ease;
}

.window-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.window-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.dark .window-close::before,
body.dark .window-close::after {
  background: rgba(252, 248, 244, 0.92);
}

.window-close:hover::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

.window-close:hover::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* =====================================================
   15. DRAGGABLE WINDOW BAR
   ===================================================== */

.window-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 0 16px 0 18px;
  box-sizing: border-box;

  border-radius: 10px 10px 0 0;

  background: rgba(66, 72, 80, 0.9);
  border-bottom: 1px solid rgba(30, 34, 40, 0.3);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  cursor: grab;
  user-select: none;

  z-index: 5;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.dark .window-bar {
  background: rgba(244, 239, 234, 0.16);
  border-bottom: 1px solid rgba(240, 235, 230, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 250, 246, 0.08);
}

/* BAR SEPARATOR LINE */

.window-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.08),
    transparent
  );
}

body.dark .window-bar::after {
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
}

/* =====================================
  15.5 WINDOW FULLSCREEN BUTTON
===================================== */

.window-fullscreen {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  width: 18px;
  height: 18px;

  position: absolute;
  top: 50%;
  right: 42px;
  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0.9;
  z-index: 20;
}

.window-fullscreen::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 1.8px solid rgba(246, 248, 250, 0.9);
  border-radius: 2px;
  box-sizing: border-box;
}

body.dark .window-fullscreen::before {
  border-color: rgba(252, 248, 244, 0.9);
}

.window-fullscreen:hover {
  opacity: 1;
}

/* fullscreen active state */
.window.is-fullscreen .window-fullscreen::before {
  width: 12px;
  height: 12px;
  box-shadow:
    inset 0 0 0 1px transparent,
    -2px 2px 0 -1px currentColor;
}

/* =====================================================
   16. WINDOW TITLE
   ===================================================== */

.window .window-title {
  font-family: "Cocogoose-Classic-Regular", sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(246, 248, 250, 0.94);
  text-shadow: 0 1px 0 rgba(22, 26, 32, 0.22);
}

body.dark .window .window-title {
  color: rgba(252, 248, 244, 0.9);
}

/* =====================================================
   18. WINDOW CONTAINER
   ===================================================== */

.window {
  background: rgba(248, 250, 252, 0.85);

  height: 600px;
  width: 720px;
  min-width: 720px;

  padding: 70px 24px 32px;

  position: absolute;
  display: none;

  z-index: 200;
  pointer-events: none;
  cursor: default;

  border: 1px solid rgba(108, 116, 126, 0.18);

  box-shadow:
    0 28px 64px rgba(112, 122, 134, 0.12),
    0 12px 28px rgba(112, 122, 134, 0.08),
    0 3px 8px rgba(112, 122, 134, 0.05);

  border-radius: 10px;

  overflow: hidden;
  overflow-x: hidden;

  will-change: transform;

  max-height: 95vh;

  transition:
    transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.25s ease,
    box-shadow 0.25s ease;

  scrollbar-width: none;
  -ms-overflow-style: none;

  outline: 1px solid rgba(255, 255, 255, 0.16);
  outline-offset: -1px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.window,
.window.is-fullscreen {
  box-sizing: border-box;
}

.window::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  pointer-events: none;
  border-radius: 18px;

  background: radial-gradient(
    ellipse at center,
    rgba(188, 198, 210, 0.14) 0%,
    rgba(188, 198, 210, 0.07) 34%,
    rgba(188, 198, 210, 0.025) 56%,
    rgba(188, 198, 210, 0) 74%
  );

  filter: blur(20px);
  opacity: 0.95;
  transform: scale(0.98);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

body.dark .window::before {
  background: radial-gradient(
    ellipse at center,
    rgba(120, 145, 220, 0.18) 0%,
    rgba(120, 145, 220, 0.09) 34%,
    rgba(120, 145, 220, 0.035) 56%,
    rgba(120, 145, 220, 0) 74%
  );
}

.window[style*="display: block"]::before {
  opacity: 0.78;
  transform: scale(1);
}

body.dark .window {
  background: rgba(242, 238, 234, 0.18);

  border: 1px solid rgba(240, 235, 230, 0.18);

  box-shadow:
    0 34px 76px rgba(18, 18, 24, 0.46),
    0 14px 32px rgba(30, 30, 40, 0.28),
    0 4px 10px rgba(12, 12, 18, 0.2);

  outline: 1px solid rgba(255, 248, 242, 0.07);
}

.window[style*="display: block"] {
  pointer-events: auto;
}

/* ===== OPTIONAL UI ENHANCEMENTS START ===== */

.window {
  transition:
    transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}

.window:hover {
  box-shadow:
    0 34px 80px rgba(116, 126, 138, 0.16),
    0 16px 38px rgba(116, 126, 138, 0.11),
    0 4px 12px rgba(116, 126, 138, 0.07);
}

/* ===== OPTIONAL UI ENHANCEMENTS END ===== */

/* =====================================
  18.5 WINDOW FULLSCREEN MODE
===================================== */

.window.is-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  max-height: 100vh !important;

  border-radius: 0 !important;
  z-index: 9000 !important;

  padding: 70px 24px 32px !important;
}

.window.is-fullscreen .resize-handle {
  display: none !important;
  pointer-events: none !important;
}

/* keep fullscreen bar contents clean and aligned */
.window.is-fullscreen .window-bar {
  padding: 0 68px 0 18px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* keep title from colliding with right-side controls */
.window.is-fullscreen .window-title {
  max-width: calc(100% - 96px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* right-side controls */
.window.is-fullscreen .window-fullscreen {
  right: 42px !important;
  top: 50%;
  transform: translateY(-50%);
}

.window.is-fullscreen .window-close {
  right: 14px !important;
  top: 50%;
  transform: translateY(-50%);
}

.window.is-fullscreen .window-scroll {
  max-height: calc(100vh - 56px) !important;
}
#projects.is-fullscreen .window-scroll {
  padding-left: 12.5vw !important;
  padding-right: 12.5vw !important;
  box-sizing: border-box;
}

#projects.is-fullscreen [data-tab="overview"],
#projects.is-fullscreen [data-tab="gallery"],
#projects.is-fullscreen [data-tab="process"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#projects.is-fullscreen,
#designs.is-fullscreen {
  resize: none;
}

/* =====================================
  18.7 WINDOW EDGE SHAKE
===================================== */

.window.edge-shake {
  animation: edgeShake 0.22s ease;
}

@keyframes edgeShake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

/* =====================================================
   19. WINDOW SCROLL SYSTEM
   ===================================================== */

.window-scroll {
  position: relative;

  top: 56px;

  left: 0;
  right: 0;
  bottom: 0;

  overflow-y: auto;
  overflow-x: hidden;

  max-height: calc(100% - 56px);
}

/* SCROLLBAR HIDE */

.window::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.window::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

/* =====================================================
   20. WINDOW STATES
   ===================================================== */

.window.dragging {
  transform: scale(1.015);
  box-shadow:
    0 42px 96px rgba(108, 118, 130, 0.18),
    0 18px 40px rgba(108, 118, 130, 0.13),
    0 6px 14px rgba(108, 118, 130, 0.08);
}

.window:active {
  cursor: grabbing;

  box-shadow:
    0 48px 110px rgba(104, 114, 126, 0.2),
    0 20px 48px rgba(104, 114, 126, 0.15),
    0 8px 18px rgba(104, 114, 126, 0.1);
}

.window.dragging::before {
  opacity: 1;
  transform: scale(1.02);
}

body.dark .window:active {
  box-shadow:
    0 52px 120px rgba(24, 34, 68, 0.65),
    0 22px 52px rgba(40, 56, 96, 0.4),
    0 8px 20px rgba(18, 26, 48, 0.3);
}

body.dark .window.dragging {
  box-shadow:
    0 46px 110px rgba(24, 34, 68, 0.58),
    0 20px 44px rgba(40, 56, 96, 0.34),
    0 6px 14px rgba(18, 26, 48, 0.24);
}

.window.opening {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
}

.window.closing {
  opacity: 0;
  transform: scale(0.98);
}

/* =====================================================
   21. PROJECT WINDOW ADJUSTMENTS
===================================================== */

#projects {
  padding: 0 !important;
  overflow: hidden;
  width: min(62.5vw, 1200px);
  height: min(82vh, 1040px);
  min-width: 720px;
}

#projects .window-scroll {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 0;
  scroll-behavior: smooth;
  z-index: 1;
}

#projects .window-scroll,
#projects .tab-content,
#projects .gallery-layout,
#projects .gallery-block {
  position: relative;
  z-index: 1;
}

#projects .window-scroll > .tab-content {
  position: relative;
}

/* hide scrollbar only in Overview */
#projects[data-active-tab="overview"] .window-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#projects[data-active-tab="overview"] .window-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* thin custom scrollbar for Gallery + Process */
#projects[data-active-tab="gallery"] .window-scroll::-webkit-scrollbar,
#projects[data-active-tab="process"] .window-scroll::-webkit-scrollbar {
  width: 8px;
}

#projects[data-active-tab="gallery"] .window-scroll::-webkit-scrollbar-track,
#projects[data-active-tab="process"] .window-scroll::-webkit-scrollbar-track {
  background: transparent;
}

#projects[data-active-tab="gallery"] .window-scroll::-webkit-scrollbar-thumb,
#projects[data-active-tab="process"] .window-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}

body.dark
  #projects[data-active-tab="gallery"]
  .window-scroll::-webkit-scrollbar-thumb,
body.dark
  #projects[data-active-tab="process"]
  .window-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}

#projects[data-active-tab="gallery"] .window-scroll,
#projects[data-active-tab="process"] .window-scroll {
  scrollbar-width: thin;
}

/* shared panel spacing */
#projects .tab-content {
  display: none;
  min-height: 100%;
  box-sizing: border-box;
}

#projects .tab-content.active {
  display: block;
}

/* overview */
#projects [data-tab="overview"] {
  padding: 14px 12px 18px;
}

/* gallery + process */
#projects [data-tab="gallery"],
#projects [data-tab="process"] {
  padding: 14px 8px 28px 8px;
  box-sizing: border-box;
}

#projects [data-tab="gallery"] > *:first-child,
#projects [data-tab="process"] > *:first-child {
  margin-top: 0 !important;
}

/* =====================================================
   22. GLOBAL DRAG SYSTEM
   ===================================================== */

body.dragging {
  user-select: none;
}

#desktop {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100%;
}

/* =====================================================
   23. ABOUT WINDOW
   ===================================================== */

#about {
  height: 640px;
  flex-direction: column;
  overflow: visible !important;
  padding-top: 10px;
}

/* =====================================
  23.5 NEUTRAL BASE WINDOWS
===================================== */

#about,
#contact {
  background: rgba(248, 250, 252, 0.88);
}

body.dark #about,
body.dark #contact {
  background: rgba(242, 238, 234, 0.12);
}

/* =====================================
  23.6 PROJECTS WINDOW VARIATION
===================================== */

#projects {
  background: rgba(247, 249, 251, 0.89);
}

body.dark #projects {
  background: rgba(236, 239, 242, 0.13);
}

body.dark #projects .window-bar {
  background: rgba(244, 239, 234, 0.16);
  border-bottom: 1px solid rgba(240, 235, 230, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 250, 246, 0.08);
}

/* =====================================
  23.8 MISC WINDOW VARIATION
===================================== */

#misc {
  background: rgba(246, 248, 250, 0.89);
}

#misc .window-bar {
  background: rgba(72, 78, 86, 0.9);
  border-bottom: 1px solid rgba(30, 34, 40, 0.3);
}

body.dark #misc {
  background: rgba(236, 240, 244, 0.13);
}

body.dark #misc .window-bar {
  background: rgba(232, 240, 246, 0.16);
  border-bottom: 1px solid rgba(218, 228, 236, 0.14);
}

/* =====================================================
   24. MISC UI
   ===================================================== */

.close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 1.4rem;
  cursor: pointer;
}

/* =====================================================
   25. ABOUT WINDOW STRUCTURE
   ===================================================== */

.about-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 56px; /* account for window bar */
  position: relative;
}

/* =====================================================
   26. ABOUT INTRO / TOP SECTION
   ===================================================== */

.about-intro {
  position: sticky;
  top: 0;
  flex-shrink: 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  padding: 30px 0px 40px 340px;
  min-height: 180px;

  background: var(--window);
  z-index: 5;
}

/* =====================================================
   27. ABOUT TITLE BLOCK
   ===================================================== */

.about-top {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.about-title {
  position: relative;
  min-width: 200px;
  width: fit-content;

  margin-top: 0;
  margin-left: 120px;
  padding-top: 10px;

  text-align: right;

  display: flex;
  flex-direction: column;
  gap: 3px;

  z-index: 10;
}

/* NAME */

.about-name {
  font-size: 48px;
  font-weight: 700;
  color: #f4a037;

  margin: 0;
  text-align: left;
}

/* ROLE / TITLE */

.about-role {
  font-size: 20px;
  font-weight: 600;

  color: var(--text);

  margin: 0;

  letter-spacing: 1px;
  text-transform: uppercase;

  text-align: left;

  display: inline-block;
  white-space: nowrap;
}

/* =====================================================
   28. ABOUT GRID SCROLL AREA
   ===================================================== */

.about-grid-scroll {
  flex: 1;

  overflow-y: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 60px;

  margin-top: 0px;
}

/* LEFT COLUMN */

.about-bio {
  line-height: 1.6;
  font-size: 0.95rem;
}

/* RIGHT COLUMN */

.about-meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.meta-title {
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

/* =====================================================
   29. ABOUT BOTTOM LAYOUT
   ===================================================== */

.about-bottom {
  display: flex;
  gap: 40px;

  padding: 20px 40px 44px;
  height: calc(100% - 120px);

  overflow: hidden;
  box-sizing: border-box;
}

/* =====================================================
   30. BIO SCROLL AREA
   ===================================================== */

.about-bio-scroll {
  flex: 1;
  max-height: 100%;

  overflow-y: auto;

  padding-right: 10px;
  padding-bottom: 56px;

  margin-top: 0;

  box-sizing: border-box;

  margin-right: -26px;
}

.about-bio p:last-child {
  margin-bottom: 1.5em;
}

/* SCROLLBAR */

.about-bio-scroll::-webkit-scrollbar {
  width: 4px;
}

.about-bio-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.about-heading {
  margin-top: 28px;
  margin-bottom: 8px;
  font-weight: 600;
}

.about-indent {
  border-left: 2px solid #dcdcdc;
  padding-left: 14px;
}

.about-indent p {
  font-size: 14px !important;
}

.about-text {
  padding-left: 0;
}
/* =====================================================
   31. ABOUT RIGHT SIDE
   ===================================================== */

.about-right {
  position: relative;
  flex: none;
}

/* =====================================================
   32. STICKY NOTE / SECRET POLAROID
===================================================== */

.about-sticky {
  width: 280px !important;
  max-width: 280px !important;
  min-width: 280px !important;
  position: absolute;
  left: 20px;
  transform-origin: center center;
  transition:
    opacity 0.28s ease,
    transform 0.34s ease,
    box-shadow 0.28s ease;
}

.about-polaroid-secret {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  position: absolute;
  left: 20px;
  transform-origin: center center;
  transition:
    opacity 0.28s ease,
    transform 0.34s ease,
    box-shadow 0.28s ease;
}

/* sticky note sits a bit higher */
.about-sticky {
  top: 10px;
  --drag-tilt: -4deg;
  transform: rotate(var(--drag-tilt)) scale(1);
  z-index: 51;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}

.about-sticky:hover {
  transform: rotate(calc(var(--drag-tilt) + 2deg)) translateY(-3px);
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.32);
}

.about-sticky img {
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  display: block !important;
}

/* tape on sticky */
.about-sticky::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 92px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    rgba(255, 250, 225, 0.82),
    rgba(238, 224, 180, 0.62)
  );
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.about-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -12px 18px rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

/* falling animation trigger */
#about.sticky-falling .about-sticky {
  opacity: 1;
  pointer-events: none;
  animation: stickyDrop 1.05s linear forwards;
}

@keyframes stickyDrop {
  0% {
    transform: rotate(var(--drag-tilt)) translateY(0) translateX(0);
  }

  10% {
    transform: rotate(calc(var(--drag-tilt) + 1deg)) translateY(8px)
      translateX(0);
  }

  24% {
    transform: rotate(calc(var(--drag-tilt) + 3deg)) translateY(28px)
      translateX(1px);
  }

  46% {
    transform: rotate(calc(var(--drag-tilt) + 7deg)) translateY(150px)
      translateX(3px);
  }

  72% {
    transform: rotate(calc(var(--drag-tilt) + 11deg)) translateY(430px)
      translateX(5px);
  }

  100% {
    transform: rotate(calc(var(--drag-tilt) + 15deg)) translateY(980px)
      translateX(8px);
  }
}

#about.show-secret .about-sticky {
  opacity: 0 !important;
  pointer-events: none;
}

#about.sticky-falling .about-sticky::before {
  animation: tapePeel 0.22s ease forwards;
}

@keyframes tapePeel {
  0% {
    transform: translateX(-50%) rotate(-3deg) scaleY(1);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) rotate(-6deg) translateY(-1px) scaleY(0.94);
    opacity: 0.82;
  }
}

/* secret polaroid sits LOWER than sticky */
.about-polaroid-secret {
  top: 32px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-3deg) scale(0.96);

  background: linear-gradient(to bottom, #fffef9 0%, #fdfaf2 58%, #f6f1e7 100%);
  padding: 14px 14px 62px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.12);
}

/* image inside secret polaroid */
.about-polaroid-secret img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.08);
}

/* top tape */
.about-polaroid-secret::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 92px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    rgba(255, 248, 220, 0.78),
    rgba(236, 223, 184, 0.62)
  );
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* extra tape pieces */
.about-polaroid-secret::after {
  content: "";
  position: absolute;
  top: 78%;
  right: -14px;
  width: 62px;
  height: 20px;
  transform: rotate(22deg);
  background: linear-gradient(
    to bottom,
    rgba(255, 248, 220, 0.68),
    rgba(236, 223, 184, 0.52)
  );
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

/* reveal state */
#about.show-secret .about-sticky {
  opacity: 0;
  pointer-events: none;
  transform: rotate(-14deg) translateY(80px) translateX(10px) scale(0.9);
}

#about.show-secret .about-polaroid-secret {
  opacity: 1;
  pointer-events: auto;
  transform: rotate(-2deg) scale(1);
}

.about-polaroid-secret .tape {
  position: absolute;
  display: block;
  background: linear-gradient(
    to bottom,
    rgba(255, 248, 220, 0.7),
    rgba(236, 223, 184, 0.52)
  );
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.about-polaroid-secret .tape-left {
  width: 54px;
  height: 18px;
  top: 16px;
  left: -12px;
  transform: rotate(-28deg);
}

.about-polaroid-secret .tape-right {
  width: 56px;
  height: 18px;
  bottom: 18px;
  right: -16px;
  transform: rotate(18deg);
}

/* =====================================================
   ABOUT PAGE
===================================================== */

/* SUBTEXT / DESCRIPTION */
.about-subtext {
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
  text-align: left;
  line-height: 1.4;
  opacity: 0.7;
}

body.dark .about-subtext {
  color: rgba(252, 248, 244, 0.92);
}

.about-scroll {
  max-height: none;
  overflow-y: visible;
  padding-right: 0px;
}

/* BIO TEXT */
.about-bio p {
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: 18px;
}

/* META INFO */
.meta-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.meta-block li {
  margin-bottom: 1px;
  font-size: 16px;
  line-height: 1.6;
}

.text-highlight {
  color: #f4a037;
  font-weight: 600;
}

/* =====================================================
   PROJECTS
===================================================== */

.project {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}

.project img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* =====================================================
   PROJECT IMAGE HOVER CAPTION
===================================================== */

.caption {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  opacity: 0;
  transition: opacity 0.3s ease;
}

.project:hover .caption {
  opacity: 1;
}

/* =====================================================
   WINDOW IMAGES
===================================================== */

.window img {
  display: block;
  max-width: 100%;
  height: auto;
}

.window-image {
  height: auto;
  border-radius: 10px;
  margin: 20px 0;
}

/* =====================================================
   RESIZE HANDLES
===================================================== */

.resize-handle {
  position: absolute;
  z-index: 50;
  pointer-events: all;
}

.resize-handle.right {
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  z-index: 1001;
  cursor: ew-resize;
}

.resize-handle.bottom {
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 12px;
  cursor: ns-resize;
}

.resize-handle.corner {
  right: -6px;
  bottom: -6px;
  width: 16px;
  height: 16px;
  z-index: 1002;
  cursor: nwse-resize;
}

/* =====================================
   PROJECT BAR TABS
===================================== */

#projects .project-window-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 0 68px 0 18px;

  overflow: hidden;
  z-index: 200 !important;

  background: rgba(66, 72, 80, 0.98) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transform: translateZ(0);
}

body.dark #projects .project-window-bar {
  background: rgba(244, 239, 234, 0.24) !important;
}

#projects .project-bar-left {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
  height: 48px;
  position: relative;
  z-index: 201;
  padding-right: 72px;
}

#projects .project-bar-tabs,
#projects .window-title {
  position: relative;
  z-index: 201;
}

#projects .window-title {
  margin: 0;
  line-height: 1;
  flex-shrink: 0;
}

#projects .window-fullscreen {
  top: 50%;
  right: 42px;
  transform: translateY(-50%);
}

#projects .window-close {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

#projects .project-bar-tabs {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
}

#projects .bar-tab {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: "Cocogoose-Classic-Regular", sans-serif;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;

  color: rgba(246, 248, 250, 0.62);
  cursor: pointer;
  transition: color 0.18s ease;
}

#projects .bar-tab:hover {
  color: rgba(246, 248, 250, 0.92);
}

#projects .bar-tab.active {
  color: var(--brand-orange);
}

#projects .bar-tab-divider {
  width: 1px;
  height: 12px;
  background: rgba(246, 248, 250, 0.22);
  flex: 0 0 1px;
}

body.dark #projects .bar-tab {
  color: rgba(252, 248, 244, 0.64);
}

body.dark #projects .bar-tab:hover {
  color: rgba(252, 248, 244, 0.92);
}

body.dark #projects .bar-tab.active {
  color: var(--brand-orange);
}

body.dark #projects .bar-tab-divider {
  background: rgba(252, 248, 244, 0.18);
}

/* =====================================================
   PROJECT GALLERY LAYOUT
===================================================== */

#projects .gallery-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 !important;
}

#projects .gallery-block {
  margin: 0 !important;
  padding: 0 !important;
}

#projects .gallery-block img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0 !important;
  padding: 0 !important;
}

/* =====================================================
   PAGE LOAD ANIMATIONS
===================================================== */

.hero h1,
.hero p,
.hero nav {
  opacity: 0;
  transform: translateY(20px);
  animation: riseIn 0.8s ease forwards;
}

.hero nav {
  animation-delay: 0.3s;
}

.background-text {
  animation: fadeIn 1.2s ease forwards;
}

@keyframes riseIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.03;
  }
}

/* =====================================================
   PROJECTS GRID (OVERVIEW TAB)
===================================================== */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* =====================================================
   PROJECT CARD
===================================================== */

/* Individual Project */
.project-card {
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
  background: transparent;
}

/* ===== OPTIONAL UI ENHANCEMENTS START ===== */

.project-card {
  border-radius: 4px;
  overflow: hidden;
}

/* ===== OPTIONAL UI ENHANCEMENTS END ===== */

/* Text Container */
.project-info {
  padding: 10px 6px 2px;
  text-align: center;
  position: relative;
}

.project-info::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: 0 auto 7px;
  background: rgba(0, 0, 0, 0.16);
}

body.dark .project-info::before {
  background: rgba(255, 255, 255, 0.16);
}

.project-info h3 {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
}

.project-info p {
  margin: 2px 0 0 0;
  font-size: 0.84rem;
  line-height: 1.36;
  opacity: 0.66;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

.project-card {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

/* =====================================================
   GALLERY CONTENT CONTAINER
===================================================== */

#gallery-content {
  width: 100%;
  overflow: hidden;
}

#gallery-content img {
  margin: 0 !important;
}

/* =====================================================
   GALLERY SLIDER
===================================================== */

.gallery-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

/* =====================================================
   EDITORIAL GALLERY LAYOUT
===================================================== */

.editorial .gallery-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.gallery-block {
  width: 100%;
  margin: 0 0 1px 0;
}

/* =====================================================
   OPTIONAL IMAGE ADJUSTMENTS
===================================================== */

/* Constrain extremely wide landscape crops */

.gallery-block.landscape img {
  width: 120%;
  margin-left: -10%;
}

/* =====================================
   DESIGNS WINDOW
===================================== */

#designs {
  background: rgba(249, 251, 253, 0.88);
  width: min(78vw, 1320px);
  height: min(82vh, 920px);
  min-width: 920px;
  padding: 0 !important;
  overflow: hidden;
}

body.dark #designs {
  background: rgba(244, 238, 232, 0.14);
}

#designs .window-bar {
  background: rgba(68, 74, 82, 0.9);
  border-bottom: 1px solid rgba(30, 34, 40, 0.3);
}

body.dark #designs .window-bar {
  background: rgba(244, 236, 230, 0.18);
  border-bottom: 1px solid rgba(236, 224, 214, 0.14);
}

/* scroll area */
#designs .window-scroll {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 30px 34px 42px;
  box-sizing: border-box;
  max-height: calc(100% - 56px);
}

/* container */
#designs .designs-container {
  display: flex;
  flex-direction: column;
  gap: 160px;
  padding: 0;
  margin: 0;
}

/* each project row */
#designs .design-item {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
  gap: 28px;
  align-items: start;
  margin: 0;
  padding: 0;
}

/* alternate layout */
#designs .design-item:nth-child(even) {
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.55fr);
}

#designs .design-item:nth-child(even) .design-images {
  order: 2;
}

#designs .design-item:nth-child(even) .design-text {
  order: 1;
}

/* image groups */
#designs .design-images {
  display: grid;
  gap: 14px;
  align-items: start;
  width: 100%;
}

#designs .design-images.one-image {
  grid-template-columns: minmax(0, 420px);
  justify-content: start;
}

#designs .design-images.two-images {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#designs .design-images.three-images {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* posters */
#designs .design-images img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 11 / 14;
  object-fit: contain;
  cursor: pointer;
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

#designs .design-images img:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* text column */
#designs .design-text {
  max-width: 36ch;
  padding-top: 8px;
  color: rgba(20, 20, 20, 0.88);
}

#designs .design-text h3 {
  margin: 0 0 14px;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: rgba(12, 12, 12, 0.96);
}

#designs .design-text p {
  margin: 0 0 16px;
  line-height: 1.72;
  font-size: 0.98rem;
  color: rgba(20, 20, 20, 0.78);
}

#designs .design-meta {
  display: inline-block;
  font-size: 0.83rem;
  opacity: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.48);
}

body.dark #designs .design-text {
  color: rgba(255, 255, 255, 0.88);
}

body.dark #designs .design-text h3 {
  color: rgba(255, 255, 255, 0.96);
}

body.dark #designs .design-text p {
  color: rgba(255, 255, 255, 0.74);
}

body.dark #designs .design-meta {
  color: rgba(255, 255, 255, 0.5);
}

/* fullscreen spacing */
#designs.is-fullscreen .window-scroll {
  padding: 42px 7vw 56px;
}

#designs.is-fullscreen .designs-container {
  gap: 96px;
}

/* responsive fallback */
@media (max-width: 1100px) {
  #designs {
    min-width: 760px;
  }

  #designs .design-item,
  #designs .design-item:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #designs .design-item:nth-child(even) .design-images,
  #designs .design-item:nth-child(even) .design-text {
    order: initial;
  }

  #designs .design-text {
    max-width: 100%;
  }

  #designs .design-images.three-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================
   MISC Window
===================================== */

/* TEMP debug */
#misc {
  z-index: 9999 !important;
  padding: 0 !important;
  overflow: hidden;
  width: min(72vw, 980px);
  height: min(72vh, 760px);
  min-width: 720px;
}

#misc .window-scroll {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: auto;
}

#misc .misc-scatter {
  position: relative;
  min-height: 100%;
  padding: 20px;
  margin: 0;
}

.misc-scatter {
  position: relative;
  min-height: 700px;
  padding: 40px;
}

/* photos */
.draggable-photo {
  position: absolute;
  width: 220px;
  cursor: grab;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  user-select: none;
  background: #fff;
  padding: 8px 8px 20px;
}

.draggable-photo {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  transform-origin: center center;
}

.draggable-photo.dragging {
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
}

.draggable-photo img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* stronger layered feel */
.draggable-photo:nth-child(odd) {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.draggable-photo:nth-child(even) {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

.draggable-photo::after {
  content: "Double-click to open";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(20, 20, 20, 0.82);
  color: white;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

.draggable-photo:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* little interaction polish */
.draggable-photo:active {
  cursor: grabbing;
  transform: scale(1.05) rotate(var(--rot));
}

/* =====================================
   CONTACT WINDOW LAYOUT
===================================== */

#contact {
  overflow: hidden;
  width: 26vw;
  height: 72vh;
  min-width: 400px;
  min-height: 640px;
}

#contact .contact-scroll {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;

  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 0;
}

#contact .contact-content {
  min-height: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  text-align: center;

  padding: 24px 38px 40px;
}

/* title higher up */
.contact-main-title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;

  color: rgba(20, 20, 20, 0.85);
}

/* short text under title */
.contact-description {
  margin: 6px 0 18px;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.7;
}

/* image takes about 1/3+ of window feel */
.contact-image-wrap {
  width: min(100%, 420px);
  height: 220px;

  margin: 18px 0 36px 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* subtext under image */
.contact-subtext {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  max-width: 34ch;

  margin-top: 10px;
  margin-bottom: 34px;
}

.contact-email {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

  font-size: 0.88rem;
  letter-spacing: 0.04em;

  white-space: nowrap;
}

.contact-email-label {
  opacity: 0.6;
}
.contact-email-address {
  color: rgba(20, 20, 20, 0.9);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.contact-email-address:hover {
  opacity: 0.7;
}

body.dark .contact-email-address {
  color: rgba(255, 255, 255, 0.9);
}

.contact-note {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.68;
}

/* button near bottom */
.contact-action {
  margin-top: auto;

  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  font-family: "Cocogoose-Classic-Regular", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* light */
body.light .contact-action {
  background: rgba(66, 72, 80, 0.92);
  color: rgba(244, 247, 250, 0.96);
}

/* dark */
body.dark .contact-action {
  background: rgba(244, 239, 234, 0.22);
  color: rgba(252, 248, 244, 0.94);
  border: 1px solid rgba(240, 235, 230, 0.16);
}

/* dark mode text tuning */
body.dark .contact-description,
body.dark .contact-note {
  color: rgba(255, 255, 255, 0.72);
}

body.dark .contact-email,
body.dark .contact-main-title {
  color: rgba(255, 255, 255, 0.86);
}

/* =====================================
   IMAGE VIEWER
===================================== */

.image-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.image-viewer.active {
  display: flex;
  opacity: 1;
}

#viewerImage {
  display: block;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 96px);
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
  position: relative;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transform: translate3d(0px, 0px, 0) scale(1);
  transform-origin: center center;
  transition:
    transform 0.22s ease,
    opacity 0.18s ease;
  opacity: 0;
  touch-action: none;
}

.image-viewer.active #viewerImage {
  opacity: 1;
}

#viewerImage.panning {
  transition: opacity 0.18s ease;
  cursor: grabbing;
}

#viewerImage.zoomed {
  cursor: grab;
}

@media (max-width: 900px) {
  .image-viewer {
    padding: 12px;
  }

  #viewerImage {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 120px);
  }

  #viewerZoom {
    top: 14px;
    right: 14px;
  }

  .viewer-hint {
    bottom: 14px;
    max-width: calc(100vw - 32px);
    text-align: center;
  }
}

/* =====================================
   VIEWER ZOOM BUTTON
===================================== */

#viewerZoom {
  position: fixed;
  top: 20px;
  right: 20px;

  background: rgba(20, 20, 20, 0.84);
  color: white;
  border: none;

  padding: 10px 15px;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;

  cursor: pointer;
  z-index: 100001;

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    opacity 0.15s ease;
}

#viewerZoom:hover {
  transform: scale(1.04);
  background: rgba(20, 20, 20, 0.94);
}

/* =====================================
   VIEWER HINT BUBBLE
===================================== */

#misc {
  position: absolute;
}

#misc .misc-window-note {
  position: absolute;
  top: 64px;
  right: 18px;
  z-index: 40;

  font-family: "Cocogoose-Classic-Regular", sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;

  color: rgba(20, 20, 20, 0.46);
  pointer-events: none;
}

body.dark #misc .misc-window-note {
  color: rgba(255, 255, 255, 0.52);
}

.viewer-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100002;

  background: rgba(20, 20, 20, 0.82);
  color: white;

  font-size: 12px;
  line-height: 1;
  padding: 8px 13px;
  border-radius: 999px;

  pointer-events: none;
  opacity: 0;

  transition: opacity 0.18s ease;
}

.image-viewer.active .viewer-hint {
  opacity: 1;
}

/* =====================================
   POLAROID BACKDROP
===================================== */

#polaroidBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 19990;
}

#polaroidBackdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* =====================================
   POLAROID POPUP
===================================== */

.polaroid-popup {
  position: fixed;
  left: 50%;
  top: 50%;

  width: min(62vw, 760px);
  background: linear-gradient(to bottom, #fffef9 0%, #fdfaf2 58%, #f6f1e7 100%);

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  padding: 18px 18px 92px 18px;

  box-shadow:
    0 32px 70px rgba(0, 0, 0, 0.24),
    0 14px 24px rgba(0, 0, 0, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.55) inset,
    0 -18px 28px rgba(0, 0, 0, 0.04) inset;

  transform: translate(-50%, -50%) scale(0.92) rotate(var(--pop-rot, 0deg));
  transform-origin: center center;

  opacity: 0;
  transition:
    transform 0.24s cubic-bezier(0.2, 0.9, 0.2, 1.15),
    opacity 0.18s ease;

  cursor: pointer;
  user-select: none;
  z-index: 20000;
  overflow: visible;
  isolation: isolate;
  filter: saturate(0.98) contrast(1.01);

  outline: 1px solid rgba(255, 255, 255, 0.25);
  outline-offset: -2px;
}

.polaroid-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(var(--pop-rot, 0deg));
}

/* little tape strip */
.polaroid-popup::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);

  width: 92px;
  height: 26px;

  background: linear-gradient(
    to bottom,
    rgba(255, 252, 232, 0.78),
    rgba(244, 232, 190, 0.62)
  );

  border-left: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);

  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);

  opacity: 0.95;
}

.polaroid-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 14% 18%,
      rgba(120, 92, 52, 0.05) 0 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 86% 78%,
      rgba(120, 92, 52, 0.045) 0 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 72% 14%,
      rgba(90, 70, 40, 0.035) 0 5px,
      transparent 6px
    ),
    radial-gradient(
      circle at 24% 84%,
      rgba(110, 90, 60, 0.03) 0 6px,
      transparent 7px
    ),
    linear-gradient(
      to right,
      rgba(120, 92, 52, 0.035) 0%,
      transparent 6%,
      transparent 94%,
      rgba(120, 92, 52, 0.03) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0) 10%,
      rgba(0, 0, 0, 0.015) 72%,
      rgba(0, 0, 0, 0.045) 100%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.012) 0px,
      rgba(0, 0, 0, 0.012) 1px,
      transparent 2px,
      transparent 4px
    );

  mix-blend-mode: multiply;
  opacity: 0.75;
}

.polaroid-popup::selection {
  background: transparent;
}

.polaroid-popup .polaroid-caption::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  filter: blur(8px);
  opacity: 0.45;
  pointer-events: none;
}

.polaroid-popup img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  background: #ece9df;
  border: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -8px 14px rgba(0, 0, 0, 0.035),
    0 3px 8px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.18);

  filter: contrast(1.01) saturate(0.99);
}

.polaroid-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  z-index: 1;

  text-align: center;
  font-size: 15px;
  line-height: 1.35;
  color: #2f2a24;
  letter-spacing: 0.01em;

  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

.polaroid-popup.about-secret::before {
  top: -14px;
}

.polaroid-popup.about-secret::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 26px;
  width: 74px;
  height: 22px;
  background: linear-gradient(
    to bottom,
    rgba(255, 250, 225, 0.78),
    rgba(238, 224, 180, 0.58)
  );
  transform: rotate(5deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* =========================
   Atmospheric Fog Layer
   ========================= */

.fog-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  mask-image: radial-gradient(
    ellipse at 50% 42%,
    transparent 0%,
    transparent 20%,
    rgba(0, 0, 0, 0.25) 38%,
    rgba(0, 0, 0, 0.7) 62%,
    black 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 42%,
    transparent 0%,
    transparent 20%,
    rgba(0, 0, 0, 0.25) 38%,
    rgba(0, 0, 0, 0.7) 62%,
    black 100%
  );
}

body.light .fog-layer {
  backdrop-filter: blur(16px);
  opacity: 0.9;
}

body.dark .fog-layer {
  backdrop-filter: blur(22px);
  opacity: 0.7;
}

/* =====================================================
   ATMOSPHERIC BACKGROUND STACK
   ===================================================== */

/* ---------------------------------
   1. Dark mode color wash
--------------------------------- */
.dark-wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

body.dark .dark-wash {
  opacity: 1;
  background: linear-gradient(
    to bottom,
    rgba(52, 72, 128, 0.14) 0%,
    rgba(28, 40, 76, 0.12) 26%,
    rgba(14, 22, 42, 0.1) 58%,
    rgba(8, 12, 24, 0.04) 100%
  );
}

/* ---------------------------------
   2. Hero bloom
--------------------------------- */
.hero-bloom {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-bloom::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 43%;
  width: 58vw;
  height: 38vh;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  filter: blur(42px);
  opacity: 0.75;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.1) 26%,
    rgba(255, 255, 255, 0.04) 48%,
    rgba(255, 255, 255, 0) 72%
  );
}

body.dark .hero-bloom::before {
  background: radial-gradient(
    ellipse at center,
    rgba(170, 195, 255, 0.12) 0%,
    rgba(135, 165, 255, 0.07) 28%,
    rgba(115, 135, 255, 0.03) 48%,
    rgba(255, 255, 255, 0) 72%
  );
  opacity: 0.82;
}

/* ---------------------------------
   Bottom wave / fog layer
--------------------------------- */
.bottom-wave-fog {
  position: fixed;
  left: -16vw;
  bottom: -2vh;
  width: 132vw;
  height: 42vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* base fill so it always reaches the bottom */
.bottom-wave-fog .fog-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8%;
  height: 72%;
  background: linear-gradient(
    to top,
    rgba(236, 241, 247, 0.24) 0%,
    rgba(236, 241, 247, 0.15) 34%,
    rgba(236, 241, 247, 0.07) 68%,
    rgba(236, 241, 247, 0) 100%
  );
  filter: blur(34px);
}

/* main moving fog mass */
.bottom-wave-fog::before {
  content: "";
  position: absolute;
  left: -10%;
  bottom: 2%;
  width: 122%;
  height: 92%;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 8% 95%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.12) 18%,
      rgba(255, 255, 255, 0) 44%
    ),
    radial-gradient(
      ellipse at 28% 92%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.13) 20%,
      rgba(255, 255, 255, 0) 46%
    ),
    radial-gradient(
      ellipse at 50% 96%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.14) 22%,
      rgba(255, 255, 255, 0) 48%
    ),
    radial-gradient(
      ellipse at 72% 93%,
      rgba(255, 255, 255, 0.19) 0%,
      rgba(255, 255, 255, 0.12) 20%,
      rgba(255, 255, 255, 0) 46%
    ),
    radial-gradient(
      ellipse at 94% 97%,
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0.11) 18%,
      rgba(255, 255, 255, 0) 44%
    ),
    linear-gradient(
      to top,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.1) 24%,
      rgba(255, 255, 255, 0.045) 48%,
      rgba(255, 255, 255, 0.015) 70%,
      rgba(255, 255, 255, 0) 100%
    );

  filter: blur(60px);
  transform: translate3d(0, 0, 0) scale(1.04);
  animation: fogShelfA 7s ease-in-out infinite alternate;
}

/* upper veil to destroy edge definition */
.bottom-wave-fog::after {
  content: "";
  position: absolute;
  left: -12%;
  bottom: 14%;
  width: 126%;
  height: 95%;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 16% 88%,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.05) 18%,
      rgba(255, 255, 255, 0) 44%
    ),
    radial-gradient(
      ellipse at 40% 84%,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.055) 20%,
      rgba(255, 255, 255, 0) 46%
    ),
    radial-gradient(
      ellipse at 68% 86%,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.05) 18%,
      rgba(255, 255, 255, 0) 44%
    ),
    radial-gradient(
      ellipse at 92% 82%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.045) 16%,
      rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(
      to top,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.045) 24%,
      rgba(255, 255, 255, 0.018) 50%,
      rgba(255, 255, 255, 0.006) 72%,
      rgba(255, 255, 255, 0) 100%
    );

  filter: blur(92px);
  transform: translate3d(0, 0, 0) scale(1.06);
  animation: fogShelfB 11s ease-in-out infinite alternate;
}

/* ---------------------------------
   Theme tuning
--------------------------------- */
body.light .bottom-wave-fog {
  opacity: 1;
}

body.dark .bottom-wave-fog {
  opacity: 0.94;
}

body.dark .bottom-wave-fog .fog-base {
  background: linear-gradient(
    to top,
    rgba(98, 128, 214, 0.16) 0%,
    rgba(74, 98, 176, 0.1) 34%,
    rgba(48, 64, 116, 0.045) 68%,
    rgba(255, 255, 255, 0) 100%
  );
}

body.dark .bottom-wave-fog::before {
  background:
    radial-gradient(
      ellipse at 8% 95%,
      rgba(155, 185, 255, 0.1) 0%,
      rgba(112, 142, 210, 0.07) 18%,
      rgba(255, 255, 255, 0) 44%
    ),
    radial-gradient(
      ellipse at 28% 92%,
      rgba(168, 194, 255, 0.11) 0%,
      rgba(120, 148, 216, 0.075) 20%,
      rgba(255, 255, 255, 0) 46%
    ),
    radial-gradient(
      ellipse at 50% 96%,
      rgba(178, 202, 255, 0.12) 0%,
      rgba(128, 156, 222, 0.08) 22%,
      rgba(255, 255, 255, 0) 48%
    ),
    radial-gradient(
      ellipse at 72% 93%,
      rgba(162, 190, 252, 0.1) 0%,
      rgba(116, 144, 210, 0.072) 20%,
      rgba(255, 255, 255, 0) 46%
    ),
    radial-gradient(
      ellipse at 94% 97%,
      rgba(150, 180, 246, 0.09) 0%,
      rgba(108, 136, 198, 0.066) 18%,
      rgba(255, 255, 255, 0) 44%
    ),
    linear-gradient(
      to top,
      rgba(98, 126, 214, 0.1) 0%,
      rgba(74, 98, 174, 0.07) 24%,
      rgba(48, 66, 118, 0.032) 48%,
      rgba(26, 38, 70, 0.01) 70%,
      rgba(255, 255, 255, 0) 100%
    );
}

body.dark .bottom-wave-fog::after {
  background:
    radial-gradient(
      ellipse at 16% 88%,
      rgba(160, 190, 255, 0.04) 0%,
      rgba(114, 144, 210, 0.025) 18%,
      rgba(255, 255, 255, 0) 44%
    ),
    radial-gradient(
      ellipse at 40% 84%,
      rgba(172, 198, 255, 0.045) 0%,
      rgba(122, 150, 216, 0.028) 20%,
      rgba(255, 255, 255, 0) 46%
    ),
    radial-gradient(
      ellipse at 68% 86%,
      rgba(160, 190, 255, 0.04) 0%,
      rgba(114, 144, 210, 0.025) 18%,
      rgba(255, 255, 255, 0) 44%
    ),
    radial-gradient(
      ellipse at 92% 82%,
      rgba(150, 180, 245, 0.036) 0%,
      rgba(108, 136, 198, 0.022) 16%,
      rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(
      to top,
      rgba(92, 120, 205, 0.032) 0%,
      rgba(68, 92, 164, 0.02) 24%,
      rgba(42, 58, 104, 0.008) 50%,
      rgba(255, 255, 255, 0) 72%
    );
}

/* ---------------------------------
   Motion
--------------------------------- */
@keyframes fogShelfA {
  0% {
    transform: translate3d(-7%, 1.4%, 0) scale(1.04);
  }
  25% {
    transform: translate3d(-3%, -0.8%, 0) scale(1.06);
  }
  50% {
    transform: translate3d(2%, 1.6%, 0) scale(1.08);
  }
  75% {
    transform: translate3d(6%, -0.6%, 0) scale(1.09);
  }
  100% {
    transform: translate3d(10%, 1.3%, 0) scale(1.1);
  }
}

@keyframes fogShelfB {
  0% {
    transform: translate3d(8%, -1.1%, 0) scale(1.06);
  }
  25% {
    transform: translate3d(4%, 0.8%, 0) scale(1.08);
  }
  50% {
    transform: translate3d(0%, -0.7%, 0) scale(1.09);
  }
  75% {
    transform: translate3d(-5%, 0.9%, 0) scale(1.1);
  }
  100% {
    transform: translate3d(-9%, -1.1%, 0) scale(1.12);
  }
}

/* ---------------------------------
   6. Mobile adjustment
--------------------------------- */
@media (max-width: 900px) {
  .bottom-wave-fog {
    left: -24vw;
    width: 148vw;
    height: 42vh;
    bottom: -9vh;
  }

  .bottom-wave-fog::before {
    filter: blur(16px);
  }

  .bottom-wave-fog::after {
    filter: blur(24px);
  }
}

/* ---------------------------------
   7. Reduced motion
--------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bottom-wave-fog::before,
  .bottom-wave-fog::after {
    animation: none;
  }
}

/* ---------------------------------
   8. Mobile adjustment
--------------------------------- */
@media (max-width: 900px) {
  .hero-bloom::before {
    width: 78vw;
    height: 28vh;
    top: 40%;
    filter: blur(32px);
  }

  .bottom-wave-fog {
    height: 30vh;
    bottom: -8vh;
  }

  .bottom-wave-fog::before {
    filter: blur(18px);
  }

  .bottom-wave-fog::after {
    filter: blur(22px);
  }
}

/* ---------------------------------
   9. Reduced motion
--------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bottom-wave-fog::before,
  .bottom-wave-fog::after {
    animation: none;
  }
}

@media (min-width: 901px) {
  .about-mobile-layout,
  .about-mobile-sticky,
  .about-mobile-header,
  .about-mobile-tag-groups,
  .about-mobile-tags,
  .about-mobile-body,
  .about-mobile-list,
  .about-mobile-heading {
    display: none !important;
  }
}

/* =====================================
   INTRO STATE - SOFT DEPTH REVEAL
===================================== */

/* The visible UI starts buried in haze, not moving upward */
body.intro-active .hero-window,
body.intro-active .hero-float-top-left {
  opacity: 0;
  filter: blur(26px);
  transform: scale(0.992);
}

body.intro-show .hero-window,
body.intro-show .hero-float-top-left {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}

body.intro-active .hero-float-bottom {
  opacity: 0;
  filter: blur(26px);
  transform: translateX(-50%) scale(0.992);
}

body.intro-show .hero-float-bottom {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(-50%) scale(1);
}

.hero-window,
.hero-float-top-left,
.hero-float-bottom {
  transition:
    opacity 3.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 3.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 3.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

/* background text keeps its original translateX centering */
body.intro-active .background-text {
  opacity: 0;
  filter: blur(26px);
  transform: translateX(-50%) scale(0.992);
}

body.intro-show .background-text {
  filter: blur(0px);
  transform: translateX(-50%) scale(1);
}

.background-text {
  transition:
    opacity 3.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 3.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 3.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

/* Keep the background text extra soft at first */
body.intro-active .background-text {
  opacity: 0;
}

body.light.intro-show .background-text {
  opacity: 0.065;
}

body.dark.intro-show .background-text {
  opacity: 0.34;
}

/* =====================================
   FOG VEIL
===================================== */

.fog-layer {
  position: fixed;
  inset: -8%;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  filter: blur(0px);
  transform: scale(1.02);
  transition:
    opacity 4.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 4.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 4.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.fog-layer::before {
  content: "";
  position: absolute;
  inset: -6%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  transition:
    opacity 4.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 4.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 4.8s cubic-bezier(0.22, 1, 0.36, 1);
  filter: blur(26px);
}

/* Light mode fog veil */
body.light.intro-active .fog-layer::before {
  opacity: 1;
  background: linear-gradient(
    to bottom,
    rgba(244, 247, 251, 0.98) 0%,
    rgba(244, 247, 251, 0.94) 18%,
    rgba(244, 247, 251, 0.82) 38%,
    rgba(244, 247, 251, 0.58) 60%,
    rgba(244, 247, 251, 0.28) 80%,
    rgba(244, 247, 251, 0.06) 94%,
    rgba(244, 247, 251, 0) 100%
  );
}

body.light.intro-show .fog-layer::before {
  opacity: 0;
  transform: translateY(-10%);
}

/* Dark mode fog veil */
body.dark.intro-active .fog-layer::before {
  opacity: 1;
  background: linear-gradient(
    to bottom,
    rgba(16, 24, 40, 0.98) 0%,
    rgba(16, 24, 40, 0.95) 18%,
    rgba(16, 24, 40, 0.84) 38%,
    rgba(16, 24, 40, 0.58) 60%,
    rgba(16, 24, 40, 0.26) 80%,
    rgba(16, 24, 40, 0.06) 94%,
    rgba(16, 24, 40, 0) 100%
  );
}

body.dark.intro-show .fog-layer::before {
  opacity: 0;
  transform: translateY(-10%);
}

/* desktop-only helper */
.desktop-only {
  display: inline-flex;
}

@media (max-width: 900px) {
  .desktop-only {
    display: none !important;
  }
}

/* sketch window */
#sketchpad {
  width: min(70vw, 1080px);
  height: min(78vh, 860px);
  min-width: 820px;
  padding: 0 !important;
  overflow: hidden;
}

#sketchpad .window-scroll {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.sketchpad-ui {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.sketchpad-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #d4d0c8;
  border: 2px solid #808080;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #6e6e6e;
  flex: 0 0 auto;
}

.toolbar-sep {
  width: 2px;
  align-self: stretch;
  margin: 0 4px;
  background: linear-gradient(to right, #7f7f7f, #ffffff);
}

.tool-btn,
.swatch {
  appearance: none;
  border: 2px solid #808080;
  background: #d4d0c8;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #6e6e6e;
  cursor: pointer;
}

.tool-btn {
  height: 30px;
  padding: 0 10px;
  font-family: "Cocogoose-Classic-Regular", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

.tool-btn:active,
.swatch:active {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #6e6e6e;
}

.swatch {
  width: 24px;
  height: 24px;
  padding: 0;
}

.swatch-black {
  background: #111111;
}
.swatch-orange {
  background: #f6a23a;
}
.swatch-blue {
  background: #2f6df6;
}
.swatch-red {
  background: #d64545;
}

.tool-btn.active-tool {
  background: #c6d8f7;
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #6e6e6e;
}

.tool-btn-stamp.active-tool {
  background: #f3d19a;
}

.sketchpad-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px;
  background:
    linear-gradient(
      45deg,
      #d8d8d8 25%,
      transparent 25%,
      transparent 75%,
      #d8d8d8 75%
    ),
    linear-gradient(
      45deg,
      #d8d8d8 25%,
      transparent 25%,
      transparent 75%,
      #d8d8d8 75%
    );
  background-position:
    0 0,
    8px 8px;
  background-size: 16px 16px;
  border: 2px solid #808080;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #6e6e6e;
  overflow: hidden;
}

#sketchCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid #a8a8a8;
  cursor: crosshair;
}