/* =============================================
   historical.quest — Cabinet of Curiosities
   ============================================= */

:root {
    --primary-ground: #1B3A2D;
    --moss-shadow: #0F2218;
    --surface: #F5ECD7;
    --surface-alt: #EDE0C8;
    --ink-dark: #2C1810;
    --pale-sage: #C8D9C4;
    --vermillion: #C4462A;
    --manuscript-gold: #B8860B;
    --explorer-teal: #2A7B6F;
    --curve-green: #234A3A;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
    --font-accent: 'Caveat', cursive;

    --grid-gap: 16px;
    --grid-margin: 48px;
    --cell-padding: clamp(16px, 3vw, 32px);
    --border-width: 2px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--primary-ground);
    color: var(--pale-sage);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    /* Subtle flowing curves background pattern */
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,200 C100,150 200,250 400,200' fill='none' stroke='%23234A3A' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M0,100 C150,50 250,150 400,100' fill='none' stroke='%23234A3A' stroke-width='0.8' opacity='0.2'/%3E%3Cpath d='M0,300 C100,350 300,250 400,300' fill='none' stroke='%23234A3A' stroke-width='0.8' opacity='0.2'/%3E%3C/svg%3E");
    background-size: 400px 400px;
}

/* Caveat font utility */
.caveat {
    font-family: var(--font-accent);
}

/* =============================================
   SCROLLSPY NAVIGATION
   ============================================= */

.scrollspy {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.scrollspy-cell {
    width: 24px;
    height: 16px;
    border: 1px solid var(--pale-sage);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.4s;
}

.scrollspy-cell.active {
    background-color: var(--explorer-teal);
    opacity: 1;
}

.scrollspy-cell:hover {
    opacity: 0.8;
}

/* Mobile Progress Bar */
.mobile-progress {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(27, 58, 45, 0.5);
    z-index: 100;
}

.mobile-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--explorer-teal);
    transition: width 0.15s ease-out;
}

@media (max-width: 1024px) {
    .scrollspy { display: none; }
    .mobile-progress { display: block; }
}

/* =============================================
   ENTRY HALL
   ============================================= */

.entry-hall {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.entry-hall-content {
    text-align: center;
}

.entry-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    color: var(--surface);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease-out 0.3s forwards;
}

.keyhole-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.keyhole-svg {
    width: 80px;
    height: auto;
}

.keyhole-svg .draw-path,
.keyhole-circle,
.keyhole-shaft,
.keyhole-ward1,
.keyhole-ward2,
.keyhole-inner {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawStroke 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

.entry-annotation {
    font-family: var(--font-accent);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--pale-sage);
    opacity: 0;
    animation: fadeIn 0.8s ease-out 2s forwards, bobbing 3s ease-in-out 2.8s infinite;
}

.entry-hint {
    position: absolute;
    bottom: 40px;
    opacity: 0;
    animation: fadeIn 0.8s ease-out 2.6s forwards, bobbing 2s ease-in-out 3.4s infinite;
}

.scroll-arrow {
    display: block;
}

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes bobbing {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

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

/* =============================================
   INTERSTITIAL VINES
   ============================================= */

.interstitial {
    width: 100%;
    padding: 0 var(--grid-margin);
    overflow: hidden;
}

.vine-svg {
    width: 100%;
    height: 80px;
    display: block;
}

.vine-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vine-leaf {
    opacity: 0;
    transition: opacity 0.5s ease-out 1.5s;
}

.interstitial.visible .vine-path {
    stroke-dashoffset: 0;
}

.interstitial.visible .vine-leaf {
    opacity: 1;
}

/* =============================================
   MODULE TITLES
   ============================================= */

.module-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    color: var(--surface);
    text-align: center;
    padding: 3rem var(--grid-margin) 2rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.module-title-text {
    position: relative;
    display: inline-block;
}

.module-title-text::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--manuscript-gold);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-module.visible .module-title-text::after {
    width: 100%;
}

/* =============================================
   BENTO GRID SYSTEM
   ============================================= */

.bento-grid {
    display: grid;
    gap: var(--grid-gap);
    padding: 0 var(--grid-margin);
    margin: 0 auto;
    max-width: 1200px;
}

/* Map Room Grid */
.bento-grid-map {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "hero hero hero hero hero hero comp comp comp time time time"
        "hero hero hero hero hero hero comp comp comp time time time"
        "quot quot quot hgls hgls hgls hgls sext sext sext sext sext"
        "quot quot quot hgls hgls hgls hgls sext sext sext sext sext";
}

.cell-map-hero { grid-area: hero; }
.cell-compass { grid-area: comp; }
.cell-timeline { grid-area: time; }
.cell-quote { grid-area: quot; }
.cell-hourglass { grid-area: hgls; }
.cell-sextant { grid-area: sext; }

/* Botanical Wing Grid */
.bento-grid-botanical {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "fern fern fern fern fern fern spec spec spec nome nome nome"
        "fern fern fern fern fern fern spec spec spec nome nome nome"
        "anno anno anno anno leaf leaf leaf leaf leaf leaf leaf leaf";
}

.cell-fern-hero { grid-area: fern; }
.cell-specimen-1 { grid-area: spec; }
.cell-nomenclature { grid-area: nome; }
.cell-specimen-2 { grid-area: leaf; }
.cell-annotation { grid-area: anno; }

/* Archive Grid */
.bento-grid-archive {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "manu manu manu manu manu manu seal seal seal call call call"
        "manu manu manu manu manu manu seal seal seal call call call"
        "quil quil quil quil scrl scrl scrl scrl scrl scrl scrl scrl";
}

.cell-manuscript-hero { grid-area: manu; }
.cell-seal { grid-area: seal; }
.cell-calligraphy { grid-area: call; }
.cell-quill { grid-area: quil; }
.cell-scroll { grid-area: scrl; }

/* Observatory Grid */
.bento-grid-observatory {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "star star star star star star star star tele tele tele tele"
        "star star star star star star star star tele tele tele tele"
        "cels cels cels cels wind wind wind wind cloq cloq cloq cloq";
}

.cell-starchart-hero { grid-area: star; }
.cell-telescope { grid-area: tele; }
.cell-celestial-text { grid-area: cels; }
.cell-windrose { grid-area: wind; }
.cell-closing-quote { grid-area: cloq; }

/* =============================================
   BENTO CELL BASE STYLES
   ============================================= */

.bento-cell {
    background: var(--surface);
    padding: var(--cell-padding);
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-hero {
    min-height: 350px;
}

.cell-content {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* =============================================
   ANIMATED BORDERS
   ============================================= */

.bento-cell::before,
.bento-cell::after {
    content: '';
    position: absolute;
    background: var(--primary-ground);
    z-index: 2;
}

/* Top and bottom borders */
.bento-cell::before {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--border-width);
    background: var(--primary-ground);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-cell::after {
    bottom: 0;
    right: 0;
    width: 100%;
    height: var(--border-width);
    background: var(--primary-ground);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

/* Side borders via inner pseudo element wrapper */
.bento-cell .cell-content::before,
.bento-cell .cell-content::after {
    content: '';
    position: absolute;
    background: var(--primary-ground);
    z-index: 2;
}

.bento-cell .cell-content::before {
    top: 0;
    right: calc(-1 * var(--cell-padding));
    width: var(--border-width);
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
}

.bento-cell .cell-content::after {
    top: 0;
    left: calc(-1 * var(--cell-padding));
    width: var(--border-width);
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}

/* Animate borders on visibility */
.bento-cell.visible::before {
    transform: scaleX(1);
}

.bento-cell.visible::after {
    transform: scaleX(1);
}

.bento-cell.visible .cell-content::before {
    transform: scaleY(1);
}

.bento-cell.visible .cell-content::after {
    transform: scaleY(1);
}

/* Corner flourishes */
.bento-cell.visible {
    box-shadow:
        inset 8px 8px 0 -5px var(--manuscript-gold),
        inset -8px -8px 0 -5px var(--manuscript-gold),
        inset 8px -8px 0 -5px var(--manuscript-gold),
        inset -8px 8px 0 -5px var(--manuscript-gold);
    transition: box-shadow 0.3s ease-out 0.8s;
}

/* Archive cells use gold borders */
.archive-cell::before,
.archive-cell::after {
    background: var(--manuscript-gold);
}

.archive-cell .cell-content::before,
.archive-cell .cell-content::after {
    background: var(--manuscript-gold);
}

.archive-cell {
    background: var(--surface-alt);
}

/* Observatory cells */
.observatory-cell {
    background: var(--moss-shadow);
    color: var(--pale-sage);
}

.observatory-cell::before,
.observatory-cell::after {
    background: var(--pale-sage);
}

.observatory-cell .cell-content::before,
.observatory-cell .cell-content::after {
    background: var(--pale-sage);
}

/* =============================================
   CELL TYPOGRAPHY
   ============================================= */

.cell-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    color: var(--ink-dark);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.cell-caption {
    font-size: clamp(0.9rem, 1.4vw, 1.2rem);
    color: var(--manuscript-gold);
    margin-top: 0.75rem;
}

.specimen-label {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink-dark);
    margin-top: 0.5rem;
}

/* =============================================
   ILLUSTRATIONS
   ============================================= */

.illustration {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.illustration .draw-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.illustration .crosshatch {
    opacity: 0;
    transition: opacity 0.4s ease-out 1.5s;
}

.bento-cell.visible .illustration .draw-path {
    stroke-dashoffset: 0;
}

.bento-cell.visible .illustration .crosshatch {
    opacity: 1;
}

/* Subtle breathing animation on completed illustrations */
.bento-cell.visible .illustration {
    animation: breathing 6s ease-in-out 2s infinite;
}

@keyframes breathing {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.008); }
}

/* Compass spin */
.compass-svg {
    max-width: 160px;
}

.compass-label {
    font-family: var(--font-display);
    font-weight: 700;
}

/* Map illustration */
.map-illustration {
    max-width: 100%;
    max-height: 300px;
}

/* Star chart */
.starchart-svg {
    max-width: 100%;
    max-height: 350px;
}

.star-point {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    filter: drop-shadow(0 0 3px rgba(200, 217, 196, 0.6));
}

.bento-cell.visible .star-point {
    opacity: 1;
    animation: starTwinkle 4s ease-in-out infinite;
}

.bento-cell.visible .star-point:nth-child(odd) {
    animation-delay: 1s;
}

.bento-cell.visible .star-point:nth-child(3n) {
    animation-delay: 2s;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Fern */
.fern-svg {
    max-height: 450px;
}

/* Hourglass */
.hourglass-svg {
    max-width: 100px;
}

/* Sand particles falling animation */
.sand-particle {
    animation: sandFall 2s ease-in infinite;
}

.sand-particle:nth-child(1) { animation-delay: 0s; }
.sand-particle:nth-child(2) { animation-delay: 0.3s; }
.sand-particle:nth-child(3) { animation-delay: 0.6s; }
.sand-particle:nth-child(4) { animation-delay: 0.9s; }
.sand-particle:nth-child(5) { animation-delay: 1.2s; }

@keyframes sandFall {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(30px); opacity: 0; }
}

/* =============================================
   MAP ROOM SPECIFICS
   ============================================= */

.cell-map-hero .cell-content {
    text-align: center;
}

.cell-timeline .cell-content {
    text-align: left;
}

.timeline-strip {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline-event {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--explorer-teal);
}

.timeline-date {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: var(--vermillion);
    font-weight: 700;
    white-space: nowrap;
}

.timeline-label {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: var(--ink-dark);
    line-height: 1.4;
}

.bento-quote {
    padding: 1rem;
}

.bento-quote p {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    line-height: 1.5;
    color: var(--ink-dark);
}

/* =============================================
   BOTANICAL WING SPECIFICS
   ============================================= */

.nomenclature-text {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: var(--ink-dark);
    margin-bottom: 0.25rem;
}

.nomenclature-common {
    font-family: var(--font-accent);
    font-size: 1.1rem;
    color: var(--manuscript-gold);
    margin-bottom: 1rem;
}

.nomenclature-desc {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.7;
    color: var(--ink-dark);
}

.cell-nomenclature .cell-content {
    text-align: left;
}

.annotation-arrow {
    margin-bottom: 0.5rem;
}

.annotation-text {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: var(--ink-dark);
    line-height: 1.5;
    text-align: left;
}

.cell-annotation {
    display: flex;
    align-items: flex-start;
}

.cell-annotation .cell-content {
    text-align: left;
}

/* =============================================
   ARCHIVE SPECIFICS
   ============================================= */

.manuscript-page {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.drop-cap-section {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: var(--ink-dark);
    margin-bottom: 1rem;
}

.drop-cap {
    font-family: var(--font-display);
    font-weight: 900;
    float: left;
    font-size: 4em;
    line-height: 0.8;
    padding-right: 0.1em;
    color: var(--vermillion);
    text-shadow: 2px 2px 0 rgba(184, 134, 11, 0.2);
}

.manuscript-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: var(--ink-dark);
    text-indent: 1.5em;
}

.seal-svg {
    max-width: 140px;
}

.calligraphy-samples {
    text-align: left;
}

.calligraphy-item {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.5;
    color: var(--ink-dark);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(44, 24, 16, 0.1);
}

.calligraphy-era {
    display: inline-block;
    min-width: 80px;
    color: var(--vermillion);
    font-weight: 700;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.cell-calligraphy .cell-content {
    text-align: left;
}

.quill-svg {
    max-width: 140px;
}

.scroll-svg {
    max-width: 180px;
}

/* =============================================
   OBSERVATORY SPECIFICS
   ============================================= */

.the-observatory {
    background: linear-gradient(180deg, var(--primary-ground) 0%, var(--moss-shadow) 100%);
}

.observatory-heading {
    color: var(--pale-sage);
}

.observatory-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: var(--pale-sage);
}

.observatory-caption {
    color: var(--pale-sage);
    opacity: 0.8;
}

.observatory-cell .illustration .draw-path {
    filter: drop-shadow(0 0 2px rgba(200, 217, 196, 0.3));
}

.observatory-quote p {
    color: var(--pale-sage);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    line-height: 1.5;
}

.observatory-cite {
    display: block;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--pale-sage);
    opacity: 0.7;
    text-align: right;
    margin-top: 0.75rem;
}

.cell-celestial-text .cell-content {
    text-align: left;
}

.telescope-svg {
    max-width: 150px;
}

.windrose-svg {
    max-width: 160px;
}

/* =============================================
   COLOPHON / FOOTER
   ============================================= */

.colophon {
    text-align: center;
    padding: 4rem 2rem 6rem;
    background: var(--moss-shadow);
}

.colophon-vine {
    margin-bottom: 2rem;
}

.colophon-vine svg {
    display: block;
    margin: 0 auto;
}

.colophon-text {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: var(--pale-sage);
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.colophon-domain {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--manuscript-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* =============================================
   TABLET RESPONSIVE (below 1024px)
   ============================================= */

@media (max-width: 1024px) {
    :root {
        --grid-margin: 24px;
    }

    .bento-grid-map {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "hero hero hero hero hero hero"
            "hero hero hero hero hero hero"
            "comp comp comp time time time"
            "quot quot quot hgls hgls hgls"
            "sext sext sext sext sext sext";
    }

    .bento-grid-botanical {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "fern fern fern fern fern fern"
            "fern fern fern fern fern fern"
            "spec spec spec nome nome nome"
            "leaf leaf leaf leaf leaf leaf"
            "anno anno anno anno anno anno";
    }

    .bento-grid-archive {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "manu manu manu manu manu manu"
            "manu manu manu manu manu manu"
            "seal seal seal call call call"
            "quil quil quil scrl scrl scrl";
    }

    .bento-grid-observatory {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "star star star star star star"
            "star star star star star star"
            "tele tele tele cels cels cels"
            "wind wind wind cloq cloq cloq";
    }
}

/* =============================================
   MOBILE RESPONSIVE (below 640px)
   ============================================= */

@media (max-width: 640px) {
    :root {
        --grid-margin: 16px;
        --grid-gap: 12px;
    }

    .bento-grid-map,
    .bento-grid-botanical,
    .bento-grid-archive,
    .bento-grid-observatory {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .bento-grid-map > *,
    .bento-grid-botanical > *,
    .bento-grid-archive > *,
    .bento-grid-observatory > * {
        grid-area: auto;
    }

    .bento-cell {
        min-height: 180px;
    }

    .bento-hero {
        min-height: 280px;
    }

    /* Maintain unique aspect ratios for rhythm */
    .cell-compass { padding-bottom: 80%; }
    .cell-quote { padding-bottom: 40%; }
    .cell-timeline { padding-bottom: 60%; }
    .cell-seal { padding-bottom: 80%; }
    .cell-annotation { padding-bottom: 30%; }

    .entry-title {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .module-title {
        padding: 2rem var(--grid-margin) 1.5rem;
    }
}

/* =============================================
   REDUCED MOTION
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    .entry-title {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .entry-annotation {
        animation: none;
        opacity: 1;
    }

    .entry-hint {
        animation: none;
        opacity: 1;
    }

    .keyhole-svg .draw-path,
    .keyhole-circle,
    .keyhole-shaft,
    .keyhole-ward1,
    .keyhole-ward2,
    .keyhole-inner {
        animation: none;
        stroke-dashoffset: 0;
    }

    .illustration .draw-path {
        stroke-dashoffset: 0;
        transition: none;
    }

    .vine-path {
        stroke-dashoffset: 0;
        transition: none;
    }

    .vine-leaf {
        opacity: 1;
        transition: none;
    }

    .bento-cell.visible .illustration {
        animation: none;
    }

    .sand-particle {
        animation: none;
    }

    .star-point {
        opacity: 1;
        animation: none;
    }

    .bento-cell::before,
    .bento-cell::after,
    .bento-cell .cell-content::before,
    .bento-cell .cell-content::after {
        transform: scaleX(1);
        transform: scaleY(1);
        transition: none;
    }

    .module-title-text::after {
        width: 100%;
        transition: none;
    }
}