/* A paper label unrolls, receives the brand, then settles onto its backing. */
.brand-intro:not(.is-playing) .intro-scene,.brand-intro:not(.is-playing) .intro-caption{visibility:hidden}
.brand-intro[hidden]{display:none}.intro-pending .brand-intro,.brand-intro.is-playing{display:grid}
.intro-pending body{overflow:hidden}.brand-intro{position:fixed;inset:0;z-index:200;background:#1d1d1b;color:#faf7ee;grid-template-rows:auto 1fr auto;isolation:isolate;overflow:hidden;padding:32px 48px;min-height:100svh;opacity:1;transition:opacity .55s ease,visibility .55s;overscroll-behavior:contain}
.brand-intro.is-closing{opacity:0;visibility:hidden;pointer-events:none}.brand-intro:before{content:'';position:absolute;width:min(85vw,850px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#6b442126,transparent 65%);z-index:-1}.intro-top{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:3}.intro-top>span{font-size:10px;letter-spacing:2px;color:#b8b3a9}.intro-top button{font:inherit;font-size:12px;color:#f8f3e9;background:#ffffff09;border:1px solid #ffffff2b;border-radius:999px;padding:11px 19px;display:flex;gap:22px;align-items:center;cursor:pointer}.intro-top button:hover{background:#ffffff15}.intro-top button:focus-visible{outline:2px solid #ff7900;outline-offset:5px}
.intro-scene{position:relative;align-self:center;justify-self:center;width:min(560px,82vw);aspect-ratio:1.65;perspective:1000px;margin-top:25px}.intro-orbit{position:absolute;inset:-40% -13%;border:1px solid #ffffff09;border-radius:50%;transform:rotate(-25deg)}.intro-orbit:after{content:'';position:absolute;inset:35px;border:1px dashed #ffffff0e;border-radius:50%}.intro-backing{position:absolute;inset:7% 2% -6%;background:#ff7900;border-radius:26px;transform:rotate(7deg);box-shadow:0 32px 65px #0005}.intro-backing>span{position:absolute;bottom:11px;right:24px;font-size:8px;font-weight:800;letter-spacing:1.7px;color:#743000}.intro-sticker{position:absolute;inset:0;background:#fdfbf6;border-radius:24px;transform:rotate(-5deg);box-shadow:0 20px 50px #0004;overflow:hidden;transform-origin:80% 80%;will-change:transform,clip-path}.intro-sticker:before{content:'';position:absolute;inset:12px;border:1px solid #dad6cc80;border-radius:16px;pointer-events:none}.intro-print{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:35px}.intro-print img{width:80%;height:auto;max-height:170px;object-fit:contain;mix-blend-mode:multiply}.intro-print>span{font-size:9px;font-weight:700;letter-spacing:3.5px;color:#797166}.intro-peel{position:absolute;right:0;top:0;width:110px;height:110px;background:linear-gradient(225deg,#1d1d1b 49%,#d4d0c6 50%,#fffdf8 75%);filter:drop-shadow(-5px 6px 5px #0002);transform-origin:top right;pointer-events:none}.intro-print-line{position:absolute;left:10%;right:10%;height:1px;background:#ff7900;box-shadow:0 0 15px #ff790055;top:20%;opacity:0}.intro-registration{position:absolute;font-size:22px;font-weight:400;color:#d7c5ac66}.intro-registration-left{left:-28px;top:25%}.intro-registration-right{right:-27px;bottom:9%}.intro-caption{display:flex;gap:28px;align-items:center;justify-content:center;padding:40px 0 20px}.intro-caption p{color:#f7f1e7;font-size:clamp(22px,2.6vw,34px);font-weight:500;line-height:1.35;letter-spacing:-1px;margin:0;text-align:center}.intro-caption-line{width:50px;height:1px;background:#ffffff20}.intro-replay{padding:0;border:0;background:none;font:inherit;font-size:11px;color:#625b50;cursor:pointer;white-space:nowrap}.intro-replay:hover{color:#c95500}
.brand-intro.is-playing .intro-sticker{animation:label-apply 1.65s cubic-bezier(.22,.8,.2,1) both!important}.brand-intro.is-playing .intro-backing{animation:label-backing 1s ease both!important}.brand-intro.is-playing .intro-print{animation:label-print 1.05s .45s ease both!important}.brand-intro.is-playing .intro-peel{animation:label-peel 1.2s .35s cubic-bezier(.22,.8,.2,1) both!important}.brand-intro.is-playing .intro-print-line{animation:label-scan .95s .4s ease both!important}.brand-intro.is-playing .intro-caption{animation:label-caption .7s .9s ease both!important}
@keyframes label-apply{0%{opacity:0;transform:translateY(-70px) rotate(-16deg) rotateX(35deg);clip-path:inset(0 0 80% 0 round 24px)}35%{opacity:1;clip-path:inset(0 round 24px)}70%{transform:translateY(5px) rotate(-3deg) rotateX(0)}100%{opacity:1;transform:translateY(0) rotate(-5deg)}}
@keyframes label-backing{from{opacity:0;transform:translateY(30px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(7deg)}}
@keyframes label-print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes label-peel{0%{width:150px;height:150px}100%{width:0;height:0}}
@keyframes label-scan{0%{top:20%;opacity:0}15%{opacity:.7}90%{opacity:.4}100%{top:80%;opacity:0}}
@keyframes label-caption{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.brand-intro{padding:20px;grid-template-rows:auto 1fr auto}.intro-top>span{max-width:160px;font-size:8px;line-height:1.7;letter-spacing:1.4px}.intro-top button{font-size:11px;padding:9px 14px;gap:12px}.intro-scene{width:min(76vw,440px);aspect-ratio:1.6}.intro-sticker{border-radius:19px}.intro-sticker:before{inset:9px;border-radius:12px}.intro-print{padding:20px;gap:10px}.intro-print img{width:90%}.intro-print>span{font-size:7px;letter-spacing:1.6px}.intro-backing{border-radius:20px}.intro-backing>span{font-size:5px;right:15px;bottom:8px;letter-spacing:1px}.intro-caption{gap:16px;padding-bottom:35px}.intro-caption-line{width:28px}.intro-caption p{font-size:25px}.intro-registration-left{left:-19px}.intro-registration-right{right:-18px}}