3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers. Co-authored-by: Cursor <cursoragent@cursor.com>
786 lines
18 KiB
CSS
786 lines
18 KiB
CSS
@import "tailwindcss";
|
|
@import "@fontsource-variable/google-sans-flex/wght.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--font-sans: var(--font-body);
|
|
--font-display: var(--font-display);
|
|
--font-wordmark: "Google Sans Flex Variable", system-ui, sans-serif;
|
|
--font-hero-serif: var(--font-hero-serif);
|
|
--color-brand-green: #1a5c38;
|
|
--color-brand-green-dark: #0d3d26;
|
|
--color-brand-gold: #ffb300;
|
|
--color-brand-blue: #1f3d7e;
|
|
--color-brand-navy: #0f0404;
|
|
--color-surface-muted: #f7f7f7;
|
|
--color-text-muted: #767676;
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.75rem;
|
|
--background: #ffffff;
|
|
--foreground: #0d3d26;
|
|
--card: #ffffff;
|
|
--card-foreground: #0d3d26;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #0d3d26;
|
|
/* Primary: brand green · Secondary: white */
|
|
--primary: #1a5c38;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #ffffff;
|
|
--secondary-foreground: #1a5c38;
|
|
--muted: #f0f5f2;
|
|
--muted-foreground: #5a6b62;
|
|
--accent: #ffb300;
|
|
--accent-foreground: #0d3d26;
|
|
--destructive: #dc2626;
|
|
--border: #dce8e0;
|
|
--input: #dce8e0;
|
|
--ring: #1a5c38;
|
|
--hero: #0d3d26;
|
|
--section-muted: #f0f5f2;
|
|
--section-inverse: #1a5c38;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-family: var(--font-body), system-ui, sans-serif;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-family: var(--font-display), system-ui, sans-serif;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.font-wordmark {
|
|
font-family: var(--font-wordmark);
|
|
font-weight: 900;
|
|
font-variation-settings: "wght" 900;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.font-hero-serif {
|
|
font-family: var(--font-hero-serif), Georgia, "Times New Roman", serif;
|
|
}
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
.section-inverse {
|
|
background-color: #1a5c38;
|
|
color: #fafafa;
|
|
}
|
|
.section-green {
|
|
background-color: #1a5c38;
|
|
color: #fafafa;
|
|
}
|
|
.grain {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Full-page atmosphere — brand wash drift (behind grain + lines) */
|
|
@keyframes backdrop-bloom-a {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translate(4%, -3%) scale(1.08);
|
|
}
|
|
}
|
|
@keyframes backdrop-bloom-b {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translate(-5%, 4%) scale(1.06);
|
|
}
|
|
}
|
|
.backdrop-bloom-a {
|
|
animation: backdrop-bloom-a 32s ease-in-out infinite;
|
|
}
|
|
.backdrop-bloom-b {
|
|
animation: backdrop-bloom-b 38s ease-in-out infinite;
|
|
}
|
|
|
|
/* Seamless horizontal pan — valley / ocean line bands */
|
|
@keyframes valley-pan-slow {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.valley-pan-slow {
|
|
animation: valley-pan-slow 140s linear infinite;
|
|
}
|
|
.valley-pan-slower {
|
|
animation: valley-pan-slow 220s linear infinite;
|
|
}
|
|
.valley-pan-medium {
|
|
animation: valley-pan-slow 95s linear infinite;
|
|
}
|
|
.valley-pan-slower-reverse {
|
|
animation: valley-pan-slow 220s linear infinite reverse;
|
|
}
|
|
.marquee {
|
|
animation: marquee 40s linear infinite;
|
|
}
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.marquee {
|
|
animation: none;
|
|
}
|
|
.backdrop-bloom-a,
|
|
.backdrop-bloom-b,
|
|
.valley-pan-slow,
|
|
.valley-pan-slower,
|
|
.valley-pan-medium,
|
|
.valley-pan-slower-reverse {
|
|
animation: none;
|
|
}
|
|
}
|
|
.ticket-notch::before,
|
|
.ticket-notch::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
transform: translateX(-50%);
|
|
border-radius: 9999px;
|
|
background: var(--section-inverse, #0a0a0a);
|
|
}
|
|
.ticket-notch::before {
|
|
top: -0.75rem;
|
|
}
|
|
.ticket-notch::after {
|
|
bottom: -0.75rem;
|
|
}
|
|
|
|
/* Admission ticket — side notches + rounded body */
|
|
.ticket-admission {
|
|
border-radius: 1rem;
|
|
--ticket-notch-fill: var(--section-inverse, #1a5c38);
|
|
}
|
|
.ticket-admission[data-ticket-notch="light"] {
|
|
--ticket-notch-fill: #f0f5f2;
|
|
}
|
|
.ticket-admission::before,
|
|
.ticket-admission::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
z-index: 2;
|
|
width: 1.35rem;
|
|
height: 1.35rem;
|
|
border-radius: 9999px;
|
|
background: var(--ticket-notch-fill);
|
|
transform: translateY(-50%);
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.ticket-admission::before {
|
|
left: -0.675rem;
|
|
}
|
|
.ticket-admission::after {
|
|
right: -0.675rem;
|
|
}
|
|
|
|
/* Rift topography tokens */
|
|
:root {
|
|
--rift-scroll: 0;
|
|
--rift-canvas: #fbfdfb;
|
|
--rift-stroke: rgba(26, 92, 56, 0.18);
|
|
--rift-stroke-minor: rgba(26, 92, 56, 0.26);
|
|
--rift-stroke-inverse: rgba(255, 255, 255, 0.25);
|
|
--rift-accent: #ffb300;
|
|
--rift-channel: #1a5c38;
|
|
}
|
|
|
|
.rift-profile-partners .rift-contour-minor,
|
|
.rift-profile-terrace-dense .rift-terrace-line {
|
|
opacity: 1.15;
|
|
}
|
|
.rift-profile-privacy .rift-contour-path,
|
|
.rift-profile-contact .rift-contour-path {
|
|
opacity: 0.85;
|
|
}
|
|
.rift-profile-pitch .rift-channel-inner {
|
|
stroke: var(--rift-accent);
|
|
}
|
|
.rift-profile-payment .rift-channel-outer {
|
|
stroke: var(--rift-accent);
|
|
}
|
|
|
|
.rift-ambient-pulse .rift-contour-path {
|
|
animation: rift-contour-pulse 5s ease-in-out infinite;
|
|
}
|
|
|
|
.rift-channel-open {
|
|
background: radial-gradient(
|
|
ellipse 12% 35% at 50% 45%,
|
|
rgba(255, 179, 0, 0.08) 0%,
|
|
transparent 65%
|
|
);
|
|
opacity: 0;
|
|
}
|
|
.rift-hero-intro .rift-channel-open {
|
|
animation: rift-channel-open 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-settled .rift-channel-open,
|
|
.rift-hero-static .rift-channel-open {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes rift-channel-open {
|
|
0%,
|
|
28% {
|
|
opacity: 0;
|
|
transform: scaleY(0.2);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
.rift-line-draw path {
|
|
transition:
|
|
stroke 0.85s ease,
|
|
opacity 0.85s ease,
|
|
stroke-dashoffset 0.2s ease-out;
|
|
}
|
|
.valley-pan-slow {
|
|
animation-duration: calc(140s - 55s * var(--rift-scroll, 0));
|
|
}
|
|
.valley-pan-slower {
|
|
animation-duration: calc(220s - 80s * var(--rift-scroll, 0));
|
|
}
|
|
.valley-pan-medium {
|
|
animation-duration: calc(95s - 40s * var(--rift-scroll, 0));
|
|
}
|
|
.valley-pan-slower-reverse {
|
|
animation-duration: calc(220s - 80s * var(--rift-scroll, 0));
|
|
}
|
|
|
|
/* Navbar tickets CTA — glow + text + arrow */
|
|
@keyframes ticket-glow {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 10px rgba(255, 179, 0, 0);
|
|
}
|
|
}
|
|
@keyframes ticket-text-pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.06);
|
|
}
|
|
}
|
|
@keyframes ticket-arrow-nudge {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
.ticket-cta-pulse {
|
|
animation: ticket-glow 2.2s ease-in-out infinite;
|
|
}
|
|
.ticket-cta-text {
|
|
display: inline-block;
|
|
animation: ticket-text-pulse 2.2s ease-in-out infinite;
|
|
}
|
|
.ticket-cta-arrow {
|
|
animation: ticket-arrow-nudge 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ticket-card-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.ticket-card-enter {
|
|
animation: ticket-card-enter 0.6s ease-out both;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ticket-cta-pulse,
|
|
.ticket-cta-text,
|
|
.ticket-cta-arrow,
|
|
.ticket-card-enter {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Mobile menu tickets — continuous right-to-left scroll */
|
|
@keyframes ticket-menu-marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.ticket-menu-marquee {
|
|
animation: ticket-menu-marquee 11s linear infinite;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ticket-menu-marquee {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* ─── Hero rift cinematic (10s intro) ─── */
|
|
.font-hero-serif,
|
|
.rift-hero-heading {
|
|
font-family: var(--font-hero-serif), Georgia, "Times New Roman", serif;
|
|
}
|
|
|
|
/* ─── mainwhite.svg on white sections only ─── */
|
|
.topo-tone-light .topo-pattern-asset {
|
|
mix-blend-mode: multiply;
|
|
filter: sepia(0.35) saturate(2.6) hue-rotate(92deg) brightness(0.92) contrast(1.2);
|
|
}
|
|
|
|
.topo-content-layer {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Plain readable copy on white — no glow, shadow, or blur */
|
|
.section-white .topo-content-readable,
|
|
.section-white .topo-content-readable :is(h1, h2, h3, h4, p, li, label, summary),
|
|
.section-white .topo-content-readable a:not([data-slot="button"]) {
|
|
color: #0d3d26;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.section-white .topo-content-readable .text-muted-foreground {
|
|
color: #3d5248;
|
|
}
|
|
|
|
.topo-curvy-extend {
|
|
overflow: visible;
|
|
}
|
|
|
|
.topo-prose-surface-light {
|
|
background: #ffffff;
|
|
border: 1px solid rgba(26, 92, 56, 0.12);
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.topo-prose-surface-green {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.topo-prose-surface {
|
|
border-radius: 1rem;
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.topo-prose-surface {
|
|
padding: 1.5rem 2rem;
|
|
}
|
|
}
|
|
|
|
.topo-card-layer,
|
|
[data-slot="card"] {
|
|
position: relative;
|
|
z-index: 20;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.section-green .topo-content-layer,
|
|
.section-green .topo-content-layer :is(h1, h2, h3, h4, p, li, a, label, span) {
|
|
color: #ffffff;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.section-green .text-muted-foreground {
|
|
color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
.section-green [data-slot="button"][data-variant="outline"] {
|
|
border-color: rgba(255, 255, 255, 0.75);
|
|
background-color: transparent;
|
|
color: #ffffff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.section-green [data-slot="button"][data-variant="outline"]:hover {
|
|
background-color: rgba(255, 255, 255, 0.14);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.section-green [data-slot="button"][data-variant="ghost"] {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.section-green [data-slot="button"][data-variant="ghost"]:hover {
|
|
background-color: rgba(255, 255, 255, 0.12);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.section-green [data-slot="button"][data-variant="default"]:not([class*="bg-[#ffb300]"]) {
|
|
background-color: #ffb300;
|
|
color: #0f0404;
|
|
}
|
|
|
|
.section-green [data-slot="button"][data-variant="default"]:not([class*="bg-[#ffb300]"]):hover {
|
|
background-color: #e6a200;
|
|
color: #0f0404;
|
|
}
|
|
|
|
.topo-pattern-clearance-section {
|
|
-webkit-mask-image: radial-gradient(
|
|
ellipse min(92%, 44rem) min(58%, 540px) at 50% 44%,
|
|
transparent 0%,
|
|
transparent 34%,
|
|
rgba(0, 0, 0, 0.18) 50%,
|
|
rgba(0, 0, 0, 0.62) 72%,
|
|
#000 100%
|
|
);
|
|
mask-image: radial-gradient(
|
|
ellipse min(92%, 44rem) min(58%, 540px) at 50% 44%,
|
|
transparent 0%,
|
|
transparent 34%,
|
|
rgba(0, 0, 0, 0.18) 50%,
|
|
rgba(0, 0, 0, 0.62) 72%,
|
|
#000 100%
|
|
);
|
|
}
|
|
|
|
.topo-pattern-clearance-header {
|
|
-webkit-mask-image: radial-gradient(
|
|
ellipse min(90%, 40rem) min(48%, 400px) at 50% 58%,
|
|
transparent 0%,
|
|
transparent 38%,
|
|
rgba(0, 0, 0, 0.22) 56%,
|
|
rgba(0, 0, 0, 0.68) 78%,
|
|
#000 100%
|
|
);
|
|
mask-image: radial-gradient(
|
|
ellipse min(90%, 40rem) min(48%, 400px) at 50% 58%,
|
|
transparent 0%,
|
|
transparent 38%,
|
|
rgba(0, 0, 0, 0.22) 56%,
|
|
rgba(0, 0, 0, 0.68) 78%,
|
|
#000 100%
|
|
);
|
|
}
|
|
|
|
|
|
.rift-hero-settled .rift-hero-pattern-site .rift-contour-path,
|
|
.rift-hero-settled .rift-hero-pattern-water .rift-contour-path {
|
|
animation: rift-contour-pulse 8s ease-in-out infinite;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
.rift-hero-settled .rift-channel-inner {
|
|
animation: rift-river-shimmer 6s ease-in-out infinite;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
.rift-crack-line {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 179, 0, 0.15) 20%,
|
|
rgba(255, 200, 100, 0.95) 50%,
|
|
rgba(255, 179, 0, 0.15) 80%,
|
|
transparent
|
|
);
|
|
box-shadow: 0 0 20px rgba(255, 179, 0, 0.6);
|
|
transform-origin: center;
|
|
opacity: 0;
|
|
}
|
|
|
|
.rift-floor-glow {
|
|
background: radial-gradient(
|
|
ellipse 40% 18% at 50% 100%,
|
|
rgba(255, 179, 0, 0.12) 0%,
|
|
rgba(255, 179, 0, 0.04) 40%,
|
|
transparent 70%
|
|
);
|
|
opacity: 0;
|
|
}
|
|
|
|
.rift-plate-left,
|
|
.rift-plate-right {
|
|
transform-origin: center center;
|
|
}
|
|
|
|
.rift-ridge-draw,
|
|
.rift-edge-draw {
|
|
stroke-dasharray: 1;
|
|
stroke-dashoffset: 1;
|
|
}
|
|
|
|
.rift-contour-path {
|
|
stroke-dasharray: 1;
|
|
stroke-dashoffset: 1;
|
|
}
|
|
|
|
@keyframes rift-hero-crack {
|
|
0%,
|
|
8% {
|
|
opacity: 0;
|
|
transform: scaleX(0);
|
|
}
|
|
18% {
|
|
opacity: 0.6;
|
|
transform: scaleX(0.08);
|
|
}
|
|
32% {
|
|
opacity: 1;
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
opacity: 0.35;
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-floor {
|
|
0%,
|
|
25% {
|
|
opacity: 0;
|
|
transform: scale(0.6);
|
|
}
|
|
45% {
|
|
opacity: 0.7;
|
|
}
|
|
70%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-split-left {
|
|
0%,
|
|
30% {
|
|
transform: translateX(0);
|
|
}
|
|
65%,
|
|
100% {
|
|
transform: translateX(-6%);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-split-right {
|
|
0%,
|
|
30% {
|
|
transform: translateX(0);
|
|
}
|
|
65%,
|
|
100% {
|
|
transform: translateX(6%);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-draw {
|
|
0%,
|
|
20% {
|
|
stroke-dashoffset: 1;
|
|
opacity: 0;
|
|
}
|
|
55% {
|
|
stroke-dashoffset: 0.15;
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rift-hero-title-in {
|
|
0%,
|
|
58% {
|
|
opacity: 0;
|
|
transform: translateY(16px) scale(0.98);
|
|
}
|
|
78%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-contour-drift {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateX(6px) translateY(-3px);
|
|
}
|
|
}
|
|
|
|
@keyframes rift-contour-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.12;
|
|
}
|
|
50% {
|
|
opacity: 0.28;
|
|
}
|
|
}
|
|
|
|
@keyframes rift-river-shimmer {
|
|
0%,
|
|
100% {
|
|
opacity: 0.35;
|
|
stroke-width: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.75;
|
|
stroke-width: 1.6;
|
|
}
|
|
}
|
|
|
|
.rift-hero-intro .rift-floor-glow {
|
|
animation: rift-hero-floor 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-plate-left {
|
|
animation: rift-hero-split-left 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-plate-right {
|
|
animation: rift-hero-split-right 10s cubic-bezier(0.22, 0.2, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-ridge-draw,
|
|
.rift-hero-intro .rift-edge-draw {
|
|
animation: rift-hero-draw 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-contour-path,
|
|
.rift-hero-intro .rift-channel-inner {
|
|
animation: rift-hero-draw 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-intro .rift-hero-title {
|
|
animation: rift-hero-title-in 10s cubic-bezier(0.22, 0.03, 0.2, 1) forwards;
|
|
}
|
|
.rift-hero-settled .rift-contour-morph {
|
|
animation: rift-contour-drift 14s ease-in-out infinite;
|
|
}
|
|
.rift-hero-settled .rift-contour-path,
|
|
.rift-hero-settled .rift-channel-outer,
|
|
.rift-hero-settled .rift-channel-inner {
|
|
animation: rift-contour-pulse 5s ease-in-out infinite;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
.rift-hero-settled .rift-channel-inner {
|
|
animation: rift-river-shimmer 4s ease-in-out infinite;
|
|
}
|
|
.rift-hero-settled .rift-floor-glow {
|
|
opacity: 0.5;
|
|
}
|
|
.rift-hero-settled .rift-hero-title {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Static final frame — reduced motion */
|
|
.rift-hero-static .rift-floor-glow {
|
|
opacity: 0.45;
|
|
}
|
|
.rift-hero-static .rift-contour-path,
|
|
.rift-hero-static .rift-channel-outer,
|
|
.rift-hero-static .rift-channel-inner {
|
|
stroke-dashoffset: 0;
|
|
opacity: 1;
|
|
}
|
|
.rift-hero-static .rift-hero-title {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Site-wide pulsing curved lines */
|
|
@keyframes rift-pulse-opacity {
|
|
0%,
|
|
100% {
|
|
opacity: 0.14;
|
|
}
|
|
50% {
|
|
opacity: calc(0.22 + var(--rift-scroll, 0) * 0.35);
|
|
}
|
|
}
|
|
|
|
.rift-pulse-animate {
|
|
animation: rift-pulse-opacity 4.5s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rift-hero-intro .rift-floor-glow,
|
|
.rift-hero-intro .rift-channel-open,
|
|
.rift-hero-intro .rift-contour-path,
|
|
.rift-hero-intro .rift-channel-outer,
|
|
.rift-hero-intro .rift-channel-inner,
|
|
.rift-hero-intro .rift-hero-title,
|
|
.rift-hero-settled .rift-contour-morph,
|
|
.rift-hero-settled .rift-contour-path,
|
|
.rift-hero-settled .rift-channel-inner,
|
|
.rift-ambient-pulse .rift-contour-path,
|
|
.rift-pulse-animate {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
}
|