/* 七弐八製麺 — rigid washi doors. Load after washi-cinema.css.
 * One clock on .intro-active: ink 120, seal 650, open 1000–2050 ms.
 * Each door clips its own duplicate mark; nothing floats across the opening. */
:root {
  --door-logo-width: clamp(220px, 30vw, 360px);
  --door-frame: clamp(5px, .6vw, 9px);
  --door-cell: clamp(68px, 9vw, 138px);
  --door-paper-color: #f5eddd;
}
/* Use the restored 1239px original as both content and a luminance mask.
 * Its black paper disappears in the UI without repainting or changing strokes.
 * The original asset stays intact for exact-brand editing and export. */
:is(.door-brush-logo, .hero-brush-logo, .navigation-brush, .brand-logo) {
  -webkit-mask-image: url('/assets/logo-hd.webp');
  mask-image: url('/assets/logo-hd.webp');
  mask-mode: luminance;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#curtain, #curtain * { pointer-events: none; }
#curtain .curtain-panel {
  position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden;
  box-sizing: border-box; border: 0; border-radius: 0; color: #2b211b;
  background: #94714f var(--wood-grain) center / 190px auto repeat;
  box-shadow: inset 0 0 0 1px rgb(66 42 22 / 35%), 0 0 22px rgb(43 33 27 / 18%);
  clip-path: none; transform-origin: center; backface-visibility: hidden;
}
#curtain .curtain-left { left: 0; right: auto; }
#curtain .curtain-right { right: 0; left: auto; }
#curtain .door-paper {
  position: absolute; z-index: 0; inset: var(--door-frame); display: block;
  background: radial-gradient(ellipse at 50% 40%, #fffaf0, var(--door-paper-color) 76%);
  box-shadow: inset 0 0 16px rgb(117 88 53 / 10%);
}
/* Upper and lower shoji lattice leave the entire calligraphic centre clear. */
#curtain .door-paper::before, #curtain .door-paper::after {
  position: absolute; left: 0; right: 0; content: "";
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--door-cell) - 3px), #b0926d calc(var(--door-cell) - 3px) var(--door-cell)),
    repeating-linear-gradient(0deg, #aa8962 0 3px, transparent 3px 64px);
  box-shadow: 0 1px 0 rgb(255 250 239 / 65%);
}
#curtain .door-paper::before { top: 0; bottom: calc(50% + var(--door-logo-width) * .62); }
#curtain .door-paper::after { top: calc(50% + var(--door-logo-width) * .65); bottom: 7%; }
#curtain .curtain-panel::before {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 4%;
  height: clamp(9px, 1.6vh, 16px); content: "";
  background: #94714f var(--wood-grain) center / 400px auto repeat-x;
  box-shadow: 0 -3px 0 rgb(177 146 107 / 35%), 0 2px 3px rgb(79 54 29 / 14%);
}
#curtain .curtain-panel::after {
  position: absolute; z-index: 1; inset: var(--door-frame); content: "";
  background: var(--reed-grain) center / 380px auto repeat;
  opacity: .035; mix-blend-mode: multiply;
}
#curtain .curtain-post {
  width: var(--door-frame); border-radius: 0;
  background: #94714f var(--wood-grain) center / auto 420px repeat-y;
  box-shadow: inset 1px 0 rgb(255 245 222 / 35%), inset -1px 0 rgb(43 33 27 / 26%);
}
#curtain .curtain-mark {
  position: absolute; z-index: 2; top: 50%; bottom: auto;
  width: var(--door-logo-width); height: auto; aspect-ratio: 488 / 500;
  margin: 0; padding: 0; opacity: 1; transform: translateY(-50%);
  background: none; filter: none; mix-blend-mode: normal;
}
#curtain .curtain-left .curtain-mark { left: auto; right: calc(var(--door-logo-width) / -2); }
#curtain .curtain-right .curtain-mark { right: auto; left: calc(var(--door-logo-width) / -2); }
#curtain .curtain-mark > .door-brush-logo {
  position: relative; display: block; width: 100%; height: auto;
  max-width: none; aspect-ratio: 488 / 500; object-fit: contain;
  filter: brightness(0); mix-blend-mode: normal;
  opacity: 0; clip-path: inset(0 100% 0 0); transform-origin: 50% 52%;
}
#curtain .curtain-mark > .door-seal {
  position: absolute; right: -5%; bottom: -2%; display: block;
  width: 23%; height: auto; max-width: none; object-fit: contain;
  filter: none; mix-blend-mode: multiply; opacity: 0; transform-origin: center;
}
/* The door stamp replaces all floating trace, ink-wash and second-impact acts. */
#intro-trace, #intro-caption, #ink-transition {
  display: none !important; visibility: hidden !important; animation: none !important;
}
.hero .hero-brand-stamp, .hero .hero-brand-stamp * {
  animation: none !important; transition: none !important; transform: none !important;
}
body.intro-active:not(.stamp-ready) .hero .hero-brand-stamp:not(.stamp-ready) {
  opacity: 0; visibility: hidden;
}
.hero .hero-brand-stamp.stamp-ready, body.stamp-ready .hero .hero-brand-stamp,
body.intro-done .hero .hero-brand-stamp { opacity: 1; visibility: visible; }
.hero .hero-brush-logo {
  clip-path: none; opacity: 1;
  filter: drop-shadow(0 1px 2px rgb(20 20 20 / 90%));
}
.hero .hero-stamp-seal { opacity: 1; clip-path: none; }
.intro-skip, body.intro-active .intro-skip {
  min-width: 44px; min-height: 44px; padding: 10px 16px;
  color: #fff8eb; background: rgb(43 33 27 / 94%);
  border: 1px solid #f2e9d8; box-shadow: 0 2px 12px rgb(43 33 27 / 20%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: auto;
}
.intro-skip:focus-visible { outline: 3px solid #a63428; outline-offset: 4px; }
/* Full-brightness food: only the copy has local, neutral-charcoal support. */
.hero #hero-video, .hero .screen-two video, .hero-side-panels video,
#curtain .entrance-cut :is(img, .entry-live-video) {
  filter: brightness(1.06) saturate(1.02); opacity: 1;
}
.hero-side-panels video {
  position: absolute; top: 0; bottom: 0; display: block;
  width: 24%; height: 100%; object-fit: cover; object-position: center;
  pointer-events: none;
}
.hero-side-panels .hero-side-left { left: 0; }
.hero-side-panels .hero-side-right { right: 0; }
#curtain .entrance-scene::after { background: none; }
.hero .hero-video-shade {
  background: radial-gradient(ellipse 31% 37% at 50% 49%, rgb(24 24 24 / 36%), rgb(24 24 24 / 25%) 44%, transparent 100%);
}
.hero .hero-steam, .hero .hero-exposure { display: none; animation: none !important; }
.hero .hero-copy { text-shadow: 0 2px 5px rgb(16 16 16 / 85%); }
.hero #hero-title {
  text-shadow: 0 2px 4px rgb(16 16 16 / 95%), 0 3px 14px rgb(16 16 16 / 68%);
}
.hero .hero-travel-note {
  padding: 6px 14px;
  background: radial-gradient(ellipse at center, rgb(25 25 25 / 72%) 0%, rgb(25 25 25 / 55%) 62%, transparent 100%);
  text-shadow: 0 1px 3px rgb(16 16 16 / 95%);
}
@media (max-width: 759px) {
  :root { --door-logo-width: clamp(220px, 60vw, 260px); --door-cell: 72px; }
  .hero-side-panels { display: none; }
  .hero .hero-video-shade {
    background: radial-gradient(ellipse 58% 32% at 50% 47%, rgb(24 24 24 / 36%), transparent 100%);
  }
  .hero .hero-travel-note { padding: 6px 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) body.intro-active #curtain {
    animation: fusuma-clear 100ms linear 2050ms both;
  }
  html:not([data-motion="off"]) body.intro-active #curtain .curtain-left {
    animation: fusuma-left 1050ms cubic-bezier(.4, 0, .2, 1) 1000ms both;
  }
  html:not([data-motion="off"]) body.intro-active #curtain .curtain-right {
    animation: fusuma-right 1050ms cubic-bezier(.4, 0, .2, 1) 1000ms both;
  }
  html:not([data-motion="off"]) body.intro-active #curtain .door-brush-logo {
    animation: fusuma-ink 500ms cubic-bezier(.2, .65, .3, 1) 120ms both;
  }
  html:not([data-motion="off"]) body.intro-active #curtain .door-seal {
    animation: fusuma-seal 220ms cubic-bezier(.22, 1, .36, 1) 650ms both;
  }
  html:not([data-motion="off"]) body.intro-active .hero-copy {
    animation: fusuma-copy 350ms ease 2000ms both;
  }
}
@keyframes fusuma-ink {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(1.08); }
  16% { opacity: 1; }
  70% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(.985); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes fusuma-seal {
  0% { opacity: 0; transform: scale(1.2); }
  55% { opacity: 1; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fusuma-left { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes fusuma-right { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes fusuma-clear { from { opacity: 1; } to { opacity: 0; } }
@keyframes fusuma-copy { from { opacity: 0; } to { opacity: 1; } }
/* Hidden wins over every display rule; neither door can capture an input. */
#curtain[hidden], .intro-skip[hidden], .hero .hero-brand-stamp[hidden] { display: none !important; }
html[data-motion="off"] #curtain { display: none !important; animation: none !important; }
html[data-motion="off"] .hero-copy { opacity: 1 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #curtain { display: none !important; animation: none !important; }
  .hero-copy { opacity: 1 !important; animation: none !important; }
}