/* Info Button */
.info-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: transparent;
    z-index: 1000;
}

/* Icon layers for smooth transition */
.info-btn .icon {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 24px;
}

/* i, X, and new ^ layers (combined selector for shared properties) */
.info-btn .icon .i,
.info-btn .icon .x,
.info-btn .icon .roof-up {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* Ensures content is centered */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* default: show i */
.info-btn .icon .i {
    opacity: 1;
}
/* default: hide X and ^ */
.info-btn .icon .x,
.info-btn .icon .roof-up { 
    opacity: 0;
    transform: rotate(-180deg);
}

/* active: rotate button, hide i, show X (State 1: Panel 1 Active) */
.info-btn.active {
    transform: rotate(180deg);
}
.info-btn.active .icon .i {
    opacity: 0;
    transform: rotate(180deg);
}
.info-btn.active .icon .x {
    opacity: 1;
    transform: rotate(0deg);
}

/* NEW: State 2: Page 2 Active - show roof-up (^) */
.info-btn.page-2 {
    transform: rotate(180deg); /* Keep button rotation */
}

/* FIX 1: Explicitly hide the 'i' icon when page-2 is active, just in case */
.info-btn.page-2 .icon .i { 
    opacity: 0;
    transform: rotate(180deg);
}

.info-btn.page-2 .icon .x { /* Hide X */
    opacity: 0;
    transform: rotate(180deg);
}
.info-btn.page-2 .icon .roof-up { /* Show ^ */
    opacity: 1;
    transform: rotate(360deg); /* FIX 2: Ensures the caret is pointing UP (not rotated) */
    /* Optional: Add a slight transform if the caret looks too low */
    /* transform: translateY(-2px); */ 
}

@font-face {
  font-family: 'BluePrinted';
  src: url('../fonts/BluePrinted.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Home title */
.home-title {
  font-family: 'BluePrinted', sans-serif;
  font-size: clamp(4rem, 10vw, 8rem); 
  font-weight: normal;
  color: black;
  transition: opacity 0.5s ease, transform 0.5s ease; 
  text-align: center;
}

/* Home screen */
.home-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background-color: #fff;
}

/* Hidden state when panel is active */
.home-title.hidden {
    opacity: 0;               
    transform: scale(0.8);    
}

/* Slide-in info panel (Page 1 base) */
.info-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 999;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(100%);
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;

    transition: transform 0.5s ease; 
}

/* Slide-in active state (Page 1 slides in from bottom) */
.info-panel.active {
    transform: translateY(0);
    transition: transform 1s ease; 
}

/* NEW: Page 1 slides up (out) when navigating to Page 2 */
.info-panel.slide-out-up {
    transform: translateY(-100%); 
    transition: transform 0.8s ease; 
}

/* NEW: Slide-in info panel (Page 2 base) */
.info-panel-2 {
    /* Copying essential layout/positioning from .info-panel */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 999; 
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    
    /* Initially hidden below the viewport */
    transform: translateY(100%); 
    transition: transform 0.8s ease; /* Transition for Page 2 sliding in */
}

.info-panel-2 {
    padding-top: env(safe-area-inset-top, 1rem);
    padding-bottom: env(safe-area-inset-bottom, 1rem);
}

.info-panel-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 100vh;
    overflow-y: auto; /* allow scrolling on smaller screens */
}

/* NEW: Page 2 Active state */
.info-panel-2.active {
    transform: translateY(0);
}

/* Titles same style as list */
.info-panel .info-title,
.info-panel .info-footer {
    font-size: 2.0rem; 
    font-weight: normal;
    margin: 0.5rem 0;
    word-break: break-word; 
}

/* List styling (applies to standard list items if you use a ul/li later) */
.info-panel .info-list {
    list-style: none; 
    padding: 0;
    margin: 2rem 0;
    font-size: 2.4rem;
    word-break: break-word; 
}

/* Spacing between list items */
.info-panel .info-list li {
    margin: 0.5rem 0;
}

/* Page 1: All panel children start hidden and slightly below */
.info-panel > .info-line {
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.4s cubic-bezier(0.20, 0.1, 0.20, 1), 
              opacity 0.4s cubic-bezier(0.20, 0.1, 0.20, 1);
  font-family: 'Times New Roman', Times, serif;
  font-size: 2.4rem;
  font-weight: normal;
  margin: 0.1rem 0; 
}

/* NEW: Link styling for tappable items */
.info-panel .info-link {
    cursor: pointer;
    color: #333; 
    transition: color 0.3s ease;
}

.info-panel .info-link:hover {
    color: #000;
}

/* Explicit styling and starting animation state for the linked line (Fix for immediate display) */
#drivenByLine {
    font-style: italic; /* Applies the desired italic look */
    cursor: pointer;
    
    /* Re-apply the base animation properties to ensure proper start state */
    opacity: 0;
    transform: translateY(50px);
    transition: transform 0.4s cubic-bezier(0.20, 0.1, 0.20, 1), 
                opacity 0.4s cubic-bezier(0.20, 0.1, 0.20, 1);
}

/* Extra spacing after first block */
.info-panel > .info-line:nth-child(2) {
  margin-bottom: 3rem;
}

/* Extra spacing after middle block */
.info-panel > .info-line:nth-child(9) {
  margin-bottom: 3rem;
}

/* Active state: slide up */
.info-panel.active > .info-line {
  opacity: 1;
  transform: translateY(0);
}

/* Remove extra spacing for Panel 2 lines */
.info-panel-2 > .info-line-2:nth-child(2),
.info-panel-2 > .info-line-2:nth-child(9) {
    margin-bottom: 0;
}


/* Staggered top-to-bottom delays (Page 1) */
.info-panel.active > .info-line:nth-child(1)  { transition-delay: 0.20s; } 
.info-panel.active > .info-line:nth-child(2)  { transition-delay: 0.30s; } 
.info-panel.active > .info-line:nth-child(3)  { transition-delay: 0.40s; } 
.info-panel.active > .info-line:nth-child(4)  { transition-delay: 0.50s; } 
.info-panel.active > .info-line:nth-child(5)  { transition-delay: 0.60s; } 
.info-panel.active > .info-line:nth-child(6)  { transition-delay: 0.70s; } 
.info-panel.active > .info-line:nth-child(7)  { transition-delay: 0.80s; } 
.info-panel.active > .info-line:nth-child(8)  { transition-delay: 0.90s; } 
.info-panel.active > .info-line:nth-child(9)  { transition-delay: 1.00s; } 
.info-panel.active > .info-line:nth-child(10) { transition-delay: 1.10s; } 

/* Active state and delay explicitly for the linked line (Fix for immediate display) */
.info-panel.active #drivenByLine {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.20s; /* Explicitly set the delay here */
}


/* Panel 2 text lines - smaller font */
.info-panel-2 > .info-line-2 {
    opacity: 0;
    transform: translateY(50px);
    transition: transform 0.4s cubic-bezier(0.20, 0.1, 0.20, 1), 
                opacity 0.4s cubic-bezier(0.20, 0.1, 0.20, 1);
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.0rem; /* Smaller than panel 1 */
    font-weight: normal;
    margin: 0.2rem 0; 
}

.info-panel-2 > .info-line-2 {
    font-size: clamp(1.2rem, 4vw, 2rem); /* smaller min size helps iPhone 11 */
}

/* Active state */
.info-panel-2.active > .info-line-2 {
    opacity: 1;
    transform: translateY(0);
}

/* Aligned staggered delays (matching Panel 1) */
.info-panel-2.active > .info-line-2:nth-child(1)  { transition-delay: 0.20s; }
.info-panel-2.active > .info-line-2:nth-child(2)  { transition-delay: 0.30s; }
.info-panel-2.active > .info-line-2:nth-child(3)  { transition-delay: 0.40s; }
.info-panel-2.active > .info-line-2:nth-child(4)  { transition-delay: 0.50s; }
.info-panel-2.active > .info-line-2:nth-child(5)  { transition-delay: 0.60s; }
.info-panel-2.active > .info-line-2:nth-child(6)  { transition-delay: 0.70s; }
.info-panel-2.active > .info-line-2:nth-child(7)  { transition-delay: 0.80s; }
.info-panel-2.active > .info-line-2:nth-child(8)  { transition-delay: 0.90s; }
.info-panel-2.active > .info-line-2:nth-child(9)  { transition-delay: 1.00s; }
.info-panel-2.active > .info-line-2:nth-child(10) { transition-delay: 1.10s; }
.info-panel-2.active > .info-line-2:nth-child(11) { transition-delay: 1.20s; }
.info-panel-2.active > .info-line-2:nth-child(12) { transition-delay: 1.30s; }
.info-panel-2.active > .info-line-2:nth-child(13) { transition-delay: 1.40s; }
.info-panel-2.active > .info-line-2:nth-child(14) { transition-delay: 1.50s; }
.info-panel-2.active > .info-line-2:nth-child(15) { transition-delay: 1.60s; }
.info-panel-2.active > .info-line-2:nth-child(16) { transition-delay: 1.70s; }

.italic-link {
    font-style: italic;
    color: #333; /* LinkedIn blue, optional */
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.italic-link:hover {
    color: #000; /* Darker blue on hover */
}

@media (max-width: 360px) {
    .info-btn { width: 2.5rem; height: 2.5rem; }
    .info-panel, .info-panel-2 { padding-top: 1rem; }
    .info-panel > .info-line, .info-panel-2 > .info-line-2 { font-size: clamp(1.2rem, 5vw, 1.8rem); }
}

@media (max-width: 1024px) {
    /* Increase the font size for Panel 1 on mid-sized screens */
    .info-panel > .info-line {
        font-size: 2.0rem; /* Adjust slightly smaller than the 3.0rem desktop base, but bigger than mobile */
    }
    /* Increase the maximum font size for Panel 2 on mid-sized screens */
    .info-panel-2 > .info-line-2 {
        /* This overrides the global clamp() maximum value of 2.5rem */
        font-size: clamp(1.2rem, 4vw, 2.3rem); 
    }
}

@media (max-width: 320px) {
    
    .info-btn {
        width: 2rem;
        height: 2rem;
        top: 0.5rem;
        right: 0.5rem;
    }

    .info-panel, .info-panel-2 {
        padding-top: 5rem;   /* extra space so content doesn't collide with top */
        padding-bottom: 2rem;
        justify-content: flex-start; /* move content from center to top */
        overflow-y: auto;           /* allow scrolling if content is taller than viewport */
    }

    .info-panel > .info-line,
    .info-panel-2 > .info-line-2 {
        font-size: clamp(1rem, 4vw, 1.4rem);
    }
}

@media (max-width: 200px) {
    .home-title { 
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}