/* Name generator. Sits on the shared Ink & Steel sheet (site.css). */
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/saira-condensed-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/saira-condensed-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/saira-condensed-900-latin.woff2") format("woff2"); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--gold); color: var(--cta-ink); font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.skip-link:focus { top: 12px; text-decoration: none; }

.names-page h1 { font-size: clamp(36px, 7vw, 64px); max-width: 14ch; }

.generator {
  position: relative;
  isolation: isolate;
  margin: 0 var(--gutter) 8px;
  padding: 22px 22px 26px;
  background: var(--slab);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-hard);
}
.generator.is-casting { animation: cast-glow 640ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cast-glow {
  0% { box-shadow: var(--shadow-hard), 0 0 0 transparent; }
  28% { box-shadow: var(--shadow-hard), 0 0 28px var(--fx, transparent); }
  100% { box-shadow: var(--shadow-hard); }
}
.fx-layer,
.fx-flash,
.ink-wipe {
  position: absolute;
  pointer-events: none;
}
.fx-layer {
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
}
.fx-flash {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 38%, var(--fx, rgba(247, 201, 96, 0.55)), transparent 58%);
  opacity: 0;
}
.fx-flash.is-on { animation: chakra-flash 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes chakra-flash {
  0% { opacity: 0; }
  18% { opacity: 0.9; }
  100% { opacity: 0; }
}
.ink-wipe {
  z-index: 4;
  height: 14px;
  opacity: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, transparent, var(--fx, #f7c960) 12%, #fff6d8 48%, var(--fx, #f7c960) 78%, transparent);
  transform: scaleX(0) rotate(-7deg);
  transform-origin: left center;
}
.ink-wipe.is-on { animation: brush-wipe 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes brush-wipe {
  0% { opacity: 0.95; transform: scaleX(0) rotate(-7deg); }
  46% { opacity: 1; transform: scaleX(1) rotate(-7deg); }
  100% { opacity: 0; transform: scaleX(1.02) rotate(-7deg); }
}
@keyframes ink-slash {
  0% { opacity: 1; transform: scaleX(0); }
  62% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
.generator-top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 28px;
  margin: 0 0 8px;
}
.generator-kicker { margin: 0; }
.sound-toggle {
  flex: 0 0 auto;
  height: 28px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid rgba(242, 232, 213, 0.35);
  background: rgba(10, 7, 6, 0.72);
  color: var(--gold-hi);
  font: 700 11px/1 var(--font-disp);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.sound-toggle[aria-pressed="false"] {
  color: rgba(242, 232, 213, 0.55);
  border-color: rgba(242, 232, 213, 0.2);
}
.result-name {
  position: relative;
  z-index: 3;
  margin: 0;
  height: 1.9em;
  font-weight: 900;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 0.95;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--bone);
  overflow: hidden;
}
.result-name.is-held,
.jutsu-name.is-held,
.jutsu-meta.is-held { opacity: 0; }
.epithet.is-held { opacity: 0; }
.jutsu-name.is-land,
.jutsu-meta.is-land { animation: jutsu-land 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.result-name.is-land { animation: title-land 460ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.epithet.is-land { animation: epithet-land 360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.result-name.is-land::after,
.jutsu-name.is-land::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--fx, #f7c960), #fff6d8, transparent);
  transform-origin: left center;
  animation: ink-slash 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes jutsu-land {
  0% { opacity: 0; transform: translateX(-10px); }
  55% { opacity: 1; transform: translateX(2px); text-shadow: 0 0 14px var(--fx, rgba(247, 201, 96, 0.85)); }
  100% { opacity: 1; transform: none; text-shadow: none; }
}
@keyframes title-land {
  0% { opacity: 0; transform: translateX(-16px) skewX(-6deg); }
  28% { opacity: 1; transform: translateX(5px) skewX(2deg); text-shadow: 0 0 18px var(--fx, rgba(247, 201, 96, 0.9)); }
  62% { transform: translateX(-2px) skewX(0deg); }
  100% { opacity: 1; transform: none; text-shadow: none; }
}
@keyframes epithet-land {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}
.epithet {
  position: relative;
  z-index: 3;
  margin: 8px 0 0;
  height: 1.7em;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.2px;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
}
.epithet.is-blank { visibility: hidden; }
.seal-label, .jutsu-label {
  position: relative;
  z-index: 3;
  margin: 22px 0 10px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-mid);
}
.seals {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  height: 64px;
}
.seals li {
  margin: 0;
  min-width: 0;
  height: 64px;
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: var(--ink);
  border: 1px solid rgba(242, 232, 213, 0.14);
  transform: skewX(var(--skew));
  font-weight: 900;
  font-size: clamp(11px, 2.6vw, 15px);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--bone);
  overflow: visible;
}
.seals li.is-held { opacity: 0; }
.seals li.is-shown { animation: seal-tap 340ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes seal-tap {
  0% { opacity: 0; transform: skewX(var(--skew)) scale(0.78); box-shadow: none; }
  16% { opacity: 1; transform: skewX(var(--skew)) scale(0.7); }
  58% {
    opacity: 1;
    transform: skewX(var(--skew)) scale(1.06);
    box-shadow: 0 0 0 1px var(--fx, rgba(217, 161, 59, 0.8)), 0 0 18px var(--fx, rgba(217, 161, 59, 0.55));
  }
  100% { opacity: 1; transform: skewX(var(--skew)) scale(1); box-shadow: none; }
}
.seals li span { transform: skewX(10deg); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seal-num { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 1.4px; color: var(--gold); }
.jutsu-name {
  position: relative;
  z-index: 3;
  margin: 0;
  height: 2em;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold-hi);
  overflow: hidden;
}
.jutsu-meta {
  position: relative;
  z-index: 3;
  margin: 8px 0 0;
  height: 1.4em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(242, 232, 213, 0.5);
  white-space: nowrap;
  overflow: hidden;
}
.tool-actions { position: relative; z-index: 5; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.tool-actions .btn { cursor: pointer; }

.prose h2 { scroll-margin-top: 24px; }
.steps { margin: 8px 0 18px; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: baseline;
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--gold);
}

.qa { margin: 8px 0 0; display: flex; flex-direction: column; }
.qa details { border-top: 1px solid rgba(242, 232, 213, 0.12); }
.qa details:last-child { border-bottom: 1px solid rgba(242, 232, 213, 0.12); }
.qa summary {
  list-style: none;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
  color: var(--bone);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 700 19px var(--font-mono); color: var(--gold); }
.qa details[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .qa summary::after { transition: transform 200ms ease; }
}
.qa .detail-body { padding: 0 0 8px; }
.qa .detail-body p { max-width: 62ch; }

.cta-band {
  margin: 12px var(--gutter) 48px;
  padding: 28px 22px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.cta-band h2 { margin-top: 0; }
.cta-band p { max-width: 62ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.cta-actions .btn { white-space: normal; text-align: center; height: auto; min-height: 52px; padding: 16px 22px; }

@media (max-width: 720px) {
  .generator, .cta-band { padding-right: 16px; padding-left: 16px; }
  .tool-actions .btn, .cta-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .generator.is-casting,
  .fx-flash.is-on,
  .ink-wipe.is-on,
  .seals li.is-shown,
  .result-name.is-land,
  .result-name.is-land::after,
  .epithet.is-land,
  .jutsu-name.is-land,
  .jutsu-name.is-land::after,
  .jutsu-meta.is-land { animation: none; }
  .result-name.is-held,
  .epithet.is-held,
  .jutsu-name.is-held,
  .jutsu-meta.is-held,
  .seals li.is-held { opacity: 1; }
}