:root{
  --blue:#2e62ff;--deep:#12285f;--line:#cdd9ff;--pink:#ff68ba;--cyan:#25c9de;--purple:#8968ff;--lime:#b8f455;--paper:#fbfdff;--ink:#173168;--shadow:0 12px 28px rgba(25,57,126,.11);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-rounded,"Avenir Next","Helvetica Neue",Arial,sans-serif;overflow-x:hidden;transition:background .4s,color .4s}
/* HOME only: the user-replaceable background is pinned to the viewport.
   All characters, decorations, cards and other UI continue to scroll normally above it. */
body.home-page{background:transparent;position:relative;isolation:isolate}
body.home-page::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-color:var(--paper);background-image:url("assets/hero-bg.png");background-size:cover;background-position:center center;background-repeat:no-repeat}
body.home-page::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:transparent;transition:background .4s ease}
body.home-page.theme-space::after{background:rgba(4,11,28,.72)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
body.theme-space{--paper:#07142e;--ink:#f2f6ff;--line:#2d4c8f;--shadow:0 12px 34px rgba(0,0,0,.35);background:radial-gradient(circle at 50% -10%,#163c89 0,#07142e 52%,#040b1c 100%)}
#sparkLayer{position:fixed;inset:0;pointer-events:none;z-index:9999}.spark{position:fixed;font-weight:900;animation:spark .65s ease-out forwards}@keyframes spark{0%{transform:scale(.3) rotate(0);opacity:0}30%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.35) rotate(30deg);opacity:0}}
.site-header{height:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(24px,5vw,76px);position:relative;z-index:20}.brand{font-size:clamp(28px,3vw,44px);font-weight:900;letter-spacing:.05em;color:var(--blue);justify-self:center}.commission-badge{justify-self:start;border:1.7px solid #7f9fff;border-radius:22px;padding:10px 18px;display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;font-weight:800;background:rgba(255,255,255,.7);backdrop-filter:blur(10px)}.commission-light{width:10px;height:10px;border-radius:50%;background:#41d96d;box-shadow:0 0 0 4px rgba(65,217,109,.13)}.commission-badge.closed .commission-light{background:#ff6073;box-shadow:0 0 0 4px rgba(255,96,115,.13)}.top-nav{justify-self:end;display:flex;align-items:center;gap:34px;font-size:13px;font-weight:850;letter-spacing:.12em}.icon-button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.78);box-shadow:0 6px 14px rgba(31,67,145,.08);cursor:pointer;font-size:19px}.theme-space .icon-button,.theme-space .commission-badge{background:rgba(8,26,64,.78)}
.hero-section{min-height:820px;position:relative;display:grid;place-items:center;padding-top:8px;background:transparent}.hero-orbit{position:absolute;width:min(620px,61vw);height:min(620px,61vw);border-radius:50%;border-top:1px solid #8eaaff;border-right:1px solid transparent;transform:rotate(-18deg);opacity:.6}.character-wrap{width:min(980px,94vw);aspect-ratio:1/1.02;position:relative;top:-92px;display:grid;place-items:center;animation:floaty 4.2s ease-in-out infinite}.character-video,.character-art{width:100%;height:100%;object-fit:contain;display:block}.character-art{position:relative;z-index:2}.character-fallback{position:absolute;inset:11% 14%;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;color:#7997ed;border:1px dashed #b7c5f7;border-radius:48% 52% 48% 52%;background:radial-gradient(circle,#f8fbff 0,#edf4ff 60%,transparent 61%)}.character-fallback p{font-size:12px;letter-spacing:.14em}.fallback-halo{position:absolute;width:62%;height:62%;border:1px solid #b7c5ff;border-radius:50%;animation:spin 9s linear infinite}.fallback-face{font-size:88px;color:#7d9dff}@keyframes floaty{50%{transform:translateY(-18px)}}@keyframes spin{to{transform:rotate(360deg)}}
.decor,.cloud,.planet,.jelly,.moon{position:absolute;color:#6f8dff;opacity:.75;user-select:none}.decor-left{left:4%;top:18%;font-size:20px;transform:rotate(-8deg)}.decor-right{right:6%;top:24%;font-size:19px}.cloud-a{left:26%;top:22%;font-size:38px}.cloud-b{right:11%;top:12%;font-size:34px}.planet-a{left:33%;top:6%;font-size:44px}.planet-b{right:24%;bottom:16%;font-size:58px}.jelly-a{left:20%;bottom:20%;font-size:55px}.moon{left:8%;bottom:17%;font-size:45px}
.decor-left{animation:softDriftA 6.8s ease-in-out infinite}.decor-right{animation:softDriftB 7.6s ease-in-out infinite}.cloud-a{animation:softDriftB 6.4s ease-in-out infinite}.cloud-b{animation:softDriftA 8.2s ease-in-out infinite}.planet-a{animation:softDriftA 7.2s ease-in-out infinite}.planet-b{animation:softDriftB 8.8s ease-in-out infinite}.jelly-a{animation:softDriftA 6.1s ease-in-out infinite}.moon{animation:softDriftB 7.1s ease-in-out infinite}
@keyframes softDriftA{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(7px,-12px,0) rotate(2deg)}}
@keyframes softDriftB{0%,100%{transform:translate3d(0,0,0) rotate(1deg)}50%{transform:translate3d(-8px,-9px,0) rotate(-2deg)}}.runaway-star{position:absolute;left:11%;top:38%;border:0;background:transparent;font-size:36px;color:#4a73ff;cursor:pointer;transition:left .32s ease,top .32s ease,transform .2s}.gravity-control{position:absolute;right:7%;top:47%;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:30}.gravity-label{font-size:13px;letter-spacing:.48em;color:#4f75e8}.gravity-button{width:92px;height:92px;border-radius:50%;border:1px solid #adc0ff;background:rgba(255,255,255,.72);box-shadow:0 10px 22px rgba(45,91,201,.12);cursor:pointer;display:grid;place-items:center;position:relative}.gravity-button:before{content:"";position:absolute;width:62px;height:62px;border-radius:50%;background:var(--blue);box-shadow:0 8px 20px rgba(46,98,255,.28)}.gravity-button span{position:relative;color:white;font-weight:900;letter-spacing:.08em}.theme-space .gravity-button{background:rgba(9,27,66,.8)}
.works-section{padding:0 clamp(26px,6vw,96px) 54px}.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:end}.work-card{position:relative;border:1px solid var(--line);border-radius:18px;padding:16px;background:rgba(255,255,255,.72);box-shadow:var(--shadow);backdrop-filter:blur(8px);transition:transform .25s ease,box-shadow .25s ease}.theme-space .work-card{background:rgba(9,27,66,.72)}.work-card:hover{transform:translateY(-7px) rotate(-.4deg);box-shadow:0 18px 36px rgba(25,57,126,.16)}.work-label{text-align:center;font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--blue);margin:2px 0 14px}.work-label.pink{color:var(--pink)}.work-label.cyan{color:var(--cyan)}.work-label.purple{color:var(--purple)}.media-frame{position:relative;aspect-ratio:1.1/1;border-radius:10px;overflow:hidden;background:linear-gradient(145deg,#edf5ff,#d7e7ff);border:1px solid #d7e2ff;display:grid;place-items:center}.media-frame img,.media-frame video{width:100%;height:100%;object-fit:cover}.media-fallback{display:none;place-items:center;width:100%;height:100%;font-weight:900;font-size:13px;letter-spacing:.12em;color:#8ba0dc}.media-frame video:not(:has(source[src]))+.media-fallback{display:grid}.play-dot{position:absolute;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:white;color:#5c7bf0;box-shadow:0 9px 20px rgba(44,77,152,.16);left:50%;top:50%;transform:translate(-50%,-50%)}.card-arrow{position:absolute;right:7px;bottom:7px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);font-size:22px;box-shadow:0 7px 18px rgba(21,47,106,.1)}.below-works{min-height:120px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.more-link{grid-column:2;font-weight:900;letter-spacing:.12em;color:var(--blue);border:0;border-bottom:2px solid var(--blue);padding:10px 8px;background:transparent;cursor:pointer}.more-arrow{display:inline-block;margin-left:5px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.more-link[aria-expanded="true"] .more-arrow{transform:rotate(180deg)}.secret-link{justify-self:start;display:inline-flex;align-items:center;gap:12px;color:var(--blue);font-size:28px}.secret-link span{font-size:11px;letter-spacing:.15em;border:1px solid #a8bbff;border-radius:999px;padding:6px 10px}
.contact-section{margin:0 clamp(26px,6vw,96px) 44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}.contact-kicker{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--blue)}.contact-copy p{margin:7px 0 0;font-size:13px;color:#6d7fa9}.theme-space .contact-copy p{color:#a9bbe8}.contact-actions{display:flex;gap:14px}.contact-button{min-width:124px;height:44px;border:1px solid #9db2ff;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(255,255,255,.65);font-size:13px;font-weight:900;letter-spacing:.08em}.theme-space .contact-button{background:rgba(8,26,64,.72)}
.site-footer{min-height:72px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(26px,6vw,96px);font-size:11px;letter-spacing:.08em}.site-footer nav{display:flex;gap:36px;font-weight:800;color:var(--blue)}
.bounce-ui{transition:transform .18s cubic-bezier(.2,.9,.25,1.4),filter .18s}.bounce-ui:hover{transform:translateY(-2px)}.bounce-ui.is-popping{animation:pop .46s cubic-bezier(.2,.9,.25,1.4)}@keyframes pop{0%{transform:scale(1)}35%{transform:scale(.82) rotate(-2deg)}70%{transform:scale(1.12) rotate(1deg)}100%{transform:scale(1)}}

.gallery-page{padding:28px clamp(26px,7vw,110px) 80px}.page-title-row{display:flex;align-items:flex-end;justify-content:space-between;margin:38px 0 28px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--blue);font-weight:900}.page-title-row h1{font-size:clamp(66px,11vw,150px);line-height:.8;margin:15px 0 0;color:var(--blue);letter-spacing:-.065em}.back-link{font-size:12px;font-weight:900;letter-spacing:.12em;border-bottom:1px solid currentColor;padding-bottom:6px}.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:42px 0}.filter-bar button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:10px 15px;font-size:11px;letter-spacing:.1em;font-weight:900;cursor:pointer}.filter-bar button.active{background:var(--blue);color:white;border-color:var(--blue)}.masonry{columns:3 280px;column-gap:22px}.gallery-item{break-inside:avoid;margin:0 0 22px}.gallery-frame{position:relative;border:1px solid var(--line);border-radius:20px;padding:10px;background:rgba(255,255,255,.7);box-shadow:var(--shadow);overflow:hidden}.gallery-frame:before,.gallery-frame:after{content:"✦";position:absolute;z-index:2;color:#87a1ff;font-size:12px}.gallery-frame:before{left:9px;top:8px}.gallery-frame:after{right:9px;bottom:8px}.gallery-frame img,.gallery-frame video{width:100%;display:block;border-radius:12px}.gallery-frame .media-fallback{min-height:260px;border-radius:12px;background:linear-gradient(145deg,#edf5ff,#d7e7ff)}.gallery-frame.tall .media-fallback{min-height:420px}.gallery-frame.wide .media-fallback{min-height:190px}.secret-note{margin:-10px 0 40px;color:#7785ac}.theme-space .gallery-frame{background:rgba(9,27,66,.72)}
@media(max-width:980px){.site-header{grid-template-columns:auto 1fr;height:auto;padding-top:18px;gap:14px}.brand{grid-column:1;font-size:30px;justify-self:start}.commission-badge{grid-column:2;justify-self:end}.top-nav{grid-column:1/-1;justify-self:stretch;justify-content:center;border-top:1px solid var(--line);padding-top:14px;gap:22px}.hero-section{min-height:720px}.works-grid{grid-template-columns:repeat(2,1fr)}.gravity-control{right:4%;top:56%}.contact-section{align-items:flex-start;flex-direction:column}.contact-actions{align-self:flex-end}}
@media(max-width:640px){.commission-badge{font-size:10px;padding:8px 10px}.top-nav{font-size:10px;gap:15px}.icon-button{width:38px;height:38px}.hero-section{min-height:560px}.character-wrap{width:98vw}.gravity-control{right:10px;top:62%}.gravity-label{display:none}.gravity-button{width:66px;height:66px}.gravity-button:before{width:46px;height:46px}.decor,.cloud,.planet,.jelly,.moon{opacity:.42}.works-section{padding-inline:16px}.works-grid{grid-template-columns:1fr;gap:16px}.work-card{padding:12px}.below-works{grid-template-columns:1fr auto}.secret-link{grid-column:1}.more-link{grid-column:2}.contact-section{margin-inline:16px}.contact-actions{width:100%}.contact-button{flex:1;min-width:0}.site-footer{padding-inline:16px;gap:16px}.site-footer nav{gap:14px}.page-title-row h1{font-size:64px}.masonry{columns:1}.filter-bar{gap:7px}.filter-bar button{padding:8px 10px}}

/* HOME MORE drawer: opens downward with a soft “nyun” motion */
.home-gallery-drawer{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-12px) scaleY(.965);transform-origin:top;transition:grid-template-rows .72s cubic-bezier(.18,.88,.2,1),opacity .35s ease,transform .72s cubic-bezier(.18,.88,.2,1);pointer-events:none}
.home-gallery-drawer.open{grid-template-rows:1fr;opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}
.home-gallery-inner{overflow:hidden;padding:0 2px}.home-gallery-drawer.open .home-gallery-inner{padding-bottom:34px}
.home-filter-bar{margin:8px 0 24px;justify-content:center}.home-masonry{padding:0 2px 12px}
/* GRAVITY intentionally does not change position or transform.
   JS uses the independent translate/rotate properties so the normal layout and float animations remain intact. */

.home-gallery-empty{margin:18px auto 32px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.1em;color:#8da0cf}.home-gallery-empty.is-hidden{display:none}

/* ===== Fixed hero background scope =====
   The fixed hero background is visible only through the TOP / character area.
   From the four featured work cards downward, restore the normal page surface.
   Important: do not use an oversized overlay here; it can cover CONTACT. */
.home-page .works-section{
  position:relative;
  z-index:2;
  background:var(--paper);
}
.home-page .works-section::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 50% 0 50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--paper);
  pointer-events:none;
}
.home-page .contact-section,
.home-page .site-footer{
  position:relative;
  z-index:3;
  background:var(--paper);
}
.home-page .contact-section::before,
.home-page .site-footer::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;bottom:0;left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--paper);
  pointer-events:none;
}

/* FIX: keep the area below CONTACT white all the way to the footer. */
.home-page .contact-section::before{
  bottom:-44px;
}


/* FINAL GAP FIX: one continuous white surface from WORKS through CONTACT. */
.home-page .white-surface{position:relative;z-index:2;background:var(--paper);}
.home-page .white-surface::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--paper);pointer-events:none;}
.home-page .white-surface .works-section,.home-page .white-surface .contact-section{background:transparent;}
.home-page .white-surface .works-section::before,.home-page .white-surface .contact-section::before{display:none;}
.home-page .site-footer{margin-top:0;}

/* CONTACT bottom-gap fix: keep the same spacing inside the white surface,
   so the fixed hero background never shows between CONTACT and footer. */
.home-page .white-surface{
  display:flow-root;
  padding-bottom:44px;
}
.home-page .white-surface .contact-section{
  margin-bottom:0;
}

/* ===== Cute page transition: GALLERY / SECRET ===== */
.page-transition-layer{
  position:fixed; inset:0; z-index:100000; pointer-events:none; overflow:hidden;
}
.page-transition-piece{
  position:fixed; left:0; top:0; display:grid; place-items:center;
  width:34px; height:34px; transform:translate(-50%,-50%) scale(.12) rotate(0deg);
  opacity:0; will-change:transform,opacity;
}
.page-transition-piece.circle{border-radius:50%;}
.page-transition-piece.star{
  font-size:36px; line-height:1; font-weight:900; color:var(--blue);
  text-shadow:0 0 0 transparent;
}
.page-transition-layer.is-covering .page-transition-piece{
  opacity:1;
  animation:transition-pop-cover var(--dur,760ms) cubic-bezier(.16,.84,.18,1) var(--delay,0ms) forwards;
}
@keyframes transition-pop-cover{
  0%{transform:translate(-50%,-50%) scale(.12) rotate(-16deg);opacity:0}
  18%{opacity:1}
  48%{transform:translate(-50%,-50%) scale(1.12) rotate(8deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(var(--cover-scale,55)) rotate(18deg);opacity:1}
}
.page-transition-curtain{
  position:fixed; inset:0; z-index:99999; pointer-events:none;
  background:var(--blue); opacity:0;
}
.page-transition-curtain.is-in{animation:transition-curtain-in .5s ease .28s forwards}
@keyframes transition-curtain-in{to{opacity:1}}

/* Arrival: the previous blue 'membrane' softly collapses to reveal the page. */
.page-enter-cover{
  position:fixed; inset:0; z-index:100001; pointer-events:none; overflow:hidden;
  background:var(--blue);
  animation:page-enter-fade .72s cubic-bezier(.2,.8,.2,1) .05s forwards;
}
.page-enter-cover::before,.page-enter-cover::after{
  content:"★"; position:absolute; color:#fff; font-weight:900;
  animation:page-enter-spark .72s cubic-bezier(.2,.8,.2,1) forwards;
}
.page-enter-cover::before{font-size:70px;left:28%;top:34%}
.page-enter-cover::after{content:"●";font-size:54px;right:26%;bottom:30%;color:#ffb7df}
@keyframes page-enter-fade{
  0%{opacity:1;clip-path:circle(150% at 50% 50%)}
  65%{opacity:1}
  100%{opacity:0;clip-path:circle(0% at 50% 50%)}
}
@keyframes page-enter-spark{
  0%{transform:scale(1.4) rotate(12deg);opacity:1}
  100%{transform:scale(.2) rotate(-20deg);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .page-transition-layer,.page-transition-curtain,.page-enter-cover{display:none!important}
}


/* ===== Hidden entrance + animation behavior refinements ===== */
.secret-link{position:relative;text-decoration:none}
.secret-link span{opacity:0;transform:translateX(-4px) scale(.88);pointer-events:none;transition:opacity .22s ease,transform .32s cubic-bezier(.2,.9,.25,1.4)}
.secret-link:hover span,.secret-link:focus-visible span{opacity:1;transform:translateX(0) scale(1)}
.tap-video{cursor:pointer;outline-offset:-3px}
.tap-video:focus-visible{outline:2px solid #8eaaff}
.more-autoplay-video{pointer-events:none}


/* ===== MORE + GRAVITY definitive fix =====
   MORE is normally clipped while its 'nyun' drawer opens.
   During zero gravity, release those clipping boundaries so cards can
   visibly drift outside the drawer instead of being cut off. */
body.gravity-mode .home-gallery-drawer.open,
body.gravity-mode .home-gallery-drawer.open .home-gallery-inner,
body.gravity-mode .home-gallery-drawer.open .home-masonry{
  overflow:visible !important;
}
body.gravity-mode .home-gallery-drawer.open{
  position:relative;
  z-index:20;
}
body.gravity-mode #homeGalleryGrid .gallery-item,
body.gravity-mode #homeFilterBar{
  position:relative;
  z-index:21;
}


/* FINAL: SECRET page title is intentionally subtle */
.secret-page .page-title-row h1{font-size:clamp(30px,4.2vw,58px);line-height:1;letter-spacing:-.035em;margin-top:12px}
@media(max-width:640px){.secret-page .page-title-row h1{font-size:36px}}