/* ==========================================================================
   PORTFOLIO STYLESHEET - CLEAN, EDITABLE, MODULAR CSS
   Precision Engineered Platforms | Minimalist Editorial Dark Design
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GOOGLE FONTS & DESIGN TOKENS
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Color Palette */
  --bg-primary: #121110;
  --bg-secondary: #0F0E0D;
  --bg-elevated: #1a1918;
  --bg-card: #131211;
  --bg-card-hover: #171615;
  --accent: #B39B7D;
  --accent-light: #CBB9A1;
  --accent-glow: rgba(179, 155, 125, 0.25);
  --text-primary: #E8E6E1;
  --text-muted: rgba(232, 230, 225, 0.6);
  --text-faint: rgba(232, 230, 225, 0.3);
  --border-subtle: rgba(232, 230, 225, 0.08);
  --border-medium: rgba(232, 230, 225, 0.18);
  --border-accent: rgba(179, 155, 125, 0.4);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Transitions */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.25s var(--ease-editorial);
  --transition-normal: 0.5s var(--ease-editorial);
  --transition-slow: 0.9s var(--ease-editorial);

  /* Static macOS Golden Cursors (100% Reliable Hardware SVGs for non-home pages) */
  --cursor-mac-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='150%25' height='150%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.2' flood-color='%23000000' flood-opacity='0.85'/%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='1.5' flood-color='%23B39B7D' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4.5 2.5 C4.2 2.5 4 2.7 4 3 L4 21.5 C4 21.9 4.5 22.1 4.8 21.8 L9.5 17.2 L14.8 25.2 C15 25.5 15.4 25.6 15.7 25.4 L18.8 23.8 C19.1 23.6 19.2 23.2 19 22.9 L13.6 15 L19.8 15 C20.2 15 20.4 14.5 20.1 14.2 L4.8 2.6 C4.7 2.5 4.6 2.5 4.5 2.5 Z' fill='%23141312' stroke='%23B39B7D' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round' filter='url(%23s)'/%3E%3C/svg%3E") 4 2, auto;

  --cursor-mac-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cdefs%3E%3Cfilter id='s2' x='-20%25' y='-20%25' width='150%25' height='150%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.2' flood-color='%23000000' flood-opacity='0.85'/%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='1.5' flood-color='%23B39B7D' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M9.5 2.5 C8.6 2.5 8 3.1 8 4 V13.5 L6.8 12.3 C5.8 11.3 4.2 11.3 3.2 12.3 C2.2 13.3 2.2 14.9 3.2 15.9 L9.5 22.2 C10.8 23.5 12.5 24.2 14.3 24.2 H18.5 C21.5 24.2 24 21.7 24 18.7 V13 C24 12.2 23.3 11.5 22.5 11.5 C22.2 11.5 21.9 11.6 21.6 11.8 C21.3 11 20.5 10.5 19.6 10.5 C19.3 10.5 19 10.6 18.8 10.8 C18.4 10 17.6 9.5 16.7 9.5 C16.5 9.5 16.3 9.5 16.1 9.6 V4 C16.1 3.1 15.5 2.5 14.6 2.5 C14.1 2.5 13.6 2.7 13.3 3.1 C13 2.7 12.5 2.5 12 2.5 H9.5 Z' fill='%23141312' stroke='%23B39B7D' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round' filter='url(%23s2)'/%3E%3C/svg%3E") 9 2, pointer;

  --cursor-mac-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 4H16M12 4V20M8 20H16' stroke='%23B39B7D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, text;

  --cursor-mac-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M10 5a1.5 1.5 0 0 0-3 0v6.5a1 1 0 0 1-2 0V8a1.5 1.5 0 0 0-3 0v7a8 8 0 0 0 8 8h3a8 8 0 0 0 8-8v-5.5a1.5 1.5 0 0 0-3 0V11a1 1 0 0 1-2 0V6a1.5 1.5 0 0 0-3 0v5a1 1 0 0 1-2 0V5z' fill='%23141312' stroke='%23B39B7D' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, grab;

  --cursor-mac-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23B39B7D' stroke-width='1.8' fill='%23141312'/%3E%3Cline x1='5.6' y1='5.6' x2='18.4' y2='18.4' stroke='%23B39B7D' stroke-width='1.8'/%3E%3C/svg%3E") 12 12, not-allowed;
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESETS & BASE STYLING
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

::selection {
  background-color: var(--accent);
  color: var(--bg-primary);
}

/* Custom Scrollbar - Ultra Slim & Compact */
*, html, body {
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 230, 225, 0.18) transparent;
}

::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
  width: 3.5px;
  height: 3.5px;
}

::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(232, 230, 225, 0.18);
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY & TEXT EFFECTS
   -------------------------------------------------------------------------- */
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* Editorial Text Outline / Stroke */
.text-stroke {
  -webkit-text-stroke: 1.5px var(--text-primary);
  color: transparent;
}

@media (min-width: 768px) {
  .text-stroke {
    -webkit-text-stroke: 2px var(--text-primary);
  }
}

.text-stroke-accent {
  -webkit-text-stroke: 1.5px var(--accent);
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. NOISE & TEXTURE OVERLAYS
   -------------------------------------------------------------------------- */
.luxury-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
  z-index: 99;
  mix-blend-mode: screen;
}

/* --------------------------------------------------------------------------
   5. HERO BACKGROUND ATMOSPHERE & MARQUEE
   -------------------------------------------------------------------------- */
#hero-section {
  position: relative;
  background-color: #121110;
  /* Multi-layered luxury atmosphere: subtle architectural blueprint grid + ambient bronze radial spotlight */
  background-image: 
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(179, 155, 125, 0.085) 0%, rgba(18, 17, 16, 0.7) 65%, #121110 100%),
    linear-gradient(to right, rgba(232, 230, 225, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232, 230, 225, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 72px 72px, 72px 72px;
}

/* Vignette mask around hero */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 40%, #121110 95%);
  z-index: 2;
}

/* Background diagonal hero marquee - balanced clean spacing without overlap */
.hero-bg-marquee {
  position: absolute;
  inset: -15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  opacity: 0.06;
  transform: rotate(-5deg) scale(1.35);
  z-index: 1;
  user-select: none;
  gap: 0.75rem;
}

.hero-bg-marquee .animate-marquee,
.hero-bg-marquee .animate-marquee-reverse {
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   6. MARQUEE ANIMATIONS (INFINITE TICKERS)
   -------------------------------------------------------------------------- */
@keyframes marqueeLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marqueeLeft 28s linear infinite;
  will-change: transform;
}

.animate-marquee-reverse {
  display: flex;
  width: max-content;
  animation: marqueeRight 32s linear infinite;
  will-change: transform;
}

.animate-marquee:hover,
.animate-marquee-reverse:hover {
  animation-play-state: paused;
}

/* Edge gradient mask for capabilities and banners */
.ticker-mask-fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* --------------------------------------------------------------------------
   7. CUSTOM CURSORS (HOME MAGNETIC CURSOR VS. NON-HOME MACOS GOLDEN CURSORS)
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 768px) {
  .cursor-container,
  #custom-cursor-ring,
  .cursor-ring {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ── A. HOME PAGE: MAGNETIC BADGE CURSOR ── */
@media (pointer: fine) and (min-width: 769px) {
  body.page-home,
  body:has(#custom-cursor-ring) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='2.5' fill='%23B39B7D'/%3E%3C/svg%3E") 4 4, auto !important;
  }
  body.page-home a,
  body.page-home button,
  body.page-home [role="button"],
  body.page-home [data-magnetic],
  body.page-home summary,
  body.page-home select,
  body:has(#custom-cursor-ring) a,
  body:has(#custom-cursor-ring) button,
  body:has(#custom-cursor-ring) [role="button"],
  body:has(#custom-cursor-ring) [data-magnetic],
  body:has(#custom-cursor-ring) summary,
  body:has(#custom-cursor-ring) select {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='2.5' fill='%23B39B7D'/%3E%3C/svg%3E") 4 4, auto !important;
  }
  body.page-home input,
  body.page-home textarea,
  body.page-home [contenteditable="true"],
  body:has(#custom-cursor-ring) input,
  body:has(#custom-cursor-ring) textarea,
  body:has(#custom-cursor-ring) [contenteditable="true"] {
    cursor: text !important;
  }
}

/* ── B. OTHER PAGES (DASHBOARD, 404, ETC.): STATIC MACOS GOLDEN CURSORS ── */
/* 100% reliable hardware SVG cursors with zero lag and maximum browser compatibility */
@media (pointer: fine) and (min-width: 769px) {
  /* Default macOS Rounded Arrow */
  body:not(.page-home):not(:has(#custom-cursor-ring)),
  body.page-app,
  body.page-dash,
  .theme-mac-cursor {
    cursor: var(--cursor-mac-default) !important;
  }

  body:not(.page-home):not(:has(#custom-cursor-ring)) *,
  body.page-app *,
  body.page-dash * {
    cursor: inherit;
  }

  /* macOS Rounded Pointer Hand on interactive elements */
  body:not(.page-home):not(:has(#custom-cursor-ring)) a,
  body:not(.page-home):not(:has(#custom-cursor-ring)) button,
  body:not(.page-home):not(:has(#custom-cursor-ring)) [role="button"],
  body:not(.page-home):not(:has(#custom-cursor-ring)) summary,
  body:not(.page-home):not(:has(#custom-cursor-ring)) select,
  body:not(.page-home):not(:has(#custom-cursor-ring)) label[for],
  body:not(.page-home):not(:has(#custom-cursor-ring)) .cursor-pointer,
  body.page-app a,
  body.page-app button,
  body.page-app [role="button"],
  body.page-app summary,
  body.page-app select,
  body.page-app label[for],
  body.page-app .cursor-pointer,
  body.page-dash a,
  body.page-dash button,
  body.page-dash [role="button"],
  body.page-dash summary,
  body.page-dash select,
  body.page-dash label[for],
  body.page-dash .cursor-pointer {
    cursor: var(--cursor-mac-pointer) !important;
  }

  /* macOS Precision I-Beam for text input */
  body:not(.page-home):not(:has(#custom-cursor-ring)) input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body:not(.page-home):not(:has(#custom-cursor-ring)) textarea,
  body:not(.page-home):not(:has(#custom-cursor-ring)) [contenteditable="true"],
  body.page-app input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body.page-app textarea,
  body.page-app [contenteditable="true"],
  body.page-dash input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body.page-dash textarea,
  body.page-dash [contenteditable="true"] {
    cursor: var(--cursor-mac-text) !important;
  }

  /* macOS Disabled State */
  body:not(.page-home):not(:has(#custom-cursor-ring)) [disabled],
  body:not(.page-home):not(:has(#custom-cursor-ring)) .cursor-not-allowed,
  body.page-app [disabled],
  body.page-app .cursor-not-allowed,
  body.page-dash [disabled],
  body.page-dash .cursor-not-allowed {
    cursor: var(--cursor-mac-disabled) !important;
  }

  /* macOS Grab / Draggable */
  body:not(.page-home):not(:has(#custom-cursor-ring)) [data-draggable="true"],
  body:not(.page-home):not(:has(#custom-cursor-ring)) .cursor-grab,
  body.page-app [data-draggable="true"],
  body.page-app .cursor-grab,
  body.page-dash [data-draggable="true"],
  body.page-dash .cursor-grab {
    cursor: var(--cursor-mac-grab) !important;
  }
}

.cursor-container {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: hidden;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483647;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  will-change: transform, width, height, background-color, border-color, opacity;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              opacity 0.2s ease,
              border-radius 0.3s ease,
              backdrop-filter 0.3s ease;
  width: 32px;
  height: 32px;
  background-color: rgba(179, 155, 125, 0.02);
  border: 1px solid rgba(179, 155, 125, 0.45);
  box-shadow: 0 0 20px rgba(179, 155, 125, 0.08);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  display: none !important;
}

/* Cursor Modes */
.cursor-ring.cursor-pointer-mode {
  width: 54px;
  height: 54px;
  background-color: rgba(179, 155, 125, 0.12);
  border-color: rgba(179, 155, 125, 0.85);
  border-width: 1.5px;
  backdrop-filter: blur(2px);
}

.cursor-ring.cursor-text-mode {
  width: 4px;
  height: 24px;
  background-color: var(--accent);
  border-color: transparent;
  border-radius: 2px;
}

.cursor-ring.cursor-view-mode {
  width: 82px;
  height: 82px;
  background-color: rgba(18, 17, 16, 0.9);
  border-color: rgba(179, 155, 125, 0.85);
  border-width: 1.5px;
  backdrop-filter: blur(6px);
}

.cursor-badge-text {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. SMART STICKY HEADER (SHOW ON SCROLL UP, HIDE ON SCROLL DOWN)
   -------------------------------------------------------------------------- */
#main-header {
  transform: translate(-50%, 0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  will-change: transform, opacity;
}

#main-header.header-hidden {
  transform: translate(-50%, -150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   8B. MOBILE NAVIGATION DROPDOWN (OPENS DIRECTLY BELOW HEADER CAPSULE)
   -------------------------------------------------------------------------- */
#mobile-menu-dropdown {
  max-height: 0px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, border-color 0.3s ease;
  will-change: max-height, opacity;
}

#mobile-menu-dropdown.dropdown-open {
  pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
   9. CARD HOVER & TRAVELING LIGHT BORDER
   -------------------------------------------------------------------------- */
.traveling-border-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.traveling-border-card .border-line-top {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.traveling-border-card .border-line-bottom {
  position: absolute;
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(270deg, transparent, var(--accent), transparent);
  transition: right 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.traveling-border-card:hover .border-line-top {
  left: 100%;
}

.traveling-border-card:hover .border-line-bottom {
  right: 100%;
}

/* --------------------------------------------------------------------------
   10. HERO & FOOTER TYPOGRAPHY ANIMATION HOOKS
   -------------------------------------------------------------------------- */
.hero-char {
  display: inline-block;
  will-change: transform, opacity;
}

.footer-char {
  display: inline-block;
  will-change: transform, opacity;
  transition: color 0.3s ease;
}

/* Scroll indicator animation */
@keyframes scrollBarGlide {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

.scroll-bar-indicator {
  animation: scrollBarGlide 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   11. SPLIT-CURTAIN LUXURY PAGE LOADER
   -------------------------------------------------------------------------- */
#page-loader-curtain {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  overflow: hidden;
}

#loader-panel-top,
#loader-panel-bottom {
  flex: 1;
  background-color: #161514;
  will-change: transform;
}

.page-content-wrapper {
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden; /* Curtain covers it anyway; hidden prevents flash if GSAP clears opacity early */
  will-change: opacity, transform;
}

/* Animated Character Typography */
.loader-animated-text {
  letter-spacing: 0.14em;
  filter: drop-shadow(0 0 16px rgba(179, 155, 125, 0.3));
}
.loader-char {
  display: inline-block;
  will-change: transform, opacity, filter;
  animation: loaderCharWave 1.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--char-idx, 0) * 0.08s);
}
.loader-dot {
  display: inline-block;
  opacity: 0.25;
  animation: loaderDotBlink 1.4s ease-in-out infinite;
  animation-delay: calc(var(--dot-idx, 0) * 0.2s);
}

@keyframes loaderCharWave {
  0% {
    opacity: 0.65;
    transform: translateY(0px) scale(0.98);
    color: #B39B7D;
    filter: drop-shadow(0 0 0px rgba(179, 155, 125, 0));
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) scale(1.05);
    color: #F0EDE6;
    filter: drop-shadow(0 0 12px rgba(179, 155, 125, 0.75));
  }
  100% {
    opacity: 0.65;
    transform: translateY(0px) scale(0.98);
    color: #B39B7D;
    filter: drop-shadow(0 0 0px rgba(179, 155, 125, 0));
  }
}

@keyframes loaderDotBlink {
  0%, 20% {
    opacity: 0.2;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
    color: #F0EDE6;
    text-shadow: 0 0 8px rgba(179, 155, 125, 0.8);
  }
  80%, 100% {
    opacity: 0.2;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   12. HORIZONTAL PORTFOLIO SCROLL TRACK
   -------------------------------------------------------------------------- */
#portfolio-scroll-track {
  will-change: transform;
  display: flex;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.portfolio-item-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}