/* The front door (templates/town.html): the island with the live world's glass
   menu over it, then the live-island entrance and what the shop is. The glass
   itself (.island-glass, .island-dock, .island-destination) is town-glass.css,
   shared with /world, so both places look like the same island. */

.front{position:relative;height:max(560px,calc(100svh - 108px));overflow:hidden;
  container-type:size;background:#d7e8e4;isolation:isolate}
/* The stage keeps the still's own shape and covers the hero, so a pin placed
   at the district's position in the render stays on that building. */
.front-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  aspect-ratio:16/9;width:max(100cqw,177.78cqh);z-index:0}
.front-stage picture,.front-still{display:block;width:100%;height:100%}
.front-still{object-fit:cover}

.front-pin{--x:var(--lx);--y:var(--ly);position:absolute;left:var(--x);top:var(--y);z-index:2;
  transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--glass-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.front-pin-name{display:flex;align-items:center;gap:6px;min-height:34px;padding:7px 12px;border-radius:13px;
  font:700 13px/1.1 Fredoka,Nunito,system-ui;white-space:nowrap;
  background:rgba(249,253,246,.62);border:1px solid rgba(255,255,248,.9);
  box-shadow:0 4px 16px rgba(16,45,37,.16);backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3);
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s}
.front-pin-name i{display:none;font-style:normal;font-weight:800;font-size:11px;color:#2f5d46}
.front-pin-dot{width:12px;height:12px;border-radius:50%;background:#f9fdf6;border:2px solid #244834;
  box-shadow:0 0 0 5px rgba(249,253,246,.35);order:2}
.front-pin.is-crown .front-pin-name{background:rgba(141,38,25,.72);border-color:rgba(255,228,210,.85);color:#fff8f2}
.front-pin.is-crown .front-pin-dot{border-color:#8d2619}
.front-pin:hover .front-pin-name,.front-pin.is-open .front-pin-name{transform:translateY(-3px);background:rgba(249,253,246,.86)}
.front-pin.is-crown:hover .front-pin-name,.front-pin.is-crown.is-open .front-pin-name{background:rgba(141,38,25,.86)}
.front-pin.is-open .front-pin-name i{display:inline}
.front-pin.is-crown .front-pin-name i{color:#ffe1d2}

.front-title{position:absolute;z-index:3;top:22px;left:24px;max-width:400px;padding:18px 22px 16px;border-radius:24px}
.front-title small{display:block;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--glass-muted)}
.front-title h1{margin:6px 0 10px;font-size:clamp(26px,3vw,40px);line-height:1.04;letter-spacing:-.025em;color:var(--glass-ink)}
.front-enter{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:800;
  color:#244834;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

.front-bottom{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 24px)}
.front .island-dock{position:static;transform:none;max-width:100%}
.front .island-destination small{display:block;margin-top:-3px;font-size:10.5px;font-weight:700;color:var(--glass-muted)}
.front-more{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 14px 7px 16px;border-radius:100px;
  font-size:12px;font-weight:800;color:var(--glass-ink);text-decoration:none}
.front-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  animation:front-nudge 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes front-nudge{0%,60%,100%{transform:none}30%{transform:translateY(3px)}}

/* Below the island: the live world's door, beside what the shop is. */
.front-intro{max-width:1360px;margin:30px auto 8px;padding:0 28px;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:26px;align-items:center;scroll-margin-top:120px}
.front-live{position:relative;display:block;border-radius:28px;overflow:hidden;aspect-ratio:16/10;
  background:#cfe3e6;box-shadow:0 18px 50px #2b5a4626;color:#fff;text-decoration:none}
.front-live img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.front-live:hover img{transform:scale(1.035)}
.front-live-copy{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:5px;
  padding:16px 18px;border-radius:20px;background:rgba(23,56,47,.62);border:1px solid rgba(255,255,248,.35);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);color:#f4f9f1}
.front-live-copy b{font:700 clamp(22px,2.4vw,30px)/1.1 Fredoka,Nunito,system-ui;letter-spacing:-.02em}
.front-live-copy>span{font-size:14px;line-height:1.45;font-weight:600;color:#dbe9df}
.front-live-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px!important;font-weight:900!important;
  letter-spacing:.1em;text-transform:uppercase;color:#cfe6d6!important}
.front-live-kicker i{width:8px;height:8px;border-radius:50%;background:#7fe0a0;box-shadow:0 0 0 4px #7fe0a033;animation:front-live 2s ease-in-out infinite}
@keyframes front-live{50%{opacity:.35}}
.front-live-go{margin-top:6px;align-self:flex-start;padding:9px 16px;border-radius:100px;background:#f4f9f1;
  color:#17382f!important;font-weight:800!important;font-size:14px!important}
.front-answer .eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#647668}
.front-answer .home-answer{max-width:64ch;margin:10px 0 18px;color:#36554a;font-size:16px;line-height:1.62;font-weight:600}
.front-proofs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.front-proofs li{padding:13px 15px;border-radius:16px;background:#fcfdf7;border:1px solid #d6dfcf;
  font-size:13px;line-height:1.45;font-weight:600;color:#53665a}
.front-proofs b{display:block;font:600 15px/1.25 Fredoka,Nunito,system-ui;color:#213b32;margin-bottom:2px}
.front :is(a,button):focus-visible,.front-intro a:focus-visible{outline:3px solid #254f46;outline-offset:4px}

/* Phones and portrait tablets: the portrait still, the world's 3x2 dock,
   and pins that name their building on the first tap (town-landing.js). */
@media (orientation:portrait){
  .front-stage{aspect-ratio:39/70;width:max(100cqw,55.71cqh)}
  .front-pin{--x:var(--px);--y:var(--py)}
  .front-pin:not(.is-crown):not(.is-open):not(:hover) .front-pin-name{opacity:0;transform:translateY(6px) scale(.92);pointer-events:none}
  .front-pin-name{transition:opacity .2s,transform .25s cubic-bezier(.22,1,.36,1),background .2s}
  .front-pin::before{content:'';position:absolute;left:50%;bottom:-14px;width:44px;height:44px;transform:translateX(-50%)}
}
@media (max-width:700px){
  .front-title{top:14px;left:14px;right:14px;max-width:none;padding:13px 16px 10px;border-radius:20px}
  .front-title h1{font-size:25px;margin:4px 0 4px}
  .front-enter{min-height:38px;font-size:13px}
  .front-bottom{bottom:14px;width:calc(100% - 24px)}
  .front .island-dock{width:100%}
  .front .island-destination{min-height:70px}
  .front-intro{grid-template-columns:1fr;padding:0 14px;margin-top:22px;gap:18px}
  .front-live{aspect-ratio:1;border-radius:22px}
  .front-live-copy{left:10px;right:10px;bottom:10px;padding:13px 14px}
  .front-proofs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .front-more svg,.front-live-kicker i{animation:none}
  .front-live img,.front-pin-name{transition:none}
  .front-live:hover img{transform:none}
}
@media (prefers-contrast:more){.front-pin-name,.front-live-copy{background:#f8fcf2;color:#17382f;backdrop-filter:none}}