xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: daybreak finale turns the contact arrival into a sunrise with a dawn chord

Browse Source
This commit is contained in:
LucaP
2026-10-11 05:32:08 +03:00
parent c9e6ac0f29
commit b6e22a1299
37 changed files with 756 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/styles/world.css
View File

@@ -216,6 +216,21 @@
color: var(--amber);
}
/* END OF SHIFT: the destination eyebrow sits on the lightened sky, so it
darkens with the dawn instead of keeping the chapter accent. */
#contact .section-eyebrow { transition: color 1.2s ease; }
html:is([data-dawn='sunrise'], [data-dawn='day']) #contact .section-eyebrow {
color: #3b1a33;
text-shadow: 0 1px 12px rgb(255 226 196 / 45%);
}
/* END OF SHIFT: at full daylight the label reads SHIFT OVER (a string swap). */
html[data-dawn='day'] .journey-hud__arrival { font-size: 0; }
html[data-dawn='day'] .journey-hud__arrival::after {
content: attr(data-day) / '';
font-size: 0.72rem;
}
.drive-controls {
position: fixed;
z-index: var(--z-popover);
@@ -519,8 +534,15 @@
background: #020108;
content: '';
transform: scaleY(0);
transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1);
transition:
transform 1.6s cubic-bezier(0.65, 0, 0.35, 1),
background-color 2.4s ease;
}
/* END OF SHIFT: the bars take on the dawn, black to a warm aubergine. */
html[data-dawn='first-light'] .journey-world::before,
html[data-dawn='first-light'] .journey-world::after { background-color: #0e0810; }
html:is([data-dawn='sunrise'], [data-dawn='day']) .journey-world::before,
html:is([data-dawn='sunrise'], [data-dawn='day']) .journey-world::after { background-color: #1a0f14; }
.journey-world::before {
inset-block-start: 0;
display: grid;
@@ -552,18 +574,45 @@
clip-path: inset(0 100% 0 0);
opacity: 0;
}
.journey-world[data-arrived='true'] .journey-world__credit::before {
clip-path: inset(0 -1em 0 0);
opacity: 1;
transition:
opacity 1ms linear 1.9s,
clip-path 1.5s steps(36, end) 1.9s;
/* END OF SHIFT: the credit types as the sun clears the skyline
(html[data-dawn] reaches sunrise about 3.8 s after arrival). Until the
scene reports a dawn (still loading), it keeps a fixed 3.4 s delay. */
@media (prefers-reduced-motion: no-preference) {
html:is([data-dawn='sunrise'], [data-dawn='day'], :not([data-dawn])) .journey-world[data-arrived='true'] .journey-world__credit::before {
clip-path: inset(0 -1em 0 0);
opacity: 1;
transition:
opacity 1ms linear 0.2s,
clip-path 1.5s steps(36, end) 0.2s;
}
}
/* Phones: the credit may wrap, so it fades in rather than types. */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
html:is([data-dawn='sunrise'], [data-dawn='day'], :not([data-dawn])) .journey-world[data-arrived='true'] .journey-world__credit::before {
clip-path: none;
transition: opacity 0.8s ease 0.2s;
}
}
@media (prefers-reduced-motion: no-preference) {
html:not([data-dawn]) .journey-world[data-arrived='true'] .journey-world__credit::before { transition-delay: 3.4s; }
/* No scene, no dawn to wait for: the bars' own timing. */
html .journey-world[data-static-fallback='true'][data-arrived='true'] .journey-world__credit::before { transition-delay: 1.9s; }
}
/* Reduced motion: the bars and the dimming only; the credit simply shows. */
@media (prefers-reduced-motion: reduce) {
.journey-world[data-arrived='true'] .journey-world__credit::before { transition: none; }
.journey-world[data-arrived='true'] .journey-world__credit::before {
clip-path: inset(0 -1em 0 0);
opacity: 1;
transition: none;
}
}
.journey-poster { transition: filter 1.6s ease; }
.journey-poster { transition: filter 1.6s ease, opacity 1.6s ease; }
/* END OF SHIFT without the scene: the world crossfades to the daybreak sky
(indigo, dusty rose, pale amber) under the dimmed night poster. */
.journey-world[data-static-fallback='true'][data-arrived='true'] {
background: linear-gradient(180deg, #6b4a7a 0%, #b07a8c 44%, #ffb98a 58%, #ffe1c2 61%, #1a0f14 100%);
}
.journey-world[data-static-fallback='true'][data-arrived='true'] .journey-poster { opacity: 0.45; }
.journey-world[data-arrived='true'] .journey-poster { filter: brightness(0.9); }
.journey-world::after {
inset-block-end: 0;
@@ -586,10 +635,6 @@
text-align: center;
white-space: normal;
}
.journey-world[data-arrived='true'] .journey-world__credit::before {
clip-path: none;
transition: opacity 0.8s ease 1.9s;
}
}
@media (prefers-reduced-motion: reduce) {
.journey-world::before,
@@ -606,6 +651,7 @@
}
@media (prefers-reduced-motion: reduce) {
.journey-world[data-arrived='true'] .journey-poster { filter: saturate(0.86) brightness(0.83); }
.journey-poster { transition: none; }
}
@media (prefers-reduced-motion: reduce) {