@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --lime:#c8ff6b; --ink:#e8ebe2; --muted:#a7aaa0; --mono:"DM Mono", monospace; --sans:"Manrope", Arial, sans-serif; }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; background:#102f30; } body { color:var(--ink); font-family:var(--sans); overflow:hidden; cursor:none; }
.experience { min-height:100svh; position:relative; isolation:isolate; display:grid; grid-template-rows:101px 1fr 58px; overflow:hidden; border:1px solid rgba(220,255,240,.2); }
.experience::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:3; background:linear-gradient(90deg,rgba(5,19,19,.18),transparent 28%,transparent 74%,rgba(5,19,19,.09)); }
.topbar,.footer { position:relative; z-index:5; display:flex; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.045em; color:#bdc7bd; }
.topbar { padding:0 clamp(20px,4.5vw,78px); border-bottom:1px solid rgba(222,242,224,.16); gap:21px; }
.brand { font-family:var(--sans); font-weight:800; font-size:19px; color:#f1f3e9; letter-spacing:-.07em; }.brand sup { font-size:7px; margin-left:2px; vertical-align:top; }
.study { color:#899b91; }.observation { position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; }.status { margin-left:auto; display:flex; align-items:center; gap:9px; color:#bfc7bb; white-space:nowrap; }.status i { width:7px; height:7px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 0 rgba(200,255,107,.45); animation:pulse 2s infinite; }
.hero { position:relative; min-height:0; }.atmosphere { position:absolute; inset:0; background:radial-gradient(ellipse 48% 75% at 78% 52%,rgba(105,170,145,.34),transparent 60%),radial-gradient(circle at 15% 100%,rgba(56,118,111,.33),transparent 42%),linear-gradient(112deg,#102b2d 0%,#173b3b 46%,#234f50 100%); }
.content { position:relative; z-index:4; max-width:47%; padding:clamp(38px,9vh,105px) 0 30px clamp(24px,5.1vw,88px); }.eyebrow { color:var(--lime); font:500 10px/1.3 var(--mono); letter-spacing:.09em; margin:0 0 clamp(22px,3.2vh,42px); }
h1 { margin:0; font-size:clamp(54px,7.35vw,124px); line-height:.88; letter-spacing:-.077em; font-weight:800; white-space:nowrap; } h1 span { color:transparent; -webkit-text-stroke:1px rgba(240,244,232,.95); text-stroke:1px rgba(240,244,232,.95); }
.description { max-width:370px; margin:clamp(28px,4.2vh,53px) 0 0; color:#c0c2b7; font-size:14px; line-height:1.65; }.controls { display:flex; align-items:center; gap:clamp(24px,3.4vw,60px); margin-top:31px; }.metrics { display:flex; gap:clamp(15px,2vw,33px); margin:0; }.metrics div { min-width:45px; }.metrics dt { font:500 17px var(--sans); color:#e4e7df; }.metrics dd { margin:3px 0 0; color:#9da89c; font:8px var(--mono); letter-spacing:.04em; }
.catch { width:126px; height:126px; border:0; border-radius:50%; flex:0 0 auto; color:#143334; background:#eeeee3; font:500 10px/1.2 var(--mono); letter-spacing:.035em; cursor:none; transition:background .35s,color .35s,transform .35s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }.catch b { font:400 22px var(--sans); transition:transform .35s; }.catch:hover { background:var(--lime); transform:scale(1.04); }.catch:hover b { transform:translateX(7px); }
.frog-stage { position:absolute; z-index:2; right:0; bottom:0; width:min(58vw,1050px); height:100%; display:flex; justify-content:center; align-items:flex-end; overflow:hidden; }.frog-glow { position:absolute; width:70%; height:65%; bottom:5%; border-radius:50%; background:radial-gradient(ellipse,rgba(176,226,151,.17),transparent 65%); filter:blur(18px); }.frog-image { max-width:100%; max-height:84%; position:relative; z-index:2; object-fit:contain; object-position:bottom center; transform:translate3d(var(--frog-x,0),var(--frog-y,0),0) rotateY(var(--frog-turn,0deg)); transition:transform .18s ease-out,opacity .4s; filter:drop-shadow(0 27px 19px rgba(0,20,20,.23)); }.frog-image:not([src]), .frog-image[src="assets/frog-hero.jpg"] { opacity:0; }
.fallback-frog { --eye-x:0px; position:absolute; z-index:1; width:min(43vw,590px); height:min(58vw,720px); bottom:-7%; filter:drop-shadow(0 29px 18px rgba(0,18,17,.33)); }.frog-body { position:absolute; width:58%; height:57%; left:21%; bottom:6%; border-radius:48% 48% 41% 41%; background:radial-gradient(ellipse at 46% 41%,#9fbb85 0 20%,#51886e 48%,#235a53 90%); box-shadow:inset 26px 0 38px rgba(159,230,177,.13),inset -20px -25px 30px rgba(5,41,38,.42); }.frog-face { position:absolute; z-index:2; width:76%; height:42%; top:5%; left:12%; border-radius:48% 48% 43% 42%; background:radial-gradient(ellipse at 50% 30%,#9ecf89,#4d9873 55%,#1d5a52); }.frog-face b { position:absolute; width:7px; height:7px; background:#285e4f; border-radius:50%; top:59%; left:44%; }.frog-face b+ b { left:53%; }.frog-face em { position:absolute; border-bottom:3px solid #355c51; width:42%; border-radius:50%; left:30%; top:74%; }.frog-eye { position:absolute; z-index:4; top:0; width:32%; aspect-ratio:1; border-radius:50%; background:#e8dec8; border:8px solid #6ea57a; box-shadow:inset 7px 5px 7px rgba(73,64,42,.22); }.frog-eye.left { left:12%; }.frog-eye.right { right:12%; }.frog-eye i { position:absolute; width:60%; height:60%; border-radius:50%; top:20%; left:20%; background:radial-gradient(circle at 37% 29%,white 0 8%,#412819 10% 30%,#120f0c 32% 66%,#765137 68%); transform:translateX(var(--eye-x)); }.frog-foot { position:absolute; z-index:3; width:42%; height:19%; bottom:0; border-radius:50% 48% 34% 32%; background:#367166; }.frog-foot.left { left:3%; transform:rotate(-17deg); }.frog-foot.right { right:3%; transform:rotate(17deg); }
.footer { z-index:6; padding:0 clamp(20px,4.5vw,78px); justify-content:space-between; border-top:1px solid rgba(222,242,224,.16); color:#84928a; font-size:9px; }.loader { position:fixed; inset:0; z-index:20; background:#102f30; color:#e9eadf; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; font-family:var(--mono); transition:opacity .7s ease,visibility .7s; }.loader.done { opacity:0; visibility:hidden; }.loader__brand { font:700 18px var(--sans); letter-spacing:-.07em; }.loader sup { font-size:7px; }.loader__line { width:140px; height:1px; background:rgba(235,245,229,.22); }.loader__line i { display:block; height:100%; width:0; background:var(--lime); }.loader__percent { font-size:10px; color:#aab8aa; }.reveal { opacity:0; transform:translateY(18px); transition:opacity .85s ease var(--delay),transform .85s cubic-bezier(.2,.75,.2,1) var(--delay); }.ready .reveal { opacity:1; transform:none; }.cursor-dot,.cursor-ring { position:fixed; z-index:40; top:0; left:0; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); }.cursor-dot { width:5px; height:5px; background:var(--lime); }.cursor-ring { width:27px; height:27px; border:1px solid rgba(200,255,107,.8); transition:width .25s,height .25s,border-color .25s; }.cursor-ring.active { width:48px; height:48px; border-color:var(--lime); }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(200,255,107,0); } }
@media (max-width:760px) { body { cursor:auto; }.cursor-dot,.cursor-ring { display:none; }.experience { grid-template-rows:72px 1fr 48px; }.topbar { padding:0 18px; gap:14px; }.study,.observation { display:none; }.topbar .status { font-size:8px; }.content { max-width:none; padding:clamp(44px,8vh,74px) 23px 20px; }.eyebrow { margin-bottom:21px; }.description { max-width:315px; margin-top:27px; font-size:13px; }.frog-stage { width:94vw; height:57%; opacity:.7; right:-13vw; bottom:0; }.frog-image { max-height:100%; }.fallback-frog { width:78vw; height:101vw; }.controls { margin-top:25px; }.metrics div:nth-child(2) { display:none; }.catch { width:94px; height:94px; font-size:8px; }.footer { padding:0 18px; font-size:7px; }.footer span:last-child { display:none; } h1 { font-size:clamp(47px,16.5vw,82px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }