:root{--bg:#1c1c1c;--fg:#e6e6e6;--accent:#41a890;--sub:#ffff66}.hero{--R:220vw;--rise:max(7.2vw,76px);--u:clamp(4px,.55vw,10px);position:relative;isolation:isolate;overflow:hidden;height:clamp(260px,24vw,460px);background:var(--bg)}.hero__sky{position:absolute;inset:0;z-index:0}.hero__sky::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(65,168,144,.20),transparent 70%),linear-gradient(to top,rgba(65,168,144,.14),transparent 60%)}.stars{position:absolute;inset:0;background-repeat:repeat;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 88%);mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 88%);will-change:opacity}.stars--a{background-size:242px 173px;background-image:radial-gradient(circle at 30px 40px,rgba(230,230,230,.5) 0 .8px,transparent 1.5px),radial-gradient(circle at 130px 70px,rgba(230,230,230,.55) 0 .8px,transparent 1.5px),radial-gradient(circle at 210px 140px,rgba(230,230,230,.6) 0 .9px,transparent 1.5px)}.stars--b{background-size:311px 204px;background-image:radial-gradient(circle at 290px 20px,rgba(230,230,230,.65) 0 .9px,transparent 1.5px),radial-gradient(circle at 170px 90px,rgba(230,230,230,.55) 0 .8px,transparent 1.4px),radial-gradient(circle at 70px 150px,rgba(230,230,230,.5) 0 .8px,transparent 1.4px)}.stars--c{background-size:293px 257px;background-image:radial-gradient(circle at 60px 200px,rgba(230,230,230,.6) 0 1px,transparent 1.7px),radial-gradient(circle at 220px 60px,rgba(230,230,230,.7) 0 1px,transparent 1.7px),radial-gradient(circle at 140px 130px,rgba(65,168,144,.8) 0 1px,transparent 1.7px),radial-gradient(circle at 260px 230px,rgba(230,230,230,.5) 0 1px,transparent 1.7px),radial-gradient(circle at 20px 100px,rgba(230,230,230,.55) 0 1px,transparent 1.7px);animation:twinkle 7s ease-in-out infinite alternate}.stars--d{background-size:867px 331px;background-image:radial-gradient(circle at 120px 30px,rgba(255,255,102,.95) 0 1.3px,transparent 2.6px);animation:twinkle 5s ease-in-out -2s infinite alternate}.stars--e{background-size:648px 331px;background-image:radial-gradient(circle at 300px 260px,rgba(230,230,230,.95) 0 1.5px,transparent 3px),radial-gradient(circle at 210px 280px,rgba(255,255,102,.8) 0 1.1px,transparent 2.3px);animation:twinkle 5s ease-in-out -2s infinite alternate}@keyframes twinkle{from{opacity:.45}to{opacity:1}}.galaxy{position:absolute;right:9%;top:6%;width:clamp(140px,20vw,380px);aspect-ratio:1;transform:rotate(-24deg) scaleY(.42);filter:drop-shadow(0 0 10px rgba(65,168,144,.35))}.galaxy svg{display:block;width:100%;height:100%;will-change:transform;animation:spin 420s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.orbit{position:absolute;left:50%;width:calc(2 * (var(--R) + var(--d)));aspect-ratio:1;bottom:calc(var(--rise) - 2 * var(--R) - var(--d));transform:translateX(-50%);border-radius:50%;border:1px dashed rgba(230,230,230,.16)}.orbit--1{--d:calc(9 * var(--u))}.orbit--2{--d:calc(19 * var(--u))}.orbit--3{--d:calc(30 * var(--u))}.orbiter{position:absolute;left:50%;bottom:calc(var(--rise) - var(--R));width:0;height:0;transform:rotate(var(--a0));will-change:opacity,transform;animation:pass var(--t) linear var(--delay) infinite}.orbiter::after{content:"";position:absolute;left:calc(var(--s) / -2);bottom:calc(var(--R) + var(--d) - var(--s) / 2);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 calc(var(--s) * 1.6) calc(var(--s) * .3) var(--glow)}@keyframes pass{0%{transform:rotate(-16deg);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:rotate(16deg);opacity:0}}.orbiter--moon{--d:calc(9 * var(--u));--s:clamp(6px,.7vw,13px);--c:var(--fg);--glow:rgba(230,230,230,.35);--t:90s;--delay:-15s;--a0:-10deg}.orbiter--planet{--d:calc(19 * var(--u));--s:clamp(7px,.85vw,16px);--c:var(--accent);--glow:rgba(65,168,144,.5);--t:150s;--delay:-100s;--a0:3deg}.orbiter--sun{--d:calc(30 * var(--u));--s:clamp(11px,1.3vw,24px);--c:var(--sub);--glow:rgba(255,255,102,.45);--t:300s;--delay:-80s;--a0:-6deg}.earth{position:absolute;left:50%;width:calc(2 * var(--R));aspect-ratio:1;bottom:calc(var(--rise) - 2 * var(--R));transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle closest-side,#2a2716 0,#2a2716 calc(100% - 15 * var(--u) - 1px),rgba(65,168,144,.45) calc(100% - 15 * var(--u) - 1px),rgba(65,168,144,.45) calc(100% - 15 * var(--u)),#26261b calc(100% - 15 * var(--u)),#202522 calc(100% - 7 * var(--u) - 1px),rgba(65,168,144,.45) calc(100% - 7 * var(--u) - 1px),rgba(65,168,144,.45) calc(100% - 7 * var(--u)),#212826 calc(100% - 7 * var(--u)),#25302d calc(100% - 2 * var(--u) - 1px),rgba(65,168,144,.45) calc(100% - 2 * var(--u) - 1px),rgba(65,168,144,.45) calc(100% - 2 * var(--u)),#2f403a calc(100% - 2 * var(--u)),#3a5c52 100%);box-shadow:inset 0 2px 0 rgba(140,235,210,.55),0 0 40px 4px rgba(65,168,144,.30)}.earth::before{content:"";position:absolute;inset:calc(-6 * var(--u));border-radius:50%;background:radial-gradient(circle closest-side,transparent calc(100% - 6 * var(--u) - 1px),rgba(65,168,144,.50) calc(100% - 6 * var(--u)),rgba(65,168,144,.12) calc(100% - 2 * var(--u)),transparent 100%)}.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:calc(var(--rise) * .8);background:linear-gradient(to top,var(--bg),rgba(28,28,28,0));pointer-events:none}.hero__content{position:relative;z-index:2;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;--gutter:max(clamp(20px,5vw,48px),calc((100% - 1200px) / 2));padding:0 var(--gutter) calc(var(--rise) * .55)}.hero__eyebrow{margin:0 0 .6em;font:500 clamp(.72rem,.6rem + .35vw,.95rem)/1.4 "Noto Sans JP",sans-serif;letter-spacing:.14em;color:var(--accent)}.hero__title{margin:0;font:700 clamp(1.55rem,1rem + 2vw,2.75rem)/1.25 "Zen Maru Gothic","Noto Sans JP",sans-serif;letter-spacing:.04em;color:var(--fg);text-shadow:0 0 18px var(--bg),0 0 6px var(--bg)}.hero__title span{display:inline-block}@media (max-width:767px){.hero{height:210px;--rise:52px}.galaxy{right:4%;top:3%;width:120px}.orbit--3,.orbiter--sun{display:none}.orbiter--planet{--a0:10deg}.galaxy svg{animation:none}.stars--c{animation:none;opacity:.9;}.stars--e{animation:none;opacity:.6;}}@media (prefers-reduced-motion:reduce){.stars--c,.stars--d,.stars--e,.galaxy svg,.orbiter{animation:none}}