/* Homepage cards are project covers; owl opens the retained motion collection. */
body:not(.open) .card:not([data-index="5"]):not([data-index="0"]):not([data-index="3"]):not([data-index="2"]):not([data-index="4"]):not([data-index="7"]):not([data-index="9"]):not([data-index="6"]) { background:#000!important; cursor:default; }
body:not(.open) .card:not([data-index="5"]):not([data-index="0"]):not([data-index="3"]):not([data-index="2"]):not([data-index="4"]):not([data-index="7"]):not([data-index="9"]):not([data-index="6"]) .character { visibility:hidden; }

/* Packaging is an independent homepage project, excluded from the owl collection. */
body.open:not(.standalone-project) .card[data-index="3"] { display:none; }
.standalone-project .selected-works,
.standalone-project .project-gallery,
.standalone-project .browse-controls,
.standalone-project .work-caption { display:none!important; }
.standalone-project { overflow:hidden; }

.card[data-index="2"]{container-type:inline-size;background:#010202!important;cursor:pointer}
.clipnest-cover{position:absolute;inset:0;color:#fff;font-family:Arial,sans-serif;font-weight:400}
.clipnest-mark{position:absolute;left:33.33%;top:27.88%;width:33.75%;aspect-ratio:1;background:transparent;overflow:visible}
.clipnest-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.clipnest-name{position:absolute;top:61.12%;left:0;width:100%;font-size:7.4cqw;text-align:center;line-height:1.2}
.clipnest-type{position:absolute;top:72.65%;left:0;width:100%;font-size:5.35cqw;text-align:center;line-height:1.2}
body.open .card[data-index="2"]{display:none}

.card[data-index="4"]{container-type:inline-size;cursor:pointer;background:#000!important}
.tomato-project-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7%;color:#e8f5e2;font-family:Arial,sans-serif;font-size:8cqw}
.tomato-project-cover img{width:88%;height:68%;object-fit:contain}
body.open .card[data-index="4"]{display:none}

.card[data-index="7"]{container-type:inline-size;cursor:pointer;background:#000!important}
.planet-project-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7%;color:#ece5ff;font-family:Arial,sans-serif;font-size:8cqw}
.planet-project-cover img{width:94%;height:70%;object-fit:contain}
body.open .card[data-index="7"]{display:none}

/* Use the original brand symbol at a readable size within the existing black card. */
.card[data-index="9"]{container-type:inline-size;cursor:pointer;background:#000!important;overflow:hidden}
.mapstella-project-cover{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center}
.mapstella-symbol{position:relative;display:block;width:76%;aspect-ratio:312/209;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.mapstella-symbol img{position:absolute;left:0;top:0;width:289.744%;height:100%;max-width:none}
.card[data-index="9"]:hover .mapstella-symbol{transform:scale(1.06)}
.mapstella-project-hint{position:fixed;z-index:500;pointer-events:none;background:#fffef8f5;color:#1f3027;border:1px solid #d9e5db;border-radius:12px;padding:13px 16px;min-width:180px;box-shadow:0 8px 28px #163e2418;opacity:0;visibility:hidden;transition:opacity .18s;font:13px Arial,sans-serif}
.mapstella-project-hint.is-visible{opacity:1;visibility:visible}
.mapstella-project-hint strong{display:block;font-size:15px;font-weight:500;margin-bottom:6px}
.mapstella-project-hint span{color:#5c7567;font-size:12px}
.mapstella-project-hint i{display:inline-block;background:#3ca66f;border-radius:50%;width:6px;height:6px;margin-right:6px}
body.open .card[data-index="9"]{display:none}
@media(prefers-reduced-motion:reduce){.mapstella-symbol{transition:none}}


/* One spacious bubble per cover; labels remain horizontal outside the ring. */
.clipnest-cover,.tomato-project-cover,.planet-project-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.project-cover-bubble{position:relative;display:block;left:auto;top:auto;width:94%;aspect-ratio:1}
.case-cover-hint{position:fixed;z-index:500;pointer-events:none;background:#fffffff5;color:#222;border:1px solid #e3e3e3;border-radius:12px;padding:13px 16px;min-width:180px;box-shadow:0 8px 28px #00000012;opacity:0;visibility:hidden;transition:opacity .18s;font:13px Arial,"PingFang SC",sans-serif}
.case-cover-hint.is-visible{opacity:1;visibility:visible}
.case-cover-hint strong{display:block;font-size:15px;font-weight:500;margin-bottom:6px}
.case-cover-hint span{color:#777;font-size:12px}

/* Homepage slots follow the visible project list. */
body:not(.open) .card.home-hidden{display:none}

body:not(.open) .card[data-index="12"] .character{visibility:hidden!important}
body:not(.open) .card[data-index="12"]{background:#000!important;cursor:default}

body:not(.open) .card:not([data-index="5"]):not([data-index="0"]):not([data-index="6"]):not([data-index="3"]) .character,body:not(.open) .card:not([data-index="5"]):not([data-index="0"]):not([data-index="6"]):not([data-index="3"]) .character *{visibility:hidden!important}

body:not(.open) .card:not([data-index="5"]):not([data-index="0"]):not([data-index="6"]):not([data-index="3"]) .character{display:none!important}

.eye-project-cover{position:absolute;width:82%;height:auto;left:9%;top:36%;filter:brightness(0) invert(1)}body:not(.open) .card[data-index="14"]{cursor:pointer}body.open .card[data-index="14"] .eye-project-cover{display:none}

.eye-project-cover{position:absolute;inset:0;width:auto;height:auto;filter:none}.eye-project-cover img{position:absolute;height:auto;max-width:none}.eye-cover-lines{left:13.71%;top:38.22%;width:78.11%}.eye-cover-dots{left:4.98%;top:50%;width:92.97%}

/* Updated Figma cover: stronger eye lines and raised composition. */
.eye-cover-lines{left:13.36%;top:25.63%;width:78.34%}.eye-cover-dots{left:6.02%;top:41.28%;width:92.97%}

.hemiao-cover{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hemiao-cover img{position:absolute;object-fit:cover}
.hemiao-back{left:9.28%;top:31.3%;width:65.77%;height:56.87%;opacity:.42}
.hemiao-front{left:39.69%;top:24.33%;width:66.14%;height:60.88%}
body:not(.open) .card[data-index="11"]{cursor:pointer}
body.open .card[data-index="11"]{display:none}

.hemiao-cover-scene{position:absolute;left:-3%;top:48.5%;width:100%;aspect-ratio:636/785;transform:translateY(-50%)}
.hemiao-cover img{transform-origin:0 0;object-fit:fill}
.hemiao-back{left:9.2767%;top:31.2965%;width:44.581%;height:45.079%;transform:rotate(-28.58877deg)}
.hemiao-front{left:39.6884%;top:24.3312%;width:51.3124%;height:51.8855%;transform:rotate(15deg)}

.lamp-cover{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#000}body:not(.open) .card[data-index="16"]{cursor:pointer}

.mapstella-project-cover{overflow:hidden}.mapstella-project-cover>svg{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%)}

.illustration-cover{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.illustration-cover svg{width:100%;height:auto;overflow:visible}body:not(.open) .card[data-index="17"]{cursor:pointer}body.open .card[data-index="17"]{display:none}

/* Figma GLASS is omitted from SVG export: retain the layer colors and rebuild its surface. */
.illustration-cover{container-type:inline-size}
.ill-folder-scene{position:relative;display:block;width:100%;aspect-ratio:636/785;isolation:isolate}
.ill-folder-back{position:absolute;left:9%;top:34%;width:82%;height:54%;transform:scaleX(-1)}
.ill-peek{position:absolute;display:block;overflow:hidden;box-shadow:0 2px 4px #0005;background:#fff;border:1px solid #fff8}
.ill-peek img{position:absolute;max-width:none}
.ill-peek-one{left:17%;top:21%;width:27%;height:33%;transform:rotate(-10deg)}
.ill-peek-one img{left:-198.39%;top:-54.87%;width:319.91%;height:164.39%}
.ill-peek-two{left:40%;top:18%;width:25%;height:35%;transform:rotate(3deg)}
.ill-peek-two img{inset:0;width:100%;height:100%;object-fit:cover}
.ill-peek-three{left:60%;top:26%;width:27%;height:28%;transform:rotate(10deg)}
.ill-peek-three img{inset:0;width:100%;height:100%;object-fit:cover}
.ill-glass-front{position:absolute;left:9%;top:28%;width:82%;height:60%;z-index:3;clip-path:polygon(0 0,50% 0,74.71% 23.22%,100% 23.22%,100% 100%,0 100%);border-radius:0 0 9% 9%;background:linear-gradient(135deg,#ffffff48,#ffffff16 42%,#ffffff05 67%,#ffffff25);-webkit-backdrop-filter:blur(2px) saturate(1.15);backdrop-filter:blur(2px) saturate(1.15);box-shadow:inset 0 0 0 1px #ffffff50,inset 1px 1px 2px #fff5,inset -1px -2px 3px #0002}
.ill-folder-title{position:absolute;z-index:4;left:0;right:0;top:68%;color:#fff;text-align:center;font:400 12cqw/1.2 Arial,sans-serif;letter-spacing:-.02em;white-space:nowrap}

.illustration-cover .ill-original-cover{display:block;width:94%;height:auto;object-fit:contain}

body:not(.open) .card[data-index="5"]{background:#000!important;cursor:pointer}