/* A slow current: ambient drift, pointer response and scroll each have their own layer. */
:root { --current-ease: cubic-bezier(.22, 1, .36, 1); }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid #a8e6cf; outline-offset: 6px; }
.nav { padding-top: 112px; transform: translateX(-16px); visibility: hidden; transition: opacity .35s ease, transform .5s var(--current-ease), visibility .35s; }
.nav.mobile-open { visibility: visible; transform: translateX(0); }
span.nav-project { cursor: default; }
span.nav-project:hover { padding-left: 12px; border-left-color: transparent; text-shadow: none; }
span.nav-project::before { display: none; }
.hero { isolation: isolate; }
body:has(#lottie-jellyfish) .hero { height: 100svh; min-height: 420px; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 48% 42%, rgba(61, 143, 136, .10), transparent 53%), radial-gradient(ellipse at 70% 65%, rgba(94, 67, 141, .07), transparent 45%); }
.stars { inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); transition: none; }
.star { animation: currentTwinkle var(--duration, 7s) ease-in-out var(--delay, 0s) infinite; opacity: .25; }
@keyframes currentTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: var(--opacity, .5); } }
.jellyfish-container { transition: none; will-change: transform, opacity; }
.jellyfish-drift { animation: currentDrift 22s ease-in-out infinite; }
.jellyfish-drift:has(.swim-driven) { animation: none; }
.swim-driven { transform-origin: 50% 48%; will-change: transform; }
@keyframes currentDrift { 0%, 100% { transform: translate3d(0, 8px, 0) rotate(-2deg); } 33% { transform: translate3d(22px, -22px, 0) rotate(2deg); } 66% { transform: translate3d(-16px, -34px, 0) rotate(-1deg); } }
#lottie-jellyfish, #lottie-jellyfish-cta { position: relative; }
.jellyfish-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.is-loaded > .jellyfish-fallback { display: none; }
#lottie-jellyfish { width: min(600px, 88vw, 76svh); height: min(600px, 88vw, 76svh); }
.about { animation: none; }
.projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.project-showcase-card { --lift: 0px; opacity: 1; transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .65s var(--current-ease), border-color .4s ease, box-shadow .5s ease; display: flex; flex-direction: column; animation: none; }
.project-showcase-header { flex-wrap: wrap; gap: 12px; }
.project-showcase-card p { flex: 1; }
.project-showcase-card::before { background: radial-gradient(300px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(168, 230, 207, .09), transparent 75%); pointer-events: none; }
.project-showcase-card::after { display: none; }
.project-showcase-card:hover, .project-showcase-card:focus-visible { --lift: -5px; border-color: rgba(111, 201, 168, .45); box-shadow: 0 16px 40px rgba(0, 0, 0, .24), 0 0 28px rgba(111, 201, 168, .05); }
.project-showcase-card:focus-visible::before { opacity: 1; }
.project-visit { opacity: .8; transform: none; margin-top: auto; }
.project-showcase-card:focus-visible .project-visit { opacity: 1; }
.project-showcase-card:focus-visible .project-visit::after { transform: translateX(5px); }
.project-coming-soon { cursor: default; border-style: dashed; background: linear-gradient(145deg, rgba(111, 201, 168, .035), rgba(94, 67, 141, .06)); }
.project-coming-soon:hover { --lift: 0px; box-shadow: none; border-color: rgba(111, 201, 168, .25); }
.project-status { font-size: .8125rem; color: #91cbb6; }
.projects-showcase::before { max-width: 100%; }
.reveal-pending { opacity: 0; translate: 0 20px; }
.reveal-ready { opacity: 1; translate: 0 0; transition: opacity .9s var(--current-ease), translate .9s var(--current-ease); }
.star-dust { z-index: 3; }
.motion-paused *, .motion-paused *::before { animation-play-state: paused !important; }
@media (max-width: 968px) {
    .nav { padding: 100px 24px 30px; max-height: 85svh; }
    .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-showcase-header { flex-direction: row; }
}
@media (max-width: 620px) {
    .projects-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .content { padding: 72px 20px; }
    .projects-showcase { padding: 60px 0; }
    .about { margin-bottom: 60px; }
    .project-showcase-card { padding: 28px; }
}
@media (hover: none) {
    .project-showcase-card:hover { --lift: 0px; }
    .star-dust { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .mobile-menu-toggle, .home-link, .reveal-pending { opacity: 1; translate: none; }
    .jellyfish-container, .stars, .project-showcase-card { transform: none !important; }
    .star-dust { display: none; }
}
.project-showcase-card.reveal-ready {
    transition: opacity .9s var(--current-ease), translate .9s var(--current-ease), transform .65s var(--current-ease), border-color .4s ease, box-shadow .5s ease;
}
@media (prefers-reduced-motion: reduce) {
    .project-showcase-card.reveal-ready { transition: none; }
}

/* A small amount of orientation keeps the opening focused on the jellyfish. */
.hero-wordmark {
    position: absolute;
    top: 38px;
    right: 38px;
    max-width: calc(100% - 124px);
    z-index: 4;
    color: #a8e6cf;
    text-decoration: none;
    text-align: right;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    letter-spacing: .02em;
}
.hero-wordmark span { display: block; margin-top: 6px; font-size: .8125rem; color: #8eb8a8; letter-spacing: .025em; }

#universe { scroll-margin-top: 36px; }
@media (max-width: 620px) {
    .hero-wordmark { top: 38px; right: 24px; font-size: 1rem; }
    .hero-wordmark span { font-size: .75rem; }
}