/* DJD quizzes hub: motion and colour for /quizzes/, plus the language switch
   used on every quiz page. Presentation only. */

/* ---------- language switch ---------- */

.djd-q-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 1.4rem;
}
.djd-q-lang-k {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--djd-muted);
}
.djd-q-lang-group {
  display: inline-flex;
  border: 1px solid var(--djd-line);
  border-radius: 999px;
  padding: 2px;
  background: rgba(0, 0, 0, .25);
}
.djd-q-lang-btn {
  border: 0;
  background: transparent;
  color: var(--djd-muted);
  font: inherit;
  font-size: .8rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.djd-q-lang-btn:hover { color: var(--djd-text); }
.djd-q-lang-btn.is-on {
  background: linear-gradient(95deg, var(--djd-cyan), var(--djd-gold));
  color: #0b0b0d;
  font-weight: 600;
}

/* Korean sets its own line height. Hangul needs more room than Latin. */
html[data-djd-lang="ko"] .djd-q-title { line-height: 1.42; }
html[data-djd-lang="ko"] .djd-q-opt { line-height: 1.6; }
html[data-djd-lang="ko"] .djd-q-body { line-height: 1.8; }
html[data-djd-lang="ko"] .djd-q-result-name { line-height: 1.32; }

/* ---------- outcome preview strip ---------- */

/* The strip on each quiz intro was laid out for nine archetypes. There are
   twelve now, so the last three wrapped onto a second row and read as a
   mistake. One row, tiles that shrink to fit. The rule that sets nine columns
   lives in a snippet the host firewall will not let us re-save, so this
   overrides it from here. */
.djd-quiz-root .djd-q-preview {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}
.djd-quiz-root .djd-q-preview > * {
  min-width: 0;
  aspect-ratio: 1 / 1;
  height: auto;
}
.djd-quiz-root .djd-q-preview svg {
  width: 60%;
  height: 60%;
}
@media (max-width: 720px) {
  .djd-quiz-root .djd-q-preview { gap: 4px; }
}

/* ---------- card artwork ---------- */

/* The original banners were near black, and the festival one was almost
   invisible. hub.js redraws them; this lifts the plate they sit on. */
.djd-hub-art {
  background:
    radial-gradient(120% 140% at 50% 120%, rgba(255, 201, 60, .20), transparent 62%),
    linear-gradient(135deg, rgba(52, 245, 225, .14), rgba(166, 140, 255, .16) 46%, rgba(255, 95, 168, .14)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* The banner hub.js builds for cards that shipped without one. */
.djd-hub-art-made {
  height: 116px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 1rem;
}
.djd-hub-art svg { transition: transform .5s cubic-bezier(.2, .75, .3, 1); }
.djd-hub-card:hover .djd-hub-art svg { transform: scale(1.04); }

/* The same plate, round, behind the quiz intro hero. */
.djd-q-hero.djd-hub-art {
  border-radius: 50%;
  overflow: hidden;
}

/* The banner on the Know Your Scene card and the Ego Test page. */
.djd-page-hero {
  height: 150px;
  margin: 0 0 1.6rem;
}
@media (max-width: 720px) {
  .djd-page-hero { height: 116px; }
}
.djd-a-sun440 { transform-origin: 300px 100px; animation-duration: 9s; }

/* A sleeve being flipped through in the crate. */
.djd-a-flip {
  transform-box: view-box;
  animation: djdFlip 5.4s ease-in-out infinite;
}
@keyframes djdFlip {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-7px); }
}

/* The corrected count pill, which now lives in the card body rather than as a
   badge over the artwork. */
.djd-hub-pill {
  color: var(--djd-gold, #ffc93c) !important;
  border-color: rgba(255, 201, 60, .45) !important;
}

/* ---------- card layout ---------- */

/* Cards were ragged: uneven heights, text breaking mid word, and a count
   badge that was too narrow to hold its own label so it split QUESTIONS
   across two lines. The badge is gone; this squares up what is left. */
.djd-hub-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 1.15rem 1.15rem 1.3rem;
}
.djd-hub-card > * { align-self: stretch; }

/* Never break a word. This is a house rule as much as a layout one. */
.djd-hub-card,
.djd-hub-card * {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.djd-hub-card h2,
.djd-hub-card h3 {
  margin: 0 0 .5rem;
  text-wrap: balance;
  line-height: 1.22;
}
.djd-hub-card p { margin: 0 0 .7rem; }

/* Push the call to action to the bottom so every card ends on the same line. */
.djd-hub-card > :last-child { margin-top: auto; padding-top: .3rem; }

/* Equal height cards. height:100% only equalises within a grid row, so the
   rows themselves have to be told to match too. */
.djd-quizzes-hub .djd-hub-card { height: 100%; }
/* The grid the block editor emits sits two levels down, not one, so the rule
   has to reach the div that actually holds the cards. */
.djd-quizzes-hub > div,
.djd-quizzes-hub > div > div,
.djd-quizzes-hub .djd-quizzes-hub { grid-auto-rows: 1fr; }

/* Motion. The rig runs, slowly. All of it is switched off below for anyone
   who has asked for reduced motion. */
.djd-a-spin,
.djd-a-sweep,
.djd-a-glow,
.djd-a-blink,
.djd-a-arm,
.djd-a-cone,
.djd-a-bar,
.djd-a-laser { transform-box: view-box; }

.djd-a-spin {
  transform-origin: 92px 66px;
  animation: djdSpin 5.2s linear infinite;
}
.djd-a-spin240 { transform-origin: 120px 120px; }
.djd-a-ball { transform-origin: 120px 46px; animation-duration: 11s; }
@keyframes djdSpin { to { transform: rotate(360deg); } }

/* The needle tracks in across the grooves, then lifts and returns. */
.djd-a-needle {
  transform-box: view-box;
  transform-origin: 215px 27px;
  animation: djdNeedle 12s ease-in-out infinite alternate;
}
@keyframes djdNeedle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(26deg); }
}

.djd-a-sweep {
  transform-origin: 220px 0;
  animation: djdSweep 9s ease-in-out infinite alternate;
}
.djd-a-sweep240 { transform-origin: 120px 46px; }
.djd-a-arm240 { transform-origin: 120px 200px; }
@keyframes djdSweep {
  from { transform: rotate(-7deg); }
  to   { transform: rotate(7deg); }
}

.djd-a-glow { animation: djdGlow 4.4s ease-in-out infinite alternate; }
@keyframes djdGlow {
  from { opacity: .14; transform: scale(1); }
  to   { opacity: .34; transform: scale(1.09); }
}

/* Sound leaving the booth on the clubber floor plan. */
.djd-a-ring {
  transform-box: view-box;
  animation: djdRing 3.2s ease-out infinite;
}
@keyframes djdRing {
  0%   { transform: scale(.88); opacity: .7; }
  70%  { opacity: .18; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* The year readout counts back. Five stacked labels, one lit at a time. */
.djd-a-year {
  opacity: 0;
  animation: djdYear 10s steps(1, end) infinite;
}
@keyframes djdYear {
  0%, 18%   { opacity: 1; }
  20%, 100% { opacity: 0; }
}

/* The scrubber steps along the timeline in time with the readout. */
.djd-a-scrub {
  transform-box: view-box;
  animation: djdScrub 10s steps(1, end) infinite;
}
@keyframes djdScrub {
  0%, 18%    { transform: translateX(0); }
  20%, 38%   { transform: translateX(44px); }
  40%, 58%   { transform: translateX(88px); }
  60%, 78%   { transform: translateX(132px); }
  80%, 100%  { transform: translateX(176px); }
}

/* The era dial needle, stepping round in time with the year readout. */
.djd-a-dial {
  transform-box: view-box;
  animation: djdDial 10s steps(1, end) infinite;
}
@keyframes djdDial {
  0%, 18%   { transform: rotate(-198deg); }
  20%, 38%  { transform: rotate(-130deg); }
  40%, 58%  { transform: rotate(-63deg); }
  60%, 78%  { transform: rotate(5deg); }
  80%, 100% { transform: rotate(72deg); }
}

/* Something travelling along the route to the destination city. */
.djd-a-route { animation: djdRoute 2.8s linear infinite; }
@keyframes djdRoute { to { stroke-dashoffset: -28; } }

/* The orbit around the globe. */
.djd-a-orbit {
  transform-box: view-box;
  animation: djdOrbit 16s linear infinite;
}
@keyframes djdOrbit { to { transform: rotate(360deg); } }

.djd-a-blink { animation: djdBlink 2.6s ease-in-out infinite; }
@keyframes djdBlink {
  0%, 100% { opacity: .45; }
  45%      { opacity: 1; }
}

.djd-a-arm {
  transform-origin: 220px 118px;
  animation: djdArm 2.9s ease-in-out infinite alternate;
}
@keyframes djdArm {
  from { transform: translateY(2px) rotate(-2deg); }
  to   { transform: translateY(-3px) rotate(2deg); }
}

.djd-a-cone { animation: djdCone 5.6s ease-in-out infinite alternate; }
@keyframes djdCone {
  from { transform: rotate(-6deg); opacity: .55; }
  to   { transform: rotate(6deg); opacity: 1; }
}

.djd-a-bar { animation: djdBar 1.5s ease-in-out infinite alternate; }
@keyframes djdBar {
  from { transform: scaleY(.55); }
  to   { transform: scaleY(1.35); }
}

.djd-a-laserL { animation: djdLaserL 6.4s ease-in-out infinite alternate; }
.djd-a-laserR { animation: djdLaserR 5.1s ease-in-out infinite alternate; }
@keyframes djdLaserL {
  from { transform: rotate(-13deg); opacity: .5; }
  to   { transform: rotate(9deg); opacity: 1; }
}
@keyframes djdLaserR {
  from { transform: rotate(12deg); opacity: 1; }
  to   { transform: rotate(-10deg); opacity: .5; }
}

/* ---------- result page ---------- */

/* The archetype glyph was 58px sitting in a 350px band, which read as an
   afterthought rather than the mark of the type. */
.djd-quiz-root .djd-q-glyph-wrap {
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.djd-quiz-root .djd-q-glyph {
  width: 112px !important;
  height: 112px !important;
}
@media (max-width: 560px) {
  .djd-quiz-root .djd-q-glyph-wrap { min-height: 92px; }
  .djd-quiz-root .djd-q-glyph { width: 88px !important; height: 88px !important; }
}

/* Give the map room to breathe once the labels have been pushed apart. */
.djd-quiz-root .djd-q-map { overflow: visible; }

/* Venue names that link out to the actual room. */
.djd-quiz-root a.djd-q-vlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 201, 60, .45);
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.djd-quiz-root a.djd-q-vlink:hover,
.djd-quiz-root a.djd-q-vlink:focus {
  color: var(--djd-gold, #ffc93c);
  text-decoration-color: var(--djd-gold, #ffc93c);
}

/* ---------- your mix ---------- */

.djd-q-mix {
  margin: 1.6rem 0 1.8rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(52, 245, 225, .05), rgba(255, 201, 60, .05));
}
.djd-q-mix-head {
  margin: 0 0 .85rem;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--djd-muted, #9d9890);
}
.djd-q-mix-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name pct" "bar bar";
  gap: .25rem .6rem;
  margin-bottom: .7rem;
}
.djd-q-mix-name {
  grid-area: name;
  font-size: .95rem;
  color: var(--djd-muted, #9d9890);
}
.djd-q-mix-row.is-top .djd-q-mix-name {
  color: #fff;
  font-weight: 600;
}
.djd-q-mix-pct {
  grid-area: pct;
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  color: var(--djd-muted, #9d9890);
}
.djd-q-mix-row.is-top .djd-q-mix-pct {
  color: var(--djd-gold, #ffc93c);
  font-weight: 700;
}
.djd-q-mix-bar {
  grid-area: bar;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.djd-q-mix-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--djd-cyan, #34f5e1), var(--djd-gold, #ffc93c));
  transform-origin: left center;
  animation: djdMixIn .75s cubic-bezier(.2, .75, .3, 1) both;
}
.djd-q-mix-row.is-top .djd-q-mix-bar i {
  background: linear-gradient(90deg, var(--djd-gold, #ffc93c), #ffe08a);
}
@keyframes djdMixIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.djd-q-mix-note {
  margin: .9rem 0 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--djd-muted, #9d9890);
}
html[data-djd-lang="ko"] .djd-q-mix-note { line-height: 1.75; }

/* ---------- quizzes hub ---------- */

.djd-quizzes-hub { position: relative; }

/* Cards lift and light up rather than just changing colour. The card is
   whatever element hub.js tagged, which on this page is the link itself. */
.djd-hub-card,
.djd-quizzes-hub .wp-block-column,
.djd-quizzes-hub .wp-block-group.has-background {
  transition: transform .28s cubic-bezier(.2, .75, .3, 1),
              box-shadow .28s ease,
              border-color .28s ease;
  will-change: transform;
}
.djd-hub-card:hover,
.djd-quizzes-hub .wp-block-column:hover,
.djd-quizzes-hub .wp-block-group.has-background:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 26px rgba(52, 245, 225, .12);
}

/* The icon inside a card leans in slightly with it. */
.djd-hub-card svg { transition: transform .32s cubic-bezier(.2, .75, .3, 1); }
.djd-hub-card:hover svg { transform: scale(1.08) rotate(-3deg); }

/* Headings pick up the accent on hover so the whole card reads as one target. */
.djd-quizzes-hub h2,
.djd-quizzes-hub h3 { transition: color .22s ease; }
.djd-hub-card:hover h2,
.djd-hub-card:hover h3,
.djd-quizzes-hub .wp-block-column:hover h3,
.djd-quizzes-hub .wp-block-group:hover h3 { color: var(--djd-gold, #ffc93c); }

/* Buttons get the same sheen as the quiz start button. */
.djd-quizzes-hub .wp-block-button__link {
  position: relative;
  overflow: hidden;
}
.djd-quizzes-hub .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: djdHubSheen 3.6s ease-in-out infinite;
}
@keyframes djdHubSheen {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* Cards arrive as you scroll to them, staggered down the page. */
.djd-quizzes-hub .djd-hub-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2, .75, .3, 1),
              transform .6s cubic-bezier(.2, .75, .3, 1);
}
.djd-quizzes-hub .djd-hub-reveal.is-in { opacity: 1; transform: none; }

/* A slow drifting glow behind the hub, so the page is never completely static. */
.djd-hub-aura {
  position: absolute;
  inset: -10% -5% auto -5%;
  height: 60%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(40% 60% at 20% 40%, rgba(52, 245, 225, .10), transparent 70%),
    radial-gradient(40% 60% at 80% 30%, rgba(255, 201, 60, .10), transparent 70%);
  animation: djdAura 18s ease-in-out infinite alternate;
}
@keyframes djdAura {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}
.djd-quizzes-hub > * { position: relative; z-index: 1; }

/* The count chip added to each card by hub.js. */
.djd-hub-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--djd-gold, #ffc93c);
  border: 1px solid rgba(255, 201, 60, .35);
  background: rgba(255, 201, 60, .08);
  border-radius: 999px;
  padding: .2rem .6rem;
  margin-bottom: .5rem;
}
.djd-hub-chip b { color: #fff; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .djd-hub-card,
  .djd-hub-card svg,
  .djd-quizzes-hub .wp-block-column,
  .djd-quizzes-hub .wp-block-group.has-background { transition: none; }
  .djd-hub-card:hover,
  .djd-hub-card:hover svg,
  .djd-quizzes-hub .wp-block-column:hover,
  .djd-quizzes-hub .wp-block-group.has-background:hover { transform: none; }
  .djd-quizzes-hub .wp-block-button__link::after,
  .djd-hub-aura,
  .djd-a-spin,
  .djd-a-sweep,
  .djd-a-glow,
  .djd-a-blink,
  .djd-a-arm,
  .djd-a-cone,
  .djd-a-bar,
  .djd-a-needle,
  .djd-a-orbit,
  .djd-a-ring,
  .djd-a-scrub,
  .djd-a-flip,
  .djd-a-dial,
  .djd-a-route,
  .djd-a-laser { animation: none; }
  .djd-q-mix-bar i { animation: none; }
  /* Without motion the readout would be blank, so pin the first year on. */
  .djd-a-year { animation: none; opacity: 0; }
  .djd-a-year:first-of-type { opacity: 1; }
  .djd-hub-art svg { transition: none; }
  .djd-hub-card:hover .djd-hub-art svg { transform: none; }
  .djd-hub-reveal { opacity: 1; transform: none; transition: none; }
}