/* ===========================================
   thethird.quest - Art Deco Botanical
   Palette: Honeyed Neutral
   =========================================== */

/* --- CSS Custom Properties --- */
:root {
    --warm-parchment: #F5EDE0;
    --honeyed-cream: #EDE1CC;
    --burnished-walnut: #3D2B1F;
    --aged-amber: #C9952B;
    --dried-petal: #B87B6A;
    --pressed-leaf: #8A9A7B;
    --sun-linen: #F0D89A;
    --espresso-depth: #1E1409;
    --candlelit-shadow: #2A1A0F;
    --candlelit-highlight: #E8B84D;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Lora', 'Times New Roman', serif;
    --font-accent: 'Josefin Sans', 'Helvetica Neue', sans-serif;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--warm-parchment);
    color: var(--burnished-walnut);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
}

/* --- Background Botanical Pattern --- */
#bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='40' fill='none' stroke='%233D2B1F' stroke-width='0.5'/%3E%3Ccircle cx='100' cy='100' r='30' fill='none' stroke='%233D2B1F' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='100' r='20' fill='none' stroke='%233D2B1F' stroke-width='0.3'/%3E%3Cpath d='M100,60 Q105,75 100,80 Q95,75 100,60Z' fill='none' stroke='%233D2B1F' stroke-width='0.5'/%3E%3Cpath d='M100,140 Q95,125 100,120 Q105,125 100,140Z' fill='none' stroke='%233D2B1F' stroke-width='0.5'/%3E%3Cpath d='M60,100 Q75,95 80,100 Q75,105 60,100Z' fill='none' stroke='%233D2B1F' stroke-width='0.5'/%3E%3Cpath d='M140,100 Q125,105 120,100 Q125,95 140,100Z' fill='none' stroke='%233D2B1F' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* --- Scroll Progress Bar --- */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 1000;
    background: transparent;
}

#scroll-bar {
    height: 100%;
    width: 0%;
    background: var(--aged-amber);
    transition: width 0.1s linear;
}

.scroll-node {
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dried-petal);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-node.visible {
    opacity: 1;
}

/* --- Navigation --- */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 34px;
    background: transparent;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

#main-nav.scrolled {
    background: rgba(245, 237, 224, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nav-label {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--burnished-walnut);
}

.nav-links {
    display: flex;
    gap: 34px;
}

.nav-link {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--burnished-walnut);
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--aged-amber);
    transition: width 0.4s ease;
}

.nav-link:hover {
    color: var(--aged-amber);
}

.nav-link:hover::after {
    width: 100%;
}

/* --- Scene Base --- */
.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    z-index: 1;
}

/* --- ACT I: Hero Section --- */
#act-i {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--warm-parchment);
    min-height: 100vh;
    padding: 55px 0;
}

.hero-sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(201, 149, 43, 0.08) 5deg,
        transparent 10deg,
        transparent 20deg,
        rgba(201, 149, 43, 0.08) 25deg,
        transparent 30deg,
        transparent 40deg,
        rgba(201, 149, 43, 0.08) 45deg,
        transparent 50deg,
        transparent 60deg,
        rgba(201, 149, 43, 0.08) 65deg,
        transparent 70deg,
        transparent 80deg,
        rgba(201, 149, 43, 0.08) 85deg,
        transparent 90deg,
        transparent 100deg,
        rgba(201, 149, 43, 0.08) 105deg,
        transparent 110deg,
        transparent 120deg,
        rgba(201, 149, 43, 0.08) 125deg,
        transparent 130deg,
        transparent 140deg,
        rgba(201, 149, 43, 0.08) 145deg,
        transparent 150deg,
        transparent 160deg,
        rgba(201, 149, 43, 0.08) 165deg,
        transparent 170deg,
        transparent 180deg,
        rgba(201, 149, 43, 0.08) 185deg,
        transparent 190deg,
        transparent 200deg,
        rgba(201, 149, 43, 0.08) 205deg,
        transparent 210deg,
        transparent 220deg,
        rgba(201, 149, 43, 0.08) 225deg,
        transparent 230deg,
        transparent 240deg,
        rgba(201, 149, 43, 0.08) 245deg,
        transparent 250deg,
        transparent 260deg,
        rgba(201, 149, 43, 0.08) 265deg,
        transparent 270deg,
        transparent 280deg,
        rgba(201, 149, 43, 0.08) 285deg,
        transparent 290deg,
        transparent 300deg,
        rgba(201, 149, 43, 0.08) 305deg,
        transparent 310deg,
        transparent 320deg,
        rgba(201, 149, 43, 0.08) 325deg,
        transparent 330deg,
        transparent 340deg,
        rgba(201, 149, 43, 0.08) 345deg,
        transparent 350deg,
        transparent 360deg
    );
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.hero-botanical-left,
.hero-botanical-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 25vw;
    z-index: 2;
    opacity: 0.6;
}

.hero-botanical-left {
    left: -5vw;
}

.hero-botanical-right {
    right: -5vw;
}

.botanical-panel-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Botanical SVG grow animation */
.botanical-grow path,
.botanical-grow circle {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.2s ease-out;
}

.botanical-grow.animated path,
.botanical-grow.animated circle {
    stroke-dashoffset: 0;
}

/* --- Hero Medallion --- */
.hero-medallion {
    position: relative;
    width: clamp(320px, 50vw, 600px);
    height: clamp(320px, 50vw, 600px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.medallion-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--aged-amber);
}

.medallion-ring-outer {
    width: 100%;
    height: 100%;
    border-width: 1.5px;
}

.medallion-ring-inner {
    width: 90%;
    height: 90%;
    border-width: 0.5px;
    border-color: var(--sun-linen);
}

.medallion-content {
    text-align: center;
    z-index: 5;
    padding: 34px;
}

.medallion-label {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aged-amber);
    display: block;
    margin-bottom: 21px;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 10vw, 6.5rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--espresso-depth);
    line-height: 1.05;
    margin-bottom: 21px;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--dried-petal);
    letter-spacing: 0.02em;
}

/* Corner Ornaments */
.corner-ornament {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 6;
}

.corner-tl { top: 0; left: 0; }
.corner-tr { top: 0; right: 0; }
.corner-bl { bottom: 0; left: 0; }
.corner-br { bottom: 0; right: 0; }

/* Medallion breathing animation */
.hero-medallion {
    animation: medallion-breathe 4s ease-in-out infinite;
}

@keyframes medallion-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* --- Chevron Dividers --- */
.chevron-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 50;
}

.chevron-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- ACT II: Cascading Panels --- */
#act-ii {
    background: var(--honeyed-cream);
    padding: 89px 0 144px;
    min-height: 200vh;
}

.act-label {
    text-align: center;
    padding: 55px 0 34px;
}

.act-number {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 5rem);
    letter-spacing: 0.08em;
    color: var(--aged-amber);
    display: block;
    opacity: 0.3;
}

.act-name {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--burnished-walnut);
    display: block;
    margin-top: 8px;
}

/* Cascade container: asymmetric left-heavy margins */
.cascade-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 34px 2vw 34px 8vw;
}

/* Individual cascade panels */
.cascade-panel {
    position: relative;
    margin-bottom: 89px;
    background: var(--warm-parchment);
    padding: 55px;
    max-width: 680px;
    overflow: hidden;
}

.cascade-panel:nth-child(odd) {
    margin-left: 0;
    transform: rotate(-2deg);
    transition: transform 0.4s ease;
}

.cascade-panel:nth-child(even) {
    margin-left: auto;
    transform: rotate(2deg);
    transition: transform 0.4s ease;
}

.cascade-panel:hover {
    transform: rotate(0deg) !important;
}

/* Staircase offset */
.panel-2 { margin-top: -34px; }
.panel-3 { margin-top: -21px; }
.panel-4 { margin-top: -34px; }

/* Slide-reveal system */
.slide-reveal {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-reveal[data-direction="left"] {
    transform: translateX(-80px) rotate(-2deg);
}

.slide-reveal[data-direction="right"] {
    transform: translateX(80px) rotate(2deg);
}

.slide-reveal[data-direction="bottom"] {
    transform: translateY(60px);
}

.slide-reveal.revealed {
    opacity: 1;
}

.slide-reveal.revealed[data-direction="left"] {
    transform: translateX(0) rotate(-2deg);
}

.slide-reveal.revealed[data-direction="right"] {
    transform: translateX(0) rotate(2deg);
}

.slide-reveal.revealed[data-direction="bottom"] {
    transform: translateY(0);
}

/* Panel mask overlay for slide-reveal */
.panel-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--aged-amber);
    z-index: 20;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s ease-in-out 0.7s;
}

.mask-rose {
    background: var(--dried-petal);
}

.slide-reveal.revealed .panel-mask {
    transform: scaleX(0);
    transform-origin: right;
}

.panel-content {
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease 1.2s, transform 0.3s ease 1.2s;
}

.slide-reveal.revealed .panel-content {
    opacity: 1;
    transform: translateY(0);
}

/* Ziggurat borders */
.panel-ziggurat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.zig-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--aged-amber);
}

.zig-1 {
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    opacity: 0.5;
}

.zig-2 {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    opacity: 0.3;
}

.zig-3 {
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    opacity: 0.15;
}

/* Section headings */
.section-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    letter-spacing: 0.05em;
    color: var(--espresso-depth);
    margin-bottom: 21px;
    line-height: 1.2;
}

.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    color: var(--burnished-walnut);
}

.panel-corner-ornament {
    position: absolute;
    bottom: 13px;
    right: 13px;
    width: 60px;
    height: 60px;
}

/* Gold border hover on text panels */
.cascade-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    z-index: 15;
    transition: border-color 0.4s ease;
    pointer-events: none;
}

.cascade-panel:hover::before {
    border-color: var(--aged-amber);
}

/* Border runner */
.border-runner {
    width: 100%;
    height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='20' viewBox='0 0 120 20'%3E%3Cpath d='M0,10 Q15,2 30,10 Q45,18 60,10 Q75,2 90,10 Q105,18 120,10' fill='none' stroke='%23C9952B' stroke-width='0.8'/%3E%3Ccircle cx='30' cy='10' r='2' fill='none' stroke='%23B87B6A' stroke-width='0.6'/%3E%3Ccircle cx='90' cy='10' r='2' fill='none' stroke='%23B87B6A' stroke-width='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 120px 20px;
    animation: runner-scroll 60s linear infinite;
    margin: 34px 0;
}

@keyframes runner-scroll {
    from { background-position: 0 0; }
    to { background-position: 1200px 0; }
}

/* --- ACT III: Radial Fan --- */
#act-iii {
    background: var(--warm-parchment);
    padding: 89px 0 144px;
    min-height: 150vh;
}

.fan-container {
    position: relative;
    max-width: 1200px;
    margin: 55px auto 0;
    padding: 0 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fan-center {
    position: relative;
    margin-bottom: 55px;
}

.fan-medallion {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: medallion-breathe 4s ease-in-out infinite;
}

.wreath-svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wreath-rotate {
    animation: wreath-spin 720s linear infinite;
}

@keyframes wreath-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fan-center-label {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aged-amber);
    z-index: 5;
}

/* Fan ribs */
.fan-rib {
    position: relative;
    background: var(--honeyed-cream);
    padding: 34px 55px;
    margin-bottom: 21px;
    max-width: 580px;
    width: 100%;
    overflow: hidden;
}

.fan-rib-1 {
    transform-origin: center top;
    clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
}

.fan-rib-2 {
    transform-origin: center top;
    clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%);
}

.fan-rib-3 {
    transform-origin: center top;
    clip-path: polygon(2% 0%, 98% 0%, 100% 100%, 0% 100%);
}

.fan-rib-4 {
    transform-origin: center top;
    clip-path: polygon(1% 0%, 99% 0%, 100% 100%, 0% 100%);
}

.fan-rib-5 {
    transform-origin: center top;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.fan-rib-content {
    position: relative;
    z-index: 10;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease 1.1s, transform 0.3s ease 1.1s;
}

.slide-reveal.revealed .fan-rib-content {
    opacity: 1;
    transform: translateY(0);
}

.fan-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 0.05em;
    color: var(--espresso-depth);
    margin-bottom: 13px;
}

.fan-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    color: var(--burnished-walnut);
}

/* Fan rib hover */
.fan-rib::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    z-index: 15;
    transition: border-color 0.4s ease;
    pointer-events: none;
}

.fan-rib:hover::before {
    border-color: var(--aged-amber);
}

/* --- FINALE --- */
#finale {
    background: var(--honeyed-cream);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 89px 5vw;
}

.finale-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.finale-medallion {
    position: relative;
    width: clamp(340px, 55vw, 600px);
    height: clamp(340px, 55vw, 600px);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: medallion-breathe 4s ease-in-out infinite;
}

.finale-wreath {
    position: absolute;
    width: 100%;
    height: 100%;
}

.finale-content {
    position: relative;
    text-align: center;
    z-index: 5;
    max-width: 420px;
    padding: 34px;
}

.finale-label {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aged-amber);
    display: block;
    margin-bottom: 13px;
}

.finale-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--espresso-depth);
    line-height: 1.1;
    margin-bottom: 21px;
}

.finale-divider {
    margin: 0 auto 21px;
    width: 200px;
}

.finale-divider svg {
    width: 100%;
    height: auto;
}

.finale-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.75;
    color: var(--burnished-walnut);
    font-style: italic;
}

.finale-mark {
    display: block;
    margin-top: 34px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--aged-amber);
    opacity: 0.3;
    letter-spacing: 0.08em;
}

/* Footer botanical */
.footer-botanical {
    text-align: center;
    margin-top: 55px;
}

.footer-vine {
    width: clamp(300px, 60vw, 600px);
    height: auto;
    display: block;
    margin: 0 auto 21px;
}

.footer-domain {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dried-petal);
}

/* --- Chevron Alt (for different section bg) --- */
.chevron-alt {
    position: absolute;
    bottom: 0;
}

/* --- Duotone image effect (for potential images) --- */
.duotone-container {
    position: relative;
    overflow: hidden;
}

.duotone-container img {
    width: 100%;
    display: block;
    filter: grayscale(1) contrast(1.1) sepia(0.3);
}

.duotone-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--aged-amber);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: background 0.3s ease;
}

.duotone-container:hover::after {
    background: var(--candlelit-highlight);
}

.duotone-container:hover img {
    filter: grayscale(1) contrast(1.2) sepia(0.4);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .cascade-container {
        padding: 21px 5vw;
    }

    .cascade-panel {
        padding: 34px;
        max-width: 100%;
    }

    .cascade-panel:nth-child(odd),
    .cascade-panel:nth-child(even) {
        margin-left: 0;
        transform: rotate(0deg);
    }

    .hero-botanical-left,
    .hero-botanical-right {
        display: none;
    }

    .nav-links {
        gap: 13px;
    }

    .fan-rib {
        padding: 21px 34px;
    }

    .hero-title {
        font-weight: 700;
    }

    .finale-title {
        font-weight: 700;
    }
}

@media (min-width: 1400px) {
    .cascade-container {
        padding: 34px 4vw 34px 12vw;
    }

    .hero-title {
        font-weight: 900;
    }
}