/* Premium first-load sequence for the compass intro */
.entry-brand{top:4.5vh;animation:entryBrandIn .8s ease-out .1s both}
.entry-kicker{top:calc(4.5vh + 78px);animation:entryFadeUp .7s ease-out .55s both}
.entry:before{transform-origin:right;animation:entryLineLeft 1.15s cubic-bezier(.2,.75,.2,1) .35s both}
.entry:after{transform-origin:right;animation:entryLineRight 1.15s cubic-bezier(.2,.75,.2,1) .35s both}
.entry-axis{transform-origin:center;animation:entryAxisIn 1.25s cubic-bezier(.2,.75,.2,1) .25s both}
.compass-wrap{animation:entryCompassIn 1.05s cubic-bezier(.16,.8,.22,1) .65s both}
.ticks{animation:entryTicksIn 1.1s cubic-bezier(.2,.75,.2,1) 1s both}
.compass:before,.compass:after,.cardinals b{animation:entryMarkIn .55s ease-out 1.4s both}
.needle{animation:entryNeedleIn .75s cubic-bezier(.2,.75,.2,1) 1.35s both}
.compass-core{animation:entryCoreIn .65s ease-out 1.55s both}
.bearing{animation:entryFadeUp .55s ease-out 1.65s both}

@keyframes entryLineLeft{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes entryLineRight{from{opacity:0;transform:rotate(180deg) scaleX(0)}to{opacity:1;transform:rotate(180deg) scaleX(1)}}
@keyframes entryAxisIn{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@keyframes entryCompassIn{from{opacity:0;transform:scale(.58) rotate(-55deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes entryTicksIn{from{opacity:0;transform:rotate(-90deg) scale(.72)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes entryNeedleIn{from{opacity:0;transform:scale(.25) rotate(-35deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes entryCoreIn{from{opacity:0;transform:translate(-50%,-50%) scale(.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes entryMarkIn{from{opacity:0}to{opacity:1}}
@keyframes entryBrandIn{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes entryFadeUp{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

@media(max-width:540px){
  .entry-brand{top:3.5vh}
  .entry-kicker{top:calc(3.5vh + 62px)}
}

@media(prefers-reduced-motion:reduce){
  .entry:before,.entry:after,.entry-brand,.entry-kicker,.entry-axis,.compass-wrap,.compass:before,.compass:after,.ticks,.cardinals b,.needle,.compass-core,.bearing{animation:none}
}

/* Premium entry action */
.enter-button{
  isolation:isolate;
  overflow:hidden;
  min-width:252px;
  min-height:68px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.72rem .78rem .72rem 1.65rem;
  border:1px solid rgba(184,211,229,.42);
  border-radius:2px;
  background:linear-gradient(135deg,rgba(157,195,219,.11),rgba(11,28,47,.3) 58%,rgba(53,83,105,.14));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 18px 50px rgba(0,0,0,.22),0 0 36px rgba(74,137,178,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:entryFadeUp .75s cubic-bezier(.16,.8,.22,1) 1.7s both;
  transition:border-color .45s ease,background .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.16,.8,.22,1),color .45s ease;
}
.enter-button:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:5px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}
.enter-button:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-80%;
  bottom:-80%;
  left:-38%;
  width:28%;
  background:linear-gradient(90deg,transparent,rgba(218,239,250,.2),transparent);
  transform:skewX(-22deg);
  animation:entryButtonShine 4.8s ease-in-out 2.2s infinite;
  pointer-events:none;
}
.enter-button span{position:relative;font-size:.68rem;letter-spacing:.22em}
.enter-button span:after{content:"";position:absolute;left:0;right:.22em;bottom:-7px;height:1px;background:#79a9ff;transform:scaleX(.18);transform-origin:left;opacity:.72;transition:transform .45s ease}
.enter-button b{
  width:37px;
  height:37px;
  margin:0;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(164,199,222,.34);
  border-radius:50%;
  background:rgba(106,143,255,.1);
  color:#b9ceff;
  font-size:.8rem;
  box-shadow:inset 0 0 16px rgba(112,151,255,.08);
  transition:transform .45s cubic-bezier(.16,.8,.22,1),background .45s ease,border-color .45s ease;
}
.enter-button:hover,.enter-button:focus-visible{
  color:#fff;
  border-color:rgba(190,220,240,.72);
  background:linear-gradient(135deg,rgba(140,186,216,.2),rgba(15,37,60,.55));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 22px 65px rgba(0,0,0,.3),0 0 42px rgba(88,142,255,.13);
  transform:translateY(-3px);
}
.enter-button:hover span:after,.enter-button:focus-visible span:after{transform:scaleX(1)}
.enter-button:hover b,.enter-button:focus-visible b{transform:translateY(3px);background:rgba(111,151,255,.2);border-color:rgba(182,209,255,.58)}

@keyframes entryButtonShine{0%,60%{left:-38%;opacity:0}70%{opacity:1}88%,100%{left:118%;opacity:0}}

@media(max-width:540px){.enter-button{min-width:220px;min-height:62px;padding:.65rem .7rem .65rem 1.35rem}.enter-button b{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.enter-button,.enter-button:after{animation:none}}

/* Contact details remain clear of the compass, entry button and coordinates. */
.entry-contact{position:absolute;z-index:2;left:4vw;bottom:5vh;display:flex;flex-direction:column;gap:10px;text-align:left;animation:entryFadeUp .8s ease-out 1.2s both}
.entry-contact a{color:#cbdbe7;font:500 14px/1.45 Inter,sans-serif;text-decoration:none;letter-spacing:.02em;transition:color .3s}.entry-contact a:hover{color:#fff}.entry-contact a:focus-visible{outline:1px solid #8baeff;outline-offset:5px}
@media(max-width:800px){.entry-contact{left:50%;transform:translateX(-50%);bottom:3vh;flex-direction:row;justify-content:center;gap:8px 20px;flex-wrap:wrap;width:90%;text-align:center;animation:none}.entry .coordinates{bottom:calc(3vh + 65px)}.entry .entry-hint{display:none}}
@media(max-height:650px) and (max-width:800px){.entry .compass-wrap{width:220px;height:220px}.entry .compass{width:172px;height:172px}.entry .enter-button{top:calc(50% + 112px);min-height:48px}.entry .coordinates{font-size:10px;bottom:calc(3vh + 54px)}.entry-contact a{font-size:12px}.entry-contact{gap:5px 18px}}
@media(prefers-reduced-motion:reduce){.entry-contact{animation:none}}