/* A meadow doorway, using the site's existing warm paper, green and serif. */
.door-welcome{--look-x:0px;--look-y:0px;--tilt:0deg;position:relative;isolation:isolate;padding:0;min-height:max(660px,calc(100svh - 96px));text-align:left;overflow:hidden;background:#f8f7f3}
.quiet-journey:has(.door-welcome:not([hidden]))>.quiet-topline{position:absolute;top:0;z-index:5;color:#596452;pointer-events:none}
.quiet-journey:has(.door-welcome:not([hidden]))>.quiet-preview-note{position:absolute;z-index:5;bottom:0;margin:0 0 15px;padding:5px 15px;border-radius:20px;color:#555f4e;background:#f8f7f3db;backdrop-filter:blur(9px)}
.door-world{position:absolute;inset:0;z-index:-1;transform-origin:72% 52%;transition:transform 1.8s cubic-bezier(.2,.6,.2,1)}
.door-landscape{position:absolute;inset:-25px;background:url('assets/door-meadow-v6.png') center 61%/cover no-repeat;transform:translate3d(calc(var(--look-x) * -.45),calc(var(--look-y) * -.35),0) scale(1.025);will-change:transform}
.door-air{position:absolute;inset:0;background:linear-gradient(180deg,#f8f7f3 0, #f8f7f3a3 10%,transparent 31%),linear-gradient(90deg,#f8f7f3c9 0%,#f8f7f379 31%,transparent 61%);pointer-events:none}
.door-near-grass{position:absolute;left:-4%;right:-4%;bottom:-20px;height:18%;background:url('assets/door-meadow-v6.png') center bottom/100% auto no-repeat;mask-image:linear-gradient(transparent,#000 65%);filter:blur(2px);transform:translate3d(calc(var(--look-x) * -1.2),calc(var(--look-y) * -.5),0);opacity:.75;pointer-events:none}
.door-copy{position:absolute;left:8%;top:24%;z-index:3;max-width:550px;transition:opacity .55s,transform .8s}
.door-copy .quiet-eyebrow{color:#69715d;font-size:11px;letter-spacing:2px;margin-bottom:25px;display:flex;align-items:center;gap:7px}
.door-copy h1{font-family:var(--serif);font-weight:500;color:#284d32;font-size:clamp(38px,4vw,62px);letter-spacing:1px;line-height:1.5;white-space:nowrap}
.door-copy .quiet-invitation{color:#54624c;font-size:15px;line-height:2.2;margin:20px 0 31px;letter-spacing:.7px}
.door-copy .quiet-start{background:#2b4a33;color:#fffdf6;border-color:#2b4a33;font-size:13px;padding:17px 27px;gap:48px;box-shadow:0 5px 18px #2c4b3212}
.door-copy .quiet-start:hover{background:#3b5941;box-shadow:0 6px 25px #2c4b322b}
.door-instruction{font-size:10px;color:#67735e;letter-spacing:.5px;margin-top:20px;line-height:1.8}
.door-touch-hint{display:none}
.quiet-dialogue h2,.quiet-finish h2{color:#284d32}
.quiet-next{background:#2b4a33;border-color:#2b4a33}
.door-portal{--door-height:clamp(300px,43svh,440px);position:absolute;left:72%;top:48%;width:calc(var(--door-height) * .46);height:var(--door-height);margin:0;padding:0;transform:translate(-50%,-50%) translate3d(var(--look-x),var(--look-y),0);perspective:1200px;overflow:visible;border:0;background:none;outline-offset:18px;cursor:pointer;z-index:2;transition:opacity .7s}
.door-architecture{position:absolute;inset:0;transform:rotateY(calc(-13deg + var(--tilt))) rotateX(1deg);transform-style:preserve-3d;transition:filter .5s;filter:drop-shadow(0 0 25px #fff8df66)}
.door-frame{position:absolute;inset:0;background:#fdfbf3;transform-style:preserve-3d;box-shadow:8px 0 0 #9baba2,9px 0 0 #8e9b91,-2px -2px 0 #ffffff,0 0 25px #fff9e56b;border:9px solid #eeeee5;border-top-color:#fffdf6;border-left-color:#fffdf8;border-bottom-width:8px}
.door-beyond{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 50%,#fffef4 0,#fffcec 53%,#d8e3ce 100%);box-shadow:inset 0 0 20px #fff;overflow:hidden}
.door-beyond:before{content:'';position:absolute;inset:0;background:url('assets/door-meadow-v6.png') 65% 50%/auto 100%;opacity:.14;filter:blur(3px)}
.door-leaf{position:absolute;inset:0;background:linear-gradient(105deg,#fffef9,#f5f2e9 80%,#e9e7df);transform-origin:0% 50%;transform:rotateY(-5deg);transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.25,.65,.2,1);box-shadow:2px 0 3px #56624c45;backface-visibility:visible}
.door-leaf:after{content:'';position:absolute;top:0;bottom:0;right:-4px;width:4px;background:#cacdc2;transform-origin:left;transform:rotateY(90deg)}
.door-inset{position:absolute;inset:14px 11px;border:1px solid #c5c8bc4d;box-shadow:inset 1px 1px 1px #ffffffcc}
.door-handle{position:absolute;right:12%;top:55%;height:26px;width:3px;background:linear-gradient(90deg,#8e8c75,#d0c5a1,#7a806f);border-radius:3px;box-shadow:3px 3px 3px #6a715e33;transform:translateZ(4px)}
.door-sill{position:absolute;bottom:-8px;height:8px;left:-9px;right:-9px;background:linear-gradient(#f8f6e9,#c0c4b1);transform:translateZ(5px)}
.door-shadow{position:absolute;bottom:-13%;left:22%;width:160%;height:28%;background:linear-gradient(100deg,#1e352754,transparent);filter:blur(8px);transform:skewX(48deg) rotate(-10deg);transform-origin:left top;pointer-events:none}
.door-ground-light{position:absolute;bottom:-9%;left:-35%;right:-35%;height:18%;background:radial-gradient(ellipse,#fffadbb3,transparent 70%);filter:blur(10px);opacity:.35;transition:opacity 1s,transform 1.4s}
.door-label{position:absolute;left:50%;bottom:-65px;transform:translateX(-50%);display:flex;gap:20px;align-items:center;white-space:nowrap;color:#fffdf3;font-size:12px;letter-spacing:2px;text-shadow:0 1px 8px #1a2e20;background:#2a432e73;padding:10px 17px;border-radius:24px;backdrop-filter:blur(8px);transition:opacity .3s}
.door-label>span{font-size:18px}
.door-portal:hover .door-leaf,.door-portal:focus-visible .door-leaf{transform:rotateY(-20deg)}
.door-portal:hover .door-architecture,.door-portal:focus-visible .door-architecture{filter:drop-shadow(0 0 35px #fff9dcaa)}
.door-portal:focus-visible{outline:2px solid #2b4a33}
.door-cursor{position:absolute;left:0;top:0;z-index:6;pointer-events:none;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .2s;white-space:nowrap;color:#2b4a33;font-size:11px;letter-spacing:.5px}
.door-cursor>i{width:28px;height:28px;border:1px solid #35573b88;border-radius:50%;background:#fffcf26b}
.door-cursor>span{background:#f8f7f3e6;padding:8px 12px;border-radius:20px;box-shadow:0 2px 15px #274b2e12}
.door-welcome.pointer-near .door-cursor{opacity:1}
.door-welcome.pointer-near .door-label{opacity:0}
.door-bottomline{position:absolute;left:8%;bottom:70px;color:#fffdf5;font-size:12px;letter-spacing:2px;text-shadow:0 1px 8px #203322;transition:opacity .5s}
.door-welcome:after{content:'';position:absolute;inset:0;z-index:7;background:#f7f5ef;opacity:0;pointer-events:none;transition:opacity .65s ease .95s}
.door-welcome.door-opening{pointer-events:none}
.door-opening .door-leaf{transform:rotateY(-108deg)!important}
.door-opening .door-copy{opacity:0;transform:translateY(-12px)}
.door-opening .door-label,.door-opening .door-cursor,.door-opening .door-bottomline{opacity:0!important}
.door-opening .door-ground-light{opacity:1;transform:scale(2.2)}
.door-opening .door-world{transform:scale(1.09)}
.door-opening:after{opacity:1}
.quiet-journey:has(.door-opening)>.quiet-topline,.quiet-journey:has(.door-opening)>.quiet-preview-note{opacity:0;transition:opacity .4s}
@media(max-width:1000px) and (min-width:761px){.door-copy{left:6%;max-width:440px}.door-copy h1{font-size:40px}.door-portal{left:76%;--door-height:340px}.door-copy .quiet-invitation{font-size:14px}}
@media(max-width:760px){
 .door-welcome{min-height:max(710px,calc(100svh - 112px));padding:0}
 .door-copy{left:25px;right:25px;top:83px;max-width:none;text-align:left}
 .door-copy .quiet-eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:10px}
 .door-copy h1{font-size:34px;line-height:1.5;letter-spacing:.3px}
 .door-copy .quiet-invitation{font-size:12px;line-height:1.85;margin:12px 0 16px}
 .door-copy .quiet-start{font-size:12px;padding:12px 20px;gap:30px}
 .door-instruction{font-size:9px;margin-top:13px;max-width:175px}
 .door-landscape{background-position:64% center}
 .door-air{background:linear-gradient(180deg,#f8f7f3 0,#f8f7f3d9 18%,#f8f7f36b 36%,transparent 67%),linear-gradient(90deg,#f8f7f335,transparent 70%)}
 .door-near-grass{background-size:auto 710px;height:20%}
 .door-portal{--door-height:230px;left:65%;top:auto;bottom:112px;transform:translateX(-50%)}
 .door-frame{border-width:7px}.door-inset{inset:10px 7px}.door-handle{height:19px}
 .door-label{font-size:10px;bottom:-45px;gap:13px;padding:6px 12px}
 .door-bottomline{font-size:9px;left:25px;bottom:58px;letter-spacing:1px}
 .quiet-journey:has(.door-welcome:not([hidden]))>.quiet-preview-note{font-size:8px;padding:4px 10px;margin-bottom:13px}
 .door-cursor{display:none}
}
@media(hover:none),(pointer:coarse){.door-cursor,.door-mouse-hint{display:none}.door-touch-hint{display:inline}.door-portal:hover .door-leaf{transform:rotateY(-5deg)}}
@media(prefers-reduced-motion:reduce){.door-world,.door-landscape,.door-near-grass,.door-architecture,.door-leaf,.door-ground-light,.door-copy,.door-welcome:after{transition:none;transform:none}.door-portal{transform:translate(-50%,-50%)}.door-cursor{display:none}.door-opening:after{opacity:1}.door-portal:hover .door-leaf{transform:none}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.door-portal{transform:translateX(-50%)}}

/* v7: reference meadow, moving clouds and a luminous threshold. */
.door-landscape{background-image:url('assets/door-meadow-v7.png');background-position:center 61%}
#doorMeadowCanvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0}
.meadow-ready #doorMeadowCanvas{opacity:1}
.door-air{background:linear-gradient(180deg,#f8f7f350 0,transparent 14%),linear-gradient(90deg,#173c4e24,transparent 65%)}
.door-copy h1{color:#fffef8;text-shadow:0 2px 16px #244a5b17}
.door-copy .quiet-eyebrow,.door-copy .quiet-invitation,.door-instruction{color:#fffef4;text-shadow:0 1px 8px #1f4c6055}
.door-copy .quiet-start{background:#fffdf4;color:#2b4a33;border-color:#fffdf4;box-shadow:0 4px 22px #1a40551a}
.door-copy .quiet-start:hover{background:#fff;box-shadow:0 6px 25px #1a40552b}
.quiet-journey:has(.door-welcome:not([hidden]))>.quiet-topline{color:#fffef4;text-shadow:0 1px 8px #1f4c6077}
.door-architecture{filter:drop-shadow(0 0 25px #fffefa80)}
.door-frame{border-color:#f7f7f1;border-top-color:#fffef9;border-left-color:#fffefa;background:#fff;box-shadow:7px 0 0 #bccbcb,8px 0 0 #a1b4b8,-1px -1px 0 #fff,0 0 35px #fffde666}
.door-leaf{background:#fffffc;box-shadow:0 0 19px #ffffffc9,inset 0 0 30px #fff;transform:rotateY(-2deg)}
.door-inset,.door-handle{display:none}
.door-beyond{background:#fffef8;box-shadow:inset 0 0 25px #fff,0 0 28px #fff9d3}
.door-beyond:before{background:none;opacity:0}
.door-portal:hover .door-leaf,.door-portal:focus-visible .door-leaf{transform:rotateY(-9deg)}
.door-ground-light{opacity:.6;filter:blur(16px)}
.door-shadow{opacity:.65}
.door-label{background:#304a3670}
.door-leaf:before{content:'';position:absolute;inset:-5px;background:radial-gradient(ellipse,#fffef9a6,transparent 76%);filter:blur(15px);animation:door-radiance 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes door-radiance{from{opacity:.45}to{opacity:1}}
.meadow-paused .door-leaf:before{animation-play-state:paused}
@media(max-width:760px){
 .door-landscape{background-position:64% 61%}
 .door-air{background:linear-gradient(180deg,#294a5a1a,transparent 70%)}
 .door-copy .quiet-eyebrow{color:#fffef4}
}
@media(hover:none),(pointer:coarse){.door-portal:hover .door-leaf{transform:rotateY(-2deg)}}
@media(prefers-reduced-motion:reduce){.door-leaf:before{animation:none}.door-portal:hover .door-leaf,.door-leaf{transform:none}}

/* v8: the homepage palette; scene geometry and motion stay the same. */
.door-landscape{background-image:url('assets/door-meadow-v8.png')}
.door-air{background:linear-gradient(180deg,#f8f7f3 0,transparent 13%)}
.door-copy h1{color:#284e2e;text-shadow:none}
.door-copy .quiet-eyebrow{color:#62695b;text-shadow:none}
.door-copy .quiet-invitation,.door-instruction{color:#53594e;text-shadow:none}
.door-copy .quiet-start{background:#292a27;color:#fffefa;border-color:#292a27;box-shadow:none}
.door-copy .quiet-start:hover{background:#344e37;border-color:#344e37;box-shadow:0 5px 20px #284e2e14}
.quiet-journey:has(.door-welcome:not([hidden]))>.quiet-topline{color:#62695b;text-shadow:none}
.door-frame{box-shadow:7px 0 0 #c2cdc0,8px 0 0 #b0beb0,-1px -1px 0 #fff,0 0 35px #fffde666}
@media(max-width:760px){.door-air{background:linear-gradient(180deg,#f8f7f3,transparent 16%)}.door-copy .quiet-eyebrow{color:#62695b}}