/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Local Font Declarations */
@font-face {
  font-family: 'ONRAMP';
  src: url('../fonts/ONRAMP.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Color Palette Variables */
:root {
  /* Earthy Palette (default) */
  --rich-black: #04151f;
  --dark-slate-gray: #183a37;
  --wheat: #efd6ac;
  --mahogany: #c44900;
  --dark-purple: #432534;

  /* Semantic Color Mapping */
  --bg-main: var(--wheat);
  --text-primary: var(--rich-black);
  --text-secondary: var(--dark-purple);
  --text-muted: var(--dark-slate-gray);
  --accent-primary: var(--mahogany);
  --accent-secondary: var(--dark-slate-gray);
  --accent-tertiary: var(--dark-purple);
  --border-color: var(--dark-slate-gray);
  --footer-bg: var(--rich-black);
  --footer-text: var(--wheat);
}

/* Earthy Palette (explicit) */
html[data-palette="earthy"],
html[data-palette="earthy"] body {
  /* Semantic Color Mapping for Earthy - Explicit values */
  --bg-main: #efd6ac !important;  /* wheat */
  --text-primary: #04151f !important;  /* rich-black */
  --text-secondary: #432534 !important;  /* dark-purple */
  --text-muted: #183a37 !important;  /* dark-slate-gray */
  --accent-primary: #c44900 !important;  /* mahogany */
  --accent-secondary: #183a37 !important;  /* dark-slate-gray */
  --accent-tertiary: #432534 !important;  /* dark-purple */
  --border-color: #183a37 !important;  /* dark-slate-gray */
  --footer-bg: #04151f !important;  /* rich-black */
  --footer-text: #efd6ac !important;  /* wheat */
}

/* Vibrant Palette */
html[data-palette="vibrant"],
html[data-palette="vibrant"] body {
  --vibrant-magenta: #ce0064;
  --orange-peel: #fc9a00;
  --vibrant-magenta-2: #ce0067;
  --persian-pink: #e683b5;
  --vibrant-magenta-3: #cc0068;

  /* Semantic Color Mapping for Vibrant - Direct values for better cascade */
  --bg-main: #fef7f0 !important;  /* Light cream background */
  --text-primary: #cc0068 !important;
  --text-secondary: #ce0064 !important;
  --text-muted: #ce0067 !important;
  --accent-primary: #fc9a00 !important;
  --accent-secondary: #ce0064 !important;
  --accent-tertiary: #e683b5 !important;
  --border-color: #e683b5 !important;
  --footer-bg: #cc0068 !important;
  --footer-text: #fef7f0 !important;
}

/* Delft Palette */
html[data-palette="delft"],
html[data-palette="delft"] body {
  --delft-blue: #3a405a;
  --powder-blue: #aec5eb;
  --champagne-pink: #f9dec9;
  --melon: #e9afa3;
  --umber: #685044;

  /* Semantic Color Mapping for Delft */
  --bg-main: #f9dec9 !important;  /* Champagne pink background */
  --text-primary: #3a405a !important;
  --text-secondary: #685044 !important;
  --text-muted: #aec5eb !important;
  --accent-primary: #3a405a !important;
  --accent-secondary: #685044 !important;
  --accent-tertiary: #e9afa3 !important;
  --border-color: #aec5eb !important;
  --footer-bg: #3a405a !important;
  --footer-text: #f9dec9 !important;
}


/* Claude Palette */
html[data-palette="claude"],
html[data-palette="claude"] body {
  --claude-purple: #8b5cf6;
  --deep-purple: #5b21b6;
  --lavender: #f8fafc;
  --slate-gray: #64748b;
  --indigo: #4338ca;

  /* Semantic Color Mapping for Claude */
  --bg-main: #f8fafc !important;  /* Very light gray background */
  --text-primary: #1e1b4b !important;  /* Deep indigo */
  --text-secondary: #5b21b6 !important;  /* Deep purple */
  --text-muted: #64748b !important;  /* Slate gray */
  --accent-primary: #8b5cf6 !important;  /* Claude purple */
  --accent-secondary: #4338ca !important;  /* Indigo */
  --accent-tertiary: #a855f7 !important;  /* Light purple */
  --border-color: #c7d2fe !important;  /* Light indigo */
  --footer-bg: #1e1b4b !important;  /* Deep indigo */
  --footer-text: #f8fafc !important;  /* Light gray */
}

/* Gemini Palette */
html[data-palette="gemini"],
html[data-palette="gemini"] body {
  /* Color Palette Variables */
  --gemini-deep-space: #0C101F; /* A dark, cool blue for the background */
  --gemini-starlight: #F0F4F8;  /* A soft, off-white for high readability */
  --gemini-hyper-blue: #4285F4; /* A vibrant, familiar blue for primary actions */
  --gemini-nebula-purple: #9333ea; /* A rich purple for secondary emphasis */
  --gemini-aurora-magenta: #d81b60; /* A striking magenta for highlights */
  --gemini-cool-gray: #475569;   /* A neutral gray for borders and muted text */
  --gemini-light-steel: #94a3b8; /* A lighter gray for secondary text */

  /* Semantic Color Mapping for Gemini */
  --bg-main: var(--gemini-deep-space) !important;
  --text-primary: var(--gemini-starlight) !important;
  --text-secondary: var(--gemini-light-steel) !important;
  --text-muted: var(--gemini-cool-gray) !important;
  --accent-primary: var(--gemini-hyper-blue) !important;
  --accent-secondary: var(--gemini-nebula-purple) !important;
  --accent-tertiary: var(--gemini-aurora-magenta) !important;
  --border-color: var(--gemini-cool-gray) !important;
  --footer-bg: #000000 !important; /* Pure black for a solid, grounding footer */
  --footer-text: var(--gemini-starlight) !important;
}

/* Base Styles */
body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, .brand-text, .font-brand {
  font-family: 'ONRAMP', sans-serif;
  letter-spacing: 0.05em;
}

/* Utility Classes */
.container-custom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container-custom {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding: 0 2rem;
  }
}

.btn {
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--accent-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--accent-primary);
  filter: brightness(0.85);
}

.btn-secondary {
  background-color: var(--accent-secondary);
  color: white;
}

.btn-secondary:hover {
  background-color: var(--accent-secondary);
  filter: brightness(0.85);
}

/* RGB Channel Split Glitch Effect with Stability Periods */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch-base {
  position: relative !important;
  z-index: 5;
}

.glitch-red {
  color: var(--accent-primary);
  opacity: 0;
  z-index: 6;
  animation: glitch-anim-red 15s infinite;
  animation-delay: 1s;
}

.glitch-green {
  color: var(--accent-secondary);
  opacity: 0;
  z-index: 7;
  animation: glitch-anim-green 15s infinite;
  animation-delay: 1s;
}

.glitch-blue {
  color: var(--accent-tertiary);
  opacity: 0;
  z-index: 8;
  animation: glitch-anim-blue 15s infinite;
  animation-delay: 1s;
  font-style: italic;
}

.glitch-red-it {
  color: var(--text-muted);
  opacity: 0;
  z-index: 1;
  animation: glitch-anim-red-it 15s infinite;
  animation-delay: 1s;
  letter-spacing: 0.10em;
  font-style: italic;
}

/* Random delay variations - Header */
.glitch-delay-1 {
  animation-delay: 6.5s !important; /* Delays the second set of glitches */
}

.glitch-delay-2 {
  animation-delay: 11.3s !important; /* Delays the third set of glitches */
}

/* Random delay variations - Hero Section */
.glitch-delay-3 {
  animation-delay: 4.2s !important;
}

.glitch-delay-4 {
  animation-delay: 9.7s !important;
}

.glitch-delay-5 {
  animation-delay: 13.8s !important;
}

/* Hero section glitch colors (brighter for dark background) */
.hero-glitch-color.glitch-red {
  color: rgba(196, 73, 0, 0.9);  /* mahogany brighter */
}

.hero-glitch-color.glitch-green {
  color: rgba(239, 214, 172, 0.9);  /* wheat brighter */
}

.hero-glitch-color.glitch-blue {
  color: rgba(67, 37, 52, 0.9);  /* dark-purple brighter */
}

/* For all three animations:
   - Total animation cycle is 15 seconds
   - Active glitch period is 0.8 seconds (5.3% of the cycle)
   - Stable period is 14.2 seconds (94.7% of the cycle)
   - Glitch occurs during 0-5.3% of the cycle
   - At 5.3% it stabilizes until the cycle repeats
*/

@keyframes glitch-anim-red {
  /* Active glitch period: 0-5.3% (0.8s of 15s) */
  0%, 0.1%, 1%, 1.1%, 2%, 2.1%, 5.2%, 5.3%, 100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  0.5%, 1.5%, 4.5% {
    transform: translate(-2px, 1px);
    opacity: 0.9;
  }
  0.8%, 3.2%, 5% {
    transform: translate(2px, -1px);
    opacity: 0.6;
  }
  1.8%, 4% {
    transform: translate(-2px, 2px);
    opacity: 0.9;
  }
  /* Stable period: 5.3-100% (14.2s of 15s) */
  5.31%, 99.99% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes glitch-anim-green {
  /* Active glitch period: 0-5.3% (0.8s of 15s) */
  0%, 0.1%, 1.3%, 1.4%, 3.7%, 3.8%, 5.2%, 5.3%, 100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  0.6%, 2.8%, 5% {
    transform: translate(2px, 0);
    opacity: 0.8;
  }
  1%, 2%, 4.5% {
    transform: translate(-1px, 2px);
    opacity: 0.6;
  }
  1.9%, 4.2% {
    transform: translate(1px, -1px);
    opacity: 0.9;
  }
  /* Stable period: 5.3-100% (14.2s of 15s) */
  5.31%, 99.99% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes glitch-anim-blue {
  /* Active glitch period: 0-5.3% (0.8s of 15s) */
  0%, 0.1%, 0.8%, 0.9%, 3.1%, 3.2%, 5.2%, 5.3%, 100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  0.3%, 2.5%, 4.8% {
    transform: translate(0, 2px);
    opacity: 0.8;
  }
  0.7%, 3.5% {
    transform: translate(0, -2px);
    opacity: 0.6;
  }
  1.5%, 4.2% {
    transform: translate(2px, 1px);
    opacity: 0.9;
  }
  /* Stable period: 5.3-100% (14.2s of 15s) */
  5.31%, 99.99% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes glitch-anim-red-it {
  /* Active glitch period: 0-5.3% (0.8s of 15s) */
  0%, 0.1%, 0.8%, 0.9%, 3.1%, 3.2%, 5.2%, 5.3%, 100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  0.3%, 2.5%, 4.8% {
    transform: translate(0, 2px);
    opacity: 0.8;
  }
  0.7%, 3.5% {
    transform: translate(0, -2px);
    opacity: 0.6;
  }
  1.5%, 4.2% {
    transform: translate(2px, 1px);
    opacity: 0.9;
  }
  /* Stable period: 5.3-100% (14.2s of 15s) */
  5.31%, 99.99% {
    transform: translate(0, 0);
    opacity: 0;
  }
}


/* Smooth scrolling for anchors */
html {
  scroll-behavior: smooth;
}

/* Form Focus States */
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary), transparent 90%);
}



/* Hover effects */
.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Background gradient utilities */
.bg-gradient-to-r {
  background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Backdrop blur */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Placeholder Box */
.placeholder-box {
  border: 4px dashed var(--border-color);
  border-radius: 20px;
  padding: 4rem 2rem;
  margin: 2rem auto;
  background-color: transparent;
  transition: all 0.3s ease;
}

.placeholder-box:hover {
  border-color: var(--accent-primary);
  background-color: rgba(196, 73, 0, 0.03); /* Fallback for earthy */
}

/* Vibrant palette hover fallback */
html[data-palette="vibrant"] .placeholder-box:hover {
  background-color: rgba(252, 154, 0, 0.03);
}

/* Additional vibrant palette specific styles for testing */
html[data-palette="vibrant"] .glitch-base {
  color: #cc0068 !important;
}

html[data-palette="vibrant"] .glitch-red {
  color: #fc9a00 !important;
}

html[data-palette="vibrant"] .glitch-green {
  color: #ce0064 !important;
}

html[data-palette="vibrant"] .glitch-blue {
  color: #e683b5 !important;
}

html[data-palette="vibrant"] .glitch-red-it {
  color: #ce0067 !important;
}

/* Make background logo more visible on light Vibrant background */
html[data-palette="vibrant"] .absolute.inset-0.opacity-10 {
  opacity: 0.25 !important;
}

/* Vibrant palette header pizzazz */
html[data-palette="vibrant"] header {
  background-color: #fc9a00 !important;
  border-bottom: 3px solid #e67e00 !important;
}

html[data-palette="vibrant"] header .glitch .glitch-base,
html[data-palette="vibrant"] header span,
html[data-palette="vibrant"] header button {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  font-weight: 600;
}

html[data-palette="vibrant"] #palette-button {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(252, 154, 0, 0.3);
}

html[data-palette="vibrant"] #palette-menu {
  background-color: #cc0068 !important;
  border-color: #fc9a00 !important;
  box-shadow: 0 10px 25px rgba(252, 154, 0, 0.4);
}

html[data-palette="vibrant"] .palette-option {
  color: white !important;
}

html[data-palette="vibrant"] .palette-option:hover {
  background-color: rgba(252, 154, 0, 0.3) !important;
}

html[data-palette="vibrant"] #language-button {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(252, 154, 0, 0.3);
}

html[data-palette="vibrant"] #language-menu {
  background-color: #cc0068 !important;
  border-color: #fc9a00 !important;
  box-shadow: 0 10px 25px rgba(252, 154, 0, 0.4);
}

html[data-palette="vibrant"] .language-option {
  color: white !important;
}

html[data-palette="vibrant"] .language-option:hover {
  background-color: rgba(252, 154, 0, 0.3) !important;
}

/* Claude palette special effects */
html[data-palette="claude"] header {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%) !important;
  border-bottom: 2px solid #7c3aed !important;
}

html[data-palette="claude"] header .glitch .glitch-base,
html[data-palette="claude"] header span,
html[data-palette="claude"] header button {
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

html[data-palette="claude"] #palette-button {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px);
}

html[data-palette="claude"] #palette-menu {
  background-color: #1e1b4b !important;
  border-color: #7c3aed !important;
}

html[data-palette="claude"] .palette-option {
  color: white !important;
}

html[data-palette="claude"] .palette-option:hover {
  background-color: rgba(139, 92, 246, 0.2) !important;
}

html[data-palette="claude"] #language-button {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px);
}

html[data-palette="claude"] #language-menu {
  background-color: #1e1b4b !important;
  border-color: #7c3aed !important;
}

html[data-palette="claude"] .language-option {
  color: white !important;
}

html[data-palette="claude"] .language-option:hover {
  background-color: rgba(139, 92, 246, 0.2) !important;
}

html[data-palette="claude"] .glitch-base {
  color: #8b5cf6 !important;
}

html[data-palette="claude"] .glitch-red {
  color: #a855f7 !important;
}

html[data-palette="claude"] .glitch-green {
  color: #7c3aed !important;
}

html[data-palette="claude"] .glitch-blue {
  color: #c084fc !important;
}

html[data-palette="claude"] .glitch-red-it {
  color: #5b21b6 !important;
}

/* Make background logo more visible on light Claude background */
html[data-palette="claude"] .absolute.inset-0.opacity-10 {
  opacity: 0.2 !important;
}

/* Gemini Palette Specific Styles */
html[data-palette="gemini"] header {
  background: #4285F4 !important;
  border-bottom: 2px solid #2563eb !important;
}

html[data-palette="gemini"] header .glitch .glitch-base,
html[data-palette="gemini"] header span,
html[data-palette="gemini"] header button {
  color: var(--gemini-starlight) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

html[data-palette="gemini"] #palette-button {
  background-color: rgba(240, 244, 248, 0.15) !important;
  color: var(--gemini-starlight) !important;
  border-color: rgba(240, 244, 248, 0.3) !important;
  backdrop-filter: blur(10px);
}

html[data-palette="gemini"] #palette-menu {
  background-color: var(--gemini-deep-space) !important;
  border-color: var(--gemini-hyper-blue) !important;
}

html[data-palette="gemini"] .palette-option {
  color: var(--gemini-starlight) !important;
}

html[data-palette="gemini"] .palette-option:hover {
  background-color: rgba(66, 133, 244, 0.2) !important;
}

html[data-palette="gemini"] #language-button {
  background-color: rgba(240, 244, 248, 0.15) !important;
  color: var(--gemini-starlight) !important;
  border-color: rgba(240, 244, 248, 0.3) !important;
  backdrop-filter: blur(10px);
}

html[data-palette="gemini"] #language-menu {
  background-color: var(--gemini-deep-space) !important;
  border-color: var(--gemini-hyper-blue) !important;
}

html[data-palette="gemini"] .language-option {
  color: var(--gemini-starlight) !important;
}

html[data-palette="gemini"] .language-option:hover {
  background-color: rgba(66, 133, 244, 0.2) !important;
}

html[data-palette="gemini"] .glitch-base {
  color: var(--gemini-hyper-blue) !important;
}

html[data-palette="gemini"] .glitch-red {
  color: var(--gemini-aurora-magenta) !important;
}

html[data-palette="gemini"] .glitch-green {
  color: var(--gemini-nebula-purple) !important;
}

html[data-palette="gemini"] .glitch-blue {
  color: var(--gemini-hyper-blue) !important;
}

html[data-palette="gemini"] .glitch-red-it {
  color: var(--gemini-aurora-magenta) !important;
}


/* Palette transition helper */
html.palette-animating, html.palette-animating body {
  transition: background-color .4s ease, color .4s ease;
}

/* Provide gentle transition on common elements */
html.palette-animating body, html.palette-animating header, html.palette-animating footer, html.palette-animating .placeholder-box {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

/* Palette Dropdown Styles */
#palette-menu {
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-height: 200px;
  overflow-y: auto;
}

#palette-dropdown {
  position: relative;
  z-index: 50;
}

.palette-option:hover {
  background-color: color-mix(in srgb, var(--accent-primary), transparent 90%) !important;
}


/* Smooth transitions for palette elements */
#current-palette-color,
#current-palette-name,
#palette-menu {
  transition: all 0.2s ease;
}

/* Focus styles for accessibility */
#palette-button:focus,
.palette-option:focus,
.mobile-palette-option:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.palette-option:focus {
  background-color: color-mix(in srgb, var(--accent-primary), transparent 85%) !important;
}

/* Ensure dropdown stays in correct position */
#palette-menu {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

#language-menu {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

/* High z-index to ensure it appears above everything */
#palette-menu {
  z-index: 999999 !important;
  pointer-events: auto !important;
}

/* Ensure palette options are clickable */
.palette-option {
  z-index: 1000000 !important;
  pointer-events: auto !important;
  position: relative !important;
}

/* Elegant Palette Component Styles */
.palette-button {
  background-color: var(--bg-main);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.palette-color-indicator {
  background-color: var(--accent-primary);
}

/* Ensure palette and language buttons have matching heights on desktop */
@media (min-width: 641px) {
  #language-button, #palette-button {
    min-height: 2.5rem;
    align-items: center;
  }
}

.palette-menu {
  background-color: var(--bg-main);
  border-color: var(--border-color);
  z-index: 2147483647;
  position: fixed;
  transform: translateZ(0);
  will-change: transform;
}

.palette-option {
  color: var(--text-primary);
}

.palette-dot[data-color="#c44900"] {
  background-color: #c44900;
}

.palette-dot[data-color="#fc9a00"] {
  background-color: #fc9a00;
}

.palette-dot[data-color="#3a405a"] {
  background-color: #3a405a;
}

.palette-dot[data-color="#ca2e55"] {
  background-color: #ca2e55;
}

.palette-dot[data-color="#8b5cf6"] {
  background-color: #8b5cf6;
}

.mobile-theme-label {
  color: var(--text-muted);
}

.mobile-palette-option {
  background-color: var(--bg-main);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.mobile-palette-dot[data-color="#c44900"] {
  background-color: #c44900;
}

.mobile-palette-dot[data-color="#fc9a00"] {
  background-color: #fc9a00;
}

.mobile-palette-dot[data-color="#3a405a"] {
  background-color: #3a405a;
}

.mobile-palette-dot[data-color="#ca2e55"] {
  background-color: #ca2e55;
}

.mobile-palette-dot[data-color="#8b5cf6"] {
  background-color: #8b5cf6;
}

/* Language Switcher Styles */
.language-button {
  background-color: var(--bg-main);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.language-menu {
  background-color: var(--bg-main);
  border-color: var(--border-color);
  z-index: 2147483647;
  position: fixed;
  transform: translateZ(0);
  will-change: transform;
}

.language-option {
  color: var(--text-primary);
}

/* Cookie Consent Styling */
.cookie-banner {
  backdrop-filter: blur(10px);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toggle-switch {
  appearance: none;
  width: 3rem;
  height: 1.5rem;
  background-color: #d1d5db;
  border-radius: 0.75rem;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.toggle-switch:checked {
  background-color: #3b82f6;
}

.toggle-switch:before {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-switch:checked:before {
  transform: translateX(1.5rem);
}

/* Cookie banner theming */
html[data-palette="vibrant"] .cookie-banner .bg-white {
  background-color: var(--bg-main) !important;
  color: var(--text-primary);
}

html[data-palette="vibrant"] .cookie-banner .text-gray-900 {
  color: var(--text-primary) !important;
}

html[data-palette="vibrant"] .cookie-banner .text-gray-600 {
  color: var(--text-secondary) !important;
}

html[data-palette="claude"] .cookie-banner .bg-white {
  background-color: var(--bg-main) !important;
  color: var(--text-primary);
}

html[data-palette="claude"] .cookie-banner .text-gray-900 {
  color: var(--text-primary) !important;
}

html[data-palette="claude"] .cookie-banner .text-gray-600 {
  color: var(--text-secondary) !important;
}

/* Mobile Responsive Optimizations */
@media (max-width: 640px) {
  /* Fix horizontal overflow */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
  }

  * {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Compact header for mobile */
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Smaller dropdowns on mobile */
  #language-button, #palette-button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
  }

  #language-button span, #palette-button span {
    display: none !important;
  }

  #current-language-flag {
    display: inline-block !important;
    font-size: 1rem !important;
  }

  #current-palette-color {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Mobile dropdown positioning and sizing */
  #language-menu, #palette-menu {
    /* Ensure dropdowns stay within viewport */
    max-width: calc(100vw - 1.5rem) !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    min-width: 8rem !important;

    /* Better mobile positioning */
    position: fixed !important;
    top: 4rem !important;
    margin-right: 0.75rem !important;
    margin-top: 0.5rem !important;
  }

  /* Compact dropdown options on mobile */
  .language-option, .palette-option {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
  }

  /* Smaller option elements */
  .language-option span, .palette-option span {
    font-size: 0.875rem !important;
  }

  .palette-dot {
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin-right: 0.5rem !important;
  }

  /* Bigger logo and text on mobile header */
  .w-24.h-24 {
    width: 6rem !important;
    height: 6rem !important;
  }

  /* Header glitch text (bigger) */
  header .glitch {
    font-size: 1.875rem !important; /* text-3xl equivalent */
    letter-spacing: 0.05em !important;
  }

  /* Hero title prominence on mobile */
  main h1.font-brand {
    font-size: 3.5rem !important; /* Even bigger than text-6xl for mobile impact */
    line-height: 1.1 !important;
    letter-spacing: 0.025em !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  /* Adjust hero section for larger mobile title */
  section.py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Smaller background logo to prevent overflow */
  .w-72.h-72 {
    width: 12rem !important;
    height: 12rem !important;
  }

  /* Responsive placeholder box */
  .placeholder-box {
    padding: 1.5rem 1rem;
    margin: 1.5rem auto;
    border-radius: 12px;
    border-width: 3px;
  }

  .placeholder-box .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
  }


  /* Footer spacing on mobile */
  footer {
    padding: 1.5rem 1rem !important;
  }
}

@media (max-width: 768px) and (min-width: 641px) {
  .placeholder-box {
    padding: 2.5rem 1.5rem;
    border-radius: 15px;
  }

  .placeholder-box .text-2xl {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
}