/* View Transition API opt-in for cross-document transitions */
@view-transition {
  navigation: auto;
  types: forward, backward;
}

/* Background color variations based on var(--darkblue) = rgb(9, 8, 21) */
:root {
  --darkblue-base: 9, 8, 21;
  --bg-design: rgb(var(--darkblue-base));
  --bg-focus: rgb(11, 10, 23);
  --bg-slack-variety-cadence: rgb(7, 6, 19);
  --bg-seeing-it-through-together: rgb(13, 12, 25);
  --bg-starting-out-informed: rgb(9, 10, 23);
  --bg-time-vs-scope: rgb(11, 8, 21);
  --bg-quality: rgb(9, 8, 19);
  --bg-before-and-after: rgb(13, 10, 23);
  --bg-designers-should-code: rgb(11, 10, 25);
}

/* Full-page background with smooth color transitions */
html {
  min-height: 100vh;
  transition: background-color 0.4s ease;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 2rem; */
  position: relative;
  overflow-x: hidden;
}


/* Centered container for principle content */
.principle-page {
  view-transition-name: content;
  max-width: 820px;
  width: 100%;
  padding: 0.2rem 0 0 0;
  transition: align-self 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.principle-page:has(.principle-content.content-hidden) {
  align-self: flex-start;
  margin-top: calc(50vh - 0.5rem);
  transform: translateY(-50%);
}

.principle-page.content-revealed {
  align-self: flex-start;
  margin-top: 2rem;
}

/* Title with view transition */
.principle-title {
  view-transition-name: title;
}

/* Navigation buttons - positioned on left and right, vertically centered */
.nav-buttons {
  view-transition-name: nav;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0;
  pointer-events: none;
  z-index: 100;
}

.nav-button {
  padding: 1.5rem;
  background: transparent;
  border: none;
  color: var(--very-light-yellow-darker);
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: "Henrietta Regular";
  font-size: 3.5rem;
  line-height: 1;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
}

.nav-button:first-child {
  transform: rotate(180deg);
  margin-top: 0.2rem;
}

.nav-button:hover {
  opacity: 0.8;
}

.nav-button:first-child:hover {
  transform: rotate(180deg) scale(1.1);
}

.nav-button:not(:first-child):hover {
  transform: scale(1.1);
}

.nav-button:disabled,
.nav-button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Mobile styles for screens < 480px */
@media (max-width: 480px) {
  .nav-buttons {
    position: fixed;
    bottom: 0;
    top: auto;
    transform: none;
    left: 0;
    right: 0;
    padding: 1rem;
    background: rgba(9, 8, 21, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: space-between;
  }

  .nav-button {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2.8rem;
    padding: 0.5rem;
  }
}

/* View Transition animations - Push from bottom */
@keyframes push-in-from-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes push-in-from-top {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes push-out-to-top {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes push-out-to-bottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

/* View Transition animations using CSS custom properties */
/* Animation names are set dynamically via JavaScript using CSS variables */
::view-transition-new(root) {
  animation-name: var(--vt-new-animation, push-in-from-bottom);
}

::view-transition-old(root) {
  animation-name: var(--vt-old-animation, push-out-to-top);
}

/* Close button container */
.close-button-container {
  position: fixed !important;
  top: 2rem !important;
  right: 2rem !important;
  z-index: 10000 !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  view-transition-name: close-button;
}

/* Close button styles */
.close-button {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* border: 2px solid rgba(255, 255, 255, 0.3); */
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
  transition: all 0.2s ease;
  cursor: pointer;
  pointer-events: auto;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.close-button:active {
  transform: scale(0.95);
}

/* ESC label */
.close-button-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "Henrietta Regular", sans-serif;
  pointer-events: none;
}

/* Mobile styles for close button */
@media (max-width: 480px) {
  .close-button-container {
    top: 1rem;
    right: 1rem;
  }
  
  .close-button {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
  }
  
  .close-button-label {
    font-size: 0.65rem;
  }
  
  /* Ensure touch targets meet 44x44px minimum */
  .close-button {
    min-width: 44px;
    min-height: 44px;
  }
  
  .nav-button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Mobile adaptations for principles pages */
@media (max-width: 768px) {
  body {
    padding: 1rem;
    min-height: 100vh;
  }
  
  .principle-page {
    max-width: 100%;
    padding: 1rem;
  }
  
  .principle-title {
    font-size: 2rem;
    line-height: 1.2;
  }
  
  .money-quote {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 1rem 0;
  }
  
  /* Ensure proper spacing on mobile */
  .principle-content {
    padding: 0;
  }
  
  /* Stack navigation buttons horizontally but with better spacing */
  .nav-buttons {
    padding: 0 1rem;
  }
  
  .nav-button {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Stack navigation buttons vertically on very small screens */
  @media (max-width: 480px) {
    .nav-buttons {
      flex-direction: row;
      justify-content: space-between;
      padding: 1rem;
      background: rgba(9, 8, 21, 0.95);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .principle-title {
      font-size: 1.75rem;
    }
    
    .money-quote {
      font-size: 1rem;
    }
  }
}

::view-transition-old(title),
::view-transition-new(title) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(content),
::view-transition-new(content) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keep close button static during transitions */
::view-transition-old(close-button),
::view-transition-new(close-button) {
  animation: none;
}

/* Custom animations for smooth transitions */
@keyframes fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Push transition animations */
@keyframes push-in {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes push-out {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-100px) scale(1.05);
  }
}

/* Apply animations to view transitions */
::view-transition-new(title) {
  animation-name: fade-scale-in;
}

::view-transition-old(title) {
  animation-name: fade-scale-out;
}

::view-transition-new(content) {
  animation-name: push-in;
}

::view-transition-old(content) {
  animation-name: push-out;
}

/* Reduced motion support - disable all animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable view transition animations */
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}