1316 lines
26 KiB
CSS
1316 lines
26 KiB
CSS
:root {
|
|
--bg-color: #FFBD16;
|
|
--card-bg: rgba(255, 255, 255, 0.4);
|
|
--card-border: rgba(0, 0, 0, 0.1);
|
|
--text-primary: #0f172a;
|
|
--text-secondary: #6bff5b;
|
|
--accent-color: #1c6a00;
|
|
/* Dark accent for visibility */
|
|
--toggle-bg-off: rgba(0, 0, 0, 0.1);
|
|
--toggle-bg-on: #248a00;
|
|
--toggle-handle: #ffffff;
|
|
--result-stable: #248a00;
|
|
--result-paradoxical: #db2777;
|
|
/* Darker pink for visibility */
|
|
--result-infinite: #9333ea;
|
|
/* Darker purple */
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
/* User said "depending on that white background colour for transparency later" */
|
|
background-color: white;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Move scanlines to .crt-screen instead of body */
|
|
body::after {
|
|
display: none;
|
|
}
|
|
|
|
@-webkit-keyframes blinker {
|
|
from {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
to {
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
|
|
.paradoxical {
|
|
-webkit-animation-name: blinker;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: cubic-bezier(1.0, 0, 1.0, 1.0);
|
|
-webkit-animation-duration: 0.5s;
|
|
}
|
|
|
|
/* Main Wrapper for Fixed Frame */
|
|
.main-wrapper {
|
|
width: 1000px;
|
|
/* Fixed width to hold the frame */
|
|
height: 678px;
|
|
/* Fixed height ratio approx to image */
|
|
background-image: url('technoborder.png');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* For video recording cleaness */
|
|
|
|
/* New CRT Monitor Container */
|
|
.crt-screen {
|
|
position: relative;
|
|
top: 4px;
|
|
width: 518px;
|
|
/* Slightly larger than widget */
|
|
height: 450px;
|
|
/* Estimated height to fit widget */
|
|
background-color: #616161;
|
|
/* Use the yellow theme here inside the screen */
|
|
border-radius: 35px;
|
|
/* Match inner curve of technoborder approx */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
|
|
/* Inner shadow for depth */
|
|
transition: background-color 0.5s ease;
|
|
}
|
|
|
|
/* Slides Container */
|
|
.slides-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
/* Or simple block handling with display:none */
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.slide {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* transition: opacity 0.5s ease; - JS to toggle display */
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Paradox Error State */
|
|
.crt-screen.paradox-errors {
|
|
background-color: #7f1d1d;
|
|
/* Dark Red for Warning/Error */
|
|
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
|
|
.crt-screen::after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
|
z-index: 1000;
|
|
background-size: 100% 2px, 3px 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.widget-container {
|
|
background: transparent;
|
|
/* Remove card bg to let frame show */
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
border: none;
|
|
/* Remove border, frame provides it */
|
|
border-radius: 24px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
width: 440px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
box-shadow: none;
|
|
/* Remove shadow */
|
|
transition: transform 0.3s ease;
|
|
margin-top: 40px;
|
|
/* Optional adjustment to center content within frame if needed */
|
|
}
|
|
|
|
.widget-header h1 {
|
|
font-size: 1.8rem;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
text-transform: uppercase;
|
|
text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
|
|
/* Subtle glow */
|
|
}
|
|
|
|
.switch-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
width: 440px;
|
|
/* Wider switches as requested (+100% roughly from original context if strictly needed, but let's assume filling container) */
|
|
/* Container is 460px inside crt-screen (518px), so we fill it */
|
|
padding: 0 40px;
|
|
/* Add padding to center them nicely if slightly smaller */
|
|
}
|
|
|
|
.switch-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.switch-label {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Custom Toggle Switch */
|
|
.toggle-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 48px;
|
|
background: var(--toggle-bg-off);
|
|
border-radius: 24px;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px;
|
|
user-select: none;
|
|
}
|
|
|
|
.toggle-wrapper.active {
|
|
background: var(--card-border);
|
|
/* Neutral background when active, state is indicated by position */
|
|
}
|
|
|
|
.toggle-handle {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--toggle-handle);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 4px;
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
z-index: 2;
|
|
}
|
|
|
|
.toggle-wrapper.active .toggle-handle {
|
|
transform: translateX(270px);
|
|
/* 320px container - 40px padding - 4px padding - 40px handle - 4px orig left (approx) -> calculated dynamically in CSS or fixed width */
|
|
transform: translateX(calc(100% + 232px));
|
|
/* This method is tricky with fixed widths. Let's use simpler layout */
|
|
}
|
|
|
|
/* Better Toggle Implementation for text labels inside */
|
|
.switch-input {
|
|
display: none;
|
|
}
|
|
|
|
.toggle-track {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 56px;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
/* Darker track for white text contrast */
|
|
border-radius: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.toggle-track::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
width: 50%;
|
|
background: #248a00;
|
|
/* Green interior */
|
|
border-radius: 24px;
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
opacity: 1;
|
|
/* Make it solid */
|
|
}
|
|
|
|
.switch-input:checked+.toggle-track::before {
|
|
transform: translateX(96%);
|
|
/* slight overlap */
|
|
}
|
|
|
|
.option-left,
|
|
.option-right {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 1.0rem;
|
|
font-weight: 500;
|
|
z-index: 1;
|
|
transition: color 0.3s;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
padding: 0 8px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.switch-input:not(:checked)+.toggle-track .option-left {
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
|
|
|
|
.intermediate-result {
|
|
position: float;
|
|
top: 10px;
|
|
bottom: 8px;
|
|
right: 12px;
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--accent-color);
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
transition: opacity 0.3s ease;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Result Section */
|
|
.result-container {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
text-align: center;
|
|
min-height: 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid var(--card-border);
|
|
}
|
|
|
|
.result-label {
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.result-value {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
/* For gradient text */
|
|
transition: all 0.5s ease;
|
|
background-image: linear-gradient(to right, #fff, #ccc);
|
|
/* Default */
|
|
}
|
|
|
|
.result-value.stable,
|
|
.result-value.standard-physics,
|
|
.result-value.digital-physics {
|
|
background-image: linear-gradient(to right, #064e3b, #15803d);
|
|
/* Darker green */
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.result-value.paradoxical {
|
|
background-image: linear-gradient(to right, #831843, #be185d);
|
|
/* Deep pink/red */
|
|
text-shadow: none;
|
|
}
|
|
|
|
.result-value.gnommos-paradox {
|
|
background-image: linear-gradient(to right, #831843, #be185d);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.result-value.infinite {
|
|
background-image: linear-gradient(to right, #4c1d95, #7e22ce);
|
|
/* Deep purple */
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.wiki-link {
|
|
/* ... existing styles ... */
|
|
}
|
|
|
|
/*.widget-container:hover {
|
|
transform: scale(1.01);
|
|
}*/
|
|
|
|
/* Visualization Panel */
|
|
.visualization-container {
|
|
height: 120px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.art-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
/* Base Dot */
|
|
.art-canvas::after {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 10px #fff;
|
|
position: absolute;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Visualization States */
|
|
|
|
/* Point + Field (Unexplained) */
|
|
.art-canvas.point-field::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
border: 1px dashed rgba(255, 255, 255, 0.4);
|
|
animation: rotate 10s linear infinite;
|
|
background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
|
|
}
|
|
|
|
.art-canvas.point-field::after {
|
|
background: #c084fc;
|
|
box-shadow: 0 0 15px #c084fc;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Stable Point */
|
|
.art-canvas.stable-point::after {
|
|
background: #4ade80;
|
|
box-shadow: 0 0 10px #4ade80;
|
|
}
|
|
|
|
/* Paradox/Infinite placeholders - can be expanded */
|
|
.art-canvas.paradox-point::after,
|
|
.art-canvas.paradox-chunk::after,
|
|
.art-canvas.paradox-continuous::after,
|
|
.art-canvas.paradox-infinite::after {
|
|
background: #a10356;
|
|
box-shadow: 0 0 10px #a10356, 0 0 20px #a10356;
|
|
animation: jitter 0.2s infinite;
|
|
}
|
|
|
|
@keyframes jitter {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
25% {
|
|
transform: translate(1px, 1px);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(-1px, -1px);
|
|
}
|
|
|
|
75% {
|
|
transform: translate(-1px, 1px);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(1px, -1px);
|
|
}
|
|
}
|
|
|
|
|
|
/* Description Text */
|
|
.result-description {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
margin-top: 8px;
|
|
min-height: 2.4em;
|
|
/* Reserve space for 2 lines */
|
|
line-height: 1.4;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.result-value.unexplained {
|
|
background-image: linear-gradient(to right, #fbbf24, #f59e0b);
|
|
text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
|
|
}
|
|
|
|
/* Custom Visuals HTML-based */
|
|
|
|
/* Paradox Point: Cube + Arrow */
|
|
.cube-wrapper {
|
|
perspective: 400px;
|
|
width: 60px;
|
|
height: 60px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.cube {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transform: rotateX(-20deg) rotateY(45deg);
|
|
animation: slow-spin 10s linear infinite;
|
|
}
|
|
|
|
@keyframes slow-spin {
|
|
from {
|
|
transform: rotateX(-20deg) rotateY(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotateX(-20deg) rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
.face {
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.face.front {
|
|
transform: rotateY(0deg) translateZ(30px);
|
|
}
|
|
|
|
.face.back {
|
|
transform: rotateY(180deg) translateZ(30px);
|
|
}
|
|
|
|
.face.right {
|
|
transform: rotateY(90deg) translateZ(30px);
|
|
}
|
|
|
|
.face.left {
|
|
transform: rotateY(-90deg) translateZ(30px);
|
|
}
|
|
|
|
.face.top {
|
|
transform: rotateX(90deg) translateZ(30px);
|
|
}
|
|
|
|
.face.bottom {
|
|
transform: rotateX(-90deg) translateZ(30px);
|
|
}
|
|
|
|
.cube .particle-point {
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #a10356;
|
|
/* Pink for paradox */
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: 0 0 10px #a10356;
|
|
}
|
|
|
|
/* Info Arrow */
|
|
.info-arrow {
|
|
position: absolute;
|
|
left: -60px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: -4px;
|
|
opacity: 0;
|
|
animation: arrow-enter 1s ease forwards 0.5s;
|
|
z-index: 10;
|
|
}
|
|
|
|
@keyframes arrow-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-50%) translateX(-20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(-50%) translateX(0);
|
|
}
|
|
}
|
|
|
|
.arrow-line {
|
|
width: 30px;
|
|
height: 2px;
|
|
background: #a10356;
|
|
box-shadow: 0 0 5px #a10356;
|
|
}
|
|
|
|
.arrow-head {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 8px solid #a10356;
|
|
filter: drop-shadow(0 0 2px #a10356);
|
|
}
|
|
|
|
.infinite-symbol {
|
|
position: absolute;
|
|
top: -24px;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #a10356;
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 10px rgba(244, 114, 182, 0.5);
|
|
}
|
|
|
|
/* Ensure ::after/::before on base class don't interfere when using innerHTML */
|
|
.art-canvas.paradox-point::after,
|
|
.art-canvas.paradox-point::before {
|
|
display: none;
|
|
}
|
|
|
|
/* Chakana (Gold Cube Ensemble) */
|
|
.chakana-wrapper {
|
|
perspective: 800px;
|
|
width: 80px;
|
|
height: 80px;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transform: rotateX(-30deg) rotateY(45deg);
|
|
animation: floating 6s ease-in-out infinite;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@keyframes floating {
|
|
0% {
|
|
transform: rotateX(-30deg) rotateY(45deg) translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: rotateX(-30deg) rotateY(45deg) translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateX(-30deg) rotateY(45deg) translateY(0);
|
|
}
|
|
}
|
|
|
|
.gold-cube {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
/* Centering logic handled by offsets */
|
|
}
|
|
|
|
/* Positioning the arms relative to the center */
|
|
.gold-cube.center {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.gold-cube.top-arm {
|
|
transform: translate3d(0, -40px, 0);
|
|
}
|
|
|
|
.gold-cube.bottom-arm {
|
|
transform: translate3d(0, 40px, 0);
|
|
}
|
|
|
|
.gold-cube.left-arm {
|
|
transform: translate3d(-40px, 0, 0);
|
|
}
|
|
|
|
.gold-cube.right-arm {
|
|
transform: translate3d(40px, 0, 0);
|
|
}
|
|
|
|
.gold-cube .face {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #d97706 100%);
|
|
/* Gold gradient */
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
/* Darker border for definition */
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.gold-cube .face.front {
|
|
transform: rotateY(0deg) translateZ(20px);
|
|
}
|
|
|
|
.gold-cube .face.back {
|
|
transform: rotateY(180deg) translateZ(20px);
|
|
}
|
|
|
|
.gold-cube .face.right {
|
|
transform: rotateY(90deg) translateZ(20px);
|
|
}
|
|
|
|
.gold-cube .face.left {
|
|
transform: rotateY(-90deg) translateZ(20px);
|
|
}
|
|
|
|
.gold-cube .face.top {
|
|
transform: rotateX(90deg) translateZ(20px);
|
|
}
|
|
|
|
.gold-cube .face.bottom {
|
|
transform: rotateX(-90deg) translateZ(20px);
|
|
}
|
|
|
|
/* Ensure ::after/::before on base class don't interfere */
|
|
.art-canvas.stable-chunk::after,
|
|
.art-canvas.stable-chunk::before {
|
|
display: none;
|
|
}
|
|
|
|
/* Paradox Chunk (Unbounded Expansion) */
|
|
.chaos-wrapper {
|
|
perspective: 600px;
|
|
width: 100px;
|
|
height: 100px;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.central-source {
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
animation: pulsar 2s ease-out infinite;
|
|
}
|
|
|
|
.central-source .face {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #a10356;
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
box-shadow: 0 0 15px #c084fc;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Re-use generic face transfroms for central source size 20 */
|
|
.central-source .face.front {
|
|
transform: rotateY(0deg) translateZ(10px);
|
|
}
|
|
|
|
.central-source .face.back {
|
|
transform: rotateY(180deg) translateZ(10px);
|
|
}
|
|
|
|
.central-source .face.right {
|
|
transform: rotateY(90deg) translateZ(10px);
|
|
}
|
|
|
|
.central-source .face.left {
|
|
transform: rotateY(-90deg) translateZ(10px);
|
|
}
|
|
|
|
.central-source .face.top {
|
|
transform: rotateX(90deg) translateZ(10px);
|
|
}
|
|
|
|
.central-source .face.bottom {
|
|
transform: rotateX(-90deg) translateZ(10px);
|
|
}
|
|
|
|
@keyframes pulsar {
|
|
0% {
|
|
transform: scale3d(0.1, 0.1, 0.1) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
transform: scale3d(1.5, 1.5, 1.5) rotate(180deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scale3d(3, 3, 3) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.debris-cube {
|
|
width: 10px;
|
|
height: 10px;
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
opacity: 0;
|
|
}
|
|
|
|
.debris-cube .face {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: linear-gradient(45deg, #c084fc, #a10356);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.debris-cube .face.front {
|
|
transform: rotateY(0deg) translateZ(5px);
|
|
}
|
|
|
|
.debris-cube .face.back {
|
|
transform: rotateY(180deg) translateZ(5px);
|
|
}
|
|
|
|
.debris-cube .face.right {
|
|
transform: rotateY(90deg) translateZ(5px);
|
|
}
|
|
|
|
.debris-cube .face.left {
|
|
transform: rotateY(-90deg) translateZ(5px);
|
|
}
|
|
|
|
.debris-cube .face.top {
|
|
transform: rotateX(90deg) translateZ(5px);
|
|
}
|
|
|
|
.debris-cube .face.bottom {
|
|
transform: rotateX(-90deg) translateZ(5px);
|
|
}
|
|
|
|
/* Explosion Animations for Debris */
|
|
/* Using css variables or just hardcoded classes for 12 debris items to fly in random directions */
|
|
|
|
.d-0 {
|
|
animation: explode-0 2s linear infinite;
|
|
}
|
|
|
|
.d-1 {
|
|
animation: explode-1 2.3s linear infinite 0.2s;
|
|
}
|
|
|
|
.d-2 {
|
|
animation: explode-2 1.8s linear infinite 0.4s;
|
|
}
|
|
|
|
.d-3 {
|
|
animation: explode-3 2.5s linear infinite 0.1s;
|
|
}
|
|
|
|
.d-4 {
|
|
animation: explode-4 2.1s linear infinite 0.5s;
|
|
}
|
|
|
|
.d-5 {
|
|
animation: explode-5 1.9s linear infinite 0.3s;
|
|
}
|
|
|
|
.d-6 {
|
|
animation: explode-6 2.2s linear infinite 0.6s;
|
|
}
|
|
|
|
.d-7 {
|
|
animation: explode-7 2.4s linear infinite 0.2s;
|
|
}
|
|
|
|
.d-8 {
|
|
animation: explode-8 1.7s linear infinite 0.7s;
|
|
}
|
|
|
|
.d-9 {
|
|
animation: explode-9 2.6s linear infinite 0.1s;
|
|
}
|
|
|
|
.d-10 {
|
|
animation: explode-10 2.0s linear infinite 0.4s;
|
|
}
|
|
|
|
.d-11 {
|
|
animation: explode-11 2.3s linear infinite 0.3s;
|
|
}
|
|
|
|
@keyframes explode-0 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(100px, 100px, 100px) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-1 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(-120px, 80px, -50px) rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-2 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(50px, -150px, 20px) rotate(90deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-3 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(-80px, -60px, 100px) rotate(-270deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-4 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(20px, 120px, -100px) rotate(45deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-5 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(-150px, 10px, 10px) rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-6 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(80px, -80px, -80px) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-7 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(-100px, 100px, 50px) rotate(200deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-8 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(120px, 40px, -20px) rotate(-100deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-9 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(-40px, -130px, 80px) rotate(60deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-10 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(40px, 90px, 120px) rotate(300deg);
|
|
}
|
|
}
|
|
|
|
@keyframes explode-11 {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0) scale(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(-90px, -40px, -120px) rotate(180deg);
|
|
}
|
|
}
|
|
|
|
|
|
/* Ensure ::after/::before on base class don't interfere */
|
|
.art-canvas.paradox-chunk::after,
|
|
.art-canvas.paradox-chunk::before {
|
|
display: none;
|
|
}
|
|
|
|
/* Layout Adjustment */
|
|
/* Layout Adjustment */
|
|
.bottom-container {
|
|
display: flex;
|
|
gap: 16px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Specific Layout for Slide 2 (Vertical Stack) */
|
|
#slide2 .bottom-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.visualization-container,
|
|
.result-container {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
#slide2 .visualization-container {
|
|
flex: 1.5;
|
|
/* Larger upper section */
|
|
height: auto;
|
|
min-height: 0;
|
|
/* Allow shrinking if needed */
|
|
}
|
|
|
|
#slide2 .result-container {
|
|
flex: 1;
|
|
/* Smaller lower section */
|
|
height: auto;
|
|
min-height: 0;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* Adjustments for the result container to fit better */
|
|
.result-container {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
/* For absolute positioning of intermediate result */
|
|
}
|
|
|
|
/* Action Button Style */
|
|
.action-button {
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
padding: 12px 32px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
margin-top: 24px;
|
|
text-transform: uppercase;
|
|
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
|
|
transition: transform 0.1s, box-shadow 0.1s;
|
|
}
|
|
|
|
.action-button:active {
|
|
transform: translateY(4px);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.action-button.secondary {
|
|
border: 2px solid var(--text-secondary);
|
|
color: var(--text-secondary);
|
|
box-shadow: none;
|
|
font-size: 1.0rem;
|
|
padding: 5px 100px;
|
|
}
|
|
|
|
.action-button.secondary:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Slide 2 Specific Typography Enlargement */
|
|
#slide2 .result-value {
|
|
font-size: 2.5rem;
|
|
/* much larger */
|
|
}
|
|
|
|
#slide2 .result-description {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
|
|
|
|
/* Detailed Summary Styles */
|
|
.summary-box {
|
|
margin-bottom: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
.summary-label {
|
|
display: block;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.summary-value {
|
|
display: block;
|
|
font-size: 1.0rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
#slide2 .result-value {
|
|
font-size: 2.0rem;
|
|
|
|
/* Slightly adjusted */
|
|
#slide2 .result-description {
|
|
font-size: 1.1rem;
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* CRT Slide Transition Animations */
|
|
@keyframes crt-collapse {
|
|
0% {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
|
|
60% {
|
|
transform: scaleY(0.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleY(0.005);
|
|
}
|
|
}
|
|
|
|
@keyframes crt-expand {
|
|
0% {
|
|
transform: scaleY(0.005);
|
|
}
|
|
|
|
60% {
|
|
transform: scaleY(0.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
.crt-collapse {
|
|
animation: crt-collapse 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
}
|
|
|
|
.crt-expand {
|
|
animation: crt-expand 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
}
|
|
|
|
/* Splash Screen Styles */
|
|
#splashSlide {
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.splash-content h1 {
|
|
font-size: 2.2rem;
|
|
line-height: 1.4;
|
|
margin-bottom: 16px;
|
|
color: var(--text-primary);
|
|
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.splash-content h2 {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 20px;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
} |