/* Cinematic opening sequence for the ChaoWan showroom. */
.site-intro { position:fixed; z-index:9999; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; padding:clamp(26px,4vw,68px); overflow:hidden; isolation:isolate; color:#fff; background:radial-gradient(circle at 78% 68%,rgba(234,37,87,.54),transparent 26%),radial-gradient(circle at 49% 102%,rgba(143,24,76,.68),transparent 38%),#0c0b0e; transition:clip-path .78s cubic-bezier(.76,0,.24,1),visibility .78s; clip-path:inset(0); }
.site-intro::before { content:""; position:absolute; z-index:-1; width:90vw; height:105vh; right:-18vw; top:-29vh; opacity:.85; transform:rotate(-25deg); background:linear-gradient(90deg,transparent 0 41%,rgba(255,77,139,.12) 42%,rgba(255,77,139,.72) 51%,rgba(255,77,139,.07) 61%,transparent 64%); filter:blur(9px); animation:intro-light-sweep 1.55s .05s cubic-bezier(.22,1,.36,1) both; }
.site-intro::after { content:"CHAO WAN"; position:absolute; z-index:-1; right:clamp(20px,4vw,70px); bottom:clamp(76px,13vh,152px); color:rgba(255,255,255,.055); font:800 clamp(75px,17vw,295px)/.72 Manrope,sans-serif; letter-spacing:-.12em; white-space:nowrap; animation:intro-watermark 1.3s .24s cubic-bezier(.22,1,.36,1) both; }
.intro-mark { position:relative; z-index:1; display:flex; align-items:center; gap:12px; align-self:start; opacity:0; transform:translateY(-12px); animation:intro-mark-in .48s .16s cubic-bezier(.22,1,.36,1) forwards; }
.intro-mark img { width:45px; height:45px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.26); }.intro-mark b { display:block; font:800 19px/1 Manrope,sans-serif; letter-spacing:-.08em; }.intro-mark b span { color:#ff5c91; }.intro-mark small { display:block; margin-top:4px; color:#c7bfc2; font:8px 'DM Mono',monospace; letter-spacing:.1em; }
.intro-copy { position:relative; z-index:1; grid-column:1/-1; align-self:center; width:min(980px,100%); margin:0 auto; text-align:center; }.intro-copy span,.intro-copy i { display:block; color:#ff729e; font:10px 'DM Mono',monospace; letter-spacing:.24em; font-style:normal; }.intro-copy span { opacity:0; transform:translateY(11px); animation:intro-kicker-rise .42s .22s cubic-bezier(.22,1,.36,1) forwards; }.intro-copy strong { display:block; margin:20px 0 19px; overflow:hidden; color:#fff; font:700 clamp(54px,8.4vw,142px)/.82 'Playfair Display',serif; letter-spacing:-.07em; text-shadow:0 14px 55px rgba(0,0,0,.42); clip-path:inset(100% 0 0 0); animation:intro-title-reveal .78s .34s cubic-bezier(.22,1,.36,1) forwards; }.intro-copy i { opacity:0; transform:translateY(12px); color:#f3d9e2; animation:intro-note-rise .42s .92s cubic-bezier(.22,1,.36,1) forwards; }
.intro-progress { position:relative; z-index:1; align-self:end; width:min(390px,62vw); height:2px; overflow:hidden; background:rgba(255,255,255,.18); }.intro-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,#f13d73,#ffadc5); box-shadow:0 0 17px #f64d82; animation:intro-progress 1.48s .3s cubic-bezier(.65,0,.35,1) forwards; }.site-intro>p { position:relative; z-index:1; align-self:end; justify-self:end; margin:0; color:#d4c6cc; font:9px 'DM Mono',monospace; letter-spacing:.16em; opacity:0; transform:translateY(8px); animation:intro-status-rise .4s 1.03s ease forwards; }
.intro-complete .site-intro { visibility:hidden; clip-path:inset(0 0 0 100%); }.intro-complete .header { animation:page-drop .55s .04s both; }.intro-complete .home-carousel { animation:page-rise .7s .12s both; }.intro-complete .hot-products { animation:page-rise .7s .2s both; }
@keyframes intro-light-sweep { from { transform:translateX(32vw) rotate(-25deg); opacity:0; } to { transform:translateX(-18vw) rotate(-25deg); opacity:.85; } } @keyframes intro-watermark { from { opacity:0; transform:translateX(9vw); } to { opacity:1; transform:none; } } @keyframes intro-mark-in { to { opacity:1; transform:none; } } @keyframes intro-kicker-rise { to { opacity:1; transform:none; } } @keyframes intro-title-reveal { to { clip-path:inset(0); } } @keyframes intro-note-rise { to { opacity:1; transform:none; } } @keyframes intro-progress { to { width:100%; } } @keyframes intro-status-rise { to { opacity:1; transform:none; } } @keyframes page-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } } @keyframes page-drop { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:none; } }
@media(max-width:700px){.site-intro{padding:28px 24px}.intro-copy strong{font-size:53px}.intro-progress{width:100%}.site-intro>p{display:none}} @media(prefers-reduced-motion:reduce){.site-intro{display:none}.intro-complete .header,.intro-complete .home-carousel,.intro-complete .hot-products{animation:none}}