/* A single shrine entrance. The form sits in the opening of the torii. */
.torii-page {
  min-height:100svh;
  overflow-x:clip;
  background-color:#f7f3eb;
  background-image:radial-gradient(ellipse at 50% 58%,#fffdf5 0%,transparent 63%),radial-gradient(rgba(90,74,44,.045) .6px,transparent .6px);
  background-size:auto,5px 5px;
}
.entry-brand { display:flex; align-items:center; gap:11px; padding:25px 40px 0; color:#354e42; font-family:var(--serif); font-size:21px; letter-spacing:.2em; }
.entry-seal { display:grid; place-items:center; width:30px; height:35px; border:1px solid #a44936; color:#a44936; border-radius:12px 12px 2px 2px; font-size:20px; padding-left:.2em; }
.shrine-entry { width:min(820px,100%); margin:12px auto 0; padding:0 20px; text-align:center; }
#welcome-title { margin:0 0 19px; color:#354c40; font-family:var(--serif); font-size:clamp(22px,2.7vw,32px); line-height:1.7; font-weight:500; letter-spacing:.09em; }
#welcome-title > span { display:block; white-space:nowrap; }
.gate-scene { width:100%; max-width:710px; min-height:590px; position:relative; isolation:isolate; margin:0 auto; padding:219px 0 86px; }
.torii { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.torii-crown { position:absolute; top:0; left:0; width:100%; height:590px; z-index:2; pointer-events:none; }
.gate-light { position:absolute; left:20%; right:20%; top:30%; bottom:10%; background:radial-gradient(ellipse,#fffdf6 15%,#fffaf0a8 55%,transparent 75%); z-index:0; pointer-events:none; }
.gate-plaque { position:absolute; z-index:2; top:66px; left:50%; transform:translateX(-50%); width:46px; height:67px; display:grid; place-items:center; padding:3px; color:#d3bc87; background:#405146; border:3px solid #b89864; box-shadow:0 0 0 2px #743b2c; font-family:var(--serif); font-size:27px; }
.approach-path { position:absolute; z-index:-1; inset:60% 0 -35px; background:repeating-linear-gradient(to bottom,transparent 0,transparent 45px,#f8f5edcc 45px,#f8f5edcc 48px),linear-gradient(90deg,#d9d7c933,#d1d0c099 50%,#d9d7c933); clip-path:polygon(38% 0,62% 0,89% 100%,11% 100%); pointer-events:none; }
.entry-form { position:relative; z-index:3; width:min(320px,65%); margin:0 auto; text-align:left; }
.entry-form h2 { font-family:var(--serif); color:#63715d; font-size:19px; font-weight:500; letter-spacing:.24em; text-align:center; margin:0 0 24px; }
.entry-form label { display:block; font-size:11px; font-weight:500; letter-spacing:.07em; color:#777562; margin:0 0 8px; }
.entry-form input { display:block; width:100%; padding:13px 14px; height:48px; border:1px solid #cfc7b5; border-radius:4px; background:#fffdf7ed; font-size:16px; box-shadow:0 2px 8px #8b704008; }
.entry-form input::placeholder { color:#b2a894; font-size:13px; }
.entry-form input:focus { outline:2px solid #bf957063; outline-offset:2px; border-color:#a86a48; }
#pw-block { margin-top:18px; }
#pw-hint { font-size:10px; line-height:1.75; margin-top:7px; }
.entry-form .error-text { line-height:1.7; margin:12px 0 0; font-size:11px; }
.entry-form .error-text:empty { display:none; }
#login-btn { width:100%; justify-content:center; gap:35px; min-height:49px; border-radius:4px; background:#a84a36; margin-top:22px; padding:13px 18px; font-weight:500; font-size:14px; letter-spacing:.1em; box-shadow:0 4px 14px #7f36121a; }
#login-btn:hover { background:#903d2d; }
#login-btn:focus-visible { outline:3px solid #b99954; outline-offset:4px; }
#login-btn:disabled { opacity:.65; cursor:wait; }
.entry-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.gate-scene,.shrine-entry>h1 { transition:transform .65s cubic-bezier(.35,0,.3,1),opacity .65s; transform-origin:50% 58%; }
.is-entering .gate-scene { transform:scale(1.15); opacity:0; pointer-events:none; }
.is-entering .shrine-entry>h1 { transform:translateY(-10px); opacity:0; }
@media (max-width:760px) {
  .entry-brand { padding:21px 23px 0; font-size:18px; gap:9px; }
  .entry-seal { width:26px; height:31px; font-size:18px; }
  .shrine-entry { margin-top:29px; padding:0 12px; }
  #welcome-title { font-size:clamp(20px,5.4vw,29px); line-height:1.75; letter-spacing:.055em; margin-bottom:18px; }
  .gate-scene { max-width:500px; padding-top:182px; min-height:480px; padding-bottom:82px; }
  .torii-crown { height:480px; }
  .gate-plaque { top:53px; width:35px; height:54px; font-size:23px; border-width:2px; }
  .entry-form { width:65%; max-width:300px; }
  .entry-form h2 { font-size:17px; margin-bottom:19px; }
  .entry-form label { font-size:10px; }
  .entry-form input { height:45px; padding:11px; }
  #pw-block { margin-top:15px; }
  #login-btn { min-height:47px; margin-top:19px; font-size:13px; gap:20px; padding:12px 10px; }
  .approach-path { bottom:-24px; }
}
@media (max-height:740px) and (min-width:761px) {
  .entry-brand { padding-top:18px; }
  .shrine-entry { margin-top:0; }
  #welcome-title { font-size:27px; margin-bottom:5px; }
  .gate-scene { padding-top:183px; min-height:505px; padding-bottom:60px; }
  .torii-crown { height:505px; }
  .gate-plaque { top:53px; height:58px; }
  .entry-form h2 { margin-bottom:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .gate-scene,.shrine-entry>h1 { transition:none; }
  .is-entering .gate-scene,.is-entering .shrine-entry>h1 { transform:none; opacity:1; }
}