html {
    scroll-timeline: --page-scroll block;
}
body {
    color: #E2E8F0;
    background-color: #171c28;
    margin: 0;
    padding: 0;
}
h1 {
    color: #E2E8F0;
    text-align: center;
    font-family:'Courier', monospace;
}
h2 {
    color: #38BDF8;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 60px;
    font-family:'Courier New', Courier, monospace;
}
p {
    text-align: justify;
    text-indent: 40px;
    margin-bottom: 30px;
    font-family: 'Verdana';
    font-size: 10pt;
}
#splash {
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.brand-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}
.brand-text {
    font-size: 3.5rem;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
}
.spacer {
    height: 100vh;
}
.wrapper {
    max-width: 750px;
    margin: 0 auto;
    padding: 20px 0;
}
.button {
    background-color: transparent;
    color: #FF6F61;
    border: 2px solid #FF6F61;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button:hover {
    background-color: #FF6F61;
    color: #150d2c;
}
.button-row {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 45px;
}
.logo-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 60px;
}
.main-logo {
    width: 220px;
    height: auto;
}

/* styling for the cube */
[id^="logo-box"] path { 
    stroke: none !important; /* #E2E8F0 */
    fill: none !important;
    stroke-width: 3px !important;
}
/* the block/line below is for visualization only -- really the stroke: none in above block needs to be stroke: #E2E8F0 */
/* animation testing, took out #layer1-back, #layer2-back, #layer4-front, #layer5-front, */
#total-topback1, #total-topback2, #total-topback3, #total-topback4, #total-rightcorner, #total-leftcorner, #total-frontcorner1, #total-frontcorner2, #total-backcorner1, #total-backcorner2, #total-backcorner3, #total-bottomfront1, #total-bottomfront2, #total-bottomfront3, #total-bottomfront4, [id^="layer1-maze"] path, [id^="layer2-maze"] path, [id^="layer3-maze"] path, [id^="layer4-maze"] path, [id^="layer5-maze"] path {
    stroke: #E2E8F0  !important;
    stroke-width: 3px !important;
    opacity: 1;
}

/* mazesolve styling */
#layer1-mazesolve, #layer2-mazesolve, #layer3-mazesolve, #layer4-mazesolve, #layer5-mazesolve { 
    stroke: #38BDF8 !important;
    stroke-width: 3px !important;
    fill: none !important;
}

/* descent styling */
#layer1-descent, #layer2-descent, #layer3-descent, #layer4-descent, #layer5-descent { 
    stroke: #38BDF8 !important;
    stroke-width: 3px !important;
    fill: none !important;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    opacity: 0;
}

/* older version of above, was not completely working, implemented above because of that, but somehow both are required or it breaks the animations */
[id$="-mazesolve"] {
    stroke: #38BDF8 !important;
    stroke-width: 3px !important;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}
[id$="-descent"] {
    stroke: #38BDF8 !important;
    stroke-width: 3px !important;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
}

/* master pause */
/* tells all animated elements to freeze by default */
#layer1-mazesolve, #layer1-descent, #layer2-mazesolve, #layer2-descent, #layer3-mazesolve, #layer3-descent, #layer4-mazesolve, #layer4-descent, #layer5-mazesolve, #layer5-descent, [id^="layer3-maze"], [id^="layer4-maze"], [id^="layer5-maze"], [id^="layer1-maze"], [id^="layer2-maze"], #total-topback1, #total-topback2, #total-topback3, #total-bottomfront1, #total-bottomfront2, #total-bottomfront3, #total-frontcorner1, #total-backcorner2, #total-backcorner3 {
    animation-play-state: paused !important;
}

/* tells all elements to simultaneously unpause when the SVG reports it has loaded completely */
.ready #layer1-mazesolve, .ready #layer1-descent, .ready #layer2-mazesolve, .ready #layer2-descent, .ready #layer3-mazesolve, .ready #layer3-descent, .ready #layer4-mazesolve, .ready #layer4-descent, .ready #layer5-mazesolve, .ready #layer5-descent, .ready [id^="layer3-maze"], .ready [id^="layer4-maze"], .ready [id^="layer5-maze"], .ready [id^="layer1-maze"], .ready [id^="layer2-maze"], .ready #total-topback1, .ready #total-topback2, .ready #total-topback3, .ready #total-bottomfront1, .ready #total-bottomfront2, .ready #total-bottomfront3, .ready #total-frontcorner1, .ready #total-backcorner2, .ready #total-backcorner3 {
    animation-play-state: running !important;
}

/* call the maze solving animations for each layer's mazesolve and descent */
/* layer1 */
#layer1-mazesolve { animation: drawLayer1 25s infinite linear; }
#layer1-descent   { animation: drawDescent1 25s infinite linear; }
/* layer2 */
#layer2-mazesolve { animation: drawLayer2 25s infinite linear; }
#layer2-descent   { animation: drawDescent2 25s infinite linear; }
/* layer3 */
#layer3-mazesolve { animation: drawLayer3 25s infinite linear; }
#layer3-descent   { animation: drawDescent3 25s infinite linear; }
/* layer4 */
#layer4-mazesolve { animation: drawLayer4 25s infinite linear; }
#layer4-descent   { animation: drawDescent4 25s infinite linear; }
/* layer5 */
#layer5-mazesolve { animation: drawLayer5 25s infinite linear; }
#layer5-descent   { animation: drawDescent5 25s infinite linear; }


/* -- Mazesolve Keyframes (working v5, start at layer3 and end at layer2) -- */

/* Layer 3: 0% to 20% */
@keyframes drawLayer3 {
    0% { stroke-dashoffset: 300; opacity: 1; transform: translateY(0); }
    15% { stroke-dashoffset: 0; opacity: 1; transform: translateY(0); } /* solves maze */
    19.999% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-20px); } /* holds while shift occurs */
    20%, 100% { stroke-dashoffset: 300; opacity: 0; transform: translateY (0); } /* vanishes */
}

/* Layer 4: 20% to 40% */
@keyframes drawLayer4 {
    0%, 19.999% { stroke-dashoffset: 300; opacity: 0; transform: translateY(-20px); } /* hidden from 0-20 */
    20%       { stroke-dashoffset: 300; opacity: 1; transform: translateY(-20px); }
    35%      { stroke-dashoffset: 0;   opacity: 1; transform: translateY(-20px); } /* solves maze */
    39.999%      { stroke-dashoffset: 0;   opacity: 0; transform: translateY(-40px); } /* holds while shift occurs */
    40%, 100%     { stroke-dashoffset: 300; opacity: 0; transform: translateY(-20px); } /* vanishes */
}

/* Layer 5: 40% to 60% */
@keyframes drawLayer5 {
    0%, 39.999% { stroke-dashoffset: 300; opacity: 0; transform: translateY(-40px); } /* hidden from 0-40 */
    40%       { stroke-dashoffset: 300; opacity: 1; transform: translateY(-40px); }
    55%      { stroke-dashoffset: 0;   opacity: 1; transform: translateY(-40px); } /* solves maze */
    59.999%      { stroke-dashoffset: 0;   opacity: 0; transform: translateY(-60px); } /* holds while shift occurs */
    60%, 100%     { stroke-dashoffset: 300; opacity: 0; transform: translateY(-40px); } /* vanishes */
}

/* Layer 1: 60% to 80% */
@keyframes drawLayer1 {
    0%, 59.999% { stroke-dashoffset: 300; opacity: 0; transform: translateY(40px); } /* hidden from 0-60 */
    60%       { stroke-dashoffset: 300; opacity: 1; transform: translateY(40px); }
    75%      { stroke-dashoffset: 0;   opacity: 1; transform: translateY(40px); } /* solves maze */
    79.999%      { stroke-dashoffset: 0;   opacity: 0; transform: translateY(20px); } /* holds while shift occurs */
    80%, 100%     { stroke-dashoffset: 300; opacity: 0; transform: translateY(40px); } /* vanishes */
}

/* Layer 2: 80% to 100% */
@keyframes drawLayer2 {
    0%, 79.999% { stroke-dashoffset: 300; opacity: 0; transform: translateY(20px); } /* hidden from 0-80 */
    80%       { stroke-dashoffset: 300; opacity: 1; transform: translateY(20px); }
    95%      { stroke-dashoffset: 0;   opacity: 1; transform: translateY(20px); } /* solves maze */
    99.999%      { stroke-dashoffset: 0;   opacity: 0; transform: translateY(0); } /* holds while shift occurs */
    100%     { stroke-dashoffset: 300; opacity: 0; transform: translateY(20px); } /* vanishes */
}

/* --- Maze descent keyframes (v5, starting at layer3 and ending at layer2) --- */

/* Layer 3: 0% to 20% */
@keyframes drawDescent3 {
    0%, 15%  { stroke-dashoffset: 20; opacity: 0; transform: translateY(0); } /* Hidden while solving */
    15.001%  { opacity: 1; transform: translateY(0);} /* Reveals right as shift starts */
    19.999%      { stroke-dashoffset: 0; opacity: 1; transform: translateY(-20px); }  /* Finishes drawing downward */
    20%, 100%     { stroke-dashoffset: 20; opacity: 0; transform: translateY(0); } /* Resets for next loop */
}

/* Layer 4: 20% to 40% */
@keyframes drawDescent4 {
    0%, 35%  { stroke-dashoffset: 20; opacity: 0; transform: translateY(-20px); } /* Hidden while solving */
    35.001%  { opacity: 1; transform: translateY(-20px); } /* Reveals right as shift starts */
    39.999%      { stroke-dashoffset: 0; opacity: 1; transform: translateY(-40px); }  /* Finishes drawing downward */
    40%, 100%     { stroke-dashoffset: 20; opacity: 0; transform: translateY(-20px); } /* Resets for next loop */
}

/* Layer 5: 40% to 60% */
@keyframes drawDescent5 {
    0%, 55%  { stroke-dashoffset: 20; opacity: 0; transform: translateY(-40px); } /* Hidden while solving */
    55.001%  { opacity: 1; transform: translateY(-40px); } /* Reveals right as shift starts */
    59.999%      { stroke-dashoffset: 0; opacity: 1; transform: translateY(-60px); }  /* Finishes drawing downward */
    60%, 100%     { stroke-dashoffset: 20; opacity: 0; transform: translateY(-40px); } /* Resets for next loop */
}

/* Layer 1: 60% to 80% */
@keyframes drawDescent1 {
    0%, 75%  { stroke-dashoffset: 20; opacity: 0; transform: translateY(40px); } /* Hidden while solving */
    75.001%  { opacity: 1; transform: translateY(40px); } /* Reveals right as shift starts */
    79.999%      { stroke-dashoffset: 0; opacity: 1; transform: translateY(20px); }  /* Finishes drawing downward */
    80%, 100%     { stroke-dashoffset: 20; opacity: 0; transform: translateY(40px); } /* Resets for next loop */
}

/* Layer 2: 80% to 100% */
@keyframes drawDescent2 {
    0%, 95%  { stroke-dashoffset: 20; opacity: 0; transform: translateY(20px); } /* Hidden while solving */
    95.001%  { opacity: 1; transform: translateY(20px); } /* Reveals right as shift starts */
    99.999%      { stroke-dashoffset: 0; opacity: 1; transform: translateY(0); }  /* Finishes drawing downward */
    100%     { stroke-dashoffset: 20; opacity: 0; transform: translateY(20px); } /* Resets for next loop */
}


/* --- Maze Shifting Keyframes (working v5) --- */

[id^="layer3-maze"] { animation: shiftLayer3 25s infinite linear; }
[id^="layer4-maze"] { animation: shiftLayer4 25s infinite linear; }
[id^="layer5-maze"] { animation: shiftLayer5 25s infinite linear; }
[id^="layer1-maze"] { animation: shiftLayer1 25s infinite linear; }
[id^="layer2-maze"] { animation: shiftLayer2 25s infinite linear; }

/* Layer 3: 0% to 20% */
@keyframes shiftLayer3 {
    0%, 15%     { transform: translateY(0); opacity: 1; } /* hold while mazesolve plays */
    19.999%, 35% { transform: translateY(-20px); opacity: 0; } /* shifts upward and fades out */
    39.999%, 95% { transform: translateY(20px); opacity: 0; } /* shifts to position to fade in from */
    99.998%, 99.999% { transform: translateY(0); opacity: 1; } /* steps up to middle and fades in */
    100% { opacity: 1; } /* ends loop at start position */
}

/* Layer 4: 20% to 40% */
@keyframes shiftLayer4 {
    0%, 15%     { transform: translateY(0); opacity: 0; } /* shifts to position to fade in from */
    19.999%, 35% { transform: translateY(-20px); opacity: 1; } /* steps up to middle and fades in */
    39.999%, 40% { transform: translateY(-40px); opacity: 0; } /* shifts upward and fades out */
    40.001%, 100% { opacity: 0; } /* ends as invisible */
}

/* Layer 5: 40% to 60% */
@keyframes shiftLayer5 {
    0%, 35%     { transform: translateY(-20px); opacity: 0; } /* shifts to position to fade in from */
    39.999%, 55% { transform: translateY(-40px); opacity: 1; } /* steps up to middle and fades in */
    59.999%, 60% { transform: translateY(-60px); opacity: 0; } /* shifts upward and fades out */
    60.001%, 100% { opacity: 0; } /* ends as invisible */
}

/* Layer 1: 60% to 80% */
@keyframes shiftLayer1 {
    0%, 55%     { transform: translateY(60px); opacity: 0; } /* shifts to position to fade in from */
    59.999%, 75% { transform: translateY(40px); opacity: 1; } /* steps up to middle and fades in */
    79.999%, 80% { transform: translateY(20px); opacity: 0; } /* shifts upward and fades out */
    80.001%, 100% { opacity: 0; } /* ends as invisible */
}

/* Layer 2: 80% to 100% */
@keyframes shiftLayer2 {
    0%, 75%     { transform: translateY(40px); opacity: 0; } /* shifts to position to fade in from */
    79.999%, 95% { transform: translateY(20px); opacity: 1; } /* steps up to middle and fades in */
    99.997%, 99.998% { transform: translateY(0); opacity: 0; } /* shifts upward and fades out */
    99.999%, 100% { opacity: 0; } /* ends as invisible */
}


/* --- Cube Shifting Keyframes --- */

/* above the maze layer */

#total-topback1 { animation: shiftTopBack1 5s infinite linear; }

@keyframes shiftTopBack1 {
    0% { transform: translateY(60px); opacity: 0; } /* sits in start position, as layer4's top back line, invisible */
    75% { transform: translateY(60px); opacity: 0; } /* sits in start position */
    100% { transform: translateY(40px); opacity: 1; } /* raises 20px for the box shift and fades in as layer3's top back line */
}

#total-topback2 { animation: shiftTopBack2 5s infinite linear; }

@keyframes shiftTopBack2 {
    0% { transform: translateY(20px); } /* sits in start position, as layer2's top back line */
    75% { transform: translateY(20px); } /* sits in start position */
    100% { transform: translateY(0); } /* raises 20px for the box shift, becomes top back line of cube */
}

#total-topback3 { animation: shiftTopBack3 5s infinite linear; }

@keyframes shiftTopBack3 {
    0% { transform: translateY(40px); } /* sits in start position, as layer3's top back line */
    75% { transform: translateY(40px); } /* sits in start position */
    100% { transform: translateY(20px); } /* raises 20px for the box shift, becomes layer2's top back line */
}

/* below the maze layer */

#total-bottomfront1 { animation: shiftBottomFront1 5s infinite linear; }

@keyframes shiftBottomFront1 {
    0% { transform: translateY(-40px); opacity: 1; } /* sits in start position, as layer4's top front line, visible*/
    75% { transform: translateY(-40px); opacity: 1; } /* sits in start position */
    100% { transform: translateY(-60px); opacity: 0; } /* raises 20px for the box shift, fades out, becomes layer3's top front line */
}

#total-bottomfront2 { animation: shiftBottomFront2 5s infinite linear; }

@keyframes shiftBottomFront2 {
    0% { transform: translateY(-20px); opacity: 1; } /* sits in start position, as layer5's top front line */
    75% { transform: translateY(-20px); opacity: 1; } /* sits in start position */
    100% { transform: translateY(-40px); opacity: 1; } /* raises 20px for the box shift, becomes layer4's top front line */
}

#total-bottomfront3 { animation: shiftBottomFront3 5s infinite linear; }

@keyframes shiftBottomFront3 {
    0% { transform: translateY(0); opacity: 1; } /* sits in start position, as the bottom front line of cube */
    75% { transform: translateY(0); opacity: 1; } /* sits in start position */
    100% { transform: translateY(-20px); opacity: 1; } /* raises 20px for the box shift, becomes layer5's top front line */
}

/* the front and back corners animation */

#total-frontcorner1 { animation: shiftFrontCorner 5s infinite linear; }

@keyframes shiftFrontCorner {
    0% {transform: translateY(20px); opacity: 1; }
    75% { transform: translateY(20px); opacity: 1; }
    100% { transform: translateY(0); opacity: 0; }
}

#total-backcorner2 { animation: shiftBackCorner 5s infinite linear; }

@keyframes shiftBackCorner {
    0% { transform: translateY(20px); opacity: 1; }
    75% { transform: translateY(20px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

#total-backcorner3 { animation: fadeBackCorner 5s infinite linear; }

@keyframes fadeBackCorner {
    0% { transform: translateY(20px);opacity: 0; }
    75% { transform: translateY(20px);opacity: 0; }
    100% { transform: translateY(20px);opacity: 1; }
}