/* Motion is progressive enhancement: the complete page also works without it. */
:root { --ease-out: cubic-bezier(.2,.65,.25,1); --ease-silk: cubic-bezier(.22,1,.36,1); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { scroll-padding-top: 24px; }
html.is-loading { overflow: hidden; }
.skip-link { position: fixed; top: 16px; left: 16px; z-index: 120; padding: 10px 20px; background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.opening-screen, .hero-shutters { display: none; }
.js .opening-screen { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; background: var(--yellow); pointer-events: none; transition: transform 1s var(--ease-silk), opacity 1s .2s ease, visibility 1.2s; }
.opening-mark { display: flex; align-items: center; gap: 24px; }
.opening-mark span { font-size: clamp(70px, 10vw, 120px); line-height: 1.3; }
.opening-mark i { font: 10px/1.5 Didot,serif; letter-spacing: .18em; }
.opening-screen p { font: 11px/1.4 Didot,serif; letter-spacing: .15em; margin: 28px 0 0; }
.opening-rule { width: 180px; height: 1px; background: rgba(48,46,32,.18); position: relative; margin-top: 22px; overflow: hidden; }
.opening-rule::after { content: ''; position: absolute; inset: 0; background: var(--ink); animation: loading-rule 1s ease-in-out infinite; }
.is-entering .opening-screen, .site-ready .opening-screen { transform: translateY(-100%); opacity: 0; visibility: hidden; }
.js.site-ready .opening-screen { display: none; }
.js .hero-shutters { display: grid; grid-template-columns: repeat(10,1fr); position: absolute; width: 120%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); z-index: 4; pointer-events: none; }
.hero-shutters i { height: 200%; background: rgba(255,253,240,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-right: 1px solid rgba(255,255,255,.08); transform: translateY(var(--shutter-y,-100%)); }
.hero-art { translate: var(--hero-x,0px) var(--hero-y,0px); scale: 1.03; }
.is-entering .hero-art { animation: hero-develop 1.2s var(--ease-out) both; }
.is-entering .hero .giant { animation: soft-arrive 1.2s var(--ease-silk) .1s both; }
.is-entering .hero-rail { animation: soft-arrive 1.2s var(--ease-silk) .2s both; }
.is-entering .hero-dates { animation: soft-arrive 1.2s var(--ease-silk) .25s both; }
.hero .giant { translate: 0 var(--hero-type-y,0px); }
.hero-atmosphere { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hero-butterfly { position: absolute; width: clamp(140px,19vw,300px); max-width: none; opacity: .75; filter: blur(3px); }
.hero-butterfly.one { bottom: -9%; right: -5%; transform: rotate(-28deg); translate: 0 var(--hero-fg-y,0px); }
.hero-butterfly.two { top: 30%; left: -5%; width: clamp(80px,10vw,160px); transform: rotate(23deg); filter: blur(1px); opacity: .55; translate: 0 var(--hero-fg-y,0px); }
.scroll-cue { position: absolute; left: 50%; bottom: 27px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 11px; transform: translateX(-50%); font: 9px/1.4 Arial,sans-serif; letter-spacing: .2em; }
.scroll-cue i { position: relative; display: block; width: 1px; height: 45px; background: rgba(48,46,32,.25); overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; inset: 0; background: var(--ink); animation: scroll-line 2s var(--ease-out) infinite; }
.intro-image { translate: 0 var(--intro-y,0px); scale: var(--intro-scale,1); filter: blur(var(--intro-blur,0px)); opacity: var(--intro-opacity,.54); }
.title-band .kanji:first-child { translate: var(--band-left,0px) 0; }
.title-band .kanji:last-child { translate: var(--band-right,0px) 0; }
.title-band .subtitle { opacity: var(--band-opacity,1); }
.js .title-band .kanji { opacity: 0; filter: blur(6px); scale: 1.08; rotate: -7deg; transition: opacity 3s var(--ease-out), filter 4s var(--ease-out), scale 4s var(--ease-out), rotate 4s var(--ease-out); }
.js .title-band .kanji:last-child { rotate: 7deg; }
.js .title-band.has-entered .kanji { opacity: 1; filter: none; scale: 1; rotate: 0deg; }
.ornament, .drift-petal { translate: 0 var(--parallax-y,0px); rotate: 1 1.833 0 var(--orn-angle,0deg); }
.flower { filter: blur(var(--orn-blur,0em)) drop-shadow(14px 22px 2px rgba(77,63,9,.16)); }
.butterfly { filter: blur(var(--orn-blur,0em)) drop-shadow(8px 12px 2px rgba(106,80,7,.12)); }
.butterfly.soft { filter: blur(calc(5px + var(--orn-blur,0em))) drop-shadow(10px 18px 8px rgba(122,93,10,.08)); }
.ornaments-footer .flower { filter: blur(var(--orn-blur,0em)) drop-shadow(12px 20px 2px rgba(0,0,0,.2)); }
.js .ornaments-footer.has-entered .flower { animation: footer-flower 3s var(--ease-out) both; }
.js .ornaments-footer.has-entered .butterfly { animation: footer-flower 2s var(--ease-out) both; }
.js [data-reveal] { opacity: 0; filter: blur(5px); transform: translateY(22px); transition: opacity 1s var(--ease-out) var(--reveal-delay,0ms), transform 1.3s var(--ease-silk) var(--reveal-delay,0ms), filter 1.2s ease var(--reveal-delay,0ms); }
.js [data-reveal="heading"] { transform: scale(1.05); filter: none; transition: opacity 1.6s var(--ease-silk), transform 1.6s var(--ease-silk); }
.js .intro .copy { transition-delay: 1s; transform: none; filter: none; }
.js .profile-card { transform: none; filter: none; transition: opacity 1s ease; }
.js [data-reveal].is-visible { opacity: 1; filter: blur(0); transform: none; }
.js .intro h1.is-visible, .js .intro .statement.is-visible { background: linear-gradient(110deg,var(--ink) 30%,#a39457 46%,var(--ink) 62%) 100% 0 / 300% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: text-light 2.4s ease both; }
.big-link, .action, .socials a, .page-top, .contact, .accordion summary { transition: background-color .35s ease, color .35s ease, border-radius .5s ease, box-shadow .35s ease, opacity .4s ease, translate .35s var(--ease-out); }
.big-link { background-image: linear-gradient(110deg,transparent,rgba(255,255,255,.22),transparent); background-size: 300% 100%; background-position: 100% 0; transition: scale .6s ease, background-position 2s ease, color .4s ease; }
.big-link:hover { scale: 1.02; background-position: 0 0; }
.big-link::before, .big-link::after { transition: rotate .65s var(--ease-silk); }
.big-link:hover::before { rotate: 90deg; }
.big-link:hover::after { rotate: -90deg; }
.action { background-color: var(--paper); background-image: linear-gradient(#fff5cb,#fff5cb); background-size: 0% 100%; background-position: center; background-repeat: no-repeat; transition: background-size .4s ease; }
.action:hover { background-color: var(--paper); color: var(--ink); background-size: 100% 100%; }
.action::after { transition: rotate .35s, translate .35s; }
.action:hover::after { rotate: 45deg; translate: 3px -2px; }
.socials a { transition: opacity .6s ease; }
.socials a:hover { opacity: .4; }
.accordion summary:hover { background: #fff4c7; }
.accordion summary::after { transition: rotate .3s var(--ease-out), background .3s; }
.accordion[open] summary::after { rotate: 180deg; }
.product-art img { transition: transform .8s var(--ease-silk), box-shadow .8s; }
.product:hover .product-art img { transform: rotate(0deg) scale(1.04); box-shadow: 8px 12px 0 #c7ba84; }
.product-art.bag img { transform-origin: top center; }
.contact:hover { opacity: .65; }
.js .page-top { opacity: 0; pointer-events: none; translate: 0 12px; }
.js .page-top.is-visible { opacity: .9; pointer-events: auto; translate: 0 0; }
.page-top:hover { background: var(--ink); color: var(--paper); }
.motion-toggle { position: fixed; left: max(18px,env(safe-area-inset-left)); bottom: max(21px,env(safe-area-inset-bottom)); z-index: 8; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(48,46,32,.35); padding: 8px 13px; border-radius: 30px; color: var(--ink); background: rgba(255,253,240,.85); backdrop-filter: blur(8px); font: 10px/1.6 "Hiragino Kaku Gothic ProN",sans-serif; cursor: pointer; min-height: 40px; }
.motion-toggle[hidden] { display: none; }
.motion-icon { font: 14px/1 Arial; }
.motion-toggle:focus-visible, .dialog-close:focus-visible, .dialog-confirm:focus-visible { outline: 3px solid #526bd6; outline-offset: 4px; }
.site-dialog { position: fixed; width: min(540px,calc(100% - 36px)); max-height: calc(100svh - 44px); border: 0; padding: 0; color: var(--ink); background: var(--paper); border-radius: 45px 45px 6px 6px; box-shadow: 0 24px 90px rgba(48,46,32,.3); }
.site-dialog::backdrop { background: rgba(48,46,32,.5); backdrop-filter: blur(6px); }
.site-dialog[open] { animation: dialog-in .4s var(--ease-silk) both; }
.dialog-inner { padding: 62px 42px 38px; text-align: center; }
.dialog-close { position: absolute; top: 15px; right: 17px; width: 44px; height: 44px; border: 1px solid #cbbf8b; border-radius: 50%; background: transparent; font-size: 26px; color: var(--ink); cursor: pointer; }
.dialog-eyebrow { font: 10px/1.5 Didot,serif; letter-spacing: .18em; color: #998331; }
.dialog-inner h2 { font-size: 27px; font-weight: 400; margin: 23px 0; }
#dialog-copy { font: 14px/2.1 "Hiragino Kaku Gothic ProN",sans-serif; white-space: pre-line; }
.dialog-confirm { padding: 11px 42px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); min-height: 46px; font: inherit; font-size: 14px; cursor: pointer; }
.dialog-confirm:hover { background: var(--yellow); color: var(--ink); }
html.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
.motion-paused [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; }
.motion-paused .hero-art, .motion-paused .hero .giant, .motion-paused .hero-butterfly, .motion-paused .ornament, .motion-paused .drift-petal, .motion-paused .intro-image, .motion-paused .title-band .kanji { translate: none !important; rotate: none !important; }
.motion-paused .title-band .kanji { opacity: 1; filter: none; scale: 1; }
.motion-paused .ornament { --orn-blur: 0em !important; }
.motion-paused .ornaments-footer .ornament { animation: none; opacity: 1; scale: 1; }
.motion-paused .hero-shutters { display: none; }
.motion-paused .site-dialog[open] { animation: none; opacity: 1; transform: none; }
.motion-paused .intro-image { filter: none; }
.tab-hidden .butterfly, .tab-hidden .hero-butterfly, .tab-hidden .drift-petal, .tab-hidden .scroll-cue i::after { animation-play-state: paused !important; }
@keyframes hero-develop { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes text-light { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes footer-flower { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes soft-arrive { from { opacity: 0; filter: blur(6px); transform: translateY(18px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes scroll-line { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(105%); } }
@keyframes loading-rule { 0% { transform: translateX(-100%); } 100% { transform: translateX(105%); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) {
  .js .hero-shutters { width: 180%; height: 100%; aspect-ratio: auto; }
  .butterfly.soft { filter: blur(calc(3px + var(--orn-blur,0em))); }
  .hero-rail { color: var(--paper); text-shadow: 0 1px 7px rgba(48,46,32,.75); }
  .hero-butterfly.one { width: 170px; bottom: -5%; right: -21%; }
  .hero-butterfly.two { width: 84px; left: -12%; top: 32%; }
  .scroll-cue { left: 16%; bottom: 24px; font-size: 7px; }
  .scroll-cue i { height: 34px; }
  .intro-image { opacity: var(--intro-opacity,.23); }
  .motion-toggle { left: 12px; bottom: 13px; min-height: 44px; padding: 8px 12px; font-size: 9px; }
  .dialog-inner { padding: 60px 24px 32px; }
  .dialog-inner h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .hero-art, .hero .giant, .hero-butterfly, .ornament, .intro-image, .title-band .kanji { translate: none !important; }
  .hero-shutters, .opening-screen { display: none !important; }
}
@media print {
  .opening-screen, .hero-shutters, .motion-toggle, .scroll-cue { display: none !important; }
  [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; }
}