/* ==========================================================================
   Password generator page (/de/passwort-generator/, /en/password-generator/)
   Loaded only on these two pages, after style.css -- reuses its tokens,
   buttons, aurora border (@property --aurora-angle) and feature cards.
   ========================================================================== */

.pwgen-page{
  position:relative;
  min-height:100svh;
  padding:150px clamp(20px,6vw,56px) 120px;
  overflow:hidden;
}
/* Faint dot grid + accent bloom behind the hero, masked out towards the
   edges so it never competes with the content. Pure decoration. */
.pwgen-page::before{
  content:'';
  position:absolute; left:50%; top:0;
  width:min(1600px,140vw); height:980px;
  transform:translateX(-50%);
  background:
    radial-gradient(closest-side at 50% 42%, rgba(79,141,255,.16), transparent 72%),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 60% 55% at 50% 40%, #000 30%, transparent 75%);
  pointer-events:none;
  z-index:-1;
}

.pwgen{
  max-width:clamp(860px,74vw,1320px);
  margin:0 auto;
}

.pw-sr{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- intro ---------- */
.pwgen__intro{
  text-align:center;
  max-width:760px;
  margin:0 auto 56px;
}
.pwgen__intro h1{
  font-size:clamp(38px,6.2vw,76px);
  line-height:1.03;
  letter-spacing:-.035em;
  margin-bottom:20px;
}
.pwgen__intro h1 span{
  background:linear-gradient(100deg, var(--text) 20%, #a9c6ff 55%, var(--accent) 90%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.pwgen__lede{
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.6;
  color:var(--text-dim);
  max-width:620px;
  margin:0 auto;
}
.pwgen__format{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:26px;
  padding:8px 16px 8px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(13,15,18,.6);
  font-size:13px; color:var(--text-dim);
}
.pwgen__format code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; color:var(--text);
  background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:3px 10px;
}

/* ---------- stage + card ---------- */
.pwgen-stage{ position:relative; }
.pwgen-halo{
  position:absolute; inset:8% 6% auto; height:70%;
  background:radial-gradient(closest-side, rgba(79,141,255,.22), transparent);
  filter:blur(40px);
  opacity:.7;
  pointer-events:none;
  z-index:-1;
}
.pwgen-stage:has(.pwgen-card.is-pulsing) .pwgen-halo{
  animation:pw-halo 1.2s var(--ease);
}
@keyframes pw-halo{
  0%{ opacity:.7; transform:scale(1); }
  30%{ opacity:1; transform:scale(1.05); }
  100%{ opacity:.7; transform:scale(1); }
}

.pwgen-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:24px;
  padding:clamp(24px,4vw,56px) clamp(18px,4.4vw,64px) clamp(26px,3.6vw,48px);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02) inset;
  background:
    radial-gradient(560px circle at var(--spot-x,50%) var(--spot-y,0%), rgba(79,141,255,.13), transparent 60%) padding-box,
    linear-gradient(180deg, #0f1216, var(--bg-elev) 40%) padding-box,
    conic-gradient(from var(--aurora-angle,0deg), transparent 0%, rgba(79,141,255,.7) 8%, transparent 24%, transparent 76%, rgba(79,141,255,.45) 92%, transparent 100%) border-box;
  animation:aurora-rotate 9s linear infinite;
}
/* Scan beam that sweeps once across the card on every new password. */
.pwgen-card::after{
  content:'';
  position:absolute; top:0; bottom:0; left:0;
  width:40%;
  background:linear-gradient(100deg, transparent, rgba(79,141,255,.10) 40%, rgba(160,195,255,.16) 50%, rgba(79,141,255,.10) 60%, transparent);
  transform:translateX(-120%) skewX(-12deg);
  pointer-events:none;
  z-index:2;
  opacity:0;
}
.pwgen-card.is-pulsing::after{ animation:pw-scan 1.1s var(--ease); }
@keyframes pw-scan{
  0%{ transform:translateX(-120%) skewX(-12deg); opacity:1; }
  100%{ transform:translateX(320%) skewX(-12deg); opacity:1; }
}

.pwgen-card__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 20px; flex-wrap:wrap;
  margin-bottom:clamp(22px,3vw,36px);
}
.pwgen-card__top .eyebrow{ margin:0; }
.pw-local{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500; color:var(--text-dim);
  padding:6px 12px 6px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(7,8,10,.5);
}
.pw-local svg{ width:14px; height:14px; color:var(--accent); flex-shrink:0; }
.pw-local__dot{
  width:6px; height:6px; border-radius:50%;
  background:#3ecf8e;
  box-shadow:0 0 0 0 rgba(62,207,142,.6);
  animation:pw-live 2.4s ease-out infinite;
}
@keyframes pw-live{
  0%{ box-shadow:0 0 0 0 rgba(62,207,142,.55); }
  70%,100%{ box-shadow:0 0 0 7px rgba(62,207,142,0); }
}

/* ---------- the password itself ---------- */
.pw-output{
  position:relative;
  padding:clamp(18px,2.6vw,34px) clamp(8px,1.6vw,24px);
  border-radius:18px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(180deg, rgba(79,141,255,.35), rgba(28,30,34,1) 55%) border-box;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(79,141,255,.35);
}
.pw-display{
  --pw-size:clamp(28px,5.1vw,74px);
  display:flex; flex-wrap:wrap;
  justify-content:center; align-content:center; align-items:baseline;
  gap:.12em 0;
  min-height:calc(2 * 1.18em + .12em);
  font-size:var(--pw-size);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.025em;
  color:var(--text);
  font-feature-settings:'tnum' 1, 'cv11' 1;
  cursor:text;
}
.pw-display[data-count="5"]{ --pw-size:clamp(26px,4.5vw,66px); }
.pw-display[data-count="6"]{ --pw-size:clamp(24px,3.9vw,58px); }
.pw-display[data-count="7"]{ --pw-size:clamp(22px,3.45vw,52px); }
.pw-display[data-count="8"]{ --pw-size:clamp(21px,3.1vw,46px); }

.pw-block{ position:relative; display:inline-block; white-space:nowrap; }
.pw-block__ghost{ visibility:hidden; user-select:none; -webkit-user-select:none; }
.pw-block__live{ position:absolute; left:0; top:0; white-space:nowrap; }
.pw-d{
  color:var(--accent);
  text-shadow:0 0 24px rgba(79,141,255,.55);
}
/* Inter's hyphen carries wide side bearings at display sizes; pull it in so
   the blocks read as one string, exactly like the copied password. */
.pw-sep{ color:var(--text-faint); font-weight:500; margin:0 -.045em; }
.pw-x{ color:#6f9dff; opacity:.6; }

.pw-display.is-decoding .pw-block{
  animation:pw-in .55s var(--ease) both;
  animation-delay:calc(var(--i,0) * 85ms);
}
@keyframes pw-in{
  from{ opacity:0; transform:translateY(.28em); filter:blur(10px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}

/* ---------- actions ---------- */
.pw-actions{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:12px 14px;
  margin-top:clamp(22px,3vw,34px);
}
.pw-actions .btn{ gap:10px; min-height:48px; }
.pw-actions .btn svg{ width:18px; height:18px; flex-shrink:0; }
.pw-new.is-spinning svg{ animation:pw-spin .7s var(--ease); }
@keyframes pw-spin{ to{ transform:rotate(360deg); } }
.pw-copy{ position:relative; min-width:160px; }
.pw-copy .pw-copy__done{ display:none; }
.pw-copy.is-copied{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--text);
}
.pw-copy.is-copied .pw-copy__idle{ display:none; }
.pw-copy.is-copied .pw-copy__done{ display:block; color:var(--accent); animation:pw-pop .35s var(--ease); }
@keyframes pw-pop{
  0%{ transform:scale(.4); opacity:0; }
  60%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); }
}
.pw-keys{
  display:none;
  justify-content:center; gap:14px;
  margin-top:16px;
  font-size:12px; color:var(--text-faint);
}
.pw-keys kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px; margin-right:4px;
  border:1px solid var(--border); border-bottom-width:2px; border-radius:5px;
  font-family:inherit; font-size:11px; font-weight:600; color:var(--text-dim);
  background:var(--bg);
}
@media (hover:hover) and (pointer:fine){
  .pw-keys{ display:flex; }
}

/* ---------- controls: word count + strength ---------- */
.pw-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:24px clamp(24px,4vw,56px);
  margin-top:clamp(26px,3.4vw,44px);
  padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--border);
}
.pw-label{
  display:block;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 12px; padding:0;
}

.pw-count{ border:none; margin:0; padding:0; min-width:0; }
.pw-count__track{
  --n:5;
  position:relative;
  display:grid; grid-template-columns:repeat(var(--n),1fr);
  padding:4px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--bg);
}
.pw-count__ind{
  position:absolute; top:4px; bottom:4px; left:4px;
  width:calc((100% - 8px) / var(--n));
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 8px 22px -8px rgba(79,141,255,.7);
  transform:translateX(calc(var(--idx,0) * 100%));
  transition:transform .35s var(--ease);
}
.pw-count__opt{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  height:42px;
  border-radius:999px;
  font-size:15px; font-weight:700;
  color:var(--text-dim);
  cursor:pointer;
  transition:color .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.pw-count__opt input{
  position:absolute; inset:0;
  margin:0; opacity:0;
  cursor:pointer;
}
.pw-count__opt:hover{ color:var(--text); }
.pw-count__opt:has(input:checked){ color:#fff; }
.pw-count__opt:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:3px; }
.pw-note{
  margin-top:12px;
  font-size:12.5px; line-height:1.55; color:var(--text-faint);
}

.pw-strength__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.pw-strength__head .pw-label{ margin-bottom:12px; }
.pw-strength__level{
  font-size:14px; font-weight:700; color:var(--accent);
}
/* Eight segments = eight possible word blocks. Lit segments = current
   word count, so length and strength read as one and the same thing. */
.pw-meter{
  position:relative;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:transparent;
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 calc(12.5% - 4px), transparent calc(12.5% - 4px) 12.5%);
          mask:repeating-linear-gradient(90deg, #000 0 calc(12.5% - 4px), transparent calc(12.5% - 4px) 12.5%);
}
.pw-meter::before{
  content:'';
  position:absolute; inset:0;
  background:#1a1d22;
}
.pw-meter__fill{
  position:absolute; inset:0;
  transform-origin:left;
  transform:scaleX(var(--fill,.5));
  background:linear-gradient(90deg, #2f6fe8, var(--accent) 45%, #8fb6ff);
  transition:transform .6s var(--ease);
}
.pw-meter__fill::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  background-size:40% 100%;
  background-repeat:no-repeat;
  animation:pw-shimmer 2.8s ease-in-out infinite;
}
@keyframes pw-shimmer{
  0%{ background-position:-60% 0; }
  60%,100%{ background-position:160% 0; }
}
.pw-strength__hint{
  margin-top:12px;
  font-size:13.5px; line-height:1.55; color:var(--text-dim);
}

.pw-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:clamp(24px,3vw,36px) 0 0;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--border);
}
.pw-stats > div{
  background:var(--bg);
  padding:16px 18px;
  min-width:0;
}
.pw-stats dt{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}
.pw-stats dd{
  margin:0;
  font-size:clamp(16px,1.5vw,20px); font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.pw-stats sup{ font-size:.6em; line-height:0; }
.pw-footnote{
  margin-top:12px;
  font-size:12px; line-height:1.55; color:var(--text-faint);
}

/* ---------- alternatives ---------- */
.pwgen-section{ margin-top:clamp(72px,9vw,120px); }
.pwgen-section__head{ max-width:640px; margin-bottom:28px; }
.pwgen-section__head h2{
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.12;
  margin-bottom:12px;
}
.pwgen-section__head p{
  font-size:15px; line-height:1.6; color:var(--text-dim);
}

.pw-alts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.pw-alt{
  display:flex; align-items:stretch;
  border:1px solid var(--border); border-radius:14px;
  background:var(--bg-elev);
  overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pw-alt:hover{
  border-color:rgba(79,141,255,.55);
  transform:translateY(-2px);
  box-shadow:0 16px 34px -20px rgba(79,141,255,.55);
}
.pw-alt.is-entering{ animation:pw-alt-in .5s var(--ease) both; animation-delay:calc(180ms + var(--i,0) * 60ms); }
.pw-alt.is-swapped{ animation:pw-alt-swap .6s var(--ease); }
@keyframes pw-alt-in{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}
@keyframes pw-alt-swap{
  0%{ box-shadow:0 0 0 0 rgba(79,141,255,.6); }
  100%{ box-shadow:0 0 0 12px rgba(79,141,255,0); }
}
.pw-alt__use{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:none; border:none;
  font-family:inherit; text-align:left;
  color:var(--text);
  cursor:pointer;
}
.pw-alt__use:focus-visible,
.pw-alt__copy:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; border-radius:12px; }
.pw-alt__idx{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-size:11px; font-weight:700;
}
.pw-alt__text{
  font-size:clamp(15px,1.35vw,18px); font-weight:600;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
  line-height:1.4;
}
.pw-alt__text .pw-d{ text-shadow:none; }
.pw-alt__copy{
  display:flex; align-items:center; justify-content:center;
  width:56px; flex-shrink:0;
  background:none; border:none; border-left:1px solid var(--border);
  color:var(--text-dim);
  cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.pw-alt__copy svg{ width:18px; height:18px; }
.pw-alt__copy:hover{ color:var(--text); background:var(--accent-soft); }
.pw-alt__copy.is-copied{ color:var(--accent); }

/* ---------- anatomy ---------- */
.pw-anatomy{
  display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap;
  gap:14px;
}
.pw-an__tile{
  flex:1 1 150px;
  display:flex; flex-direction:column; justify-content:center;
  gap:8px;
  padding:22px 20px;
  border:1px solid var(--border); border-radius:16px;
  background:var(--bg-elev);
  text-align:center;
  min-width:0;
}
.pw-an__tile--result{
  border-color:rgba(79,141,255,.5);
  background:linear-gradient(180deg, rgba(79,141,255,.12), var(--bg-elev));
}
.pw-an__value{
  font-size:clamp(24px,2.6vw,34px); font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  overflow-wrap:anywhere;
}
.pw-an__value--digit{ color:var(--accent); }
.pw-an__caption{ font-size:12.5px; line-height:1.45; color:var(--text-dim); }
.pw-an__op{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  font-size:22px; font-weight:300; color:var(--text-faint);
}

/* ---------- reasons + rules ---------- */
.pwgen-features.features__grid .feature-card{ background:var(--bg-elev); }
.pwgen-features.features__grid .feature-card:hover{ background:#11141a; }
.pw-rules{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.pw-rule{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px 22px 22px 20px;
  border:1px solid var(--border); border-radius:16px;
  background:var(--bg-elev);
  transition:border-color .25s var(--ease);
}
.pw-rule:hover{ border-color:rgba(79,141,255,.45); }
.pw-rule__icon{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0;
  border-radius:10px;
  background:var(--accent-soft); color:var(--accent);
}
.pw-rule__icon svg{ width:18px; height:18px; }
.pw-rule h3{ font-size:16px; margin:6px 0 6px; letter-spacing:-.01em; }
.pw-rule p{ font-size:14.5px; line-height:1.6; color:var(--text-dim); }

.pwgen-credit{
  margin-top:26px;
  font-size:12.5px; line-height:1.6; color:var(--text-faint);
}
.pwgen-credit a{ color:var(--text-dim); border-bottom:1px solid var(--border); transition:color .2s var(--ease), border-color .2s var(--ease); }
.pwgen-credit a:hover{ color:var(--accent); border-color:var(--accent); }

.pwgen-back{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:56px;
  font-size:14px; color:var(--text-dim);
  transition:color .2s var(--ease);
}
.pwgen-back svg{ width:16px; height:16px; }
.pwgen-back:hover{ color:var(--accent); }

.pwgen-noscript{
  padding:18px 20px;
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  font-size:14.5px; color:var(--text-dim);
  text-align:center;
}

/* ---------- scroll reveal (class added by pwgen.js below the fold only) ---------- */
.reveal-pending{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-pending.is-revealed{ opacity:1; transform:none; }

/* ---------- breakpoints ---------- */
@media (max-width:900px){
  .pw-controls{ grid-template-columns:1fr; }
  .pw-alts{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .pwgen-page{ padding:124px 16px 90px; }
  .pwgen__intro{ margin-bottom:40px; }
  .pwgen-card{ border-radius:20px; }
  .pwgen-card__top{ justify-content:center; }
  .pw-actions .btn{ flex:1 1 200px; }
  .pw-stats{ grid-template-columns:1fr; }
  .pw-stats > div{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:13px 16px; }
  .pw-stats dt{ margin:0; }
  .pw-stats dd{ text-align:right; }
  .pw-rules{ grid-template-columns:1fr; }
  .pw-anatomy{ flex-direction:column; }
  .pw-an__tile{ flex:1 1 auto; }
  .pw-an__op{ padding:0; line-height:1; }
}
@media (max-width:400px){
  .pwgen__format{ font-size:12px; }
  .pw-alt__use{ padding:14px 12px; gap:10px; }
  .pw-alt__copy{ width:50px; }
}
/* Large desktops / 32" monitors: let the tool breathe instead of floating
   as a small box in the middle of a very wide screen. */
@media (min-width:1920px){
  .pwgen-page{ padding-top:180px; }
  .pwgen{ max-width:min(68vw,1680px); }
  .pwgen__intro{ max-width:960px; }
  .pwgen__intro h1{ font-size:clamp(76px,4vw,104px); }
  .pwgen__lede{ max-width:760px; font-size:20px; }
  .pw-display{ --pw-size:clamp(74px,3.9vw,104px); }
  .pw-display[data-count="5"]{ --pw-size:clamp(66px,3.4vw,92px); }
  .pw-display[data-count="6"]{ --pw-size:clamp(58px,3vw,82px); }
  .pw-display[data-count="7"]{ --pw-size:clamp(52px,2.65vw,74px); }
  .pw-display[data-count="8"]{ --pw-size:clamp(46px,2.35vw,66px); }
  .pw-stats dd{ font-size:22px; }
  .pwgen-section__head{ max-width:760px; }
  .pwgen-section__head h2{ font-size:clamp(40px,2.2vw,52px); }
}

@media (prefers-reduced-motion:reduce){
  .pwgen-card{ animation:none; }
  .pwgen-card::after,
  .pwgen-stage:has(.pwgen-card.is-pulsing) .pwgen-halo{ animation:none; }
  .pw-display.is-decoding .pw-block{ animation:none; }
  .pw-meter__fill{ transition:none; }
  .pw-meter__fill::after{ animation:none; }
  .pw-local__dot{ animation:none; }
  .pw-count__ind{ transition:none; }
  .pw-new.is-spinning svg{ animation:none; }
  .reveal-pending{ opacity:1; transform:none; transition:none; }
}