/* Zoom Animation Styles */
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: 'Roboto', sans-serif;
  /* Force hardware acceleration for the entire page */
  transform: translateZ(0);
}

#animation-container {
  position: relative;
  width: 800px;
  height: 450px;
  overflow: hidden;
  background: #ffffff;
  margin: 0 auto;
  /* Isolate this container for compositing */
  isolation: isolate;
}

#logo {
  position: absolute;
  transform-origin: 81.38% 41.11%;
  will-change: transform;
  /* GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  /* Help browser optimize layout and paint */
  contain: layout style paint;
}

@keyframes zoomOut {
  0% {
    transform: scale(20) translateZ(0);
  }
  100% {
    transform: scale(var(--final-scale)) translateZ(0);
  }
}

#logo.animate {
  animation: zoomOut 8s cubic-bezier(0.1, 0.7, 0.67, 1) forwards;
}

/* Interactive Dashboard Styles */
:root {
  --warm-grey: #84807C;
  --pomodoro: #FF4500;
  --grey-66: #A8A8A8;
  --layer-two-color: rgb(134, 129, 185); 
  --layer-two-fade: rgb(194, 191, 220); 
  --layer-two-barely: rgb(234, 233, 244); 
  --layer-one-dimmed: 0.15;
  --layer-two-blue: rgb(64, 51, 248);
  --translate_vertical: 100px;
}

#dashboard-wrapper {
  width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-areas: "stack";
  grid-template-rows: max-content; /* Forces the grid track to fit the content exactly */
  position: relative;
  height: auto;           /* Ensure it only takes the space it needs */
  min-height: auto;      /* Remove the 100vh which was causing the large gap */
  margin-bottom: 30px;    /* Sets the gap to exactly 30px (allowable 20-40px) */
}

.layer {
  grid-area: stack;
  display: flex;
  gap: 53px; /* Reduced from 80px by 1/3 */
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.layer:hover { 
  z-index: 10; 
}

#layer-one.dimmed, #layer-one .line.faded-out { 
  opacity: var(--layer-one-dimmed) !important; 
}

#layer-two.dimmed .line, #layer-two .line.faded-out { 
  color: var(--layer-two-barely) !important; 
  opacity: 1 !important; 
}

.dimmed .line::after, .line.faded-out::after,
.dimmed .line::before, .line.faded-out::before { 
  display: none !important; 
}

.main-container { 
  pointer-events: auto; 
  flex-shrink: 0; 
  min-width: fit-content; 
}

/* Layer One: Left-aligned */
#layer-one {
  justify-content: flex-start;
}

#layer-one .main-container {
  text-align: left;
}

/* Layer Two: Right-aligned */
#layer-two { 
  justify-content: flex-end; 
}

#layer-two .main-container { 
  text-align: right; 
  order: 2; 
}

#layer-two .sub-container { 
  text-align: left; 
  order: 1; 
  flex-grow: 1; 
}

.line {
  font-size: 21.33pt; /* Reduced from 32pt by 1/3 */
  font-weight: 900;
  color: var(--warm-grey);
  line-height: 22.67pt; /* Reduced from 34pt by 1/3 */
  margin-bottom: 0; 
  transition: all 0.5s ease;
  cursor: pointer;
  opacity: 0;
  transform: translateY(var(--translate_vertical));
  animation: slideUp 1s ease-out forwards;
  white-space: nowrap;
}

.char { 
  transition: color 0.8s ease; 
}

#layer-one .char.fade { 
  color: var(--grey-66) !important; 
}

#layer-two .char.fade { 
  color: var(--layer-two-fade) !important; 
}

#layer-two .line.active-blue { 
  color: var(--layer-two-blue) !important; 
}

.active-red { 
  color: var(--pomodoro) !important; 
}

#layer-one .line::after { 
  content: " \25B6"; 
  color: var(--pomodoro); 
  font-size: 0.8em; 
  margin-left: 10px; /* Reduced from 15px by 1/3 */
}

#layer-two .line { 
  color: var(--layer-two-color); 
}

#layer-two .line::before { 
  content: "\25C0 "; 
  color: var(--layer-two-blue); 
  font-size: 0.8em; 
  margin-right: 10px; /* Reduced from 15px by 1/3 */
}

.sub-container { 
  opacity: 0; 
  transition: opacity 0.5s ease, transform 0.3s ease; 
  pointer-events: none; 
  flex-grow: 1; 
}

.sub-line {
  font-size: 16pt; /* Reduced from 24pt by 1/3 */
  font-weight: 900;
  color: var(--warm-grey);
  display: block; 
  line-height: 17.33pt; /* Reduced from 26pt by 1/3 */
  margin-bottom: 2.67pt; /* Reduced from 4pt by 1/3 */
  opacity: 0;
  transform: translateY(20px);
  animation: slideUpSub 0.4s forwards;
}

#layer-two .sub-line { 
  font-size: 16pt; /* Reduced from 16pt by 1/3 */
  line-height: 17.33pt; /* Reduced from 18pt by 1/3 */
  color: var(--layer-two-color) !important; 
}

.sub-line-content { 
  display: flex; 
  align-items: flex-start; 
}

.sub-explanation {
  font-size: 12pt; /* Reduced from 14pt by 1/3 */
  font-weight: 400;
  color: black;
  margin-left: 21.33px; /* Reduced from 32px by 1/3 */
  line-height: 13pt; /* Reduced from 16pt by 1/3 */
  opacity: 0.7;
}

.sub-line-content::before {
  content: ""; 
  display: inline-block; 
  width: 9.33px; /* Reduced from 14px by 1/3 */
  height: 9.33px; /* Reduced from 14px by 1/3 */
  flex-shrink: 0;
  background: var(--pomodoro); 
  border-radius: 50%;
  margin-right: 12px; /* Reduced from 18px by 1/3 */
  margin-top: 6.67pt; /* Reduced from 10pt by 1/3 */
  transition: all 0.5s ease;
  animation: circlePulse 2s infinite ease-in-out;
}

#layer-two .sub-line-content::before { 
  background: var(--layer-two-blue); 
  margin-top: 6pt; /* Reduced from 4pt by 1/3 */
  animation: circlePulseBlue 2s infinite ease-in-out; 
}

@keyframes circlePulse {
  0% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.4); 
  }
  70% { 
    transform: scale(1.15); 
    box-shadow: 0 0 0 10px rgba(255, 69, 0, 0); 
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); 
  }
}

@keyframes circlePulseBlue {
  0% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(64, 51, 248, 0.4); 
  }
  70% { 
    transform: scale(1.15); 
    box-shadow: 0 0 0 10px rgba(64, 51, 248, 0); 
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(64, 51, 248, 0); 
  }
}

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

@keyframes slideUpSub { 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}