:root { --ink:#11130f; --paper:#f1f1ea; --acid:#c9ff45; --line:rgba(255,255,255,.35); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; }
body { margin:0; overflow:hidden; background:var(--ink); color:#fff; font-family:Inter,"Microsoft YaHei",sans-serif; letter-spacing:0; }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; z-index:30; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.site-header { position:fixed; z-index:20; top:0; left:0; width:100%; height:88px; padding:0 clamp(22px,4vw,64px); display:flex; align-items:center; justify-content:space-between; color:#fff; }
.brand { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:700; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.studio-logo { display:block; width:auto; height:44px; max-width:min(230px,38vw); object-fit:contain; }
.studio-logo[hidden] { display:none; }
.brand-mark { display:grid; place-items:center; width:43px; height:32px; background:var(--acid); color:var(--ink); text-shadow:none; font-size:12px; }
.site-header nav { display:flex; align-items:center; gap:28px; font-size:10px; }
.site-header nav > a { padding:7px 0; border-bottom:1px solid transparent; text-shadow:0 1px 12px rgba(0,0,0,.65); }
.site-header nav > a:hover { border-color:#fff; }
.site-header { transition:height .3s,background .3s,color .3s,border-color .3s; }
.site-header.scrolled { height:66px; background:rgba(238,238,232,.94); color:var(--ink); border-bottom:1px solid rgba(17,19,15,.12); backdrop-filter:blur(10px); }
.site-header.scrolled .brand,.site-header.scrolled nav > a { text-shadow:none; }.site-header.scrolled .availability { color:rgba(17,19,15,.62); }.site-header.scrolled nav > a:hover { border-color:var(--ink); }
.availability { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.72); }
.availability > i { width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(201,255,69,.14); }
.portal-page,.portal-stage { position:relative; display:block; width:100%; height:100%; }
.portal-stage { overflow:hidden; isolation:isolate; cursor:default; }
.portal-stage.is-near-door { cursor:pointer; }
.portal-stage > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.01); transition:transform 1.1s cubic-bezier(.2,.7,.15,1),filter .8s; }
.rain-canvas { position:absolute; z-index:2; inset:0; width:100%; height:100%; opacity:.82; pointer-events:none; transition:opacity 1.35s ease,filter 1.35s ease; filter:blur(0); }
.shade { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(7,12,10,.72) 0%,rgba(7,12,10,.25) 42%,rgba(7,12,10,.05) 70%),linear-gradient(0deg,rgba(5,8,7,.56) 0%,transparent 42%,rgba(6,9,8,.18) 100%); transition:opacity .75s; }
.hero-copy { position:absolute; z-index:4; left:clamp(24px,7vw,112px); top:50%; width:min(760px,55vw); display:flex; flex-direction:column; transform:translateY(-47%); pointer-events:none; }
.eyebrow { margin-bottom:27px; color:rgba(255,255,255,.7); font-size:9px; font-weight:700; letter-spacing:1.7px; }
.hero-copy strong { font-size:clamp(50px,6.2vw,100px); line-height:1.1; font-weight:650; text-shadow:0 3px 28px rgba(0,0,0,.24); }
.hero-copy strong > span,.hero-copy strong > em { display:inline-block;max-width:100%;white-space:nowrap; }
.hero-copy em { color:var(--paper); font-family:Georgia,"STSong",serif; font-weight:400; }
.intro { display:block;width:min(490px,100%);max-width:100%;margin-top:30px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.85;overflow-wrap:anywhere;text-shadow:0 2px 15px rgba(0,0,0,.5); }
.portal-door { position:absolute; z-index:8; left:67.05%; top:40%; width:11.5%; height:37%; perspective:1000px; pointer-events:none; filter:drop-shadow(0 16px 24px rgba(0,0,0,.4)); }
.portal-door::before { content:""; position:absolute; inset:-7px; border:2px solid var(--acid); box-shadow:0 0 34px rgba(201,255,69,.42),inset 0 0 28px rgba(201,255,69,.14); animation:doorPulse 2.3s ease-in-out infinite; }
.portal-door::after { content:""; position:absolute; left:50%; bottom:-23px; width:140%; height:1px; background:linear-gradient(90deg,transparent,var(--acid),transparent); transform:translateX(-50%); }
.portal-door > i { position:absolute; inset:0; display:block; background:linear-gradient(145deg,rgba(23,39,33,.98),rgba(3,7,6,.99)); border:2px solid rgba(238,255,199,.9); transform-origin:left center; transition:transform .85s cubic-bezier(.2,.72,.15,1),box-shadow .6s; box-shadow:inset 0 0 55px rgba(201,255,69,.1); }
.portal-door > i::before { content:""; position:absolute; inset:8%; border:1px solid rgba(255,255,255,.24); }
.portal-door > i::after { content:""; position:absolute; left:14%; right:14%; top:25%; height:1px; background:rgba(255,255,255,.18); box-shadow:0 74px 0 rgba(255,255,255,.13); }
.portal-door b { position:absolute; right:8%; top:51%; width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 18px 4px rgba(201,255,69,.75); }
.portal-light { position:absolute; z-index:3; left:72.4%; top:58.9%; width:2px; height:2px; border-radius:50%; background:#f2ffd3; box-shadow:0 0 65px 32px rgba(201,255,69,.35); opacity:.4; transition:transform .9s cubic-bezier(.2,.7,.1,1),opacity .45s; }
.visual-meta { position:absolute; z-index:4; left:clamp(24px,4vw,64px); right:clamp(24px,4vw,64px); bottom:24px; display:flex; justify-content:space-between; color:rgba(255,255,255,.48); font-size:7px; letter-spacing:1.4px; pointer-events:none; }
.visual-meta b { font-weight:600; }
.transition-cover { position:fixed; z-index:40; inset:0; background:#f1ffd0; opacity:0; pointer-events:none; transition:opacity .48s .38s; }
.portal-stage.is-near-door .portal-door::before { animation-duration:.8s; }
.portal-stage.is-near-door .portal-door > i { transform:rotateY(-34deg); box-shadow:18px 0 42px rgba(201,255,69,.3); }
.portal-stage.is-near-door .portal-light { transform:scale(1.65); opacity:.9; }
.portal-stage.is-near-door .rain-canvas,.portal-stage.is-opening .rain-canvas { opacity:0; filter:blur(2px); }
.portal-stage.is-opening .portal-door > i { transform:rotateY(-104deg); box-shadow:30px 0 70px rgba(201,255,69,.24); }
.portal-stage.is-opening .portal-light { transform:scale(850); opacity:1; }
.portal-stage.is-opening > img { transform:scale(1.12); filter:brightness(1.25); }
.portal-stage.is-opening .shade { opacity:0; }
.portal-stage.is-opening + .transition-cover,.transition-cover.active { opacity:1; }
@keyframes doorPulse { 0%,100%{opacity:.62;box-shadow:0 0 22px rgba(201,255,69,.26),inset 0 0 20px rgba(201,255,69,.08)}50%{opacity:1;box-shadow:0 0 46px rgba(201,255,69,.58),inset 0 0 32px rgba(201,255,69,.18)} }
.about-section,.contact-section { position:relative; z-index:2; padding:120px max(28px,calc((100vw - 1320px)/2)); }
.return-entry { position:absolute; right:max(28px,calc((100vw - 1320px)/2)); top:42px; padding:9px 11px; border:1px solid rgba(17,19,15,.28); color:#5f625b; font-size:9px; transition:background .2s,color .2s; }.return-entry:hover { background:var(--ink); color:#fff; }.return-entry.dark { border-color:rgba(17,19,15,.45); color:var(--ink); }
.about-section { background:#eeeee8; color:var(--ink); }
.section-top { display:flex; justify-content:space-between; margin-bottom:100px; padding-top:15px; border-top:1px solid rgba(17,19,15,.25); }
.section-top p,.section-top span { margin:0; color:#74776f; font-size:9px; font-weight:700; letter-spacing:1.3px; }
.about-layout { display:grid; grid-template-columns:1fr .76fr; gap:10vw; }
.about-layout h2 { margin:0; font-size:clamp(46px,5.5vw,82px); line-height:1.23; }
.about-layout h2 em,.contact-content h2 em { font-family:Georgia,"STSong",serif; font-weight:400; }
.about-copy > p { margin:0 0 24px; color:#4f514b; font-size:15px; line-height:1.9; }
.capabilities { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; margin-top:45px; border-top:1px solid #c9cbc3; }
.capabilities span { padding:15px 0; border-bottom:1px solid #c9cbc3; font-size:11px; }
.studio-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:105px; border-top:1px solid #c9cbc3; border-bottom:1px solid #c9cbc3; }
.studio-stats div { padding:36px 0; display:flex; flex-direction:column; align-items:center; gap:8px; border-right:1px solid #c9cbc3; }.studio-stats div:last-child { border:0; }
.studio-stats strong { font-family:Georgia,serif; font-size:40px; font-weight:400; }.studio-stats span { color:#74776f; font-size:10px; }
.contact-section { padding-bottom:28px; background:#4c6fff; color:var(--ink); }
.contact-section .section-top { border-color:rgba(17,19,15,.35); }.contact-section .section-top p,.contact-section .section-top span { color:rgba(17,19,15,.62); }
.contact-content { padding:30px 0 100px; }.contact-content > p { margin:0 0 22px; font-size:12px; }
.contact-content h2 { margin:0 0 65px; font-size:clamp(52px,7.6vw,110px); line-height:1.13; }
.contact-email { display:flex; justify-content:space-between; align-items:center; padding:22px 0; border-top:1px solid rgba(17,19,15,.7); border-bottom:1px solid rgba(17,19,15,.7); font-size:clamp(19px,2.2vw,30px); }.contact-email b { transition:transform .25s; }.contact-email:hover b { transform:translate(5px,-5px); }
.contact-section footer { padding:25px 0 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid rgba(17,19,15,.22); font-size:9px; }
.contact-section footer > span b { font-weight:500; }.contact-section footer div { display:flex; gap:22px; }.contact-section footer > a { justify-self:end; }
@media(max-width:800px){
  .site-header { height:72px; }.studio-logo { height:38px;max-width:150px; }.site-header nav .availability,.site-header nav a:last-child { display:none; }
  .portal-stage > img { object-position:68% center; }
  .hero-copy { left:24px; top:39%; width:calc(100% - 48px); transform:none; }.hero-copy strong { font-size:clamp(45px,12vw,72px); }.intro { max-width:430px; }
  .portal-door { left:42%; top:54%; width:22%; height:27%; }.portal-light { left:53%; top:67.5%; }
  .visual-meta { left:20px; right:20px; bottom:17px; }.visual-meta b:first-child { display:none; }
  .about-section,.contact-section { padding:90px 20px; }.return-entry { right:20px;top:30px; }.section-top { margin-bottom:65px; }.about-layout { grid-template-columns:1fr; gap:55px; }.contact-section footer { grid-template-columns:1fr auto; gap:18px; }.contact-section footer div { grid-column:1; grid-row:2; }.contact-section footer > a { grid-column:2; grid-row:1/3; }
}
@media(max-width:500px){ .hero-copy { top:25%; }.hero-copy strong { font-size:43px; }.intro { font-size:12px; }.portal-door { left:37%; top:56%; width:27%; height:26%; }.portal-light { left:50.5%; top:69%; }.about-layout h2 { font-size:40px; }.capabilities { grid-template-columns:1fr; }.studio-stats { grid-template-columns:1fr; }.studio-stats div { border-right:0;border-bottom:1px solid #c9cbc3; }.contact-content h2 { font-size:43px; }.contact-section footer div { flex-wrap:wrap;gap:10px 18px; } }
@media(prefers-reduced-motion:reduce){ .portal-stage *,.transition-cover { transition:none !important; } }