:root{--bg: #000000;--purple: #7700FF;--purple-lo: rgba(119,0,255,.14);--red: #CC1800;--text: #EDE8F5;--muted: rgba(237,232,245,.42);--ff-display: "Abril Fatface", serif;--ff-brand: "Bebas Neue", sans-serif;--ff-mono: "IBM Plex Mono", monospace;--ease: cubic-bezier(.16, 1, .3, 1);--ease-hard: cubic-bezier(.76, 0, .24, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--ff-mono);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}.grain{position:fixed;top:-150px;right:-150px;bottom:-150px;left:-150px;width:calc(100% + 300px);height:calc(100% + 300px);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.012;pointer-events:none;z-index:2000;animation:grain 8s steps(10) infinite}@keyframes grain{0%,to{transform:translate(0)}10%{transform:translate(-3%,-6%)}20%{transform:translate(-8%,4%)}30%{transform:translate(5%,-14%)}40%{transform:translate(-3%,14%)}50%{transform:translate(-9%,7%)}60%{transform:translate(9%)}70%{transform:translateY(9%)}80%{transform:translate(2%,19%)}90%{transform:translate(-6%,6%)}}#app{position:relative;z-index:10;min-height:100dvh}.home{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:60px 20px 100px}.brand-kanji{font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.35em;color:var(--muted);margin-bottom:10px;display:block;opacity:0;animation:charIn .5s var(--ease) .1s forwards}.brand-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:52px;cursor:pointer;-webkit-user-select:none;user-select:none}.brand{font-family:var(--ff-display);font-weight:400;font-size:clamp(4.5rem,15vw,13rem);letter-spacing:.03em;line-height:.88;color:var(--red);text-align:center;text-shadow:0 0 60px rgba(204,24,0,.5),0 0 130px rgba(204,24,0,.18);transition:text-shadow .5s var(--ease)}.brand-wrap:hover .brand{text-shadow:0 0 40px rgba(204,24,0,.85),0 0 100px rgba(204,24,0,.45),0 0 180px rgba(204,24,0,.15)}.brand .char{display:inline-block;opacity:0;animation:charIn .65s var(--ease) forwards}@keyframes charIn{0%{opacity:0;transform:translateY(60px);filter:blur(12px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.brand-rule{width:44px;height:2px;background:var(--red);margin-top:20px;transform-origin:left center;animation:ruleIn .65s var(--ease) .85s both}@keyframes ruleIn{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}.brand-wrap:hover .brand-rule{width:68px;transition:width .4s var(--ease)}.lineup{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:960px}.tile-wrap{flex:0 0 calc((100% - 36px)/4);min-width:0;cursor:pointer;opacity:0;animation:cardIn .6s var(--ease) forwards}@keyframes cardIn{0%{opacity:0;transform:translateY(28px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.tile{background:#000;border:1px solid rgba(255,255,255,.055);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}.tile-wrap:hover .tile{transform:translateY(-5px);border-color:#7700ff47;box-shadow:0 18px 46px #00000080,0 0 0 1px #7700ff14}.tile-photo{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1.5px solid rgba(204,24,0,.22);transition:border-color .4s}.tile-wrap:hover .tile-photo{border-color:#cc180080}.tile-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s var(--ease)}.tile-wrap:hover .tile-photo img{transform:scale(1.07)}.tile-label{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}.tile-dot{width:4px;height:4px;border-radius:50%;background:var(--red);flex-shrink:0;opacity:.75}.tile-name{font-family:var(--ff-brand);font-weight:400;font-size:1rem;letter-spacing:.1em;color:var(--text);line-height:1}.profile{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 24px 80px}.profile__back{position:fixed;top:24px;left:24px;background:#0009;border:1px solid rgba(237,232,245,.1);color:var(--muted);font-family:var(--ff-mono);font-weight:500;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;border-radius:100px;cursor:pointer;z-index:100;transition:border-color .3s,color .3s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.profile__back:hover{border-color:#70f6;color:var(--text)}.profile__inner{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:400px;width:100%}.profile__photo{width:220px;aspect-ratio:1;overflow:hidden;border-radius:8px;border:1px solid rgba(119,0,255,.2);box-shadow:0 0 60px #7700ff24,0 0 120px #7700ff0d;opacity:0;animation:pPhotoIn .85s var(--ease) .1s forwards}.profile__photo img{width:100%;height:100%;object-fit:cover;display:block}@keyframes pPhotoIn{0%{opacity:0;transform:scale(.86);filter:blur(12px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.profile__name{font-family:var(--ff-brand);font-weight:400;font-size:clamp(2.8rem,9vw,5.2rem);letter-spacing:.05em;color:var(--text);line-height:1;opacity:0;animation:pSlide .6s var(--ease) .3s forwards}.profile__rule{width:32px;height:2px;background:var(--red);opacity:0;animation:pSlide .6s var(--ease) .42s forwards}@keyframes pSlide{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.profile__bio{font-family:var(--ff-mono);font-size:.8rem;line-height:1.95;color:var(--muted);text-align:center;max-width:380px;opacity:0;animation:pSlide .6s var(--ease) .52s forwards}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .38s var(--ease)}.modal.open{opacity:1;pointer-events:all}.modal__bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.modal__box{position:relative;background:#0a0810f7;border:1px solid rgba(119,0,255,.18);border-radius:14px;padding:44px 40px;max-width:520px;width:100%;transform:scale(.93) translateY(24px);transition:transform .48s var(--ease);box-shadow:0 40px 90px #0009,inset 0 0 0 1px #7700ff0f}.modal.open .modal__box{transform:scale(1) translateY(0)}.modal__box:before{content:"";position:absolute;top:0;left:36px;right:36px;height:1px;background:linear-gradient(90deg,transparent,var(--purple),transparent);opacity:.6}.modal__header{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:20px}.modal__icon{width:56px;height:56px;object-fit:contain;border-radius:10px}.modal__eyebrow{font-family:var(--ff-mono);font-weight:500;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--purple);margin-bottom:16px;display:block}.modal__title{font-family:var(--ff-display);font-weight:400;font-size:2.4rem;letter-spacing:.03em;color:var(--red);line-height:1;margin:0}.modal__text{font-family:var(--ff-mono);font-size:.8rem;line-height:1.95;color:var(--muted)}.modal__close{position:absolute;top:16px;right:16px;background:none;border:1px solid rgba(119,0,255,.2);color:var(--muted);width:32px;height:32px;border-radius:50%;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s;font-family:var(--ff-mono)}.modal__close:hover{border-color:#7700ff80;color:var(--text)}.page-out{animation:pgOut .26s var(--ease-hard) forwards}.page-in{animation:pgIn .4s var(--ease) forwards}@keyframes pgOut{to{opacity:0;transform:translateY(-12px);filter:blur(5px)}}@keyframes pgIn{0%{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@media(max-width:720px){.home{padding:48px 16px 80px}.brand-kanji{font-size:.6rem;letter-spacing:.25em}.lineup{gap:8px}.tile-wrap{flex:0 0 calc((100% - 8px)/2)}.tile{padding:14px 14px 12px;gap:10px;border-radius:12px}.tile-name{font-size:.88rem}}@media(max-width:480px){.home{padding:36px 12px 64px}.brand-wrap{margin-bottom:32px}.modal{padding:12px}.modal__box{padding:32px 20px;border-radius:12px}.modal__title{font-size:2rem}.modal__text{font-size:.75rem}.profile{padding:80px 16px 60px}.profile__photo{width:180px}.profile__back{top:16px;left:16px;font-size:.6rem;padding:8px 14px}}@media(max-width:360px){.lineup{grid-template-columns:repeat(2,1fr);gap:6px}.tile{padding:10px 10px 8px;gap:8px}.tile-name{font-size:.78rem;letter-spacing:.06em}.modal__box{padding:28px 16px}}@media(prefers-reduced-motion:reduce){.grain{animation:none}.brand .char,.tile-wrap,.brand-rule,.brand-kanji,.profile__photo,.profile__name,.profile__rule,.profile__bio{animation:none;opacity:1}}
