.brand-intro{position:fixed;inset:0;margin:0;padding:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;border:0;overflow:hidden;background:#0b111c;color:#deded8;box-sizing:border-box;isolation:isolate}
.brand-intro::backdrop{background:transparent}
.brand-intro:not([open]){display:none}
.brand-intro[open]{display:block}
.intro-images{position:absolute;inset:0;display:grid;grid-template-columns:1.08fr 1.2fr 1fr;gap:5px}
.intro-frame{overflow:hidden;position:relative;background:#101c2c}
.intro-frame img{height:100%;width:100%;object-fit:cover}
.intro-food img{object-position:56% 50%}
.intro-music img{object-position:63% 45%}
.intro-beauty img{object-position:50% 30%}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,#040b1480 0%,#09172755 30%,#071527ad 60%,#060f1cf5 100%)}
.intro-top{position:absolute;left:5%;right:5%;top:clamp(20px,4.5vh,45px);display:flex;justify-content:space-between;align-items:center;gap:25px}
.intro-top>img{width:190px;height:auto}
#intro-enter{margin-top:28px;padding:15px 24px;background:var(--accent);border:1px solid var(--accent);color:#0b111c;cursor:pointer;font:600 1rem/1.4 var(--font);display:flex;gap:44px;align-items:center;min-height:48px}
#intro-enter:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
#intro-enter:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.intro-copy{position:absolute;left:7%;right:7%;bottom:18%;max-width:1200px}
.intro-copy>p{font-size:.8125rem;letter-spacing:.11em;text-transform:uppercase;margin:0 0 24px;color:#c2d3e2}
.intro-title{font:600 clamp(3rem,10vw,10rem)/.98 var(--display);letter-spacing:-.01em}
.intro-title>span{display:block}
.intro-title>span:first-child{color:#deded8}
.intro-title em{font-style:normal;color:var(--accent)}
.intro-bottom{position:absolute;bottom:5%;left:7%;right:7%;display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid #7592b752;font:400 .75rem/1.6 var(--font);color:#bccedc}
.brand-intro[open] .intro-frame{animation:intro-image-enter 2600ms cubic-bezier(.22,.61,.36,1) both}
.brand-intro[open] .intro-music{animation-delay:220ms}
.brand-intro[open] .intro-beauty{animation-delay:440ms}
.brand-intro[open] .intro-top>img{animation:intro-text-enter 1700ms ease 200ms both}
.brand-intro[open] .intro-title>span{animation:intro-type-enter 2100ms cubic-bezier(.22,.61,.36,1) 750ms both}
.brand-intro[open] .intro-title>span:nth-child(2){animation-delay:1050ms}
.brand-intro[open] .intro-copy>p{animation:intro-text-enter 1600ms ease 550ms both}
.brand-intro[open] .intro-bottom{animation:intro-text-enter 1700ms ease 1450ms both}
.brand-intro[open] #intro-enter{animation:intro-control-enter 1700ms ease 1200ms both}
.brand-intro.is-leaving{animation:intro-curtain-exit 1100ms cubic-bezier(.4,0,.2,1) both;pointer-events:none}
.intro-replay{font:inherit;font-size:.75rem;line-height:1.6;background:none;color:var(--muted);border:0;border-bottom:1px solid #45617a;padding:0;cursor:pointer}
.intro-replay:hover{color:var(--accent)}
@keyframes intro-image-enter{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@keyframes intro-type-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-text-enter{from{opacity:0}to{opacity:1}}
@keyframes intro-control-enter{from{opacity:.35}to{opacity:1}}
@keyframes intro-curtain-exit{from{opacity:1}to{opacity:0}}
@media(max-width:800px){.intro-images{grid-template-columns:1fr .95fr}.intro-music{display:none}.intro-top>img{width:160px}.intro-title{font-size:clamp(3.6rem,12vw,6rem)}.intro-copy{bottom:23%;left:6%;right:6%}.intro-copy>p{font-size:.75rem;letter-spacing:.055em;max-width:300px}.intro-bottom{left:6%;right:6%;flex-direction:column;gap:7px;bottom:5%}.intro-title>span:first-child{margin-bottom:7px}}
@media(max-width:420px){.intro-top>img{width:130px}#intro-enter{font-size:.9375rem;gap:32px;padding:13px 20px;margin-top:24px}.intro-title{font-size:12vw}.intro-copy{bottom:25%}.intro-copy>p{max-width:230px}.intro-bottom{font-size:.75rem}}
@media(max-height:500px) and (min-width:700px){.intro-title{font-size:14vh}.intro-copy{bottom:24%}.intro-copy>p{margin-bottom:10px}.intro-top>img{width:120px}.intro-bottom{bottom:4%;padding-top:10px}}
@media(prefers-reduced-motion:reduce){.brand-intro[open] *,.brand-intro.is-leaving{animation:none!important;transition:none!important}}
@media(max-height:400px){.brand-intro{overflow-y:auto}.intro-top{position:relative;left:auto;right:auto;top:auto;margin:20px 6%}.intro-copy{position:relative;left:auto;right:auto;bottom:auto;margin:30px 6%}.intro-bottom{position:relative;left:auto;right:auto;bottom:auto;margin:30px 6%}.intro-title{font-size:clamp(2.6rem,9vw,4rem)}}