/* ---------------------------------------------------------------
   Ayush Patel — personal site
   Hero: a night sky over mountains with everything I've built in
   orbit around my name; scrolling brings the sunrise. The reading
   page below is a quiet single column, and the footer ends at
   nightfall.
   --------------------------------------------------------------- */

:root {
    --ivory: #faf9f5;
    --ivory-2: #f0eee6;
    --rule: #e2dfd4;
    --slate: #141413;
    --slate-2: #3d3d3a;
    --slate-3: #6b6a64;
    --clay: #c8643f;
    --night: #070a18;
    --serif: "Newsreader", Georgia, serif;
    --sans: "DM Sans", system-ui, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --c-whiz: #f27bb0;
    --c-isro: #ff8a4c;
    --c-nrcrew: #6aa8ff;
    --c-ide: #3fd9a8;
    --c-video: #b28cff;
    --c-tele: #ffc94d;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { background: var(--ivory); color: var(--slate); font-family: var(--serif); font-size: 1.125rem; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--clay); color: #fff; }

/* ---------------- Nav ---------------- */
.nav {
    position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 2rem;
    height: 4.25rem; padding: 0 clamp(1rem, 3vw, 2rem); font-family: var(--sans); font-size: 0.9375rem; color: var(--ivory);
    transition: background 0.4s, color 0.4s, box-shadow 0.4s; animation: fade 1.2s var(--ease) 2s both;
}
.nav a { text-decoration: none; }
.nav .mark { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; opacity: 0; transition: opacity 0.4s; }
.nav .links { display: flex; gap: 1.75rem; margin-left: auto; }
.nav .links a { opacity: 0.8; transition: opacity 0.2s; }
.nav .links a:hover { opacity: 1; }
.nav .btn { padding: 0.55rem 1.1rem; border-radius: 99px; border: 1px solid rgba(250,249,245,0.35); background: rgba(250,249,245,0.12); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.nav .btn:hover { background: var(--ivory); color: var(--slate); }
.nav.solid { background: rgba(250,249,245,0.96); color: var(--slate); box-shadow: 0 1px 0 var(--rule); }
.nav.solid .mark, .nav.named .mark { opacity: 1; }
.nav.solid .btn { background: var(--slate); color: var(--ivory); border-color: var(--slate); }

/* ---------------- Hero scene ---------------- */
.wrap { --tb: 0px; position: relative; height: 340vh; height: 340lvh; }
/* The scene fills the largest viewport so nothing below peeks in when a phone's
   address bar collapses; --tb is the height that bar can take up, and anything
   pinned to the bottom stays above it */
@supports (height: 100lvh) { .wrap { --tb: calc(100lvh - 100svh); } }
.scene { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; isolation: isolate; background: var(--night); }
.sky, .sky-dawn { position: absolute; inset: 0; z-index: -5; }
.sky { background: linear-gradient(180deg, #04060f 0%, #0a1230 34%, #1a2856 60%, #3a3d6c 73%, #6b5476 82%, #1a1522 100%); }
.sky-dawn { opacity: 0; will-change: opacity; background: linear-gradient(180deg, #1d2d5c 0%, #3d65a3 28%, #8eaad2 48%, #e9c6b3 62%, #f7a26a 70%, #ea6a35 75%, #7a321b 82%, #2a1610 100%); }
.layer { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.stars { position: absolute; inset: -3%; z-index: -4; will-change: opacity, transform; }
.stars canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Twinkling is two pre-drawn star layers breathing in and out on the GPU, not a redraw every frame */
.tw-a { animation: twinkle 3.1s ease-in-out infinite alternate; }
.tw-b { animation: twinkle 4.3s ease-in-out -2s infinite alternate; }
.scene.inactive .tw { animation-play-state: paused; }
.meteor { position: absolute; left: 0; top: 0; width: 140px; height: 1.5px; border-radius: 1px; opacity: 0; pointer-events: none; transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95)); }
.sun {
    position: absolute; left: 50%; bottom: 18%; z-index: -3; width: min(50vw, 42rem); aspect-ratio: 1;
    translate: -50% 58%; opacity: 0.22; will-change: transform, opacity;
    background: radial-gradient(circle, rgba(255,238,205,0.95) 0 6%, rgba(255,190,120,0.55) 14%, rgba(255,140,80,0.18) 34%, transparent 62%);
}
.ridges { z-index: -1; }
.ridge { position: absolute; left: -3%; width: 106%; bottom: 0; display: block; will-change: transform; }
/* Daylight copies of the ridges fade in over the night ones, so nothing is repainted while scrolling */
.ridge.day { opacity: 0; will-change: transform, opacity; }
.r1 { height: 34%; }
.r2 { height: 25%; }
.r3 { height: 17%; }

/* Orbits + satellites share one coordinate space */
.system { position: absolute; inset: 0; }
#orbits, #trails { position: absolute; inset: 0; width: 100%; height: 100%; }
#orbits { z-index: -2; animation: fade 2s var(--ease) 1.2s backwards; will-change: transform, opacity; }
#orbits ellipse { fill: none; stroke: rgba(250,249,245,0.2); stroke-width: 1; stroke-dasharray: 1.5 6; stroke-linecap: round; }
#trails { z-index: -2; }

.planet {
    position: absolute; left: 0; top: 0; z-index: 2; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%;
    background: none; cursor: pointer; will-change: transform;
}
.planet.back { z-index: 0; }
/* Hit area stays comfortable even for tiny Pluto */
.planet::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.planet .body {
    position: absolute; inset: 0; border-radius: 50%; transition: scale 0.3s var(--ease);
    box-shadow: inset calc(var(--s) * -0.22) calc(var(--s) * -0.18) calc(var(--s) * 0.35) rgba(0,0,0,0.55), 0 0 calc(var(--s) * 0.9) color-mix(in srgb, var(--c) 35%, transparent);
}
.planet:hover .body, .planet:focus-visible .body, .planet.on .body { scale: 1.35; }
.p-earth .body {
    background:
        radial-gradient(circle at 62% 58%, #57b36f 0 16%, transparent 18%),
        radial-gradient(circle at 30% 64%, #4ea566 0 11%, transparent 13%),
        radial-gradient(circle at 44% 30%, #6cc184 0 9%, transparent 11%),
        radial-gradient(circle at 35% 30%, #d6ecff 0 6%, #3f8fe0 32%, #1f5aa6 70%, #0d2c5c 100%);
}
.p-mars .body { background: radial-gradient(circle at 60% 40%, rgba(120,40,20,0.5) 0 12%, transparent 16%), radial-gradient(circle at 35% 30%, #ffc9a8 0 6%, #df6c3f 40%, #93321a 100%); }
.p-jupiter .body {
    background:
        radial-gradient(ellipse 20% 11% at 63% 64%, #b5553a 0 55%, transparent 100%),
        linear-gradient(180deg, #ead6b3 0 16%, #c6925f 16% 25%, #f1e3c8 25% 42%, #b9794a 42% 52%, #efdcbc 52% 70%, #c99b6c 70% 80%, #e3cba4 80%);
}
.p-saturn .body { background: linear-gradient(180deg, #f1e2bc 0 30%, #d9bd86 30% 40%, #efdcb2 40% 62%, #cfae74 62% 72%, #e8d3a6 72%); }
/* Saturn's ring: the full ring sits behind the planet, the near half is drawn again in front */
.p-saturn::after, .p-saturn .ring {
    content: ""; position: absolute; left: 50%; top: 50%; width: 240%; height: 60%; translate: -50% -50%; rotate: -20deg;
    border-radius: 50%; border: 2px solid rgba(233,214,170,0.8); pointer-events: none;
}
.p-saturn::after { z-index: -1; }
.p-saturn .ring { clip-path: inset(50% 0 0 0); transition: scale 0.3s var(--ease); }
.p-saturn:hover .ring, .p-saturn.on .ring { scale: 1.35; }
.p-neptune .body { background: radial-gradient(ellipse 30% 12% at 55% 42%, rgba(255,255,255,0.35), transparent 70%), radial-gradient(circle at 35% 30%, #b8e0ff 0 6%, #4a7ff0 40%, #1b2f8f 100%); }
.p-pluto .body { background: radial-gradient(circle at 58% 60%, #f2e2cc 0 22%, transparent 26%), radial-gradient(circle at 35% 30%, #e6d4bd 0 8%, #a88a6c 50%, #5e4a38 100%); }

.tip {
    position: absolute; z-index: 10; width: 16rem; padding: 1.1rem 1.25rem 1.2rem; border-radius: 16px; color: var(--ivory);
    background: rgba(14,18,44,0.94); border: 1px solid rgba(250,249,245,0.16);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); opacity: 0; translate: 0 8px; pointer-events: none;
    transition: opacity 0.25s, translate 0.3s var(--ease);
}
.tip.on { opacity: 1; translate: 0 0; }
.tip small { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,249,245,0.6); display: flex; align-items: center; gap: 0.5rem; }
.tip small i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tip h3 { margin-top: 0.4rem; font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.tip p { margin-top: 0.45rem; font-family: var(--sans); font-size: 0.875rem; line-height: 1.55; color: rgba(250,249,245,0.72); }

.copy {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 1.25rem calc(8vh + var(--tb)); text-align: center; color: var(--ivory); pointer-events: none;
}
.copy .eyebrow, .copy .sub { will-change: opacity, transform; }
.eyebrow { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.78; animation: rise 1.2s var(--ease) 0.3s backwards; }
.copy h1 { transform-origin: 0 0; will-change: transform; margin-top: 1.1rem; font-weight: 300; font-size: clamp(3.75rem, 11vw, 9.5rem); line-height: 0.92; letter-spacing: -0.035em; text-shadow: 0 6px 60px rgba(6,10,30,0.55); transition: text-shadow 0.4s; }
/* A big blurred shadow is expensive to redraw while the name is scaling */
.copy h1.flying { text-shadow: none; }
.copy h1 .ch { display: inline-block; animation: letter 1.6s var(--ease) backwards; }
.copy h1 em { font-style: italic; }
.sub { text-wrap: balance; max-width: 36rem; margin-top: 1.4rem; font-size: clamp(1.1rem, 1.9vw, 1.4rem); font-style: italic; font-weight: 300; opacity: 0.88; animation: rise 1.2s var(--ease) 1.8s backwards; }

.caption {
    position: absolute; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); bottom: calc(1.5rem + var(--tb) + env(safe-area-inset-bottom, 0px)); z-index: 3;
    display: flex; justify-content: space-between; gap: 1rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(250,249,245,0.68); animation: fade 1.2s var(--ease) 2.2s both;
}
.clock { font-variant-numeric: tabular-nums; }

/* Rim light on the ridges as the sun comes up */
.rim { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0.85; }
.rim-glow { stroke-width: 8; opacity: 0.18; }

/* Good morning, once the sun is up */
.hello {
    position: absolute; left: 0; right: 0; top: calc(30% - var(--tb) / 2); z-index: 1; text-align: center; color: var(--ivory); pointer-events: none;
    opacity: 0; translate: 0 16px; will-change: opacity, transform; text-shadow: 0 2px 30px rgba(30,45,92,0.35);
}
.hello-hi { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -0.03em; }
.hello-sub { margin-top: 1rem; font-family: var(--sans); font-size: 0.95rem; opacity: 0.85; }

/* ---------------- Middle: quiet reading column ---------------- */
.page { max-width: 38rem; margin: 0 auto; padding: clamp(5rem, 10vw, 7.5rem) 1.25rem clamp(5rem, 10vw, 7rem); font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--slate-2); }
.sec { scroll-margin-top: 6rem; }
.sec + .sec { margin-top: 4.5rem; }
.h { margin-bottom: 1.25rem; font-size: 0.875rem; font-weight: 500; color: var(--slate-3); }
.page p + p { margin-top: 1rem; }
.intro { color: var(--slate); }
.page a { text-decoration: underline; text-decoration-color: rgba(20,20,19,0.25); text-underline-offset: 0.2em; transition: text-decoration-color 0.2s; }
.page a:hover { text-decoration-color: currentColor; }

.list { list-style: none; margin: 0 -0.75rem; }
.row { --c: var(--clay); display: block; padding: 0.85rem 0.75rem; border-radius: 10px; scroll-margin-top: 7rem; transition: background 0.25s; }
.row + .row { margin-top: 0.25rem; }
a.row { text-decoration: none !important; }
a.row:hover, .row.flash { background: var(--ivory-2); }
.row-top { display: flex; align-items: baseline; gap: 0.75rem; }
.row-top::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); translate: 0 -0.15em; }
.row-title { font-weight: 500; color: var(--slate); }
.row-when { margin-left: auto; padding-left: 1rem; font-size: 0.875rem; color: var(--slate-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-sub, .row-text, .row-stack { padding-left: calc(6px + 0.75rem); }
.page .row p + p { margin-top: 0.3rem; }
.row-sub { color: var(--slate-3); }
.row-text { color: var(--slate-3); }
.row-stack { font-size: 0.8125rem; color: var(--slate-3); opacity: 0.85; }
.arrow { display: inline-block; margin-left: 0.3rem; opacity: 0; translate: -4px 0; transition: opacity 0.2s, translate 0.25s var(--ease); color: var(--slate-3); }
a.row:hover .arrow { opacity: 1; translate: 0 0; }

.reveal-ready .reveal { opacity: 0; translate: 0 12px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); }
.reveal-ready .reveal.in { opacity: 1; translate: 0 0; }

/* ---------------- Projects page ---------------- */
.page-head { padding-top: calc(4.25rem + clamp(3.5rem, 8vw, 6rem)); }
.back { font-size: 0.875rem; color: var(--slate-3); }
.page-title { margin-top: 1.25rem; font-family: var(--serif); font-weight: 300; font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1; letter-spacing: -0.035em; color: var(--slate); }
.page-title em { font-style: italic; }
.page-lede { margin-top: 1rem; color: var(--slate-3); }
.write-up { --c: var(--clay); scroll-margin-top: 6rem; }
.write-up + .write-up { margin-top: 3.5rem; }
.write-up .row-top { margin-bottom: 0.3rem; }
.write-up .row-sub { margin-bottom: 0.9rem; }
.write-up .row-title { font-size: 1.125rem; line-height: 1.4; }
.page .write-up p + p { margin-top: 0; }
.page .write-up .row-stack { margin-top: 0.9rem; }
.nav.static { animation: none; }

/* Footer: the page ends at nightfall */
.footer {
    position: relative; overflow: hidden; color: rgba(250,249,245,0.72); font-family: var(--sans); font-size: 0.9rem;
    padding: clamp(6rem, 12vw, 9rem) clamp(1rem, 3vw, 2rem) calc(2rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, var(--ivory) 0%, #f3c3a0 14%, #d9795a 30%, #5b3a6b 52%, #1a2248 74%, var(--night) 100%);
}
.footer .inner { position: relative; max-width: 72rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.footer .mark { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; color: var(--ivory); }
.footer .mark em { font-style: italic; }
.footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer a { color: var(--ivory); text-decoration: none; }
.footer a:hover { opacity: 0.7; }
.footer .base { position: relative; max-width: 72rem; margin: 3rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(250,249,245,0.14); font-size: 0.8rem; color: rgba(250,249,245,0.5); }


@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes letter { from { opacity: 0; translate: 0 0.35em; filter: blur(12px); } }
@keyframes letter-lite { from { opacity: 0; translate: 0 0.35em; } }
@keyframes twinkle { to { opacity: 0.15; } }

@media (max-width: 700px) {
    .nav .links { display: none; }
    .nav .btn { margin-left: auto; }
    .copy h1 { font-size: clamp(4.25rem, 23vw, 6.5rem); }
    .copy h1 .word { display: block; }
    .ridge { left: 0; width: 100%; }
    /* Letters arrive without blur on phones; blurring each glyph is heavy on small GPUs */
    .copy h1 .ch { animation-name: letter-lite; }
    .copy h1 { text-shadow: none; transition: none; }
    .tw, #trails { display: none; }
    .caption .hint { display: none; }
    .caption { font-size: 0.62rem; }
    .caption .clock { display: none; }
    .tip { left: 1rem !important; right: 1rem; width: auto; top: auto !important; bottom: calc(4.5rem + var(--tb)); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal-ready .reveal { opacity: 1; translate: 0 0; }
    #trails { display: none; }
}