/* Setsu logo: reveal Q6 (hover preview, star slams down, shadow, corners spring out),
   loop L7 (star blink), lockup with Unbounded 500 caps, name in N2 (letters rise).
   Base styles are the finished logo; every animation is a class on .setsu (see setsu-logo.js). */
@font-face{font-family:"Setsu Unbounded";font-weight:500;src:url(unbounded-500-setsu.woff2) format("woff2")}
.setsu{
  --s:160px;              /* mark size */
  --ns:.5; --tr:.1em; --gap:.05; --wt:500; --wc:#f4f4f6;
  --grad:linear-gradient(135deg,#e80bee,#a506e6 50%,#3d03d7);
  --out:cubic-bezier(.16,1,.3,1); --back:cubic-bezier(.34,1.56,.64,1);
  --io:cubic-bezier(.65,0,.35,1); --in:cubic-bezier(.7,0,.84,0);
  --spring:linear(0.0000,0.0331,0.1186,0.2377,0.3741,0.5149,0.6500,0.7723,0.8775,0.9633,1.0293,1.0765,1.1066,1.1223,1.1263,1.1212,1.1098,1.0945,1.0771,1.0593,1.0424,1.0272,1.0142,1.0036,0.9955,0.9898,0.9862,0.9844,0.9841,0.9848,0.9863,0.9883,0.9905,0.9927,0.9949,0.9968,0.9984,0.9997,1.0007,1.0013,1.0018,1.0020,1.0020,1.0019,1.0017,1.0014,1.0012,1.0009,1);
  /* reveal timeline */
  --hv:1s; --ck:1.4s; --sw:2.15s;
  display:inline-grid;place-items:center
}
.setsu *{box-sizing:border-box}
.setsu .lockup{display:flex;align-items:center;gap:calc(var(--s)*var(--gap));transform:translateX(var(--shift,0px))}
.setsu.named .lockup{transform:none}
.setsu .mark{position:relative;width:var(--s);height:var(--s);flex:none}
.setsu .mE,.setsu .mR,.setsu .mP{position:absolute;inset:0}
.setsu .mE{z-index:3}
.setsu .pt,.setsu .pt *{position:absolute;inset:0;transform-origin:var(--to,50% 50%)}
.setsu .pt i{background-position:center;background-size:100%;background-repeat:no-repeat}
.setsu .star i{background-image:url(star.svg)}
.setsu .c i{background-image:url(corners.png)}
.setsu .glow i{inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(216,68,221,.30),rgba(139,92,246,.12) 45%,transparent 70%);filter:blur(calc(var(--s)*.07))}
.setsu .tl{--dx:-1;--dy:-1;--to:30% 30%}.setsu .tr{--dx:1;--dy:-1;--to:70% 30%}
.setsu .br{--dx:1;--dy:1;--to:70% 70%}.setsu .bl{--dx:-1;--dy:1;--to:30% 70%}
.setsu .tl i{clip-path:inset(0 50% 50% 0)}.setsu .tr i{clip-path:inset(0 0 50% 50%)}
.setsu .br i{clip-path:inset(50% 0 0 50%)}.setsu .bl i{clip-path:inset(50% 50% 0 0)}

/* reveal-only pieces, invisible at rest */
.setsu .x{position:absolute;opacity:0;pointer-events:none}
.setsu .tiles{--tw:round(calc(var(--s)*.6),calc(var(--dpx,1px)*3));--gp:max(var(--dpx,1px),round(calc(var(--tw)/3*.07),var(--dpx,1px)));width:var(--tw);height:var(--tw);left:calc(50% - var(--tw)/2);top:calc(50% - var(--tw)/2)}
.setsu .tc{position:absolute;left:calc(var(--tw)/3*var(--gx));top:calc(var(--tw)/3*var(--gy));width:calc(var(--tw)/3);height:calc(var(--tw)/3)}
.setsu .tv{position:absolute;inset:0}
.setsu .ti{position:absolute;inset:var(--gp);overflow:hidden;border-radius:calc(var(--s)*.025)}
.setsu .ti i{position:absolute;inset:0}
.setsu .tth{background:linear-gradient(135deg,#2c2836,#18161d)}
.setsu .tp{opacity:0;background:var(--grad) calc(var(--tw)/-3*var(--gx) - var(--gp)) calc(var(--tw)/-3*var(--gy) - var(--gp))/var(--tw) var(--tw)}
.setsu .shadow{inset:0;background:url(star.svg) center/100% no-repeat;filter:brightness(0)}
.setsu .cursor{left:50%;top:50%;width:0;height:0;overflow:visible;z-index:2}
.setsu .cx,.setsu .cy,.setsu .cp{position:absolute;left:0;top:0;width:0;height:0}
.setsu .cp{transform-origin:0 0}
.setsu .cursor svg{position:absolute;width:calc(var(--s)*.17);height:calc(var(--s)*.17);left:calc(var(--s)*-.17*5/24);top:calc(var(--s)*-.17*3/24);overflow:visible;filter:drop-shadow(0 calc(var(--s)*.006) calc(var(--s)*.012) rgba(0,0,0,.6))}
.setsu .cursor path{fill:#fff;stroke:#111;stroke-width:1.3;stroke-linejoin:round}
.setsu .clickfx{left:41%;top:41%;width:18%;height:18%;border-radius:50%;border:max(1.5px,calc(var(--s)*.01)) solid rgba(255,255,255,.85)}
.setsu .ring{inset:20%;border-radius:calc(var(--s)*.04);border:max(1.5px,calc(var(--s)*.012)) solid rgba(216,120,240,.8)}
.setsu .flare{inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,255,.6),rgba(216,68,221,.3) 25%,rgba(139,92,246,.1) 45%,transparent 65%)}

/* wordmark */
.setsu .wordbox{position:relative;font-size:calc(var(--s)*var(--ns))}
.setsu .wordwrap{position:relative;overflow:hidden;padding:.42em .08em .32em 0;margin:-.42em 0 -.32em}
.setsu .word{font:var(--wt) 1em/1 "Setsu Unbounded",sans-serif;letter-spacing:var(--tr);color:var(--wc);white-space:nowrap;text-box:trim-both cap alphabetic}
.setsu .word span{display:inline-block}
.setsu:not(.named) .word span{opacity:0}
.setsu.icon .wordbox{display:none}

/* ---------- keyframes ---------- */
@keyframes hide{from,to{opacity:0}}
@keyframes show{from,to{opacity:1}}
@keyframes off{from,to{opacity:0}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes t-pop{from{opacity:0;transform:scale(.47)}to{opacity:1;transform:none}}
@keyframes tilepress{0%,100%{transform:none}45%{transform:scale(.93)}}
@keyframes press{0%,100%{transform:none}40%{transform:scale(.84)}}
@keyframes clickfx{0%{opacity:0;transform:scale(.2)}1%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.1)}}
@keyframes q-x{0%{transform:translateX(calc(var(--s)*.5));animation-timing-function:cubic-bezier(.3,0,.1,1)}50%,100%{transform:translateX(0)}}
@keyframes q-y{0%{transform:translateY(calc(var(--s)*.45));animation-timing-function:cubic-bezier(.45,0,.15,1)}50%,100%{transform:translateY(0)}}
@keyframes tdim{from{filter:none}to{filter:brightness(.55)}}
@keyframes shadow{0%{opacity:0;transform:scale(1.6);filter:brightness(0) blur(calc(var(--s)*.09))}100%{opacity:.85;transform:scale(1.04);filter:brightness(0) blur(calc(var(--s)*.012))}}
@keyframes stamp{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}}
@keyframes jumpout{from{opacity:1;transform:translate(calc(var(--dx)*-4%),calc(var(--dy)*-4%)) scale(.8)}to{opacity:1;transform:none}}
@keyframes glow-in{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
@keyframes ring{0%{opacity:0;transform:scale(1)}1%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes flare{0%{opacity:0;transform:scale(.3)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
@keyframes impact{from{transform:scale(.92)}to{transform:none}}
@keyframes blinkturn{0%,30%{transform:none;animation-timing-function:var(--io)}45%{transform:scale(.42);animation-timing-function:var(--io)}62%{transform:scale(.42) rotate(90deg);animation-timing-function:var(--back)}78%,100%{transform:rotate(90deg)}}
@keyframes shift-in{from{transform:translateX(var(--shift))}to{transform:none}}
@keyframes shift-out{from{transform:none}to{transform:translateX(var(--shift))}}
@keyframes rise{from{opacity:0;transform:translateY(.45em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes sink{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translateY(.35em);filter:blur(6px)}}
@keyframes out-in{from{opacity:1;transform:none}to{opacity:0;transform:translate(calc(var(--dx)*-4%),calc(var(--dy)*-4%)) scale(.8)}}
@keyframes twinkle-out{0%{transform:none;animation-timing-function:var(--in)}50%{transform:scale(.1)}62%{transform:scale(.2) rotate(30deg)}100%{transform:scale(0) rotate(90deg)}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}

/* ---------- .reveal: Q6, 0 to 3.05s ---------- */
.setsu.reveal .ti{animation:t-pop .45s var(--back) calc(var(--d)*50ms) both}
.setsu.reveal .tc:not(.t4) .tp{animation:hide calc(var(--ck) + var(--r)*70ms) both,fade-in .12s calc(var(--ck) + var(--r)*70ms) forwards}
.setsu.reveal .t4 .tp{animation:hide var(--hv) both,fade-in .15s var(--hv) forwards}
.setsu.reveal .t4 .tv{animation:tilepress .2s ease var(--ck) both}
.setsu.reveal .tiles{animation:show 1ms both,tdim .5s ease-in calc(var(--sw) - 500ms) both,off 1ms var(--sw) forwards}
.setsu.reveal .shadow{animation:shadow .5s cubic-bezier(.45,0,.9,.45) calc(var(--sw) - 500ms) both,off 1ms var(--sw) forwards}
.setsu.reveal .cursor{animation:fade-in .2s .35s both,off 1ms var(--sw) forwards}
.setsu.reveal .cx{animation:q-x 1.4s .35s both}
.setsu.reveal .cy{animation:q-y 1.4s .35s both}
.setsu.reveal .cp{animation:press .22s ease var(--ck) both}
.setsu.reveal .clickfx{animation:clickfx .45s var(--out) var(--ck) both}
.setsu.reveal .star .R{animation:stamp .5s cubic-bezier(.45,0,.9,.45) calc(var(--sw) - 500ms) both}
.setsu.reveal .c .R{animation:hide var(--sw) both,jumpout .9s var(--spring) var(--sw) forwards}
.setsu.reveal .glow .R{animation:hide var(--sw) both,glow-in .9s ease-out var(--sw) forwards}
.setsu.reveal .ring{animation:ring .8s var(--out) var(--sw) both}
.setsu.reveal .flare{animation:flare .9s ease-out var(--sw) both}
.setsu.reveal .mR{animation:impact .45s var(--out) var(--sw) forwards}

/* ---------- .loop: L7 star blink ---------- */
.setsu.loop .star .P{animation:blinkturn 2.6s infinite}

/* ---------- name in / out (1.25s) ---------- */
.setsu.name-in .lockup{animation:shift-in 1s var(--out) both}
.setsu.name-in .word span{animation:rise .8s var(--out) calc(100ms + var(--i)*55ms) both}
.setsu.name-out .word span{animation:sink .45s var(--in) calc((4 - var(--i))*40ms) both}
.setsu.name-out .lockup{animation:shift-out .8s var(--io) .3s both}

/* ---------- .exit (1.1s) ---------- */
.setsu.exit .c .E{animation:out-in .5s var(--in) both}
.setsu.exit .star .E{animation:twinkle-out .9s .1s both}
.setsu.exit .glow .E{animation:fade-out .4s both}
.setsu.exit.named .word span{animation:sink .45s var(--in) calc((4 - var(--i))*40ms) both}
.setsu.exit.gone{visibility:hidden}