/* ═══════════════════════════════════════════════
ZEVSAMA — Page Transition System v5 · COLSLICE
Referensi: muizzwebstudio.com — kolom vertikal
Style: Zevsama — hitam, pink #FF007A, grid
← pertama di
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* ── Overlay container ── */
#zt-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
overflow: hidden;
pointer-events: none;
}
#zt-overlay.zt-visible { display: block; pointer-events: all; }
#zt-overlay.zt-entering { pointer-events: none; }
/* ═══════════════════════════════════════════════
COLSLICE — N kolom vertikal, penuh tinggi layar
Genap masuk dari ATAS, ganjil dari BAWAH
═══════════════════════════════════════════════ */
.zt-col {
position: absolute;
top: 0;
bottom: 0;
will-change: transform;
overflow: hidden;
}
/* Posisi & lebar tiap kolom — 8 kolom */
.zt-col:nth-child(1) { left: calc(100% / 8 * 0); width: calc(100% / 8); }
.zt-col:nth-child(2) { left: calc(100% / 8 * 1); width: calc(100% / 8); }
.zt-col:nth-child(3) { left: calc(100% / 8 * 2); width: calc(100% / 8); }
.zt-col:nth-child(4) { left: calc(100% / 8 * 3); width: calc(100% / 8); }
.zt-col:nth-child(5) { left: calc(100% / 8 * 4); width: calc(100% / 8); }
.zt-col:nth-child(6) { left: calc(100% / 8 * 5); width: calc(100% / 8); }
.zt-col:nth-child(7) { left: calc(100% / 8 * 6); width: calc(100% / 8); }
.zt-col:nth-child(8) { left: calc(100% / 8 * 7); width: calc(100% / 8); }
/* Inner — background hitam solid */
.zt-col-inner {
position: absolute;
inset: 0;
background: #0a0a0a;
overflow: hidden;
}
/* Variasi shade tiap kolom — sangat subtle */
.zt-col:nth-child(1) .zt-col-inner { background: #0a0a0a; }
.zt-col:nth-child(2) .zt-col-inner { background: #080808; }
.zt-col:nth-child(3) .zt-col-inner { background: #0c0c0c; }
.zt-col:nth-child(4) .zt-col-inner { background: #090909; }
.zt-col:nth-child(5) .zt-col-inner { background: #0b0b0b; }
.zt-col:nth-child(6) .zt-col-inner { background: #080808; }
.zt-col:nth-child(7) .zt-col-inner { background: #0d0d0d; }
.zt-col:nth-child(8) .zt-col-inner { background: #090909; }
/* Garis pemisah antar kolom — pink tipis */
.zt-col::after {
content: '';
position: absolute;
top: 0; bottom: 0;
right: 0;
width: 1px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 0, 122, 0.0) 15%,
rgba(255, 0, 122, 0.35) 50%,
rgba(255, 0, 122, 0.0) 85%,
transparent 100%
);
z-index: 5;
opacity: 0;
transition: opacity 0.1s;
}
#zt-overlay.zt-visible .zt-col::after { opacity: 1; }
/* Grid background di tiap kolom */
.zt-col-inner::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,0,122,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,0,122,0.04) 1px, transparent 1px);
background-size: 40px 40px;
background-position: var(--gox, 0px) var(--goy, 0px);
z-index: 1;
pointer-events: none;
}
/* Pink streak vertikal di beberapa kolom */
.zt-col:nth-child(3n+1) .zt-col-inner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 0, 122, 0.06) 40%,
rgba(255, 0, 122, 0.12) 50%,
rgba(255, 0, 122, 0.06) 60%,
transparent 100%
);
z-index: 2;
pointer-events: none;
}
/* ── Kata tipografi di tiap kolom ── */
.zt-col-word {
position: absolute;
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 3;
font-family: 'Bebas Neue', sans-serif;
text-transform: uppercase;
writing-mode: vertical-rl;
text-orientation: mixed;
letter-spacing: 0.1em;
opacity: 0.07;
color: #fff;
}
.zt-col-word.zt-w-pink {
color: #FF007A;
opacity: 0.25;
}
.zt-col-word.zt-w-dim {
opacity: 0.04;
font-size: 5rem !important;
}
/* ═══════════════════════════════════════════════
LOGO CENTER
═══════════════════════════════════════════════ */
#zt-logo-wrap {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.88);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
opacity: 0;
pointer-events: none;
transition:
opacity 0.25s cubic-bezier(0.16,1,0.3,1),
transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
#zt-logo-wrap.zt-logo-in {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
#zt-logo-svg {
width: 72px; height: auto;
display: block;
filter:
drop-shadow(0 0 24px rgba(255,0,122,0.8))
drop-shadow(0 0 60px rgba(255,0,122,0.3));
}
/* Ring berbentuk kotak — brutalist */
#zt-logo-ring {
position: absolute;
width: 108px; height: 108px;
border: 1px solid rgba(255,0,122,0.3);
top: 50%; left: 50%;
transform: translate(-50%,-50%);
animation: zt-ring-pulse 1.5s ease-out infinite;
pointer-events: none;
}
@keyframes zt-ring-pulse {
0% { transform: translate(-50%,-50%) scale(1); opacity: 0.6; }
100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}
/* Glitch logo monochrome */
#zt-logo-wrap.zt-glitching #zt-logo-svg {
animation: zt-logo-glitch 0.5s steps(1) infinite;
}
@keyframes zt-logo-glitch {
0%,100% { transform:none; filter:drop-shadow(0 0 24px rgba(255,0,122,0.8)) drop-shadow(0 0 60px rgba(255,0,122,0.3)); clip-path:none; }
8% { transform:translate(-4px,0); clip-path:inset(0 0 68% 0); filter:drop-shadow(-3px 0 0 #FF007A) drop-shadow(3px 0 0 rgba(255,0,122,0.4)); }
18% { transform:translate(3px,-1px); clip-path:inset(38% 0 22% 0); filter:drop-shadow(3px 0 0 #FF007A); }
26% { transform:none; clip-path:none; }
44% { transform:translate(-2px,1px); clip-path:inset(74% 0 0 0); filter:drop-shadow(-2px 0 0 rgba(255,0,122,0.9)); }
52% { transform:none; clip-path:none; filter:drop-shadow(0 0 32px rgba(255,0,122,1)); }
70% { transform:translate(3px,0); clip-path:inset(18% 0 56% 0); filter:drop-shadow(3px 0 0 #FF007A) drop-shadow(-3px 0 0 rgba(255,0,122,0.3)); }
78% { transform:none; clip-path:none; }
}
/* Destination label */
#zt-dest {
font-family: 'Bebas Neue', sans-serif;
font-size: 0.6rem;
letter-spacing: 8px;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
text-align: center;
position: relative;
z-index: 2;
}
#zt-dest::before { content: '✦'; margin-right: 12px; color: #FF007A; font-size: 0.4rem; }
#zt-dest::after { content: '✦'; margin-left: 12px; color: #FF007A; font-size: 0.4rem; }
/* Disable interaksi saat leaving */
body.zt-leaving > *:not(#zt-overlay):not(#cursor):not(#cursor-dot):not(#zs-cur):not(#zs-dot) {
pointer-events: none;
}
/* ── Anti-flash saat halaman baru load ──────────────
html.zt-incoming di-set oleh inline script di
sebelum browser render body.
Bikin body invisible sampai JS overlay siap. */
html.zt-incoming body {
visibility: hidden;
}
html.zt-incoming #zt-overlay {
display: block !important;
visibility: visible;
background: #0a0a0a;
}
/* Cursor selalu visible di atas overlay */
#cursor, #cursor-dot, #zs-cur, #zs-dot {
z-index: 999999 !important;
pointer-events: none !important;
}