@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Noto+Serif+SC:wght@300;500&display=swap";:root{color-scheme:dark;--ink: #090806;--ivory: #eee9df;--muted: rgba(231, 225, 213, .52);--accent: #d75f43;--serif: "Cormorant Garamond", "Times New Roman", serif;--cn: "Noto Serif SC", serif}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0;overflow:hidden;background:var(--ink)}body{color:var(--ivory);font-family:var(--cn);opacity:0;transition:opacity 1.4s ease}body.revealed{opacity:1}#app{min-height:100svh;position:relative;isolation:isolate;background:radial-gradient(circle at 50% 46%,rgba(159,122,79,.055),transparent 28%),linear-gradient(115deg,#070705,#0c0b08 48%,#070706)}#universe,.aurora,.grain{position:absolute;inset:0;width:100%;height:100%}#universe{z-index:-3}.aurora{z-index:-2;filter:blur(55px);opacity:.5;background:radial-gradient(ellipse 34% 20% at 50% 48%,rgba(183,142,91,.08),transparent 72%),radial-gradient(ellipse 18% 18% at 72% 32%,rgba(197,77,49,.035),transparent 75%);animation:breathe 14s ease-in-out infinite alternate}.grain{z-index:4;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(38px,env(safe-area-inset-top)) 24px max(32px,env(safe-area-inset-bottom));text-align:center}.recipient{position:absolute;top:max(34px,env(safe-area-inset-top));right:38px;margin:0;font:500 8px/1 Arial,sans-serif;letter-spacing:.38em;color:#e7e1d54d;opacity:0;animation:enter 1.2s 2.5s ease forwards}.recipient strong{color:var(--ivory);font-weight:500}.eyebrow{position:relative;top:-1em;margin:0 0 15px;font:500 8px/1.5 Arial,sans-serif;letter-spacing:.5em;color:#e7e1d56e;transform:translateY(16px);opacity:0;animation:enter 1.2s 1.15s cubic-bezier(.22,1,.36,1) forwards}.eyebrow i{display:inline-block;width:3px;height:3px;margin:0 .72em .16em .1em;border-radius:50%;background:#e7e1d56b}h1{position:relative;margin:0;font:300 clamp(150px,22vw,310px)/.68 var(--serif);letter-spacing:-.065em;filter:none;z-index:1}h1 span{display:inline-block;color:var(--ivory);text-shadow:0 1px 0 rgba(255,255,255,.16),0 0 34px rgba(232,222,202,.06);opacity:0;transform:translateY(45px) scale(.86);filter:blur(13px);animation:letter 1.9s cubic-bezier(.16,1,.3,1) forwards}.orbit-mark{position:absolute;top:50%;left:50%;width:min(61vw,740px);aspect-ratio:2.8;border:1px solid rgba(226,218,200,.13);border-radius:50%;transform:translate(-50%,-70%) rotate(-8deg);box-shadow:none;pointer-events:none;opacity:0;animation:orbit-in 2s 1.2s ease forwards}.orbit-mark i{position:absolute;width:6px;height:6px;top:51%;left:-3px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #d75f4317,0 0 14px #d75f4361;offset-path:ellipse(50% 50% at 50% 50%);animation:satellite 12s linear infinite}.origin{display:flex;align-items:center;gap:14px;margin-top:clamp(38px,6vh,68px);opacity:0;transform:translateY(12px);animation:enter 1.2s 1.55s ease forwards}.origin>span{width:clamp(35px,5vw,64px);height:1px;background:linear-gradient(90deg,transparent,rgba(222,214,198,.2))}.origin>span:last-child{transform:scaleX(-1)}.origin p{margin:0;display:flex;align-items:center;gap:10px;font:500 8px/1 Arial,sans-serif;letter-spacing:.4em;color:#e7e1d57a}.origin i{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #d75f4314}blockquote{margin:clamp(20px,3vh,32px) 0 0;font:300 clamp(13px,1.15vw,17px)/2 var(--cn);letter-spacing:.22em;color:#f5efffb3;opacity:0;animation:enter 1.5s 1.9s ease forwards}.mobile-break{display:none}footer{position:absolute;bottom:max(33px,env(safe-area-inset-bottom));left:50%;display:flex;align-items:center;gap:16px;transform:translate(-50%);opacity:0;animation:footer-enter 1.3s 2.3s ease forwards}footer p,.coordinates,.signal{margin:0;white-space:nowrap;font:500 8px/1.6 Arial,sans-serif;letter-spacing:.36em;color:#e1d8f661}footer span{width:35px;height:1px;background:linear-gradient(90deg,transparent,rgba(222,214,198,.28))}footer span:last-child{transform:scaleX(-1)}.coordinates,.signal{position:absolute;bottom:34px;opacity:0;animation:enter 1s 2.6s ease forwards}.coordinates{left:37px}.signal{right:37px}.signal i{display:inline-block;width:4px;height:4px;margin-right:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px #d75f43a6;animation:pulse 2s ease infinite}.static-universe #app:before{content:"";position:absolute;inset:0;z-index:-2;background-image:radial-gradient(circle at 23% 36%,white 0 1px,transparent 1.5px),radial-gradient(circle at 73% 25%,#d9d2c6 0 1px,transparent 1.7px),radial-gradient(circle at 62% 75%,#d75f43 0 1px,transparent 1.5px);background-size:173px 163px,237px 219px,281px 257px}@keyframes letter{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes enter{to{opacity:1;transform:translateY(0)}}@keyframes footer-enter{to{opacity:1}}@keyframes orbit-in{to{opacity:1;transform:translate(-50%,-70%) rotate(-13deg)}}@keyframes satellite{0%{offset-distance:0%}to{offset-distance:100%}}@keyframes breathe{to{transform:scale(1.12) rotate(2deg);opacity:1}}@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}@media(max-width:700px){.hero{justify-content:center;padding-inline:20px}.recipient{top:max(25px,env(safe-area-inset-top));right:22px;font-size:7px}.eyebrow{font-size:6px;letter-spacing:.3em;margin-bottom:16px}h1{font-size:clamp(150px,49vw,195px)}.orbit-mark{width:calc(100vw - 32px);max-width:430px;aspect-ratio:2.25;transform:translate(-50%,-76%) rotate(-9deg)}.origin{margin-top:68px;gap:10px}.origin>span{width:28px}.origin p{font-size:7px;letter-spacing:.3em}blockquote{font-size:12px;line-height:2.15;letter-spacing:.15em}.mobile-break{display:initial}.coordinates,.signal{display:none}footer{bottom:max(25px,env(safe-area-inset-bottom));gap:11px}footer span{width:18px}footer p{font-size:7px}.aurora{filter:blur(32px)}}@media(max-height:620px){h1{font-size:min(29vh,150px)}.origin{margin-top:28px}blockquote{margin-top:8px}footer{bottom:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}body{opacity:1}}
