/* Smooth SVG marks traced and cleaned from the supplied YHATA brandbook. */
:root{--brand-forest:#282725;--brand-terra:#262523;--brand-stone:#f5f4f1;--brand-sand:#dcd9d3;--brand-walnut:#85817b}
.brand-logo,.brand-mark{display:block;flex:none;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.brand-logo{width:100%;aspect-ratio:929/216;mask-image:url('/assets/brand/yhata-logo.svg');-webkit-mask-image:url('/assets/brand/yhata-logo.svg')}
.brand-mark{aspect-ratio:1;mask-image:url('/assets/brand/yhata-mark.svg');-webkit-mask-image:url('/assets/brand/yhata-mark.svg')}
.wordmark{display:block;width:154px;color:var(--brand-forest);letter-spacing:0}.wordmark .brand-logo{margin:0;font-size:inherit}.wordmark>small{display:block;font:9px/1.2 var(--sans);letter-spacing:.14em;margin-top:8px}
footer .wordmark .brand-logo{display:block}
.menu-top .wordmark{color:var(--brand-stone)}.transition-curtain>.brand-logo{width:55%;color:var(--brand-stone)}
.closing-wordmark{padding:30px 0 0;display:block;overflow:hidden;margin-left:0;font-size:inherit;line-height:1;letter-spacing:0;perspective:none}.closing-wordmark>.brand-logo{width:100%;color:var(--brand-stone);transform-origin:center bottom;will-change:auto}
.intro{--intro-bg:var(--brand-forest);--intro-ink:var(--brand-stone);background:var(--intro-bg);color:var(--intro-ink)}
.intro[data-intro=linen]{--intro-bg:var(--brand-stone);--intro-ink:var(--brand-terra)}
.intro[data-intro=seal]{--intro-bg:var(--brand-terra);--intro-ink:var(--brand-stone)}
.intro-top,.intro-bottom{font-size:12px;letter-spacing:.12em}.intro-top>span{font-size:14px;letter-spacing:.06em}.intro-top button{border-bottom:1px solid currentColor;padding:9px 0}.intro-bottom{bottom:6%}.intro-line{background:color-mix(in srgb,currentColor 20%,transparent)}.intro-line i{background:currentColor}
.brand-scene{width:min(76vw,920px);position:relative;display:grid;justify-items:center;text-align:center;gap:35px}
.brand-symbol{position:relative;width:clamp(110px,13vw,190px);aspect-ratio:1;perspective:700px}
.brand-symbol .brand-mark{position:absolute;inset:0;width:100%;opacity:0;transform:translate(var(--part-x),var(--part-y)) rotate(var(--part-r));will-change:transform,opacity}
.brand-symbol .brand-mark:nth-child(1){clip-path:inset(0 50% 50% 0);--part-x:-110%;--part-y:-75%;--part-r:-12deg}
.brand-symbol .brand-mark:nth-child(2){clip-path:inset(0 0 50% 50%);--part-x:110%;--part-y:-75%;--part-r:12deg}
.brand-symbol .brand-mark:nth-child(3){clip-path:inset(50% 50% 0 0);--part-x:-110%;--part-y:75%;--part-r:12deg}
.brand-symbol .brand-mark:nth-child(4){clip-path:inset(50% 0 0 50%);--part-x:110%;--part-y:75%;--part-r:-12deg}
.intro.running .brand-symbol .brand-mark{animation:brand-assemble 1.15s var(--motion-ease) both;animation-delay:calc(var(--part-i)*110ms)}
.brand-symbol .brand-mark:nth-child(1){--part-i:0}.brand-symbol .brand-mark:nth-child(2){--part-i:1}.brand-symbol .brand-mark:nth-child(3){--part-i:2}.brand-symbol .brand-mark:nth-child(4){--part-i:3}
.brand-signature{width:clamp(260px,42vw,540px);opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(16px)}
.intro[data-intro=assemble] .brand-signature .brand-logo,.intro[data-intro=seal] .brand-signature .brand-logo{aspect-ratio:694/216;mask-size:133.86% 100%;-webkit-mask-size:133.86% 100%;mask-position:right center;-webkit-mask-position:right center}
.intro.running .brand-signature{animation:brand-reveal .95s var(--motion-ease) .85s both}
.brand-promise{font:400 clamp(18px,2.1vw,28px)/1.5 var(--serif);letter-spacing:-.015em;opacity:0;transform:translateY(12px)}
.intro.running .brand-promise{animation:brand-assemble .8s var(--motion-ease) 1.15s both}
.intro[data-intro=linen] .brand-symbol{display:none}.intro[data-intro=linen] .brand-signature{width:100%;transform:translateY(45px);clip-path:inset(100% 0 0)}
.intro[data-intro=linen].running .brand-signature{animation:brand-reveal 1.5s var(--motion-ease) .15s both}.intro[data-intro=linen] .brand-scene{gap:46px}.intro[data-intro=linen].running .brand-promise{animation-delay:.8s}
.intro[data-intro=seal] .brand-symbol{width:clamp(135px,17vw,230px)}.intro[data-intro=seal] .brand-symbol .brand-mark{clip-path:none;transform:scale(1.28) rotate(-6deg)}.intro[data-intro=seal] .brand-symbol .brand-mark:not(:first-child){display:none}
.intro[data-intro=seal].running .brand-symbol .brand-mark{animation:brand-seal 1.1s var(--motion-ease) .05s both}.intro[data-intro=seal].running .brand-signature{animation-delay:.65s}.intro[data-intro=seal] .brand-signature{width:clamp(240px,32vw,420px)}
@keyframes brand-assemble{to{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes brand-reveal{to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes brand-seal{0%{opacity:0;transform:scale(1.28) rotate(-6deg)}65%{opacity:1;transform:scale(.97) rotate(.5deg)}100%{opacity:1;transform:none}}
.brand-review-link{display:none;margin:15px auto 0;font-size:14px;text-decoration:underline;text-underline-offset:5px}.intro-review .brand-review-link{display:block}
@media(max-width:600px){.wordmark{width:130px}.brand-scene{width:82vw;gap:27px}.brand-signature{width:75vw;max-width:380px}.brand-promise{max-width:250px}.intro-top,.intro-bottom{left:7%;right:7%}.intro-top{top:25px}.intro-bottom>span:last-child{display:none}.intro-bottom{gap:15px}.intro-line{margin:0}.intro[data-intro=linen] .brand-scene{gap:32px}}
@media(prefers-reduced-motion:reduce){.brand-signature,.brand-promise,.brand-symbol .brand-mark{opacity:1;transform:none;clip-path:none}.brand-symbol .brand-mark:not(:first-child){display:none}}