/* LANFANGYU: CSS-3D brand launch scene. Shared by pre-JS HTML and React.
   Keep the supplied logo intact; animate only transform/opacity. No WebGL, blur,
   model downloads or synthetic percentages. Home intro timing is controlled separately. */
.lfy-startup{position:fixed;inset:0;z-index:100;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;pointer-events:none;color:#f4f1e9;background:#0c0c0d;padding:calc(20px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px));font-family:system-ui,-apple-system,"PingFang TC","Noto Sans TC",sans-serif}
.lfy-startup-composition{position:relative;width:min(88vw,480px,78svh);aspect-ratio:1;flex:0 0 auto;container-type:inline-size}
.lfy-startup-scene{position:absolute;inset:0 0 26%;perspective:850px}
.lfy-startup-scene::before{content:"";position:absolute;inset:5% 4%;border-radius:50%;background:radial-gradient(ellipse,#ddb85a17,transparent 65%)}
.lfy-startup-logo{position:absolute;width:74%;aspect-ratio:523/372;left:50%;top:52%;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(8deg) rotateY(-9deg);animation:lfyStartupLogo 3.8s ease-in-out infinite;z-index:2}
.lfy-startup-logo-back,.lfy-startup-logo-edge,.lfy-startup-logo-face{position:absolute;inset:0;border-radius:22px;display:block}
.lfy-startup-logo-back{background:url(/brand/lanfangyu-startup-cutout.png) center/contain no-repeat;opacity:.18;transform:translate3d(2px,3px,-5px)}
.lfy-startup-logo-edge{display:none}
.lfy-startup-logo-face{background:transparent;overflow:visible;transform:translateZ(1px)}
.lfy-startup-logo-face img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none}
.lfy-startup-logo-shine{position:absolute;inset:0;mask:url(/brand/lanfangyu-startup-cutout.png) center/contain no-repeat;-webkit-mask:url(/brand/lanfangyu-startup-cutout.png) center/contain no-repeat;background:linear-gradient(112deg,transparent 35%,#fff2c31f 48%,#fff9dc36 50%,transparent 64%);transform:translate3d(-38%,0,0);animation:lfyStartupShine 2s ease-in-out infinite;pointer-events:none}
.lfy-startup-halo{position:absolute;left:50%;top:49%;width:91%;aspect-ratio:1;border:1px solid #dbc08266;border-radius:50%;transform-style:preserve-3d;box-sizing:border-box;pointer-events:none}
.lfy-startup-halo::before{content:"";position:absolute;inset:-2px;border:2px solid transparent;border-top-color:#f2d297b3;border-left-color:#e2bd6152;border-radius:50%}
.lfy-startup-halo-a{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-24deg);animation:lfyStartupHaloA 18s linear infinite;opacity:.65}
.lfy-startup-halo-b{width:77%;border-color:#92aec43b;transform:translate(-50%,-50%) rotateX(69deg) rotateY(22deg) rotateZ(28deg);animation:lfyStartupHaloB 22s linear infinite;opacity:.5}
.lfy-startup-halo-b::before{border-top-color:#abc8dd66;border-left-color:transparent}
.lfy-startup-plinth{position:absolute;left:50%;top:87%;width:65%;height:16%;border-radius:50%;background:radial-gradient(ellipse,#dec17d33,#dcb25509 48%,transparent 72%);transform:translate(-50%,-50%)}
.lfy-startup-dust{position:absolute;inset:-12% -3%;overflow:hidden;pointer-events:none}
.lfy-startup-particle{position:absolute;display:block;border-radius:50%;background:#f0d291;box-shadow:0 0 5px #f0d29155;opacity:.55;transform:translate3d(0,0,0);animation:lfyStartupParticle 6s ease-in-out infinite}
.lfy-startup-brand{text-align:center;position:absolute;top:77%;left:0;right:0}
.lfy-startup-title{font-size:clamp(20px,6.25cqw,30px);font-weight:650;line-height:1.4;letter-spacing:.16em;padding-left:.16em}
.lfy-startup-caption{margin-top:9px;color:#d4b87c;font-size:clamp(8px,2.2cqw,11px);line-height:1.5;letter-spacing:.23em;padding-left:.23em}
.lfy-startup-status{position:absolute;bottom:2%;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:12px;min-height:28px;font-size:12px;letter-spacing:.04em;color:#dbc38d;--lfy-loading-ink:#e3c887;text-align:center;flex-shrink:0}
@keyframes lfyStartupLogo{0%,100%{transform:translate(-50%,-50%) rotateX(8deg) rotateY(-9deg) translateZ(0)}50%{transform:translate(-50%,-52%) rotateX(4deg) rotateY(7deg) translateZ(9px)}}
@keyframes lfyStartupShine{0%,100%{transform:translate3d(-38%,0,0);opacity:.12}45%,55%{transform:translate3d(38%,0,0);opacity:.5}}
@keyframes lfyStartupHaloA{from{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-24deg)}to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(336deg)}}
@keyframes lfyStartupHaloB{from{transform:translate(-50%,-50%) rotateX(69deg) rotateY(22deg) rotateZ(28deg)}to{transform:translate(-50%,-50%) rotateX(69deg) rotateY(22deg) rotateZ(-332deg)}}
@keyframes lfyStartupParticle{0%,100%{transform:translate3d(-5px,9px,0) scale(.75);opacity:.18}50%{transform:translate3d(7px,-17px,0) scale(1);opacity:.8}}
/* Low power reduces decoration only, never data sync or interactive functionality. */
html[data-lfy-motion="balanced"] .lfy-startup-particle:nth-child(n+9){display:none}
html[data-lfy-motion="minimal"] .lfy-startup-particle:nth-child(n+5){display:none}
html[data-lfy-motion="minimal"] .lfy-startup-halo-b{display:none}
html[data-lfy-motion="minimal"] .lfy-startup-particle,html[data-lfy-motion="minimal"] .lfy-startup-logo-shine{animation:none}
html[data-lfy-motion="minimal"] .lfy-startup-logo{animation-duration:10s}
html[data-lfy-motion-paused="1"] .lfy-startup *{animation-play-state:paused!important}
@media(max-width:600px){.lfy-startup-particle:nth-child(n+11){display:none}}
@media(max-height:460px){.lfy-startup-title{font-size:18px}.lfy-startup-caption{margin-top:3px;font-size:8px}.lfy-startup-status{font-size:10px;bottom:0}.lfy-startup-status .lfy-loading-mark{width:16px!important;height:16px!important}}
@media(prefers-reduced-motion:reduce){.lfy-startup *{animation:none!important}.lfy-startup-particle:nth-child(n+5){display:none}}
@media(forced-colors:active){.lfy-startup{background:Canvas;color:CanvasText}.lfy-startup-caption,.lfy-startup-status{color:CanvasText}.lfy-startup-halo,.lfy-startup-particle{display:none}}
@supports not (transform-style:preserve-3d){.lfy-startup-logo{animation:none;transform:translate(-50%,-50%)}.lfy-startup-halo{display:none}}
@media print{.lfy-startup,.lfy-loading-mark,.lfy-loading-state{display:none!important}}

/* Only the deliberate home intro intercepts taps. Other loading marks stay decorative. */
.lfy-intro-gate{position:fixed;inset:0;z-index:2147483000;opacity:1;transition:opacity 250ms ease-out;pointer-events:auto;outline:none}
.lfy-intro-gate.is-leaving{opacity:0}
.lfy-intro-skip{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));min-width:88px;min-height:44px;border:1px solid #e3c88740;border-radius:22px;background:#202129;color:#d9c59c;font:500 12px system-ui;z-index:101;cursor:pointer}
.lfy-intro-skip:focus-visible{outline:2px solid #e3c887;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.lfy-intro-gate{transition:none!important}}
@media print{.lfy-intro-gate{display:none!important}}

/* Pre-JS screen matches the native static first frame. Animate only after React takes over. */
#root > .lfy-startup *{animation-play-state:paused!important}