OTHER WORLD LOGIC
OTHER WORLD LOGIC is the sound creation project of Cyrus Asfa.
He is part of a generation of artists pioneering reductive sound synthesis
with generative .a.i.
[id="D3488324045"] .page-content {
padding: 3.8rem;
}
[id="D3488324045"] .page-content {
padding: 0.0rem;
padding-bottom: 0rem;
text-align: left;
}
[id="D3488324045"] .page-layout {
padding-right: 0rem;
padding-left: 0rem;
}
.text-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
overflow: hidden;
}
.moving-text {
width: 80vw;
position: absolute;
font-size: 1.1rem;
text-align: center;
white-space: nowrap;
color: rgba(255, 255, 255, 0.85);
font-family: Helvetica Neue, Helvetica, sans-serif, Helvetica Neue Regular;/* Monospace for typing effect */
font-weight: normal;
opacity: 0;
}
.moving-text.first {
animation: typing 1s steps(100) forwards, moveUp 2s 1s forwards;
}
.moving-text.second {
animation: typing 1s steps(1000) 1s forwards, moveDown 2s 2s forwards;
}
@keyframes typing {
0% {
clip-path: inset(0 100% 0 0);
opacity: 1;
}
100% {
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
@keyframes moveUp {
0% {
top: 50%;
transform: translateY(-50%);
}
100% {
top: 10%;
transform: translateY(0%);
opacity: 1;
}
}
@keyframes moveDown {
0% {
top: 50%;
transform: translateY(-50%);
}
100% {
top: 80%;
transform: translateY(0%);
opacity: 1;
}
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* MENU STYLES */
.menu-container {
position: fixed;
top: 0rem;
right: 2rem;
z-index: 1000;
font-size: 1.2rem;
}
.menu-plus {
position: absolute;
top: 5rem;
right: 1rem;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
opacity: 0;
white-space: nowrap;
transition: transform 0.3s ease;
}
.menu-text {
position: absolute;
top: 5rem;
right: 1rem;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
opacity: 0;
white-space: nowrap;
transition: transform 0.3s ease;
animation: fadeIn 1s ease-in 2s forwards, fadeOut 1s ease-in 4s forwards;
z-index: 2;
}
.menu-plus {
animation: fadeIn 1s ease-in 5s forwards;
z-index: 3;
font-size: 1.8rem;
}
.menu-plus:hover {
color: #83ff31;
}
.menu-text:hover {
color: #83ff31;
}
.menu-plus.rotate {
transform: rotate(25deg);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.dropdown {
display: none;
flex-direction: column;
position: absolute;
top: 4rem;
right: 0;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.dropdown a:hover {
color: #83ff31; /* or any color you want */
transition: color 0.3s ease;
}
.dropdown.show {
display: flex;
opacity: 1;
pointer-events: auto;
}
.dropdown a {
color: white;
text-decoration: none;
padding: 0.5rem 0;
font-size: 1rem;
opacity: 0;
transform: translateY(-10px);
}
.dropdown.show a {
animation: jiggleFadeDown 0.5s ease forwards;
}
.dropdown.show a:nth-child(1) { animation-delay: 0.05s; }
.dropdown.show a:nth-child(2) { animation-delay: 0.15s; }
.dropdown.show a:nth-child(3) { animation-delay: 0.25s; }
[id="T3057851291"].page {
justify-content: center;
}
[id="T3057851291"] .page-content {
text-align: center;
}
@keyframes jiggleFadeDown {
0% { opacity: 0; transform: translateY(-10px); }
50% { opacity: 0.8; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Optional: Fade-out on page change */
body.fade-out {
opacity: 0;
transition: opacity 0.5s ease;
}
body.fade-in {
opacity: 1;
transition: opacity 0.5s ease;
}
.top-clock {
position: fixed;
top: 12rem;
left: 10rem;
font-size: 1rem;
color: white;
z-index: 1000;
}
.bottom-clock {
position: fixed;
top: 12rem;
left: 88rem;
font-size: 1rem;
color: white;
z-index: 1000;
}