/* Global Styles */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Serif TC', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 200%;
    overflow-x: hidden; /* Prevent accidental horizontal scroll on body */
}

.navbar {
    font-size: 1.2rem;
    line-height: 1.25;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif TC', serif;
    font-weight: 900;
}

.info-box h1, .info-box h2, .info-box h3, .info-box h4, .info-box h5, .info-box h6 {
    font-family: 'Noto Serif TC', serif;
    font-weight: 900;
    text-align: center;
    line-height: 1.5;
}

/* Header Styling */
#intro-header {
    position: relative;
    overflow: visible;
}

#header-bg-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%; /* Oversize width to ensure coverage */
    min-height: 150%; /* Oversize height to ensure coverage */
    z-index: -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    pointer-events: none; /* Don't interfere with clicks */
}

#header-bg-container img {
    max-width: 100%;
    height: 100px; /* Approximate 50% scale for typical banners */
    width: auto;
    flex-shrink: 0;
    margin: 2px; /* Slight spacing for collage effect */
}

/* Text box with blurred background */
#header-text-box {
    position: relative;
    z-index: 10;
    padding: 60px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(50px);
    border-radius: 8px;
    width: 80%;
    max-width: 1200px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 3px solid white;
}
/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.mouse {
    width: 36px;
    height: 56px;
    border: 3px solid white;
    border-radius: 18px;
    position: relative;
    margin: 0 auto 12px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

.wheel {
    width: 6px;
    height: 12px;
    background: white;
    border-radius: 3px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}

@keyframes scroll-wheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
}

.arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow span {
    width: 16px;
    height: 16px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -8px 0;
    animation: scroll-arrow 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

.arrow span:nth-child(2) {
    animation-delay: 0.15s;
}

@keyframes scroll-arrow {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* Chapter Styling */
.chapter-header {
    position: relative;
    z-index: 10;
}

/* Scrolly Section Base */
.scrolly-section {
    position: relative;
    width: 100%;
    /* User requested 300vh height for sections to allow "staying" for a period */
    height: 300vh;
}

/* Extend sec-2-2 height for additional content */
#sec-2-2 {
    height: auto;
    padding-bottom: 10vh; /* Add some breathing room at the bottom */
    background-color: #666666;
}

#sec-2-2 .content-overlay {
    min-height: auto;
}

#sec-3-3 {
    height: auto;
    padding-bottom: 10vh;
}

#sec-3-3 .content-overlay {
    min-height: auto;
}

#sec-6-2 .overlay-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: auto;
}

#sec-0-1 {
    background: transparent;
}

#sec-0-1 .content-overlay {
    padding-top: 100vh;
}

#sec-0-1 .content-overlay .info-box:first-child {
    margin-top: 50vh;
}

/* Vertical Scroll Section Styling */
.vertical-scroll .sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: visible;
}

.vertical-scroll .background-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

.vertical-scroll .content-overlay {
    position: relative;
    z-index: 1;
    padding-top: 10vh; /* Start content a bit down */
    /* 
       To make the content scroll "within" the sticky container, 
       we can either let it flow naturally (but the container is overflow:hidden)
       OR we can make the overlay itself scrollable?
       
       Actually, if the container is sticky and 100vh, and the parent is 300vh,
       the parent scrolls. The sticky container stays fixed.
       The content INSIDE the sticky container will NOT scroll unless we animate it 
       or if the sticky container is just a background holder.
       
       Correction: 
       If we want "info boxes can scroll within the section", 
       we should probably NOT make the *entire* content wrapper sticky.
       
       Better approach for Vertical:
       - Parent (.scrolly-section) is 300vh.
       - Background is sticky (top: 0, height: 100vh).
       - Content is normal flow (absolute or relative on top of background).
    */
}

/* Revised Vertical Scroll Logic */
/* .vertical-scroll block removed (empty rule cleanup) */

.vertical-scroll .sticky-container {
    /* This acts as the background holder */
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

.vertical-scroll .content-overlay {
    /* This content scrolls naturally over the sticky background */
    position: relative;
    z-index: 10;
    margin-top: -100vh; /* Pull content up to overlap the sticky background */
    min-height: 300vh; /* Ensure it matches the section height so we can scroll through it */
    pointer-events: auto;
}

.vertical-scroll .content-overlay .info-box {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.85);
    margin-bottom: 80vh; /* Spacing between boxes */
    backdrop-filter: blur(50px);
}
.vertical-scroll .content-overlay .info-box:first-child {
    margin-top: 50vh;
}

/* Horizontal Scroll Section Styling (empty rule removed) */

.horizontal-scroll .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.horizontal-track {
    display: flex;
    height: 100%;
    width: max-content; /* Will be calculated or set to fit all panels */
    will-change: transform;
}

.h-panel {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Fade + Overlay Enhancements */
.fading-bg {
    transition: opacity 600ms ease;
}

#sec-2-1 .background-visual {
    opacity: 0; /* start hidden; fade in on scroll */
}

#sec-1-2 .background-visual {
    opacity: 1;
}

/* Ensure collage never shows through during crossfade */
#sec-1-2 .sticky-container,
#sec-2-1 .sticky-container,
#sec-3-1 .sticky-container {
    background: white;
}

.immersive-story {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* center children horizontally while stacking */
}

.story-columns {
    max-width: 820px;
    width: 100%;
    line-height: 1.8;
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.35); */
    margin: 0 auto; /* ensure centered when not using flex */
    text-align: justify;
}

.story-columns h2 {
    font-size: 2.2rem;
}

/* Divider between stacked story columns */
.story-columns.hw + .story-columns {
    border-top: 2px dotted rgba(255, 255, 255, 0.6);
    margin-top: 6vh;
    padding-top: 6vh;
}

.story-columns.hw.black + .story-columns.black {
    border-top-color: black;
}

.overlay-title {
    position: sticky;
    top: 15vh;         /* ~15% from top */
    margin-left: 5vw; /* ~5% from left */
    z-index: 2;
    max-width: 70vw;   /* keep text away from right edge */
    transition: transform 400ms ease;
}

/* Handwritten Font */
.iansui-regular {
  font-family: "Iansui", cursive;
  font-weight: 400;
  font-style: normal;
}

.hw{
  font-family: "Iansui", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 200%;
}

.black{
    color: black;
}

/* Photo Gallery in sec-2-2 */
.photo-gallery {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 85vw;
    margin: 8vh auto 0;
    pointer-events: auto;
}

.photo-item {
    flex: 1;
    text-align: center;
}

.photo-item img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.photo-caption {
    margin-top: 12px;
    font-size: 1rem;
    text-align: left;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

/* Before/After wipe for sec-3-1 */
.before-after-overlay {
    transition: clip-path 50ms linear;
    z-index: 1;
}
/* Slideshow crossfade transition */
#slideshow-img {
    transition: opacity 0.8s ease-in-out;
}

/* Typewriter Effect */
.typewriter {
    display: inline-block;
    overflow: hidden;
    border-right: .15em solid transparent; /* Start transparent so delayed lines are hidden */
    white-space: nowrap;
    margin: 0;
    letter-spacing: .15em;
    max-width: 0;
    opacity: 0; /* Start invisible */
    width: fit-content;
    vertical-align: bottom;
}

.typewriter.active {
    opacity: 1;
    animation: 
        typing 3.5s steps(23, end) forwards,
        blink-caret .75s step-end 5;
}

@keyframes typing {
  from { max-width: 0 }
  to { max-width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black; }
}

/* Fade In Animation */
.fade-in-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Timeline Section */
.timeline-section {
    background-color: #fff;
    color: #000;
    padding: 15vh 0 5vh 0;
}

.timeline-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-left: 60px;
}

/* The Vertical Line */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 20px;
    width: 4px;
    background-color: #f4d03f;
    border-radius: 2px;
}

.timeline-block {
    position: relative;
    margin-bottom: 80px;
}

.timeline-block:last-child {
    margin-bottom: 0;
}

/* The Dot */
.timeline-block::before {
    content: '';
    position: absolute;
    left: -46px; /* Aligns dot with line */
    top: 8px;
    width: 16px;
    height: 16px;
    background-color: #f4d03f;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #fff; /* Creates gap between line and dot */
    z-index: 1;
}

.timeline-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.8rem;
    color: #f4d03f;
    margin-bottom: 1rem;
    font-weight: bold;
}

.timeline-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}

/* Highlighter Effect */
.highlight {
    background-color: #ffffc5;
    color: #000;
    padding: 0 4px;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

footer p {
    margin: 4px 0;
    font-size: 0.9rem;
    line-height: 1.4;
}