/* =========================================================
   FAA — THINGS I MADE / SKY STORY
   Background mechanics are adapted from the uploaded
   mblode/experiments app/sky experiment (MIT).
========================================================= */

:root{
  --ink:21 25 29;
  --paper:244 246 248;
  --cloud-a:205 206 208;
  --cloud-b:255 231 230;
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,Georgia,serif;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#06161f}
html,body{margin:0;min-height:100%}
body{
  color:rgb(var(--ink));
  font-family:var(--sans);
  overflow-x:hidden;
  transition:color .12s linear;
}
body.file-open{overflow:hidden}
a,button{color:inherit;font:inherit}
a{text-decoration:none}
button{border:0}
::selection{background:rgba(255,255,255,.6);color:#111}

/* ---------------- SKY ---------------- */
.sky{
  position:fixed;
  inset:0;
  z-index:-20;
  overflow:hidden;
  pointer-events:none;
}
.sky-color{
  position:absolute;
  inset:-2%;
  background:linear-gradient(rgb(0,144,245),rgb(230,214,221),rgb(234,176,69));
  transform:scale(1.025);
  will-change:background;
}
.sun-haze{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 74%,rgba(255,236,177,.52) 0 2%,rgba(255,215,126,.24) 12%,transparent 38%),
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 34%);
  mix-blend-mode:screen;
  opacity:.72;
  transition:opacity .12s linear;
}
.cloud-mask{
  position:absolute;
  inset:0;
  background:linear-gradient(rgb(var(--cloud-a)),rgb(var(--cloud-b)));
  -webkit-mask:url("sky-assets/footer-clouds.png") center/cover no-repeat;
  mask:url("sky-assets/footer-clouds.png") center/cover no-repeat;
  transform:translate3d(0,0,0) scale(1.02);
  transform-origin:center bottom;
  opacity:1;
  will-change:transform,background;
}
.stars{
  position:absolute;
  inset:0;
  opacity:0;
  will-change:opacity,transform;
}
.star-texture{
  position:absolute;
  inset:-10% 0 0;
  background-image:url("sky-assets/footer-stars.png");
  background-repeat:repeat;
  background-size:auto;
  opacity:.9;
}
#starCanvas{position:absolute;inset:0;width:100%;height:100%}
.grain{
  position:absolute;
  inset:0;
  background:url("sky-assets/bkg-noise.webp") repeat;
  background-size:260px 260px;
  opacity:.10;
  mix-blend-mode:soft-light;
}
.vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.025),transparent 17%,transparent 75%,rgba(0,0,0,.08)),
    radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.06));
  opacity:.5;
}

/* ---------------- HUD ---------------- */
.hud{
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  right:0;
  height:70px;
  padding:0 max(18px,3vw);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .6s ease,transform .8s var(--ease),color .12s linear;
}
body.loaded .hud{opacity:1;transform:none}
.hud::after{
  content:"";
  position:absolute;
  left:max(18px,3vw);
  right:max(18px,3vw);
  bottom:0;
  height:1px;
  background:rgb(var(--ink)/.16);
}
.hud-home{display:flex;align-items:center;gap:9px;width:max-content}
.hud-home .arrow{font-size:14px;transition:transform .3s var(--ease)}
.hud-home:hover .arrow{transform:translateX(-4px)}
.hud-center{display:flex;align-items:center;gap:11px}
.hud-center i{display:block;width:32px;height:1px;background:rgb(var(--ink)/.26)}
.hud-progress{justify-self:end;display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums}
.hud-track{position:relative;width:70px;height:1px;background:rgb(var(--ink)/.2)}
.hud-track i{position:absolute;inset:0 auto 0 0;width:0;background:rgb(var(--ink))}

.chapter-dots{
  position:fixed;
  right:21px;
  top:50%;
  z-index:90;
  display:flex;
  flex-direction:column;
  gap:13px;
  transform:translateY(-50%);
}
.chapter-dots button{
  position:relative;
  width:19px;height:19px;padding:0;background:transparent;cursor:pointer
}
.chapter-dots button::after{
  content:"";
  position:absolute;
  right:2px;top:50%;
  width:5px;height:5px;
  border:1px solid rgb(var(--ink)/.58);
  border-radius:50%;
  transform:translateY(-50%);
  transition:transform .3s var(--ease),background .3s ease;
}
.chapter-dots button.is-active::after{
  background:rgb(var(--ink));
  transform:translateY(-50%) scale(1.55);
}
.chapter-dots span{
  position:absolute;
  right:26px;top:50%;
  white-space:nowrap;
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:0;
  transform:translate(8px,-50%);
  transition:.3s var(--ease);
}
.chapter-dots button:hover span{opacity:.7;transform:translate(0,-50%)}

/* ---------------- STORY ---------------- */
main{position:relative;z-index:3}
.story-beat{
  position:relative;
  min-height:106svh;
  padding:110px clamp(26px,7vw,115px) 70px;
  display:flex;
  align-items:center;
}
.story-line{
  width:min(1050px,92vw);
  opacity:0;
  transform:translateY(35px);
  filter:blur(8px);
  transition:opacity .8s ease,transform 1.05s var(--ease),filter .8s ease;
}
.story-beat.visible .story-line,
.archive-open.visible .archive-wordmark,
.epilogue.visible .epilogue-copy{
  opacity:1;transform:none;filter:none
}
.story-line.offset-right{margin-left:auto;width:min(900px,80vw)}
.story-line.compact{width:min(850px,84vw);margin:auto;text-align:center}
.tiny-label{
  display:block;
  margin-bottom:20px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.story-line h1,
.story-line h2,
.archive-wordmark h2,
.epilogue h2{
  margin:0;
  font:400 clamp(70px,11vw,175px)/.82 var(--serif);
  letter-spacing:-.075em;
}
.story-line h2{font-size:clamp(62px,9.5vw,150px)}
.story-line em,
.archive-wordmark em,
.epilogue em{font-weight:400}
.story-line p,
.archive-wordmark p,
.epilogue p{
  margin:28px 0 0;
  font-size:clamp(14px,1.35vw,19px);
  line-height:1.6;
}
.scroll-thread{
  position:absolute;
  left:clamp(26px,7vw,115px);
  bottom:30px;
  display:flex;
  gap:12px;
  align-items:center;
  font-size:8px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.scroll-thread i{
  position:relative;
  width:82px;height:1px;
  overflow:hidden;
  background:rgb(var(--ink)/.24);
}
.scroll-thread i::after{
  content:"";position:absolute;inset:0;background:rgb(var(--ink));
  animation:thread 2s ease-in-out infinite
}
@keyframes thread{
  0%{transform:translateX(-102%)}
  55%,100%{transform:translateX(103%)}
}

.archive-open{
  position:relative;
  min-height:118svh;
  padding:100px 24px;
  display:grid;
  place-items:center;
  text-align:center;
}
.archive-wordmark{
  opacity:0;transform:scale(.94);filter:blur(12px);
  transition:opacity .9s ease,transform 1.2s var(--ease),filter .9s ease;
}
.archive-small{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.archive-wordmark h2{
  margin-top:20px;
  font-size:clamp(90px,15vw,235px);
  line-height:.72;
}
.archive-wordmark h2 span,.archive-wordmark h2 em{display:block}
.archive-wordmark h2 em{margin-left:10vw}
.archive-wordmark p{margin-top:38px}

/* ---------------- PROJECT CHAPTERS ---------------- */
.project-chapter{position:relative;height:190svh}
.sticky-scene{
  position:sticky;
  top:0;
  height:100svh;
  padding:92px clamp(27px,7vw,115px) 58px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr);
  gap:clamp(45px,8vw,125px);
  align-items:center;
  overflow:hidden;
}
.sticky-scene.reverse .project-copy{order:2}
.sticky-scene.reverse .project-art{order:1}
.project-number{
  position:absolute;
  right:2vw;
  top:50%;
  z-index:-1;
  transform:translateY(-50%);
  font:400 clamp(190px,37vw,560px)/.7 var(--serif);
  letter-spacing:-.11em;
  color:rgb(var(--ink)/.04);
}
.project-copy{max-width:650px}
.project-kicker{
  display:block;
  margin-bottom:24px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.project-prelude{
  margin:0;
  font:400 clamp(20px,2.2vw,32px)/1.2 var(--serif);
  opacity:.58;
}
.project-prelude.second{margin-left:4vw}
.project-copy h2{
  margin:23px 0 25px;
  font:400 clamp(72px,9vw,142px)/.77 var(--serif);
  letter-spacing:-.078em;
}
.project-copy h2 em{font-weight:400;margin-left:5vw}
.project-summary{
  margin:0;
  max-width:610px;
  font-size:clamp(15px,1.35vw,20px);
  line-height:1.65;
}
.project-actions{
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  align-items:center;
}
.project-actions button,
.project-actions a{
  padding:12px 14px;
  border:1px solid rgb(var(--ink)/.5);
  background:rgb(255 255 255/.07);
  backdrop-filter:blur(12px);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .3s var(--ease);
}
.project-actions button:hover,
.project-actions a:hover{
  background:rgb(var(--ink));
  color:rgb(var(--paper));
  transform:translateY(-2px);
}
.project-actions .coming{font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.chapter-caption{
  position:absolute;
  left:clamp(27px,7vw,115px);
  bottom:26px;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.62;
}
.project-art{position:relative;min-height:min(64vw,650px);transform-style:preserve-3d}

/* project entrance motion based on chapter progress */
.project-copy,.project-art{
  opacity:calc(.25 + var(--chapter-in,0) * .75);
}
.project-copy{
  transform:translateY(calc((1 - var(--chapter-in,0)) * 36px));
}
.project-art{
  transform:
    translateY(calc((1 - var(--chapter-in,0)) * 48px))
    scale(calc(.92 + var(--chapter-in,0) * .08));
}

/* STAR system */
.star-system svg{position:absolute;inset:6%;width:88%;height:88%;overflow:visible}
.star-system .lines path{
  fill:none;stroke:rgb(var(--ink)/.28);stroke-width:1.3;
  stroke-dasharray:8 9
}
.star-system .nodes circle{fill:rgb(var(--ink))}
.system-center{
  position:absolute;inset:0;display:grid;place-items:center;
  font:400 clamp(74px,8vw,120px)/1 var(--serif);letter-spacing:-.07em
}
.system-chip{
  position:absolute;
  padding:7px 10px;
  border:1px solid rgb(var(--ink)/.26);
  border-radius:999px;
  background:rgb(255 255 255/.09);
  backdrop-filter:blur(8px);
  font-size:8px;letter-spacing:.1em
}
.chip-a{left:10%;top:56%}
.chip-b{left:31%;top:20%}
.chip-c{right:9%;top:47%}
.chip-d{right:23%;bottom:18%}

/* STORE */
.store-stage{perspective:1200px}
.store-slab{
  position:absolute;
  width:64%;
  height:36%;
  left:18%;
  top:32%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px;
  border:1px solid rgb(var(--ink)/.30);
  background:rgb(255 255 255/.11);
  backdrop-filter:blur(15px);
  box-shadow:0 26px 80px rgba(0,0,0,.07);
  transform-style:preserve-3d;
}
.store-slab span{font:500 clamp(42px,5vw,76px)/1 var(--sans);letter-spacing:-.07em}
.store-slab small{font-size:8px;letter-spacing:.12em}
.slab-1{transform:translate3d(-13%,18%,0) rotate(-8deg)}
.slab-2{transform:translate3d(11%,-2%,30px) rotate(4deg)}
.slab-3{transform:translate3d(-1%,-24%,65px) rotate(-1deg)}
.store-crosshair{
  position:absolute;inset:0;
  background:
    linear-gradient(rgb(var(--ink)/.14),rgb(var(--ink)/.14)) center/1px 74% no-repeat,
    linear-gradient(90deg,rgb(var(--ink)/.14),rgb(var(--ink)/.14)) center/74% 1px no-repeat;
  opacity:.4
}

/* FAA HOME */
.browser-world{perspective:1200px}
.browser-shell,.browser-shadow{
  position:absolute;
  left:8%;right:5%;top:12%;bottom:12%;
  border:1px solid rgb(var(--ink)/.28);
  background:rgb(255 255 255/.13);
  backdrop-filter:blur(18px);
  box-shadow:0 32px 90px rgba(0,0,0,.08);
}
.browser-shadow.one{transform:translate(-18px,18px) rotate(-2deg);opacity:.12;z-index:-2}
.browser-shadow.two{transform:translate(22px,10px) rotate(1.3deg);opacity:.08;z-index:-1}
.browser-shell{padding:17px 20px}
.browser-top{
  height:34px;display:flex;align-items:center;gap:7px;
  border-bottom:1px solid rgb(var(--ink)/.18);
  font-size:8px;letter-spacing:.08em
}
.browser-top i{width:6px;height:6px;border:1px solid rgb(var(--ink)/.5);border-radius:50%}
.browser-top span{margin-left:auto;opacity:.6}
.browser-clock{
  margin-top:45px;text-align:center;
  font:400 clamp(52px,7vw,96px)/1 var(--serif);letter-spacing:-.05em
}
.browser-question{
  width:76%;margin:30px auto 23px;
  padding:11px 14px;border:1px solid rgb(var(--ink)/.24);border-radius:999px;
  font-size:9px;opacity:.7
}
.browser-grid{
  width:78%;margin:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px
}
.browser-grid span{
  padding:9px 4px;border:1px solid rgb(var(--ink)/.16);
  text-align:center;font-size:7px;letter-spacing:.06em
}

/* SIGNAL */
.signal-world{display:grid;place-items:center}
.signal-ring{
  position:absolute;border:1px solid rgb(var(--ink)/.22);border-radius:50%
}
.ring-a{width:73%;aspect-ratio:1}
.ring-b{width:53%;aspect-ratio:1}
.ring-c{width:32%;aspect-ratio:1}
.signal-core{
  font:400 clamp(62px,7vw,106px)/1 var(--serif);
  letter-spacing:-.07em
}
.wave{
  position:absolute;left:13%;right:13%;bottom:15%;
  display:flex;justify-content:center;align-items:center;gap:8px;height:90px
}
.wave i{
  width:2px;height:22px;background:rgb(var(--ink));border-radius:999px;
  animation:pulse 1.7s ease-in-out infinite
}
.wave i:nth-child(2n){height:44px;animation-delay:-.3s}
.wave i:nth-child(3n){height:68px;animation-delay:-.65s}
.wave i:nth-child(4n){height:32px;animation-delay:-1s}
@keyframes pulse{50%{transform:scaleY(.38);opacity:.45}}

/* EPILOGUE */
.epilogue{
  min-height:115svh;
  padding:110px 24px;
  display:grid;
  place-items:center;
  text-align:center
}
.epilogue-copy{
  opacity:0;transform:translateY(30px);filter:blur(8px);
  transition:opacity .8s ease,transform 1s var(--ease),filter .8s ease
}
.epilogue h2{font-size:clamp(80px,12vw,175px)}
.epilogue-links{margin-top:28px;display:flex;gap:28px;justify-content:center}
.epilogue-links a{font-size:10px;border-bottom:1px solid rgb(var(--ink)/.45)}

/* ---------------- PROJECT FILE ---------------- */
.project-file{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:end center;
  pointer-events:none;visibility:hidden
}
.project-file.open{pointer-events:auto;visibility:visible}
.file-backdrop{
  position:absolute;inset:0;background:rgba(3,12,18,0);backdrop-filter:blur(0);
  transition:background .45s ease,backdrop-filter .45s ease
}
.project-file.open .file-backdrop{
  background:rgba(3,12,18,.32);backdrop-filter:blur(10px)
}
.file-panel{
  position:relative;z-index:2;
  width:min(1080px,94vw);min-height:min(680px,84svh);
  margin-bottom:3svh;
  background:rgba(247,249,251,.95);
  color:#11151a;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 50px 140px rgba(0,0,0,.23);
  overflow:hidden;
  transform:translateY(110%) scale(.96);
  clip-path:inset(12% 7% 0 round 26px);
  transition:transform .75s var(--ease),clip-path .75s var(--ease)
}
.project-file.open .file-panel{transform:none;clip-path:inset(0 round 26px)}
.file-top{
  height:52px;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(17,21,26,.15);
  font-size:9px;letter-spacing:.11em
}
.file-top button{
  width:38px;height:38px;border-radius:50%;background:transparent;
  border:1px solid rgba(17,21,26,.16);cursor:pointer;font-size:22px
}
.file-top button:hover{background:#11151a;color:white}
.file-body{position:relative;z-index:2;max-width:760px;padding:70px 58px 58px}
.file-kind{font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.file-body h2{
  margin:20px 0 24px;
  font:400 clamp(62px,8vw,120px)/.8 var(--serif);
  letter-spacing:-.075em
}
.file-body p{margin:0;max-width:680px;color:#42494f;font-size:18px;line-height:1.65}
.file-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.file-tags span{
  padding:7px 10px;border:1px solid rgba(17,21,26,.17);border-radius:999px;
  font-size:8px;letter-spacing:.08em;text-transform:uppercase
}
.file-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.file-actions a,.file-actions span{
  min-width:170px;padding:12px 14px;border:1px solid rgba(17,21,26,.55);
  font-size:9px;letter-spacing:.09em;text-transform:uppercase
}
.file-actions a:hover{background:#11151a;color:#fff}
.file-ghost{
  position:absolute;right:-4vw;bottom:-3vw;
  font:400 clamp(140px,26vw,380px)/.72 var(--serif);
  letter-spacing:-.08em;color:rgba(17,21,26,.045);pointer-events:none
}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:900px){
  .hud{height:60px;grid-template-columns:1fr auto;padding:0 16px}
  .hud::after{left:16px;right:16px}
  .hud-center{display:none}
  .chapter-dots{right:8px}
  .chapter-dots span{display:none}

  .story-beat{padding:88px 23px 65px}
  .story-line.offset-right{margin-left:0;width:92vw}
  .story-line h1{font-size:clamp(72px,22vw,130px)}
  .story-line h2{font-size:clamp(65px,19vw,110px)}
  .archive-wordmark h2{font-size:clamp(90px,25vw,150px)}

  .project-chapter{height:175svh}
  .sticky-scene{
    padding:80px 24px 56px;
    grid-template-columns:1fr;
    gap:24px;
    align-content:center
  }
  .sticky-scene.reverse .project-copy,
  .sticky-scene.reverse .project-art{order:initial}
  .project-copy{max-width:92%}
  .project-copy h2{font-size:clamp(68px,19vw,105px);margin:16px 0 18px}
  .project-prelude{font-size:20px}
  .project-summary{font-size:14px;line-height:1.55}
  .project-actions{margin-top:20px}
  .project-art{min-height:38svh}
  .project-number{font-size:60vw;right:-4vw;top:60%}
  .chapter-caption{left:24px;bottom:17px}
  .star-system svg{inset:0;width:100%;height:100%}
  .store-slab{width:68%;height:40%;left:16%}
  .browser-shell,.browser-shadow{left:3%;right:3%;top:4%;bottom:3%}
  .cloud-mask{transform:scale(1.15)}
  .file-panel{min-height:84svh;margin-bottom:2svh}
  .file-body{padding:58px 27px 38px}
  .file-body p{font-size:15px}
}
@media(max-width:560px){
  .archive-open{min-height:105svh}
  .project-chapter{height:188svh}
  .project-actions{align-items:flex-start}
  .browser-grid{grid-template-columns:repeat(2,1fr)}
  .signal-world{min-height:34svh}
  .file-actions{flex-direction:column}
  .file-actions a,.file-actions span{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
  .story-line,.archive-wordmark,.epilogue-copy{opacity:1!important;transform:none!important;filter:none!important}
}

/* =========================================================
   v34 — desktop-only held "welcome to / things i made." scene
   IMPORTANT: this is applied directly to the existing v32
   archive-open scene, so the original real sky background
   remains intact behind it.
========================================================= */

@media(min-width:901px){
  .archive-open{
    height:158svh;
    min-height:158svh;
    padding:0;
    display:block;
  }

  .archive-wordmark{
    position:sticky;
    top:0;
    width:100%;
    min-height:100svh;
    height:100svh;
    padding:92px 24px 70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
}

/* Mobile/tablet: keep the original v32 flow; no extra held scroll. */
@media(max-width:900px){
  .archive-open{
    height:auto;
    min-height:118svh;
    padding:100px 24px;
    display:grid;
    place-items:center;
  }

  .archive-wordmark{
    position:static;
    width:auto;
    min-height:0;
    height:auto;
    padding:0;
    display:block;
  }
}


/* ==========================
   PROJECTS — V41 reverse gate
========================== */


/* =========================================================
   v42 — project exit is NOT sucked into a hole.
   The project world simply returns to white.
========================================================= */
.project-return-white{
  position:fixed;
  inset:0;
  z-index:650;
  background:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .62s cubic-bezier(.4,0,.2,1);
}
body.project-returning-white .project-return-white{
  visibility:visible;
}
body.project-return-white-active .project-return-white{
  opacity:1;
}

/* Keep the project page intact underneath. No scale, no blur, no collapse. */
body.project-returning-white{
  overflow:hidden;
}

@media(prefers-reduced-motion:reduce){
  .project-return-white{transition-duration:.01ms!important}
}