/* --- Canvas Intro Overlay --- */
.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease;
}

.intro-overlay canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.intro-progress-track {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: rgba(0, 210, 190, 0.15);
    border-radius: 2px;
    overflow: hidden;
    z-index: 1;
}

.intro-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary-color, #00D2BE);
    border-radius: 2px;
    transition: width 0.15s ease;
}

.intro-overlay.intro-fading {
    opacity: 0;
    pointer-events: none;
}

.intro-overlay.intro-hidden {
    display: none;
}

/* Hero Section */
.hero {
    padding: 180px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: background 1.5s ease;
    z-index: 1;
    /* Add stacking context to prevent z-index issues */
}

/* Breathing Gradient Hook */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(0, 210, 190, 0.15) 0%, transparent 70%);
    /* Stronger initial gradient */
    animation: heroBreathe 6s ease-in-out infinite alternate;
    /* Faster animation */
    z-index: -1;
    /* Place behind hero content */
    pointer-events: none;
}


/* SVG Drawing Animation Container */
.hero-background-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 800px;
    z-index: 0;
    opacity: 0.0001;
    /* User requested low opacity */
    pointer-events: none;
    overflow: hidden;
}

.framework-svg {
    width: 100%;
    height: 100%;
}

/* --- Hero Intro Animation States --- */

.intro-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    /* Adjust size */
    height: auto;
    z-index: 20;
    opacity: 0;
    /* Hidden by default/after animation */
    pointer-events: none;
    transition: opacity 0.8s ease;
}

@media (max-width: 900px) {
    .intro-logo {
        width: 80px;
    }
}

@media (max-width: 600px) {
    .intro-logo {
        width: 50px;
    }
}

.hero-content-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

/* Initially, when intro is active — canvas overlay handles the intro */
body.intro-active {
    overflow: hidden;
}

body.intro-active .hero-background-container {
    opacity: 0 !important;
}

body.intro-active .intro-logo {
    opacity: 0 !important;
    pointer-events: none;
}

body.intro-active .hero-content-wrapper {
    opacity: 0;
}

body.intro-active .hero.bg-sketch::before,
body.intro-active .hero.bg-sketch::after {
    opacity: 0 !important;
}

body.intro-active .hero {
    background: none !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Hide other page elements during intro */
body.intro-active .navbar {
    opacity: 0;
    pointer-events: none;
}

body.intro-active section,
body.intro-active .footer {
    opacity: 0;
    pointer-events: none;
}

/* Suppress old SVG draw animations during canvas intro */
body.intro-active .draw-path,
body.intro-active .node-point {
    animation: none !important;
    opacity: 0 !important;
}

/* Transition them back in */
.navbar,
section,
.footer {
    transition: opacity 1.5s ease;
}

/* Sticky Navbar needs to be handled carefully */
/* When intro ends, navbar appears, pushing hero down. This "jump" is the reveal. */

/* --- Intro Typing Phase --- */
body.intro-typing .intro-logo {
    position: fixed;
    z-index: 100;
    opacity: 0;
}

/* Show wrapper for H1, but hide other children */
body.intro-typing .hero-content-wrapper {
    opacity: 1;
    transform: translateY(0);
}

body.intro-typing .hero-content-wrapper .subtitle,
body.intro-typing .hero-content-wrapper .hero-benefits,
body.intro-typing .hero-content-wrapper .cta-group {
    opacity: 0;
    visibility: hidden;
}

body.intro-typing .hero {
    background: none !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.intro-typing .navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
}

body.intro-typing section,
body.intro-typing .footer,
body.intro-typing .hero.bg-sketch::before,
body.intro-typing .hero.bg-sketch::after {
    opacity: 0 !important;
    pointer-events: none;
}

/* Final State */
body.intro-complete .intro-logo {
    opacity: 0;
    position: fixed;
    z-index: 100;
}

/* Keep Hero Centered in Final State */
body.intro-complete .hero {
    min-height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding-top: 120px;
    /* Ensure content clears fixed header */
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.intro-complete .hero-background-container {
    opacity: 0;
    /* Fade out completely */
    transition: opacity 1.5s ease;
}

body.intro-complete .hero-content-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* Typing Cursor */
.is-typing::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: var(--primary-color);
    margin-left: 2px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.draw-path {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.node-point {
    fill: var(--primary-color);
    opacity: 0;
    animation: fadePoint 0.5s ease-out forwards;
}

/* Staggered Animations */
.hub {
    animation-delay: 0s;
}

.inner-ring {
    animation-delay: 0.5s;
}

.outer-ring {
    animation-delay: 1s;
}

.spoke {
    animation-delay: 1.5s;
    stroke-width: 1;
}

.quadrant-arc {
    animation-delay: 2.5s;
    stroke: var(--accent-blue);
}

.node-point {
    animation-delay: 3.5s;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadePoint {
    to {
        opacity: 1;
    }
}


.hero h1 {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 32px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.notebook-highlight {
    color: var(--primary-color);
    position: relative;
    white-space: nowrap;
    /* Prevent breaking mid-phrase if possible */
}

.hero .subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

.hero-benefits {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 48px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.benefit-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 1;
}

.benefit-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.benefit-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.benefit-text strong {
    color: var(--text-primary);
}

.benefit-note {
    display: block;
    font-size: 0.65rem;
    color: #b0b0b0;
    margin-top: 3px;
}

.benefit-note a {
    color: #b0b0b0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.benefit-note a:hover {
    text-decoration: underline;
}

.cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 40px;
}

/* Typewriter Cursor */
.cursor-blink {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: var(--primary-color);
    margin-left: 4px;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
}

@keyframes heroBreathe {
    0% {
        transform: scale(1);
        opacity: 0.6;
        /* Higher baseline opacity since gradient is subtle */
    }

    100% {
        transform: scale(1.1);
        /* Larger breath */
        opacity: 1;
        /* Clear fade in */
    }
}

/* --- Background Sketches (Pencil Drafts) --- */

/* Base class for sketches */
.bg-sketch {
    position: relative;
    z-index: 0;
}

.bg-sketch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 50;
    bottom: 0;
    opacity: 0.12;
    /* Slightly increased for pencil visibility */
    mix-blend-mode: multiply;
    /* Ensures white paper background is transparent */
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* Posture Draft - Hero Section - Left Side */
/* .hero.bg-sketch::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    width: 50%;
    height: 50%;
    background-image: url('../assets/images/posture_draft.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0.1;
    z-index: 0;
    animation: heroBreathe 20s ease-in-out infinite alternate;
    transition: opacity 1.5s ease;
} */

/* Human Blueprint - Hero Section - Right Side */
/* Human Blueprint - Hero Section - Right Side - Disabled */
/* .hero.bg-sketch::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    width: 50%;
    height: 50%;
    background-image: url('../assets/images/human_blueprint.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    opacity: 0.08;
    z-index: 0;
    animation: heroBreathe 25s ease-in-out infinite alternate-reverse;
    transition: opacity 1.5s ease;
} */

/* Adjust Hero Background Images and Intro Animation on Small Screens */
@media (max-width: 900px) {

    .hero.bg-sketch::before,
    .hero.bg-sketch::after {
        display: none !important;
    }

    .hero-background-container {
        transform: translate(-50%, -50%) scale(0.65);
    }
}

@media (max-width: 600px) {
    .hero-background-container {
        transform: translate(-50%, -50%) scale(0.4);
    }
}

@media (max-width: 768px) {
    .notebook-highlight {
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}