#course-entry[hidden] { display: none; }
#course-entry { position: fixed; inset: 0; z-index: 100; overflow: hidden; isolation: isolate; color: #294b36; }
.is-entering { overflow: hidden; }
.is-entering main.entry { animation: entry-recede 550ms 180ms ease both; }
.entry-veil { position: absolute; inset: 0; background: #fafaf7; opacity: 0; animation: veil-in 300ms 220ms ease both; }
.entry-spark { position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff4ce; box-shadow: 0 0 0 5px #e7bc5826, 0 0 24px 8px #d9aa50a6; animation: spark-to-gate 340ms cubic-bezier(.2,.55,.4,1) both; }
.entry-horizon { position: absolute; inset: 18% -30% -30%; opacity: 0; background: radial-gradient(ellipse at 50% 30%, #f6d9865c 0, #fafaf700 45%); animation: horizon-in 1300ms 250ms ease both; }
.entry-floor { position: absolute; width: 180%; height: 80%; left: -40%; top: 56%; background-image: linear-gradient(#ad9e7726 1px, transparent 1px), linear-gradient(90deg,#ad9e7726 1px,transparent 1px); background-size: 90px 90px; transform-origin: 50% 0; transform: perspective(500px) rotateX(68deg); mask-image: radial-gradient(ellipse at 50% 20%,#0009,transparent 64%); opacity: 0; animation: floor-forward 1350ms 220ms ease both; }
.entry-camera { position: absolute; left: 50%; top: 45%; width: min(680px,84vw); aspect-ratio: 1942 / 809; transform-origin: 50% 67%; transform: translate(-50%,-67%); opacity: 0; animation: enter-gate 1290ms 260ms cubic-bezier(.4,0,.25,1) both; }
.entry-gate-art { position: relative; display: block; z-index: 2; width: 100%; height: 100%; object-fit: contain; }
.entry-door-light { position: absolute; z-index: 0; left: 31%; top: 20%; width: 38%; height: 92%; border-radius: 50%; background: radial-gradient(ellipse,#fff4c4e8,#ecc3624d 37%,transparent 70%); filter: blur(8px); animation: door-radiance 1250ms 300ms ease both; }
.entry-doors { position: absolute; z-index: 1; top: 48%; left: 41.5%; width: 17%; height: 42%; border-radius: 50% 50% 0 0; overflow: hidden; display: flex; perspective: 240px; background: radial-gradient(ellipse at 50% 40%,#fffce9,#f6d17b); }
.entry-doors i { width: 50%; height: 100%; display: block; border: 1px solid #bda96e; background: linear-gradient(90deg,#3b5b40,#496c4d 80%,#284d34); box-shadow: inset 0 0 0 3px #bea55d55; transform-origin: left center; animation: entry-door-left 720ms 650ms ease-in-out both; }
.entry-doors i + i { transform-origin: right center; background: linear-gradient(90deg,#284d34,#496c4d 20%,#3b5b40); animation-name: entry-door-right; }
.entry-motes { position: absolute; inset: 0; opacity: 0; animation: motes-in 1100ms 300ms ease both; }
.entry-motes i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #d5ae50; box-shadow: 0 0 8px 2px #eac97744; animation: mote-rise 1100ms 300ms ease-out both; }
.entry-wash { position: absolute; inset: 0; background: #fafaf7; opacity: 0; animation: wash-through 270ms 1280ms ease both; }
.entry-course { position: absolute; z-index: 3; left: 24px; right: 24px; top: 70%; text-align: center; opacity: 0; animation: course-label 1300ms 250ms ease both; }
#entry-caption { margin: 0 0 10px; font-size: .875rem; line-height: 1.6; color: #7a745f; letter-spacing: .16em; }
#entry-course-name { margin: 0; font-size: clamp(1.5rem,3vw,2.125rem); font-weight: 500; line-height: 1.5; letter-spacing: .06em; color: #294b36; }
.entry-cancel { position: absolute; z-index: 4; bottom: max(22px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; padding: 10px 18px; border: 1px solid #deddd4; border-radius: 30px; background: #fafaf7dd; color: #62665b; font: inherit; font-size: .875rem; cursor: pointer; }
.entry-cancel:hover { background: #fff; border-color: #7e8c75; }
.entry-cancel:focus-visible { outline: 2px solid #5d7b63; outline-offset: 4px; }
#course-entry[data-phase="ready"] .entry-course { opacity: 1; }
@keyframes entry-recede { to { opacity: 0; transform: scale(.96); filter: blur(2px); } }
@keyframes veil-in { to { opacity: 1; } }
@keyframes spark-to-gate { 0% { opacity: 0; transform: translate(var(--spark-x),var(--spark-y)) scale(.6); } 12% { opacity: 1; } 48% { opacity: 1; transform: translate(var(--bend-x),var(--bend-y)) scale(.9); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--gate-x),var(--gate-y)) scale(1.8); } }
@keyframes horizon-in { 15%,65% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes floor-forward { 15%,70% { opacity: .55; } 100% { opacity: 0; transform: perspective(500px) rotateX(68deg) translateY(130px); } }
@keyframes enter-gate { 0% { opacity: 0; transform: translate(-50%,-67%) scale(.24); } 20% { opacity: 1; transform: translate(-50%,-67%) scale(.78); } 59% { opacity: 1; transform: translate(-50%,-67%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-67%) scale(13); } }
@keyframes door-radiance { 0% { opacity: 0; } 20%,100% { opacity: 1; transform: scale(1.15); } }
@keyframes entry-door-left { 0%,10% { transform: rotateY(0); } 85%,100% { transform: rotateY(-84deg); } }
@keyframes entry-door-right { 0%,10% { transform: rotateY(0); } 85%,100% { transform: rotateY(84deg); } }
@keyframes motes-in { 20%,55% { opacity: .7; } 100% { opacity: 0; } }
@keyframes mote-rise { to { transform: translateY(-28px); } }
@keyframes wash-through { to { opacity: 1; } }
@keyframes course-label { 18%,100% { opacity: 1; } }
#course-entry.is-reduced *, #course-entry.is-reduced *::before, #course-entry.is-reduced *::after { animation: none !important; transition: none !important; }
#course-entry.is-reduced .entry-veil, #course-entry.is-reduced .entry-wash, #course-entry.is-reduced .entry-course { opacity: 1; }
#course-entry.is-reduced .entry-camera, #course-entry.is-reduced .entry-spark, #course-entry.is-reduced .entry-floor, #course-entry.is-reduced .entry-motes, #course-entry.is-reduced .entry-horizon { display: none; }
@media (prefers-reduced-motion: reduce) { .is-entering main.entry, #course-entry * { animation: none !important; transition: none !important; } }
@media (max-width: 600px) { .entry-camera { width: 92vw; top: 42%; } .entry-course { top: 65%; } #entry-course-name { font-size: 1.5rem; } .entry-floor { background-size: 60px 60px; } }
@media (max-height: 500px) and (min-width: 601px) { .entry-camera { width: min(500px,65vw); top: 43%; } .entry-course { top: 67%; } #entry-caption { margin-bottom: 2px; font-size: .75rem; } #entry-course-name { font-size: 1.25rem; } .entry-cancel { bottom: 8px; min-height: 36px; padding: 6px 16px; } }