/* Athena's look, exactly as on her face: black, one luminous blue, "Athena Thin" (Raleway) at weight 100-300.
   Minimal. The orb stands alone; nothing is ever drawn over it (Ryan, 14 Oct 2026). */
@font-face{font-family:"Athena Thin";src:url(/fonts/raleway-var.woff2) format("woff2");font-weight:100 900;font-display:block}
:root{color-scheme:dark;--bg:#000;--ink:#e4efe9;--accent:#5dacff;--muted:#91a49a;--soft:#9cafc9;--line:#28352e}
*{box-sizing:border-box;font-family:"Athena Thin","Segoe UI",sans-serif;font-variant-numeric:lining-nums}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{margin:0;background:var(--bg);color:var(--ink);font-weight:300;overflow-x:hidden}
a{color:inherit;text-decoration:none}

.brandname{font-size:15px;letter-spacing:.27em;font-weight:500}
.micro{font:10px/1.7 Consolas,"Cascadia Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* 1. The stage: her orb, alone, centered. Her name small below, like the brand line on her face. */
.stage{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;scroll-snap-align:start;overflow:hidden}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.075;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
#orb{width:min(72vmin,640px);height:min(72vmin,640px);display:block}
.name{position:absolute;left:50%;bottom:14vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.name .micro{letter-spacing:.3em}
.down{position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);color:var(--muted);font-size:18px;opacity:.5;animation:drift 2.4s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* 2. The message: one thought per line, lots of air. */
.message{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:14vh 20px;scroll-snap-align:start}
.message p{margin:0;font-weight:100;font-size:clamp(30px,5.2vw,66px);letter-spacing:-.03em;line-height:1.25;color:var(--soft)}
.message p.turn{margin-top:5vh;color:var(--ink);font-weight:200}

/* 3. The house demo. The dark house is the base; each room is a window onto the lit picture that fades in and out.
   On an alarm the page goes red with a halo and the orb turns red, like her face (html[data-alert=red]). */
:root{--hue:93,172,255}
html[data-alert=red]{--hue:255,84,96}
.demo{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8vh 20px;scroll-snap-align:start;position:relative;isolation:isolate}
/* The halo round the whole screen: copied exactly from her face (face/designs/aether-fluid/index.html).
   RED, breathing, while an alarm is heard; BLUE while she is listening to somebody. Red wins. */
#alert-halo{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:0;transition:opacity .35s ease}
#alert-halo.on{opacity:1}
#alert-halo.on.red{animation:haloRed 1.5s ease-in-out infinite}
#alert-halo.on.blue{animation:haloBlue 2.4s ease-in-out infinite}
@keyframes haloRed{0%,100%{box-shadow:inset 0 0 8vh 2vh rgba(255,40,40,.35)}
  50%{box-shadow:inset 0 0 18vh 7vh rgba(255,40,40,.8)}}
@keyframes haloBlue{0%,100%{box-shadow:inset 0 0 8vh 2vh rgba(93,172,255,.30)}
  50%{box-shadow:inset 0 0 16vh 6vh rgba(93,172,255,.62)}}
@media (prefers-reduced-motion: reduce){
  #alert-halo.on.red{animation:none;box-shadow:inset 0 0 12vh 5vh rgba(255,40,40,.5)}
  #alert-halo.on.blue{animation:none;box-shadow:inset 0 0 12vh 5vh rgba(93,172,255,.5)}}
.house{position:relative;width:min(1100px,94vw);aspect-ratio:1672/941}
.house .dark{position:absolute;inset:0;width:100%;height:100%;display:block}
.house .room{position:absolute;background-image:url(/images/house-base.webp);background-repeat:no-repeat;opacity:0;transition:opacity 1.1s ease;cursor:pointer}
.house .room.on{opacity:1}
.caption{margin-top:3vh;min-height:3em;text-align:center;font-weight:200;font-size:clamp(20px,2.6vw,32px);letter-spacing:-.02em;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px}
.caption .who{font:11px Consolas,"Cascadia Mono",monospace;letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--hue));min-height:1em}
#demo-orb{position:absolute;right:max(16px,4vw);bottom:max(16px,5vh);width:120px;height:120px}
@media (max-width:700px){#demo-orb{width:80px;height:80px;bottom:8px;right:8px}}

/* 3b-3d. The other scenes: camera, desk, car. Same caption, same orb in the corner. */
.scene{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8vh 20px;scroll-snap-align:start;position:relative}
.scene canvas.orb{position:absolute;right:max(16px,4vw);bottom:max(16px,5vh);width:120px;height:120px}
.scene .caption .who{min-height:1em}

/* the camera feed: a dark screen; the feed fades up when asked for, like her face showing a camera */
.feed{position:relative;width:min(900px,92vw);aspect-ratio:4/3;border:1px solid rgba(93,172,255,.28);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 60px rgba(93,172,255,.06)}
.feed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.feed img.on{opacity:1}
.feed .label{position:absolute;left:16px;top:14px;z-index:2;font:11px Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:#dceeff;text-shadow:0 1px 6px #000}
.feed::after{content:"LIVE";z-index:2;position:absolute;top:14px;right:16px;font:11px Consolas,monospace;letter-spacing:.2em;color:#ff5460;padding-left:13px;background:radial-gradient(circle at 4px 50%,#ff5460 3px,transparent 4px) no-repeat;text-shadow:0 1px 6px #000}

/* the car: one photo; her orb sits on the phone screen on the dash (position tuned to car.png) */
.cockpit{position:relative;width:min(1100px,94vw);aspect-ratio:1344/896;border-radius:16px;overflow:hidden;background:#000}
.cockpit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cockpit canvas.onphone{position:absolute;left:54.3%;top:62.2%;width:9.4%;aspect-ratio:1;transform:translate(-50%,-50%)}

/* the phone call: a handset with her orb on the screen and a call timer */
.handset{width:min(300px,72vw,max(220px,calc(44svh * 9 / 16)));aspect-ratio:9/16;border:1px solid rgba(93,172,255,.28);border-radius:36px;background:linear-gradient(#05080c,#000);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;box-shadow:0 0 60px rgba(93,172,255,.06)}
.handset .callee{white-space:nowrap;font-size:clamp(20px,2.4vw,26px);font-weight:200}
.handset .timer{font:12px Consolas,monospace;letter-spacing:.18em;color:var(--muted)}
.scene .handset canvas.orb.oncall{position:static;transform:none;width:min(170px,40vw,22svh);height:min(170px,40vw,22svh);margin:16px 0}
.handset .micro{font-size:9px}
/* the desk: the day's chores, ticked off as she does them */
.desk{width:min(640px,92vw);border:1px solid var(--line);border-radius:16px;padding:22px 26px;background:#04070a;min-height:min(300px,46svh)}
.desk-head{margin-bottom:14px}
.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.tasks li{font-size:clamp(16px,1.8vw,20px);color:var(--soft);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s,color .5s;padding-left:30px;position:relative}
.tasks li.in{opacity:1;transform:none}
.tasks li::before{content:"";position:absolute;left:0;top:.25em;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;transition:all .4s}
.tasks li.done{color:var(--ink)}
.tasks li.done::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(93,172,255,.6)}

/* 4. Try it now. */
.try{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12vh 20px;gap:14px;scroll-snap-align:start}
.try canvas.aether-logo{width:120px;height:120px;margin-bottom:12px}
.try h2{margin:0;font-weight:100;font-size:clamp(36px,6vw,72px);letter-spacing:-.04em;line-height:1}
.sub{margin:0 0 14px;color:var(--soft);font-size:clamp(16px,1.8vw,21px);font-weight:300}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 30px;border:1px solid var(--accent);border-radius:999px;background:rgba(93,172,255,.1);color:#dceeff;font-size:16px;letter-spacing:.08em;cursor:pointer;transition:background .2s}
.btn:hover{background:rgba(93,172,255,.22)}
.btn.quiet{border-color:var(--line);background:transparent;color:var(--soft)}
.fine{margin:14px 0 0;color:var(--muted);font-size:13px;letter-spacing:.04em}
.early{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.early input{min-height:48px;width:min(320px,80vw);padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-size:16px;outline:none}
.early input:focus{border-color:var(--accent)}

footer{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 20px 56px;border-top:1px solid var(--line);text-align:center}
footer .micro{text-transform:none;letter-spacing:.12em}

/* ---- Responsive (Ryan, 14 Oct 2026: most people will watch on a phone). Every picture fits the screen's width AND
   height, so a demo never spills off-screen; on phones the orb sits under the caption instead of over the picture. */
.house{width:min(1100px,94vw,calc(64svh * 1672 / 941))}
.feed{width:min(900px,92vw,calc(62svh * 4 / 3))}
.cockpit{width:min(1100px,94vw,calc(62svh * 1344 / 896))}
.demo,.scene{min-height:100svh;padding:6svh 16px}
.caption{width:min(900px,92vw);margin-left:auto;margin-right:auto}
@media (max-width:700px){
  html{scroll-snap-type:none}
  .demo,.scene,.message,.try{min-height:auto;padding:10svh 16px}
  .stage{min-height:100svh}
  #orb{width:min(86vw,62svh);height:min(86vw,62svh)}
  .name{bottom:12svh}
  .message p{font-size:clamp(26px,8.4vw,40px)}
  .caption{font-size:clamp(17px,5vw,22px);min-height:4.5em;margin-top:18px}
  #demo-orb,.scene canvas.orb:not(.onphone):not(.oncall){position:static;display:block;width:76px;height:76px;margin:10px auto 0}
  .feed,.cockpit{border-radius:12px}
  .feed .label,.feed::after{font-size:10px;top:10px}
  .try h2{font-size:clamp(34px,11vw,52px)}
  .early input{width:100%}
  .early{flex-direction:column;align-items:stretch;width:min(360px,92vw)}
  footer .micro{font-size:9px}
}

/* The message screens, take 2 (Ryan, 15 Oct 2026: didn't like the flat look). Each line rises in one at a time when
   the screen comes into view; the earlier lines dim as the next arrives, and the last line lands bright, with a soft
   blue glow, like her voice landing. Left-aligned on a narrow column so it reads like someone talking. */
.message{align-items:flex-start;text-align:left;width:min(980px,100%);margin:0 auto;padding-left:max(20px,6vw);position:relative}
.message p{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .9s ease,transform .9s ease,filter .9s ease,color .9s ease;color:var(--ink)}
.message p.in{opacity:1;transform:none;filter:none}
.message p.past{color:#4d5a66}
.message p.turn{margin-top:6vh;font-weight:200;color:#dceeff;text-shadow:0 0 28px rgba(93,172,255,.55)}
.message p.turn.in{color:#eaf4ff}
.message::before{content:"";position:absolute;left:max(6px,calc(6vw - 18px));top:50%;width:1px;height:0;background:linear-gradient(transparent,rgba(93,172,255,.7),transparent);transform:translateY(-50%);transition:height 2.4s ease}
.message.seen::before{height:60%}
@media (prefers-reduced-motion: reduce){.message p{opacity:1;transform:none;filter:none;transition:none}}

/* Who she is / isn't / how it works (Ryan, 15 Oct 2026: the site has to actually explain her). */
.about{width:min(1100px,100%);margin:0 auto;padding:14vh max(20px,6vw)}
.about .kicker{color:var(--accent);margin:0 0 18px}
.about h2{margin:0 0 7vh;font-weight:200;font-size:clamp(26px,3.6vw,46px);line-height:1.2;letter-spacing:-.02em;max-width:24ch;color:#eaf4ff}
.about .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 48px}
.about .grid.two{grid-template-columns:repeat(2,1fr)}
.about h3{margin:0 0 10px;font-weight:400;font-size:clamp(18px,1.7vw,22px);color:var(--ink)}
.about .grid p{margin:0;color:var(--soft);font-size:clamp(15px,1.3vw,17px);line-height:1.6}
.about .grid>div{border-top:1px solid var(--line);padding-top:20px}
.about.isnt .grid>div{border-top-color:rgba(255,84,96,.25)}
.about .step{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font:13px Consolas,monospace;margin-bottom:14px}
@media (max-width:900px){.about .grid,.about .grid.two{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.about{padding:10svh 16px}.about .grid,.about .grid.two{grid-template-columns:1fr;gap:28px}}
.about.meet .grid.three,.about.how .grid.three{grid-template-columns:repeat(3,1fr)}
.about .lede{margin:8vh 0 0;font-weight:200;font-size:clamp(22px,2.6vw,34px);color:#eaf4ff;text-shadow:0 0 28px rgba(93,172,255,.45)}
@media (max-width:600px){.about.meet .grid.three,.about.how .grid.three{grid-template-columns:1fr}}

/* "Hi." -> Household Intelligence (Ryan, 15 Oct 2026). Starts as a big "Hi."; the hidden letters grow open. */
.hello{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10vh 16px;scroll-snap-align:start}
.hi{margin:0;font-weight:100;font-size:clamp(56px,13vw,200px);letter-spacing:-.04em;line-height:1;white-space:nowrap;color:#eaf4ff;text-shadow:0 0 40px rgba(93,172,255,.35);transition:font-size 1.4s ease}
.hi .rest{display:inline-block;max-width:0;overflow:hidden;vertical-align:bottom;opacity:0;transition:max-width 1.6s cubic-bezier(.6,0,.2,1),opacity 1.2s ease .3s;color:var(--soft)}
.hello.open .hi{font-size:clamp(30px,6.4vw,96px)}
.hello.open .hi .rest{max-width:9em;opacity:1}
.hi .cap{color:#eaf4ff;text-shadow:0 0 30px rgba(93,172,255,.8)}
.hi-line{margin:6vh 0 0;font-size:clamp(17px,2vw,24px);color:var(--muted);opacity:0;transition:opacity 1s ease 1.6s}
.hi-line b{font-weight:400;color:var(--accent)}
.hello.open .hi-line{opacity:1}
@media (max-width:700px){.hello.open .hi{font-size:clamp(26px,8.6vw,44px)}}
.hi{line-height:1.25}.hi .rest{padding-bottom:.22em;margin-bottom:-.22em;line-height:1.25;vertical-align:baseline}
.hi .rest{overflow:visible;overflow-x:clip;overflow-clip-margin:0;padding-bottom:0;margin-bottom:0}
.message p.turn .brandword{color:var(--accent);font-weight:300}
.hi-blue{color:var(--accent);text-shadow:0 0 24px rgba(93,172,255,.45)}
.tm{font-size:.38em;vertical-align:super;line-height:0;margin-left:.08em;letter-spacing:0}

h1.brandname{margin:0;font-size:15px;font-weight:500;letter-spacing:.27em}