/* Self-hosted fonts */
@font-face {
  font-family: "ClashGrotesk";
  src: url("../assets/fonts/ClashGrotesk/OTF/ClashGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ClashGrotesk";
  src: url("../assets/fonts/ClashGrotesk/OTF/ClashGrotesk-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ClashGrotesk";
  src: url("../assets/fonts/ClashGrotesk/OTF/ClashGrotesk-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ClashGrotesk";
  src: url("../assets/fonts/ClashGrotesk/OTF/ClashGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fonts/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fonts/Ubuntu/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color Palette */
  --background-primary: #0d0d0d;
  --background-card: #1a1a1a;
  --background-card-hover: #222222;
  --text-primary: #e5e5e5;
  --text-primary-dark: #ffffff;
  --text-secondary: #808080;
  --text-highlight: #ffffff;
  --text-accent: #f5c518;
  --border-primary: #2a2a2a;
  --border-interactive: #444444;
  --status-indicator: #f5c518;

  /* Typography - No custom variables needed, using direct font-family declarations */

  /* Layout */
  --spacing-unit: 1rem;
  --page-padding: 2rem;
  --grid-gap: 1rem;

  /* Shrink Animation Properties */
  --shrink-progress: 0;
  /* JavaScript will update this from 0 to 1 */
}

/* Formula 1 Font (available if needed)
@font-face {
  font-family: "Formula1-Bold";
  src: url("../assets/fonts/Formula1-Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
} */

/* --- Work Section --- */
#work {
  width: 100%;
  min-height: 220vh;
  /* Taller to accommodate the scroll travel */
  background-color: var(--background-primary);
  position: relative;
  z-index: 20;
  /* Above hero */
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  /* Will be animated to 0 */
  will-change: border-radius;
  /* Performance hint */
}

/* Add hints for other animated elements */
.playground-tagline {
  will-change: transform, opacity;
}

.section-title-pastworks__main .word-left,
.section-title-pastworks__main .word-right,
.section-title-playgrounds__main .word-left,
.section-title-playgrounds__main .word-right {
  will-change: transform;
}

/* Shrinkable Content Wrapper */
.shrinkable-content {
  background-color: var(--background-primary);
  transform-origin: top center;
  /* Critical: ensures it shrinks from bottom-up */
  z-index: 30;
  position: relative;

  /* Performance optimization for smooth animation */
  will-change: transform, border-radius;
}

/* Only apply transform and overflow when shrinking is active */
/* Only apply transform and overflow when shrinking is active */
.shrinkable-content.is-shrinking {
  /* Prevents content from spilling outside rounded corners */
  overflow: hidden;

  /* Safari stability improvements */
  backface-visibility: hidden;
}

/* Shrink animation trigger elements */
#shrink-sentinel {
  height: 1px;
  width: 100%;
  /* Invisible trigger element */
}

/* ─────────────────────────────────────────────
   CONTACT HERO - Two Column Layout
───────────────────────────────────────────── */

/* Main Grid Layout */
.contact-hero {
  display: grid;
  grid-template-columns: minmax(340px, 42%) 1fr;
  align-items: center;
  gap: 4vw;
  padding: 10vh 6vw 10vh 6vw;
  background: var(--background-primary);
  height: auto;
  min-height: auto;
  margin-top: -15vh;
}

/* Left Column */
.contact-hero__left {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Right Column */
.contact-hero__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 0vh;
}

/* Typography - Title Composition */
.contact-hero__title {
  font-family: "ClashGrotesk", sans-serif;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0.25em;
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: left !important;
  margin-right: 0 !important;
  max-width: none;
  /* margin: 5rem 0 0 0; */
}

.title-line {
  display: block;
  font-size: clamp(5rem, 9vw, 8rem);
  opacity: 0;
  transform: translateY(30px);
}

.title-line:not(:first-child) {
  margin-top: 0.1em;
}

.title-line--italic {
  font-style: italic;
  transform: translateX(1.2em);
  font-weight: 400;
}

.title-line.title-line--spaced {
  margin-top: 0.4em;
  text-align: left;
}

.contact-hero__title .title-line:first-child {
  display: flex !important;
  justify-content: space-between !important;
}

.contact-hero__title .title-line:last-child {
  text-align: right !important;
}

/* Email Video Container */
.email_video_container {
  aspect-ratio: 1/1;
  width: 85%;
  border-radius: 15px;
  overflow: visible;
  background: #111111;
  margin: 2rem 0 0 0;
  position: relative;
  cursor: pointer;
  transition: all 0.6s ease;
}

.email_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.email_video_container:hover {
  box-shadow:
    0 0 15px rgba(111, 99, 233, 0.25),
    0 0 30px rgba(111, 99, 233, 0.15),
    0 0 45px rgba(111, 99, 233, 0.08);
  transform: scale(1.03);
}

.linkedin_img {
  position: absolute;
  top: -25%;
  right: -25%;
  width: 50%;
  height: 50%;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.6s ease;
  z-index: 2;
}

.linkedin_img:hover {
  box-shadow:
    0 0 15px rgba(111, 99, 233, 0.25),
    0 0 30px rgba(111, 99, 233, 0.15),
    0 0 45px rgba(111, 99, 233, 0.08);
  transform: scale(1.02);
}

/* Email LinkedIn Button Stack */
.email_linkedin_button {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  list-style: none;
  margin: 4rem 0 2rem 0;
  padding: 0;
  justify-content: center;
}

.email_linkedin_button li a {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #6F63E9;
  border: 1px solid #6F63E9;
  border-radius: 20px;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.15),
    0px 4px 12px rgba(111, 99, 233, 0.3);
}

.email_linkedin_button li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(150px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.15) 40%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.email_linkedin_button li a:hover {
  background-color: #8A7AEB;
  transform: translateY(-2px);
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.25),
    inset -1px -1px 2px rgba(0, 0, 0, 0.1),
    0px 8px 20px rgba(111, 99, 233, 0.4);
}

.email_linkedin_button li a:hover::before {
  opacity: 1;
}


.center-text {
  font-family: "ClashGrotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(3rem, 16vw, 12rem);
  color: #fff;
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center;
  text-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.2),
    3px 5px 25px rgba(0, 0, 0, 0.6);
}

.subtitle {
  font-family: "ClashGrotesk", sans-serif;
  font-weight: 450;
  font-size: clamp(0.75rem, 4vw, 3rem);
  /* 1/4 of .center-text clamp */
  color: #fff;
  text-align: center;
  opacity: 0.95;
  letter-spacing: 0.01em;
  text-shadow:
    -1px -1px 2px rgba(255, 255, 255, 0.1),
    2px 3px 15px rgba(0, 0, 0, 0.6);
}

nav.top-menu {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 100;
  box-sizing: border-box;
}

nav.top-menu ul {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

nav.top-menu a {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  /* Optimization: backdrop-filter is expensive on mobile */
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.85rem 1.75rem;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  transition:
    transform 0.1s ease-out,
    background-color 0.3s ease;
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-shadow:
    /* Inner highlight (top-left) */
    inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    /* Inner shadow (bottom-right) */
    inset -1px -1px 2px rgba(0, 0, 0, 0.15),
    /* Faint outer shadow for depth */
    0px 4px 12px rgba(0, 0, 0, 0.2);
}

nav.top-menu a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* Makes the sheen match the button's rounded corners */
  background: radial-gradient(80px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
      rgba(255, 255, 255, 0.2),
      transparent 80%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

nav.top-menu a:hover::before {
  opacity: 1;
}

nav.top-menu a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Mobile Optimization: Disable expensive backdrop-filter */
@media (max-width: 768px) {
  nav.top-menu a {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(20, 20, 20, 0.85);
    /* Fallback solid-ish color */
  }
}

body {
  margin: 0;
  background-color: var(--background-primary);
  color: var(--text-primary);
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#content {
  padding: var(--page-padding) var(--page-padding) var(--page-padding);
  background-color: var(--background-primary);
}

#content h2 {
  font-family: "ClashGrotesk", sans-serif;
  font-size: 4rem;
  margin-bottom: 1rem;
}

.info-widget {
  display: flex;
  flex-direction: column;
}

.info-widget .secondary-text {
  color: var(--text-secondary);
}

.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--status-indicator);
  border-radius: 50%;
  margin-right: 0.5em;
}

.content-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

.hero-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding-top: 15vh;
}

.main-heading {
  font-family: "Ubuntu", sans-serif;
  font-weight: 350;
  font-size: clamp(3.5rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
}

.main-heading .highlight {
  font-style: italic;
  color: var(--text-highlight);
}

.description-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.project-grid {
  column-count: 2;
  column-gap: 1rem;
}


.project-card {
  background-color: var(--background-card);
  border-radius: 24px;
  border: 1px solid var(--border-primary);
  padding: var(--spacing-unit);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.project-card:hover {
  background-color: var(--background-card-hover);
  transform: scale(1.03);
  border: 1px solid var(--border-interactive);
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-family: "Ubuntu", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.scroll-indicator p {
  margin-bottom: 0.5rem;
}

.arrow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.arrow {
  width: 1rem;
  height: 1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: rotate(-45deg);
  opacity: 0.8;
  animation: bounce 1.5s infinite;
}

.arrow.delay {
  animation-delay: -0.5s;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0) rotate(-45deg);
    opacity: 0.8;
  }

  50% {
    transform: translateY(-6px) rotate(-45deg);
    opacity: 0.4;
  }
}

/* --- Hero Footer Container --- */
.hero-footer {
  /* Positioning */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  /* Ensures it's on top of the hero video */

  /* Layout */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 2rem 2rem 2rem;
  /* Matches page padding */
  box-sizing: border-box;
  /* IMPORTANT: Ensures padding doesn't add to width */
}

/* Styles for the individual widgets inside the footer */
.hero-footer .info-widget {
  font-family: "Ubuntu", sans-serif;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #808080;
  /* Secondary text color */
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Aligns text to the left */
}

.info-widget .main-text {
  font-family: "Ubuntu", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #e5e5e5;
  /* Primary text color */
  text-transform: none;
  /* Removes uppercase from this line */
  margin-bottom: 0.25rem;
}

.info-widget .live-data-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.widget-icon {
  width: 1rem;
  height: 1rem;
  stroke: #808080;
  /* Secondary text color */
  stroke-width: 1.5px;
}

.hero-footer .info-widget.align-right {
  text-align: right;
  align-items: flex-end;
}

.hero-footer .status-indicator {
  color: #f5c518;
  /* Accent color for the dot */
}

/* --- Refined Right-Side Widget Styles --- */
.info-widget.align-right .main-text {
  font-family: "Ubuntu", sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #808080;
}

.info-widget .live-data-row {
  gap: 0.5rem;
}

.info-widget .status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Ubuntu", sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #e5e5e5;
  /* Primary text color for this line */
}

.status-row .status-icon-svg {
  /* Adds a subtle glow to the icon */
  filter: drop-shadow(0 0 3px rgba(245, 197, 24, 0.7));
}

/* --- Sticky Panel "Push Up" Effect --- */

/* Common style for each panel (#about and #work) */
.panel {
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  /* Ensures padding is included in height/width */
  overflow: hidden;
  /* Add this to prevent content spillover */
}

/* The second page (About) - Sits on a lower layer */
#about {
  z-index: 10;
  background-color: var(--background-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Vertical iPad/Tablet Layout Optimization */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #about {
    height: 60vh;
    /* Reduced from 100vh to prevent excessive empty space */
  }
}

/* The third page (Work) - Sits on a higher layer to slide over the top */
#work {
  z-index: 20;
  /* background-color: #333333; Changed to match design */
  background: #174b6e;
  background: linear-gradient(158deg, rgba(23, 75, 110, 1) 10%, rgb(79, 79, 137) 75%, rgba(207, 159, 173, 1) 100%);
  color: var(--text-primary-dark);
  /* Light text for dark background */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Changed from 'center' to align content to the top */
  align-items: center;
  /* Set the initial rounded corners on the top */
  border-radius: 100px 100px 0 0;
  min-height: 220vh;
  /* Use min-height to ensure it's at least this tall */
  height: auto;
  /* Allow the height to grow based on content */
}

/* SectionTitle_PastWorks Component */
.section-title-pastworks {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 90px;
  /* Set from top of parent */
  padding-bottom: 8vh;
  width: 95vw;
  margin: 0 auto;
}

.section-title-pastworks__main {
  font-family: "ClashGrotesk", sans-serif;
  font-weight: 550;
  font-size: clamp(2rem, 12vw, 10rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-align: center;
  margin: 0;
  text-shadow:
    /* Soft highlight (from top-left) */
    -1px -1px 2px rgba(255, 255, 255, 0.3),
    /* Soft shadow (bottom-right) */
    2px 4px 12px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.section-title-pastworks__main .word-left {
  transform: translateX(-100px);
  will-change: transform;
}

.section-title-pastworks__main .word-right {
  transform: translateX(100px);
  will-change: transform;
}

.section-title-pastworks__sub {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #dfdfdf;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  position: absolute;
  bottom: 7vh;
  /* Match container padding-bottom */
}

.section-title-pastworks__sub--left {
  left: 7rem;
  /* Match container padding */
}

.section-title-pastworks__sub--right {
  right: 7rem;
  /* Match container padding */
}

/* Work Content Section */
.work-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 1400px;
  padding: 0 2rem 40px;
  box-sizing: border-box;
  /* Ensures padding is included in the width */
}

/* Section Title Playgrounds */
.section-title-playgrounds {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
  /* 50px below the cards */
  padding-bottom: 1vh;
  width: 95vw;
  margin: 0 auto;
  width: 95vw;
  margin: 0 auto;
  /* gap removed in favor of relative positioning on tagline */
}

.section-title-playgrounds__main {
  font-family: "ClashGrotesk", sans-serif;
  font-weight: 550;
  font-size: clamp(2rem, 11vw, 9rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-align: center;
  margin: 0;
  margin: 0;
  line-height: 1;
  /* Reset line-height to standard to avoid clipping */
  text-shadow:
    /* Soft highlight (from top-left) */
    -1px -1px 2px rgba(255, 255, 255, 0.3),
    /* Soft shadow (bottom-right) */
    2px 4px 12px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.section-title-playgrounds__main .word-left {
  transform: translateX(-70px);
  will-change: transform;
}

.section-title-playgrounds__main .word-right {
  transform: translateX(70px);
  will-change: transform;
}

/* Playground Component Styles (integrated into work page) */

.playground-tagline {
  font-family: "Ubuntu", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.1rem);
  /* was 33px */
  font-weight: 400;
  line-height: clamp(2rem, 4.5vw, 2.5rem);
  /* was 40px */
  letter-spacing: clamp(0.5px, 0.1vw, 1px);
  /* was 1px */
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  /* was 2rem */
  max-width: clamp(400px, 75vw, 800px);
  /* was 550px, then 600px */
  max-width: clamp(400px, 75vw, 800px);
  margin: 0 auto clamp(1.5rem, 3vw, 2rem) auto;

  /* Positioning Fix */
  position: relative;
  top: -10px;
  /* Pull closer on desktop */
  margin-top: 1rem;
  padding-top: 0;
  /* was 1rem */
  padding-bottom: clamp(0.5rem, 1vw, 1rem);
  padding-bottom: clamp(0.5rem, 1vw, 1rem);
  /* Removed old opacity/transform transition for GSAP control */
}

.tagline-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(10px);
  will-change: transform, opacity, filter;
  margin-right: 0.25em;
  /* Space between words */
}

/*
  Force tagline to be visible on tablets and mobile where JS animations are disabled.
  This targets touch devices (like iPad/iPhone) and smaller screens.
*/
@media (max-width: 768px),
(pointer: coarse) {
  .playground-tagline {
    opacity: 1;
    transform: translateY(0);
  }

  .playground-tagline {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile spacing adjustment for tagline */
@media (max-width: 768px) {
  .playground-tagline {
    top: 3rem;
  }
}

/* Tablet spacing adjustment (iPad) */
@media (min-width: 769px) and (max-width: 1024px) {
  .playground-tagline {
    top: 2rem;
  }
}

.playground-content {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: start;
  justify-content: center;
  gap: 1.5rem;
}

/* Music Section */
.music-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Align to right edge, close to photography */
  gap: clamp(6px, 1vw, 10px);
  /* was 10px */
}

.music-control-panel {
  width: clamp(100px, 15vw, 132px);
  /* was 132px */
  height: clamp(100px, 15vw, 132px);
  /* was 132px */
  border-radius: clamp(20px, 4vw, 33px);
  /* was 33px */
  border: 1px solid rgba(253, 186, 114, 0.1);
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0px clamp(2px, 0.5vw, 4px) clamp(3px, 0.7vw, 6px) rgba(253, 186, 114, 0.05),
    0px clamp(6px, 1.2vw, 10px) clamp(9px, 1.8vw, 15px) rgba(253, 186, 114, 0.05);
  order: -1;
  /* Place above playlist in flex layout */
  position: relative;
  /* Contains absolutely positioned children */
}

.music-control-panel::before {
  content: "";
  position: absolute;
  top: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  left: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  right: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  bottom: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  border-radius: clamp(18px, 3.5vw, 29px);
  /* was 29px */
  background: rgba(255, 255, 255, 0.5);
}

.control-dots {
  position: absolute;
  top: clamp(12px, 2vw, 18px);
  /* was 18px */
  left: clamp(10px, 1.8vw, 16px);
  /* was 16px */
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.6vw, 5px);
  /* was 5px */
}

.control-dot {
  width: clamp(7px, 1.2vw, 10px);
  /* was 10px */
  height: clamp(7px, 1.2vw, 10px);
  /* was 10px */
  border-radius: 50%;
  background: #024f40;
}

.control-dot.tiny_3 {
  position: relative;
  margin-left: clamp(10px, 1.8vw, 16px);
  /* was 16px */
  margin-top: clamp(-20px, -3.5vw, -30px);
  /* was -30px */
}



.control-circles {
  position: absolute;
  top: clamp(35px, 6vw, 50px);
  /* was 50px */
  left: clamp(56px, 9vw, 80px);
  /* was 80px */
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.6vw, 5px);
  /* was 5px */
}

.control-circle {
  width: clamp(11px, 1.8vw, 16px);
  /* was 16px */
  height: clamp(11px, 1.8vw, 16px);
  /* was 16px */
  border: clamp(2px, 0.35vw, 3px) solid #024f40;
  /* was 3px */
  border-radius: 50%;
  background: transparent;
}

.music-playlist {
  width: clamp(220px, 25vw, 286px);
  /* was 286px */
  height: clamp(220px, 25vw, 286px);
  /* was 286px */
  padding: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  border-radius: clamp(20px, 4vw, 33px);
  /* was 33px */
  border: 1px solid rgba(253, 186, 114, 0.1);
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0px clamp(2px, 0.5vw, 4px) clamp(3px, 0.7vw, 6px) rgba(253, 186, 114, 0.05),
    0px clamp(6px, 1.2vw, 10px) clamp(9px, 1.8vw, 15px) rgba(253, 186, 114, 0.05);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.6vw, 5px);
  /* Replaced margin with gap */
  justify-content: flex-start;
}

/* Playlist Item Container - Interactive Wrapper */
.playlist-item-container {
  display: block;
  text-decoration: none;
  border-radius: clamp(15px, 3vw, 25px);
  /* was 25px */
  border: 1px solid rgba(253, 186, 114, 0.1);
  background: transparent;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  /* Removed margin-bottom to let the parent's 'gap' handle spacing */
}

.playlist-item-container:hover {
  border: 1px solid rgba(253, 186, 114, 0.8);
  box-shadow:
    0px clamp(5px, 1vw, 8px) clamp(15px, 2.5vw, 24px) rgba(253, 186, 114, 0.25),
    0px clamp(10px, 1.8vw, 16px) clamp(25px, 4.5vw, 40px) rgba(253, 186, 114, 0.15),
    0 0 clamp(20px, 3.5vw, 30px) rgba(255, 154, 86, 0.3),
    inset 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.playlist-item-container:active {
  transform: translateY(0);
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 0.6vw, 0.5rem);
  /* was 0.5rem */
  padding: clamp(5px, 1vw, 8px);
  /* was 8px */
  border-radius: clamp(15px, 3vw, 25px);
  /* was 25px */
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  margin: 0;
  transition: all 0.3s ease;
}

.playlist-item-container:hover .playlist-item {
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    0px clamp(2px, 0.5vw, 4px) clamp(7px, 1.4vw, 12px) rgba(0, 0, 0, 0.15),
    inset 0px 1px 0px rgba(255, 255, 255, 0.3);
}

.album-cover {
  width: clamp(55px, 8vw, 74px);
  /* was 74px */
  height: clamp(55px, 8vw, 74px);
  /* was 74px */
  border-radius: clamp(13px, 2.5vw, 22px);
  /* was 22px */
  object-fit: cover;
  box-shadow:
    0px 2px clamp(2px, 0.5vw, 4px) rgba(0, 0, 0, 0.1),
    0px clamp(2px, 0.5vw, 4px) clamp(3px, 0.7vw, 6px) rgba(0, 0, 0, 0.1);
}

.track-info {
  display: flex;
  flex-direction: column;
  gap: clamp(1px, 0.25vw, 2px);
  /* was 2px */
}

.track-title {
  font-family: "Ubuntu", sans-serif;
  font-size: clamp(11px, 1.5vw, 13px);
  /* was 13px */
  font-weight: 400;
  line-height: clamp(14px, 2vw, 17px);
  /* was 17px */
  letter-spacing: clamp(-0.08px, -0.015vw, -0.12px);
  /* was -0.12px */
  color: #525252;
}

.track-artist {
  font-family: "Ubuntu", sans-serif;
  font-size: clamp(11px, 1.5vw, 13px);
  /* was 13px */
  font-weight: 400;
  line-height: clamp(14px, 2vw, 17px);
  /* was 17px */
  letter-spacing: clamp(-0.08px, -0.015vw, -0.12px);
  /* was -0.12px */
  color: rgba(115, 115, 115, 0.8);
}

/* Photography Section */
.photography-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photography-background-image {
  position: absolute;
  top: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  left: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  right: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  bottom: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  width: calc(100% - clamp(6px, 1.2vw, 10px));
  /* was calc(100% - 10px) */
  height: calc(100% - clamp(6px, 1.2vw, 10px));
  /* was calc(100% - 10px) */
  object-fit: cover;
  border-radius: clamp(15px, 3vw, 25px);
  /* was 25px */
  z-index: 1;
  transition: filter 0.4s ease;
}

.photography-card:hover .photography-background-image {
  filter: brightness(1.05);
}

.photography-card {
  width: clamp(320px, 40vw, 440px);
  /* was 440px */
  height: clamp(320px, 40vw, 440px);
  /* was 440px */
  border-radius: clamp(20px, 4vw, 33px);
  /* was 33px */
  border: 1px solid rgba(253, 186, 114, 0.1);
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0px clamp(2px, 0.5vw, 4px) clamp(3px, 0.7vw, 6px) rgba(253, 186, 114, 0.05),
    0px clamp(6px, 1.2vw, 10px) clamp(9px, 1.8vw, 15px) rgba(253, 186, 114, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.photography-card:hover {
  transform: scale(1.02);
  box-shadow:
    0px clamp(5px, 1vw, 8px) clamp(12px, 2.3vw, 20px) rgba(253, 186, 114, 0.2),
    0px clamp(10px, 1.8vw, 16px) clamp(20px, 3.6vw, 32px) rgba(253, 186, 114, 0.15),
    0 0 clamp(25px, 4.5vw, 40px) rgba(255, 154, 86, 0.3);
}

.photography-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.2rem, 3vw, 2rem);
  /* was 2rem */
  z-index: 2;
}

.photography-text {
  color: white;
}

.photography-title {
  font-family: "ClashGrotesk", sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: clamp(18px, 2.7vw, 24px);
  /* was 24px */
  color: #f0f0f0;
  margin-bottom: clamp(10px, 1.7vw, 15px);
  /* was 15px */
}

.photography-subtitle {
  font-family: "ClashGrotesk", sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  line-height: clamp(18px, 2.7vw, 24px);
  /* was 24px */
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: clamp(45px, 8vw, 70px);
  /* was 70px */
}

/* Motorsport Section */
.motorsport-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align to left edge, close to photography */
  gap: clamp(6px, 1vw, 10px);
  /* was 10px */
}

.motorsport-large-card {
  width: clamp(220px, 25vw, 286px);
  /* was 286px */
  height: clamp(220px, 25vw, 286px);
  /* was 286px */
  border-radius: clamp(20px, 4vw, 33px);
  /* was 33px */
  border: 1px solid rgba(253, 186, 114, 0.1);
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0px clamp(2px, 0.5vw, 4px) clamp(3px, 0.7vw, 6px) rgba(253, 186, 114, 0.05),
    0px clamp(6px, 1.2vw, 10px) clamp(9px, 1.8vw, 15px) rgba(253, 186, 114, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.motorsport-background-image {
  position: absolute;
  top: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  left: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  right: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  bottom: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  width: calc(100% - clamp(6px, 1.2vw, 10px));
  /* was calc(100% - 10px) */
  height: calc(100% - clamp(6px, 1.2vw, 10px));
  /* was calc(100% - 10px) */
  object-fit: cover;
  border-radius: clamp(15px, 3vw, 25px);
  /* was 25px */
  z-index: 1;
  transition: filter 0.3s ease;
}

.motorsport-large-card:hover .motorsport-background-image {
  filter: brightness(1.05);
}

.motorsport-large-card:hover {
  transform: scale(1.05);
  box-shadow:
    0px clamp(5px, 1vw, 8px) clamp(12px, 2.3vw, 20px) rgba(253, 186, 114, 0.2),
    0px clamp(10px, 1.8vw, 16px) clamp(20px, 3.6vw, 32px) rgba(253, 186, 114, 0.15),
    0 0 clamp(25px, 4.5vw, 40px) rgba(255, 154, 86, 0.3);
}

.motorsport-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.2rem, 3vw, 2rem);
  /* was 2rem */
  z-index: 2;
}

.motorsport-text {
  color: white;
}

.motorsport-title {
  font-family: "ClashGrotesk", sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: clamp(18px, 2.7vw, 24px);
  /* was 24px */
  color: #f0f0f0;
  margin-bottom: clamp(6px, 1.2vw, 10px);
  /* was 10px */
}

.motorsport-subtitle {
  font-family: "ClashGrotesk", sans-serif;
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  font-weight: 500;
  line-height: clamp(18px, 2.7vw, 24px);
  /* was 24px */
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: clamp(40px, 7vw, 60px);
  /* was 60px */
}

.tennis_panel {
  width: clamp(110px, 16vw, 142px);
  /* was 142px */
  height: clamp(110px, 16vw, 142px);
  /* was 142px */
  border-radius: clamp(20px, 4vw, 33px);
  /* was 33px */
  border: 1px solid rgba(253, 186, 114, 0.1);
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0px clamp(2px, 0.5vw, 4px) clamp(3px, 0.7vw, 6px) rgba(253, 186, 114, 0.05),
    0px clamp(6px, 1.2vw, 10px) clamp(9px, 1.8vw, 15px) rgba(253, 186, 114, 0.05);
  overflow: hidden;
  position: relative;
  /* Contains absolutely positioned children */
}

/* Desktop layout: align tennis panel with motorsport (left edges) and
   bottom-align it to the photography card by lifting it one row height + gap */
@media (min-width: 1025px) {
  .playground-content {
    margin-top: 6vh;
  }

  .playground-content .tennis_panel {
    grid-column: 3;
    justify-self: start;
    transform: translateY(calc(-100% - 1.5rem));
  }

  .playground-indicator {
    transform: translateY(-12vh);
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* Tennis Ball Animation Elements */
.ball-wrapper {
  position: absolute;
  left: 50%;
  bottom: clamp(6px, 1.2vw, 10px);
  /* was 10px */
  transform: translateX(-50%);
  z-index: 3;
}

.tennis-ball {
  width: clamp(35px, 6vw, 50px);
  /* was 50px */
  height: clamp(35px, 6vw, 50px);
  /* was 50px */
  object-fit: contain;
  will-change: transform;
  display: block;
}

.tennis-shadow {
  position: absolute;
  left: 50%;
  bottom: clamp(1px, 0.25vw, 2px);
  /* was 2px */
  width: clamp(35px, 6vw, 50px);
  /* was 50px */
  height: clamp(7px, 1.2vw, 10px);
  /* was 10px */
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  will-change: transform, opacity;
}

.tennis_panel::before {
  content: "";
  position: absolute;
  top: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  left: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  right: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  bottom: clamp(3px, 0.6vw, 5px);
  /* was 5px */
  border-radius: clamp(15px, 3vw, 25px);
  /* was 25px */
  background: rgba(255, 255, 255, 0.5);
}

/* Playground Indicator */
.playground-indicator {
  display: flex;
  justify-content: center;
  margin-top: clamp(3.5rem, 8vh, 4.5rem);
  /* increased to 6vh */
  margin-bottom: clamp(4rem, 10vh, 6rem);
  /* Responsive bottom spacing from indicator bar */
}

.indicator-bar {
  width: clamp(80px, 24vw, 180px);
  /* responsive length */
  height: clamp(4px, 0.7vw, 6px);
  /* was 6px */
  border-radius: 9999px;
  background: #fff;
  opacity: 0.5;
  margin: 0 auto;
  display: block;
}

/* Project Card Container - Outer Container */
.project-card-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #1a1a1a;
  border-radius: 24px;
  border: 1px solid #2a2a2a;
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.project-card-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, #a963eb 0%, #726ce7 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: exclude;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.project-card-container:hover {
  border: 1px solid transparent;
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.15),
    0 8px 32px rgba(79, 70, 229, 0.4),
    0 4px 16px rgba(79, 70, 229, 0.2),
    0 0 0 1px rgba(138, 43, 226, 0.3);
}

.project-card-container:hover::before {
  opacity: 1;
}

/* Academic Researches specific hover effect */
.academic-researches::before {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}

.academic-researches:hover {
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.15),
    0 8px 32px rgba(43, 100, 58, 0.4),
    0 4px 16px rgba(43, 100, 58, 0.2),
    0 0 0 1px rgba(52, 211, 153, 0.3);
}

/* Robotics & Automation specific hover effect */
.robotics-automation::before {
  background: linear-gradient(135deg, #f59f0bdd 0%, #d97706de 100%);
}

.robotics-automation:hover {
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.15),
    0 8px 32px rgba(217, 119, 6, 0.4),
    0 4px 16px rgba(217, 119, 6, 0.2),
    0 0 0 1px rgba(245, 158, 11, 0.3);
}

/* Title Card */
.project-card-title {
  background: #252525;
  border-radius: 16px;
  padding: 12px 20px;
}

.accent-bar {
  height: 4px;
  border-radius: 99px;
  margin-bottom: 8px;
}

.career-accent {
  background: linear-gradient(90deg, #8a2be2 0%, #4f46e5 100%);
}

.academic-accent {
  background: linear-gradient(90deg, #34d399 0%, #059669 100%);
}

.robotics-accent {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.project-card-title h3 {
  color: #e5e5e5;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
  font-family: "Ubuntu", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Content Card */
.project-card-content {
  background: #000000;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

.project-content-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.project-content-image:hover {
  opacity: 0.8;
}

.project-card-footer {
  position: relative;
  z-index: 2;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
}

.project-card-footer h4 {
  color: #f0f0f0;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  margin: 0;
  font-family: "ClashGrotesk", sans-serif;
}

.project-card-footer p {
  color: #808080;
  font-size: 1rem;
  font-weight: 400;
  margin: 8px 0 0 0;
  line-height: 1.5;
  font-family: "Ubuntu", sans-serif;
}

/* --- Styles to restore the content layout inside the About section --- */
.about-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  width: 90%;
  max-width: 1400px;
  padding: 2rem;
  transform: translateY(-30px);
}

/* --- Definitive Asymmetric Photo Grid --- */

.photo-grid {
  display: grid;
  /* The new 8x10 structure */
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(10, 1fr);
  /* The new gap */
  gap: 15px;
  /* Constrain the overall component */
  max-width: 38vw;
  aspect-ratio: 2 / 3;
  margin: auto;
}

/* Base styles for each grid cell and the image inside */
.grid-item {
  border-radius: 16px;
  overflow: clip;
  /* Ensures image corners are clipped */
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.grid-item img:hover {
  transform: scale(1.05);
}

/* Definitive 8x10 placement for each item */
/* Format is: row-start / column-start / row-end / column-end */

.item-city {
  grid-area: 1 / 1 / 4 / 6;
}

.item-keyboard {
  grid-area: 1 / 6 / 5 / 9;
}

.item-robot {
  grid-area: 4 / 1 / 7 / 5;
}

.item-sunset {
  grid-area: 5 / 5 / 8 / 9;
}

.item-soccer {
  grid-area: 7 / 1 / 11 / 4;
}

.item-electronics {
  grid-area: 8 / 4 / 11 / 9;
}

.about-text-column {
  /* Use flexbox to space out the h2 and the new widget */
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  justify-content: space-between;
}

.about-text-column h2 {
  font-family: "ClashGrotesk", sans-serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 1.1;
  color: #808080;
  /* Dim secondary text color */
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.about-text-column h2 .highlight {
  font-style: italic;
}

.highlight-on-scroll {
  /* Prepares the element for an animated underline */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  /* Positions the line at the bottom */
  background-repeat: no-repeat;
  background-size: 0% 2px;
  /* Initial state - hidden until animation starts */
  padding-bottom: 2px;
  /* Adds space for the underline */
}



.project-card {
  background-color: #1a1a1a;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e5e5e5;
  font-family: "Ubuntu", sans-serif;
}

/* --- Location History Widget --- */
.location-history-widget {
  font-family: "Ubuntu", sans-serif;
  color: var(--text-secondary);
  padding-bottom: 4rem;
  /* Align with footer padding */
}

.location-history-widget .widget-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-primary);
}

.location-history-widget .location-path {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-primary);
}

.location-path .path-arrow {
  width: 1.1rem;
  height: 1.1rem;
  stroke: var(--text-secondary);
  stroke-width: 3.5px;
  /* Increased arrow weight */
}


/* --- Responsive Styles for Mobile --- */

@media (max-width: 767px) {
  /* This code only applies if the screen width is 768px or less */

  /* Contact Section Mobile Optimizations */
  .contact-hero {
    position: relative;
    /* Add for positioning context */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    display: grid;
    grid-template-columns: 70% auto;
    /* Reduced text column to 70% + image column */
    align-items: center;
    /* Coarse vertical alignment */
    gap: 1rem;
    text-align: left;
    /* Changed from center */
    padding: 10vh 6vw 10vh 6vw;
    /* Consistent padding for auto height */
    height: auto;
    min-height: auto;
  }

  .email_video {
    display: none;
    /* Hide video on mobile */
  }

  .contact-hero__right {
    display: contents;
    /* Flatten structure for grid control */
  }

  .contact-hero__left {
    display: contents;
    /* Flatten structure for grid control */
  }

  .contact-hero__title {
    grid-column: 1 / 2;
    /* Place in first column */
    text-align: left !important;
    margin-right: 0 !important;
  }

  .email_video_container {
    grid-column: 2 / 3;
    /* Place in second column */
    position: relative;
    /* Create positioning context for image */
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }

  .email_video_container:hover {
    transform: none;
    box-shadow: none;
  }

  .linkedin_img {
    /* Precise positioning relative to grid container */
    position: absolute;
    top: 30%;
    /* Adjusted to prevent top clipping */
    left: 0;
    transform: translateY(-50%);
    /* Reduced from -60% to prevent top clipping */
    width: 200px;
    /* Reduced from 280px to make it smaller */
    height: auto;
    border-radius: 12px;
    cursor: pointer;
    transition: none !important;
    /* Force remove transition on mobile */
  }


  .email_linkedin_button {
    grid-column: 1 / 3;
    /* Span both columns */
    justify-content: center;
    /* Center the buttons */
    margin: 5rem 0 5rem 0;
    /* Top and bottom margin for proper spacing */
  }

  /* Contact Hero Title Size Adjustment for Mobile */
  .title-line {
    font-size: clamp(4rem, 7.5vw, 6.5rem);
  }

  /* Hero Section Mobile Optimizations */
  .center-text {
    font-size: 6rem;
    /* Smaller main title on mobile */
  }

  .subtitle {
    font-size: 1.8rem;
    /* Smaller subtitle on mobile */
  }

  nav.top-menu ul {
    gap: 0.75rem;
    /* Reduce gap between nav items */
  }

  nav.top-menu a {
    padding: 0.6rem 1.2rem;
    /* Smaller nav buttons */
    font-size: 1rem;
  }

  /* About Section Mobile Optimizations */
  .about-container {
    /* Change the two-column grid to a single column */
    grid-template-columns: 1fr;
    padding: 1rem;
    /* Reduce padding */
    transform: none;
    /* Remove the -50px transform on mobile */
  }

  #about {
    /* Change to align-items: flex-start to position content at top */
    align-items: flex-start !important;
    /* Reduce padding on mobile for more space */
    padding: 2vh 1rem 8vh 1rem;
    /* Added bottom padding: 8vh */
    height: auto;
    /* Let content determine the height */
    min-height: 0;
    /* Remove the large minimum height that was causing the gap */
  }

  .about-text-column {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .about-text-column h2 {
    margin-top: -2rem !important;
    margin-bottom: 0rem;
    text-align: left;
    line-height: 1.2;
  }

  /* About project grid mobile optimization */
  .about-project-grid {
    /* Stack images in a single column on mobile */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    /* 4 rows for 4 images */
    gap: 1.5rem;
    /* Increased gap for better mobile spacing */
    margin-top: 2rem;
    /* Add space from the journey text */
  }



  /* Remove hover effects on mobile for about images */
  .about-project-grid img:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Work Section Mobile Optimizations */
  #work {
    height: auto;
    /* Let the content define the height */
    min-height: 0;
    /* Remove the minimum height constraint causing the gap */
    padding-bottom: 6vh;
    /* Reduced from 15vh - consistent bottom margin */
  }

  .work-content {
    /* Stack project cards vertically on mobile */
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem 2rem;
  }

  /* Playground Component Mobile Optimizations */
  .playground-tagline {
    font-size: clamp(1.4rem, 3vw, 1.7rem);
    /* Reduced from 1.8rem-2.1rem */
    line-height: clamp(1.6rem, 3.5vw, 2rem);
    /* Reduced from 2rem-2.5rem */
  }

  .playground-content {
    margin-top: 2rem;
    /* Push first panel down from tagline on mobile */
  }

  .playground-content {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "photo photo"
      "motor motor"
      "playlist control"
      "playlist tennis";
    justify-content: center;
    align-items: start;
    /* Align items to the top */
    gap: 1rem 0.8rem;
    /* Reduced column gap from 1.5rem to 0.8rem */
  }

  /*
    FIX: Make container elements transparent to the grid layout.
    This ensures that their children can be placed into the grid areas correctly.
  */
  .music-section,
  .motorsport-section,
  .photography-section,
  .playground-content>.project-card-link {
    display: contents;
  }

  /* Remove incorrect grid assignments from containers */
  .photography-section,
  .music-playlist {
    grid-area: unset;
    justify-content: unset;
    gap: unset;
  }

  /*
    FIX: Apply grid areas and alignment to the ACTUAL grid items.
  */
  .photography-card {
    grid-area: photo;
    justify-self: center;
  }

  .motorsport-large-card {
    grid-area: motor;
    justify-self: center;
  }

  .music-playlist {
    grid-area: playlist;
    justify-self: end;
  }

  .music-control-panel {
    grid-area: control;
    align-self: end;
    justify-self: center;
  }

  .tennis_panel {
    grid-area: tennis;
    align-self: start;
    justify-self: center;
  }

  /* Make individual playlist items taller to reduce visual gaps */
  .playlist-item {
    padding: clamp(12px, 2.5vw, 16px);
    /* Increased from 8px to 12-16px */
  }

  .music-control-panel {
    grid-area: control;
    align-self: end;
    /* Align to bottom of its cell */
  }

  .tennis_panel {
    grid-area: tennis;
    align-self: start;
    /* Align to top of its cell */
  }

  /* Mobile-specific size adjustments */
  .photography-card {
    width: min(90vw, 352px);
    /* Responsive width, max 352px */
    height: min(70vw, 275px);
    /* Responsive height, max 275px */
  }

  .motorsport-large-card {
    width: min(90vw, 352px);
    /* Match photography card width */
    height: min(70vw, 275px);
    /* Match photography card height */
  }

  .tennis_panel {
    width: min(28vw, 110px);
    /* Match music control panel width */
    height: min(28vw, 110px);
    /* Match music control panel height */
  }

  .music-control-panel {
    width: min(28vw, 110px);
    /* Responsive width, max 110px */
    height: min(28vw, 110px);
    /* Responsive height, max 110px */
  }

  .music-playlist {
    width: min(65vw, 220px);
    /* Narrower: reduced from 75vw/260px */
    height: min(60vw, 230px);
    /* Taller: increased height */
    justify-content: space-around;
    /* Smaller gaps, closer to edges */
  }

  /* Tennis Ball Animation - Reduced Motion */
  @media (prefers-reduced-motion: reduce) {

    .tennis-ball,
    .tennis-shadow {
      animation: none !important;
    }

    .tennis-ball {
      transform: translateY(clamp(-15px, -3vw, -20px));
      /* Responsive reduced motion position */
    }
  }

  /* Hero Footer Mobile Optimizations */
  .hero-footer {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
  }

  .info-widget.align-right {
    align-items: center;
    text-align: center;
  }

  /* Preloader Mobile Optimizations */
  .preloader-bar-backplate {
    width: 86vw;
    /* Use viewport width to make it narrower than full screen */
    max-width: 500px;
    /* Set a reasonable max-width for mobile */
    padding: 0 clamp(16px, 4vw, 24px);
    gap: clamp(12px, 3vw, 20px);
  }

  .light {
    width: clamp(50px, 10vw, 70px);
    /* Reduced light size */
    height: clamp(50px, 10vw, 70px);
  }

  .preloader-label {
    font-size: clamp(2rem, 8vw, 2.5rem);
    /* Responsive preloader text */
  }

  .section-title-pastworks__main .word-left,
  .section-title-pastworks__main .word-right,
  .section-title-playgrounds__main .word-left,
  .section-title-playgrounds__main .word-right {
    /* Shrink horizontal movement for mobile */
    transform: translateX(32px);
  }

  .section-title-pastworks__main .word-left,
  .section-title-playgrounds__main .word-left {
    transform: translateX(-32px);
  }

  .section-title-pastworks__main .word-right,
  .section-title-playgrounds__main .word-right {
    transform: translateX(32px);
  }

  .about-container .about-project-grid {
    padding-top: 1.5rem !important;
  }

  .photo-grid {
    margin-top: -2rem;
    max-width: 70vw;
  }

  .location-history-widget {
    display: none;
  }
}

@media (max-width: 600px) {

  .section-title-pastworks__sub,
  .info-widget {
    display: none !important;
  }
}

/* --- Combined Mobile and Vertical Tablet Playground Layout --- */
@media (max-width: 1024px) and (orientation: portrait) {

  /* This layout applies to both mobile and vertical tablets */
  .playground-content {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "photo photo"
      "motor motor"
      "playlist control"
      "playlist tennis";
    justify-content: center;
    align-items: start;
    gap: 1rem 0.8rem;
    /* Mobile gap size by default */
  }

  /*
    FIX: Make container elements transparent to the grid layout.
    This ensures that their children can be placed into the grid areas correctly.
  */
  .music-section,
  .motorsport-section,
  .photography-section,
  .playground-content>.project-card-link {
    display: contents;
  }

  .playground-tagline {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: -2.5rem !important;
    margin-bottom: 2rem !important;
    max-width: 85%;
  }

  /*
    FIX: Apply grid areas and alignment to the ACTUAL grid items for portrait tablets.
  */
  .photography-card {
    grid-area: photo;
    justify-self: center;
  }

  .motorsport-large-card {
    grid-area: motor;
    justify-self: center;
  }

  .music-playlist {
    grid-area: playlist;
    justify-self: end;
  }

  .music-control-panel {
    grid-area: control;
    align-self: end;
    justify-self: center;
  }

  .tennis_panel {
    grid-area: tennis;
    align-self: start;
    justify-self: center;
  }

  .motorsport-section>.project-card-link {
    grid-area: motor;
    justify-self: center;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  /* Contact Hero Layout for iPad Portrait (similar to mobile but with video) */
  .contact-hero {
    position: relative;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 70% auto;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding: 10vh 6vw 10vh 6vw;
    height: auto;
    min-height: auto;
  }

  .photo-grid {
    margin-top: 2rem;
  }

  .email_video {
    display: block;
    /* Show video on iPad (unlike mobile) */
  }

  .contact-hero__right {
    display: contents;
  }

  .contact-hero__left {
    display: contents;
  }

  .title-line--italic {
    transform: translateX(2em);
  }

  .contact-hero__title {
    grid-column: 1 / 2;
    text-align: left !important;
    margin-right: 0 !important;
  }

  .email_video_container {
    grid-column: 2 / 3;
    position: relative;
    margin-bottom: -5rem;
    background: #111111;
    border-radius: 15px;
    margin: 0;
    width: 170%;
    height: auto;
    aspect-ratio: 1/1;
  }

  .email_video_container:hover {
    box-shadow:
      0 0 15px rgba(111, 99, 233, 0.25),
      0 0 30px rgba(111, 99, 233, 0.15),
      0 0 45px rgba(111, 99, 233, 0.08);
    transform: scale(1.03);
  }

  .linkedin_img {
    position: absolute;
    top: -30%;
    left: -30%;
    width: 60%;
    height: 60%;
    border-radius: 12px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.6s ease;
    z-index: 2;
  }

  .linkedin_img:hover {
    box-shadow:
      0 0 15px rgba(111, 99, 233, 0.25),
      0 0 30px rgba(111, 99, 233, 0.15),
      0 0 45px rgba(111, 99, 233, 0.08);
    transform: scale(1.02);
  }

  .email_linkedin_button {
    grid-column: 1 / 3;
    justify-content: center;
    margin: 5rem 0 5rem 0;
  }

  .email_linkedin_button {
    gap: 4rem;
  }

  .email_linkedin_button li a {
    padding: 1.4rem 2.8rem;
    font-size: 1.5rem;
    border-radius: 25px;
  }

  /* Contact Hero Title Size Adjustment for iPad Portrait */
  .title-line {
    font-size: clamp(6.5rem, 13vw, 14rem);
    margin-top: 2rem;
  }

  /* This layout applies to both mobile and vertical tablets */
  .playground-content {
    gap: 1.5rem 1rem;
    /* Slightly larger gaps than mobile for iPad */
    margin-top: 3rem;
    /* Push first panel further down from tagline */
  }

  /* iPad-specific work section height optimization */
  #work {
    padding-bottom: 6vh;
    /* Even more compact for iPad vertical */
  }

  /* iPad-specific indicator spacing */
  .playground-indicator {
    margin-bottom: 1.5rem;
    /* Slightly smaller bottom margin for iPad */
  }

  /* iPad-specific size adjustments (larger than mobile) */
  .photography-card {
    width: min(88vw, 580px) !important;
    height: min(75vw, 480px) !important;
  }

  .motorsport-large-card {
    width: min(88vw, 580px) !important;
    height: min(75vw, 480px) !important;
  }

  .music-control-panel {
    width: min(22vw, 150px);
    height: min(22vw, 150px);
  }

  .tennis_panel {
    width: min(22vw, 150px);
    height: min(22vw, 150px);
  }

  .music-playlist {
    width: min(66vw, 414px);
    /* Adjusted to match larger photography card width */
    height: calc(300px + 1.5rem);
    /* Match combined height of tennis + control panels + gap */
    gap: 5px;
    /* Smaller gap between playlist items */
    padding: 5px 8px;
    /* Reduced top/bottom padding, kept horizontal padding */
    justify-content: space-evenly;
    /* Evenly distribute playlist items */
  }

  /* Larger playlist items for vertical iPad */
  .playlist-item {
    align-items: center;
    /* Ensure vertical alignment */
    padding: 4px 16px;
    /* Reduced vertical padding to prevent overflow, kept horizontal padding */
    gap: 0.75rem;
    /* Larger gap between album cover and text */
  }

  /* Larger album covers for vertical iPad */
  .album-cover {
    width: 90px;
    /* Increased from default 74px */
    height: 90px;
    border-radius: 26px;
    /* Proportionally larger border radius */
    flex-shrink: 0;
    /* Prevent album art from shrinking */
  }

  .track-info {
    justify-content: center;
    /* Vertically center text lines */
    gap: 6px;
    /* Larger gap for bigger text */
  }

  /* Larger text for vertical iPad */
  .track-title {
    font-size: 16px;
    /* Increased from default 13px */
    line-height: 20px;
    font-weight: 500;
    /* Slightly bolder */
  }

  .track-artist {
    font-size: 15px;
    /* Increased from default 13px */
    line-height: 19px;
  }
}

/* ─────────────────────────────────────────────
   Work Spotlight (bridge between cards and playgrounds)
   Namespaced: #work-spotlight
   Apple-like glass rows + floating preview pop
───────────────────────────────────────────── */
#work-spotlight {
  margin-top: clamp(2.25rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

#work-spotlight .spotlight-wrap {
  width: min(90vw, 1400px);
  margin: 0 auto;
  position: relative;
  /* containing block for floating pop */
}

/* Visually hidden heading for a11y only */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* List layout */
#work-spotlight .spotlight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Hairline separators above each row (including the first) */
#work-spotlight .spotlight-row {
  position: relative;
}

#work-spotlight .spotlight-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* Row base */
#work-spotlight .spotlight-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 0.75rem;
  height: clamp(60px, 9vh, 88px);
  cursor: pointer;
  padding-inline: 0.25rem;
  /* tiny breathing room without visible padding */
  color: rgba(255, 255, 255, 0.82);
  transition: color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#work-spotlight .spotlight-row:hover {
  color: rgba(255, 255, 255, 0.86);
}

#work-spotlight .spotlight-row__icon {
  width: 2em;
  height: 2em;
  border-radius: 0;
  background: transparent !important;
  color: #ffffffeb;
  /* ensure icons are fully opaque */
  margin-left: 2rem;
}

#work-spotlight .spotlight-row__title {
  font-family: "ClashGrotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  letter-spacing: 0.01em;
}

/* Ensure inline SVG fills the icon container and is fully opaque */
#work-spotlight .spotlight-row__icon svg {
  width: 100%;
  height: 100%;
  opacity: 1;
}

#work-spotlight .spotlight-row__dash {
  opacity: 0.8;
}

#work-spotlight .spotlight-row__meta {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-size: clamp(0.92rem, 1vw, 1.05rem);
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active row — premium glass highlight */
#work-spotlight .spotlight-row.is-active {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  /* backdrop-filter removed for performance stability */
  background: rgba(255, 255, 255, 0.15);
  /* Slightly more opaque fallback */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1rem 2rem rgba(0, 0, 0, 0.35);
  transform: translateY(-1px) scale(1);
}

#work-spotlight .spotlight-row.is-active .spotlight-row__meta {
  color: rgba(255, 255, 255, 0.80);
}

/* Accent tick at left edge for active */
#work-spotlight .spotlight-row.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 2px;
  border-radius: 2px;
  opacity: 0.3;
  /* 20–30% range */
  background: linear-gradient(180deg, #8a2be2, #4f46e5);
}

/* Modifier gradients */
#work-spotlight .spotlight-row.is-active.is-ocr::after {
  background: linear-gradient(180deg, #ec4899, #4f46e5);
}

#work-spotlight .spotlight-row.is-active.is-sjtu::after {
  background: linear-gradient(180deg, #06b6d4, #10b981);
}

#work-spotlight .spotlight-row.is-active.is-yuewen::after {
  background: linear-gradient(180deg, #8b5cf6, #4f46e5);
}

#work-spotlight .spotlight-row.is-active.is-tencent::after {
  background: linear-gradient(180deg, #f59e0b, #fb923c);
}

/* Remove accent tick in Work Spotlight */
#work-spotlight .spotlight-row.is-active::after {
  display: none !important;
}

/* Floating preview pop-up */
/* Floating preview pop-up - Optimized for Performance */
/* Note: JS moves this to <body>, so we target the class directly */
.spotlight-pop {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(320px, 28vw, 480px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  z-index: 200;
  pointer-events: none;
  /* Prevent blocking clicks while moving */
  cursor: pointer;
  opacity: 0;

  /* GPU Acceleration & Performance */
  /* No transition on transform to prevent scroll glitching */
  transition: opacity 200ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  /* Force GPU layer */
  visibility: hidden;
  /* Prevent GPU usage when not visible */
}

.spotlight-pop.is-visible {
  opacity: 1;
  pointer-events: auto;
  /* Enable clicks only when visible */
  visibility: visible;
}

.spotlight-pop__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;

  /* Scale animation isolated to child */
  transform: scale(0.95);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.spotlight-pop.is-visible .spotlight-pop__img {
  transform: scale(1);
}

/* Global fallback (when popup is moved to <body>) */
/* Global fallback removed - consolidated above */


/* Coarse pointers / small screens: hide the floating pop for simplicity */
/* Always enable popup; it scales down on small screens */

@media (max-width: 600px) {

  .section-title-pastworks__sub,
  .info-widget {
    display: none !important;
  }
}

/* --- Landscape Tablet Optimization --- */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  #work {
    min-height: 200vh;
    /* Reduced from 220vh for a better fit */
  }

  .contact-hero {
    height: auto;
    min-height: auto;
    padding: 8vh 6vw 10vh 6vw;
    /* Adjusted bottom padding for auto height */
  }
}

/* --- Medium Screen Optimization (2 columns instead of 3) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .work-content {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 1000px;
  }
}

/* --- iPad Portrait Layout (single column like mobile) --- */
@media (min-width: 769px) and (max-width: 1023px) and (orientation: portrait) {

  .playground-tagline {
    margin-top: -0rem !important;
  }
}

a.project-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
}

/* ─────────────────────────────────────────────
   Message Modal (Contact → Message CTA)
   - Frosted glass overlay + dialog
   - Reuses visual language from nav and contact CTAs
───────────────────────────────────────────── */
.message-modal {
  position: fixed;
  inset: 0;
  display: none;
  /* toggled to flex when visible */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  /* above preloader and hero */
}

.message-modal.is-visible {
  display: flex;
}

.message-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 150ms ease;
}

.message-modal.is-visible .message-modal__backdrop {
  opacity: 1;
}

.message-modal__dialog {
  position: relative;
  width: min(55vw, 960px);
  min-height: 46vh;
  /* slightly reduced to tighten bottom gap */
  max-height: 86vh;
  overflow: auto;
  padding: 1.5rem 2rem 0rem;
  /* tighter bottom padding */
  border-radius: 24px;
  color: #fff;
  font-family: "Ubuntu", sans-serif;
  /* Glass card look akin to nav links */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.15),
    0px 12px 40px rgba(0, 0, 0, 0.4);
}

.message-modal__title {
  font-family: "ClashGrotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin: 0 0 1rem 0;
}

.message-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.message-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.message-modal__close:active {
  transform: scale(0.98);
}

.message-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* tighter overall spacing */
  margin-top: 0.5rem;
}

/* Put a bit more room above the button relative to the textarea */
.message-modal__submit {
  margin-top: 0.9rem;
}

.message-modal__field label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.9);
}

.message-modal__field input,
.message-modal__field textarea {
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  font-family: "Ubuntu", sans-serif;
  font-size: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.9rem 1rem;
  outline: none;
  resize: vertical;
}

.message-modal__field input:focus,
.message-modal__field textarea:focus {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(111, 99, 233, 0.25);
}

/* Submit button: reuse contact CTA look */
.message-modal__submit {
  display: inline-block;
  align-self: flex-start;
  padding: 1rem 2rem;
  background-color: #6F63E9;
  border: 1px solid #6F63E9;
  border-radius: 20px;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.15),
    0px 4px 12px rgba(111, 99, 233, 0.3);
}

.message-modal__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(150px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.15) 40%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.message-modal__submit:hover {
  background-color: #8A7AEB;
  transform: translateY(-2px);
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.25),
    inset -1px -1px 2px rgba(0, 0, 0, 0.1),
    0px 8px 20px rgba(111, 99, 233, 0.4);
}

.message-modal__submit:hover::before {
  opacity: 1;
}

.message-modal__status {
  min-height: 0.55rem;
  /* slightly tighter beneath button */
  margin-top: 0.15rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Responsive adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  .message-modal__dialog {
    width: min(78vw, 820px);
    min-height: 52vh;
    /* slightly reduced */
    padding: 1.4rem 1.6rem 0.6rem;
    /* tighter bottom padding */
  }
}

@media (max-width: 767px) {
  .message-modal__dialog {
    width: 85vw;
    /* around 85% width on mobile */
    min-height: 56vh;
    /* slightly reduced */
    padding: 0.9rem 1rem 0.55rem;
    /* tighter bottom padding */
    border-radius: 18px;
  }

  .message-modal__submit {
    width: 100%;
    text-align: center;
  }

  /* Ensure CTAs don't overflow and are centered on small screens */
  .email_linkedin_button {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.9rem;
    /* tighter horizontal spacing */
    row-gap: 0.55rem;
    /* smaller vertical gap between wrapped rows */
    margin: 3rem 0 3.5rem 0;
    /* slightly reduced overall block margins */
  }

  .email_linkedin_button li a {
    max-width: 85vw;
    padding: 0.9rem 1.4rem;
    /* slightly smaller to prevent overflow */
    text-align: center;
    margin-top: 0.6rem;
    /* reduce vertical spacing from default 2rem */
  }

  #work-spotlight .spotlight-pop,
  .spotlight-pop {
    display: none !important;
  }
}

/* iPad Portrait: make Send button full-width inside modal */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .message-modal__submit {
    width: 100%;
    align-self: stretch;
    text-align: center;
  }

  /* Taller inputs on portrait iPad */
  .message-modal__field input {
    padding: 1.1rem 1rem;
    /* increase vertical padding */
    min-height: 56px;
  }

  .message-modal__field textarea {
    min-height: 220px;
    /* make message box longer */
    line-height: 1.5;
  }
}

/* Specific color override for the "Message" CTA button */
#message-open {
  background-color: #54a0eb;
  border-color: #54a0eb;
}

#message-open:hover {
  background-color: #54a0eb;
  /* lighter blue on hover */
}

/* Match modal Send button color to Message CTA */
.message-modal__submit {
  background-color: #54a0eb;
  border-color: #54a0eb;
}

.message-modal__submit:hover {
  background-color: #54a0eb;
}

/* Prevent floating spotlight preview from blocking hover/clicks elsewhere */
.spotlight-pop {
  pointer-events: none;
  opacity: 0;
  /* Hidden by default, JS will animate this to 1 */
  /* Do not use visibility: hidden; it conflicts with GSAP's animation */
  transition: opacity 0.2s ease;
}

/* JS will set opacity to 1 to show the pop-up */