.intro-playing{overflow:hidden}
.tea-intro{position:fixed;inset:0;z-index:10000;isolation:isolate;overflow:hidden;background:#f3ecdf;color:#594b36;opacity:1;transition:opacity .65s ease,visibility .65s;min-height:100svh}
.tea-intro.intro-exit{opacity:0;visibility:hidden;pointer-events:none}
.intro-wash{position:absolute;inset:-20%;background:radial-gradient(ellipse at 75% 30%,#d8bd8b45,transparent 55%),radial-gradient(ellipse at 15% 85%,#b4b28e30,transparent 50%),linear-gradient(135deg,#f9f5ec,#eee3d0);animation:intro-light 4s ease both}
.intro-orbit{position:absolute;width:70vmax;height:70vmax;left:50%;top:50%;border:1px solid #b6a17d25;border-radius:50%;transform:translate(-50%,-50%) rotate(-25deg) scaleY(.5);box-shadow:0 0 0 50px #b6a17d08,0 0 0 130px #b6a17d08}
.intro-leaves{position:absolute;inset:0;overflow:hidden;mask-image:radial-gradient(ellipse 28% 30% at 50% 48%,transparent 65%,#000 125%);-webkit-mask-image:radial-gradient(ellipse 28% 30% at 50% 48%,transparent 65%,#000 125%)}
.intro-leaf{position:absolute;left:0;top:var(--y);width:var(--size);color:#777852;--leaf-vein:#d6c791;opacity:0;filter:drop-shadow(5px 10px 5px #64512b16);animation:intro-flow var(--duration) linear var(--delay) infinite;will-change:transform}
.intro-leaf svg{display:block;width:100%;height:auto}
.leaf-tone-1{color:#8e6d40;--leaf-vein:#ddc897}
.leaf-tone-2{color:#a39865;--leaf-vein:#eee0ad}
.intro-brand{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:min(90%,600px);animation:intro-brand-in 1.1s ease both}
.intro-overline{display:block;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.32em;color:#8e7756}
.intro-rule{display:block;width:1px;height:38px;background:#ad875b88;margin:24px auto}
.intro-name{font-family:'Noto Serif TC',serif;font-size:clamp(38px,6vw,76px);font-weight:500;letter-spacing:.24em;text-indent:.24em;line-height:1.4;margin:0;color:#57462f}
.intro-english{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.5em;text-indent:.5em;margin:18px 0 32px;color:#826e50}
.intro-tagline{font-family:'Noto Serif TC',serif;font-size:14px;letter-spacing:.15em;color:#8b7c64;margin:0}
.intro-bottom{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));left:5vw;right:5vw;display:flex;align-items:center;justify-content:space-between;gap:16px}
.intro-caption{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.24em;color:#9a8769}
.intro-skip{cursor:pointer;background:transparent;border:1px solid #b5a18170;border-radius:0;color:#715d40;font:12px 'DM Sans',sans-serif;letter-spacing:.12em;padding:12px 19px;min-height:44px}
.intro-skip span{margin-left:16px}.intro-skip:hover{background:#fff5}.intro-skip:focus-visible{outline:2px solid #9c6c45;outline-offset:4px}
.intro-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#a7844d66;transform:scaleX(0);transform-origin:left;animation:intro-progress 3.35s linear forwards}
@keyframes intro-flow{0%{transform:translate3d(110vw,0,0) rotate(var(--tilt)) rotateY(20deg);opacity:0}12%{opacity:.75}50%{transform:translate3d(45vw,var(--drift),0) rotate(calc(var(--tilt) + 65deg)) rotateY(55deg);opacity:.65}88%{opacity:.75}100%{transform:translate3d(-20vw,0,0) rotate(calc(var(--tilt) + 125deg)) rotateY(10deg);opacity:0}}
@keyframes intro-brand-in{from{opacity:0;transform:translate(-50%,calc(-50% + 15px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes intro-light{from{transform:scale(1.08);opacity:.5}to{transform:scale(1);opacity:1}}
@keyframes intro-progress{to{transform:scaleX(1)}}
@media(max-width:600px){.intro-overline{font-size:8px;letter-spacing:.24em}.intro-rule{height:26px;margin:20px auto}.intro-english{font-size:10px}.intro-tagline{font-size:12px}.intro-caption{font-size:8px;letter-spacing:.13em}.intro-bottom{bottom:25px}.intro-leaf{width:calc(var(--size)*.72)}.intro-leaves{mask-image:radial-gradient(ellipse 39% 26% at 50% 48%,transparent 55%,#000 125%);-webkit-mask-image:radial-gradient(ellipse 39% 26% at 50% 48%,transparent 55%,#000 125%)}}
@media(prefers-reduced-motion:reduce){.tea-intro{display:none}.intro-playing{overflow:auto}}