/* Shinkan 森閑 — door mechanism prototype Palette (D10): stone grey, ecru, cypress. Doors are pure CSS (no image assets, cf. D13/D16). */ :root { --ink: #23262a; --stone: #b9b8b1; --stone-deep: #6f706b; --ecru: #efebe1; --paper: #f5f1e8; --cypress: #c9a97c; --cypress-deep: #8c6a45; --font-latin: 'Cormorant Garamond', 'Times New Roman', serif; --font-jp: 'Noto Serif JP', 'Hiragino Mincho ProN', serif; --door-ms: 1600ms; --door-ease: cubic-bezier(0.65, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ecru); color: var(--ink); font-family: var(--font-latin); font-size: 1.25rem; line-height: 1.6; } [lang="ja"] { font-family: var(--font-jp); font-weight: 300; } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1rem, 4vw, 2.5rem); font-size: 0.95rem; letter-spacing: 0.06em; mix-blend-mode: normal; } .nav ul { display: flex; gap: clamp(0.75rem, 2.5vw, 1.75rem); margin: 0; padding: 0; list-style: none; } .nav a { color: var(--ink); text-decoration: none; } .nav a:hover, .nav a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; } .nav__brand { font-family: var(--font-jp); font-size: 1.2rem; } @media (max-width: 40rem) { .nav__text { display: none; } } /* ---------- stage ---------- D23: the page never scrolls. Scroll/swipe/keys step from one door to the next. */ html.stage, html.stage body { height: 100%; overflow: hidden; overscroll-behavior: none; } html.stage { scroll-snap-type: none; scroll-behavior: auto; } .stage-root { position: relative; } html.stage .stage-root { position: fixed; inset: 0; touch-action: none; perspective: 1200px; } .room { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 6rem clamp(1.25rem, 6vw, 5rem); overflow: hidden; } .room--plain { background: var(--paper); } html.stage .room { position: absolute; inset: 0; min-height: 0; background: transparent; opacity: 0; visibility: hidden; will-change: transform, opacity; } html.stage .room.is-active { opacity: 1; visibility: visible; z-index: 2; } /* D26/D27: one continuous push-in. The leaving room keeps ONE transform target (scale 1.1) from the moment the doors start closing until it has faded out, so the motion never stops and restarts (no jolt). The next room settles from slightly further away with an ease-out. */ :root { --ease-in-out-soft: cubic-bezier(0.45, 0, 0.35, 1); --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1); } html.stage .room { transition: transform 950ms var(--ease-out-soft), opacity 300ms ease, visibility 0s linear 950ms; } html.stage .room.is-active { transition-delay: 0s; transform: none; } html.stage .room.is-before { transform: scale(1.1); } html.stage .room.is-after { transform: scale(0.9); } /* leaving: start moving the moment the doors begin to close */ html.stage .room[data-leave] { transition: transform 1350ms var(--ease-in-out-soft), opacity 300ms ease; } html.stage .room[data-leave="fwd"] { transform: scale(1.1); } html.stage .room[data-leave="back"] { transform: scale(0.9); } /* internal steps inside a room (the 静 room): same rule, the page still never scrolls */ .steps { display: grid; } .step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 600ms ease, transform 700ms var(--ease-out-soft), visibility 0s linear 600ms; } .step.is-current { opacity: 1; visibility: visible; transform: none; transition-delay: 150ms, 150ms, 0s; } .step h2 { margin-bottom: 1rem; } .step p { margin: 0; } .steps__count { margin: 2rem 0 0; font-size: 0.85rem; letter-spacing: 0.3em; color: var(--stone-deep); } html:not(.stage) .step { opacity: 1; visibility: visible; transform: none; grid-area: auto; margin-bottom: 2rem; } html:not(.stage) .steps__count { display: none; } .room__content { max-width: 38rem; text-align: left; max-height: 100%; overflow-y: auto; } .room--hero .room__content { text-align: center; } .eyebrow { font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-deep); margin: 0 0 1.25rem; } h1, h2 { font-weight: 400; line-height: 1.15; margin: 0 0 1.25rem; } h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); } .mark { font-size: clamp(4.5rem, 16vw, 9rem); letter-spacing: 0.12em; margin: 0 0 0.5rem; padding-left: 0.12em; } .tagline { font-size: clamp(1.4rem, 3vw, 1.9rem); font-style: italic; margin: 0 0 2.5rem; } .note { font-size: 0.95rem; color: var(--stone-deep); margin: 0; } /* ---------- doors (shoji) ---------- D25: discreet realism. Slim cypress frame with a bevel and grain, a solid lower panel (koshi-ita), a fine two-tone kumiko lattice, backlit paper, the kanji printed on the paper itself, and a soft shadow cast on the room. Still pure CSS: no image assets. */ .doors { position: absolute; inset: 0; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; } .door { --frame: clamp(8px, 1.1vw, 14px); --lattice-h: 78%; /* lattice zone; the rest is the solid lower panel */ position: relative; display: flex; align-items: flex-start; background-color: #f3ecdd; background-image: /* backlight: the room behind glows through the paper */ radial-gradient(120% 90% at 50% 38%, rgba(255,246,222,0.95) 0%, rgba(243,232,205,0.55) 55%, rgba(210,190,150,0.35) 100%), /* paper fibre */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.52 0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); border: var(--frame) solid #b8956a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), /* bevel highlight */ inset 3px 3px 6px rgba(70,45,20,0.28), /* paper sits behind the frame */ inset -2px -2px 5px rgba(70,45,20,0.18), 0 0 60px rgba(25,20,12,0.28); /* cast shadow on the room */ will-change: transform; transition: transform var(--door-ms) var(--door-ease), box-shadow var(--door-ms) ease; overflow: hidden; } /* solid lower panel (koshi-ita): wood grain, with a raised rail on top of it */ .door::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: var(--lattice-h); pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(50,30,12,0.10) 0 1px, transparent 1px 9px), linear-gradient(180deg, #a58259, #8a6a42 12%, #7d5f3b); border-top: 8px solid #b99a6c; box-shadow: 0 -2px 6px rgba(50,30,12,0.35); } /* kumiko lattice: fine, two-tone (lit edge + shadow edge) so the bars have thickness. 4 columns x 7 rows over the upper zone, faded out around the kanji / label. */ .door::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--lattice-h); background-image: linear-gradient(to right, transparent calc(100% - 4px), rgba(255,250,235,0.9) calc(100% - 4px) calc(100% - 3px), rgba(120,90,55,0.95) calc(100% - 3px) calc(100% - 1px), rgba(60,38,16,0.35) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 4px), rgba(255,250,235,0.9) calc(100% - 4px) calc(100% - 3px), rgba(120,90,55,0.95) calc(100% - 3px) calc(100% - 1px), rgba(60,38,16,0.35) calc(100% - 1px)); background-size: calc(100% / 4) 100%, 100% calc(100% / 7); filter: drop-shadow(1px 1px 1.5px rgba(60,38,16,0.35)); -webkit-mask-image: radial-gradient(ellipse 34% 26% at var(--seam-x, 100%) 50%, transparent 0 55%, #000 100%); mask-image: radial-gradient(ellipse 34% 26% at var(--seam-x, 100%) 50%, transparent 0 55%, #000 100%); pointer-events: none; } .door--left { justify-content: flex-end; --seam-x: 100%; } .door--right { justify-content: flex-start; --seam-x: 0%; } /* kanji and label: printed on the paper, no box, centred in the lattice zone */ .door__kanji, .door__label { position: absolute; z-index: 1; top: calc(var(--lattice-h) / 2); transform: translateY(-50%); color: rgba(35,38,42,0.86); text-shadow: 0 0 18px rgba(255,248,228,0.9); } .door__kanji { font-size: clamp(3rem, 9vw, 6.5rem); line-height: 1; } /* each kanji sits against the seam, one on each side, so a pair (森 | 閑) reads as one mark */ .door--left .door__kanji { right: clamp(1rem, 4vw, 3rem); } .door--right .door__kanji { left: clamp(1rem, 4vw, 3rem); } .door__label { left: clamp(1rem, 4vw, 3rem); font-size: clamp(0.95rem, 1.8vw, 1.25rem); letter-spacing: 0.32em; text-transform: uppercase; } /* doors close a little faster than they open */ .room:not(.is-open) .door { transition-duration: 850ms; } /* open state */ /* closed by default (translateX 0); .is-open slides them apart */ .room.is-open .door--left { transform: translateX(-100%); } .room.is-open .door--right { transform: translateX(100%); transition-delay: 90ms; } /* ---------- fallbacks ---------- */ html:not(.stage) .doors { display: none; } /* no JS or reduced motion: plain readable page */ html:not(.stage) .room { min-height: 0; } :focus-visible { outline: 2px solid var(--cypress-deep); outline-offset: 4px; } .contact { margin: 1.5rem 0 1rem; font-size: 1.35rem; } .contact a { color: var(--ink); text-underline-offset: 0.3em; } /* ---------- photo background (D40) ---------- Photo 1 sits behind every room. Closed doors are opaque paper, so the photo only appears once they open; a dark veil then fades in with them so the light text stays legible. */ .bg { position: absolute; inset: 0; z-index: 0; background: #14161a center / cover no-repeat; opacity: 0; transition: opacity 1000ms ease; } .bg.is-on { opacity: 1; } .bg[data-bg="base"] { background-image: url("photo/1.jpg"); } .bg[data-bg="spoon"] { background-image: url("photo/spoon.jpg"); background-position: center 62%; } .bg[data-bg="food"] { background-image: url("photo/food.jpg"); } .bg[data-bg="forest"] { background-image: url("photo/forest-web.jpg"); background-position: center 40%; } html:not(.stage) .bg { display: none; } html.stage .room { z-index: 1; } html.stage .room.is-active { z-index: 2; } html.stage .room::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(18, 20, 23, 0); transition: background 1400ms ease; pointer-events: none; } html.stage .room.is-open::before, html.stage .room--plain::before { background: rgba(18, 20, 23, 0.58); } html.stage .room__content { position: relative; z-index: 1; color: var(--paper); } html.stage .eyebrow, html.stage .note, html.stage .steps__count { color: #cfcdc4; } html.stage .contact a { color: var(--paper); } /* nav stays readable on both the paper doors and the dark photo */ html.stage .nav { color: #fff; mix-blend-mode: difference; } html.stage .nav a { color: #fff; } /* ---------- navigation cue (D42) ---------- Thin and quiet, but present in every room: a small line of text and a slender line that slowly drops, so a first-time visitor understands the page moves with a gesture. It reads on both the paper doors and the dark photo (difference blend), and leaves on the last room. */ .cue { position: fixed; left: 50%; bottom: clamp(1rem, 4vh, 2rem); z-index: 25; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 0.6rem; color: #fff; mix-blend-mode: difference; font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: opacity 600ms ease; } html.stage .cue { display: flex; } html.is-last .cue { opacity: 0; } .cue__line { position: relative; width: 1px; height: 2.25rem; background: rgba(255,255,255,0.35); overflow: hidden; } .cue__line::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: #fff; animation: cue-drop 2.4s var(--ease-in-out-soft) infinite; } @keyframes cue-drop { 0% { transform: translateY(-100%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(230%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cue__line::after { animation: none; top: 28%; } } /* ---------- photo credits (D45) ---------- */ .credit { position: fixed; left: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vh, 2rem); z-index: 25; margin: 0; font-size: 0.72rem; letter-spacing: 0.06em; line-height: 1.4; color: #fff; mix-blend-mode: difference; opacity: 0; transition: opacity 700ms ease; display: none; max-width: 40vw; } html.stage .credit { display: block; } html.doors-open .credit { opacity: 0.85; } .credit__item { display: none; } .credit__item.is-on { display: inline; } .credit a { color: inherit; text-underline-offset: 0.2em; } @media (max-width: 40rem) { .credit { max-width: 34vw; font-size: 0.65rem; } } .credits-title { margin-top: 1.75rem; } .credits-list { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: #cfcdc4; } .credits-list a { color: inherit; text-underline-offset: 0.2em; } html:not(.stage) .credits-list { color: var(--stone-deep); } html.stage .room--plain .credits-list { margin-bottom: 0; }