:root{color-scheme:dark;background:#10100f;--px:0px;--py:0px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Georgia,'Times New Roman',serif}main{position:relative;isolation:isolate;width:100%;height:100svh;overflow:hidden;background:#10100f}
.scene{position:absolute;inset:-1%;transform:translate(var(--px),var(--py)) scale(1.018);transition:transform 1.4s ease-out;will-change:transform}
.wall{position:absolute;inset:0;background:url('https://themethodfiles.com/wp-content/uploads/2026/10/tmf-entrance-wall-optimized.webp') center/cover no-repeat}
.composition{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);height:88svh;width:auto;aspect-ratio:1672/941;overflow:visible}
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.ready .draw{stroke-dashoffset:1;animation:inscribe 1.6s cubic-bezier(.35,0,.25,1) forwards}
.ready .d1{animation-delay:.25s}.ready .d2{animation-delay:1s;animation-duration:1.25s}.ready .d3{animation-delay:1.65s;animation-duration:2s}.ready .d4{animation-delay:2.9s;animation-duration:1.4s}.ready .d5{animation-delay:3.5s;animation-duration:1.5s}
.raking-light{position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 25%,#e7e0cd0a 43%,#e7e0cd14 48%,transparent 65%);mix-blend-mode:soft-light;animation:light 18s ease-in-out infinite alternate;pointer-events:none}
.shade{position:absolute;inset:0;background:linear-gradient(0deg,#08080870,transparent 25%),radial-gradient(ellipse at 47% 42%,transparent 35%,#0003 100%)}
.entry{position:absolute;z-index:2;left:50%;bottom:max(10.5%,35px);transform:translateX(-50%);transition:opacity .6s,transform 1s}
.ready .entry{animation:entry 1.5s 3.2s both}
.enter-button{appearance:none;min-width:210px;height:55px;padding:0 36px;border:1px solid #c0b79e9c;background:#0c0d0bc9;color:#d9d1bd;font:400 17px Georgia,serif;letter-spacing:.19em;cursor:pointer;backdrop-filter:blur(3px);transition:border-color .4s,background .4s,box-shadow .4s;touch-action:manipulation}
.enter-button:hover,.enter-button:focus-visible{background:#201613e8;border-color:#d0b19a;box-shadow:0 0 28px #692a211c}.enter-button:focus-visible{outline:2px solid #c4b8a2;outline-offset:6px}.enter-button:disabled{cursor:default}
.passage{position:absolute;inset:0;pointer-events:none;background:#080808;opacity:0;transition:opacity 1.7s ease-in}
.entering .scene{transform:translate(var(--px),var(--py)) scale(1.16);transition:transform 2.2s ease-in-out}.entering .entry{opacity:0!important;transform:translate(-50%,10px)}.entering .passage{opacity:1;transition-delay:.35s}
@keyframes inscribe{to{stroke-dashoffset:0}}@keyframes light{from{transform:translate(-8%,-2%);opacity:.4}to{transform:translate(9%,2%);opacity:1}}@keyframes entry{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@media(max-aspect-ratio:3/4){.composition{height:min(80svh,172vw);width:auto;top:50%;}.wall{background-position:48% center}.entry{bottom:max(11%,35px)}.enter-button{min-width:180px;height:54px}}
@media(max-height:480px) and (min-aspect-ratio:4/3){.composition{height:105svh;width:auto;top:43%}.entry{bottom:6%}.enter-button{height:44px;min-width:170px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.draw,.ready .draw{stroke-dashoffset:0}.scene{transform:none!important}.entry{opacity:1!important}}


.enter-button{display:flex;align-items:center;justify-content:center;text-decoration:none}.enter-button[aria-busy="true"]{pointer-events:none}

/* Public introduction: readable HTML, with the original artwork and motion. */
.entrance-intro{position:absolute;z-index:2;top:clamp(22px,4.5vh,48px);left:clamp(22px,4vw,64px);max-width:330px;color:#eee8dc;text-shadow:0 2px 12px #000}
.entrance-intro h1{margin:0;font:400 clamp(19px,2vw,26px)/1.3 Georgia,serif;letter-spacing:.035em}
.entrance-subtitle{margin:8px 0 0;color:#d3cabb;font:400 14px/1.55 Georgia,serif}
.entry{bottom:clamp(22px,4svh,44px);width:min(90%,600px);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.entrance-description{margin:0;color:#e1d9ca;font:400 15px/1.65 Georgia,serif;text-shadow:0 2px 12px #000}
.entrance-description a{color:#f0e6d1;text-decoration:underline;text-decoration-color:#bcb29c;text-underline-offset:4px}
.entrance-description a:hover{color:#fff}.entrance-description a:focus-visible{outline:2px solid #e1d9ca;outline-offset:5px}
.shade{background:linear-gradient(0deg,#080808d9,transparent 40%),radial-gradient(ellipse at 47% 42%,transparent 35%,#0003 100%)}
@media(max-width:700px){.entrance-intro{top:24px;left:20px;right:20px;max-width:none;text-align:center}.entrance-intro h1{font-size:21px}.entrance-subtitle{font-size:13px;margin-top:5px}.composition{top:48%;height:min(70svh,155vw)}.entry{gap:13px}.entrance-description{font-size:14px;line-height:1.65}}
@media(max-height:540px) and (min-aspect-ratio:4/3){.entrance-intro{top:18px;left:22px;max-width:230px}.entrance-intro h1{font-size:18px}.entrance-subtitle{font-size:12px}.entry{bottom:16px;gap:8px}.entrance-description{font-size:12px}.composition{height:76svh;top:45%}}
@media(max-height:480px) and (max-aspect-ratio:4/3){html,body{height:auto;overflow-y:auto}main{height:600px;min-height:100svh}.composition{height:380px;top:42%}.entry{bottom:20px}}