@import url('https://fonts.cdnfonts.com/css/lcd');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* Container styles */
body{
    --_refl:#f3eeef;

    --_bloom:#ffdddd;
    --_y1:#ffaaaa;
    --_y2:#ff4444;

    --_o1:#ff3333;
    --_o2:#dd1111;
    --_o3:#aa0000;

    --mw1:#d0d5d7;
    
    --m1:#ff4444;
    --m2:#dd1111;
    --m3:#aa0000;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Landing page specific styles */

.landing-container {
    min-height: 100vh;
    background: var(--body-bg);
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--body-bg) 0%, var(--secondary-color) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 0, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text {
    animation: fadeInUp 1s ease;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--light-color);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.brand-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--light-color);
    margin-bottom: 1.5rem;
}

.hero-description {
    font-size: 1.2rem;
    color: var(--light-color);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-decoration: none !important;
}

.hero-btn:hover,
.hero-btn:focus,
.hero-btn:active,
.hero-btn:visited {
    text-decoration: none !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--light-color);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: var(--card-bg);
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

/* Hero Visual */
.hero-visual {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 0%;
    min-width: 0;
    height: 100vh;
    animation: fadeInRight 1s ease 0.3s both;
}

/* Shield image styling for hero section */

.hero-text {
    flex: 1 1 0%;
    min-width: 0;
}


/* Make wheel rotate more visibly */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    from { box-shadow: 0 0 30px rgba(255, 71, 87, 0.5); }
    to { box-shadow: 0 0 50px rgba(255, 71, 87, 0.8); }
}

/* Features Section */
.features-section {
    padding: 5rem 0;
    background: var(--card-bg);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--light-color);
    text-align: center;
    margin-bottom: 1rem;
}

.section-description {
    font-size: 1.2rem;
    color: var(--light-color);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card {
    background: var(--body-bg);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    text-align: center;
    height: fit-content;
}

.feature-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: 24px 24px 0 0;
}

.feature-card.classical::before {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.feature-card.modern::before {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.feature-card.hash::before {
    background: linear-gradient(135deg, #10b981, #059669);
}

.feature-card.exchange::before {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.feature-card.ai-assistant::before {
    background: linear-gradient(135deg, var(--primary-color), #ff6b6b);
}

.feature-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(255, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.feature-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: white;
    margin: 0 auto 2rem auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.feature-card.classical .feature-icon {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.feature-card.modern .feature-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.feature-card.hash .feature-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.feature-card.exchange .feature-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.feature-card.ai-assistant .feature-icon {
    background: linear-gradient(135deg, var(--primary-color), #ff6b6b);
}

.feature-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--light-color);
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

.feature-card p {
    color: var(--light-color);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.feature-list {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 280px;
    margin: 0 auto;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--light-color);
    margin-bottom: 0.8rem;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.3rem 0;
}

.feature-list li a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
    flex: 1;
}

.feature-list li a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.feature-list i {
    color: var(--primary-color);
    font-size: 0.9rem;
    min-width: 16px;
}

/* Why Section */
.why-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--body-bg) 0%, var(--secondary-color) 100%);
}

.why-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.why-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--light-color);
    margin-bottom: 2rem;
}

.why-features {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.why-item {
    display: flex;
    gap: 1.5rem;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
}

.why-item.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.why-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.why-details h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--light-color);
    margin-bottom: 0.5rem;
}

.why-details p {
    color: var(--text-muted);
    line-height: 1.6;
}

.why-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.security-layers {
    position: relative;
    width: 300px;
    height: 300px;
}

.layer {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    animation: pulse 3s ease-in-out infinite;
}

.layer-1 {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.layer-2 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(255, 51, 51, 0.3));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation-delay: 1s;
}

.layer-3 {
    width: 280px;
    height: 280px;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), rgba(255, 51, 51, 0.1));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation-delay: 2s;
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.8; }
}

/* CTA Section */
.cta-section {
    padding: 5rem 0;
    background: var(--card-bg);
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--light-color);
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.cta-btn:hover,
.cta-btn:focus,
.cta-btn:active,
.cta-btn:visited {
    text-decoration: none !important;
}

/* Hero Badges */
.hero-badges {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.badge {
    background: rgba(255, 71, 87, 0.1);
  max-width: 55%;
    color: #ff4757;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.badge:hover {
    background: rgba(255, 71, 87, 0.2);
    transform: translateY(-2px);
}

/* Floating Elements */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.floating-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 71, 87, 0.1);
    border: 2px solid rgba(255, 71, 87, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4757;
    font-size: 1.2rem;
    animation: float 3s ease-in-out infinite;
}

.floating-icon-1 {
    left: 20%;
    top: 10%;
    animation-delay: 0s;
}

.floating-icon-2 {
    left: 80%;
    top: 20%;
    animation-delay: 1s;
}

.floating-icon-3 {
    left: 15%;
    top: 80%;
    animation-delay: 2s;
}

.floating-icon-4 {
    left: 85%;
    top: 75%;
    animation-delay: 0.5s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Enhanced wheel animations */
.cipher-wheel:hover .wheel-outer {
    animation-duration: 5s;
}

.cipher-wheel:hover .wheel-inner {
    animation-duration: 1s;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Remove underlines from navigation auth buttons */
.auth-buttons .btn {
    text-decoration: none !important;
}

.auth-buttons .btn:hover,
.auth-buttons .btn:focus,
.auth-buttons .btn:active,
.auth-buttons .btn:visited {
    text-decoration: none !important;
}

/* Ensure all buttons have no underlines */
.btn {
    text-decoration: none !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:visited {
    text-decoration: none !important;
}

/* Typewriter Animation */
.cursor {
    display: inline-block;
    animation: blink 1s infinite;
    font-weight: 100;
    font-size: 1em;
    color: var(--primary-color, #ff0000);
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Typewriter container styling */
#typewriter-text {
    min-height: 1.5em;
    min-width: 300px;
    display: inline-block;
    overflow: visible;
    white-space: nowrap;
    line-height: 1.3;
    padding-bottom: 0.2em;
}

/* Back and forth animation */
.back-forth-animation {
    animation: backAndForth 2s ease-in-out infinite;
}

@keyframes backAndForth {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-10px);
    }
}

#landingRippleContent {
            opacity: 0;
            clip-path: circle(0px at 50% 50%);
            transition: none;
        }
        #landingRippleContent.ripple-reveal {
            animation: landing-ripple-reveal 2.2s cubic-bezier(.4,0,.2,1) forwards;
        }
        @keyframes landing-ripple-reveal {
            0%   { opacity: 0; clip-path: circle(0px at 50% 50%); }
            10%  { opacity: 1; clip-path: circle(60px at 50% 50%); }
            30%  { opacity: 1; clip-path: circle(120px at 50% 50%); }
            60%  { opacity: 1; clip-path: circle(40vw at 50% 50%); }
            80%  { opacity: 1; clip-path: circle(100vw at 50% 50%); }
            100% { opacity: 1; clip-path: circle(150vw at 50% 50%); }
        }


.right-half-container {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: transparent !important;
    font-family: 'LCD', 'Orbitron', 'Courier New', monospace;
    margin: 0;
    padding-left: 150px;
}

#noise-svg {
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    z-index: 100;
    pointer-events: none;
}
#noise-rect {
    width: 100%;
    height: 100%;
}

.clock {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--_size) * 0.01); /* em hack for shade scaling */

    --_factor: min(600px, 80vh);
    --_size: min(var(--_factor), 80vw);
}
.shadow {
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 100%;
    height: 0em;
    translate: 0 45em;
    box-shadow: none;
    opacity: 0;
    opacity: 0.6;
}
.shadow::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 20em;
    width: 0;
    box-shadow: none;
    opacity: 0;
}
.shadow::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    opacity: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    height: 10em;
    width: 10em;
    border: none;
    transform: rotateX(70deg);
    box-shadow: none;
}
.clock.off .shadow {
    box-shadow: 
    0 0 4em 3em #040909,
    0 0 8em 3em var(--_o3),
    0 0 10em 4em var(--_o2),
    0 0 10em 5em var(--_o1);
    opacity: 0;
}
.outer-pipe {
    position: absolute;
    z-index: 2;
    width: calc(var(--_size) * (8/15));
    height: var(--_size);
    border-radius: 20% / 10%;
    overflow: hidden;
    opacity: 1;
    --_clip-btm: 85.8%;
    clip-path: polygon(0 0, 100% 0, 100% var(--_clip-btm), 0 var(--_clip-btm));
}
.inner-pipe {
    width: 100%;
    height: 100%;
    scale: 0.84 0.91;
    border-radius: 15% / 7%;
    box-shadow: 
    0em 104em 16em 20em #040909,
    /* light on */
    0em 1.2em 1em 0.2em var(--m3),
    0em 1.2em 1em 0.5em var(--m2),
    0em 1.2em 0.5em 1.2em var(--m1),
    0em 1.2em 1.2em 1.5em var(--m2),
    0em 1.2em 2em 2em var(--m3),
    /* ---- */
    0em 90em 16em 20em #040909,
    /* nat light */
    -1em 1em 2em 3.7em #040909,
    0.5em 0em 2em 3.7em #040909,
    0em 0em 0em 4.6em var(--mw1),
    0em 0em 0.5em 5em var(--mw1),
    /* --------- */
    0em 0em 0em 20em #040909;
}
.pipe-accents {  
    width: calc(var(--_size) * (8/15));
    height: var(--_size);
    position: absolute;
}
.pipe-accents .top-tube,
.pipe-accents .top,
.pipe-accents .topinset,
.pipe-accents .left,
.pipe-accents .right {  
    z-index: 3;
}
.pipe-accents .top-tube {
    position: absolute;
    top: 3%;
    left: 0;
    right: 0;
    margin: auto;
    width: 16%;
    height: 6%;
    background: #040909;
    background: linear-gradient(120deg, rgba(60,62,62,1) 0%, rgba(4,9,0,1) 60%);
    box-shadow: 
    inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */
    ;
    border-radius: 20%;
}
.pipe-accents .tube-holders {
    position: absolute;
    width: 26em;
    height: 70em;
    translate: 0 -7em;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}
.pipe-accents .tube-holders div{
    position: absolute;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    --_metal-1: #30241d;
    --_metal-2: #000000;
    --_metal-3: #5f5f5f;
    --_vl: -8%;
    background: conic-gradient(from 0deg at 50% 50%, 
    var(--_metal-1) 0%, 
    var(--_metal-2) 7%, 
    var(--_metal-1) 21%, 
    var(--_metal-2) 35%, 
    var(--_metal-2) 42%, 
    var(--_metal-3) 56%, 
    var(--_metal-1) 63%, 
    var(--_metal-1) 70%, 
    var(--_metal-2) 77%, 
    var(--_metal-3) 84%, 
    var(--_metal-2) 91%, 
    var(--_metal-1) 100%);
    box-shadow: 
    inset 0 0 0.1em 0.1em #ffffff5d,
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */;
}
.pipe-accents .tube-holders div:nth-child(1){ top: 12%; left: var(--_vl); rotate: -65deg;}
.pipe-accents .tube-holders div:nth-child(2){ top: 12%; right: var(--_vl); rotate: 65deg;}
.pipe-accents .tube-holders div:nth-child(3){ top: 26%; left:var(--_vl); rotate: -85deg;}
.pipe-accents .tube-holders div:nth-child(4){ top: 26%; right:var(--_vl); rotate: 85deg;}
.pipe-accents .tube-holders div:nth-child(5){ top: 78.5%; left:var(--_vl); rotate: -115deg;}
.pipe-accents .tube-holders div:nth-child(6){ top: 78.5%; right:var(--_vl); rotate: 115deg;}

.pipe-accents .top {
    position: absolute;
    top: -0.7%;
    left: 0;
    right: 0;
    margin: auto;
    width: 22%;
    height: 6%;
    background: #040909;
    background: linear-gradient(120deg, rgba(60,62,62,1) 0%, rgba(4,9,0,1) 60%);
    box-shadow: 
    inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */
    ;
    border-radius: 20%;
}
.pipe-accents .topinset {
    position: absolute;
    top: -1.7%;
    left: 0;
    right: 0;
    margin: auto;
    width: 14%;
    height: 8%;
    background: #040909;
    background: linear-gradient(120deg, rgba(60,62,62,1) 0%, rgba(4,9,0,1) 60%);
    box-shadow: 
    inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */
    ;
    border-radius: 50%;
}
.pipe-accents .topinset::before {
    content: '';
    display: block;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 
    inset 0 0 0em 0.1em #040909,
    /* light on */
    0 0 0.5em 0.1em var(--_bloom),
    inset 0 0 1.3em 0.2em var(--_o3),
    inset 0 0 1.3em 0.4em var(--_o2),
    inset 0 0 1.3em 0.6em var(--_o1),
    inset 0 0 1.3em 2em var(--_y1)
    /* -------- */;
    animation: 5s flicker linear infinite;
}
@keyframes flicker {
    0% { opacity: 1;}
    10% { opacity: 1;}
    11% { opacity: 0.8;}
    12% { opacity: 1;}
    65% { opacity: 1;}
    66% { opacity: 0.7;}
    67% { opacity: 0.9;}
    68% { opacity: 1;}
    69% { opacity: 0.4;}
    70% { opacity: 1;}
    100% { top: 1;}
}
.pipe-accents .left,
.pipe-accents .right {
    width: 100%;
    height: 100%;
    position: absolute;
}
.pipe-accents .left div,
.pipe-accents .right div{
    --_pipe-pos-x: -3%;
    position: absolute;
    margin: auto;
    width: 14%;
    height: 2.4%;
    border-radius: 0.7em;
    background: #040909;
}
.pipe-accents .left div:nth-child(1){
    top: 16%;
    left: var(--_pipe-pos-x);
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset -1em -0.5em 0.8em -0.8em var(--m3),
    inset -1em -0.5em 0.9em -0.5em var(--m2),
    inset -1em -0.5em 1em -0.3em var(--m1);
    /* -------- */
}
.pipe-accents .left div:nth-child(1)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    left: 78%;
    top: 40%;
    rotate: 5deg;
    bottom: 0;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset 1em -0.5em 0.3em -0.5em var(--m3),
    inset 1em -0.5em 0.4em -0.3em var(--m2),
    inset 1em -0.5em 0.6em -0.2em var(--m1)
    /* -------- */;
}
.pipe-accents .left div:nth-child(2){
    top: 26%;
    left: var(--_pipe-pos-x);
    border-top-right-radius: 30%;
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 30%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset -1em 0em 0.8em -0.6em var(--m3),
    inset -1em 0em 0.9em 0em var(--m2),
    inset -1em 0em 1em 0.1em var(--m1);
    /* -------- */
}
.pipe-accents .left div:nth-child(2)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    left: 78%;
    top: 0%;
    rotate: 2deg;
    bottom: 0;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset 1em -0.1em 0.3em 0em var(--m3),
    inset 1em -0.1em 0.4em 0.2em var(--m2),
    inset 1em -0.1em 0.6em -0.3em var(--m1)
    /* -------- */;
}
.pipe-accents .left div:nth-child(3){
    top: 64%;
    left: var(--_pipe-pos-x);
    border-bottom-right-radius: 40%;
    border-bottom-left-radius: 40%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset -1em 0.3em 0.8em -0.5em var(--m3),
    inset -1em 0.3em 0.9em -0.3em var(--m2),
    inset -1em 0.3em 1em 0em var(--m1);
    /* -------- */
}
.pipe-accents .left div:nth-child(3)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    left: 78%;
    top: 20%;
    rotate: -4deg;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset 1em 0.2em 0.3em -0.1em var(--m3),
    inset 1em 0.2em 0.4em 0em var(--m2),
    inset 1em 0.2em 0.6em 0.1em var(--m1)
    /* -------- */;
}
.pipe-accents .right div:nth-child(1){
    top: 16%;
    right: var(--_pipe-pos-x);
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset 1em -0.5em 0.8em -0.8em var(--m3),
    inset 1em -0.5em 0.9em -0.5em var(--m2),
    inset 1em -0.5em 1em -0.3em var(--m1);
    /* -------- */
}
.pipe-accents .right div:nth-child(1)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    right: 78%;
    top: 40%;
    rotate: -5deg;
    bottom: 0;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset -1em -0.5em 0.3em -0.5em var(--m3),
    inset -1em -0.5em 0.4em -0.3em var(--m2),
    inset -1em -0.5em 0.6em -0.2em var(--m1)
    /* -------- */;
}
.pipe-accents .right div:nth-child(2){
    top: 26%;
    right: var(--_pipe-pos-x);
    border-top-right-radius: 30%;
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 30%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset 1em 0em 0.8em -0.6em var(--m3),
    inset 1em 0em 0.9em 0em var(--m2),
    inset 1em 0em 1em 0.1em var(--m1);
    /* -------- */
}
.pipe-accents .right div:nth-child(2)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    right: 78%;
    top: 0%;
    rotate: -2deg;
    bottom: 0;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset -1em -0.1em 0.3em 0em var(--m3),
    inset -1em -0.1em 0.4em 0.2em var(--m2),
    inset -1em -0.1em 0.6em -0.3em var(--m1)
    /* -------- */;
}
.pipe-accents .right div:nth-child(3){
    top: 64%;
    right: var(--_pipe-pos-x);
    border-bottom-right-radius: 40%;
    border-bottom-left-radius: 40%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset 1em 0.3em 0.8em -0.5em var(--m3),
    inset 1em 0.3em 0.9em -0.3em var(--m2),
    inset 1em 0.3em 1em 0em var(--m1);
    /* -------- */
}
.pipe-accents .right div:nth-child(3)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    right: 78%;
    top: 20%;
    rotate: 4deg;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset -1em 0.2em 0.3em -0.1em var(--m3),
    inset -1em 0.2em 0.4em 0em var(--m2),
    inset -1em 0.2em 0.6em 0.1em var(--m1)
    /* -------- */;
}
.pipe-accents .bottom-left {
    position: absolute;
    bottom: 12%;
    left: -6%;
    width: 20%;
    height: 2.4%;
    background: #040909;
    border-radius: 40%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    box-shadow: 
    inset -0.4em -0.1em 1em -0.4em var(--mw1),
    /* light on */
    inset -2em 0em 1.8em -1.5em var(--m3),
    inset -2em 0em 1.9em -1.3em var(--m2),
    inset -2em 0em 2em -1em var(--m1)
    /* -------- */;
}
.pipe-accents .bottom-left::before {
    display: block;
    content: '';
    position: absolute;
    top: -24%;
    left: 0;
    right: 0;
    margin: auto;
    background: #040909;
    width: 90%;
    height: 70%;
    border-radius: 50%;
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
    box-shadow: 
    inset -0.4em 0em 1em -0.3em var(--mw1),
    /* light on */
    inset -2em 0em 1.8em -1.5em var(--m3),
    inset -2em 0em 1.9em -1.3em var(--m2),
    inset -2em 0em 2em -1em var(--m1)
    /* -------- */;
}
.pipe-accents .bottom-right {
    position: absolute;
    bottom: 12%;
    right: -6%;
    width: 20%;
    height: 2.4%;
    background: #040909;
    border-radius: 40%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    box-shadow: 
    inset -0.4em -0.1em 1em -0.4em var(--mw1),    
    /* light on */
    inset 2em 0em 1.8em -1.5em var(--m3),
    inset 2em 0em 1.9em -1.3em var(--m2),
    inset 2em 0em 2em -1em var(--m1)
    /* -------- */;
}
.pipe-accents .bottom-right::before {
    display: block;
    content: '';
    position: absolute;
    top: -24%;
    left: 0;
    right: 0;
    margin: auto;
    background: #040909;
    width: 90%;
    height: 70%;
    border-radius: 50%;
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
    box-shadow: 
    inset -0.4em 0em 1em -0.3em var(--mw1),    
    /* light on */
    inset 2em 0em 1.8em -1.5em var(--m3),
    inset 2em 0em 1.9em -1.3em var(--m2),
    inset 2em 0em 2em -1em var(--m1)
    /* -------- */;
}

.small-outer-pipe {
    position: absolute;
    translate: 0 -5.6%;
    width: calc(var(--_size) * (1/2.7));
    height: calc( var(--_size) * 0.87);
    border-radius: 40% / 10%;
    
    overflow: hidden;
    opacity: 1;
    --_clip-btm: 96%;
    clip-path: polygon(0 0, 100% 0, 100% var(--_clip-btm), 0 var(--_clip-btm));
    border-top: 0.3em solid var(--mw1);
}
.small-inner-pipe {
    width: 100%;
    height: 100%;
    scale: 0.92 0.98;
    border-radius: 35% / 10%;
    box-shadow: 
    0em -94em 20em 20em #040909,
    0em 104em 20em 20em #040909,
    /* light on */
    0em 1em 1em 0.2em var(--m3),
    0em 1em 1em 0.5em var(--m2),
    0em 1em 0.5em 1.2em var(--m1),
    0em 1em 1.2em 1.5em var(--m2),
    0em 1em 2em 2em var(--m3),
    /* ---- */
    /* nat light */
    -0.2em 0.5em 0.8em -0.2em var(--mw1),
    0em 90em 16em 20em #040909,
    -1em 1em 2em 2em #040909,
    0.5em 0em 2em 2em #040909,
    0em 0em 0em 4.6em var(--mw1),
    0em 0em 1.5em 5em var(--mw1),
    /* --------- */
    0em 0em 0em 20em #040909;
}

.base-container{
    position: absolute;
    width: calc(var(--_size) * (8/15));
    height: var(--_size);
    
}
.base-container .base{
    width: 100%;
    height: 100%;
    position: absolute;
}
.base-container .base div{
    background: #040909;
    position: absolute;
    bottom: 4%;
    left: -10%;
    width: 120%;
    height: 12%;
    border-radius: 40% 40% / 30% 30%;    
    box-shadow: 
    0 2em 2em -1.4em #000,
    inset -0.4em 0.1em 0.8em -0.2em var(--mw1);
}
.base-container .base div::before {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    border-radius: 100%;    
    box-shadow: 
    0 2em 10em 0 #000,
    inset -0.4em 0em 0.8em 0em var(--mw1),
    inset 0em 0em 0.5em 0.3em #040909,
    inset 0em 0em 0.5em 0.3em #040909,
    inset 0em 0em 1em 0em #040909,
    inset 0em 0em 2em 0em #040909,
    inset 0em 0em 3em 0em #040909,
    /* light on */
    inset 0em 0em 1em 0em var(--m3),
    inset 0em 0em 1em 2em var(--m2),
    inset 1em 0.3em 10em 10em var(--m1)
    /* -------- */;
}
.display {
    color: var(--_bloom);
    font-size: 14em;
    line-height: 0.8em;
    translate: 0 -0.4em;
    font-family: 'LCD', 'Orbitron', 'Courier New', monospace;
}
.display .row {
    display: flex;
}
.display .small-row {
    font-size: 0.3em;
    position: absolute;
    right: -22%;
    top: 10%;
}
.display .small-row .row {
    flex-direction: column;
    line-height: 1.02em;
}
.display .row .col {
    display: flex;
    position: relative;
}
.display .row .col > div:nth-child(1){
    opacity: 0.2;
    font-family: 'LCD', 'Orbitron', 'Courier New', monospace;
}
.display .row .col > div:nth-child(2){
    position: absolute;
    right: 0;
    z-index: 2;
    font-family: 'LCD', 'Orbitron', 'Courier New', monospace;
}
.display .row .col > div:nth-child(3){
    position: absolute;
    right: 0;
    color: var(--_bloom);
    font-family: 'LCD', 'Orbitron', 'Courier New', monospace;
    --_o1-size: 0.05em;
    --_o2-size: 0.15em;
    --_o3-size: 0.25em;
    text-shadow: 
    0em 0em 0.02em var(--_bloom),
    0em 0em 0.02em var(--_bloom),
    0em 0em var(--_o3-size) var(--_o3),
    0em 0em var(--_o3-size) var(--_o3),
    0em 0em var(--_o2-size) var(--_o2),
    0em 0em var(--_o2-size) var(--_o2),
    0em 0em var(--_o1-size) var(--_o1),
    0em 0em var(--_o1-size) var(--_o1);
}
.glass-tube {
    position: absolute;
    width: 26em;
    height: 70em;
    translate: 0 -7em;
    border-radius: 1000px;
    box-shadow: 
    /* light on */
    0em 0em 0.3em -0.1em var(--m1),
    0em 0em 0.6em -0.2em var(--m2),
    0em 0em 0.8em -0.2em var(--m2),
    inset 0em 0em 0.2em 0.1em var(--m3),
    inset 0em 0em 0.3em 0.2em var(--m2),
    inset 0em 0em 0.5em 0.3em var(--m1),
    inset 0em 0em 1em 0em var(--m2),
    inset 0em 0em 2em 0.5em var(--m3),
    /* -------- */
    inset -0.1em 0.1em 0.1em 0em var(--mw1),
    inset 0 0 0.5em 0.05em var(--mw1);
}
.glass-tube::before {
    content: "";
    display: block;
    width: 6%;
    height: 60%;
    box-shadow: 
    inset 1.5em 0em 1em -1em var(--mw1);
    position: absolute;
    left: 4%;
    top: 16%;
    filter: blur(0.6px);
    opacity: 0.8;
    border-radius: 50% 1% / 50% 100%;
}
.glass-tube::after {
    content: "";
    display: block;
    width: 30%;
    height: 60%;
    box-shadow: 
    inset -1em 0.5em 1em -1em var(--mw1);
    position: absolute;
    right: 4%;
    top: 4%;
    filter: blur(0.6px);
    opacity: 1;
    border-radius: 0% 100% / 10% 30%;
}
.hex {
    position: absolute;
    width: 17.7em;
    height: 70em;
    translate: 0 -7em;
    border-radius: 1000px;
    overflow: hidden;
    z-index: -1;
    opacity: 0.7;
    --_hex-cl1: #040909;
    --_hex-cl2: var(--_o1);
    --_hex-size: 2.18em;
    background:
    radial-gradient(circle farthest-side at 0% 50%, var(--_hex-cl1) 23.5%,rgba(240,166,17,0) 0) calc(1.06*var(--_hex-size)) calc(1.5*var(--_hex-size)),
    radial-gradient(circle farthest-side at 0% 50%, var(--_hex-cl2) 24%,rgba(240,166,17,0) 0) calc(0.94*var(--_hex-size)) calc(1.5*var(--_hex-size)),
    linear-gradient( var(--_hex-cl1) 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%, var(--_hex-cl1) 0)0 0,
    linear-gradient(150deg, var(--_hex-cl1) 24%, var(--_hex-cl2) 0, var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%, var(--_hex-cl2) 0, var(--_hex-cl2) 76%, var(--_hex-cl1) 0)0 0,
    linear-gradient(30deg, var(--_hex-cl1) 24%, var(--_hex-cl2) 0, var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%, var(--_hex-cl2) 0, var(--_hex-cl2) 76%, var(--_hex-cl1) 0)0 0,
    linear-gradient(90deg, var(--_hex-cl2) 2%, var(--_hex-cl1) 0, var(--_hex-cl1) 98%, var(--_hex-cl2) 0%)0 0  var(--_hex-cl1);
    background-size:calc(2*var(--_hex-size)) calc(3*var(--_hex-size));
}
.hex .overlay {
    position: absolute;
    background: #fff;
    mix-blend-mode: overlay;
    width: 200%;
    left: -40%;
    height: 12%;
    rotate: 40deg;
    animation: 5s electric ease-in infinite;
}
@keyframes electric {
    0% { top: 700%;}
    100% { top: -20%;}
}
.tube-base-container {
    position: absolute;
    width: 34em;
    height: 30em;
    translate: 0 24em;
}
.tube-base {
    position: absolute;
    bottom: 4%;
    width: 60%;
    height: 20%;
    background: #040909;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 80% / 40%;
    box-shadow: 
    inset 0em -0.1em 1.2em -0.4em var(--mw1),
    /* light on */
    inset 0em 3em 2.8em -2.5em var(--m3),
    inset 0em 3em 3.9em -2.3em var(--m2),
    inset 0em 3em 4em -2em var(--m1)
    /* -------- */;
}
.tube-base::before {
    display: block;
    content: '';
    width: 99%;
    height: 42%;
    background: #040909;
    border-radius: 50%;
    box-shadow: 
    inset 0em -0.1em 1.2em -0.4em var(--mw1),
    /* light on */
    inset 0em 0em 1.8em -0.5em var(--m3),
    inset 0em 0em 1.9em -0.3em var(--m2),
    inset 0em 0em 2em -0em var(--m1)
    /* -------- */;
}
.tube-btm {
    width: 40%;
    height: 10%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 34%;
    background-color: #040909;
    border-radius: 20% 20% 100% 100%;
    box-shadow: 
    inset 0em 0em 1.2em -0.2em var(--mw1),
    /* light on */
    inset 0em 0.3em 1.2em 0em var(--m1),
    inset 0em 0.3em 1.2em 0.3em var(--m2),
    inset 0em 0.3em 1.2em 0.6em var(--m3)
    /* -------- */;
}
.tube-btm::before {
    content: '';
    display: block;
    width: 60%;
    height: 40%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -158%;
    border-radius: 30% 30% 100% 100%;
    background-color: #040909;
    box-shadow: 
    inset 0em -0.1em 0.7em -0.2em var(--mw1),
    /* light on */
    inset 0em 0.1em 1em -0.7em var(--m1),
    inset 0em 0.1em 1em -0.3em var(--m2),
    inset 0em 0.1em 1em -0em var(--m3)
    /* -------- */;
}
.rods{
    width: 50%;
    height: 28%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 14%;
    --_clip-btm: 80%;
    clip-path: polygon(0 0, 100% 0, 100% var(--_clip-btm), 0 var(--_clip-btm));
}
.rods .left-rod {
    width: 60%;
    height: 12%;
    rotate: 60deg;
    position: absolute;
    bottom: 40%;
    left: 0;
    background: #040909;
}
.rods .center-rod {
    width: 30%;
    height: 12%;
    rotate: 90deg;
    position: absolute;
    bottom: 40%;
    right: 0;
    left: 0;
    margin: auto;
    background: #040909;
}
.rods .right-rod {
    width: 60%;
    height: 12%;
    rotate: -60deg;
    position: absolute;
    bottom: 40%;
    right: 0;
    background: #040909;
}
.rods .left-rod,
.rods .center-rod,
.rods .right-rod {
    box-shadow: 
    inset 0em 0.1em 0.8em -0.2em var(--mw1),
    /* light on */
    inset 0em 0.1em 1em -0.7em var(--m1),
    inset 0em 0.1em 1em -0.3em var(--m2),
    inset 0em 0.1em 1em -0em var(--m3)
    /* -------- */;
}
.wires {
    width: 100%;
    height: 100%;
    z-index: -1;
}
.wires div:nth-child(1),
.wires div:nth-child(2) {
    width: 18%;
    height: 18%;
    rotate: 25deg;
    translate: 14em -5em;
    position: absolute;
    bottom: 0;
    box-shadow: 
    inset 0em 0.1em 0.4em 0em var(--mw1),
    inset 0 0 0 0.5em #040909;
    border-radius: 0% 100% / 50% 100%;
}
.wires div:nth-child(2) {
    translate: 15em -8em;
    rotate: 122deg;
    scale: 0.7;
}

.button {
    position: absolute;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    translate: 0 43em;
    z-index: 100;
    cursor: pointer;
    background: var(--_bloom);
    box-shadow: 
    0em -0.1em 0.2em 0em var(--_o1),
    0em -0.1em 0.2em 0.1em var(--_o2),
    0em -0.1em 0.2em 0.2em var(--_o3),
    0em -0.1em 1em 0.5em var(--_bloom),
    /* light on */
    inset 0em 0em 1em 0em var(--_o3),
    inset 0em 0em 1em 0.5em var(--_o2),
    inset 0em 0em 1em 1em var(--_o1)
    /* -------- */
    ;
    filter: blur(1px);
}

.power-cord {
    z-index: -1;
    scale: 1.4 0.9;
    position: absolute;
    width: 100%;
    height: 50em;
    top: 0;
    bottom: 0;
    margin: auto;
    translate: -36em 44em;
    transform: rotateX(55deg) rotateZ(-64deg);
}
.power-cord div:nth-child(1) {
    width: 20em;
    height: 18em;
    box-shadow: 0.3em 0.3em 0.2em 0.1em rgba(255, 255, 255, 0.2);
    border-bottom: 6px solid #040909;
    border-right: 4px solid #040909;
    position: absolute;
    left: 0;
    right: 0;
    translate: 39.3em 0em;
    margin: auto;
    bottom: 4%;
    border-radius:  100% 30% / 100% 0;
}
.power-cord div:nth-child(2) {
    width: 20em;
    height: 12em;
    box-shadow: inset 0.3em 0.1em 0.2em -0.1em rgba(255, 255, 255, 0.2);
    border-top: 3px solid #04090977;
    border-left: 4px solid #040909;
    position: absolute;
    translate: 58em 0.2em;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 40%;
    border-radius:  100% 30% / 100% 0;
}

/* --------------- */
/* -- CLOCK OFF -- */
/* --------------- */
*, *:before, *:after {
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    user-select: none;
}

.clock.off .hex{
    opacity: 1;
    filter: grayscale(0);
}
.clock.off .hex .overlay {
    display: block;
}
.clock.off .pipe-accents .top-tube,
.clock.off .pipe-accents .top,
.clock.off .pipe-accents .topinset {
    box-shadow: 
    inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */;
}
.clock.off .pipe-accents .topinset::before {
    box-shadow: 
    inset 0 0 0em 0.1em #040909,
    /* light on */
    0 0 0.5em 0.1em var(--_bloom),
    inset 0 0 1.3em 0.2em var(--_o3),
    inset 0 0 1.3em 0.4em var(--_o2),
    inset 0 0 1.3em 0.6em var(--_o1),
    inset 0 0 1.3em 2em var(--_y1)
    /* -------- */;
    animation-play-state: running;
}
.clock.off .pipe-accents .tube-holders div{
    box-shadow: 
    inset 0 0 0.1em 0.1em #ffffff5d,
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */;
}
.clock.off .inner-pipe {
    box-shadow: 
    0em 104em 16em 20em #040909,
    /* light on */
    0em 1.2em 1em 0.2em var(--m3),
    0em 1.2em 1em 0.5em var(--m2),
    0em 1.2em 0.5em 1.2em var(--m1),
    0em 1.2em 1.2em 1.5em var(--m2),
    0em 1.2em 2em 2em var(--m3),
    /* ---- */
    0em 90em 16em 20em #040909,
    /* nat light */
    -1em 1em 2em 3.7em #040909,
    0.5em 0em 2em 3.7em #040909,
    0em 0em 0em 4.6em var(--mw1),
    0em 0em 0.5em 5em var(--mw1),
    /* --------- */
    0em 0em 0em 20em #040909;
}
.clock.off .small-inner-pipe {
    width: 100%;
    height: 100%;
    scale: 0.92 0.98;
    border-radius: 35% / 10%;
    box-shadow: 
    0em -94em 20em 20em #040909,
    0em 104em 20em 20em #040909,
    /* light on */
    0em 1em 1em 0.2em var(--m3),
    0em 1em 1em 0.5em var(--m2),
    0em 1em 0.5em 1.2em var(--m1),
    0em 1em 1.2em 1.5em var(--m2),
    0em 1em 2em 2em var(--m3),
    /* ---- */
    /* nat light */
    -0.2em 0.5em 0.8em -0.2em var(--mw1),
    0em 90em 16em 20em #040909,
    -1em 1em 2em 2em #040909,
    0.5em 0em 2em 2em #040909,
    0em 0em 0em 4.6em var(--mw1),
    0em 0em 1.5em 5em var(--mw1),
    /* --------- */
    0em 0em 0em 20em #040909;
}
.clock.off .pipe-accents .bottom-left {
    box-shadow: 
    inset -0.4em -0.1em 1em -0.4em var(--mw1),
    /* light on */
    inset -2em 0em 1.8em -1.5em var(--m3),
    inset -2em 0em 1.9em -1.3em var(--m2),
    inset -2em 0em 2em -1em var(--m1)
    /* -------- */;
}
.clock.off .pipe-accents .bottom-left::before {
    box-shadow: 
    inset -0.4em 0em 1em -0.3em var(--mw1),
    /* light on */
    inset -2em 0em 1.8em -1.5em var(--m3),
    inset -2em 0em 1.9em -1.3em var(--m2),
    inset -2em 0em 2em -1em var(--m1)
    /* -------- */;
}
.clock.off .pipe-accents .bottom-right {
    box-shadow: 
    inset -0.4em -0.1em 1em -0.4em var(--mw1),    
    /* light on */
    inset 2em 0em 1.8em -1.5em var(--m3),
    inset 2em 0em 1.9em -1.3em var(--m2),
    inset 2em 0em 2em -1em var(--m1)
    /* -------- */;
}
.clock.off .pipe-accents .bottom-right::before {
    box-shadow: 
    inset -0.4em 0em 1em -0.3em var(--mw1),    
    /* light on */
    inset 2em 0em 1.8em -1.5em var(--m3),
    inset 2em 0em 1.9em -1.3em var(--m2),
    inset 2em 0em 2em -1em var(--m1)
    /* -------- */;
}

.clock.off .pipe-accents .left div:nth-child(1){
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset -1em -0.5em 0.8em -0.8em var(--m3),
    inset -1em -0.5em 0.9em -0.5em var(--m2),
    inset -1em -0.5em 1em -0.3em var(--m1);
    /* -------- */
}
.clock.off .pipe-accents .left div:nth-child(1)::before,
.clock.off .pipe-accents .left div:nth-child(2)::before,
.clock.off .pipe-accents .left div:nth-child(3)::before,
.clock.off .pipe-accents .right div:nth-child(1)::before,
.clock.off .pipe-accents .right div:nth-child(2)::before,
.clock.off .pipe-accents .right div:nth-child(3)::before {
    box-shadow: 
    inset 0em 0.3em 0.6em -0.3em var(--mw1),
    /* light off */
    inset 1em -0.5em 0.3em -0.5em rgba(0, 0, 0, 0),
    inset 1em -0.5em 0.4em -0.3em rgba(0, 0, 0, 0),
    inset 1em -0.5em 0.6em -0.2em rgba(0, 0, 0, 0)
    /* -------- */;
}
.clock.off .pipe-accents .left div:nth-child(2){
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light off */
    inset -1em 0em 0.8em -0.6em rgba(0, 0, 0, 0),
    inset -1em 0em 0.9em 0em rgba(0, 0, 0, 0),
    inset -1em 0em 1em 0.1em rgba(0, 0, 0, 0);
    /* -------- */;
}
.clock.off .pipe-accents .left div:nth-child(3){
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light off */
    inset -1em 0.3em 0.8em -0.5em rgba(0, 0, 0, 0),
    inset -1em 0.3em 0.9em -0.3em rgba(0, 0, 0, 0),
    inset -1em 0.3em 1em 0em rgba(0, 0, 0, 0);
    /* -------- */;
}
.clock.off .pipe-accents .right div:nth-child(1){
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light off */
    inset 1em -0.5em 0.8em -0.8em rgba(0, 0, 0, 0),
    inset 1em -0.5em 0.9em -0.5em rgba(0, 0, 0, 0),
    inset 1em -0.5em 1em -0.3em rgba(0, 0, 0, 0);
    /* -------- */;
}
.clock.off .pipe-accents .right div:nth-child(2){
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light off */
    inset 1em 0em 0.8em -0.6em rgba(0, 0, 0, 0),
    inset 1em 0em 0.9em 0em rgba(0, 0, 0, 0),
    inset 1em 0em 1em 0.1em rgba(0, 0, 0, 0);
    /* -------- */;
}
.clock.off .pipe-accents .right div:nth-child(3){
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light off */
    inset 1em 0.3em 0.8em -0.5em rgba(0, 0, 0, 0),
    inset 1em 0.3em 0.9em -0.3em rgba(0, 0, 0, 0),
    inset 1em 0.3em 1em 0em rgba(0, 0, 0, 0);
    /* -------- */;
}
.clock.off .base-container .base div::before {
    box-shadow: 
    0 2em 10em 0 #000,
    inset -0.4em 0em 0.8em 0em var(--mw1),
    inset 0em 0em 0.5em 0.3em #040909,
    inset 0em 0em 0.5em 0.3em #040909,
    inset 0em 0em 1em 0em #040909,
    inset 0em 0em 2em 0em #040909,
    inset 0em 0em 3em 0em #040909,
    /* light off */
    inset 0em 0em 1em 0em rgba(0, 0, 0, 0),
    inset 0em 0em 1em 2em rgba(0, 0, 0, 0),
    inset 1em 0.3em 10em 10em rgba(0, 0, 0, 0)
    /* -------- */;
}

.clock.off .display .row .col > div:nth-child(2){
    opacity: 1;
}
.clock.off .display .row .col > div:nth-child(3){
    opacity: 1;
    animation-play-state: running;
}

.clock.off .glass-tube {
    box-shadow: 
    /* light off */
    0em 0em 1em -0.2em rgba(0, 0, 0, 0),
    0em 0em 2em -0.4em rgba(0, 0, 0, 0),
    0em 0em 3em -0.4em rgba(0, 0, 0, 0),
    inset 0em 0em 0.4em 0.2em rgba(0, 0, 0, 0),
    inset 0em 0em 0.6em 0.4em rgba(0, 0, 0, 0),
    inset 0em 0em 1em 0.7em rgba(0, 0, 0, 0),
    inset 0em 0em 3em 0em rgba(0, 0, 0, 0),
    inset 0em 0em 5em 1em rgba(0, 0, 0, 0),
    /* -------- */
    inset -0.1em 0.1em 0.1em 0em var(--mw1),
    inset 0 0 1em 0.1em var(--mw1);
}
.clock.off .tube-base {
    box-shadow: 
    inset 0em -0.1em 1.2em -0.4em var(--mw1),
    /* light off */
    inset 0em 3em 2.8em -2.5em rgba(0, 0, 0, 0),
    inset 0em 3em 3.9em -2.3em rgba(0, 0, 0, 0),
    inset 0em 3em 4em -2em rgba(0, 0, 0, 0)
    /* -------- */;
}
.clock.off .tube-base::before {
    box-shadow: 
    inset 0em -0.1em 1.2em -0.4em var(--mw1),
    /* light off */
    inset 0em 0em 1.8em -0.5em rgba(0, 0, 0, 0),
    inset 0em 0em 1.9em -0.3em rgba(0, 0, 0, 0),
    inset 0em 0em 2em -0em rgba(0, 0, 0, 0)
    /* -------- */;
}
.clock.off .tube-btm {
    box-shadow: 
    inset 0em 0em 1.2em -0.2em var(--mw1),
    /* light off */
    inset 0em 0.3em 1.2em 0em rgba(0, 0, 0, 0),
    inset 0em 0.3em 1.2em 0.3em rgba(0, 0, 0, 0),
    inset 0em 0.3em 1.2em 0.6em rgba(0, 0, 0, 0)
    /* -------- */;
}
.clock.off .tube-btm::before {
    box-shadow: 
    inset 0em -0.1em 0.7em -0.2em var(--mw1),
    /* light off */
    inset 0em 0.1em 1em -0.7em rgba(0, 0, 0, 0),
    inset 0em 0.1em 1em -0.3em rgba(0, 0, 0, 0),
    inset 0em 0.1em 1em -0em rgba(0, 0, 0, 0)
    /* -------- */;
}
.clock.off .rods .left-rod,
.clock.off .rods .center-rod,
.clock.off .rods .right-rod {
    box-shadow: 
    inset 0em 0.1em 0.8em -0.2em var(--mw1),
    /* light off */
    inset 0em 0.1em 1em -0.7em rgba(0, 0, 0, 0),
    inset 0em 0.1em 1em -0.3em rgba(0, 0, 0, 0),
    inset 0em 0.1em 1em -0em rgba(0, 0, 0, 0)
    /* -------- */;
}
.clock.off .wires div:nth-child(1),
.clock.off .wires div:nth-child(2) {
    box-shadow: 
    inset 0em 0.1em 0.4em 0em var(--mw1),
    inset 0 0 0 0.5em #040909;
}
.clock.off .button {
    background: var(--_bloom);
    box-shadow: 
    0em -0.1em 0.2em 0em var(--_o1),
    0em -0.1em 0.2em 0.1em var(--_o2),
    0em -0.1em 0.2em 0.2em var(--_o3),
    0em -0.1em 1em 0.5em var(--_bloom),
    /* light on */
    inset 0em 0em 1em 0em var(--_o3),
    inset 0em 0em 1em 0.5em var(--_o2),
    inset 0em 0em 1em 1em var(--_o1)
    /* -------- */
    ;
    filter: blur(1px);
    animation: 5s flicker linear infinite;
}