/* =========================================================
   AICEBERG MIND - DESIGN TOKENS SYSTEM
   Centralized token system for consistency and performance
   ========================================================= */

:root {
  /* ================================
     BRAND COLORS - Visual identity
     ================================ */
  --brand-cyan: #00D4FF;
  --brand-mint: #5EE4C3;

  /* ================================
     BASE COLORS - Foundation palette
     ================================ */
  --bg-primary: #0a0a0a;
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-tertiary: rgba(255, 255, 255, 0.6);
  --accent-subtle: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.08);

  /* ================================
     TYPOGRAPHY SYSTEM - Font stack and sizes
     ================================ */
  --font-display: 'Inter', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif; system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'IBM Plex Sans', sans-serif;
  --font-serif: 'Crimson Text', Georgia, serif;

  /* Font Sizes - Scalable system */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-light: 200;
  --font-weight-normal: 300;
  --font-weight-medium: 400;
  --font-weight-semibold: 600;

  /* ================================
     CONTENT SECTION TYPOGRAPHY TOKENS
     ================================ */
  /* Section numbers */
  --section-number-size: 2rem;
  --section-number-color: var(--text-tertiary);
  --section-number-opacity: 0.4;
  --section-number-margin: 1rem;

  /* Editorial headings - Aligned with hero title styling */
  --editorial-heading-size: clamp(2.5rem, 8vw, 6rem);
  --editorial-heading-weight: 100;
  --editorial-heading-line-height: 0.85;
  --editorial-heading-letter-spacing: -0.05em;
  --editorial-heading-margin: 1rem;

  /* Content block titles */
  --content-title-size: clamp(1.5rem, 3vw, 2.2rem);
  --content-title-weight: 100;
  --content-title-line-height: 1.3;

  /* Content block meta */
  --content-meta-size: 0.875rem;
  --content-meta-weight: 300;
  --content-meta-letter-spacing: 0.05em;

  /* Editorial body text */
  --editorial-body-size: clamp(1.125rem, 2.2vw, 1.2rem);
  --editorial-body-line-height: 1.75;
  --editorial-body-margin: 1.8rem;

  /* ================================
     INTERACTIVE COMPONENTS TOKENS
     ================================ */
  /* Collapsible/Details elements */
  --details-border-radius: 12px;
  --details-background: rgba(255, 255, 255, 0.02);
  --details-background-hover: rgba(255, 255, 255, 0.04);
  --details-background-open: rgba(255, 255, 255, 0.05);
  --details-border: 1px solid rgba(255, 255, 255, 0.1);
  --details-border-open: rgba(255, 255, 255, 0.2);
  --details-padding: 1.5rem 2rem;

  /* Text collapse animation */
  --collapse-max-height: 2000px;
  --collapse-duration-out: 0.5s;
  --collapse-duration-in: 0.7s;

  /* ================================
     SPACING SYSTEM - Consistent spacing
     ================================ */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2.5rem;    /* 40px */
  --space-xl: 4rem;      /* 64px */
  --space-xxl: 6rem;     /* 96px */

  /* ================================
     ANIMATION SYSTEM - Timing and duration
     ================================ */
  /* Base Timing */
  --timing-fast: 0.15s;
  --timing-base: 0.3s;
  --timing-slow: 0.6s;

  /* Easing Functions */
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Iceberg Animation Tokens */
  --iceberg-duration-float: 8s;
  --iceberg-duration-drift: 18s;
  --iceberg-duration-drift-alt: 22s;
  --iceberg-easing: ease-in-out;
  --iceberg-opacity-base: 0.8;
  --iceberg-opacity-shape: 0.15;
  --iceberg-blur-canvas: 0.5px;
  --iceberg-blur-shape: 1px;

  /* Geometric Animation Tokens */
  --geo-duration-fast: 14s;
  --geo-duration-medium: 19s;
  --geo-duration-slow: 24s;
  --geo-opacity-subtle: 0.08;
  --geo-opacity-medium: 0.12;
  --geo-blur-light: 1.5px;
  --geo-blur-medium: 2px;
  --geo-blur-heavy: 3px;

  /* Logo Animation Tokens */
  --logo-duration-appear: 1s;
  --logo-duration-cinematic: 8s;
  --logo-duration-zoom: 4s;
  --logo-delay-appear: 0.3s;
  --logo-delay-zoom: 0.5s;

  /* ================================
     GRADIENTS - Gradient system
     ================================ */
  --gradient-brand: linear-gradient(135deg, var(--brand-mint), var(--brand-cyan));
  --gradient-soft: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(94,228,195,0.03) 50%, rgba(0,212,255,0.05) 100%);
  --gradient-glow: linear-gradient(90deg, transparent, rgba(94, 228, 195, 0.1), transparent);
  --gradient-horizon: linear-gradient(90deg, transparent, var(--brand-cyan), transparent);
  --gradient-underline: linear-gradient(90deg, var(--brand-cyan), var(--brand-mint));

  /* ================================
     SEMANTIC HIGHLIGHTING SYSTEM
     Brand-aware word emphasis tokens
     ================================ */
  /* Brand essence highlighting - per "nature", "essence", concetti chiave */
  --accent-essence-color: var(--brand-cyan);
  --accent-essence-glow: 0 0 10px rgba(0, 212, 255, 0.3);
  --accent-essence-glow-hover: 0 0 20px rgba(0, 212, 255, 0.6), 0 0 30px rgba(0, 212, 255, 0.4);
  --accent-essence-weight: 600;
  
  /* Concept highlighting - per "feature", "limitation", concetti da superare */
  --accent-concept-underline: 2px solid var(--brand-cyan);
  --accent-concept-underline-hover: 3px solid var(--brand-mint);
  --accent-concept-weight: 500;
  
  /* Brand Philosophy tokens */
  --philosophy-color: var(--brand-mint);
  --philosophy-glow: 0 0 8px rgba(94, 228, 195, 0.4);
  --philosophy-weight: 500;

  /* Iceberg Gradients */
  --gradient-iceberg-1: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(94, 228, 195, 0.2) 50%, transparent 100%);
  --gradient-iceberg-2: linear-gradient(45deg, rgba(94, 228, 195, 0.25) 0%, rgba(0, 212, 255, 0.15) 60%, transparent 100%);
  --gradient-iceberg-3: linear-gradient(225deg, rgba(0, 212, 255, 0.2) 0%, rgba(94, 228, 195, 0.3) 40%, transparent 100%);

  /* ================================
     Z-INDEX SYSTEM - Consistent layering
     ================================ */
  --z-background: -1;
  --z-base: 0;
  --z-canvas: 1;
  --z-content: 10;
  --z-overlay: 50;
  --z-modal: 100;
  --z-tooltip: 1000;

  /* ================================
     RESPONSIVE BREAKPOINTS
     ================================ */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* ================================
     BLOG SPECIFIC TOKENS
     ================================ */
  --blog-header-spacing: 8rem;
  --blog-section-spacing: 6rem;
  --blog-card-spacing: 2rem;
  --blog-title-spacing: 4rem;
  --blog-filters-spacing: 5rem;

  /* ================================
     PERFORMANCE TOKENS
     ================================ */
  --transform-gpu: translateZ(0);
  --will-change-animation: transform, opacity;
}

/* ================================
   RESPONSIVE TOKEN OVERRIDES
   ================================ */
@media (max-width: 768px) {
  :root {
    /* Mobile Spacing Adjustments */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;

    /* Mobile Blog Spacing */
    --blog-header-spacing: 4rem;
    --blog-section-spacing: 3rem;
    --blog-card-spacing: 1rem;
    --blog-title-spacing: 2rem;
    --blog-filters-spacing: 2.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    /* Mobile Small Adjustments */
    --space-xs: 0.125rem;
    --space-sm: 0.25rem;
    --space-md: 0.5rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-xxl: 2rem;
  }
}

/* ================================
   GLOBAL ANIMATION SYSTEM
   ================================ */

/* Parallax Text - Global unified system */
.parallax-text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.parallax-text.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Drop Cap - Global unified system with GSAP */
.drop-cap,
.editorial-body .drop-cap,
.content-block .drop-cap,
p .drop-cap {
  float: left;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3rem);
  font-weight: 100;
  line-height: 1;
  color: var(--brand-cyan);
  background: var(--gradient-main);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0.1em 0 0;
  /* GSAP will handle initial state */
  will-change: transform, opacity;
}

/* Drop cap ::first-letter alternative for backward compatibility */
.drop-cap::first-letter {
  font-size: 2.5em;
  font-weight: 100;
  line-height: 0.8;
  float: left;
  margin: 0.1em 0.1em 0 0;
  background: var(--gradient-main);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pullquote - Global unified system with serif font */
.pullquote {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 4rem auto;
  padding: 3rem 4rem 3rem 3rem;
  text-align: center !important;
  position: relative;
  max-width: 65ch;
  
  /* Elegant borders with gradient effect */
  border-image: linear-gradient(90deg, 
    transparent 0%, 
    var(--brand-cyan) 25%, 
    var(--brand-mint) 50%, 
    var(--brand-cyan) 75%, 
    transparent 100%) 1;
  border-top: 2px solid;
  border-bottom: 2px solid;
  
  /* Subtle text shadow for depth */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  
  /* Letter spacing for elegance */
  letter-spacing: 0.02em;
  
  /* Smooth animations */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.pullquote:hover {
  transform: translateY(-2px);
  text-shadow: 0 2px 8px rgba(0, 212, 255, 0.15);
  letter-spacing: 0.03em;
}

.pullquote::before {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-weight: 400;
  font-style: italic;
  content: '"';
  position: absolute;
  top: 0;
  left: -2rem;
  transform: translateY(-0.2em);
  font-size: clamp(6rem, 12vw, 10rem);
  background: var(--gradient-main);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  line-height: 1;
  z-index: 0;
  
  /* Editorial style shadow */
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
  
  /* Smooth animation */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pullquote:hover::before {
  opacity: 0.7;
  transform: translateY(-0.2em) translateX(-0.2rem);
  filter: drop-shadow(3px 3px 8px rgba(0, 212, 255, 0.2));
}

/* Remove the closing quote */
.pullquote::after {
  display: none;
}

/* Pullquote responsive adjustments */
@media (max-width: 768px) {
  .pullquote {
    margin: 2rem auto;
    padding: 2rem 3rem 2rem 2rem;
    text-align: center;
  }
  
  .pullquote::before {
    left: -1.5rem;
    font-size: clamp(4rem, 15vw, 6rem);
  }
}

@media (max-width: 480px) {
  .pullquote {
    padding: 1.5rem 2rem 1.5rem 1.5rem !important;
    text-align: center !important;
  }
  
  .pullquote::before {
    left: -1rem;
    font-size: 4rem;
  }
}

/* Parallax Image system */
.parallax-image {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.parallax-image.in-view {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ================================
   SEMANTIC HIGHLIGHTING UTILITY CLASSES
   Global brand-aware word emphasis system
   ================================ */

/* Brand essence words - "nature", "depth", "essence" */
.essence-word {
  color: var(--accent-essence-color) !important;
  font-weight: var(--accent-essence-weight);
  text-shadow: var(--accent-essence-glow);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.essence-word:hover {
  text-shadow: var(--accent-essence-glow-hover);
  transform: translateY(-1px);
}

/* Animated glow effect for essence words */
.essence-glow {
  animation: essenceGlow 3s ease-in-out infinite alternate;
}

@keyframes essenceGlow {
  0% { 
    text-shadow: var(--accent-essence-glow);
  }
  100% { 
    text-shadow: var(--accent-essence-glow-hover);
  }
}

/* Concept words to overcome - "feature", "limitation", "surface" */
.concept-word {
  font-weight: var(--accent-concept-weight);
  border-bottom: var(--accent-concept-underline);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding-bottom: 2px;
}

.concept-word:hover {
  border-bottom: var(--accent-concept-underline-hover);
  transform: translateY(-1px);
}

/* Philosophy words - brand principles */
.philosophy-word {
  color: var(--philosophy-color) !important;
  font-weight: var(--philosophy-weight);
  text-shadow: var(--philosophy-glow);
  font-style: italic;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.philosophy-word:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Combined effect classes */
.brand-highlight {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  transition: all 0.3s ease;
}

.brand-highlight:hover {
  filter: brightness(1.3);
  transform: scale(1.02);
}

/* Global Highlight Effects - Hero Style System */
.highlight-word {
  position: relative;
  font-weight: 600;
  /* Reset gradient background da strong globale */
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  /* Forza colore bianco */
  color: var(--text-primary) !important;
}

.highlight-word::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-mint));
  animation: underlineGrow 0.6s ease-out forwards;
  animation-delay: 0.3s; /* Delay più breve per About */
}

.accent-word {
  color: var(--brand-cyan) !important;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

@keyframes underlineGrow {
  0% { width: 0; }
  100% { width: 100%; }
}

/* Underline grow animation for concepts (legacy) */
.underline-grow {
  position: relative;
  overflow: hidden;
}

.underline-grow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-underline);
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.underline-grow:hover::after {
  width: 100%;
}

/* ================================
   ACCESSIBILITY TOKENS
   ================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* Disable animations for accessibility */
    --timing-fast: 0s;
    --timing-base: 0s;
    --timing-slow: 0s;
    --iceberg-duration-float: 0s;
    --logo-duration-cinematic: 0s;
  }
  
  /* Disable semantic highlighting animations */
  .essence-glow,
  .essence-word,
  .concept-word,
  .philosophy-word,
  .brand-highlight,
  .underline-grow::after,
  .parallax-text,
  .parallax-image,
  .pullquote {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* High contrast support for pullquotes */
@media (prefers-contrast: high) {
  .pullquote {
    border-color: rgba(255, 255, 255, 0.5);
  }
}

/* ================================
   TEXT FRAME GLOBAL SYSTEM
   ================================ */

/* Text frame base styling for border-compose elements */
.text-frame {
  position: relative;
  padding: 2.5rem 3rem;
  margin: 3rem auto;
  max-width: 70ch;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(10px);
}

/* Content inside text frames */
.text-frame .editorial-body {
  margin-bottom: 0;
  line-height: 1.7;
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  color: var(--text-primary);
}

.text-frame .content-block-title {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

/* Manifesto content special styling */
.manifesto-content {
  padding: 0;
  text-align: center;
}

.manifesto-content h3 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--text-primary);
  margin: 1rem 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text frame hover enhancements */
.text-frame.hover-border-compose:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

/* Responsive text frames */
@media (max-width: 768px) {
  .text-frame {
    padding: 2rem;
    margin: 2rem auto;
  }
  
  .text-frame .editorial-body {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
  }
}

@media (max-width: 480px) {
  .text-frame {
    padding: 1.5rem;
    margin: 1.5rem auto;
  }
}

/* ================================
   STICKY SECTION TITLES SYSTEM
   Desktop only - Lateral navigation companion
   ================================ */


.section-title-sticky {
  display: none !important;
}

@media (min-width: 1025px) {
  /* Section wrapper for sticky behavior */
  .parallax-section {
    position: relative;
  }
  
  /* Sticky section title - */
  .section-title-sticky {
    display: block !important; /* Override mobile hiding */
    position: fixed;
    top: 50vh;
    left: 2rem;
    width: 180px;
    height: 0;
    z-index: 100;
    pointer-events: none;
    transform: translateY(-50%);
    

  }
  
  .section-title-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 200;
    color: var(--brand-cyan);
    opacity: 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--gradient-main);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(-40px);
  }
  

  .section-title-sticky svg,
  .section-title-text svg,
  .section-title-sticky .section-icon,
  .section-title-text .section-icon,
  .section-title-sticky *[viewBox],
  .section-title-text *[viewBox],
  .editorial-heading .section-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  .section-title-text {
    font-family: var(--font-display) !important;
  }
  
  .section-title-text::before,
  .section-title-text::after,
  .section-title-sticky *::before,
  .section-title-sticky *::after,
  .editorial-heading *::before,
  .editorial-heading *::after {
    display: none !important;
    content: none !important;
  }
  
  .section-title-sticky.hidden .section-title-text,
  .section-title-sticky .section-title-text {
    opacity: 0;
    transform: translateX(-40px);
  }
  
  .section-title-sticky.hidden .section-number-sticky,
  .section-title-sticky .section-number-sticky {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }

  /* Active state - immediately visible */
  .section-title-sticky.active .section-title-text {
    opacity: 1;
    transform: translateX(0);
    filter: drop-shadow(2px 2px 12px rgba(0, 212, 255, 0.5));
  }
  
  /* Hover enhancement */
  .section-title-sticky.active:hover .section-title-text {
    opacity: 1;
    transform: translateX(8px);
    filter: drop-shadow(4px 4px 20px rgba(0, 212, 255, 0.7));
  }
  
  /* Section number companion */
  .section-number-sticky {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    font-size: 2rem;
    color: var(--text-tertiary);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .section-title-sticky.active .section-number-sticky {
    opacity: 0.7;
    transform: translateX(-50%) scale(1.1);
  }
}