/* ========================================
   HEADER - Starts as Hero, Shrinks to Sticky
   ======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 100;
  background: transparent;
  display: flex;
  align-items: flex-end;
  padding: 5rem 2rem; /* breathing room */
  transition:
    height var(--transition-duration) var(--transition-ease),
    padding var(--transition-duration) var(--transition-ease),
    top var(--transition-duration) var(--transition-ease),
    background-color var(--transition-duration) var(--transition-ease);
}

.header.collapsed {
  height: calc(var(--sticky-height) + 30px);
  top: 0;
  padding: 30px 2rem 0 2rem;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: center;
}

.header-content {
  width: 100%;
  max-width: var(
    --details-max-width
  ); /* Match details panel width for alignment */
  margin: 0 auto;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.header.collapsed .header-content {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: var(--sticky-height);
  gap: 1rem;
}

/* Name - Big in Hero, Small in Sticky */
.name {
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition: all var(--transition-duration) var(--transition-ease);
  transform-origin: bottom left;
}

.header.collapsed .name {
  font-size: 2rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1; /* Normalize for proper vertical alignment */
}

/* Hero Summary - Stacked above name in flex flow */
.hero-summary {
  position: relative; /* Changed from absolute to stack with Name */
  margin-bottom: -1.5rem; /* Negative margin to bring closer to name */
  margin-top: 120px; /* Push down to avoid overlap with fixed header controls */
  margin-left: 8vw; /* Move towards center */
  max-width: 50%;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.4s ease-out 0.2s,
    transform var(--transition-duration) var(--transition-ease);
  z-index: 2; /* Ensure text is above image */
}

/* Pre-fade: hide hero summary before main transition starts */
.hero-summary.pre-fade {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.header.collapsed .hero-summary {
  position: absolute; /* Remove from flex flow in sticky mode */
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  visibility: hidden; /* Ensure it's gone */
}

.hero-tagline {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 1rem;
}

.hero-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--secondary-text);
}

/* Profile Image - Big in Hero, Hidden when collapsed */
.profile-container {
  position: absolute;
  top: 22%; /* Moved down to cluster with text */
  right: 5%; /* Moved in from right (-5%) to center */
  width: min(45vw, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  transition:
    opacity var(--transition-duration) var(--transition-ease),
    transform var(--transition-duration) var(--transition-ease);
  transform-origin: top right;
  background: none !important;
  will-change: opacity, transform;
}

.header.collapsed .profile-container {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.1);
}

.profile-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
  mix-blend-mode: multiply;
  cursor: pointer;
  background: none !important;
}

/* Header Controls - Container for right-side elements */
.header-controls {
  position: fixed;
  top: calc(30px + var(--sticky-height) / 2);
  right: max(2rem, calc(50% - var(--details-max-width) / 2 + 2rem));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  z-index: 200;
}



/* Language Switcher - Inside header-controls */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  opacity: 1;
}

/* Subtle Style */
.lang-btn {
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  box-shadow: none; /* No shadow */
  color: var(--secondary-text);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0;
  padding-bottom: 4px; /* Space for underline */
  border-radius: 0;
  opacity: 0.6;
  cursor: pointer;
  position: relative;
}

.lang-btn:hover {
  opacity: 1;
  color: var(--text-color);
  transform: none;
}

.lang-btn.active {
  color: var(--text-color);
  opacity: 1;
  font-weight: 700;
  position: relative;
}

.lang-btn.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-color);
}

/* name-area: Container for H1 and Lang Switcher */
.name-area {
  display: flex;
  align-items: flex-end; /* Align items to bottom baseline */
  gap: 2rem; /* Space between name and toggle */
  transition: all var(--transition-duration) var(--transition-ease);
  transform-origin: bottom left;
  margin-top: auto;
  margin-left: 8vw; /* Move towards center */
  transform: translateY(
    -2rem
  ); /* Pull name up to bring closer to description */
}

/* Mode toggle positioning within name-area */
.name-area .mode-toggle {
  margin-bottom: 0.5rem; /* Align with name baseline in hero state */
}

.header.collapsed .name-area {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* Space between name and toggle */
  margin-left: 0; /* Reset margin in sticky mode */
  transform: none; /* Reset transform in collapsed state */
}

.header.collapsed .name-area .mode-toggle {
  margin-bottom: 0; /* Reset for proper alignment in collapsed state */
}

/* PROD/UAT Toggle - Inside header-controls, always visible */
.mode-toggle {
  display: flex;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

/* Header LinkedIn Icon - Swiss minimal style */
.header-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-text);
  opacity: 0.6;
  transition: all 0.3s ease;
  padding: 0;
}

.header-linkedin svg {
  width: 18px;
  height: 18px;
}

.header-linkedin:hover {
  opacity: 1;
  color: var(--text-color);
}

/* Sticky Profile - Overlapping */
.sticky-profile {
  width: 100px; /* Large */
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent !important;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--transition-duration) var(--transition-ease);
  /* Make it hang out and lower */
  margin-left: -10px;
  margin-top: 0; /* Aligned with other header items */
  box-shadow: none;
  position: relative;
}

.header.collapsed .sticky-profile {
  opacity: 1;
  transform: scale(1) translateY(8px); /* Offset slightly lower */
}

.sticky-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
  mix-blend-mode: multiply;
  cursor: pointer;
  background: none !important;
}

/* Journey Trace - Only in Hero */
.journey-trace {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-left: 8vw; /* Move towards center */
  font-size: 1.8rem;
  font-weight: 900;
  align-items: center;
  opacity: 1;
  transform: translateY(-2rem); /* Match name-area shift */
  transition:
    opacity 0.4s ease-out 0.6s,
    transform var(--transition-duration) var(--transition-ease);
}

/* Pre-fade: hide journey trace before main transition starts */
.journey-trace.pre-fade {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.header.collapsed .journey-trace {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  position: absolute;
}

.j-code {
  opacity: 0.4;
  cursor: help;
  transition: all 0.3s ease;
  position: relative;
}

.j-code:hover {
  opacity: 1;
  color: var(--accent-color);
}

.j-code::after {
  content: attr(data-title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.j-code:hover::after {
  opacity: 1;
}

.j-arrow {
  opacity: 0.2;
  font-weight: 300;
  font-size: 1.2rem;
}

/* Header Center - Subtitle */
.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-duration) var(--transition-ease);
  z-index: 200;
}

.header.collapsed .header-center {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.3s;
}

/* Pre-fade out before going back to hero */
.header-center.pre-fade-out {
  opacity: 0 !important;
  transition: opacity 0.15s ease-out !important;
  transition-delay: 0s !important;
}

.header-subtitle {
  font-size: 1rem; /* Increased from 0.75rem */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-text);
  white-space: nowrap;
}

/* Mode Toggle - Swiss minimal text style */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

.toggle-switch {
  display: none; /* Hide the physical switch */
}

.mode-label {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-text);
  opacity: 0.6;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  padding-bottom: 4px; /* Space for underline */
}

.mode-label:hover {
  opacity: 1;
  color: var(--text-color);
}

.mode-label.active {
  color: var(--text-color);
  opacity: 1;
  font-weight: 700;
  position: relative;
}

.mode-label.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-color);
}

/* Divider between PROD and UAT */
.mode-toggle .toggle-switch {
  display: block;
  width: 1px;
  height: 12px;
  background: var(--secondary-text);
  opacity: 0.3;
  border-radius: 0;
  position: static;
}

.mode-toggle .toggle-switch::after {
  display: none;
}

/* ========================================
   Fixed Mode Toggle
   ======================================== */
.fixed-mode-toggle {
  position: fixed;
  /* Vertically centered in the sticky header bar */
  top: calc(30px + var(--sticky-height) / 2);
  /* Horizontally positioned after the Name (approx 2rem padding + ~220px name width) */
  left: calc(max(2rem, 50% - var(--details-max-width) / 2 + 2rem) + 240px);
  transform: translateY(-50%);
  z-index: 201; /* Above header controls */
}

/* On Mobile, adjust the offset for smaller name font */
@media (max-width: 768px) {
  .fixed-mode-toggle {
    left: calc(max(1rem, 50% - var(--details-max-width) / 2 + 1rem) + 140px);
  }
}