* {
   box-sizing: border-box;
}
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 112px; /* 80px logo (mobile) + 20px below + 40px fade + 32px padding */
            z-index: 10;
            background: linear-gradient(
                rgba(255, 255, 255, 0.7) 0%,
                rgba(255, 255, 255, 0.5) 70%,
                rgba(255, 255, 255, 0.3) 75%,
                rgba(255, 255, 255, 0.5) 90%,
                rgba(0, 0, 0, 0.2) 100%
                );
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
        }
        header::before {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(
              120deg,
              rgba(55, 55, 55, 0.5) 0%,
              rgba(255, 255, 255, 0.4) 15%,
              rgba(255, 255, 255, 0.7) 25%,
              rgba(255, 255, 255, 0.4) 30%,
              rgba(155, 155, 155, 0.6) 50%,
              rgba(255, 255, 255, 0.3) 60%,
              rgba(255, 255, 255, 0.7) 85%,
              rgba(255, 255, 255, 0.6) 95%,
              rgba(155, 155, 155, 0.7) 100%
              );
          z-index: 20;
        }
        header::after {
          content: '';
          display: block;
          width: 100%;
          height: 3px;
          position: absolute;
          bottom: -3px;
          left: 0;
          background: linear-gradient(
              to right,
              rgba(155, 155, 155, 0.9) 0%,
              rgba(255, 255, 255, 0.8) 20%,
              rgba(255, 255, 255, 1) 25%,
              rgba(255, 255, 255, 0.8) 30%,
              rgba(155, 155, 155, 0.9) 50%,
              rgba(255, 255, 255, 0.8) 60%,
              rgba(255, 255, 255, 1) 85%,
              rgba(255, 255, 255, 0.8) 95%,
              rgba(155, 155, 155, 0.9) 100%
              );
        }
        .header-layer {
            position: absolute;
            left: 0;
            right: 0;
            height: 3px;
        }
        /* Layer 1: Top solid portion with minimal blur */
        .header-layer-1 {
            backdrop-filter: blur(20px) brightness(110%) saturate(180%);
            -webkit-backdrop-filter: blur(20px);
            bottom: 0;
            z-index: 11;
        }
        /* Layer 2: Middle transition with moderate blur */
        .header-layer-2 {
            backdrop-filter: blur(18px) brightness(130%) saturate(160%);
            -webkit-backdrop-filter: blur(18px);
            bottom: 3px;
            z-index: 12;
        }
        /* Layer 3: Bottom fade with strongest blur */
        .header-layer-3 {
            backdrop-filter: blur(15px) brightness(160%) saturate(150%);
            -webkit-backdrop-filter: blur(16px);
            bottom: 6px;
            z-index: 13;
        }
        /* Layer 3: Bottom fade with strongest blur */
        .header-layer-4 {
            backdrop-filter: blur(10px) brightness(120%) saturate(140%);
            -webkit-backdrop-filter: blur(14px);
            bottom: 9px;
            z-index: 13;
        }
        /* Layer 3: Bottom fade with strongest blur */
        .header-layer-5 {
            backdrop-filter: blur(9px) brightness(120%) saturate(140%);
            -webkit-backdrop-filter: blur(12px);
            bottom: 12px;
            z-index: 13;
        }
        /* Layer 3: Bottom fade with strongest blur */
        .header-layer-6 {
            backdrop-filter: blur(8px) saturate(140%);
            -webkit-backdrop-filter: blur(10px);
            bottom: 15px;
            z-index: 13;
        }
        /* Layer 3: Bottom fade with strongest blur */
        .header-layer-7 {
            backdrop-filter: blur(7px) saturate(140%);
            -webkit-backdrop-filter: blur(8px);
            bottom: 18px;
            z-index: 13;
        }
        /* Layer 3: Bottom fade with strongest blur */
        .header-layer-8 {
            backdrop-filter: blur(6px) saturate(140%);
            -webkit-backdrop-filter: blur(6px);
            bottom: 21px;
            z-index: 13;
        }
        /* Layer 3: Bottom fade with strongest blur */
        .header-layer-9 {
            backdrop-filter: blur(5px) saturate(140%);
            -webkit-backdrop-filter: blur(5px);
            bottom: 24px;
            z-index: 13;
        }
        /* Layer 3: Bottom fade with strongest blur */
        .header-layer-10 {
            backdrop-filter: blur(4px) saturate(140%);
            -webkit-backdrop-filter: blur(4px);
            bottom: 27px;
            z-index: 14;
            top: 0;
            height: auto;
        }
        @media (min-width: 768px) {
            header {
                height: 172px; /* 140px logo (desktop) + 20px below + 40px fade + 32px padding */
            }
        }
body {
  background-color: #2d3748;
}
#logo {
    transition: transform 0.3s ease;
    position: absolute;
    top: 16px; /* Match header padding (py-4 = 16px) */
    right: 20px; /* Start 20px from right */
    z-index: 25;
}
section {
    min-height: 100vh; /* Each section takes at least the full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 15vh;
}
#about {
    background-color: #e6e6e6; /* Light blue */
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    margin-top: -15vh; /* Overlap to smooth diagonal transition */
    padding-bottom: 15vh;
    z-index: 1;
}
#gallery {
    background-color: #b3b3b3; /* Light beige */
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    margin-top: -15vh;
    padding-bottom: 15vh;
    z-index: 2;
}
#contact {
    background-color: #d9d9d9; /* Light green */
    clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    margin-top: -15vh;
    padding-bottom: 15vh;
    z-index: 3;
}
footer {
    background-color: #2d3748; /* Dark gray */
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    min-height: 300px;
    z-index: 4;
}

.glass-card {
  background: linear-gradient(
    120deg,
    rgba(55, 55, 55, 0.2) 0%,
    rgba(0, 0, 0, 0.2) 15%,
    rgba(88, 88, 88, 0.5) 25%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(33, 33, 33, 0.3) 50%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0.5) 85%,
    rgba(0, 0, 0, 0.3) 95%,
    rgba(155, 155, 155, 0.4) 100%
    );
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.5);
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

.glass-card input,
.glass-card textarea {
  background: linear-gradient(
    120deg,
    rgba(33, 33, 33, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 15%,
    rgba(33, 33, 33, 0.5) 25%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(22, 22, 22, 0.5) 50%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.4) 85%,
    rgba(0, 0, 0, 0.6) 95%,
    rgba(33, 33, 33, 0.4) 100%
    );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  box-shadow: 
    0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 2px 2px rgba(0, 0, 0, 0.7);
  color: #fff;
  width: 100%;
  padding: 5px;
}

.glass-card input::placeholder,
.glass-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* Defs */
@property --angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

@property --angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

:root {
  --global--size: clamp(2rem, 4vw, 5rem);
  --anim--hover-time: 400ms;
  --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ========== BUTTON ========== */

/* Button Wrap Container */
.button-wrap {
  position: relative;
  z-index: 2;
  border-radius: 4px;
  background: transparent;
  pointer-events: none;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

/* Button Shadow Container */
.button-shadow {
  --shadow-cuttoff-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}

/* Shadow */
.button-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  left: calc(var(--shadow-cuttoff-fix) - 0.875em);
  padding: 0.125em;
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  overflow: visible;
  opacity: 1;
}

/* ========== BUTTON BASE STYLES ========== */

button {
  /* Basic Styling */
  --border-width: clamp(1px, 0.0625em, 4px);
  all: unset;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: auto;
  z-index: 3;
  background:
  /* keep your shiny white streak layer on top */
  linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  ),
  /* NEW: red base fill (lighter -> darker) */
  linear-gradient(180deg, #b51700 0%, #770f00 100%);

/* Optional but helpful fallback: */
background-color: #b51700;
  border-radius: 4px;
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0 0 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  text-align: center;
  width: 100%;
}

button:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  -webkit-backdrop-filter: blur(0.01em);
  -moz-backdrop-filter: blur(0.01em);
  -ms-backdrop-filter: blur(0.01em);
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
    0 0 0 0 rgba(255, 255, 255, 1);
}

/* Button Text */
button span {
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-weight: bold;
  font-weight: 500;
  font-size: 1em;
  color: rgba(255, 255, 255, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  padding-inline: 1.5em;
  padding-block: 0.875em;
}

button:hover span {
  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
}

/* Text */
button span::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(100% - var(--border-width)); /* Prevent overlapping border */
  height: calc(100% - var(--border-width));
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 4px;
  overflow: clip;
  background: linear-gradient(
    var(--angle-2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 45% 50%,
    rgba(255, 255, 255, 0) 75%
  );
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position calc(var(--anim--hover-time) * 1.25)
      var(--anim--hover-ease),
    --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}

button:hover span::after {
  background-position: 25% 50%;
}

button:active span::after {
  background-position: 50% 15%;
  --angle-2: -15deg;
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
  button span::after,
  button:active span::after {
    --angle-2: -45deg;
  }
}

/* ========== BUTTON OUTLINE ========== */

/* Outline */
button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 4px;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background: conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease),
    --angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
}

button:hover::after {
  --angle-1: -25deg;
}

button:active::after {
  --angle-1: -75deg;
}

@media (hover: none) and (pointer: coarse) {
  button::after,
  button:hover::after,
  button:active::after {
    --angle-1: -75deg;
  }
}

/* Shadow Hover */
.button-wrap:has(button:hover) .button-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
  -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
  -moz-filter: blur(clamp(2px, 0.0625em, 6px));
  -ms-filter: blur(clamp(2px, 0.0625em, 6px));
  transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}

.button-wrap:has(button:hover) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}

/* Rotation */
.button-wrap:has(button:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}

.button-wrap:has(button:active) button {
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
    0 0.25em 0 0 rgba(255, 255, 255, 0.75),
    inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}

.button-wrap:has(button:active) .button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
}

.button-wrap:has(button:active) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}

.button-wrap:has(button:active) span {
  text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}