/* PORTFOLIO / 2026 — One connected interaction language. */
:root{--experience-ease:cubic-bezier(.19,1,.22,1);--experience-lime:#e2f88f;--experience-lavender:#c9b8ff;--experience-dark:#101425}
.experience-view-toggle{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;
  margin:-9px 0 24px;padding:5px;background:#191c2a;border:1px solid #292f44;border-radius:99px}
.experience-view-toggle[hidden],.project-constellation[hidden],.bento[hidden],.work-toolbar[hidden]{display:none!important}
.experience-view-toggle button{appearance:none;border:0;background:transparent;border-radius:99px;padding:13px 19px;
  color:#c6c5d7;font:700 10px/1.2 'Space Grotesk',sans-serif;letter-spacing:.11em;cursor:pointer;transition:background .25s,color .25s}
.experience-view-toggle button:hover{background:#ffffff16;color:#fff}
.experience-view-toggle button[aria-pressed="true"]{background:var(--experience-lime);color:#161b24}
.experience-view-toggle button:focus-visible,.constellation-node:focus-visible,.constellation-preview-cta:focus-visible,
.enter-film-theater:focus-visible,.film-theater button:focus-visible,.personal-dock :is(a,button):focus-visible{outline:3px solid #aa8ffa;outline-offset:4px}
.project-constellation{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 45% 28%,#5146795c,transparent 37%),linear-gradient(140deg,#16182c,#0b1121 75%);
  color:#f7f4ff;border-radius:30px;padding:24px 30px 30px;margin:0 0 28px;min-height:585px;border:1px solid #ffffff20;
  box-shadow:0 29px 75px #13192e30}
.project-constellation:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.27;
  background-image:radial-gradient(#c5bee455 .85px,transparent 1px);background-size:29px 29px;mask-image:linear-gradient(to bottom,#000,transparent 94%)}
.constellation-headline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:0 2px 14px;border-bottom:1px solid #ffffff2b;
  font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.15em;color:#c1b9dd}
.constellation-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.78fr);gap:22px;align-items:center}
.constellation-map{height:490px;min-width:0;position:relative;isolation:isolate}
.constellation-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.72;pointer-events:none}
.constellation-lines path{fill:none;stroke:#b3b1ea6b;stroke-width:1;stroke-dasharray:3 7}
.constellation-lines path:first-child{stroke-dasharray:none;stroke:#b1a5e48a}
.constellation-lines circle{fill:none;stroke:#b1a5e425;stroke-width:1;stroke-dasharray:4 7}
.constellation-center{position:absolute;left:50%;top:49.4%;transform:translate(-50%,-50%);display:grid;place-items:center;width:81px;height:81px;
  border-radius:50%;font:700 26px 'Space Grotesk',sans-serif;color:#e5e0ff;box-shadow:0 0 0 11px #b4b1e515,0 0 80px #a690df66;
  border:1px solid #e6dfff80;background:radial-gradient(circle,#7467a94d,#2925409b);pointer-events:none}
.constellation-center span{color:var(--experience-lime)}
.constellation-node{position:absolute;left:var(--nx);top:var(--ny);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  gap:10px;width:155px;min-height:66px;padding:11px 4px;color:#eeeaff;background:transparent;border:0;cursor:pointer;z-index:2;
  font:700 11px/1.35 'Space Grotesk',sans-serif;text-align:center;transition:transform .28s var(--experience-ease)}
.constellation-node:hover{transform:translate(-50%,-50%) scale(1.075)}
.constellation-star{width:17px;height:17px;border-radius:50%;background:#d6c6ff;border:2px solid #f2e7ff;
  box-shadow:0 0 0 7px #baa5fd1a,0 0 29px #c0a5ffbd;transition:background .25s,box-shadow .25s;animation:star-breathe 3.7s ease-in-out infinite alternate}
.constellation-node:nth-child(3n+2) .constellation-star{animation-delay:-1.7s}
.constellation-node:nth-child(3n+3) .constellation-star{animation-delay:-2.5s}
.constellation-node[aria-pressed="true"] .constellation-star{background:var(--experience-lime);border-color:#f8ffcf;
  box-shadow:0 0 0 9px #e2f88f2f,0 0 40px #e2f88f8a}
.constellation-node[aria-pressed="true"] .constellation-name{color:var(--experience-lime)}
@keyframes star-breathe{from{box-shadow:0 0 0 6px #baa5fd12,0 0 19px #c0a5ff64}to{box-shadow:0 0 0 10px #baa5fd25,0 0 32px #c0a5ffbd}}
.constellation-preview{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:420px;
  padding:clamp(22px,3vw,40px);border-radius:24px;border:1px solid #ffffff26;
  background:linear-gradient(155deg,#36304eaf,#121829eb);box-shadow:inset 0 1px #ffffff15}
.constellation-preview-index{font:700 9px/1.7 'Space Grotesk',sans-serif;letter-spacing:.12em;color:#cfc5ef}
.constellation-preview-orb{display:grid;place-items:center;margin:28px 0 18px;width:85px;height:85px;border-radius:30px;
  border:1px solid #e4d8ff65;transform:rotate(-8deg);background:radial-gradient(circle at 30% 20%,#bc9df590,#433c78 60%,#22253c);
  box-shadow:0 17px 30px #080a2055,0 0 30px #c3a7ff3e}
.constellation-preview-orb span{font:700 27px 'Space Grotesk',sans-serif;transform:rotate(8deg)}
.constellation-preview h3{font:600 clamp(27px,3vw,42px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:0 0 12px}
.constellation-preview p{font:400 13px/1.7 'DM Sans',sans-serif;color:#cfcede;margin:0 0 18px;max-width:345px}
.constellation-preview-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 27px}
.constellation-preview-tags span{border:1px solid #ffffff30;border-radius:99px;padding:7px 10px;font:600 9px 'Space Grotesk',sans-serif;color:#ded8f0}
.constellation-preview-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;
  border-radius:99px;background:var(--experience-lime);padding:15px 20px;color:#151b26;text-decoration:none;
  font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.08em}
.constellation-preview-cta:hover{background:#f3ffc0}
.constellation-preview-cta[hidden]{display:none!important}
.enter-film-theater{appearance:none;background:var(--experience-lime);color:#131826;cursor:pointer;border:0;border-radius:40px;
  font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.1em;padding:14px 17px;display:inline-flex;align-items:center;gap:13px}
.enter-film-theater:hover{background:#efffb7}
.film-theater{border:1px solid #ffffff45;background:radial-gradient(ellipse at 70% 5%,#65558b54,transparent 55%),#10111b;
  color:#fff;width:min(1150px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 30px);margin:auto;padding:clamp(16px,3.2vw,40px);
  border-radius:27px;box-shadow:0 30px 90px #05030eaf;overflow-y:auto}
.film-theater:not([open]){display:none}
.film-theater::backdrop{background:#080916d8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.film-theater-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.film-theater-head span{font:700 10px 'Space Grotesk',sans-serif;color:#d4caef;letter-spacing:.14em}
.film-theater-head h2{font:600 clamp(25px,4vw,45px) 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:9px 0 0}
.film-theater-head button{flex-shrink:0;cursor:pointer;border:1px solid #ffffff66;background:#ffffff1c;color:#fff;
  border-radius:99px;padding:13px 17px;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.09em}
.film-theater-head button span{font-size:19px;margin-left:10px;color:white}
.film-theater-screen{position:relative;aspect-ratio:16/9;background:#030407;border-radius:15px;overflow:hidden}
.film-theater-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-theater>p{font:400 13px/1.6 'DM Sans',sans-serif;color:#c1c0d2;margin:20px 0 0}
.film-theater>p a{color:var(--experience-lime)}
.personal-dock{position:fixed;right:clamp(16px,3vw,42px);bottom:clamp(16px,3vw,36px);z-index:75;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dock-trigger{appearance:none;cursor:pointer;min-width:94px;min-height:62px;border:1px solid #d3ccff73;background:#181a33ed;color:#fff;
  border-radius:26px;box-shadow:0 12px 32px #11122945,0 0 25px #b4a4e62a;
  font:700 18px 'Space Grotesk',sans-serif;backdrop-filter:blur(14px);transition:transform .26s var(--experience-ease)}
.dock-trigger:hover{transform:translateY(-3px)}
.dock-trigger>span{color:var(--experience-lime)}
.dock-trigger small{display:block;color:#dad5f4;font-size:8px;letter-spacing:.11em;margin-top:2px}
.dock-panel{display:grid;gap:3px;min-width:205px;padding:8px;background:#181b30f5;
  border:1px solid #ffffff36;box-shadow:0 18px 43px #0005;border-radius:21px;backdrop-filter:blur(20px);transform-origin:bottom right}
.dock-panel[hidden]{display:none!important}
.dock-panel a{text-decoration:none;display:flex;gap:12px;align-items:center;padding:13px 15px;border-radius:12px;
  color:white;font:700 11px 'Space Grotesk',sans-serif;letter-spacing:.075em}
.dock-panel a span{color:var(--experience-lime)}
.dock-panel a:hover{background:#ffffff1c}
.experience-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,#a592eb,#e2f88f);transform:scaleX(0);transform-origin:left center;box-shadow:0 1px 12px #c3adffb0}
.kinetic-line{max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:space-around;gap:12px;flex-wrap:wrap;
  padding:35px 16px 0;margin-top:25px;border-top:1px solid #1317241a}
.kinetic-line span{font:700 clamp(12px,1.8vw,23px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.035em;color:#726b8f;
  transform:translateY(var(--word-offset,0px));transition:transform .14s linear}
.kinetic-line span:nth-child(2n){color:#8d76b5}
.beyond-activity-display{display:flex;align-items:center;justify-content:space-between;gap:12px}
.beyond-activity-dial{--level:0%;position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:74px;height:74px;border-radius:50%;background:conic-gradient(currentColor var(--level),#34303b21 0);opacity:.82}
.beyond-activity-dial::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#d9e8de}
.beyond-activity-card:last-child .beyond-activity-dial::before{background:#e5dbf3}
.beyond-activity-dial span{position:relative;z-index:1;font:700 10px 'Space Grotesk',sans-serif;text-align:center}
.beyond-activity-trend{border-top:1px solid #213c3625;padding-top:16px;display:flex;align-items:flex-end;gap:7px;height:64px}
.beyond-activity-trend .activity-bar{flex:1;height:var(--bar-height,5%);min-height:3px;border-radius:6px 6px 2px 2px;background:currentColor;opacity:.65}
.beyond-activity-trend .activity-bar[data-today="true"]{opacity:1}
.beyond-activity-trend .activity-bar[data-missing="true"]{background:transparent;border:1px dashed currentColor;opacity:.22;min-height:5px}
.beyond-activity-caption-secondary{font:600 10px 'Space Grotesk',sans-serif;opacity:.75;letter-spacing:.075em}
@media(max-width:1050px){.constellation-layout{grid-template-columns:minmax(0,1.1fr) minmax(245px,.8fr)}.constellation-node{width:118px;font-size:10px}.constellation-map{height:480px}}
@media(max-width:740px){
  .experience-view-toggle{width:100%;justify-content:space-around;margin:8px 0 20px}
  .experience-view-toggle button{flex:1;padding:13px 8px;letter-spacing:.045em;font-size:10px}
  .project-constellation{padding:17px 12px 18px;border-radius:23px;min-height:0}
  .constellation-headline{padding:3px 8px 10px;font-size:8px}
  .constellation-layout{grid-template-columns:1fr;gap:0}
  .constellation-map{height:390px}
  .constellation-node{font-size:9px;width:95px;min-height:57px}
  .constellation-star{width:13px;height:13px}
  .constellation-center{width:62px;height:62px;font-size:22px}
  .constellation-preview{min-height:0;padding:24px;border-radius:21px}
  .constellation-preview-orb{width:64px;height:64px;border-radius:22px;margin:16px 0}
  .constellation-preview-orb span{font-size:22px}
  .constellation-preview h3{font-size:31px}
  .constellation-preview-cta{margin-top:8px}
  .film-theater{width:calc(100vw - 16px);padding:15px;border-radius:19px}
  .film-theater-head h2{font-size:25px}
  .film-theater-head button{padding:11px;font-size:9px}
  .personal-dock{right:14px;bottom:14px}
  .dock-trigger{min-width:73px;min-height:60px;font-size:17px;border-radius:22px}
  .kinetic-line{gap:16px;justify-content:center}
  .beyond-activity-display{gap:5px}
  .beyond-activity-dial{width:56px;height:56px}
  .beyond-activity-dial::before{inset:8px}
  .beyond-activity-value{font-size:clamp(31px,6vw,50px)!important}
}
@media(max-width:400px){.constellation-map{height:340px}.constellation-node{width:80px;font-size:8px}.beyond-activity-dial{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){
  .constellation-star{animation:none!important}
  .constellation-node,.dock-trigger,.kinetic-line span{transition:none!important;animation:none!important;transform:translate(-50%,-50%)}
  .dock-trigger{transform:none!important}
  .kinetic-line span{transform:none!important}
  .creative-opening:before{animation:none!important}
  .film-theater::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}


/* The constellation introduces the second, equally complete project view once. */
.experience-view-hint{
  display:block;margin:-13px 0 23px 4px;
  color:#6c6383;font:700 10px/1.55 'Space Grotesk',sans-serif;
  letter-spacing:.11em;max-width:95%;
}
.experience-view-hint[hidden]{display:none!important}
.experience-view-toggle button[data-project-view="grid"]{position:relative;isolation:isolate}
.experience-view-toggle.view-demo-countdown button[data-project-view="grid"]:not([aria-pressed="true"])::after{
  content:"";display:block;position:absolute;left:16px;right:16px;bottom:7px;height:2px;
  border-radius:3px;background:#d4baff;transform:scaleX(0);
  transform-origin:left center;animation:experience-view-countdown 6s linear forwards;
  pointer-events:none;
}
@keyframes experience-view-countdown{to{transform:scaleX(1)}}
.project-constellation.project-view-arriving,
#project-grid.project-view-arriving{
  animation:experience-view-reveal .5s cubic-bezier(.19,1,.22,1) both;
}
@keyframes experience-view-reveal{
  from{opacity:.38;transform:translateY(13px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .experience-view-toggle.view-demo-countdown button::after,
  .project-constellation.project-view-arriving,
  #project-grid.project-view-arriving{animation:none!important}
}