html, body {
margin: 0;
min-height: 100%;
background: #080706;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: #080706;
}
body.proto-active .Header,
body.proto-active header:not(#protoHeader),
body.proto-active .header:not(#protoHeader),
body.proto-active .site-header,
body.proto-active footer:not(.proto-footer),
body.proto-active .Footer,
body.proto-active .footer,
body.proto-active .site-footer {
display: none !important;
visibility: hidden !important;
}
body.proto-active .Main,
body.proto-active .Main-content,
body.proto-active .Page,
body.proto-active .Page-content,
body.proto-active article.Page,
body.proto-active .sqs-layout,
body.proto-active .page-section,
body.proto-active .content-wrapper {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
html {
scroll-behavior: auto !important;
background: #080706 !important;
}
body.proto-active {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background: #080706 !important;
color: rgba(255,255,255,0.9);
cursor: crosshair;
}
/* iOS Safari does NOT get crosshair cursor or pointer reactivity */
body.proto-active.proto-touch {
cursor: auto;
}
body.proto-loading {
overflow: hidden !important;
height: 100vh !important;
height: 100svh !important;
}
#prototypeExperience {
position: relative;
z-index: 10;
min-height: 100vh;
min-height: 100svh;
isolation: isolate;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* continuous ambient world */
#protoAmbient {
position: fixed;
inset: 0;
z-index: 12;
pointer-events: none;
overflow: hidden;
background:
radial-gradient(ellipse 90% 70% at 72% 18%, rgba(255,145,70,0.13), transparent 56%),
radial-gradient(ellipse 70% 55% at 18% 84%, rgba(255,205,120,0.08), transparent 58%),
linear-gradient(180deg, #070604 0%, #120d09 48%, #080706 100%);
}
#protoAmbientCanvas {
position: absolute;
inset: 0;
z-index: 1;
opacity: var(--proto-canvas-opacity, 0.5);
}
/* on touch, the glow layer's heavy blur is a Safari repaint killer — soften it */
.proto-ambient-glow {
position: absolute;
inset: -10%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 25% 28%, rgba(255,160,80,0.16), transparent 42%),
radial-gradient(circle at 75% 65%, rgba(255,210,140,0.075), transparent 45%),
radial-gradient(circle at 50% 90%, rgba(255,100,40,0.09), transparent 50%);
filter: blur(var(--proto-glow-blur, 82px));
opacity: var(--proto-glow-opacity, 0.92);
transform: translateZ(0);
}
body.proto-touch .proto-ambient-glow {
filter: blur(var(--proto-glow-blur, 46px));
opacity: var(--proto-glow-opacity, 0.8);
}
body.proto-quality-medium .proto-fragment,
body.proto-quality-low .proto-fragment {
box-shadow:
0 18px 48px rgba(0,0,0,0.62),
0 0 18px rgba(255,170,90,0.04);
}
body.proto-quality-low .proto-fragment {
box-shadow:
0 14px 36px rgba(0,0,0,0.56),
0 0 12px rgba(255,170,90,0.035);
}
.proto-ambient-vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,0.58) 100%),
linear-gradient(180deg, rgba(0,0,0,0.32), transparent 30%, transparent 68%, rgba(0,0,0,0.48));
}
/* loader */
#protoLoader {
position: fixed;
inset: 0;
z-index: 99999999;
display: flex;
align-items: center;
justify-content: center;
background: #000;
transition: opacity 1s ease, visibility 1s ease;
}
#protoLoader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.proto-loader-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
transform: translateY(-2px);
}
.proto-loader-text {
font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: rgba(255,255,255,0.42);
text-transform: lowercase;
letter-spacing: 0.15em;
animation: protoLoaderPulse 3s ease-in-out infinite;
}
@keyframes protoLoaderPulse {
0%, 100% { opacity: 0.42; }
50% { opacity: 0.68; }
}
.proto-loader-bar {
width: clamp(180px, 42vw, 360px);
height: 1.5px;
background: rgba(255,255,255,0.08);
border-radius: 1px;
overflow: visible;
position: relative;
}
.proto-loader-fill {
height: 100%;
width: 0%;
background: rgba(255,255,255,0.72);
border-radius: 1px;
position: relative;
box-shadow: 0 0 8px rgba(255,255,255,0.42), 0 0 20px rgba(255,255,255,0.2);
}
.proto-loader-fill::after {
content: "";
position: absolute;
right: -2px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.92);
box-shadow: 0 0 10px rgba(255,255,255,0.62), 0 0 25px rgba(255,255,255,0.3);
}
/* header */
#protoHeader {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
padding: calc(18px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) 18px calc(24px + env(safe-area-inset-left, 0px));
box-sizing: border-box;
pointer-events: none;
opacity: 0;
transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
}
body.proto-ready #protoHeader {
opacity: 1;
}
body.proto-gallery-mode #protoHeader {
opacity: 1;
}
body.proto-gallery-mode #protoHeader .proto-header-brand {
opacity: 0.28;
transform: translateY(-4px);
filter: saturate(0.88);
}
body.proto-gallery-mode #protoHeader .proto-header-controls {
opacity: 0.82;
}
body.proto-gallery-mode #protoHeader:hover .proto-header-brand,
body.proto-gallery-mode.proto-menu-open #protoHeader .proto-header-brand,
body.proto-gallery-mode #protoHeader:focus-within .proto-header-brand,
body.proto-gallery-mode #protoHeader:hover .proto-header-controls,
body.proto-gallery-mode.proto-menu-open #protoHeader .proto-header-controls,
body.proto-gallery-mode #protoHeader:focus-within .proto-header-controls {
opacity: 1;
transform: none;
filter: none;
}
#protoHeader a {
pointer-events: auto;
text-decoration: none;
color: rgba(255,210,140,0.95) !important;
text-shadow:
0 0 10px rgba(255,180,100,0.6),
0 0 25px rgba(255,160,80,0.35),
0 0 50px rgba(255,140,60,0.18);
font-size: 15px;
letter-spacing: 0.06em;
min-height: 38px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 22px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
}
.proto-header-controls {
pointer-events: auto;
display: flex;
align-items: center;
gap: 12px;
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}
.proto-header-btn {
width: 42px;
height: 42px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
box-shadow:
0 10px 30px rgba(0,0,0,0.32),
0 0 18px rgba(255,160,80,0.06);
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
outline: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: opacity 0.28s ease, transform 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}
.proto-header-btn:hover {
transform: translateY(-1px) scale(1.03);
background: rgba(255,255,255,0.11);
border-color: rgba(255,255,255,0.2);
}
.proto-header-btn:active {
transform: scale(0.96);
}
.proto-header-btn svg {
width: 17px;
height: 17px;
stroke: rgba(255,210,140,0.9);
stroke-width: 1.7;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
filter: drop-shadow(0 0 6px rgba(255,170,90,0.45));
}
.proto-header-btn svg * {
pointer-events: none;
}
#protoMenu {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8,6,5,0.96);
backdrop-filter: blur(38px) saturate(120%);
-webkit-backdrop-filter: blur(38px) saturate(120%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.42s ease, visibility 0.42s ease;
}
#protoMenu.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.proto-menu-close {
position: absolute;
top: calc(18px + env(safe-area-inset-top, 0px));
right: calc(24px + env(safe-area-inset-right, 0px));
}
.proto-menu-nav {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.proto-menu-nav a {
display: block;
padding: 16px 50px;
text-decoration: none;
font-size: 26px;
font-weight: 300;
letter-spacing: 0.08em;
text-transform: lowercase;
color: rgba(255,210,140,0.86) !important;
text-shadow:
0 0 8px rgba(255,180,100,0.42),
0 0 20px rgba(255,160,80,0.25);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.34s ease, transform 0.34s ease, letter-spacing 0.32s ease, color 0.32s ease, text-shadow 0.32s ease;
}
#protoMenu.open .proto-menu-nav a {
opacity: 1;
transform: translateY(0);
}
.proto-menu-nav li:nth-child(1) a { transition-delay: 0.04s; }
.proto-menu-nav li:nth-child(2) a { transition-delay: 0.08s; }
.proto-menu-nav li:nth-child(3) a { transition-delay: 0.12s; }
.proto-menu-nav li:nth-child(4) a { transition-delay: 0.16s; }
.proto-menu-nav li:nth-child(5) a { transition-delay: 0.2s; }
.proto-menu-nav li:nth-child(6) a { transition-delay: 0.24s; }
.proto-menu-nav li:nth-child(7) a { transition-delay: 0.28s; }
.proto-menu-nav a:hover {
letter-spacing: 0.14em;
color: rgba(255,226,180,1) !important;
text-shadow:
0 0 12px rgba(255,190,110,0.72),
0 0 30px rgba(255,170,90,0.5),
0 0 60px rgba(255,150,70,0.3);
}
body.proto-menu-open {
overflow: hidden !important;
}
body.proto-menu-open #protoMenuBtn {
opacity: 0;
pointer-events: none;
}
@media (max-width: 768px) {
.proto-header-controls {
gap: 10px;
}
.proto-header-btn {
width: 40px;
height: 40px;
}
.proto-header-btn svg {
width: 16px;
height: 16px;
}
.proto-menu-close {
top: calc(14px + env(safe-area-inset-top, 0px));
right: calc(16px + env(safe-area-inset-right, 0px));
width: 42px;
height: 42px;
}
.proto-menu-nav a {
font-size: 22px;
padding: 14px 40px;
}
}
/* sphere / warp-tunnel cinematic layer */
#protoStage {
position: fixed;
inset: 0;
z-index: 30;
overflow: hidden;
perspective: 900px;
perspective-origin: 50% 50%;
opacity: 0;
pointer-events: none;
transform: translateZ(0);
-webkit-transform: translateZ(0);
transition: opacity 1.2s ease;
contain: layout paint style;
}
body.proto-ready #protoStage {
opacity: 1;
}
/* this wrapper carries the mouse-parallax tilt so it doesn't fight per-fragment transforms */
#protoSphereField {
position: absolute;
inset: 0;
transform-style: preserve-3d;
will-change: transform;
pointer-events: none;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
#protoSphere {
position: absolute;
left: 50%;
top: 44%;
z-index: 8;
width: 0;
height: 0;
transform-style: preserve-3d;
pointer-events: none;
}
.proto-fragment {
position: absolute;
left: 0;
top: 0;
border-radius: 6px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(255,190,120,0.16), rgba(18,14,11,0.9) 44%, rgba(255,120,60,0.08));
box-shadow:
0 22px 64px rgba(0,0,0,0.68),
0 0 22px rgba(255,170,90,0.04);
transform-style: preserve-3d;
will-change: transform, opacity;
pointer-events: none;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-origin: center center;
}
.proto-fragment img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
pointer-events: none;
opacity: 0;
transition: opacity 0.55s ease;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.proto-fragment img.loaded {
opacity: 1;
}
.proto-fragment::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 0%, rgba(255,210,150,0.1), transparent 45%),
linear-gradient(180deg, rgba(255,255,255,0.03), transparent 38%, rgba(0,0,0,0.15));
opacity: 0.5;
}
#protoLabel {
position: absolute;
top: 80px;
left: 50%;
z-index: 60;
transform: translateX(-50%);
font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: rgba(255,210,140,0.62);
text-transform: lowercase;
letter-spacing: 0.1em;
pointer-events: none;
opacity: 0;
text-shadow: 0 0 16px rgba(255,150,70,0.28);
will-change: opacity, transform;
}
#protoHint {
position: absolute;
bottom: 30px;
left: 50%;
z-index: 60;
transform: translateX(-50%);
font: 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: rgba(255,255,255,0.34);
text-transform: lowercase;
letter-spacing: 0.12em;
pointer-events: none;
opacity: 0;
will-change: opacity, transform;
}
.proto-beat {
position: absolute;
left: 50%;
top: 50%;
z-index: 65;
width: min(760px, calc(100vw - 44px));
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
pointer-events: none;
text-align: center;
will-change: opacity, transform;
}
.proto-beat span {
display: block;
font-size: 72px;
line-height: 0.98;
letter-spacing: 0;
font-weight: 430;
color: rgba(255,226,190,0.9);
text-shadow:
0 0 12px rgba(255,170,95,0.34),
0 0 36px rgba(255,120,52,0.18),
0 1px 16px rgba(0,0,0,0.34);
}
#protoBeatArchive span {
font-size: 60px;
}
#protoBeatBegin {
top: 50%;
}
#protoBeatBegin span {
font-size: 68px;
line-height: 0.94;
letter-spacing: 0;
font-weight: 500;
text-transform: lowercase;
color: rgba(255,226,190,0.96);
text-shadow:
0 0 18px rgba(255,160,80,0.38),
0 0 52px rgba(255,110,40,0.18);
}
#protoJourneyProgress {
position: fixed;
left: 50%;
bottom: calc(18px + env(safe-area-inset-bottom, 0px));
z-index: 210;
width: min(360px, 42vw);
height: 1px;
transform: translateX(-50%);
background: rgba(255,255,255,0.075);
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: opacity 0.5s ease;
}
#protoJourneyProgress span {
display: block;
width: 0%;
height: 100%;
background: rgba(255,210,140,0.82);
box-shadow: 0 0 14px rgba(255,160,80,0.45);
}
#protoCinematicSpacer {
height: 460vh;
height: 460svh;
}
/* gallery continues in same world */
#protoGallery {
position: relative;
z-index: 24;
min-height: 100vh;
margin-top: -96vh;
padding: 12vh 24px 18vh;
box-sizing: border-box;
background:
linear-gradient(180deg, rgba(8,7,6,0) 0%, rgba(8,7,6,0.32) 18%, rgba(9,7,6,0.68) 46%, rgba(13,11,10,0.9) 100%);
}
.proto-gallery-inner {
width: min(1360px, 100%);
margin: 0 auto;
}
/* clean mosaic: a uniform CSS grid of equal square cells. some tiles span 2x2
for visual rhythm. object-fit: cover crops to fill — gap-free by construction,
zero per-frame cost. row height is set once (and on resize) to equal column
width, so every cell is a perfect square and spans tile cleanly. */
.proto-mini-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: dense;
gap: 12px;
/* --row-h is set inline by JS = column width */
}
.proto-card {
position: relative;
overflow: hidden;
border-radius: 8px;
background: rgba(255,255,255,0.035);
box-shadow:
0 18px 50px rgba(0,0,0,0.34),
0 0 16px rgba(255,160,80,0.045);
opacity: 0;
transform: translate3d(0, 22px, 0) scale(0.99);
transition: opacity 0.7s ease, transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
grid-column: span 1;
grid-row: span 1;
}
/* feature tiles: a 2x2 footprint for rhythm (assigned by JS per load) */
.proto-card.feature {
grid-column: span 2;
grid-row: span 2;
}
.proto-card.in-view {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.proto-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: brightness(0.86) saturate(0.96);
}
.proto-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,0.035), transparent 30%, rgba(0,0,0,0.12)),
radial-gradient(circle at 50% 0%, rgba(255,180,100,0.075), transparent 46%);
mix-blend-mode: screen;
opacity: 0.5;
}
.proto-paths-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 64px;
}
.proto-path {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 148px;
min-height: 46px;
box-sizing: border-box;
padding: 14px 20px;
touch-action: manipulation;
border-radius: 999px;
text-decoration: none;
color: rgba(255,210,140,0.94) !important;
background: rgba(255,255,255,0.065);
border: 1px solid rgba(255,255,255,0.12);
box-shadow:
0 12px 42px rgba(0,0,0,0.35),
0 0 22px rgba(255,160,80,0.08);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
font-size: 13px;
letter-spacing: 0.09em;
text-transform: lowercase;
text-shadow:
0 0 10px rgba(255,180,100,0.45),
0 0 25px rgba(255,160,80,0.25);
transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}
.proto-path:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.11);
border-color: rgba(255,255,255,0.2);
}
.proto-footer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 56px;
padding-bottom: 8px;
}
.proto-footer a {
text-decoration: none;
color: rgba(255,210,140,0.72) !important;
font-size: 13px;
letter-spacing: 0.08em;
padding: 4px 2px;
position: relative;
text-shadow:
0 0 10px rgba(255,180,100,0.3),
0 0 24px rgba(255,160,80,0.16);
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.proto-footer a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: rgba(255,200,130,0.32);
transform: scaleX(0.4);
transform-origin: center;
opacity: 0.5;
transition: transform 0.34s ease, opacity 0.34s ease, background 0.34s ease;
}
.proto-footer a:hover {
color: rgba(255,226,180,0.98) !important;
text-shadow:
0 0 12px rgba(255,190,110,0.55),
0 0 30px rgba(255,160,80,0.3);
}
.proto-footer a:hover::after {
transform: scaleX(1);
opacity: 1;
background: rgba(255,210,140,0.7);
}
/* back-to-top: subtle on-brand pill that re-flies the sphere by scrolling to top.
fixed bottom-right, fades in only after you've scrolled past the warp. */
#protoToTop {
position: fixed;
right: calc(22px + env(safe-area-inset-right, 0px));
bottom: calc(22px + env(safe-area-inset-bottom, 0px));
z-index: 220;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
cursor: pointer;
background: rgba(255,255,255,0.055);
border: 1px solid rgba(255,255,255,0.11);
box-shadow:
0 10px 30px rgba(0,0,0,0.4),
0 0 18px rgba(255,160,80,0.07);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.45s ease, transform 0.45s ease, background 0.3s ease, border-color 0.3s ease;
}
#protoToTop.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#protoToTop:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.2);
}
#protoToTop svg {
width: 16px;
height: 16px;
display: block;
}
#protoToTop svg path {
stroke: rgba(255,210,140,0.92);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
filter: drop-shadow(0 0 6px rgba(255,170,90,0.5));
}
#protoHeader a:focus-visible,
.proto-header-btn:focus-visible,
.proto-menu-close:focus-visible,
.proto-menu-nav a:focus-visible,
.proto-path:focus-visible,
.proto-footer a:focus-visible,
#protoToTop:focus-visible {
outline: 2px solid rgba(255,224,174,0.78);
outline-offset: 4px;
}
body.proto-quality-low #protoHeader a,
body.proto-quality-low .proto-header-btn,
body.proto-quality-low .proto-path,
body.proto-quality-low #protoToTop {
backdrop-filter: blur(7px) saturate(118%);
-webkit-backdrop-filter: blur(7px) saturate(118%);
}
@media (max-width: 768px) {
#protoToTop {
right: calc(16px + env(safe-area-inset-right, 0px));
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
width: 40px;
height: 40px;
}
}
#protoExitFade {
position: fixed;
inset: 0;
z-index: 999999999;
background: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.75s ease;
}
#protoExitFade.active {
opacity: 1;
pointer-events: all;
}
@media (max-width: 768px) {
#protoHeader {
padding: calc(14px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 14px calc(16px + env(safe-area-inset-left, 0px));
}
#protoHeader a {
font-size: 14px;
padding: 7px 13px;
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
#protoStage {
perspective: 760px;
}
#protoAmbientCanvas {
opacity: var(--proto-canvas-opacity, 0.34);
}
#protoSphere {
top: 43%;
}
#protoLabel {
top: 76px;
font-size: 11px;
}
#protoHint {
bottom: 34px;
font-size: 10px;
}
.proto-beat {
width: calc(100vw - 36px);
}
.proto-beat span {
font-size: 48px;
letter-spacing: 0;
}
#protoBeatArchive span {
font-size: 42px;
}
#protoBeatBegin {
top: 50%;
}
#protoBeatBegin span {
font-size: 42px;
letter-spacing: 0;
}
#protoJourneyProgress {
width: min(250px, 50vw);
bottom: calc(19px + env(safe-area-inset-bottom, 0px));
}
#protoCinematicSpacer {
height: var(--proto-mobile-spacer-vh, 340vh);
height: var(--proto-mobile-spacer-svh, 340svh);
}
#protoGallery {
margin-top: -86vh;
margin-top: -86svh;
padding: 12vh 16px 14vh;
}
.proto-mini-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.proto-card {
border-radius: 9px;
box-shadow: 0 16px 44px rgba(0,0,0,0.36);
}
.proto-card img {
filter: brightness(0.88) saturate(0.96);
}
.proto-paths-wrap {
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 50px;
}
.proto-path {
width: min(260px, 100%);
min-width: 0;
padding: 13px 18px;
font-size: 12px;
}
.proto-footer {
margin-top: 42px;
}
.proto-footer a {
font-size: 13px;
}
}
@media (max-width: 430px) {
.proto-mini-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.proto-card.feature {
grid-column: span 2;
grid-row: span 2;
}
.proto-beat span {
font-size: 42px;
}
#protoBeatArchive span,
#protoBeatBegin span {
font-size: 36px;
}
}
body.proto-reduced #protoStage,
body.proto-reduced #protoCinematicSpacer,
body.proto-reduced #protoJourneyProgress,
body.proto-reduced #protoAmbientCanvas {
display: none !important;
}
body.proto-reduced #protoGallery {
margin-top: 0;
padding-top: 120px;
}
body.proto-reduced .proto-card {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
body.proto-active *,
body.proto-active *::before,
body.proto-active *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
body.proto-reduced #protoStage,
body.proto-reduced #protoCinematicSpacer,
body.proto-reduced #protoJourneyProgress,
body.proto-reduced #protoAmbientCanvas {
display: none !important;
}
body.proto-reduced #protoGallery {
margin-top: 0;
padding-top: 120px;
}
body.proto-reduced .proto-card {
opacity: 1 !important;
transform: none !important;
}
}
/* v3.2 visual and responsive refinement */
#prototypeExperience {
--proto-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#protoAmbient::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0.18;
background-image:
radial-gradient(circle at 17% 23%, rgba(255,255,255,0.13) 0 0.55px, transparent 0.8px),
radial-gradient(circle at 73% 61%, rgba(255,192,128,0.1) 0 0.5px, transparent 0.75px);
background-size: 53px 47px, 71px 67px;
mix-blend-mode: soft-light;
}
#protoLoader {
background: #000;
}
.proto-loader-inner {
gap: 28px;
}
.proto-loader-text {
color: rgba(255,255,255,0.42);
}
.proto-loader-bar {
width: clamp(180px, 42vw, 360px);
background: rgba(255,255,255,0.08);
}
.proto-loader-fill {
background: rgba(255,255,255,0.72);
box-shadow: 0 0 8px rgba(255,255,255,0.42), 0 0 20px rgba(255,255,255,0.2);
}
#protoHeader a,
.proto-header-btn {
border-color: rgba(255,225,190,0.13);
background: rgba(15,12,10,0.42);
}
#protoHeader a {
transition: opacity 0.35s ease, transform 0.35s var(--proto-ease-out),
background 0.35s ease, border-color 0.35s ease;
}
#protoHeader a:hover {
transform: translateY(-1px);
background: rgba(255,255,255,0.095);
border-color: rgba(255,225,190,0.22);
}
body.proto-gallery-mode #protoHeader .proto-header-brand {
opacity: 0.62;
transform: none;
filter: saturate(0.92);
}
body.proto-gallery-mode #protoHeader .proto-header-controls {
opacity: 1;
}
#protoMenu {
box-sizing: border-box;
overflow: hidden auto;
padding:
calc(88px + env(safe-area-inset-top, 0px))
calc(28px + env(safe-area-inset-right, 0px))
calc(72px + env(safe-area-inset-bottom, 0px))
calc(28px + env(safe-area-inset-left, 0px));
background: rgba(7,5,4,0.91);
backdrop-filter: blur(28px) saturate(118%);
-webkit-backdrop-filter: blur(28px) saturate(118%);
transform: translateY(-8px) scale(1.01);
transition: opacity 0.38s ease, transform 0.46s var(--proto-ease-out), visibility 0.38s ease;
}
#protoMenu::before {
content: "";
position: fixed;
inset: -20%;
pointer-events: none;
background:
radial-gradient(circle at 28% 24%, rgba(255,157,78,0.12), transparent 34%),
radial-gradient(circle at 76% 72%, rgba(255,213,151,0.055), transparent 38%);
opacity: 0;
transform: scale(0.94);
transition: opacity 0.5s ease, transform 0.8s var(--proto-ease-out);
}
#protoMenu.open {
transform: none;
}
#protoMenu.open::before {
opacity: 1;
transform: scale(1);
}
.proto-menu-brand,
.proto-menu-email {
position: absolute;
z-index: 2;
color: rgba(255,211,151,0.66) !important;
text-decoration: none;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: lowercase;
transition: color 0.25s ease;
}
.proto-menu-brand:hover,
.proto-menu-email:hover {
color: rgba(255,231,198,0.94) !important;
}
.proto-menu-brand {
top: calc(29px + env(safe-area-inset-top, 0px));
left: calc(30px + env(safe-area-inset-left, 0px));
}
.proto-menu-email {
left: 50%;
bottom: calc(27px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
white-space: nowrap;
}
.proto-menu-panel {
position: relative;
z-index: 1;
width: min(620px, 100%);
margin: auto;
}
.proto-menu-nav {
width: 100%;
border: 0;
}
.proto-menu-nav li {
border: 0;
}
.proto-menu-nav li + li {
margin-top: 2px;
}
.proto-menu-nav a {
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px 24px;
text-align: center;
font-size: 44px;
line-height: 1.05;
font-weight: 320;
letter-spacing: 0;
text-shadow: 0 0 24px rgba(255,155,75,0.18);
}
.proto-menu-nav a::before {
content: none;
display: none;
}
.proto-menu-nav a:hover,
.proto-menu-nav a:focus-visible {
letter-spacing: 0;
color: rgba(255,235,205,1) !important;
text-shadow: 0 0 18px rgba(255,190,112,0.42), 0 0 42px rgba(255,148,70,0.24);
}
body.proto-menu-open {
position: fixed;
width: 100%;
left: 0;
right: 0;
overflow: hidden !important;
}
#protoStage {
touch-action: pan-y;
}
.proto-fragment {
border: 1px solid rgba(255,229,203,0.085);
box-sizing: border-box;
}
.proto-fragment img {
filter: saturate(0.98) contrast(1.025) brightness(0.94);
}
#protoHint::after {
content: "";
display: block;
width: 46px;
height: 1px;
margin: 12px auto 0;
background: linear-gradient(90deg, transparent, rgba(255,211,151,0.55), transparent);
transform: scaleX(0.55);
transform-origin: center;
animation: protoHintLine 2.6s ease-in-out infinite;
}
@keyframes protoHintLine {
0%, 100% { opacity: 0.3; transform: scaleX(0.45); }
50% { opacity: 0.9; transform: scaleX(1); }
}
.proto-card {
contain: paint;
background:
linear-gradient(145deg, rgba(255,204,153,0.06), rgba(12,10,9,0.86)),
rgba(255,255,255,0.025);
border: 1px solid rgba(255,225,190,0.055);
box-sizing: border-box;
transition: opacity 0.62s ease, transform 0.78s var(--proto-ease-out), box-shadow 0.45s ease;
}
.proto-card img {
opacity: 0;
transform: scale(1.035);
transition: opacity 0.65s ease, transform 1.05s var(--proto-ease-out), filter 0.55s ease;
}
.proto-card img.loaded {
opacity: 1;
transform: scale(1);
}
@media (hover: hover) and (pointer: fine) {
.proto-card:hover {
z-index: 2;
box-shadow: 0 26px 72px rgba(0,0,0,0.48), 0 0 28px rgba(255,157,78,0.075);
}
.proto-card:hover img {
transform: scale(1.025);
filter: brightness(0.96) saturate(1.04) contrast(1.025);
}
}
.proto-path {
position: relative;
overflow: hidden;
isolation: isolate;
}
.proto-path::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 15%, rgba(255,214,166,0.1) 50%, transparent 85%);
transform: translateX(-120%);
transition: transform 0.65s var(--proto-ease-out);
}
.proto-path:hover::before,
.proto-path:focus-visible::before {
transform: translateX(120%);
}
#protoExitFade {
transition-duration: 0.56s;
}
@media (min-width: 769px) and (max-width: 1100px) {
#protoGallery {
padding-left: 20px;
padding-right: 20px;
}
.proto-mini-grid {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
}
@media (max-width: 768px) {
#protoMenu {
padding:
calc(76px + env(safe-area-inset-top, 0px))
calc(20px + env(safe-area-inset-right, 0px))
calc(68px + env(safe-area-inset-bottom, 0px))
calc(20px + env(safe-area-inset-left, 0px));
}
.proto-menu-brand {
top: calc(27px + env(safe-area-inset-top, 0px));
left: calc(20px + env(safe-area-inset-left, 0px));
}
.proto-menu-email {
bottom: calc(25px + env(safe-area-inset-bottom, 0px));
}
.proto-menu-nav a {
padding: 8px 18px;
font-size: 32px;
}
#protoHeader a,
.proto-header-btn {
min-height: 44px;
}
.proto-header-btn {
width: 44px;
height: 44px;
}
#protoGallery {
padding-left: max(14px, env(safe-area-inset-left, 0px));
padding-right: max(14px, env(safe-area-inset-right, 0px));
}
.proto-card {
border-radius: 8px;
}
.proto-path {
min-height: 50px;
}
}
@media (max-height: 580px) and (orientation: landscape) {
#protoSphere {
top: 50%;
}
#protoLabel {
top: 54px;
}
#protoHint {
bottom: 18px;
}
#protoMenu {
align-items: flex-start;
padding-top: calc(62px + env(safe-area-inset-top, 0px));
padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
}
.proto-menu-nav a {
padding-top: 5px;
padding-bottom: 5px;
font-size: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
#protoHint::after {
animation: none;
}
.proto-card img {
transform: none;
}
}