.entrance{
  isolation:isolate;
  perspective:1800px;
  background:#120804;
}

/* 扉の向こう側：画像を増やさず、光と奥行きだけで「先の世界」を作る */
.entrance::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,244,196,.96) 0 2%,rgba(255,203,91,.7) 8%,rgba(187,91,17,.34) 24%,transparent 48%),
    radial-gradient(circle at 22% 42%,rgba(255,206,104,.2),transparent 22%),
    radial-gradient(circle at 78% 38%,rgba(255,206,104,.18),transparent 24%),
    linear-gradient(180deg,#2b170c 0%,#5a2d10 42%,#160906 100%);
  opacity:.42;
  transform:scale(.92);
  transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.22,1,.36,1);
}
.entrance.open::after{opacity:1;transform:scale(1.08)}

/* 中央の光。閉じた時は細く、開くと奥から広がる */
.entrance::before{
  content:"";
  position:absolute;
  z-index:1;
  top:-8%;
  bottom:-12%;
  left:50%;
  width:10px;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:.78;
  background:linear-gradient(90deg,transparent,rgba(255,224,134,.98),#fff9d8,rgba(255,193,55,.94),transparent);
  box-shadow:0 0 22px rgba(255,211,103,.85),0 0 58px rgba(255,168,30,.56),0 0 110px rgba(255,125,0,.3);
  filter:blur(.2px);
  animation:doorLightPulse 2.6s ease-in-out infinite;
  transition:width 1.45s cubic-bezier(.22,1,.36,1),opacity .9s ease,box-shadow 1.2s ease;
}
.entrance.open::before{
  width:min(56vw,520px);
  opacity:1;
  box-shadow:0 0 70px rgba(255,235,169,.98),0 0 170px rgba(255,171,40,.8),0 0 280px rgba(255,112,0,.48);
}

.door{
  z-index:2;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  transition:transform 1.8s cubic-bezier(.76,0,.24,1),filter 1.3s ease;
  overflow:hidden;
}
.door::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,214,128,.05),transparent 24%,rgba(0,0,0,.28) 68%,rgba(255,212,118,.08)),
    repeating-linear-gradient(90deg,transparent 0 18%,rgba(255,255,255,.018) 18.4% 18.8%);
  mix-blend-mode:screen;
}
.entrance.open .door-left{transform:translateX(-103%) rotateY(16deg);filter:brightness(.78)}
.entrance.open .door-right{transform:translateX(103%) rotateY(-16deg);filter:brightness(.78)}

.entrance-glow{z-index:1!important;opacity:.18!important;transform:scale(.58)!important;transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.22,1,.36,1)!important}
.entrance.open .entrance-glow{opacity:1!important;transform:scale(2.05)!important}

.entrance-content{
  position:relative;
  z-index:4!important;
  max-width:760px!important;
  padding:22px 18px 30px!important;
  transition:none!important;
}
.entrance.open .entrance-content{opacity:1!important;transform:none!important}

.entrance-logo{
  width:clamp(210px,30vw,320px)!important;
  height:auto!important;
  max-width:68vw!important;
  object-fit:contain!important;
  border-radius:24px!important;
  margin:0 auto 14px!important;
  background:#2a1308;
  box-shadow:0 0 0 1px rgba(240,191,93,.18),0 0 34px rgba(255,194,65,.34),0 18px 46px rgba(0,0,0,.42);
  animation:logoBreathe 4.2s ease-in-out infinite;
  transform-origin:center;
}
.entrance.open .entrance-logo{animation:entranceLogoLift 2.05s cubic-bezier(.22,1,.36,1) both}
.entrance.open .entrance-kicker,
.entrance.open .entrance-content h1,
.entrance.open .entrance-content>p:not(.entrance-kicker),
.entrance.open .entrance-button{animation:entranceCopyAway .55s ease both}

.entrance-kicker{margin-top:-2px!important;color:#f4ce80!important;text-shadow:0 0 16px rgba(244,206,128,.28)}
.entrance-content h1{margin-top:4px!important;margin-bottom:12px!important}
.entrance-content>p:not(.entrance-kicker){margin:0 auto 24px!important;max-width:32em}
.entrance-button{
  width:min(88vw,430px)!important;
  min-height:72px!important;
  padding:18px 32px!important;
  border:1px solid rgba(255,238,190,.95)!important;
  background:linear-gradient(180deg,#ffd989 0%,#e8aa43 52%,#bd741c 100%)!important;
  color:#2a1406!important;
  font-size:clamp(1.18rem,4.8vw,1.48rem)!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  box-shadow:0 0 0 5px rgba(229,177,86,.09),0 18px 54px rgba(224,157,55,.42),inset 0 1px 0 rgba(255,255,255,.72)!important;
  position:relative;
  overflow:hidden;
}
.entrance-button:before{content:"";position:absolute;inset:-2px auto -2px -34%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.82),transparent);transform:skewX(-18deg);animation:buttonSweep 3.6s ease-in-out infinite}

/* クロージング：暗転後にロゴが奥から浮かび上がる */
.complete-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(12,6,3,.08);opacity:0;transition:opacity 1.05s ease,background 1.25s ease;overflow:hidden}.complete-modal[hidden]{display:none}.complete-modal.is-opening{opacity:1;background:rgba(12,6,3,.95)}
.complete-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 18%,rgba(242,187,84,.24),transparent 28%),radial-gradient(circle at 50% 58%,rgba(121,54,17,.2),transparent 50%),linear-gradient(180deg,#120804 0%,#241208 52%,#0b0503 100%)}
.complete-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.complete-particles span{position:absolute;width:5px;height:5px;border-radius:50%;background:#f7d188;box-shadow:0 0 18px rgba(247,209,136,.88);opacity:.12;animation:softFloat 8s ease-in-out infinite}.complete-particles span:nth-child(1){left:12%;top:76%;animation-delay:.2s}.complete-particles span:nth-child(2){left:26%;top:84%;animation-delay:1.3s}.complete-particles span:nth-child(3){left:42%;top:79%;animation-delay:2.1s}.complete-particles span:nth-child(4){left:61%;top:86%;animation-delay:.9s}.complete-particles span:nth-child(5){left:78%;top:81%;animation-delay:1.8s}.complete-particles span:nth-child(6){left:90%;top:74%;animation-delay:2.7s}
.light-shower{display:none!important}
.complete-card.cinematic{position:relative;z-index:2;width:min(720px,100%);max-height:calc(100dvh - 24px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;margin:auto;padding:58px 30px 34px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff8e8;transform:translateY(18px);opacity:0;transition:transform 1.15s cubic-bezier(.22,1,.36,1),opacity 1.15s ease}.complete-modal.is-opening .complete-card.cinematic{transform:translateY(0);opacity:1}
.ending-copy{min-height:240px;display:grid;place-items:center;width:100%;text-align:center;padding:16px 8px}.ending-step{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity 1.05s ease,transform 1.05s ease;width:100%}.ending-step.show{opacity:1;transform:translateY(0)}.ending-step.hide{opacity:0;transform:translateY(-10px)}.ending-copy p{margin:0 auto;max-width:18em;font-size:clamp(1.08rem,4.6vw,1.52rem);line-height:1.9;color:#f5e8d8}.ending-copy strong{display:block;margin-top:.18em;font-size:clamp(1.4rem,5.9vw,2.08rem);font-weight:800;color:#fff7dc;text-shadow:0 0 24px rgba(255,214,125,.18)}
.ending-final{display:none;text-align:center;width:100%;max-width:100%;position:relative;isolation:isolate}.ending-final::before{content:"";position:absolute;z-index:-1;left:50%;top:20%;width:min(72vw,540px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.7);background:radial-gradient(circle,rgba(255,221,139,.3),rgba(206,111,25,.12) 38%,transparent 70%);filter:blur(8px);opacity:0}.ending-final.show{display:block;animation:endingReveal 1.25s ease both}.ending-final.show::before{animation:endingHalo 2s ease .15s both}
.ending-logo{width:clamp(190px,31vw,300px)!important;height:auto!important;max-width:70vw!important;object-fit:contain;margin:0 auto 12px;border-radius:22px!important;background:#2a1308;box-shadow:0 0 0 1px rgba(240,191,93,.16),0 0 28px rgba(255,198,72,.3);opacity:0;transform:translateY(28px) scale(.9)}.ending-final.show .ending-logo{animation:endingLogoRise 1.65s cubic-bezier(.22,1,.36,1) .18s both}
.ending-final .eyebrow{margin:0 0 14px;color:#efc978;letter-spacing:.16em;font-size:clamp(.72rem,3.3vw,.94rem);white-space:normal}.complete-card.cinematic .completion-seal.large{display:none}.ending-final h2{margin:0 auto 14px;max-width:13em;font-size:clamp(1.78rem,6.8vw,3.15rem);line-height:1.36;color:#fffaf0;text-shadow:0 4px 30px rgba(0,0,0,.45)}.ending-final>p:not(.eyebrow):not(.ending-wait){margin:0 auto 26px;max-width:23em;font-size:clamp(.98rem,4vw,1.12rem);line-height:1.84;color:#ead9c7}.ending-final .btn{display:flex;align-items:center;justify-content:center;width:min(100%,540px);min-height:76px;margin:0 auto;padding:19px 30px;border:1px solid rgba(255,244,207,.96);border-radius:999px;background:linear-gradient(180deg,#ffd985 0%,#e4a23a 100%);color:#2c1606;font-size:clamp(1.2rem,4.8vw,1.48rem);font-weight:900;letter-spacing:.06em;box-shadow:0 0 0 6px rgba(224,166,69,.08),0 18px 42px rgba(180,108,24,.35),inset 0 1px 0 rgba(255,255,255,.72);animation:buttonBreathe 3.2s ease-in-out infinite}.ending-return{display:inline-flex;align-items:center;justify-content:center;margin:18px auto 0;padding:10px 18px;border:0;background:transparent;color:#e7bd72;text-decoration:underline;text-underline-offset:6px;font:inherit;cursor:pointer}.ending-wait{margin:14px auto 0!important;max-width:24em;font-size:.78rem!important;line-height:1.7!important;color:#bba38d!important}
.modal-close{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:10;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(224,178,94,.58);border-radius:50%;background:rgba(29,14,8,.9);color:#f3ca79;font-size:2rem;line-height:1;cursor:pointer;opacity:1;pointer-events:auto}
.preview-top-button{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:80;width:54px;height:54px;border-radius:50%;border:1px solid rgba(244,207,128,.92);background:linear-gradient(180deg,rgba(74,38,18,.96),rgba(37,17,8,.98));color:#ffd77f;font-size:1.65rem;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 30px rgba(52,24,8,.3),0 0 0 4px rgba(229,177,86,.09);opacity:0;pointer-events:none;transform:translateY(12px) scale(.94);transition:.25s ease}.preview-top-button.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}

@keyframes softFloat{0%,100%{transform:translateY(0);opacity:.1}50%{transform:translateY(-30px);opacity:.38}}
@keyframes endingReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes buttonBreathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.018);filter:brightness(1.08)}}
@keyframes logoBreathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.012);filter:brightness(1.05)}}
@keyframes buttonSweep{0%,62%{left:-34%;opacity:0}68%{opacity:1}82%{left:112%;opacity:0}100%{left:112%;opacity:0}}
@keyframes doorLightPulse{0%,100%{opacity:.62;filter:brightness(.92)}50%{opacity:1;filter:brightness(1.28)}}
@keyframes entranceCopyAway{to{opacity:0;transform:translateY(10px);filter:blur(4px)}}
@keyframes entranceLogoLift{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-14px) scale(1.07);filter:brightness(1.18)}100%{opacity:0;transform:translateY(-40px) scale(1.18);filter:brightness(1.4) blur(2px)}}
@keyframes endingLogoRise{0%{opacity:0;transform:translateY(28px) scale(.9);filter:blur(5px) brightness(.8)}65%{opacity:1;filter:blur(0) brightness(1.14)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0) brightness(1)}}
@keyframes endingHalo{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

@media(max-width:720px){
  .entrance-logo{width:min(68vw,290px)!important;max-width:68vw!important;margin-bottom:8px!important}
  .entrance-content{padding:18px 14px 28px!important}
  .entrance-content h1{font-size:clamp(2rem,9vw,3.05rem)!important}
  .entrance-content>p:not(.entrance-kicker){font-size:.94rem;line-height:1.75;margin-bottom:20px!important}
  .entrance-button{width:min(90vw,390px)!important;min-height:72px!important}
  .entrance.open::before{width:88vw}
  .complete-modal{padding:8px}
  .complete-card.cinematic{width:100%;max-width:100%;max-height:calc(100dvh - 16px);padding:56px 14px 24px}
  .complete-card.cinematic,.complete-card.cinematic *{box-sizing:border-box;max-width:100%}
  .ending-copy{min-height:215px;padding-inline:0}.ending-copy br{display:none}
  .ending-copy p,.ending-copy strong,.ending-final h2,.ending-final>p:not(.eyebrow):not(.ending-wait),.ending-final .eyebrow,.ending-wait{width:100%;max-width:100%;padding-left:4px;padding-right:4px;white-space:normal;word-break:normal;overflow-wrap:anywhere}
  .ending-copy p{font-size:clamp(1rem,4.6vw,1.3rem)}.ending-copy strong{font-size:clamp(1.3rem,6vw,1.78rem)}
  .ending-logo{width:min(68vw,285px)!important;max-width:68vw!important}
  .ending-final h2 br{display:none}.ending-final h2{font-size:clamp(1.52rem,7vw,2.2rem);line-height:1.42}.ending-final>p:not(.eyebrow):not(.ending-wait){font-size:clamp(.92rem,4vw,1.02rem);line-height:1.78}.ending-final .eyebrow{font-size:.76rem;letter-spacing:.1em}.ending-final .btn{width:100%;min-width:0;min-height:74px;padding-left:18px;padding-right:18px;font-size:1.24rem}.modal-close{width:46px;height:46px;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}
}
@media(max-height:700px){.entrance-logo{width:min(52vw,240px)!important}.complete-card.cinematic{padding-top:50px}.ending-logo{width:min(54vw,250px)!important}.ending-final h2{font-size:1.58rem}.ending-final>p:not(.eyebrow):not(.ending-wait){font-size:.9rem;margin-bottom:18px}.ending-final .btn{min-height:64px}.ending-wait{margin-top:10px!important}}
@media(prefers-reduced-motion:reduce){.complete-modal,.complete-card.cinematic,.ending-step,.door,.entrance::before,.entrance::after{transition-duration:.01ms!important}.complete-particles span,.ending-final .btn,.entrance-logo,.ending-logo,.entrance-button:before,.entrance:before{animation:none!important}}