/* huzzly.app — card page.
   Ported from docs/website-demo: Web-ID.dc.html (phone), Web-IDDesktop.dc.html (desktop), HuzzlyID.dc.html (card).
   Sizes, colours and gradients are the demo's. --s (card scale) and --H (window height) are set by js/app.js. */

@font-face{font-family:'Chillax';font-weight:200 700;font-display:swap;src:url(/assets/fonts/Chillax-Variable.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-weight:200 700;font-display:swap;src:url(/assets/fonts/ClashDisplay-Variable.woff2) format('woff2')}
@font-face{font-family:'Boska';font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/fonts/Boska-VariableItalic.woff2) format('woff2')}
@font-face{font-family:'General Sans';font-weight:400;font-display:swap;src:url(/assets/fonts/GeneralSans-400.woff2) format('woff2')}
@font-face{font-family:'General Sans';font-weight:500;font-display:swap;src:url(/assets/fonts/GeneralSans-500.woff2) format('woff2')}
@font-face{font-family:'General Sans';font-weight:600;font-display:swap;src:url(/assets/fonts/GeneralSans-600.woff2) format('woff2')}

:root{--H:100vh;--s:1}
@supports (height:100dvh){:root{--H:100dvh}}

html,body{height:100%;margin:0;overflow:hidden;background:#050608;overscroll-behavior:none}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:#8D94A3}a:hover{color:#C9D0DC}
button,input{font-family:inherit}
input::placeholder{color:#5C6372}

@keyframes hz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hz-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ── page (phone layout: the 390×844 demo, with the gaps easing in below 844 tall) ── */
.page{position:fixed;left:0;top:0;width:100%;height:var(--H);box-sizing:border-box;overflow:hidden;overflow:clip;display:flex;flex-direction:column;
  padding-bottom:clamp(14px,calc(14px + (var(--H) - 664px) * .0778),28px);
  background:radial-gradient(ellipse 80% 42% at 50% 40%,rgba(22,56,232,.38) 0%,rgba(22,56,232,0) 70%),#050608;
  color:#F5F7FA;font-family:'General Sans',system-ui,sans-serif}

.hd{position:relative;flex-shrink:0;height:24px;margin:clamp(14px,calc(14px + (var(--H) - 664px) * .0667),26px) 24px 0;display:flex;align-items:center;justify-content:space-between}
.hd-logo{height:17px;width:auto;display:block}
.hd-right{display:flex;align-items:center}
/* sound on / off: a quiet icon, 44px touch target, its glyph lined up with the header's right edge */
.mute{width:44px;height:44px;margin:0 -14px 0 0;padding:0;border:0;background:none;color:#8D94A3;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.mute:hover{color:#C9D0DC}
.mute:focus-visible{outline:2px solid #9FEFFF;outline-offset:-8px}
.mute[aria-pressed="true"] .mute-off,.mute[aria-pressed="false"] .mute-on{display:none}
.hd-city{display:flex;align-items:center;gap:6px;font-family:'Clash Display',sans-serif;font-weight:600;font-size:11px;letter-spacing:1.6px;color:#9FEFFF;white-space:nowrap}

.stage{position:relative;flex:1 1 0;min-height:0}
.stage-in{position:absolute;left:0;right:0;
  top:clamp(6px,calc(6px + (var(--H) - 664px) * .3),60px);
  bottom:clamp(20px,calc(26px - (var(--H) - 664px) * .0333),26px)}

/* the ribbon runs past both screen edges; this box clips it without making the page scrollable */
.ribbon-clip{position:absolute;left:0;right:0;top:-240px;bottom:-240px;overflow:hidden;pointer-events:none}
.ribbon{position:absolute;left:-40px;right:-40px;top:calc(50% - 28px);height:30px;background:#1638E8;transform:rotate(-8deg);overflow:hidden;display:flex;align-items:center}
.ribbon-track{display:flex;width:max-content;white-space:nowrap;animation:hz-marquee 22s linear infinite}
.ribbon-half{display:flex;align-items:center;font-family:'Clash Display',sans-serif;font-weight:600;font-size:13px;letter-spacing:1px;color:#F5F7FA}
.ribbon-half i{display:inline-block;width:6px;height:6px;margin:0 14px;background:#9FEFFF;transform:rotate(45deg)}

.shadow{position:absolute;left:50%;top:calc(50% + 208px * var(--s) + 4px);width:260px;height:26px;margin-left:-130px;transform:scaleX(1);
  background:radial-gradient(ellipse at center,rgba(159,239,255,.35) 0%,rgba(22,56,232,0) 70%)}
.shadow.is-deep{background:radial-gradient(ellipse at center,rgba(22,56,232,.7) 0%,rgba(22,56,232,0) 70%)}

.card-wrap{position:absolute;left:50%;top:50%;width:264px;height:416px;margin:-208px 0 0 -132px;perspective:1100px;transform:scale(var(--s))}
/* stamp burst: lives inside the card (preserve-3d), so it turns with the card and is thrown out from its edges */
.pulse{position:absolute;left:-2px;top:-2px;right:-2px;bottom:-2px;border-radius:20px;border:2px solid #9FEFFF;box-shadow:0 0 40px rgba(159,239,255,.5),inset 0 0 18px rgba(159,239,255,.35);opacity:0;pointer-events:none}

.id-card{width:264px;height:416px;padding:0;border:0;background:none;position:relative;display:block;transform-style:preserve-3d;cursor:grab;touch-action:none;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.id-card:focus-visible{outline:2px solid #9FEFFF;outline-offset:10px;border-radius:22px}
.id-card:active{cursor:grabbing}
.id-card img{-webkit-user-drag:none;pointer-events:none}

/* card faces (HuzzlyID) */
.hid{width:264px;height:416px;position:relative;overflow:hidden;border-radius:18px;color:#F5F7FA;font-family:'General Sans',system-ui,sans-serif}
.hid-pearl{position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1.5px #DCE3EC;
  background:radial-gradient(ellipse 70% 60% at 15% 10%,rgba(159,239,255,.14) 0%,rgba(159,239,255,0) 70%),radial-gradient(ellipse 70% 60% at 90% 95%,rgba(255,190,240,.12) 0%,rgba(255,190,240,0) 70%),linear-gradient(160deg,#FFFFFF 0%,#F4F6F9 55%,#E9EDF3 100%)}
.hid-glint{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(105deg,rgba(0,0,0,0) 38%,#000 48%,rgba(0,0,0,0) 58%);mask-image:linear-gradient(105deg,rgba(0,0,0,0) 38%,#000 48%,rgba(0,0,0,0) 58%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:45% 50%;mask-position:45% 50%}
.hid-irid{position:absolute;inset:0;background:linear-gradient(115deg,rgba(159,239,255,.5) 0%,rgba(255,190,240,.45) 50%,rgba(159,239,255,.5) 100%)}
.hid-cobalt{position:absolute;inset:0;border-radius:18px;background:linear-gradient(160deg,#2B4DFF 0%,#1638E8 48%,#0E29C2 100%);box-shadow:inset 0 0 0 1.5px #9FEFFF}
.hid-lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0px,rgba(255,255,255,.04) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 5px)}
/* back wordmark as holo foil: pastel rainbow + fine sparkle lines, both slid by js/app.js as the card turns */
.holo{position:absolute;left:72px;top:208px;width:360px;height:69.06px;transform:translate(-50%,-50%) rotate(-90deg);
  -webkit-mask:url(/assets/logos/wordmark-rising-white.svg) center / 100% 100% no-repeat;mask:url(/assets/logos/wordmark-rising-white.svg) center / 100% 100% no-repeat;
  background-color:#F5F7FA;
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,0) 0px,rgba(255,255,255,0) 5px,rgba(255,255,255,.7) 6.5px,rgba(255,255,255,0) 8px,rgba(255,255,255,0) 14px),
    linear-gradient(100deg,#7DEBFF 0%,#B39BFF 12%,#FF8ADF 24%,#FFD966 36%,#86FFC2 48%,#7DEBFF 60%,#B39BFF 72%,#FF8ADF 84%,#FFD966 100%);
  background-size:260% 260%,210% 210%;background-position:50% 50%,50% 50%}
.hid-inset{position:absolute;inset:9px;border:1px solid rgba(159,239,255,.3);border-radius:9px}

/* laminate light bar + foil sheen (both faces) */
.lam-bar{position:absolute;top:0;bottom:0;left:-15px;width:30px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(159,239,255,0) 0%,rgba(159,239,255,.85) 35%,#FFFFFF 50%,rgba(159,239,255,.85) 65%,rgba(159,239,255,0) 100%);box-shadow:0 0 28px 10px rgba(159,239,255,.55)}
/* FORGET THIS CARD: the same bar as a soft white cloth */
.lam-bar.is-wipe{left:-23px;width:46px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 38%,#FFFFFF 50%,rgba(255,255,255,.75) 62%,rgba(255,255,255,0) 100%);box-shadow:0 0 26px 8px rgba(255,255,255,.4)}
.sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;background-size:300% 100%;
  background-image:linear-gradient(105deg,rgba(255,255,255,0) 32%,rgba(159,239,255,.55) 42%,rgba(255,255,255,.8) 47%,rgba(255,150,230,.45) 52%,rgba(159,239,255,.35) 58%,rgba(255,255,255,0) 68%)}

/* glitch text (city not detected): chromatic split + the occasional jolt; the characters are scrambled by js/app.js */
@keyframes hz-glitch{0%,7%,11%,45%,49%,70%,74%,100%{transform:none;clip-path:none;opacity:1}8%{transform:translateX(-1.5px) skewX(-10deg)}46%{transform:translateX(2px);clip-path:inset(0 0 52% 0)}47%{transform:translateX(-2px);clip-path:inset(48% 0 0 0)}71%{transform:translateX(1px) skewX(12deg);opacity:.65}}
.glitch{display:inline-block;overflow:hidden;white-space:pre;vertical-align:bottom;text-overflow:clip;text-shadow:1px 0 rgba(255,150,230,.95),-1px 0 rgba(159,239,255,.95);animation:hz-glitch 1.7s steps(1) infinite}
.hd-city.is-unknown .glitch{box-sizing:content-box;padding:4px 7px;border:1px solid rgba(159,239,255,.5);background:rgba(159,239,255,.08);color:#F5F7FA}
.hint{position:relative;flex-shrink:0;height:24px;margin:0 24px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Boska',serif;font-style:italic;font-weight:400;font-size:17px;color:#C9D0DC;text-align:center}
.hint-ico{flex-shrink:0}
.page:not([data-step="idle"]) .hint-ico,.page.has-notice .hint-ico{display:none}
.hint a{color:#9FEFFF}
.page[data-step="done"] .hint{color:#9FEFFF}

/* ── controls ── */
.controls{position:relative;flex-shrink:0;align-self:center;width:calc(100% - 48px);max-width:420px;height:180px;
  margin-top:clamp(12px,calc(12px + (var(--H) - 664px) * .0556),22px)}
.c-idle,.c-done{position:absolute;left:6px;right:6px;top:72px}
.c-form{position:absolute;left:0;right:0;top:0;margin:0;display:flex;flex-direction:column;gap:8px}
.c-form .row{display:flex;gap:14px;margin-top:8px}
.page:not([data-step="idle"]) .c-idle,
.page:not([data-step="form"]) .c-form,
.page:not([data-step="done"]) .c-done,
.page.is-saving .c-done{display:none}
/* Turnstile: sits just above the form (never over the fields) and is only visible while it wants a click */
.botcheck{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);z-index:5;visibility:hidden;line-height:0}
.botcheck.is-asking{visibility:visible}

.hz-field{height:48px;display:flex;align-items:center;gap:12px;padding:0 18px;background:#0F1117;transform:skewX(-10deg);transition:opacity .2s ease,visibility .2s}
.hz-field:focus-within{box-shadow:inset 0 -2px 0 #9FEFFF}
.hz-field span{width:78px;flex-shrink:0;transform:skewX(10deg);font-family:'Clash Display',sans-serif;font-weight:600;font-size:11px;letter-spacing:1.6px;color:#8D94A3}
.hz-field input{flex-grow:1;min-width:0;height:46px;transform:skewX(10deg);background:none;border:0;border-radius:0;outline:none;color:#F5F7FA;font-size:16px;font-weight:500}
.hz-field input:-webkit-autofill{-webkit-text-fill-color:#F5F7FA;caret-color:#F5F7FA;transition:background-color 99999s}
.c-form.is-holding .hz-field{opacity:0;visibility:hidden}

/* tactile keys (bible §5 buttons): face gradient + top highlight + solid lip; press sinks the key */
.tac{position:relative;border:0;padding:0;cursor:pointer;transform:skewX(-10deg);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:transform .11s cubic-bezier(.3,.7,.4,1),box-shadow .11s cubic-bezier(.3,.7,.4,1)}
.tac:focus-visible{outline:2px solid #9FEFFF;outline-offset:5px}
.tac-ice{background:linear-gradient(180deg,#D6FBFF 0%,#A9F1FF 46%,#88E3F6 100%);color:#050608;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -2px 0 rgba(0,70,95,.22),0 7px 0 0 #3FA9C2,0 14px 22px rgba(0,0,0,.35)}
.tac-ice:active,.tac-ice.is-pressed{transform:translateY(6px) skewX(-10deg);box-shadow:inset 0 3px 5px rgba(0,60,80,.35),inset 0 -1px 0 rgba(255,255,255,.4),0 1px 0 0 #3FA9C2,0 4px 8px rgba(0,0,0,.3)}
.tac-dark{background:linear-gradient(180deg,#2A2F3A 0%,#1A1E26 60%,#13161C 100%);color:#C9D0DC;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.35),0 5px 0 0 #07080B,0 10px 16px rgba(0,0,0,.35)}
.tac-dark:active,.tac-dark.is-pressed{transform:translateY(4px) skewX(-10deg);box-shadow:inset 0 3px 5px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.06),0 1px 0 0 #07080B,0 3px 6px rgba(0,0,0,.3)}

.cta{width:100%;height:60px;display:flex;align-items:center;justify-content:center;gap:12px;font-family:'Chillax',sans-serif;font-weight:700;font-size:21px;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.cta .nudge{animation:hz-nudge 1s ease-in-out infinite}
.forget{font-size:18px;text-shadow:none;overflow:hidden;touch-action:none}
.forget .hold-fill{background:rgba(159,239,255,.16)}
.forget svg,.forget #forgetLabel{position:relative}
.key{width:60px;height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.hold{flex-grow:1;height:60px;overflow:hidden;touch-action:none;font-family:'Chillax',sans-serif;font-weight:700;font-size:20px;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.hold-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(63,169,194,.55);transform:scaleX(0);transform-origin:0 50%}
.hold-label{position:relative}

.legal{position:absolute;left:0;right:0;bottom:clamp(0px,calc((var(--H) - 664px) * .0667),12px);display:flex;justify-content:center;gap:8px;font-family:'Clash Display',sans-serif;font-weight:600;font-size:10px;letter-spacing:1.6px}
.legal a{padding:16px 10px;text-decoration:none}
.page[data-step="form"] .legal{visibility:hidden}

/* ── desktop layout (Web-IDDesktop): column, card up to 1.18×, fields side by side ── */
@media (min-width:720px) and (min-height:521px){
  .page{align-items:center;padding-bottom:0;background:radial-gradient(ellipse 52% 50% at 50% 44%,rgba(22,56,232,.38) 0%,rgba(22,56,232,0) 70%),#050608}
  .hd{align-self:stretch;height:28px;margin:clamp(14px,calc(14px + (var(--H) - 700px) * .09),32px) 48px 0}
  .hd-logo{height:20px}
  .stage{align-self:stretch}
  .stage-in{top:0;bottom:0}
  .ribbon{left:-60px;right:-60px;top:calc(50% - 17px);height:34px;transform:rotate(-4deg)}
  .shadow{top:calc(50% + 208px * var(--s) + 10.5px);height:30px}
  .hint{margin:6px 24px 0}
  .controls{width:660px;max-width:calc(100% - 48px);height:148px;margin-top:clamp(10px,calc(10px + (var(--H) - 700px) * .06),22px)}
  .c-idle,.c-done{left:50%;right:auto;top:0;width:400px;max-width:100%;margin-left:-200px}
  .c-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:16px}
  .c-form .row{grid-column:1 / -1;justify-self:center;width:420px;max-width:100%;margin-top:0}
  .legal{position:relative;bottom:auto;flex-shrink:0;margin-bottom:10px}
}

/* ── short and wide (a phone on its side): card on the left, controls on the right ── */
@media (min-width:560px) and (max-height:520px){
  .page{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto auto 1fr;padding-bottom:0}
  .hd{grid-column:1 / -1;grid-row:1;margin-top:12px}
  .stage{grid-column:1;grid-row:2 / 7}
  .stage-in{top:6px;bottom:26px}
  .ribbon{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 14%,#000 86%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 14%,#000 86%,rgba(0,0,0,0) 100%)}
  .hint{grid-column:2;grid-row:3}
  .controls{grid-column:2;grid-row:4;justify-self:center;margin-top:10px;height:176px}
  .c-idle,.c-done{top:0}
  .legal{grid-column:2;grid-row:5;position:relative;bottom:auto;margin-top:-104px}
  .page[data-step="form"] .legal{display:none}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important}.tac{transition:none}}