:root{--bg:#07111e;--bg2:#0a1928;--panel:#0d2031;--ink:#edf7ff;--muted:#9db1c2;--blue:#8de8f4;--line:rgba(171,221,238,.18);--serif:Georgia,'Times New Roman',serif;--sans:'Noto Sans JP',sans-serif;--display:'Barlow Condensed',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.cursor-orb{position:fixed;left:0;top:0;width:32px;height:32px;border:1px solid rgba(141,232,244,.9);border-radius:50%;pointer-events:none;z-index:30;transform:translate(-50%,-50%);opacity:0;transition:width .2s,height .2s,opacity .2s;mix-blend-mode:screen}.cursor-orb:after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 20px var(--blue)}.cursor-orb.hover{width:54px;height:54px;background:#8de8f41c}.site-header{height:82px;position:absolute;z-index:25;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5.4vw,88px);border-bottom:1px solid #ffffff15;background:linear-gradient(#06101bcc,transparent)}.brand{display:flex;align-items:center;gap:11px;flex:0 1 auto}.brand-logo{display:block;width:clamp(145px,15vw,235px);height:auto;max-height:68px;object-fit:contain;object-position:left center}.footer-brand .brand-logo{width:clamp(180px,20vw,280px);max-height:100px}.main-nav,.header-actions{display:flex;align-items:center;gap:clamp(14px,2.5vw,38px)}.main-nav a,.footer-links a{font:600 12px var(--display);letter-spacing:.12em;color:#c6d7e4;transition:color .2s}.main-nav a:hover,.footer-links a:hover{color:var(--blue)}.header-actions{gap:17px}.language-picker{display:inline-flex;align-items:center}.lang-select{appearance:auto;max-width:125px;border:1px solid #8de8f46b;border-radius:2px;background:#071522;color:var(--ink);padding:9px 28px 9px 10px;font:600 12px var(--sans);cursor:pointer;outline-offset:3px}.lang-select:focus-visible{outline:2px solid var(--blue)}.lang-select option{background:#071522;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.join-button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:16px 20px;min-width:210px;background:var(--blue);color:#06121e;font:700 12px var(--display);letter-spacing:.1em;border:1px solid var(--blue);transition:background .25s,color .25s,transform .25s}.join-button:hover{background:transparent;color:var(--blue);transform:translateY(-2px)}.join-button span:last-child{font-size:19px}.join-small{min-width:150px;padding:12px 14px}.menu-toggle{display:none;background:none;border:1px solid var(--line);padding:8px 12px}.hero{position:relative;min-height:min(900px,100svh);min-height:max(740px,100svh);display:flex;align-items:center;overflow:hidden;padding:130px clamp(24px,10vw,160px) 100px}.hero-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 72% 38%,#1d56706b,transparent 30%),radial-gradient(ellipse at 80% 65%,#2c6a8060,transparent 25%),linear-gradient(110deg,#07111e 8%,#091827d9 52%,#0b2637 100%)}.hero-backdrop:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07111e 0%,#07111ed9 33%,#07111e30 100%),radial-gradient(circle at 78% 44%,transparent 0 12%,#08152250 45%);}.hero-backdrop:after{content:'';position:absolute;right:7%;top:14%;width:min(42vw,570px);aspect-ratio:1;border:1px solid #a4f1ff45;border-radius:50%;box-shadow:0 0 0 45px #8de8f407,0 0 0 100px #8de8f405;transform:rotate(-20deg)}.hero-lines{position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 110px,#b7f5ff08 111px 112px,transparent 113px 230px);mask-image:linear-gradient(90deg,transparent,black)}.hero-content{position:relative;z-index:2;max-width:760px}.eyebrow{font:600 11px var(--display);letter-spacing:.22em;color:var(--blue);margin:0 0 18px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;margin-right:9px;box-shadow:0 0 12px var(--blue)}h1,h2,h3,p{margin-top:0}.hero h1{font:800 clamp(65px,10vw,150px)/.78 var(--display);letter-spacing:.015em;margin:30px 0 28px;text-shadow:0 4px 60px #0008}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #b5f3ff;letter-spacing:.04em}.hero-jp{font-size:clamp(18px,2vw,25px);letter-spacing:.14em;margin:0 0 13px}.hero-desc{color:#a9bdcc;font-size:13px;letter-spacing:.06em;line-height:2}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:33px}.text-link{display:flex;align-items:center;gap:15px;font-size:12px;color:#d6e4ee}.text-link span:last-child{font-size:18px;color:var(--blue)}.hero-stats{display:flex;align-items:center;gap:24px;margin-top:65px;position:relative}.hero-stats>div{display:grid;gap:5px}.stat-label{font:600 10px var(--display);letter-spacing:.15em;color:#9eb9c9}.hero-stats strong{font:600 30px var(--display);letter-spacing:.08em}.hero-stats>i{height:35px;width:1px;background:var(--line)}.stats-note{position:absolute;left:0;top:100%;font-size:10px;color:#6f8999;margin:4px 0}.hero-side-note{position:absolute;right:5%;bottom:21%;writing-mode:vertical-rl;color:#8ea8b8;font:11px var(--display);letter-spacing:.22em}.hero-side-note span{color:var(--blue);margin-top:12px}.scroll-cue{position:absolute;bottom:32px;left:clamp(24px,10vw,160px);font:10px var(--display);letter-spacing:.2em;color:#9bb3c3;display:flex;align-items:center;gap:13px}.scroll-cue span{display:inline-block;width:38px;height:1px;background:var(--blue)}.section{padding:clamp(78px,10vw,150px) clamp(24px,10vw,160px);position:relative}.news-section,.gallery-section,.faq-section{background:#091725}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:44px}.section-head h2,.about-copy h2{font:700 clamp(45px,6vw,78px)/.95 var(--display);letter-spacing:.04em;margin:0}.section-head h2 span,.about-copy h2 span{color:var(--blue)}.section-note{font-size:12px;color:var(--muted);letter-spacing:.05em;margin:0 0 6px}.news-list{border-top:1px solid var(--line);max-height:310px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#5c9aa7 #102130;scrollbar-width:thin}.news-item{display:grid;grid-template-columns:110px 70px 1fr 20px;align-items:center;gap:20px;padding:23px 12px;border-bottom:1px solid var(--line);transition:background .2s}.news-item:hover{background:#112638}.news-date{font:12px var(--display);color:#9ab0bf}.news-tag{font:700 10px var(--display);letter-spacing:.12em;color:var(--blue);border:1px solid #8de8f44d;padding:5px 8px;width:max-content}.news-item p{font-size:13px;color:#d2e1eb;margin:0;line-height:1.8}.news-arrow{color:var(--blue)}.micro-note{font-size:10px;color:#718a9b;line-height:1.8;margin:18px 0 0}.about-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(45px,9vw,145px);background:linear-gradient(120deg,#081522,#0b1b2a)}.about-art{position:relative;aspect-ratio:1;max-width:520px;width:100%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,#24526988,transparent 55%),linear-gradient(140deg,#102b3a,#08121f 70%);border:1px solid #9defff25}.about-art:before,.about-art:after{content:'';position:absolute;inset:12%;border:1px solid #a2eefa40;transform:rotate(45deg)}.about-art:after{inset:24%;transform:rotate(22.5deg);border-color:#a2eefa22}.about-symbol{font:clamp(100px,16vw,220px) var(--serif);color:#b5f4ff;opacity:.8;text-shadow:0 0 45px #54cbe7a6;z-index:1}.orbit{position:absolute;border:1px solid #9defff45;border-radius:50%;width:75%;height:25%;transform:rotate(-38deg)}.orbit-two{transform:rotate(42deg);width:85%;height:35%;border-color:#9defff22}.art-caption{position:absolute;bottom:18px;left:20px;font:9px var(--display);letter-spacing:.16em;color:#7fa6b9}.about-copy h2{margin-bottom:34px}.about-lead{font-size:clamp(13px,1.2vw,15px);line-height:2.5;color:#d0dfe8;letter-spacing:.025em}.under-link{display:inline-flex;gap:25px;align-items:center;padding:13px 0;border-bottom:1px solid #8de8f46b;font-size:12px;margin-top:22px;letter-spacing:.04em}.under-link b{font-size:18px;color:var(--blue);font-weight:400}.gallery-grid{display:grid;grid-template-columns:1.12fr .88fr 1fr;grid-template-rows:210px 210px;gap:14px;position:relative}.gallery-card{border:1px solid #9defff35;padding:0;background:#0b1a28;position:relative;min-height:0;height:100%;overflow:hidden;cursor:pointer;text-align:left;isolation:isolate}.gallery-large{grid-row:span 2}.gallery-card:nth-child(2){transform:translateY(22px)}.gallery-card:nth-child(3){transform:translateY(-10px)}.gallery-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:clamp(16px,2vw,28px);background:radial-gradient(ellipse at 65% 25%,#2c7892a8,transparent 35%),linear-gradient(145deg,#19394b,#0a1725 70%);transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .5s}.tone-two{background:radial-gradient(ellipse at 25% 25%,#3b718b9c,transparent 35%),linear-gradient(140deg,#122a3a,#101827)}.tone-three{background:radial-gradient(ellipse at 70% 40%,#427d8a8c,transparent 35%),linear-gradient(140deg,#142f3a,#0a1725)}.gallery-placeholder:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#020812d9 0%,transparent 62%);z-index:0}.gallery-card:hover .gallery-placeholder{transform:scale(1.055);filter:saturate(1.2)}.gallery-placeholder:before{content:"";position:absolute;inset:12px;border:1px solid #b6f5ff30;pointer-events:none}.gallery-placeholder span,.gallery-placeholder b,.gallery-placeholder small{position:relative;z-index:1}.gallery-placeholder span{font:12px var(--display);color:var(--blue);letter-spacing:.2em;margin-bottom:auto}.gallery-placeholder b{font:600 clamp(19px,2vw,27px) var(--display);letter-spacing:.1em}.gallery-placeholder small{font-size:10px;color:#a2b8c6;margin-top:7px}.gallery-zoom{position:absolute;right:18px;top:18px;background:#07111eaa;border:1px solid #8de8f45c;width:36px;height:36px;display:grid;place-items:center;color:var(--blue);transition:background .2s,transform .25s;z-index:2}.gallery-card:hover .gallery-zoom{background:var(--blue);color:#07111e;transform:rotate(45deg)}.gallery-section .section-head{margin-bottom:55px}.gallery-section .micro-note{letter-spacing:.04em}.contents-section{background:linear-gradient(120deg,#0a1a29,#07111e)}.contents-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,7vw,100px)}.contents-menu{border-top:1px solid var(--line)}.content-option{width:100%;display:grid;grid-template-columns:42px 1fr 20px;align-items:center;text-align:left;gap:15px;padding:19px 12px;background:transparent;border:0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s,padding .2s}.content-option span{font:12px var(--display);color:#7d9aaa}.content-option b{font-size:13px;font-weight:500}.content-option i{font-style:normal;color:#7c9aaa}.content-option:hover,.content-option.active{background:#10283a;padding-left:20px}.content-option.active b,.content-option.active i{color:var(--blue)}.content-detail{min-height:360px;position:relative;overflow:hidden;border:1px solid var(--line);padding:clamp(25px,4vw,52px);background:radial-gradient(ellipse at 100% 0%,#1b5164a1,transparent 50%),#0b1b29}.content-detail h3{font-size:clamp(22px,3vw,34px);font-weight:500;margin:30px 0 22px;position:relative;z-index:1}.content-detail>p:not(.eyebrow){font-size:13px;color:#afc3d1;line-height:2.2;max-width:450px;position:relative;z-index:1}.detail-decoration{position:absolute;right:-12px;bottom:35px;font:200px/.8 var(--serif);color:#a7edff0a;pointer-events:none}.detail-decoration span{color:#a7edff10}.content-detail .under-link{position:relative;z-index:1}.faq-list{max-width:1000px;margin:0 auto}.faq-list details{border-top:1px solid var(--line)}.faq-list details:last-of-type{border-bottom:1px solid var(--line)}.faq-list summary{display:grid;grid-template-columns:70px 1fr 25px;align-items:center;gap:15px;list-style:none;padding:24px 12px;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font:12px var(--display);color:var(--blue)}.faq-list summary b{font-size:13px;font-weight:500}.faq-list summary i{font-style:normal;font-size:22px;color:var(--blue);transition:transform .2s}.faq-list details[open] summary i{transform:rotate(45deg)}.faq-list details>p{padding:0 52px 24px 97px;color:#a8bdcb;font-size:12px;line-height:2}.join-section{position:relative;overflow:hidden;text-align:center;padding:clamp(85px,12vw,160px) 24px;background:linear-gradient(120deg,#0b2534,#0a1725 60%,#102e3e)}.join-glow{position:absolute;left:50%;top:45%;width:min(65vw,700px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #8de8f425;box-shadow:0 0 0 60px #8de8f407,0 0 0 120px #8de8f405}.join-inner{position:relative}.join-icon{width:52px;height:52px;border:1px solid #8de8f46e;color:var(--blue);display:grid;place-items:center;margin:35px auto 22px;font-size:24px;transform:rotate(45deg)}.join-icon:before{content:'✦';transform:rotate(-45deg)}.join-icon{font-size:0}.join-section h2{font-size:clamp(27px,4vw,45px);font-weight:500;letter-spacing:.08em;margin:0 0 20px}.join-section p:not(.eyebrow){font-size:13px;color:#b2c6d4;line-height:2.2}.join-big{margin-top:20px;min-width:260px}.join-disclaimer{font:10px var(--display)!important;letter-spacing:.14em;color:#6e8a9b!important;margin-top:40px}.site-footer{padding:45px clamp(24px,5.4vw,88px) 22px;background:#050d16;border-top:1px solid var(--line)}.footer-brand{width:max-content}.site-footer>p{font-size:11px;color:#849aaa;margin:25px 0}.footer-links{display:flex;flex-wrap:wrap;gap:23px;padding:20px 0 30px;border-bottom:1px solid var(--line)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;color:#637d8e;font:9px var(--display);letter-spacing:.1em}.footer-bottom a{color:#9db9c9}.back-to-top{position:fixed;right:24px;bottom:24px;z-index:22;width:46px;height:46px;border:1px solid #8de8f46b;background:#07111ee8;color:var(--blue);font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s}.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.lightbox{display:none;position:fixed;z-index:50;inset:0;background:#02070df2;align-items:center;justify-content:center;flex-direction:column;padding:50px}.lightbox.open{display:flex}.lightbox img{max-width:min(100%,1100px);max-height:78vh;object-fit:contain}.lightbox #lightboxClose{position:absolute;top:25px;right:30px;border:1px solid var(--line);background:#07111eaa;font-size:32px;width:48px;height:48px;cursor:pointer;z-index:2}.lightbox-nav{border:1px solid #8de8f46b;background:#07111eaa;color:var(--blue);font-size:42px;line-height:1;width:52px;height:64px;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:24px}.lightbox-next{right:24px}.lightbox-counter{font:11px var(--display);letter-spacing:.18em;color:var(--blue);margin-top:3px}.lightbox p{color:var(--muted);font-size:11px;margin-top:15px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s,transform .75s}.reveal.in-view{opacity:1;transform:translateY(0)} @media(min-width:1900px){body{font-size:17px}.hero{padding-left:max(10vw,220px)}.section{padding-left:max(10vw,220px);padding-right:max(10vw,220px)}.hero h1{font-size:clamp(150px,9vw,205px)}} @media(max-width:1000px){.main-nav{gap:15px}.main-nav a{font-size:11px}.join-small{min-width:0}.site-header{padding-inline:25px}.section{padding-inline:6vw}.hero{padding-left:7vw}.scroll-cue{left:7vw}.about-section{gap:40px}.contents-layout{gap:30px}} @media(max-width:760px){.site-header{height:70px;padding:0 18px}.main-nav{display:none;position:absolute;top:70px;left:0;right:0;padding:20px;background:#07111ef7;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}.main-nav.open{display:flex}.main-nav a{padding:14px 6px;border-bottom:1px solid #ffffff12}.header-actions{gap:12px}.join-small{display:none}.menu-toggle{display:block}.brand-logo{width:clamp(118px,37vw,185px);max-height:54px}.hero{min-height:780px;min-height:100svh;padding:120px 24px 100px}.hero-backdrop:after{width:70vw;right:-20%;top:20%}.hero h1{font-size:clamp(62px,16vw,110px)}.hero-side-note{right:18px;bottom:22%;font-size:9px}.hero-desc{max-width:340px;line-height:2}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.hero-stats{margin-top:45px;gap:17px}.hero-stats strong{font-size:25px}.stat-label{font-size:9px}.section{padding:78px 22px}.section-head{align-items:flex-start;flex-direction:column;margin-bottom:30px;gap:14px}.section-head h2,.about-copy h2{font-size:58px}.news-item{grid-template-columns:82px 55px 1fr 12px;gap:9px;padding:18px 4px}.news-date{font-size:10px}.news-tag{font-size:9px;padding:4px 5px}.news-item p{font-size:11px}.about-section{grid-template-columns:1fr;gap:38px}.about-art{max-width:none;width:100%;aspect-ratio:1.1}.about-symbol{font-size:150px}.about-copy h2{margin-bottom:25px}.about-lead{font-size:13px;line-height:2.3}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 170px;gap:10px}.gallery-large{grid-column:span 2;grid-row:auto;aspect-ratio:auto}.gallery-card{min-height:0;height:100%;aspect-ratio:auto}.gallery-card:nth-child(2),.gallery-card:nth-child(3){transform:none}.gallery-placeholder{padding:15px}.gallery-placeholder b{font-size:20px}.gallery-placeholder small{font-size:9px}.gallery-zoom{right:12px;top:12px;width:30px;height:30px}.contents-layout{grid-template-columns:1fr;gap:25px}.content-option{grid-template-columns:32px 1fr 20px;padding:17px 8px}.content-option b{font-size:12px}.content-detail{min-height:300px;padding:27px 22px}.content-detail h3{margin:25px 0 18px}.faq-list summary{grid-template-columns:45px 1fr 20px;gap:10px;padding:20px 2px}.faq-list summary b{font-size:12px}.faq-list details>p{padding:0 25px 20px 57px;line-height:2}.join-section{padding:90px 24px}.join-section h2{font-size:29px}.site-footer{padding:35px 22px 20px}.footer-links{gap:16px}.footer-bottom{flex-direction:column;gap:12px}.cursor-orb{display:none}.lightbox{padding:20px}.lightbox img{max-height:72vh}.lightbox-prev{left:8px}.lightbox-next{right:8px}.lightbox-nav{width:38px;height:48px;font-size:32px}.lightbox #lightboxClose{top:12px;right:12px}.lightbox-prev{left:8px}.lightbox-next{right:8px}.lightbox-nav{width:38px;height:48px;font-size:32px}.lightbox #lightboxClose{top:12px;right:12px}} @media(max-width:380px){.hero h1{font-size:58px}.hero-stats{gap:12px}.hero-stats strong{font-size:22px}.hero-stats>i{height:28px}.hero-jp{font-size:16px}.join-button{min-width:190px}.news-item{grid-template-columns:70px 48px 1fr 10px}.news-date{font-size:9px}.news-item p{font-size:10px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}} /* Gallery layout inspired by the supplied reference screenshot */ .gallery-reference-section{padding:0 0 clamp(70px,8vw,120px);background:#fbfaf6;color:#344550;overflow:hidden}.gallery-reference-heading{display:grid;grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);align-items:center;gap:clamp(12px,2vw,30px);padding:25px clamp(20px,8vw,120px) 0;text-align:center}.gallery-reference-heading h2{font:400 clamp(48px,6vw,82px)/.95 Georgia,'Times New Roman',serif;letter-spacing:.015em;margin:0;color:#344550;grid-column:2;grid-row:1}.gallery-heading-flourish{display:flex;align-items:center;justify-content:center;gap:5px;grid-row:1}.gallery-heading-flourish span{display:block;width:clamp(18px,3.5vw,60px);height:7px;border:1px solid #aab5b9;border-radius:8px;transform:translateY(-8px)}.gallery-heading-flourish i{display:block;width:clamp(15px,2.5vw,36px);height:7px;border:1px solid #aab5b9;border-radius:8px;transform:translateY(2px)}.gallery-kanji{grid-column:1/4;display:flex;justify-content:center;gap:9px;margin-top:9px}.gallery-kanji span{width:39px;height:39px;display:grid;place-items:center;border:1px solid #526572;outline:1px solid #526572;outline-offset:3px;transform:rotate(45deg);font:18px Georgia,serif;color:#344550}.gallery-kanji span{position:relative}.gallery-kanji span{line-height:1}.gallery-subnote{text-align:center;color:#7e8b8e;font-size:11px;letter-spacing:.08em;margin:22px 18px 28px}.gallery-showcase{width:min(78vw,1000px);margin:0 auto 36px}.gallery-feature{display:block;position:relative;width:100%;aspect-ratio:16/9;border:0;padding:0;overflow:hidden;background:#e9e5e0;cursor:zoom-in;text-align:left;color:#fff}.gallery-feature-art{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:clamp(20px,4vw,52px);background:radial-gradient(ellipse at 70% 25%,#ffd4c7 0,transparent 24%),radial-gradient(ellipse at 28% 32%,#d5c5e9 0,transparent 33%),linear-gradient(125deg,#d6b6d4,#f8d9b4 48%,#879fbe);transition:transform .6s}.gallery-feature-art:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#182a387a,transparent 60%),linear-gradient(110deg,#fff1 0 35%,transparent 35% 55%,#fff2 55% 56%,transparent 56%)}.gallery-feature-art>*{position:relative;z-index:1;text-shadow:0 2px 14px #2333}.gallery-feature-art .feature-kicker{font:10px var(--display);letter-spacing:.2em;margin-bottom:10px}.gallery-feature-art b{font:500 clamp(23px,4vw,44px) Georgia,serif;letter-spacing:.04em}.gallery-feature-art small{font-size:11px;margin-top:9px;color:#fff}.gallery-feature:hover .gallery-feature-art{transform:scale(1.025)}.feature-open{position:absolute;right:20px;top:20px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #fff9;border-radius:50%;background:#182a3838;color:#fff;font-size:18px}.feature-tone-2{background:radial-gradient(ellipse at 70% 30%,#a9f5ff,transparent 28%),linear-gradient(130deg,#123c70,#43b6e7 48%,#e3d4ff)}.feature-tone-3{background:radial-gradient(ellipse at 65% 25%,#e4f7ff,transparent 24%),linear-gradient(130deg,#9bb5d8,#dce9ed 48%,#7d9ab8)}.feature-tone-4{background:radial-gradient(ellipse at 70% 25%,#ffe2a0,transparent 28%),linear-gradient(130deg,#ef9c75,#eac4a6 48%,#6b739c)}.feature-tone-5{background:radial-gradient(ellipse at 65% 25%,#c7ffe3,transparent 24%),linear-gradient(130deg,#6eae9d,#d5e9c9 48%,#9cb3df)}.feature-tone-6{background:radial-gradient(ellipse at 65% 25%,#fff4e9,transparent 24%),linear-gradient(130deg,#c7d3d8,#f1e6dc 48%,#b7c5e2)}.gallery-filmstrip{display:flex;align-items:center;justify-content:center;gap:7px;padding:14px clamp(14px,4vw,50px);background:linear-gradient(100deg,#8ec8ff,#dba7f3 55%,#ffa9e8);border-top:5px solid #fff9;border-bottom:5px solid #fff9;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#fff8 transparent}.gallery-thumb{flex:0 0 clamp(54px,5vw,78px);height:clamp(40px,3.4vw,56px);position:relative;padding:0;border:2px solid #fff;background:linear-gradient(130deg,#d9b6ed,#7bbbe9);cursor:pointer;overflow:hidden;box-shadow:0 2px 7px #34455025;transition:transform .2s,border-color .2s}.gallery-thumb:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,#fff8),radial-gradient(circle at 65% 25%,#fff9,transparent 25%)}.gallery-thumb span{position:absolute;bottom:2px;right:4px;color:#fff;font:9px var(--display);text-shadow:0 1px 3px #123}.gallery-thumb:hover,.gallery-thumb.is-active{transform:translateY(-4px);border-color:#344550;box-shadow:0 0 0 2px #fff}.thumb-tone-2{background:linear-gradient(130deg,#04c9f3,#132f8e)}.thumb-tone-3{background:linear-gradient(130deg,#b2e4ee,#8d9fcb)}.thumb-tone-4{background:linear-gradient(130deg,#ffd075,#ef7f92)}.thumb-tone-5{background:linear-gradient(130deg,#a5efc0,#f8b6cf)}.thumb-tone-6{background:linear-gradient(130deg,#f9ede5,#d5c4ed)}.gallery-reference-hint{text-align:center;padding:0 18px;margin:22px auto 0;color:#7e8b8e}.gallery-reference-section .micro-note{color:#7e8b8e}.gallery-feature-art b,.gallery-feature-art small{max-width:80%}.gallery-kanji span{transform:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);outline:none;border:1px solid #526572;width:46px;height:46px}.gallery-kanji span{background:#fbfaf6}.gallery-kanji span::first-letter{transform:rotate(0)} @media(max-width:760px){.gallery-reference-section{padding-bottom:70px}.gallery-reference-heading{padding-top:26px;gap:8px}.gallery-reference-heading h2{font-size:clamp(43px,12vw,62px)}.gallery-heading-flourish span{width:17px}.gallery-heading-flourish i{width:12px}.gallery-kanji{margin-top:12px}.gallery-kanji span{width:34px;height:34px;font-size:15px}.gallery-subnote{margin:20px 18px 22px}.gallery-showcase{width:calc(100% - 32px);margin-bottom:20px}.gallery-feature{aspect-ratio:4/3}.gallery-feature-art{padding:18px}.gallery-feature-art b{font-size:25px}.gallery-feature-art small{font-size:10px}.gallery-filmstrip{justify-content:flex-start;gap:6px;padding:12px 14px}.gallery-thumb{flex-basis:60px;height:43px}.gallery-reference-hint{font-size:10px;line-height:1.8;padding:0 20px}} /* Hero logo and community introduction updated from user markup */ .hero-logo-wrap{width:min(100%,760px);margin:30px 0 22px;display:flex;align-items:center} .hero-logo{display:block;width:100%;max-width:760px;max-height:220px;object-fit:contain;object-position:left center;filter:drop-shadow(0 8px 28px #0008)} .hero-community-copy{max-width:760px;font-size:clamp(12px,1vw,15px);line-height:2.15;letter-spacing:.035em;color:#d5e4ed;margin:0; text-wrap:pretty} @media(max-width:760px){.hero-logo-wrap{margin:26px 0 20px;width:100%}.hero-logo{max-height:155px;object-position:left center}.hero-community-copy{font-size:12px;line-height:2;max-width:100%}} @media(max-width:380px){.hero-logo{max-height:125px}.hero-community-copy{font-size:11px}} /* === Atmospheric redesign: original-inspired loader, paper sections and wave ripples === */ .site-preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#050b16;opacity:1;visibility:visible;transition:opacity .8s ease,visibility .8s ease} .site-preloader::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#153a59 0%,#09182a 38%,#040914 78%);opacity:.95} .preloader-inner{position:relative;z-index:1;width:min(70vw,620px);display:flex;flex-direction:column;align-items:center;gap:22px;animation:preloaderRise 1.15s cubic-bezier(.2,.75,.25,1) both} .preloader-logo{display:block;width:min(100%,520px);max-height:190px;object-fit:contain;filter:drop-shadow(0 0 24px #5bcfff55);animation:logoGlow 2.4s ease-in-out infinite alternate} .preloader-caption{font:500 10px var(--display);letter-spacing:.32em;color:#a5eefa;text-align:center} .preloader-progress{width:min(250px,70%);height:1px;background:#9befff35;overflow:hidden;margin-top:4px} .preloader-progress span{display:block;height:100%;width:40%;background:#a4f4ff;box-shadow:0 0 12px #8de8f4;animation:preloaderLoad 1.35s ease-in-out infinite} body.is-loaded .site-preloader{opacity:0;visibility:hidden;pointer-events:none} @keyframes preloaderRise{from{opacity:0;transform:translateY(22px) scale(.97);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}} @keyframes logoGlow{from{filter:drop-shadow(0 0 10px #5bcfff2b)}to{filter:drop-shadow(0 0 28px #5bcfff8a)}} @keyframes preloaderLoad{0%{transform:translateX(-120%)}100%{transform:translateX(350%)}} .wave-ripples{position:fixed;z-index:0;pointer-events:none;inset:0;overflow:hidden;opacity:.48;mix-blend-mode:multiply} .wave-ripples span{position:absolute;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:1;border:1px solid #55b7cf55;border-radius:50%;transform:translate(-50%,-50%) scale(.25);animation:rippleExpand var(--duration) ease-out infinite;animation-delay:var(--delay)} .wave-ripples span:nth-child(1){--x:12%;--y:26%;--size:330px;--duration:9s;--delay:0s}.wave-ripples span:nth-child(2){--x:84%;--y:48%;--size:520px;--duration:12s;--delay:-4s}.wave-ripples span:nth-child(3){--x:47%;--y:88%;--size:410px;--duration:10s;--delay:-6s} .wave-ripples i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size)*.22);border:1px solid #5ebbd044;border-radius:50%;transform:translate(-50%,-50%);animation:waterDrift 8s ease-in-out infinite alternate;animation-delay:var(--delay)} .wave-ripples i:nth-of-type(1){--x:24%;--y:74%;--size:420px;--delay:-2s}.wave-ripples i:nth-of-type(2){--x:78%;--y:18%;--size:300px;--delay:-5s} @keyframes rippleExpand{0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}18%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}} @keyframes waterDrift{from{transform:translate(-50%,-50%) rotate(-9deg) scale(.9);opacity:.35}to{transform:translate(-50%,-50%) rotate(8deg) scale(1.08);opacity:.8}} /* The supplied hero artwork will be added later; keep the top visual dark and cinematic. */ .hero{isolation:isolate}.hero-backdrop{z-index:-2}.hero-lines{z-index:-1} /* Cream paper-like sections inspired by the reference screenshot; typography stays clean and readable. */ .news-section,.gallery-section,.faq-section,.about-section,.contents-section{background-color:#fbfaf6;background-image:radial-gradient(ellipse at 14% 16%,#ffffffd9 0,transparent 38%),radial-gradient(ellipse at 83% 70%,#eeeae1a8 0,transparent 44%),repeating-linear-gradient(115deg,#7b8d9707 0 1px,transparent 1px 8px);color:#344550} .news-section .section-head h2,.gallery-section .section-head h2,.faq-section .section-head h2,.about-copy h2,.contents-section .section-head h2{color:#344550} .news-section .eyebrow,.gallery-section .eyebrow,.faq-section .eyebrow,.about-copy .eyebrow,.contents-section .eyebrow{color:#567c8c} .news-section .section-note,.gallery-section .section-note,.faq-section .section-note,.contents-section .section-note,.news-section .micro-note,.gallery-section .micro-note,.faq-section .micro-note{color:#74858a} .news-list{border-color:#34455035;scrollbar-color:#9bbbc3 #e8e6df}.news-item{border-color:#34455025}.news-item:hover{background:#eaf1f0}.news-date{color:#687c85}.news-item p{color:#344550}.news-tag{color:#477d8b;border-color:#5f9ba755}.news-arrow{color:#477d8b} .about-art{background:radial-gradient(circle,#c7e6e9 0,transparent 55%),linear-gradient(140deg,#e3e7e1,#f9f8f2 70%);border-color:#5f9ba755}.about-art:before,.about-art:after{border-color:#5f9ba777}.about-symbol{color:#477d8b;text-shadow:0 0 35px #54cbe755}.orbit{border-color:#5f9ba777}.orbit-two{border-color:#5f9ba744}.art-caption{color:#6d858b}.about-lead{color:#465b64}.under-link{border-color:#739da766}.under-link b{color:#477d8b} .contents-menu{border-color:#34455030}.content-option{color:#344550;border-color:#34455025}.content-option:hover,.content-option.active{background:#eaf1f0}.content-option>span,.content-option i{color:#477d8b}.content-detail{background:#f0f0e9;border-color:#d4dcd8;color:#344550}.content-detail .eyebrow{color:#477d8b}.content-detail p:not(.eyebrow){color:#52666d}.detail-decoration{color:#d8e0dc}.content-detail .under-link{color:#344550} .faq-list details{border-color:#34455030}.faq-list summary{color:#344550}.faq-list summary>span,.faq-list summary i{color:#477d8b}.faq-list details>p{color:#52666d}.faq-list details[open]{background:#f0f0e9} .gallery-reference-section .gallery-subnote,.gallery-reference-section .gallery-reference-hint{color:#74858a}.gallery-heading-flourish span,.gallery-heading-flourish i{border-color:#89999d}.gallery-reference-heading h2{color:#344550}.gallery-kanji span{color:#344550;border-color:#7c8e94;background:#fbfaf6} .site-footer{position:relative;z-index:1;background:#07111e;color:#d9e7ed}.join-section{position:relative;z-index:1} .section,.site-footer,.join-section{isolation:isolate}.section>*{position:relative;z-index:1}.wave-ripples{z-index:0} .reveal{opacity:0;transform:translateY(28px);filter:blur(3px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease}.reveal.in-view{opacity:1;transform:translateY(0);filter:blur(0)} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none;filter:none}} @media(max-width:760px){.preloader-logo{max-height:130px}.wave-ripples span:nth-child(1){--size:180px}.wave-ripples span:nth-child(2){--size:260px}.wave-ripples span:nth-child(3){--size:210px}.wave-ripples i:nth-of-type(1){--size:210px}.wave-ripples i:nth-of-type(2){--size:160px}.wave-ripples{opacity:.3}.news-section,.gallery-section,.faq-section,.about-section,.contents-section{background-size:auto,auto,auto}} /* === Deep midnight + warm resonance rings (requested revision) === */ :root{--bg:#100e0d;--bg2:#17130f;--panel:#1c1915;--ink:#f5ead4;--muted:#b8aa91;--blue:#d6b779;--line:rgba(211,177,112,.24)} /* Keep all sections below the hero dark while preserving legible, restrained typography. */ .news-section,.gallery-section,.faq-section,.about-section,.contents-section{ background-color:#100f0e; background-image:radial-gradient(ellipse at 18% 18%,rgba(119,91,49,.13),transparent 42%),radial-gradient(ellipse at 82% 72%,rgba(104,78,44,.10),transparent 46%),repeating-linear-gradient(115deg,rgba(218,190,139,.018) 0 1px,transparent 1px 9px); color:#eee5d4; } .news-section .section-head h2,.gallery-section .section-head h2,.faq-section .section-head h2,.about-copy h2,.contents-section .section-head h2,.gallery-reference-heading h2{color:#ead8b3} .news-section .eyebrow,.gallery-section .eyebrow,.faq-section .eyebrow,.about-copy .eyebrow,.contents-section .eyebrow{color:#d7b777} .news-section .section-note,.gallery-section .section-note,.faq-section .section-note,.contents-section .section-note,.news-section .micro-note,.gallery-section .micro-note,.faq-section .micro-note{color:#b3a58c} .news-list{border-color:#d0b27642;scrollbar-color:#9d8050 #201a13} .news-item{border-color:#d0b2762d}.news-item:hover{background:#2b241a}.news-date{color:#b9a98c}.news-item p{color:#eee5d4}.news-tag{color:#e0c58b;border-color:#d0b27670}.news-arrow{color:#d7b777} .about-art{background:radial-gradient(circle,rgba(150,113,54,.22),transparent 56%),linear-gradient(140deg,#29231a,#11100e 72%);border-color:#d0b27666} .about-art:before,.about-art:after{border-color:#d0b27666}.about-symbol{color:#e0c58b;text-shadow:0 0 35px #d5b36c55}.orbit{border-color:#d0b27677}.orbit-two{border-color:#d0b27644}.art-caption{color:#c0ad88}.about-lead{color:#e1d7c5}.under-link{border-color:#d0b27677}.under-link b{color:#e0c58b} .contents-menu{border-color:#d0b2764d}.content-option{color:#eee5d4;border-color:#d0b27635}.content-option:hover,.content-option.active{background:#292319}.content-option>span,.content-option i{color:#e0c58b}.content-detail{background:#1d1913;border-color:#76613c;color:#eee5d4}.content-detail .eyebrow{color:#e0c58b}.content-detail p:not(.eyebrow){color:#d0c3ab}.detail-decoration{color:#675638}.content-detail .under-link{color:#eee5d4} .faq-list details{border-color:#d0b2764d}.faq-list summary{color:#eee5d4}.faq-list summary>span,.faq-list summary i{color:#e0c58b}.faq-list details>p{color:#d0c3ab}.faq-list details[open]{background:#211c15} .gallery-reference-section .gallery-subnote,.gallery-reference-section .gallery-reference-hint{color:#b3a58c}.gallery-heading-flourish span,.gallery-heading-flourish i{border-color:#9c855c}.gallery-kanji span{color:#eee5d4;border-color:#9c855c;background:#1a1712} .site-footer{background:#0b0a09;color:#e8ddc8;border-top:1px solid #d0b27640}.join-section{background:linear-gradient(135deg,#17130e,#0d0c0b);color:#eee5d4} .join-button{background:linear-gradient(135deg,#ead5a1,#b18a4c);border-color:#d7b777;color:#21180b}.join-button:hover{background:transparent;color:#ead5a1} /* Animated gold resonance rings extend over the full document from below the hero to the footer. */ .wave-ripples{position:absolute;top:100vh;bottom:0;height:auto;min-height:100%;opacity:.68;mix-blend-mode:screen;overflow:hidden;background:transparent} .wave-ripples span{border-color:rgba(216,181,112,.30);box-shadow:0 0 18px rgba(190,151,78,.045),inset 0 0 18px rgba(190,151,78,.025)} .wave-ripples i{border-color:rgba(222,190,132,.23);box-shadow:0 0 24px rgba(190,151,78,.035)} @keyframes rippleExpand{0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}18%{opacity:.55}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}} @media(max-width:760px){.wave-ripples{opacity:.38}.news-section,.gallery-section,.faq-section,.about-section,.contents-section{background-size:auto,auto,auto}} /* === Resonance blue theme inspired by the supplied Wuthering Waves character === */ :root{--bg:#06152b;--bg2:#082447;--panel:#0b2b4a;--ink:#f4fbff;--muted:#b6d4e8;--blue:#55cfff;--line:rgba(83,196,255,.26)} body{background:#06152b;color:#f4fbff} .site-header{background:linear-gradient(180deg,rgba(3,15,33,.96),rgba(5,22,44,.68),transparent);border-bottom-color:rgba(100,202,255,.16)} .main-nav a,.footer-links a{color:#e4f4ff}.main-nav a:hover,.footer-links a:hover{color:#70dcff} .lang-select{background:rgba(5,24,47,.92);color:#f4fbff;border-color:rgba(85,207,255,.58)} .lang-select option{background:#071a31;color:#f4fbff} .join-button{background:linear-gradient(135deg,#a8efff,#42b9ff 62%,#2477e7);border-color:#73ddff;color:#04162b;box-shadow:0 0 24px rgba(40,173,255,.16)} .join-button:hover{background:transparent;color:#a8efff} .hero-backdrop{background:radial-gradient(ellipse at 72% 38%,rgba(40,154,255,.42),transparent 31%),radial-gradient(ellipse at 80% 65%,rgba(36,108,226,.28),transparent 28%),radial-gradient(ellipse at 38% 72%,rgba(67,200,255,.13),transparent 35%),linear-gradient(110deg,#041127 6%,#072344 50%,#0a3970 100%)} .hero-backdrop:before{background:linear-gradient(90deg,rgba(3,15,34,.96) 0%,rgba(4,19,42,.82) 34%,rgba(4,25,53,.18) 100%),radial-gradient(circle at 78% 44%,transparent 0 12%,rgba(2,13,30,.25) 45%)} .hero-backdrop:after{border-color:rgba(94,213,255,.35);box-shadow:0 0 0 45px rgba(57,174,255,.07),0 0 0 100px rgba(57,174,255,.045),0 0 75px rgba(37,157,255,.10)} .hero-lines{background:repeating-linear-gradient(115deg,transparent 0 110px,rgba(115,224,255,.055) 111px 112px,transparent 113px 230px)} .hero h1 em{-webkit-text-stroke-color:#72ddff} .hero-jp,.hero-desc,.text-link{color:#f1f9ff}.hero-desc{color:#c3deef}.stat-label,.scroll-cue,.hero-side-note{color:#b5d8ed}.live-dot,.eyebrow,.hero-stats strong,.text-link span:last-child,.hero-side-note span,.scroll-cue span{color:#69dcff}.live-dot,.scroll-cue span{background:#69dcff;box-shadow:0 0 14px rgba(76,208,255,.55)} .news-section,.gallery-section,.faq-section,.about-section,.contents-section{background-color:#07172d;background-image:radial-gradient(ellipse at 16% 18%,rgba(27,110,190,.20),transparent 43%),radial-gradient(ellipse at 82% 70%,rgba(23,135,220,.15),transparent 46%),repeating-linear-gradient(115deg,rgba(137,225,255,.025) 0 1px,transparent 1px 9px);color:#f1f8ff} .news-section .section-head h2,.gallery-section .section-head h2,.faq-section .section-head h2,.about-copy h2,.contents-section .section-head h2,.gallery-reference-heading h2{color:#f2faff} .news-section .section-head h2 span,.gallery-section .section-head h2 span,.faq-section .section-head h2 span,.about-copy h2 span,.contents-section .section-head h2 span{color:#64d7ff} .news-section .eyebrow,.gallery-section .eyebrow,.faq-section .eyebrow,.about-copy .eyebrow,.contents-section .eyebrow{color:#71ddff} .news-section .section-note,.gallery-section .section-note,.faq-section .section-note,.contents-section .section-note,.news-section .micro-note,.gallery-section .micro-note,.faq-section .micro-note{color:#a9c8df} .news-list{border-color:rgba(93,200,255,.32);scrollbar-color:#398ec5 #0b213c}.news-item{border-color:rgba(93,200,255,.20)}.news-item:hover{background:rgba(36,115,180,.18)}.news-date{color:#b4d1e5}.news-item p{color:#edf7ff}.news-tag{color:#86e4ff;border-color:rgba(85,207,255,.55)}.news-arrow{color:#6bdcff} .about-section{background-image:radial-gradient(ellipse at 20% 45%,rgba(21,100,179,.22),transparent 46%),linear-gradient(120deg,#06162b,#092344)} .about-art{background:radial-gradient(circle,rgba(46,164,236,.27),transparent 56%),linear-gradient(140deg,#0b3154,#06162b 72%);border-color:rgba(85,207,255,.45)}.about-art:before,.about-art:after{border-color:rgba(104,218,255,.55)}.about-symbol{color:#9deaff;text-shadow:0 0 35px rgba(52,183,255,.58)}.orbit{border-color:rgba(104,218,255,.58)}.orbit-two{border-color:rgba(104,218,255,.28)}.art-caption{color:#a8d8ef}.about-lead{color:#e4f3ff}.under-link{border-color:rgba(85,207,255,.58)}.under-link b{color:#75ddff} .contents-menu{border-color:rgba(85,207,255,.30)}.content-option{color:#edf7ff;border-color:rgba(85,207,255,.23)}.content-option:hover,.content-option.active{background:rgba(40,133,201,.20)}.content-option>span,.content-option i{color:#79ddff}.content-detail{background:#0b2440;border-color:#24618c;color:#f1f8ff}.content-detail .eyebrow{color:#76ddff}.content-detail p:not(.eyebrow){color:#c5deef}.detail-decoration{color:#23527b}.content-detail .under-link{color:#f1f8ff} .faq-list details{border-color:rgba(85,207,255,.28)}.faq-list summary{color:#f1f8ff}.faq-list summary>span,.faq-list summary i{color:#78ddff}.faq-list details>p{color:#c5deef}.faq-list details[open]{background:rgba(27,94,147,.20)} .gallery-reference-section .gallery-subnote,.gallery-reference-section .gallery-reference-hint{color:#afcde1}.gallery-heading-flourish span,.gallery-heading-flourish i{border-color:#4e91b7}.gallery-kanji span{color:#eef9ff;border-color:#4e91b7;background:#0a2039} .gallery-card{background:#071a30;border-color:rgba(87,202,255,.42)}.gallery-placeholder{background:radial-gradient(ellipse at 65% 25%,rgba(34,158,225,.55),transparent 35%),linear-gradient(145deg,#12466d,#07172d 70%)}.tone-two{background:radial-gradient(ellipse at 25% 25%,rgba(47,144,210,.48),transparent 35%),linear-gradient(140deg,#0b3151,#101827)}.tone-three{background:radial-gradient(ellipse at 70% 40%,rgba(66,173,221,.42),transparent 35%),linear-gradient(140deg,#10364b,#07172d)}.gallery-placeholder:before{border-color:rgba(156,234,255,.32)} .site-footer{background:#041126;color:#eaf7ff;border-top:1px solid rgba(85,207,255,.26)}.join-section{background:radial-gradient(ellipse at 80% 20%,rgba(25,127,213,.22),transparent 40%),linear-gradient(135deg,#092447,#041126);color:#f1f8ff} .cursor-orb{border-color:rgba(91,216,255,.95)}.cursor-orb:after{background:#69dcff;box-shadow:0 0 20px #3dbfff}.cursor-orb.hover{background:rgba(74,190,255,.12)} /* Blue resonance ripples echo the character's luminous cyan hair and energy trails. */ .wave-ripples{opacity:.72;mix-blend-mode:screen} .wave-ripples span{border-color:rgba(64,177,255,.30);box-shadow:0 0 22px rgba(35,148,255,.10),inset 0 0 20px rgba(60,195,255,.07)} .wave-ripples i{border-color:rgba(105,224,255,.28);box-shadow:0 0 26px rgba(49,168,255,.08)} .preloader-caption{color:#9ceaff}.preloader-progress{background:rgba(103,213,255,.25)}.preloader-progress span{background:#74e1ff;box-shadow:0 0 15px #2ebfff} @media(max-width:760px){.wave-ripples{opacity:.34}} /* Supplied cyan energy-stream image: animated ambience visible while scrolling below the hero. */ .wave-ripples{ position:fixed !important; inset:0 !important; top:0 !important; bottom:0 !important; z-index:1 !important; pointer-events:none; overflow:hidden; opacity:1 !important; mix-blend-mode:screen !important; background:transparent !important; isolation:isolate; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 13%, rgba(0,0,0,.22) 22%, #000 36%, #000 82%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, transparent 13%, rgba(0,0,0,.22) 22%, #000 36%, #000 82%, transparent 100%); } .wave-ripples::before{ content:""; position:absolute; inset:-12%; background-image:linear-gradient(180deg,rgba(2,10,24,.25),rgba(2,10,24,.06) 42%,rgba(2,10,24,.38)),url("/assets/energy-flow.webp"); background-size:cover,cover; background-position:center, 0% 50%; background-repeat:no-repeat; opacity:.43; filter:saturate(1.12) brightness(.88); transform:scale(1.02); animation:energyFlowDrift 34s ease-in-out infinite alternate; } .wave-ripples span,.wave-ripples i{ z-index:1; border-color:rgba(58,190,255,.22) !important; box-shadow:0 0 22px rgba(20,150,255,.08),inset 0 0 18px rgba(50,190,255,.04) !important; } /* Keep all readable UI above the animated visual. */ .site-header,.hero,.section,.join-section,.site-footer,.back-to-top,.lightbox{position:relative;z-index:2} .site-preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;isolation:isolate} @keyframes energyFlowDrift{ 0%{background-position:center,0% 48%;transform:translate3d(-1.5%,0,0) scale(1.02)} 50%{background-position:center,55% 52%;transform:translate3d(1%,.5%,0) scale(1.06)} 100%{background-position:center,100% 47%;transform:translate3d(-.5%,-.5%,0) scale(1.03)} } @media(max-width:760px){ .wave-ripples::before{inset:-5%;background-position:center,48% 50%;opacity:.29;animation-duration:42s} .wave-ripples{opacity:.72 !important} } @media(prefers-reduced-motion:reduce){.wave-ripples::before{animation:none;background-position:center,50% 50%}} /* FIXED INTRO / LOGO SPLASH — keep above the page and preserve logo proportions */ .site-preloader{ position:fixed!important; inset:0!important; z-index:10000!important; display:grid!important; place-items:center!important; overflow:hidden; padding:clamp(20px,5vw,64px); background:#030914; opacity:1; visibility:visible; pointer-events:auto; isolation:isolate; transition:opacity .85s ease,visibility .85s ease; } .site-preloader::before{ content:""; position:absolute; inset:-15%; z-index:-2; background: radial-gradient(ellipse at 50% 48%,rgba(25,104,153,.32) 0%,rgba(7,30,54,.62) 35%,rgba(2,7,17,.98) 76%), linear-gradient(135deg,#020712 0%,#071a30 48%,#020610 100%); animation:introBackdrop 7s ease-in-out infinite alternate; } .site-preloader::after{ content:""; position:absolute; z-index:-1; width:min(78vw,820px); aspect-ratio:1; border:1px solid rgba(108,224,255,.14); border-radius:50%; box-shadow:0 0 0 34px rgba(83,198,255,.025),0 0 0 78px rgba(83,198,255,.018),inset 0 0 70px rgba(56,179,255,.045); animation:introRing 8s linear infinite; } .preloader-inner{ position:relative; z-index:1; width:min(88vw,780px); max-width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px,2.6vh,28px); text-align:center; animation:preloaderRise 1.15s cubic-bezier(.2,.75,.25,1) both; } .preloader-logo{ display:block; width:auto; height:auto; max-width:100%; max-height:clamp(100px,25vh,230px); object-fit:contain; object-position:center; aspect-ratio:auto; filter:drop-shadow(0 0 18px rgba(70,196,255,.22)) drop-shadow(0 0 44px rgba(37,132,255,.14)); animation:logoGlow 3s ease-in-out infinite alternate; } .preloader-caption{ display:block; max-width:100%; font:500 clamp(9px,1vw,11px) var(--display); letter-spacing:clamp(.16em,.38vw,.34em); line-height:1.7; color:#c4f5ff; text-align:center; text-wrap:balance; } .preloader-progress{ width:min(260px,62vw); height:2px; margin-top:2px; border-radius:99px; background:rgba(111,220,255,.18); overflow:hidden; box-shadow:0 0 18px rgba(57,181,255,.08); } .preloader-progress span{ display:block; height:100%; width:38%; border-radius:99px; background:linear-gradient(90deg,transparent,#9ff4ff 45%,#3dbdff 80%,transparent); box-shadow:0 0 14px rgba(83,218,255,.75); animation:preloaderLoad 1.45s ease-in-out infinite; } body.is-loaded .site-preloader{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } @keyframes introBackdrop{from{transform:scale(1);filter:hue-rotate(-5deg)}to{transform:scale(1.08);filter:hue-rotate(7deg)}} @keyframes introRing{from{transform:rotate(0deg) scale(.96)}to{transform:rotate(360deg) scale(1.04)}} @media(max-width:760px){ .site-preloader{padding:24px} .preloader-inner{width:min(90vw,560px);gap:18px} .preloader-logo{max-height:18vh;max-width:90vw} .site-preloader::after{width:88vw;box-shadow:0 0 0 20px rgba(83,198,255,.02),0 0 0 48px rgba(83,198,255,.015)} .preloader-caption{letter-spacing:.16em;font-size:9px} } @media(prefers-reduced-motion:reduce){ .site-preloader::before,.site-preloader::after,.preloader-inner,.preloader-logo,.preloader-progress span{animation:none!important} .site-preloader{transition:opacity .2s ease,visibility .2s ease} } /* MEDIA navigation dropdown */ .nav-dropdown{position:relative;display:flex;align-items:center}.nav-dropdown-toggle{display:flex;align-items:center;gap:7px;background:transparent;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;padding:10px 0}.nav-dropdown-toggle span{font-size:14px;transition:transform .2s}.nav-dropdown:focus-within .nav-dropdown-toggle span,.nav-dropdown:hover .nav-dropdown-toggle span{transform:rotate(180deg)}.nav-dropdown-menu{position:absolute;top:100%;left:-16px;min-width:150px;padding:8px;background:rgba(5,17,30,.97);border:1px solid var(--line);box-shadow:0 14px 32px #0005;display:none;z-index:30}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{display:grid}.nav-dropdown-menu a{padding:12px 14px!important;border-bottom:1px solid #ffffff12!important;white-space:nowrap}.nav-dropdown-menu a:last-child{border-bottom:0!important}.media-tabs{display:flex;justify-content:center;gap:0;margin:0 auto 28px;width:max-content;max-width:100%;border:1px solid #b9a16b;border-radius:999px;padding:4px;background:#080b10}.media-tab{min-width:150px;padding:12px 24px;border:0;border-radius:999px;background:transparent;color:#b8b3a7;font:600 13px var(--display);letter-spacing:.12em;cursor:pointer;transition:background .25s,color .25s}.media-tab.is-active{background:linear-gradient(120deg,#e9d9aa,#bca36a);color:#17140d}.movie-panel{max-width:1000px;margin:0 auto}.movie-feature{padding:10px;border:1px solid #b9a16b;background:linear-gradient(135deg,#11151c,#28251d);box-shadow:0 18px 50px #0004}.movie-screen{min-height:clamp(220px,42vw,500px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 65% 25%,#8b7744aa,transparent 35%),linear-gradient(135deg,#262c32,#080b10 75%);color:#f0e2bd}.movie-screen:before{content:"";position:absolute;inset:14px;border:1px solid #d8c28a55;pointer-events:none}.movie-play{display:grid;place-items:center;width:62px;height:62px;border:1px solid #e5d4a0;border-radius:50%;font-size:22px;padding-left:4px}.movie-screen b{font:600 clamp(24px,4vw,42px) var(--display);letter-spacing:.15em}.movie-screen small{font-size:11px;color:#c6b991}.movie-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.movie-card{display:flex;flex-direction:column;gap:9px;text-align:left;padding:10px;background:#0c121b;border:1px solid #c5ad7455;color:#e9e0cd;cursor:pointer;transition:border-color .2s,transform .2s}.movie-card:hover,.movie-card.is-active{border-color:#e5d09a;transform:translateY(-3px)}.movie-thumb{aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(ellipse at 70% 20%,#b9a06688,transparent 35%),linear-gradient(130deg,#35404a,#10141b)}.movie-thumb.tone-two{background:linear-gradient(130deg,#344c60,#11151b)}.movie-thumb.tone-three{background:linear-gradient(130deg,#594c39,#17171a)}.movie-thumb i{font-style:normal;border:1px solid #e6d5a5;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;padding-left:3px}.movie-card b{font:600 14px var(--display);letter-spacing:.12em}.movie-card small{font-size:10px;color:#a99d83}.movie-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.movie-screen.has-video{padding:0}.nav-dropdown-menu a:focus-visible,.nav-dropdown-toggle:focus-visible,.media-tab:focus-visible{outline:2px solid #e5d09a;outline-offset:3px}@media(max-width:760px){.nav-dropdown{display:block}.nav-dropdown-toggle{width:100%;justify-content:space-between;padding:14px 6px;border-bottom:1px solid #ffffff12}.nav-dropdown-menu{position:static;box-shadow:none;margin:0 0 8px 12px;border-top:0}.media-tab{min-width:0;padding:11px 22px}.movie-list{gap:8px}.movie-card{padding:6px}.movie-card b{font-size:11px}.movie-card small{font-size:9px}.movie-screen{min-height:230px}} /* MEDIA dropdown sizing/alignment fix */ .site-header{overflow:visible;min-width:0} .main-nav{min-width:0;flex-shrink:1;align-items:center} .main-nav>a,.nav-dropdown-toggle{font:600 12px var(--display)!important;line-height:1.2;letter-spacing:.12em;white-space:nowrap;text-transform:uppercase} .nav-dropdown{flex:0 0 auto;align-self:center} .nav-dropdown-toggle{min-height:0;padding:8px 0!important;gap:5px;justify-content:center;background:transparent;border:0;border-bottom:0!important;box-shadow:none} .nav-dropdown-toggle span{font-size:10px;line-height:1;display:inline-block} .nav-dropdown-menu{top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:132px;width:max-content;max-width:min(220px,calc(100vw - 24px));padding:5px;border-radius:2px;z-index:100} .nav-dropdown-menu a{display:block;font-size:11px!important;line-height:1.35;padding:10px 12px!important} @media(max-width:1000px) and (min-width:761px){.main-nav,.header-actions{gap:clamp(10px,1.5vw,16px)}.main-nav>a,.nav-dropdown-toggle{font-size:11px!important}} @media(max-width:760px){.main-nav{align-items:stretch}.nav-dropdown{width:100%}.nav-dropdown-toggle{width:100%;justify-content:space-between;padding:14px 6px!important;font-size:12px!important;border-bottom:1px solid #ffffff12!important}.nav-dropdown-menu{transform:none;left:auto;top:auto;width:auto;max-width:none;min-width:0;margin:0 0 8px 12px}} /* Reference-inspired MEDIA showcase: ornate frame and thumbnail carousel, preserving the site's cyan palette */ .media-nav-link{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap} .media-nav-link::after{content:"";display:inline-block;width:4px;height:4px;margin-left:7px;background:var(--blue);transform:rotate(45deg);opacity:.85} .gallery-reference-section{padding-top:clamp(70px,8vw,112px)} .gallery-reference-heading{position:relative;text-align:center;margin:0 auto 20px;max-width:900px} .gallery-reference-heading h2{font:700 clamp(38px,5vw,64px)/1 var(--display);letter-spacing:.16em;margin:0;text-shadow:0 0 28px rgba(62,185,255,.16)} .gallery-heading-flourish{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 14px;max-width:300px} .gallery-heading-flourish span{width:38%;height:1px;background:linear-gradient(90deg,transparent,var(--blue))} .gallery-heading-flourish span:last-child{transform:scaleX(-1)} .gallery-heading-flourish i{width:7px;height:7px;border:1px solid var(--blue);transform:rotate(45deg)} .gallery-kanji{display:none} .gallery-reference-section .gallery-subnote{text-align:center;margin:0 auto 25px;letter-spacing:.12em;font-size:12px} .media-tabs{margin-bottom:22px;box-shadow:0 8px 30px rgba(0,0,0,.18)} .gallery-showcase{max-width:900px;margin:0 auto;position:relative;padding:12px;background:linear-gradient(135deg,rgba(80,181,255,.18),rgba(4,16,36,.8) 28%,rgba(4,16,36,.8) 72%,rgba(80,181,255,.18));border:1px solid rgba(116,213,255,.66);box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 0 0 3px rgba(3,18,38,.9)} .gallery-showcase:before,.gallery-showcase:after{content:"✦";position:absolute;z-index:3;color:#b9edff;font-size:27px;text-shadow:0 0 12px #41baff;line-height:1} .gallery-showcase:before{top:-13px;left:-8px}.gallery-showcase:after{bottom:-13px;right:-8px} .gallery-feature{width:100%;display:block;position:relative;padding:0;border:1px solid rgba(142,222,255,.42);background:#06152b;cursor:pointer;overflow:hidden} .gallery-feature:before{content:"";position:absolute;inset:10px;border:1px solid rgba(169,232,255,.32);z-index:2;pointer-events:none} .gallery-feature:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,10,25,.12),transparent 24%,transparent 76%,rgba(2,10,25,.12)),linear-gradient(0deg,rgba(2,10,25,.38),transparent 35%)} .gallery-feature-art{min-height:clamp(260px,38vw,440px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;padding:clamp(25px,4vw,52px);position:relative;overflow:hidden;background:radial-gradient(ellipse at 72% 24%,rgba(61,185,255,.38),transparent 34%),radial-gradient(ellipse at 35% 65%,rgba(29,100,191,.25),transparent 45%),linear-gradient(120deg,#102e50,#07152b 68%,#0a3a66);transition:filter .35s} .gallery-feature-art:before{content:"";position:absolute;width:44%;aspect-ratio:1;right:10%;top:8%;border:1px solid rgba(122,218,255,.34);border-radius:50%;box-shadow:0 0 0 22px rgba(100,201,255,.04),0 0 0 54px rgba(100,201,255,.035),inset 0 0 40px rgba(74,182,255,.08)} .gallery-feature-art:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 70px,rgba(160,228,255,.045) 71px 72px,transparent 73px 140px)} .gallery-feature-art .feature-kicker,.gallery-feature-art b,.gallery-feature-art small{position:relative;z-index:1} .gallery-feature-art .feature-kicker{font:600 10px var(--display);letter-spacing:.22em;color:#8ee4ff} .gallery-feature-art b{font:700 clamp(25px,4vw,45px) var(--display);letter-spacing:.14em;color:#f2fbff;margin:10px 0;text-shadow:0 3px 22px #0008} .gallery-feature-art small{font-size:11px;color:#badff3;letter-spacing:.08em} .feature-open{position:absolute;right:28px;bottom:25px;z-index:4;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(152,225,255,.7);border-radius:50%;color:#dff8ff;background:rgba(3,18,39,.65)} .feature-tone-2{background:radial-gradient(ellipse at 72% 24%,rgba(44,158,255,.38),transparent 34%),linear-gradient(120deg,#12395e,#07152b 68%,#0c3764)} .feature-tone-3{background:radial-gradient(ellipse at 72% 24%,rgba(52,201,255,.34),transparent 34%),linear-gradient(120deg,#0b3551,#07152b 68%,#103f68)} .feature-tone-4{background:radial-gradient(ellipse at 72% 24%,rgba(65,135,255,.34),transparent 34%),linear-gradient(120deg,#192e56,#07152b 68%,#164879)} .gallery-filmstrip-wrap{max-width:980px;margin:20px auto 0;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:14px} .gallery-filmstrip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:5px 2px 12px} .gallery-filmstrip::-webkit-scrollbar{display:none} .gallery-thumb{position:relative;flex:0 0 clamp(150px,22vw,245px);aspect-ratio:16/6;border-radius:999px;overflow:hidden;border:1px solid rgba(123,217,255,.65);background:radial-gradient(ellipse at 65% 25%,rgba(42,174,255,.48),transparent 35%),linear-gradient(140deg,#15456d,#08172b);scroll-snap-align:center;cursor:pointer;box-shadow:0 5px 18px #0005;transition:transform .25s,border-color .25s,filter .25s} .gallery-thumb:before{content:"";position:absolute;inset:5px;border:1px solid rgba(183,235,255,.35);border-radius:inherit} .gallery-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,15,32,.12),rgba(4,15,32,.65))} .gallery-thumb span{position:absolute;z-index:2;left:18px;bottom:12px;font:600 11px var(--display);letter-spacing:.2em;color:#eafaff} .gallery-thumb.is-active{transform:translateY(-3px);border-color:#d5f6ff;box-shadow:0 0 0 2px rgba(76,194,255,.2),0 8px 25px #0006;filter:brightness(1.18)} .gallery-rail-arrow{width:44px;height:44px;border:1px solid rgba(118,215,255,.65);border-radius:50%;background:rgba(4,18,38,.9);color:#dff8ff;font-size:30px;line-height:1;cursor:pointer;transition:background .2s,transform .2s} .gallery-rail-arrow:hover{background:#0c4c7a;transform:scale(1.05)} .gallery-reference-hint{text-align:center} #movie .movie-feature{border-color:rgba(116,213,255,.66);background:linear-gradient(135deg,rgba(80,181,255,.18),rgba(4,16,36,.8));} #movie .movie-screen{background:radial-gradient(ellipse at 65% 25%,rgba(61,185,255,.3),transparent 35%),linear-gradient(135deg,#102e50,#06152b 75%);color:#f0faff} #movie .movie-play{border-color:#8de8ff} #movie .movie-card{border-color:rgba(116,213,255,.3);background:#081c34;color:#e9f7ff} #movie .movie-card:hover,#movie .movie-card.is-active{border-color:#8de8ff} #movie .movie-thumb{background:radial-gradient(ellipse at 70% 20%,rgba(70,180,255,.35),transparent 35%),linear-gradient(130deg,#234d75,#101a2a)} /* CONTENTS: collectible squad-style cards; preserve the existing selected-detail interaction */ .contents-layout{display:flex;flex-direction:column;gap:24px} .contents-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0} .content-option{position:relative;min-height:128px;padding:18px 18px 16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:16px;overflow:hidden;text-align:left;border:1px solid rgba(85,207,255,.32);background:linear-gradient(145deg,rgba(15,54,91,.94),rgba(4,18,39,.98));transition:transform .25s,border-color .25s,background .25s;isolation:isolate} .content-option:before{content:"";position:absolute;inset:7px;border:1px solid rgba(115,215,255,.14);pointer-events:none;z-index:-1} .content-option:after{content:"";position:absolute;width:90px;height:90px;right:-24px;top:-30px;border:1px solid rgba(105,211,255,.19);border-radius:50%;box-shadow:0 0 0 12px rgba(105,211,255,.035),0 0 0 26px rgba(105,211,255,.025);z-index:-1} .content-option:hover,.content-option.active{background:linear-gradient(145deg,rgba(23,92,143,.95),rgba(5,24,50,.98));border-color:#81e1ff;transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.2)} .content-option>span{font:600 10px var(--display);letter-spacing:.2em;color:#83e2ff} .content-option b{font-size:clamp(12px,1.1vw,15px);font-weight:600;line-height:1.6;letter-spacing:.04em} .content-option i{position:absolute;right:18px;bottom:15px;font-style:normal;font-size:18px;color:#81e1ff} .content-detail{position:relative;min-height:220px;overflow:hidden;padding:clamp(25px,4vw,48px);border:1px solid rgba(85,207,255,.5);background:radial-gradient(ellipse at 85% 20%,rgba(28,126,202,.25),transparent 38%),linear-gradient(120deg,#0b2a4c,#06162c 72%);box-shadow:0 20px 45px rgba(0,0,0,.2)} .content-detail:before{content:"";position:absolute;inset:10px;border:1px solid rgba(133,224,255,.2);pointer-events:none} .content-detail h3{font:700 clamp(26px,4vw,42px) var(--display);letter-spacing:.06em;position:relative;z-index:1} .content-detail p:not(.eyebrow){max-width:680px;line-height:2;color:#c8e5f6;position:relative;z-index:1} .detail-decoration{font:700 clamp(90px,16vw,170px) var(--display);color:rgba(74,163,222,.12);right:4%;bottom:-18%;position:absolute} .content-detail .under-link{position:relative;z-index:1} @media(max-width:900px){.contents-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-filmstrip-wrap{grid-template-columns:38px minmax(0,1fr) 38px;gap:8px}.gallery-rail-arrow{width:36px;height:36px;font-size:25px}} @media(max-width:600px){.gallery-showcase{padding:7px}.gallery-feature-art{min-height:245px;padding:25px}.gallery-filmstrip-wrap{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}.gallery-rail-arrow{width:29px;height:29px;font-size:21px}.gallery-filmstrip{gap:8px}.gallery-thumb{flex-basis:145px}.contents-menu{grid-template-columns:1fr 1fr;gap:8px}.content-option{min-height:112px;padding:14px 12px}.content-option i{right:10px;bottom:10px}.content-option b{font-size:12px}.gallery-reference-heading h2{letter-spacing:.1em}} /* MOVIE uses the same showcase and thumbnail rail language as GALLERY */ .gallery-filmstrip{background:transparent!important;border:0!important;box-shadow:none!important;padding:5px 2px 12px!important;scrollbar-color:rgba(80,160,205,.5) transparent!important} #movie.movie-panel{width:min(78vw,1000px);margin:0 auto} #movie .movie-feature{padding:0;border:1px solid rgba(116,213,255,.66);background:linear-gradient(135deg,rgba(80,181,255,.12),rgba(4,16,36,.8));box-shadow:0 12px 35px rgba(15,48,69,.15);overflow:hidden} #movie .movie-screen{min-height:0;aspect-ratio:16/9;display:flex;gap:14px;align-items:flex-start;justify-content:flex-end;padding:clamp(20px,4vw,52px);text-align:left;background:radial-gradient(ellipse at 72% 24%,rgba(61,185,255,.3),transparent 35%),linear-gradient(120deg,#12395e,#07152b 68%,#0c3764);color:#f0faff} #movie .movie-screen:before{inset:12px;border:1px solid rgba(141,232,255,.32)} #movie .movie-screen .movie-play{align-self:flex-end;margin-top:auto;order:3} #movie .movie-screen b{font:700 clamp(25px,4vw,45px) var(--display);letter-spacing:.14em;color:#f2fbff;margin:0;text-shadow:0 3px 22px #0008} #movie .movie-screen small{font-size:11px;color:#badff3;letter-spacing:.08em} #movie .movie-list{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:20px 0 0;padding:5px 2px 12px} #movie .movie-list::-webkit-scrollbar{display:none} #movie .movie-card{position:relative;flex:0 0 clamp(150px,22vw,245px);min-width:0;aspect-ratio:16/6;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;overflow:hidden;padding:15px 18px;border:1px solid rgba(123,217,255,.45);border-radius:999px;background:radial-gradient(ellipse at 65% 25%,rgba(42,174,255,.32),transparent 35%),linear-gradient(140deg,#15456d,#08172b);color:#eafaff;text-align:left;scroll-snap-align:center;box-shadow:0 5px 18px #0002;transition:transform .25s,border-color .25s,filter .25s} #movie .movie-card:before{content:"";position:absolute;inset:5px;border:1px solid rgba(183,235,255,.25);border-radius:inherit;pointer-events:none} #movie .movie-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(4,15,32,.08),rgba(4,15,32,.72));pointer-events:none} #movie .movie-thumb{position:absolute;inset:0;aspect-ratio:auto;display:grid;place-items:center;background:radial-gradient(ellipse at 70% 20%,rgba(70,180,255,.35),transparent 35%),linear-gradient(130deg,#234d75,#101a2a)} #movie .movie-thumb i{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:1;border-color:#8de8ff;color:#dff8ff} #movie .movie-card b,#movie .movie-card small{position:relative;z-index:2;max-width:78%;background:transparent;color:#eafaff} #movie .movie-card b{font:600 12px var(--display);letter-spacing:.2em} #movie .movie-card small{font-size:9px;color:#badff3} #movie .movie-card:hover,#movie .movie-card.is-active{border-color:#d5f6ff;transform:translateY(-3px);filter:brightness(1.15);box-shadow:0 0 0 2px rgba(76,194,255,.2),0 8px 25px #0003} #movie .movie-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0} #movie .movie-screen.has-video{padding:0;aspect-ratio:16/9} #movie .gallery-reference-hint{color:#7e8b8e} @media(max-width:760px){#movie.movie-panel{width:calc(100% - 32px)}#movie .movie-screen{aspect-ratio:4/3;padding:18px}#movie .movie-screen b{font-size:25px}#movie .movie-screen small{font-size:10px}#movie .movie-list{gap:8px;margin-top:12px}#movie .movie-card{flex-basis:145px;aspect-ratio:16/7;padding:12px}#movie .movie-card b{font-size:11px}#movie .movie-card small{font-size:9px}} /* Gallery thumbnail rail: reliable horizontal scroll + arrow controls */ .gallery-filmstrip-wrap{min-width:0} .gallery-filmstrip{justify-content:flex-start!important;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-behavior:smooth;touch-action:pan-x;cursor:grab} .gallery-filmstrip.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none} .gallery-filmstrip.is-dragging .gallery-thumb{pointer-events:none} .gallery-thumb{flex-shrink:0} .gallery-rail-arrow{position:relative;z-index:3;display:grid;place-items:center;flex-shrink:0} .gallery-rail-arrow:focus-visible{outline:2px solid #dff8ff;outline-offset:3px} /* MOVIE thumbnails fully share GALLERY rail styling and controls */ #movie .movie-filmstrip-wrap{max-width:980px;margin:20px auto 0;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:14px} #movie .movie-list{margin:0;min-width:0;min-height:0;border:0;background:transparent;box-shadow:none} #movie .movie-card{padding:0;border-radius:999px;flex:0 0 clamp(150px,22vw,245px);aspect-ratio:16/6;background:radial-gradient(ellipse at 65% 25%,rgba(42,174,255,.48),transparent 35%),linear-gradient(140deg,#15456d,#08172b)} #movie .movie-card:after{background:linear-gradient(90deg,rgba(4,15,32,.12),rgba(4,15,32,.65))} #movie .movie-card b{position:absolute;left:18px;bottom:12px;max-width:75%;font:600 11px var(--display);letter-spacing:.2em} #movie .movie-card small{position:absolute;left:18px;bottom:28px;max-width:75%;font-size:9px} #movie .movie-card .movie-thumb{background:transparent} #movie .movie-card .movie-thumb i{right:18px;top:50%;transform:translateY(-50%)} @media(max-width:900px){#movie .movie-filmstrip-wrap{grid-template-columns:38px minmax(0,1fr) 38px;gap:8px}} @media(max-width:600px){#movie .movie-filmstrip-wrap{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}#movie .movie-card{flex-basis:145px;aspect-ratio:16/6}} /* Fix: hide the GALLERY thumbnail rail while MOVIE mode is active. */ .gallery-filmstrip-wrap[hidden], .gallery-showcase[hidden], .gallery-filmstrip[hidden], .gallery-reference-hint[hidden], .movie-panel[hidden] { display: none !important; } /* MOVIE: keep the bottom thumbnail strip scrollable and its arrow controls usable. */ #movie .movie-filmstrip-wrap { width: 100%; } #movie .movie-list { width: min(100%, 720px); justify-self: center; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; cursor: grab; } #movie .movie-list.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } #movie .movie-card { flex: 0 0 clamp(150px, 22vw, 245px); } @media (max-width: 760px) { #movie .movie-list { width: 100%; } } /* CONTENTS: 3D horizontal collectible-card rail (scoped to CONTENTS only) */ .contents-section .contents-rail-wrap{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:12px;position:relative;padding:24px 0 16px;perspective:1400px} .contents-section .contents-menu{display:flex;align-items:center;gap:16px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:28px max(4%,24px) 35px;transform-style:preserve-3d;overscroll-behavior-x:contain;cursor:grab} .contents-section .contents-menu::-webkit-scrollbar{display:none}.contents-section .contents-menu.is-dragging{cursor:grabbing;scroll-snap-type:none} .contents-section .content-option{flex:0 0 clamp(150px,15vw,205px);height:300px;min-height:300px;padding:18px 14px 20px;scroll-snap-align:center;align-items:center;justify-content:flex-end;gap:12px;text-align:center;border:1px solid rgba(130,210,255,.6);border-radius:7px;background:radial-gradient(ellipse at 50% 28%,rgba(70,160,255,.42),transparent 50%),linear-gradient(155deg,rgba(37,82,132,.96),rgba(3,15,36,.98) 75%);box-shadow:0 18px 24px rgba(0,0,0,.45),inset 0 0 28px rgba(85,175,255,.14);transform:rotateY(-7deg) translateZ(-10px) scale(.91);opacity:.82;transition:transform .35s,opacity .35s,box-shadow .35s,border-color .35s;scroll-snap-stop:always} .contents-section .content-option:nth-child(even){transform:rotateY(7deg) translateZ(-10px) scale(.91)} .contents-section .content-option:before{inset:8px;border:1px solid rgba(173,225,255,.24);border-radius:4px;z-index:0} .contents-section .content-option:after{content:"";inset:0;width:auto;height:auto;right:auto;top:auto;border:0;border-radius:0;box-shadow:none;z-index:0;background:linear-gradient(180deg,rgba(3,12,28,.02) 5%,rgba(3,12,28,.2) 35%,rgba(2,12,28,.95) 100%),repeating-linear-gradient(130deg,transparent 0 27px,rgba(130,215,255,.07) 28px 29px,transparent 30px 55px);pointer-events:none} .contents-section .content-option>span{position:absolute;top:18px;left:16px;align-self:auto;font-size:11px;z-index:2} .contents-section .content-option b{position:relative;z-index:2;font-size:clamp(12px,1vw,15px);line-height:1.5;min-height:2.8em;display:flex;align-items:center;justify-content:center;text-shadow:0 2px 12px #000} .contents-section .content-option i{position:relative;z-index:2;right:auto;bottom:auto;width:48px;height:48px;border:1px solid rgba(150,220,255,.85);border-radius:50%;display:grid;place-items:center;font-size:25px;font-style:normal;color:#e2f8ff;background:rgba(5,25,52,.6);box-shadow:0 0 18px rgba(79,175,255,.25)} .contents-section .content-option small{position:relative;z-index:2;font:600 7px var(--display);letter-spacing:.23em;color:#a6dfff;white-space:nowrap} .contents-section .content-option:hover,.contents-section .content-option.active{opacity:1;transform:translateY(-9px) rotateY(0) translateZ(28px) scale(1.04);border-color:#a9efff;box-shadow:0 0 0 1px #6acfff8c,0 0 34px rgba(53,157,255,.42),0 28px 35px #0009,inset 0 0 30px rgba(100,190,255,.25)} .contents-section .content-option.active:before{border-color:rgba(190,240,255,.65)} .contents-section .content-option:nth-child(1){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#4a8db7,transparent 58%),linear-gradient(145deg,#254d78,#06172d)} .contents-section .content-option:nth-child(2){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#6c80bd,transparent 58%),linear-gradient(145deg,#283f70,#06172d)} .contents-section .content-option:nth-child(3){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#6d9fd2,transparent 58%),linear-gradient(145deg,#315c86,#06172d)} .contents-section .content-option:nth-child(4){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#3779c1,transparent 58%),linear-gradient(145deg,#244f83,#06172d)} .contents-section .content-option:nth-child(5){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#6b91bc,transparent 58%),linear-gradient(145deg,#355b83,#06172d)} .contents-section .content-option:nth-child(6){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#7297d4,transparent 58%),linear-gradient(145deg,#31466f,#06172d)} .contents-section .content-option:nth-child(7){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#6f8dbd,transparent 58%),linear-gradient(145deg,#3e4d79,#06172d)} .contents-section .content-option:nth-child(8){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#5592b5,transparent 58%),linear-gradient(145deg,#244e69,#06172d)} .contents-section .content-option:nth-child(9){background-image:linear-gradient(180deg,transparent 30%,rgba(3,12,28,.95)),radial-gradient(ellipse at 50% 25%,#465d7b,transparent 58%),linear-gradient(145deg,#26354a,#06111f)} .contents-rail-arrow{width:42px;height:42px;border:1px solid rgba(125,215,255,.7);border-radius:50%;background:rgba(3,18,39,.9);color:#dff7ff;font-size:30px;line-height:1;cursor:pointer;transition:transform .2s,background .2s;z-index:3}.contents-rail-arrow:hover{background:#104b78;transform:scale(1.08)} .contents-rail-pagination{display:flex;justify-content:center;gap:7px;margin:0 auto 24px}.contents-rail-pagination span{width:25px;height:2px;background:rgba(135,190,220,.4)}.contents-rail-pagination span.is-active{background:#9beaff;box-shadow:0 0 8px #7cdfff} @media(max-width:760px){.contents-section .contents-rail-wrap{grid-template-columns:32px minmax(0,1fr) 32px;gap:5px;padding:8px 0}.contents-section .contents-menu{gap:12px;padding:25px 8px 30px}.contents-section .content-option{flex-basis:clamp(155px,58vw,220px);height:270px;min-height:270px;transform:rotateY(-4deg) scale(.94)}.contents-section .content-option:nth-child(even){transform:rotateY(4deg) scale(.94)}.contents-section .content-option:hover,.contents-section .content-option.active{transform:translateY(-5px) rotateY(0) scale(1.01)}.contents-rail-arrow{width:30px;height:30px;font-size:23px}.contents-rail-pagination span{width:15px}} /* CONTENTS refinement: immersive 3D gallery space, isolated to this section. */ .contents-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,rgba(20,83,145,.30),transparent 48%),linear-gradient(180deg,#071525 0%,#06101f 70%,#040b16 100%)} .contents-section:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 38%,rgba(104,190,255,.16),transparent 2px),repeating-linear-gradient(115deg,transparent 0 95px,rgba(107,190,255,.045) 96px 97px,transparent 98px 190px);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)} .contents-section .contents-layout{display:block;position:relative} .contents-section .contents-rail-wrap{min-height:450px;perspective:1150px;perspective-origin:50% 48%;padding:34px 0 10px;isolation:isolate} .contents-section .contents-rail-wrap:before{content:"";position:absolute;left:5%;right:5%;bottom:18px;height:130px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(64,158,255,.36),rgba(30,96,177,.12) 35%,transparent 72%);filter:blur(12px)} .contents-section .contents-rail-wrap:after{content:"";position:absolute;left:-8%;right:-8%;bottom:-42px;height:190px;z-index:-2;pointer-events:none;transform:rotateX(66deg);transform-origin:top center;background:repeating-linear-gradient(90deg,transparent 0 72px,rgba(107,190,255,.14) 73px 74px,transparent 75px 145px),repeating-linear-gradient(0deg,rgba(91,177,255,.13) 0 1px,transparent 1px 38px),linear-gradient(180deg,rgba(24,93,163,.22),transparent 75%);border-top:1px solid rgba(120,207,255,.55);box-shadow:0 -8px 28px rgba(36,137,255,.14)} .contents-section .contents-menu{gap:clamp(10px,1.2vw,18px);padding:42px max(5%,32px) 56px;align-items:center;transform-style:preserve-3d;scroll-padding-inline:32%;mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%)} .contents-section .content-option{position:relative;flex-basis:clamp(150px,14.3vw,198px);height:292px;min-height:292px;border-radius:5px;overflow:hidden;transform-style:preserve-3d;transform:rotateY(19deg) translateZ(-24px) translateY(14px) scale(.88);opacity:.76;box-shadow:0 2px 0 rgba(191,234,255,.5) inset,0 18px 20px rgba(0,0,0,.58),8px 0 0 rgba(82,169,255,.10),inset 0 0 24px rgba(94,175,255,.18);-webkit-box-reflect:below 5px linear-gradient(transparent 52%,rgba(68,151,255,.16));transition:transform .48s cubic-bezier(.2,.75,.2,1),opacity .35s,box-shadow .4s,border-color .4s} .contents-section .content-option:nth-child(even){transform:rotateY(-19deg) translateZ(-24px) translateY(18px) scale(.88)} .contents-section .content-option:nth-child(1),.contents-section .content-option:nth-child(9){transform:rotateY(25deg) translateZ(-45px) translateY(26px) scale(.82)} .contents-section .content-option:nth-child(2),.contents-section .content-option:nth-child(8){transform:rotateY(18deg) translateZ(-20px) translateY(14px) scale(.9)} .contents-section .content-option:nth-child(3),.contents-section .content-option:nth-child(7){transform:rotateY(10deg) translateZ(0) translateY(5px) scale(.96)} .contents-section .content-option:hover,.contents-section .content-option.active{transform:rotateY(0deg) translateZ(55px) translateY(-12px) scale(1.08);opacity:1;z-index:4;border-color:#b8f2ff;box-shadow:0 0 0 1px rgba(113,203,255,.8),0 0 24px rgba(61,164,255,.65),0 34px 38px rgba(0,0,0,.72),inset 0 0 34px rgba(106,193,255,.3)} .contents-section .content-option:before{border-color:rgba(181,231,255,.35);box-shadow:inset 0 0 20px rgba(112,198,255,.1)} .contents-section .content-option:after{background:linear-gradient(180deg,rgba(9,25,48,.02) 0%,rgba(4,14,31,.05) 28%,rgba(2,10,24,.92) 100%),linear-gradient(135deg,rgba(133,216,255,.17),transparent 32%,rgba(100,170,255,.1) 60%,transparent 72%);} .contents-section .content-option.active:after{background:linear-gradient(180deg,rgba(9,25,48,.02) 0%,rgba(4,14,31,.02) 28%,rgba(2,10,24,.87) 100%),linear-gradient(135deg,rgba(133,216,255,.24),transparent 32%,rgba(100,170,255,.16) 60%,transparent 72%)} .contents-section .contents-rail-pagination{position:relative;z-index:2;margin:4px auto 28px;gap:8px}.contents-section .contents-rail-pagination span{width:22px;height:2px;transition:width .25s,background .25s,box-shadow .25s}.contents-section .contents-rail-pagination span.is-active{width:38px} .contents-section .content-detail{max-width:900px;margin:0 auto;background:linear-gradient(120deg,rgba(8,28,48,.92),rgba(5,17,31,.85));border-color:rgba(118,203,255,.24);box-shadow:0 18px 50px rgba(0,0,0,.22)} @media(max-width:760px){.contents-section .contents-rail-wrap{min-height:360px;perspective:900px;padding:20px 0 6px}.contents-section .contents-rail-wrap:after{bottom:-22px;height:120px}.contents-section .contents-menu{padding:28px 22px 48px;gap:12px;scroll-padding-inline:22px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.contents-section .content-option{flex-basis:clamp(155px,58vw,220px);height:260px;min-height:260px;transform:rotateY(10deg) translateZ(-10px) scale(.91);-webkit-box-reflect:below 4px linear-gradient(transparent 55%,rgba(68,151,255,.12))}.contents-section .content-option:nth-child(even){transform:rotateY(-10deg) translateZ(-10px) scale(.91)}.contents-section .content-option:nth-child(1),.contents-section .content-option:nth-child(9){transform:rotateY(12deg) translateZ(-18px) scale(.88)}.contents-section .content-option:nth-child(3),.contents-section .content-option:nth-child(7){transform:rotateY(6deg) scale(.96)}.contents-section .content-option:hover,.contents-section .content-option.active{transform:rotateY(0) translateZ(20px) translateY(-6px) scale(1.02)}.contents-section .content-detail{margin-top:8px}} @media(prefers-reduced-motion:reduce){.contents-section .content-option{transition:none}} /* CONTENTS orbit carousel: cards travel around an invisible cylinder. */ .contents-section .contents-rail-wrap{display:flex;align-items:center;justify-content:space-between;position:relative;min-height:510px;perspective:1500px;perspective-origin:50% 45%;overflow:hidden;} .contents-section .contents-menu{position:absolute;inset:0;display:block;overflow:hidden;scrollbar-width:none;touch-action:pan-y;transform-style:preserve-3d;perspective:1500px;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);} .contents-section .contents-menu::-webkit-scrollbar{display:none} .contents-section .content-option{position:absolute!important;left:50%;top:47%;flex:none!important;transform-style:preserve-3d;transform-origin:center center;transition:transform .52s cubic-bezier(.2,.75,.2,1),opacity .35s,filter .35s,box-shadow .35s;will-change:transform;backface-visibility:hidden;} .contents-section .content-option.active{box-shadow:0 0 0 1px rgba(113,203,255,.8),0 0 28px rgba(61,164,255,.55),0 30px 42px rgba(0,0,0,.7),inset 0 0 34px rgba(106,193,255,.3)} .contents-section .contents-rail-arrow{position:relative;flex:0 0 42px;z-index:20} .contents-section .contents-rail-wrap:after{pointer-events:none;} .contents-section .contents-menu.is-dragging{cursor:grabbing} @media(max-width:760px){.contents-section .contents-rail-wrap{min-height:390px;perspective:1000px}.contents-section .contents-menu{inset:0 4px}.contents-section .content-option{top:45%;}.contents-section .contents-rail-arrow{flex-basis:30px;}} /* Footer alignment and back-to-top placement */ .site-footer { display: flex; flex-direction: column; align-items: center; text-align: center; } .site-footer .footer-brand { margin-inline: auto; justify-content: center; } .site-footer > p { text-align: center; max-width: 720px; margin: 22px auto; } .site-footer .footer-links { justify-content: center; width: 100%; } .site-footer .footer-bottom { width: 100%; justify-content: center; align-items: center; text-align: center; } .site-footer .footer-bottom > * { margin-inline: 8px; } #backToTop.back-to-top { position: fixed; right: 24px; left: auto; bottom: 24px; } @media (max-width: 640px) { .site-footer { padding-inline: 20px; } .site-footer .footer-links { gap: 14px 18px; } .site-footer .footer-bottom { flex-direction: column; gap: 12px; } #backToTop.back-to-top { right: 16px; bottom: 16px; } } /* TOP content fades in after the intro logo screen clears */ @keyframes heroContentFadeIn { 0% { opacity: 0; transform: translateY(24px); filter: blur(5px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } body.is-loaded .hero-content.reveal { animation: heroContentFadeIn 1.15s cubic-bezier(.2,.7,.2,1) .28s both; } body.is-loaded .hero-side-note, body.is-loaded .scroll-cue { animation: heroContentFadeIn .9s ease .65s both; } @media (prefers-reduced-motion: reduce) { body.is-loaded .hero-content.reveal, body.is-loaded .hero-side-note, body.is-loaded .scroll-cue { animation: none !important; } }