:root {
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-surface: #FFF8F5;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-outline: #79747E;
  --container-max: 1200px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.scroll-motion-blur {
  filter: blur(1.6px);
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none;
}

a, button, md-button, md-filled-button, md-outlined-button, md-text-button {
  cursor: none !important;
}

md-chip, md-chip-set, md-assist-chip, md-filter-chip, md-suggestion-chip {
  cursor: none !important;
}

body * {
  cursor: none !important;
}


header md-top-app-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--md-sys-color-surface);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.hero h1.flicker {
  filter: blur(1.2px) contrast(1.03);
  text-shadow: 0 0 6px rgba(103, 80, 164, 0.25);
  animation: nameFlicker 0.8s linear infinite;
  letter-spacing: 0.06em;
  transform: scale(1.02);
}

.hero h1 .char {
  display: inline-block;
  will-change: filter, opacity, transform;
  transition: filter 80ms ease, opacity 80ms ease, transform 80ms ease;
}

.hero h1 .char.flicker {
  filter: blur(var(--blur, 2.2px));
  opacity: var(--op, 0.9);
  text-shadow: 0 0 8px rgba(103, 80, 164, 0.35);
  transform: scale(var(--scale, 1.08)) translateY(var(--jitter, 0px));
}

@keyframes nameFlicker {
  0% { opacity: 1; }
  5% { opacity: 0.75; }
  10% { opacity: 1; }
  15% { opacity: 0.85; }
  20% { opacity: 1; }
  25% { opacity: 0.7; }
  30% { opacity: 1; }
  35% { opacity: 0.8; }
  40% { opacity: 1; }
  45% { opacity: 0.65; }
  50% { opacity: 1; }
  55% { opacity: 0.8; }
  60% { opacity: 1; }
  65% { opacity: 0.75; }
  70% { opacity: 1; }
  75% { opacity: 0.85; }
  80% { opacity: 1; }
  85% { opacity: 0.7; }
  90% { opacity: 1; }
  95% { opacity: 0.85; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1.flicker {
    animation: none;
    filter: blur(0.6px);
  }
}
section {
  padding: var(--space-4xl) 0;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.6s ease-out forwards;
}

section:nth-child(1) { animation-delay: 0.1s; }
section:nth-child(2) { animation-delay: 0.2s; }
section:nth-child(3) { animation-delay: 0.3s; }
section:nth-child(4) { animation-delay: 0.4s; }

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

.hero {
  padding: var(--space-4xl) 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-content {
  max-width: 900px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 300;
  margin: 0 0 var(--space-xl);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--md-sys-color-on-surface);
  transition: letter-spacing 160ms ease, transform 160ms ease;
}

.subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.75rem);
  color: var(--md-sys-color-on-surface);
  opacity: 0.65;
  margin: 0 0 var(--space-3xl);
  font-weight: 300;
  line-height: 1.6;
  transition: transform 180ms ease, filter 180ms ease, letter-spacing 160ms ease, text-shadow 180ms ease;
}

.cta-buttons {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 var(--space-lg);
}

a:hover {
  transform: translateY(-1px);
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10000;
  background: transparent;
  border: 2px solid rgba(103, 80, 164, 0.8);
  transition: width 0.12s ease, height 0.12s ease, border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}

.cursor.active {
  width: 32px;
  height: 32px;
  border-color: rgba(103, 80, 164, 1);
}

.cursor.click {
  width: 22px;
  height: 22px;
  background: rgba(103, 80, 164, 0.15);
  transform: translate(-50%, -50%) scale(0.92);
}

h2 {
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 300;
  margin: 0 0 var(--space-3xl);
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--md-sys-color-on-surface);
  transition: transform 180ms ease, filter 180ms ease, letter-spacing 160ms ease, text-shadow 180ms ease;
}

h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 var(--space-md);
  color: var(--md-sys-color-on-surface);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--space-2xl);
  padding: 0 var(--space-lg);
}

.project-grid.loading {
  filter: blur(3px);
  pointer-events: none;
}

.project-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--radius-xl);
  background: var(--md-sys-color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: rgba(121,116,126,0.6);
}

md-elevated-card .card-content {
  padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  height: 100%;
  animation: cardIn 0.4s ease-out both;
}

.card-content p {
  margin: 0;
  opacity: 0.8;
  flex-grow: 1;
}

md-chip-set {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

md-text-button {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.skill-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skill-category h3 {
  font-size: 1.125rem;
  font-weight: 500;
  opacity: 0.9;
}

.about-me {
  padding: var(--space-3xl) 0;
}

.about-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2xl);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.about-content md-chip-set {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.about-content md-assist-chip {
  animation: chipIn 0.3s ease-out both;
}

.about-content md-assist-chip:nth-child(1) { animation-delay: 0.05s; }
.about-content md-assist-chip:nth-child(2) { animation-delay: 0.1s; }
.about-content md-assist-chip:nth-child(3) { animation-delay: 0.15s; }
.about-content md-assist-chip:nth-child(4) { animation-delay: 0.2s; }
.about-content md-assist-chip:nth-child(5) { animation-delay: 0.25s; }

.about-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: var(--md-sys-color-surface);
  border-radius: 12px;
  animation: cardIn 0.4s ease-out both;
  animation-delay: 0.1s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  position: relative;
  overflow: hidden;
}

.about-card > * {
  position: relative;
  z-index: 1;
}

.about-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.about-item h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transition: transform 180ms ease, filter 180ms ease, letter-spacing 160ms ease, text-shadow 180ms ease;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.about-item p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.7;
  font-size: 0.9rem;
  letter-spacing: 0.2px;
  transition: transform 180ms ease, filter 180ms ease, letter-spacing 160ms ease, text-shadow 180ms ease;
}

.discord-status-card {
  padding: var(--space-xl);
  background: var(--md-sys-color-surface);
  border-radius: 12px;
  animation: cardIn 0.4s ease-out both;
  animation-delay: 0.2s;
  min-height: 240px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  position: relative;
  overflow: hidden;
}

.discord-status-card::before {
  content: '';
  position: absolute;
  bottom: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(88, 101, 242, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.discord-status-card > * {
  position: relative;
  z-index: 1;
  width: 100%;
}

#discordStatus {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.status-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.status-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.status-avatar {
  flex-shrink: 0;
}
.status-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.status-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

.status-indicator {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--status-color);
  position: relative;
}

.status-indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--status-bg);
  animation: pulse 2.5s ease-in-out infinite;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 316'><path d='M112.67 19.7842C116.243 16.6394 118.029 15.067 119.671 13.7954C143.425 -4.59845 176.575 -4.59845 200.329 13.7954C201.971 15.067 203.757 16.6394 207.33 19.7842C208.526 20.8372 209.124 21.3636 209.724 21.8672C218.136 28.9247 228.171 33.7683 238.92 35.9594C239.688 36.1158 240.471 36.2562 242.038 36.537C246.719 37.3756 249.059 37.7949 251.075 38.2889C280.234 45.4346 300.902 71.4108 301.364 101.493C301.396 103.573 301.283 105.953 301.057 110.713C300.982 112.307 300.944 113.104 300.925 113.888C300.665 124.88 303.143 135.763 308.136 145.553C308.493 146.252 308.872 146.953 309.63 148.356C311.894 152.547 313.026 154.642 313.897 156.53C326.503 183.834 319.127 216.226 295.949 235.344C294.347 236.666 292.42 238.061 288.566 240.852C287.276 241.787 286.63 242.254 286.007 242.729C277.27 249.377 270.326 258.105 265.803 268.122C265.48 268.837 265.169 269.571 264.547 271.04C262.69 275.427 261.761 277.62 260.832 279.48C247.393 306.382 217.526 320.798 188.162 314.556C186.132 314.124 183.842 313.484 179.262 312.204C177.728 311.776 176.962 311.562 176.203 311.369C165.569 308.668 154.431 308.668 143.797 311.369C143.038 311.562 142.272 311.776 140.738 312.204C136.158 313.484 133.868 314.124 131.838 314.556C102.474 320.798 72.6071 306.382 59.168 279.48C58.2388 277.62 57.3102 275.427 55.453 271.04C54.8311 269.571 54.5202 268.837 54.1975 268.122C49.6741 258.105 42.7297 249.377 33.993 242.729C33.3696 242.254 32.7244 241.787 31.434 240.852C27.5801 238.061 25.6532 236.666 24.0507 235.344C0.872976 216.226 -6.50346 183.834 6.10268 156.53C6.97423 154.642 8.10625 152.547 10.3703 148.356C11.1283 146.953 11.5074 146.252 11.8636 145.553C16.8568 135.763 19.3353 124.88 19.0745 113.888C19.0559 113.104 19.0182 112.307 18.9426 110.713C18.7168 105.953 18.6039 103.573 18.6359 101.493C19.0982 71.4108 39.7665 45.4346 68.9252 38.2889C70.9411 37.7949 73.2814 37.3756 77.9618 36.537C79.5289 36.2562 80.3125 36.1158 81.0795 35.9594C91.8294 33.7683 101.864 28.9247 110.276 21.8672C110.876 21.3636 111.474 20.8372 112.67 19.7842Z' fill='black'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 316'><path d='M112.67 19.7842C116.243 16.6394 118.029 15.067 119.671 13.7954C143.425 -4.59845 176.575 -4.59845 200.329 13.7954C201.971 15.067 203.757 16.6394 207.33 19.7842C208.526 20.8372 209.124 21.3636 209.724 21.8672C218.136 28.9247 228.171 33.7683 238.92 35.9594C239.688 36.1158 240.471 36.2562 242.038 36.537C246.719 37.3756 249.059 37.7949 251.075 38.2889C280.234 45.4346 300.902 71.4108 301.364 101.493C301.396 103.573 301.283 105.953 301.057 110.713C300.982 112.307 300.944 113.104 300.925 113.888C300.665 124.88 303.143 135.763 308.136 145.553C308.493 146.252 308.872 146.953 309.63 148.356C311.894 152.547 313.026 154.642 313.897 156.53C326.503 183.834 319.127 216.226 295.949 235.344C294.347 236.666 292.42 238.061 288.566 240.852C287.276 241.787 286.63 242.254 286.007 242.729C277.27 249.377 270.326 258.105 265.803 268.122C265.48 268.837 265.169 269.571 264.547 271.04C262.69 275.427 261.761 277.62 260.832 279.48C247.393 306.382 217.526 320.798 188.162 314.556C186.132 314.124 183.842 313.484 179.262 312.204C177.728 311.776 176.962 311.562 176.203 311.369C165.569 308.668 154.431 308.668 143.797 311.369C143.038 311.562 142.272 311.776 140.738 312.204C136.158 313.484 133.868 314.124 131.838 314.556C102.474 320.798 72.6071 306.382 59.168 279.48C58.2388 277.62 57.3102 275.427 55.453 271.04C54.8311 269.571 54.5202 268.837 54.1975 268.122C49.6741 258.105 42.7297 249.377 33.993 242.729C33.3696 242.254 32.7244 241.787 31.434 240.852C27.5801 238.061 25.6532 236.666 24.0507 235.344C0.872976 216.226 -6.50346 183.834 6.10268 156.53C6.97423 154.642 8.10625 152.547 10.3703 148.356C11.1283 146.953 11.5074 146.252 11.8636 145.553C16.8568 135.763 19.3353 124.88 19.0745 113.888C19.0559 113.104 19.0182 112.307 18.9426 110.713C18.7168 105.953 18.6039 103.573 18.6359 101.493C19.0982 71.4108 39.7665 45.4346 68.9252 38.2889C70.9411 37.7949 73.2814 37.3756 77.9618 36.537C79.5289 36.2562 80.3125 36.1158 81.0795 35.9594C91.8294 33.7683 101.864 28.9247 110.276 21.8672C110.876 21.3636 111.474 20.8372 112.67 19.7842Z' fill='black'/></svg>");
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.status-indicator.is-active::before {
  animation: pulse 2.5s ease-in-out infinite, cookieRotate 6s linear infinite;
}

.status-indicator md-icon {
  font-size: 28px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}


@keyframes pulse {
  0%, 100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }
  50% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 8px var(--status-bg); }
}

@keyframes cookieRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-text {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  line-height: 1.3;
}

.activities {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.activity {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--md-sys-color-surface-container-low);
  border-radius: 8px;
  transition: all 0.2s ease;
  animation: slideIn 0.3s ease-out both;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.activity.spotify {
  background: linear-gradient(135deg, rgba(30, 215, 96, 0.04) 0%, rgba(30, 215, 96, 0.02) 100%);
}

.activity.game {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.04) 0%, rgba(88, 101, 242, 0.02) 100%);
}

.activity:hover {
  background: var(--md-sys-color-surface-container);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.activity-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: background-color 0.2s ease;
}

.activity.spotify .activity-icon {
  background: rgba(30, 215, 96, 0.2);
  color: #1ed760;
}

.activity.game .activity-icon {
  background: rgba(88, 101, 242, 0.2);
  color: #5865F2;
}

.activity-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.activity-type {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

.activity-name {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--md-sys-color-on-surface);
  line-height: 1.3;
}

.activity-artist,
.activity-details {
  margin: 0;
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.4;
}

.spotify-progress {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spotify-progress md-linear-progress {
  width: 100%;
  --md-linear-progress-track-height: 5px;
  --md-linear-progress-track-shape: 10px;
  --md-linear-progress-active-indicator-height: 5px;
  --md-linear-progress-active-indicator-color: #1ed760;
  --md-linear-progress-track-color: rgba(30, 215, 96, 0.2);
}

.spotify-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--md-sys-color-on-surface-variant);
  padding: 0 2px;
  font-weight: 500;
}

.no-activity {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.no-activity p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--md-sys-color-on-surface-variant);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.status-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  color: var(--md-sys-color-on-surface);
  opacity: 0.6;
}

.status-unavailable md-icon {
  font-size: 32px;
}

.status-unavailable p {
  margin: 0;
}

.status-loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.status-skeleton {
  height: 48px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-md);
}

  .experience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: var(--space-2xl);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
  }

  .experience-card {
    padding: var(--space-xl);
    background: var(--md-sys-color-surface);
    border-radius: 12px;
    animation: cardIn 0.4s ease-out both;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .experience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: rgba(121,116,126,0.6);
  }

  .experience-card > * {
    position: relative;
    z-index: 1;
  }

  .experience-card .experience-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
  }

  .experience-card .company {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: var(--space-xs) 0 0;
  }

  .experience-card .year {
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.6;
  }

.footer-large {
  padding: var(--space-4xl) var(--space-lg);
  border-top: 1px solid var(--md-sys-color-outline);
}

.footer-large-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
}

.footer-large-inner h2 {
  margin: 0 0 var(--space-sm);
}

.footer-brand {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1.25rem;
  color: white;
  position: relative;
}

.footer-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('./shape.svg') center / contain no-repeat;
  animation: rotate 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.footer-brand::after {
  content: 'MB';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.footer-subtitle {
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.8;
}

.footer-actions {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--space-lg) 0;
}

.footer-meta {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 248, 245, 0.8);
  backdrop-filter: blur(6px);
  z-index: 999;
}

.loading-overlay.active { display: flex; }

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  color: var(--md-sys-color-on-surface);
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(121, 116, 126, 0.3);
  border-top-color: var(--md-sys-color-primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cta-buttons md-filled-button,
.cta-buttons md-outlined-button,
.card-content md-text-button {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-buttons md-filled-button:hover,
.cta-buttons md-outlined-button:hover,
.card-content md-text-button:hover {
  transform: translateY(-2px);
}

.skills-grid md-assist-chip,
.card-content md-assist-chip {
  animation: chipIn 0.3s ease-out both;
}

@keyframes chipIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Guestbook Styles */
.guestbook {
  padding: var(--space-3xl) 0;
}

.guestbook-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.sign-button {
  --md-filled-button-container-height: 56px;
  font-size: 1.1rem;
  padding: 0 var(--space-3xl);
}

/* Guestbook Modal */
.guestbook-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.guestbook-modal.active {
  display: flex;
  opacity: 1;
  pointer-events: all;
  animation: fadeIn 0.3s ease-out;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--md-sys-color-surface);
  border-radius: 24px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(40px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.guestbook-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.form-group input,
.form-group textarea {
  padding: var(--space-md);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.guestbook-form md-filled-button {
  align-self: flex-start;
}

.guestbook-entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  animation: fadeIn 0.4s ease-out;
}

.guestbook-entry {
  padding: var(--space-lg);
  background: var(--md-sys-color-surface);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border: 1px solid var(--md-sys-color-outline);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: slideIn 0.3s ease-out both;
}

.guestbook-entry:nth-child(1) { animation-delay: 0s; }
.guestbook-entry:nth-child(2) { animation-delay: 0.1s; }
.guestbook-entry:nth-child(3) { animation-delay: 0.2s; }
.guestbook-entry:nth-child(n+4) { animation-delay: 0.3s; }

.guestbook-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: rgba(121,116,126,0.6);
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.entry-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.entry-date {
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 500;
}

.entry-message {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.guestbook-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
  opacity: 0.7;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }

  section {
    padding: var(--space-2xl) 0;
  }

  .hero {
    min-height: 50vh;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}