/* =========================================================
   Skyland key panel — signup "item get" component
   Wrap the MailPoet form in .skyland-key-panel (see README-key.md).
   Locked by default; skyland-key.js adds .is-acquired on success.
   Fonts expected from the theme: Press Start 2P, VT323, Bricolage Grotesque (all OFL).
   ========================================================= */
.skyland-key-panel{
  --sk-navy:#101a33; --sk-navy2:#162040; --sk-ink:#0a1020; --sk-path:#3a4a72;
  --sk-lime:#d4ff3a; --sk-lime-dk:#8aa61f; --sk-cream:#f3ecd9; --sk-muted:#8a93b0;
  container-type:inline-size; container-name:skkey;
  display:flex; flex-direction:column; padding:0;
  background:var(--sk-navy2); border:3px solid var(--sk-path);
  color:var(--sk-cream); position:relative;
}
.skyland-key-panel *,.skyland-key-panel *::before,.skyland-key-panel *::after{box-sizing:border-box}
.skyland-key-panel .sk-grid{flex:1; display:grid; grid-template-columns:1fr 232px; min-height:100%}

/* ---- copy column ---- */
.skyland-key-panel .sk-copy{padding:28px 26px; display:flex; flex-direction:column; justify-content:center; min-width:0}
.skyland-key-panel .sk-heading{
  font-family:'Press Start 2P',monospace; font-size:13px; line-height:1.5; color:var(--sk-lime);
  text-transform:uppercase; margin:0 0 10px;
}
.skyland-key-panel .sk-pitch{font-family:'VT323',monospace; font-size:19px; line-height:1.25; color:var(--sk-cream); opacity:.9; margin:0 0 18px}
.skyland-key-panel .sk-action{display:grid}
.skyland-key-panel .sk-action > *{grid-area:1/1}
.skyland-key-panel .sk-smallprint{font-family:'VT323',monospace; font-size:15px; color:var(--sk-muted); margin:10px 0 0}

/* MailPoet form, restyled to the pixel UI (behaviour and messages untouched) */
.skyland-key-panel .sk-form .mailpoet_form{margin:0; padding:0}
.skyland-key-panel .sk-form .mailpoet_form_form{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch}
.skyland-key-panel .sk-form .mailpoet_paragraph{margin:0 !important}
.skyland-key-panel .sk-form .mailpoet_paragraph:first-of-type{flex:1 1 170px; min-width:0}
.skyland-key-panel .sk-form .mailpoet_text{
  width:100% !important; height:46px; padding:0 14px; margin:0;
  font-family:'VT323',monospace; font-size:19px; color:var(--sk-cream);
  background:var(--sk-ink); border:2px solid var(--sk-path); border-radius:0; outline:none;
}
.skyland-key-panel .sk-form .mailpoet_text:focus{border-color:var(--sk-lime)}
.skyland-key-panel .sk-form .mailpoet_text::placeholder{color:var(--sk-muted)}
.skyland-key-panel .sk-form .mailpoet_submit{
  height:46px; padding:0 16px; margin:0; cursor:pointer;
  font-family:'Press Start 2P',monospace; font-size:9px; text-transform:uppercase; letter-spacing:0;
  color:var(--sk-navy); background:var(--sk-lime); border:none; border-radius:0;
  box-shadow:0 4px 0 var(--sk-lime-dk);
}
.skyland-key-panel .sk-form .mailpoet_submit:hover{outline:2px solid var(--sk-cream)}
.skyland-key-panel .sk-form .mailpoet_message{flex-basis:100%}

/* success line (shown after acquire, replaces the form area) */
.skyland-key-panel .sk-success{
  visibility:hidden; opacity:0; align-self:center;
  padding:12px 14px; background:rgba(212,255,58,.08); border-left:4px solid var(--sk-lime); outline:none;
}
.skyland-key-panel .sk-subline{font-family:'VT323',monospace; font-size:20px; line-height:1.25; color:var(--sk-cream); margin:0}
.skyland-key-panel .sk-subline b{color:var(--sk-lime); font-weight:400}

/* ---- item column ---- */
.skyland-key-panel .sk-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:26px 14px; border-left:3px dashed var(--sk-path);
  background:radial-gradient(circle at 50% 44%, rgba(212,255,58,.06) 0%, rgba(212,255,58,0) 60%), #0d1630;
}
.skyland-key-panel .sk-slot-wrap{position:relative; width:196px; height:140px}
.skyland-key-panel .sk-slot{
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 50%, rgba(212,255,58,.10) 0%, rgba(212,255,58,.03) 45%, rgba(0,0,0,0) 70%), #0a1124;
  border:4px solid #33426b;
  box-shadow:inset 0 0 0 3px var(--sk-ink), inset 0 0 0 5px #222f55, inset 0 0 26px rgba(212,255,58,.10), 0 4px 0 var(--sk-ink);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
/* 1.0.6.14: Stefan's boss-at-the-door art (transparent, 196x140 = the whole .sk-slot-wrap footprint, art kept >=8px inside
   the edge so the 4px slot border never clips it). Before signup: dimmed; after: lit + glow. */
.skyland-key-panel .sk-art-bob{position:absolute; left:-4px; top:-4px; width:196px; height:140px}
.skyland-key-panel .sk-art{position:relative; width:196px; height:140px}
.skyland-key-panel .sk-art picture{display:block}
.skyland-key-panel .sk-art img{display:block; width:196px; height:140px; max-width:none; image-rendering:pixelated; image-rendering:crisp-edges}
.skyland-key-panel .sk-art-dim{filter:grayscale(.6) brightness(.55); opacity:.85}
.skyland-key-panel .sk-art picture:last-child{position:absolute; left:0; top:0}
.skyland-key-panel .sk-art-lit{clip-path:inset(100% -40px -40px -40px); filter:drop-shadow(0 0 10px rgba(212,255,58,.40))}
.skyland-key-panel .sk-flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none}

.skyland-key-panel .sk-badge{position:absolute; top:-12px; right:-12px; display:block; line-height:0}
.skyland-key-panel .sk-badge--star{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:var(--sk-lime); box-shadow:0 0 0 2px var(--sk-ink), 0 3px 0 2px var(--sk-ink), 0 0 12px rgba(212,255,58,.5);
  opacity:0; visibility:hidden;
}
.skyland-key-panel .sk-star .o{fill:var(--sk-navy)}
.skyland-key-panel .sk-sparks{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none}
.skyland-key-panel .sk-spark{position:absolute; left:-7px; top:-7px; opacity:0; line-height:0}
.skyland-key-panel .sk-spark--l .s{fill:var(--sk-lime)} .skyland-key-panel .sk-spark--c .s{fill:var(--sk-cream)}

.skyland-key-panel .sk-label{display:grid; place-items:center; min-height:34px}
.skyland-key-panel .sk-label > *{grid-area:1/1}
.skyland-key-panel .sk-tag{
  font-family:'Press Start 2P',monospace; font-size:8px; line-height:1; color:var(--sk-muted);
  padding:7px 9px; border:2px dotted rgba(138,147,176,.6); background:rgba(10,16,32,.6); white-space:nowrap;
}
.skyland-key-panel .sk-banner{
  visibility:hidden; opacity:0; white-space:nowrap;
  filter:drop-shadow(0 3px 0 var(--sk-ink)) drop-shadow(0 0 10px rgba(212,255,58,.35));
}
.skyland-key-panel .sk-banner > span{
  display:block; font-family:'Press Start 2P',monospace; font-size:9px; line-height:1; color:var(--sk-navy);
  background:var(--sk-lime); padding:10px 18px;
  clip-path:polygon(0 0,100% 0,calc(100% - 4px) 25%,calc(100% - 8px) 50%,calc(100% - 4px) 75%,100% 100%,0 100%,4px 75%,8px 50%,4px 25%);
}
.skyland-key-panel .sk-status{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px}

/* ---- stacked layout for narrow panels (mobile) ---- */
@container skkey (max-width: 560px){
  .skyland-key-panel .sk-grid{grid-template-columns:1fr}
  .skyland-key-panel .sk-item{order:-1; border-left:none; border-bottom:3px dashed var(--sk-path); padding:26px 14px 18px; gap:18px}
  .skyland-key-panel .sk-copy{padding:18px 16px 20px}
  .skyland-key-panel .sk-heading{font-size:11px}
  .skyland-key-panel .sk-pitch{font-size:17px; margin-bottom:14px}
  .skyland-key-panel .sk-form .mailpoet_form_form{flex-direction:column; gap:8px}
  .skyland-key-panel .sk-form .mailpoet_paragraph:first-of-type{flex:none}
  .skyland-key-panel .sk-form .mailpoet_submit{width:100%}
  .skyland-key-panel .sk-smallprint{font-size:14px}
  .skyland-key-panel .sk-subline{font-size:18px}
}

/* =========================================================
   ACQUIRED — final state (static) + item-get sequence (~1.6s)
   ========================================================= */
.skyland-key-panel.is-acquired .sk-art-lit{clip-path:inset(-40px -40px -40px -40px)}
.skyland-key-panel.is-acquired .sk-slot{
  border-color:var(--sk-lime);
  background:radial-gradient(circle at 50% 50%, rgba(212,255,58,.26) 0%, rgba(212,255,58,.06) 50%, rgba(0,0,0,0) 72%), #0d1838;
  box-shadow:inset 0 0 0 3px var(--sk-ink), inset 0 0 0 5px rgba(212,255,58,.35), inset 0 0 30px rgba(212,255,58,.25), 0 4px 0 var(--sk-ink), 0 0 22px rgba(212,255,58,.25);
}
.skyland-key-panel.is-acquired .sk-badge--star{opacity:1; visibility:visible}
.skyland-key-panel.is-acquired .sk-tag{opacity:0; visibility:hidden}
.skyland-key-panel.is-acquired .sk-banner{opacity:1; visibility:visible}
.skyland-key-panel.is-acquired .sk-form-area{opacity:0; visibility:hidden}
.skyland-key-panel.is-acquired .sk-success{opacity:1; visibility:visible}

/* a) (1.0.6.14: padlock removed)  b) white flash, then the art powers on  180–520ms */
.skyland-key-panel.is-acquired .sk-flash{animation:sk-flash 180ms steps(3,end) 180ms both}
.skyland-key-panel.is-acquired .sk-art-lit{animation:sk-fill 300ms steps(6,end) 220ms both}
.skyland-key-panel.is-acquired .sk-slot{animation:sk-slot-on 120ms steps(2,end) 420ms both}
/* c) bounce ~12px with a pixel overshoot  520–920ms */
.skyland-key-panel.is-acquired .sk-art-bob{animation:sk-bounce 400ms 520ms both}
/* d) sparkle burst  560–1160ms */
.skyland-key-panel.is-acquired .sk-spark{animation:sk-spark 600ms steps(6,end) calc(560ms + var(--i) * 18ms) both}
/* save star pops  860–1060ms */
.skyland-key-panel.is-acquired .sk-badge--star{animation:sk-pop 200ms steps(4,end) 860ms both}
/* e) banner pops in  900–1180ms */
.skyland-key-panel.is-acquired .sk-tag{animation:sk-out 160ms steps(2,end) 200ms both}
.skyland-key-panel.is-acquired .sk-banner{animation:sk-banner 280ms steps(5,end) 900ms both}
/* f) form gives way, sub-line fades in  0–200ms / 1200–1600ms */
.skyland-key-panel.is-acquired .sk-form-area{animation:sk-out 200ms steps(3,end) 0ms both}
.skyland-key-panel.is-acquired .sk-success{animation:sk-in 400ms steps(5,end) 1200ms both}

@keyframes sk-shackle{from{transform:translateY(0)} to{transform:translateY(-3px)}}
@keyframes sk-lock-fall{
  0%{opacity:1; visibility:visible; transform:translate(0,0) rotate(0)}
  25%{opacity:1; visibility:visible; transform:translate(0,-8px) rotate(-8deg)}
  100%{opacity:0; visibility:hidden; transform:translate(14px,56px) rotate(40deg)}
}
@keyframes sk-flash{0%{opacity:0} 34%{opacity:.95} 100%{opacity:0}}
@keyframes sk-fill{from{clip-path:inset(100% -40px -40px -40px)} to{clip-path:inset(-40px -40px -40px -40px)}}
@keyframes sk-slot-on{
  from{border-color:#33426b; box-shadow:inset 0 0 0 3px #0a1020, inset 0 0 0 5px #222f55, inset 0 0 26px rgba(212,255,58,.10), 0 4px 0 #0a1020, 0 0 0 rgba(212,255,58,0)}
}
@keyframes sk-bounce{
  0%  {transform:translateY(0);     animation-timing-function:steps(3,end)}
  40% {transform:translateY(-12px); animation-timing-function:steps(3,end)}
  70% {transform:translateY(2px);   animation-timing-function:steps(2,end)}
  85% {transform:translateY(-2px);  animation-timing-function:steps(1,end)}
  100%{transform:translateY(0)}
}
@keyframes sk-spark{
  0%  {opacity:0; transform:translate(0,0) scale(.4)}
  12% {opacity:1; transform:translate(calc(var(--dx) * .2), calc(var(--dy) * .2)) scale(.8)}
  45% {opacity:1; transform:translate(calc(var(--dx) * .7), calc(var(--dy) * .7)) scale(1.2)}
  100%{opacity:0; transform:translate(var(--dx), var(--dy)) scale(.5)}
}
@keyframes sk-pop{
  0%{opacity:0; visibility:visible; transform:scale(0)}
  60%{opacity:1; transform:scale(1.3)}
  100%{opacity:1; visibility:visible; transform:scale(1)}
}
@keyframes sk-banner{
  0%{opacity:0; visibility:visible; transform:translateY(8px) scaleX(.2)}
  60%{opacity:1; transform:translateY(-3px) scaleX(1.08)}
  100%{opacity:1; visibility:visible; transform:none}
}
@keyframes sk-out{from{opacity:1; visibility:visible} to{opacity:0; visibility:hidden}}
@keyframes sk-in{from{opacity:0; visibility:visible; transform:translateY(6px)} to{opacity:1; visibility:visible; transform:none}}

/* reduced motion: no animation, straight to the final acquired state */
@media (prefers-reduced-motion: reduce){
  .skyland-key-panel *,.skyland-key-panel *::before,.skyland-key-panel *::after{animation:none !important; transition:none !important}
}

/* 1.0.6.14: the ??? label is a link to the secret zone */
.skyland-key-panel a.sk-tag--link{text-decoration:none}