/* manifesto.css */
/* Rules for #adventure-portal (previously .landing-page) initial hiding are inline in index.html to prevent FOUC */

/* Hide base.html header specifically on the index/portal page */
body.index-portal-page header.main-header, /* If header has .main-header class */
body.index-portal-page header { /* General header tag */
    display: none !important;
}

#manifesto-intro-overlay {
    position: fixed; /* CRITICAL: Ensure it's fixed to viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: #F9F9F6; /* From styles.css */
    z-index: 10000; /* High z-index to cover everything */
    display: flex; 
    justify-content: center;
    align-items: center;
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out; 
    overflow: hidden; /* Contain sliding scenes */
}

#manifesto-intro-overlay.active {
    opacity: 1;
    visibility: visible;
}

.manifesto-scene {
    opacity: 0; 
    visibility: hidden; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* width: 100%; Let max-width define its content width, overlay centers it */
    /* height: 100%; Let content define height, overlay centers it */
    max-width: 70ch; 
    padding: 20px; 
    box-sizing: border-box;
    position: absolute; /* Still absolute for transform and stacking */
    /* top: 0; Let align-items handle vertical centering */
    /* left: 0; Let justify-content handle horizontal centering for the block */
    animation-fill-mode: forwards;
}

/* --- New Scene Transition Animations --- */
@keyframes slideInFromRight {
    from { transform: translateX(100vw); opacity: 0; visibility: hidden; } /* Slide from viewport edge */
    to { transform: translateX(0%); opacity: 1; visibility: visible; }
}
@keyframes slideOutToLeft {
    from { transform: translateX(0%); opacity: 1; visibility: visible; }
    to { transform: translateX(-100vw); opacity: 0; visibility: hidden; } /* Slide to viewport edge */
}
@keyframes slideInFromLeft {
    from { transform: translateX(-100vw); opacity: 0; visibility: hidden; } /* Slide from viewport edge */
    to { transform: translateX(0%); opacity: 1; visibility: visible; }
}
@keyframes slideOutToRight {
    from { transform: translateX(0%); opacity: 1; visibility: visible; }
    to { transform: translateX(100vw); opacity: 0; visibility: hidden; } /* Slide to viewport edge */
}

/* Classes to trigger animations */
/* Remove explicit left:0, let the overlay's flex centering position the scene block, then transform from there */
.manifesto-scene.entering-from-right {
    animation: slideInFromRight 1.5s ease-out forwards;
}
.manifesto-scene.exiting-to-left {
    animation: slideOutToLeft 1.5s ease-in forwards;
}
.manifesto-scene.entering-from-left {
    animation: slideInFromLeft 1.5s ease-out forwards;
}
.manifesto-scene.exiting-to-right {
    animation: slideOutToRight 1.5s ease-in forwards;
}
.manifesto-scene.active-scene-initial {
    /* left: 0; Removed */
    opacity: 1;
    visibility: visible;
    animation: fadeInScene 2s ease-out forwards; 
}


.manifesto-scene h3 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
    font-weight: 600; 
    color: #2C2C2C; 
    font-size: clamp(1.8em, 4vw, 2.5em);
    margin-bottom: 30px;
    opacity: 0; 
    transform: translateY(20px); 
    animation: slideUpFadeIn 1.5s ease-out 0.7s forwards; 
}

.manifesto-scene .scene-paragraphs {
    opacity: 0; 
    transform: translateY(20px); 
    animation: slideUpFadeIn 1.5s ease-out 2s forwards; 
}

.manifesto-scene p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
    color: #2C2C2C; 
    font-size: clamp(1em, 2.5vw, 1.2em);
    line-height: 1.7;
    margin-bottom: 1em;
}

.manifesto-scene p.emphasis {
    font-family: Georgia, serif; 
    font-style: italic;
    font-weight: bold; 
    color: #2C2C2C;
}

.manifesto-scene p.sub-emphasis { 
    font-weight: 500; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 3px;
    display: inline-block;
}

.scene-svg-container {
    width: 100%;
    height: 100px; 
    margin-bottom: 30px;
    opacity: 0; 
    transform: translateY(15px); 
    animation: slideUpFadeIn 1.2s ease-out 1.5s forwards; 
}

.scene-svg-container svg {
    width: 100%;
    height: 100%;
    max-width: 200px; 
}

/* Scene 1 SVG Animations */
#s1-shape-line1, #s1-shape-line2, #s1-shape-arch {
    stroke: #2C2C2C; 
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 500; 
    stroke-dashoffset: 500; 
    animation: drawLine 1.8s ease-out forwards; 
}
#s1-shape-line1 { animation-delay: 2.5s; } 
#s1-shape-line2 { animation-delay: 2.8s; }
#s1-shape-arch { animation-delay: 3.1s; stroke-dasharray: 800; stroke-dashoffset: 800; }

/* Scene 2 SVG Animations */
#s2-moving-dot {
    fill: #D95A9E; 
    r: 0; 
    animation: pulseDot 0.7s ease-in-out 2.5s forwards, moveDot 1.8s ease-in-out 3.2s forwards; 
}
#s2-dot-trail {
    stroke: #D95A9E;
    stroke-width: 1.5;
    opacity: 0.5;
    stroke-dasharray: 500; 
    stroke-dashoffset: 500; 
    animation: drawTrail 1.8s linear 3.2s forwards; 
}

/* --- Scene 3 Pine Tree Animations --- */
#s3-ground-line {
    stroke-dasharray: 100; /* Assuming path length M50 90 H150 is 100 */
    stroke-dashoffset: 100;
    animation: drawLine 0.5s ease-out 2.5s forwards, fadeInElementSimple 0.5s ease-out 2.5s forwards;
}

#s3-seed {
    animation: fadeInElementSimple 0.5s ease-out 2.6s forwards, fadeOutElementSimple 0.5s ease-in 3.2s forwards;
}

#s3-tree-trunk {
    /* Path d="M100 90 V30" has a length of 60 */
    stroke-dasharray: 60; 
    stroke-dashoffset: 60;
    animation: growTrunk 1s ease-out 3.0s forwards, fadeInElementSimple 0.1s ease-out 3.0s forwards;
}

@keyframes growTrunk {
    to { stroke-dashoffset: 0; opacity: 1; /* Ensure trunk is visible after drawing */ }
}

/* Common animation for branches and top to appear */
@keyframes sproutElement {
    0% { opacity: 0; transform: scale(0.2, 0.1); /* Start smaller and flatter */ }
    100% { opacity: 1; transform: scale(1, 1); }
}

/* Base style for branches to set transform-origin */
#s3-branch1-left, #s3-branch1-right,
#s3-branch2-left, #s3-branch2-right,
#s3-branch3-left, #s3-branch3-right,
#s3-tree-top {
    /* Generic origin, can be overridden per branch if more precision is needed */
    /* For paths like 'M100,Y L(X1,Y1) L(X2,Y2) Z', origin should be M(100,Y) */
}

#s3-branch1-left {
    animation: sproutElement 0.6s ease-out 3.5s forwards;
    transform-origin: 100px 75px; /* Point M100,75 */
}
#s3-branch1-right {
    animation: sproutElement 0.6s ease-out 3.5s forwards;
    transform-origin: 100px 75px; /* Point M100,75 */
}

#s3-branch2-left {
    animation: sproutElement 0.6s ease-out 3.8s forwards;
    transform-origin: 100px 60px; /* Point M100,60 */
}
#s3-branch2-right {
    animation: sproutElement 0.6s ease-out 3.8s forwards;
    transform-origin: 100px 60px; /* Point M100,60 */
}

#s3-branch3-left {
    animation: sproutElement 0.6s ease-out 4.1s forwards;
    transform-origin: 100px 45px; /* Point M100,45 */
}
#s3-branch3-right {
    animation: sproutElement 0.6s ease-out 4.1s forwards;
    transform-origin: 100px 45px; /* Point M100,45 */
}

#s3-tree-top {
    animation: sproutElement 0.5s ease-out 4.4s forwards;
    transform-origin: 100px 35px; /* Mid-base of the top triangle path M100,30 L98,35 L103,35 Z */
}

/* Optional: Tree Sway Animation */
#s3-pine-tree.sway {
    animation: treeSway 3s ease-in-out 5s infinite alternate; /* Starts after growth, infinite gentle sway */
    transform-origin: 100px 90px; /* Base of the trunk */
}

@keyframes treeSway {
    0% { transform: rotate(-1deg); }
    100% { transform: rotate(1deg); }
}

/* Generic Keyframes used by pine tree elements */
@keyframes fadeInElementSimple {
    to { opacity: 1; }
}
@keyframes fadeOutElementSimple {
    to { opacity: 0; }
}

/* Keyframes for internal element animations, kept as they are fine */
@keyframes fadeInScene { /* Fallback for initial scene */
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
}
@keyframes slideUpFadeIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}
@keyframes pulseDot {
  0% { r: 0; opacity: 0.5; }
  50% { r: 6; opacity: 1; }
  100% { r: 4; opacity: 1; }
}
@keyframes moveDot {
  from { transform: translateX(0px); }
  to { transform: translateX(120px); } 
}
@keyframes drawTrail {
  0% { stroke-dashoffset: 500; opacity: 0.5; }
  80% { stroke-dashoffset: 0; opacity: 0.3; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.manifesto-nav-btn {
    position: absolute;
    bottom: 20px; /* Adjusted for mobile */
    background-color: transparent;
    color: #2C2C2C;
    border: 1px solid #2C2C2C;
    padding: 10px 15px; /* Slightly larger padding */
    font-family: system-ui, sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    z-index: 10001;
    opacity: 0.7; /* Slightly more visible */
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: inline-block; /* Ensure it's always displayed to be styled as disabled */
}
.manifesto-nav-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
}
.manifesto-nav-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #aaa; /* Lighter border for disabled */
    color: #aaa; /* Lighter text for disabled */
    transform: translateY(0); /* No hover effect when disabled */
}
.manifesto-nav-btn.disabled:hover {
    opacity: 0.3; /* Maintain disabled opacity on hover */
    background-color: transparent; /* No hover background change when disabled */
}
#prev-scene-btn {
    left: 20px; /* Adjusted for mobile */
}
#next-scene-btn {
    right: 20px; /* Adjusted for mobile */
}
#skip-intro-btn {
    position: absolute;
    bottom: 20px; /* Adjusted for mobile */
    left: 50%; 
    transform: translateX(-50%);
    background-color: transparent;
    color: #2C2C2C; 
    border: 1px solid #2C2C2C;
    padding: 10px 15px; /* Slightly larger padding */
    font-family: system-ui, sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    z-index: 10001;
    opacity: 0.7; /* Slightly more visible */
    transition: opacity 0.3s ease;
}
#skip-intro-btn.with-nav {
    right: auto; 
    left: 50%;
    transform: translateX(-50%);
}
 #skip-intro-btn:hover {
    opacity: 1;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .manifesto-scene h3 {
        font-size: clamp(1.5em, 5vw, 2em); /* Adjust clamp for mobile */
        margin-bottom: 20px;
    }
    .manifesto-scene p {
        font-size: clamp(0.9em, 3vw, 1.1em); /* Adjust clamp for mobile */
    }
    .scene-svg-container {
        height: 80px; /* Smaller SVG container on mobile */
        margin-bottom: 20px;
    }
    .scene-svg-container svg {
        max-width: 150px; /* Smaller SVG max width */
    }

    .manifesto-nav-btn,
    #skip-intro-btn {
        font-size: 0.8em;
        padding: 8px 12px;
        bottom: 15px;
    }
    #prev-scene-btn {
        left: 15px;
    }
    #next-scene-btn {
        right: 15px;
    }
    /* Skip button might need specific positioning if nav buttons are too close */
    /* #skip-intro-btn.with-nav { } */

    /* Main content responsiveness from index.html */
    .content-sections {
        flex-direction: column;
        gap: 1rem; /* Reduce gap for stacked items */
    }

    .lode-section, .longcut-section, .news-section {
        margin-bottom: 2rem; /* Add some space between stacked sections */
    }

    .lode-card .card-action,
    .longcut-card .card-action {
        flex-direction: column; /* Stack buttons in cards */
        align-items: stretch; /* Make buttons full width of action area */
    }
    .lode-card .card-action a.btn,
    .longcut-card .card-action a.btn {
        width: 100%;
        margin-bottom: 0.5rem; /* Space between stacked buttons */
        text-align: center;
    }
    .lode-card .card-action a.btn:last-child,
    .longcut-card .card-action a.btn:last-child {
        margin-bottom: 0;
    }

    .news-container {
        grid-template-columns: 1fr; /* Single column for news topics */
    }

    /* General typography and spacing for cards if needed */
    .lode-card, .longcut-card {
        padding: 1rem; /* Adjust card padding */
    }
    .card-title {
        font-size: 1.3em; /* Adjust card titles */
    }
    .card-content {
        font-size: 0.95em; /* Adjust card content text */
    }
}

@media (max-width: 480px) {
    .manifesto-scene h3 {
        font-size: clamp(1.3em, 6vw, 1.8em);
    }
    .manifesto-scene p {
        font-size: clamp(0.85em, 3.5vw, 1em);
    }
    .scene-svg-container {
        height: 60px;
        margin-bottom: 15px;
    }
     .scene-svg-container svg {
        max-width: 120px; 
    }

    .manifesto-nav-btn {
        width: calc(50% - 22.5px); /* Example: make prev/next take half width minus some gap */
        box-sizing: border-box;
    }
    #skip-intro-btn {
        width: calc(100% - 30px); /* Example: make skip full width */
        bottom: 60px; /* Position it above prev/next if they are side-by-side */
        left: 15px;
        transform: translateX(0);
        box-sizing: border-box;
    }
    #skip-intro-btn.with-nav {
        /* On small screens, if nav buttons are side-by-side, this logic might make skip too narrow or oddly placed.
           Consider making skip full width and nav buttons below it, or all stacked. */
        width: calc(100% - 30px); 
        bottom: 60px; 
        left: 15px;
        transform: translateX(0);
        right: auto; /* Reset right positioning */
    }
    /* Simpler stacking for nav buttons on smallest screens */
    #prev-scene-btn {
        left: 15px;
        bottom: 15px; 
    }
    #next-scene-btn {
        right: 15px;
        bottom: 15px; 
    }
    /* If skip button is to be above when navs are present */
    #skip-intro-btn.with-nav {
        bottom: (15px + 34px + 10px); /* prev/next height + padding + desired gap */
    }


    .card-title {
        font-size: 1.2em; 
    }
    .card-content {
        font-size: 0.9em; 
    }
}

/* --- New Adventure Portal Styles --- */
#adventure-portal {
    /* Initial display:none, opacity:0, visibility:hidden are handled by inline style in index.html */
    /* .content-ready class (added by JS) makes it display:flex, opacity:1, visibility:visible */
    /* Flex properties for centering its content are also in the inline style for .content-ready */
    padding: 2rem; /* Add some padding around the portal content */
    box-sizing: border-box;
    width: 100%;
}

.portal-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: clamp(2em, 5vw, 3em);
    color: #2C2C2C;
    font-weight: 600;
    margin-bottom: 0.5em;
}

.portal-subtitle {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: clamp(1em, 3vw, 1.25em);
    color: #5a5a5a; /* Consistent with other subtitles */
    margin-bottom: 3rem;
    max-width: 60ch;
}

.portal-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between options */
    max-width: 600px; /* Max width for the options list */
    width: 100%;
}

.portal-navigation li {
    width: 100%;
}

.portal-option {
    display: block;
    background-color: #FFFFFF; /* White background for options */
    border: 1px solid #eee; /* Subtle border */
    border-radius: 6px; /* Slightly rounded corners */
    padding: 1.5rem;
    text-decoration: none;
    color: #2C2C2C;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    text-align: left; /* Align text to the left within each option */
}

.portal-option:hover, .portal-option:focus {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.07);
    color: #D95A9E; /* Accent color on hover */
}

.portal-option .option-title {
    display: block;
    font-size: clamp(1.2em, 3vw, 1.5em);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.portal-option .option-description {
    display: block;
    font-size: clamp(0.85em, 2.5vw, 1em);
    color: #555; /* Slightly lighter text for description */
    line-height: 1.5;
}

/* --- Mobile Responsiveness for Portal --- */
@media (max-width: 768px) {
    #adventure-portal {
        padding: 1rem;
    }
    .portal-title {
        font-size: clamp(1.8em, 6vw, 2.5em);
    }
    .portal-subtitle {
        font-size: clamp(0.9em, 2.8vw, 1.1em);
        margin-bottom: 2rem;
    }
    .portal-navigation ul {
        gap: 1rem;
    }
    .portal-option {
        padding: 1rem;
    }
    .portal-option .option-title {
        font-size: clamp(1.1em, 4vw, 1.3em);
    }
    .portal-option .option-description {
        font-size: clamp(0.8em, 2.2vw, 0.95em);
    }
}

/* Ensure the rest of your manifesto.css (Scene 1, 2, 3 animations, nav buttons etc.) follows here */

/* Scene 1 SVG Animations (Example - rest of file continues) */
#s1-shape-line1, #s1-shape-line2, #s1-shape-arch { 
    /* ... */ 
}