/* CCNDR 2026 Wrap-Up: the nine cards.
   All sizes are in --u (1% of the stage width). Layouts are flex columns that are complete at
   9:16 and breathe on taller phones. */

/* ---------- Speech bubbles: the brand's soft-gradient bubbles, built in CSS ---------- */
.bubble {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: calc(var(--u) * 3.4);
  background: linear-gradient(142deg, #b88fcb 0%, #8851a1 44%, #4c2d61 100%);
  box-shadow: inset 0 calc(var(--u) * .5) calc(var(--u) * 1.4) rgba(255, 255, 255, .3), inset 0 calc(var(--u) * -1) calc(var(--u) * 2) rgba(43, 32, 51, .25), 0 calc(var(--u) * 1.8) calc(var(--u) * 4.5) rgba(20, 12, 26, .35);
}
.bubble::after {
  content: ''; position: absolute; left: 20%; top: calc(100% - 1px); width: calc(var(--u) * 4.4); height: calc(var(--u) * 3.8);
  background: #5f3777; clip-path: polygon(0 0, 100% 0, 14% 100%);
}
.bubble--round { border-radius: 50%; }
.bubble--round::after { left: 16%; top: 84%; rotate: 18deg; background: #56306c; }
.bubble--orange { background: linear-gradient(142deg, #fbc187 0%, #ee852d 48%, #d36723 100%); }
.bubble--orange::after { background: #e0762a; left: 18%; }

/* =====================================================================
   1. OPEN
   ===================================================================== */
.card--open { align-items: center; text-align: center; padding-left: 0; padding-right: 0; padding-top: calc(var(--u) * 19); padding-bottom: calc(var(--u) * 7.5); }
.open__logo { width: calc(var(--u) * 31); height: auto; flex: none; }
.open__hero { position: relative; flex: 1 1 auto; width: 100%; min-height: calc(var(--u) * 84); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.open__globe { position: relative; width: calc(var(--u) * 58); height: calc(var(--u) * 58); flex: none; border-radius: 50%; }

.open__bubble { position: absolute; display: block; }
.open__bubble--a { left: calc(var(--u) * -13); top: calc(var(--u) * 21); width: calc(var(--u) * 20); height: calc(var(--u) * 12.5); animation: bob 6.5s ease-in-out infinite alternate; }
.open__bubble--b { right: calc(var(--u) * -9.5); top: calc(var(--u) * 5); width: calc(var(--u) * 17); height: calc(var(--u) * 13.5); animation: bob 7.5s ease-in-out -2s infinite alternate-reverse; }
.open__bubble--c { right: calc(var(--u) * 6); top: 46%; width: calc(var(--u) * 12.5); height: calc(var(--u) * 8.6); animation: bob 5.6s ease-in-out -1s infinite alternate; }
.open__bubble--c .bubble { border-radius: calc(var(--u) * 2.4); }
.open__bubble--c .bubble::after { width: calc(var(--u) * 3); height: calc(var(--u) * 2.8); }
.open__bubble--a .bubble { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); }
.open__bubble--a .bubble i { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); border-radius: 50%; background: rgba(255, 255, 255, .85); animation: dot 1.3s ease-in-out infinite; }
.open__bubble--a .bubble i:nth-child(2) { animation-delay: .16s; }
.open__bubble--a .bubble i:nth-child(3) { animation-delay: .32s; }
@keyframes bob { from { transform: translateY(calc(var(--u) * -1.2)) rotate(-1.5deg); } to { transform: translateY(calc(var(--u) * 1.4)) rotate(1.5deg); } }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(calc(var(--u) * -1.1)); opacity: 1; } }

.open__year-wrap { position: relative; margin-top: calc(var(--u) * -25); flex: none; }
.open__year { font-size: calc(var(--u) * 42); line-height: .86; letter-spacing: -.055em; white-space: nowrap; padding-right: .04em; }
.open__digit { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .04em; margin: -.06em -.02em -.04em; }
.open__digit > i {
  display: inline-block; font-style: normal;
  background: linear-gradient(180deg, #fff 22%, #f1e4f3 52%, #c9a8d2 96%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff;
  filter: drop-shadow(0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(20, 12, 26, .55));
}
.card--open.is-active .open__digit > i { animation: open-digit 1.25s var(--spring) both; animation-delay: calc(520ms + var(--i) * 95ms); }
@keyframes open-digit { from { transform: translateY(112%) rotate(9deg); } to { transform: none; } }

.open__sticker {
  position: absolute; right: calc(var(--u) * 1.5); top: calc(var(--u) * -4.6); rotate: -8deg;
  padding: calc(var(--u) * 1.9) calc(var(--u) * 4) calc(var(--u) * 2.1); border-radius: 99px;
  background: linear-gradient(180deg, var(--ccndr-orange-300), var(--ccndr-orange-400) 55%, var(--ccndr-orange-500));
  color: var(--ccndr-plum-900); font: 700 calc(var(--u) * 5.6)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(20, 12, 26, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.open__line { font-size: calc(var(--u) * 7.6); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; margin-top: calc(var(--u) * 3); padding: 0 calc(var(--u) * 6); }
.open__line > span { display: block; }
.open__line2 { color: var(--ccndr-orange-400); }

.open__cue {
  margin-top: calc(var(--u) * 6); flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 2.2);
  min-height: calc(var(--u) * 10.6); padding: 0 calc(var(--u) * 4.4) 0 calc(var(--u) * 4);
  border-radius: 99px; color: #fff; font: 600 calc(var(--u) * 3.7)/1 var(--font-display); letter-spacing: .01em;
  box-shadow: inset 0 0 0 calc(var(--u) * .3) rgba(239, 226, 239, .5); background: rgba(255, 255, 255, .06);
  transition: background-color .2s ease, transform .2s var(--ease-out);
}
.open__cue:hover { background: rgba(255, 255, 255, .16); }
.open__cue:active { transform: scale(.96); }
.open__cue svg { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); animation: nudge 1.4s var(--ease-in-out) infinite; }
.open__cue-dot { position: relative; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: var(--ccndr-orange-400); }
.open__cue-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * .35) solid var(--ccndr-orange-400); animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc(var(--u) * .9)); } }

/* Tall phones: the globe grows into the extra height (--H is the stage height in u). */
.open__globe { --globe: clamp(calc(var(--u) * 56), calc(var(--u) * (var(--H) - 122)), calc(var(--u) * 76)); width: var(--globe); height: var(--globe); }

/* =====================================================================
   2. HEADLINE
   ===================================================================== */
.card--headline { padding-top: calc(var(--u) * 21.5); padding-bottom: calc(var(--u) * 26); justify-content: space-between; gap: calc(var(--u) * 4); }
.hl__sun {
  position: absolute; right: calc(var(--u) * -24); top: calc(var(--u) * -14); width: calc(var(--u) * 78); height: calc(var(--u) * 78); border-radius: 50%;
  background: radial-gradient(circle at 38% 40%, rgba(255, 255, 255, .5) 0%, rgba(251, 208, 163, .45) 34%, rgba(245, 165, 90, 0) 70%);
}
.hl__top { position: relative; }
.hl__kicker { --kicker: var(--ccndr-plum-900); }
.hl__num {
  font-size: calc(var(--u) * 26.4); line-height: 1; color: #fff; margin: calc(var(--u) * 2.6) 0 0 calc(var(--u) * -1.4); letter-spacing: -.02em;
  text-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3.2) rgba(132, 54, 8, .38);
}
.hl__num .odo__d { width: .585em; }
.hl__num .odo__sep { width: .27em; }
.hl__label { font-size: calc(var(--u) * 6.5); font-weight: 600; line-height: 1.14; letter-spacing: -.022em; color: var(--ccndr-plum-900); max-width: calc(var(--u) * 84); margin-top: calc(var(--u) * 2.4); }

.hl__second {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 4.6) calc(var(--u) * 5.6) calc(var(--u) * 5); border-radius: calc(var(--u) * 5.6); color: #fff;
  background: linear-gradient(135deg, #3a2946 0%, #2b2033 55%, #231a2a 100%);
  box-shadow: 0 calc(var(--u) * 2.6) calc(var(--u) * 6.5) rgba(110, 44, 6, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
  transform-origin: 20% 60%; margin-top: calc(var(--u) * 6);
}
.hl__pre { display: block; font: 700 calc(var(--u) * 3)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ccndr-lilac-300); }
.hl__second-num { display: block; font-size: calc(var(--u) * 14.6); line-height: 1; color: var(--ccndr-orange-400); margin: calc(var(--u) * 1.4) 0 calc(var(--u) * .4) calc(var(--u) * -.7); }
.hl__second-num .odo__d { width: .59em; }
.hl__post { display: block; font: 600 calc(var(--u) * 4.7)/1.1 var(--font-display); letter-spacing: -.01em; }
.hl__orgs { display: grid; grid-template-columns: repeat(5, calc(var(--u) * 2.9)); gap: calc(var(--u) * 1.35); flex: none; }
.hl__orgs i { width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); border-radius: calc(var(--u) * .85); background: var(--ccndr-violet-500); }
.hl__orgs i:nth-child(3n) { background: var(--ccndr-orange-400); }
.hl__orgs i:nth-child(4n + 1) { background: var(--ccndr-lilac-300); }
.card--headline.is-active .hl__orgs i { animation: k-pop .6s var(--spring) both; animation-delay: calc(3300ms + var(--i) * 45ms); }

.hl__wink { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2) calc(var(--u) * 2.8); }
.hl__wink-line { font-size: calc(var(--u) * 5); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--ccndr-plum-900); }
.hl__tag {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 1.3); padding: calc(var(--u) * 1.7) calc(var(--u) * 3) calc(var(--u) * 1.8) calc(var(--u) * 2.4); border-radius: 99px;
  background: #fff; color: var(--ccndr-plum-900); font: 700 calc(var(--u) * 3.6)/1 var(--font-display); rotate: -3deg; white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.6) rgba(110, 44, 6, .35);
}
.hl__tag svg { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); color: var(--ccndr-orange-600); }

.hl__road { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 6.5); height: calc(var(--u) * 14); overflow: hidden; }
.hl__road::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 1); height: calc(var(--u) * .55);
  background: repeating-linear-gradient(90deg, rgba(43, 32, 51, .55) 0 calc(var(--u) * 3.2), transparent calc(var(--u) * 3.2) calc(var(--u) * 6.4));
}
.hl__convoy { position: absolute; left: 0; bottom: calc(var(--u) * 1.5); display: flex; gap: calc(var(--u) * 5.5); padding-right: calc(var(--u) * 5.5); width: max-content; animation: convoy 15s linear infinite; }
.hl__bus { display: block; flex: none; width: calc(var(--u) * 17); animation: bus-bounce .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
.hl__bus svg { display: block; width: 100%; height: auto; }
@keyframes convoy { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes bus-bounce { from { transform: translateY(0); } to { transform: translateY(calc(var(--u) * -.35)); } }

/* =====================================================================
   4. PILLARS (top genres)
   ===================================================================== */
.card--pillars { padding: calc(var(--u) * 20) 0 calc(var(--u) * 6); }
.pl__head { padding: 0 calc(var(--u) * 7); }
.pl__kicker { --kicker: var(--ccndr-violet-500); }
.pl__title { font-size: calc(var(--u) * 11.6); color: var(--ccndr-purple-700); margin-top: calc(var(--u) * 1.2); }
.pl__sub { font-size: calc(var(--u) * 3.75); line-height: 1.4; color: rgba(43, 32, 51, .8); margin-top: calc(var(--u) * 2.2); max-width: calc(var(--u) * 72); }

.pl__chart { flex: 1 1 auto; min-height: calc(var(--u) * 62); display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * 3.4); padding: 0 calc(var(--u) * 5); margin-top: calc(var(--u) * 1); }
.pl__pillar {
  position: relative; width: calc(var(--u) * 17.5); flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6);
  transition: translate .45s var(--spring-soft); border-radius: calc(var(--u) * 2);
}
.pl__pillar:hover { translate: 0 calc(var(--u) * -.8); }
.pl__pillar.is-selected { translate: 0 calc(var(--u) * -1.8); }
.pl__stack { position: relative; display: block; width: 100%; }
.pl__block { display: block; }
.pl__col { display: block; width: 100%; height: auto; overflow: visible; }
.pl__pct { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; margin-bottom: calc(var(--u) * .4); font-size: calc(var(--u) * 8.2); line-height: 1; color: var(--ccndr-purple-700); white-space: nowrap; transition: color .3s ease; }
.pl__pct small { font-size: .52em; font-weight: 700; margin-left: .05em; }
.pl__pct.is-fr small { margin-left: .2em; }
.pl__name { font: 700 calc(var(--u) * 3.6)/1.1 var(--font-body); color: var(--ccndr-plum-900); transition: color .3s ease; }

.pl__s-t1 { stop-color: #efe2ef; transition: stop-color .35s ease; } .pl__s-t2 { stop-color: #c9a8d2; transition: stop-color .35s ease; }
.pl__s-l1 { stop-color: #a06bb8; } .pl__s-l2 { stop-color: #74428c; }
.pl__s-r1 { stop-color: #643a7c; } .pl__s-r2 { stop-color: #42265a; }
.pl__icon { fill: var(--ccndr-orange-300); stroke: var(--ccndr-orange-300); transition: fill .3s ease, stroke .3s ease; }
.pl__pillar.is-selected .pl__s-t1 { stop-color: #fbd0a3; } .pl__pillar.is-selected .pl__s-t2 { stop-color: #ee852d; }
.pl__pillar.is-selected .pl__icon { fill: #fff; stroke: #fff; }
.pl__pillar.is-selected .pl__pct { color: var(--ccndr-orange-600); }
.pl__pillar.is-selected .pl__name { color: var(--ccndr-purple-700); }
.card--pillars.has-selection .pl__pillar:not(.is-selected) .pl__col { opacity: .82; }
.pl__col { transition: opacity .3s ease; }

.card--pillars.is-active .pl__rise { animation: pl-rise 1.2s var(--spring-soft) both; animation-delay: calc(1100ms + var(--r) * 260ms); }
.card--pillars.is-active .pl__pct { animation: pl-label 1.2s var(--spring-soft) both; animation-delay: calc(1100ms + var(--r) * 260ms); }
.card--pillars.is-active .pl__name, .card--pillars.is-active .pl__shadow { animation: k-fade .6s ease both; animation-delay: calc(1000ms + var(--r) * 260ms); }
@keyframes pl-rise { from { transform: translateY(calc(var(--h) * 1px)); } to { transform: none; } }
@keyframes pl-label { 0% { transform: translateY(calc(var(--h) * var(--u) * .175)); opacity: 0; } 20% { opacity: 1; } 100% { transform: none; opacity: 1; } }

.pl__punch { font-size: calc(var(--u) * 7.8); color: var(--ccndr-purple-700); padding: 0 calc(var(--u) * 7); margin-top: calc(var(--u) * 3.4); }
.pl__punch .is-accent { color: var(--ccndr-orange-600); }

.pl__panel {
  margin: calc(var(--u) * 3.2) calc(var(--u) * 5) 0; min-height: calc(var(--u) * 31.5); padding: calc(var(--u) * 4.4) calc(var(--u) * 5.4) calc(var(--u) * 4.6);
  border-radius: calc(var(--u) * 5.6); color: #fff; display: flex; flex-direction: column; justify-content: center; flex: none;
  background: linear-gradient(135deg, #3a2946 0%, #2b2033 55%, #231a2a 100%);
  box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 6) rgba(43, 32, 51, .28);
}
.pl__hint { display: flex; align-items: center; gap: calc(var(--u) * 3); font: 600 calc(var(--u) * 4.5)/1.2 var(--font-display); color: var(--ccndr-lilac-300); }
.pl__hint-ico { position: relative; flex: none; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: rgba(238, 133, 45, .16); }
.pl__hint-ico::before { content: ''; position: absolute; inset: 31%; border-radius: 50%; background: var(--ccndr-orange-400); }
.pl__hint-ico::after { content: ''; position: absolute; inset: 16%; border-radius: 50%; border: calc(var(--u) * .4) solid var(--ccndr-orange-400); animation: ping 1.8s var(--ease-out) infinite; }
.pl__d-top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); }
.pl__d-name { font-size: calc(var(--u) * 6.8); color: var(--ccndr-lilac-300); }
.pl__d-share { font: 500 calc(var(--u) * 2.9)/1.25 var(--font-body); color: var(--ccndr-lilac-200); text-align: right; }
.pl__d-share b { font: 700 calc(var(--u) * 3.9)/1 var(--font-display); color: var(--ccndr-orange-300); }
.pl__d-line { font-size: calc(var(--u) * 3.9); line-height: 1.38; color: rgba(255, 255, 255, .94); margin-top: calc(var(--u) * 1.5); }
.pl__d-stat { display: flex; align-items: baseline; gap: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 3.6); line-height: 1.2; color: var(--ccndr-lilac-200); }
.pl__d-stat i { font: 700 calc(var(--u) * 5)/1 var(--font-display); font-style: normal; color: var(--ccndr-orange-400); }
.pl__d-stat b { font-size: calc(var(--u) * 6.2); line-height: 1; color: #fff; }
.pl__panel-in.is-swap > * { animation: k-up .5s var(--ease-out) both; }
.pl__panel-in.is-swap > *:nth-child(2) { animation-delay: 70ms; }
.pl__panel-in.is-swap > *:nth-child(3) { animation-delay: 140ms; }

/* =====================================================================
   5. TOP FIVE
   ===================================================================== */
.card--topfive { padding: calc(var(--u) * 20) calc(var(--u) * 6) calc(var(--u) * 7); }
.tf__head { position: relative; padding: 0 calc(var(--u) * 1); }
.tf__kicker { --kicker: #fff; }
.tf__title { font-size: calc(var(--u) * 10.8); color: #fff; margin-top: calc(var(--u) * 1.4); max-width: calc(var(--u) * 72); }
.tf__ghost {
  position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 14); font-size: calc(var(--u) * 50); line-height: 1; height: 1em; overflow: hidden;
  color: transparent; -webkit-text-stroke: calc(var(--u) * .5) rgba(255, 255, 255, .26);
}
.tf__ghost-strip { display: block; transform: translateY(calc(var(--step, 0) * -1em)); transition: transform .75s var(--spring-soft); }
.tf__ghost-strip b { display: block; height: 1em; line-height: 1em; font-weight: 700; text-align: right; }

.tf__list { position: relative; flex: 1 1 auto; max-height: calc(var(--u) * 134); margin-top: calc(var(--u) * 5); display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 2); }
.tf__row { position: relative; display: grid; grid-template-columns: calc(var(--u) * 9) calc(var(--u) * 12.5) 1fr; align-items: center; column-gap: calc(var(--u) * 3); padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 1); color: #fff; }
.tf__rank { font-size: calc(var(--u) * 10); line-height: 1; text-align: center; color: transparent; -webkit-text-stroke: calc(var(--u) * .36) rgba(255, 255, 255, .92); }
.tf__art { display: block; width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); border-radius: calc(var(--u) * 2.6); box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(43, 32, 51, .4); overflow: hidden; }
.tf__art svg { display: block; width: 100%; height: 100%; }
.tf__body { display: block; min-width: 0; }
.tf__name { display: block; font-size: calc(var(--u) * 4.5); font-weight: 600; line-height: 1.14; letter-spacing: -.012em; text-wrap: balance; }
.tf__stat { display: block; font-size: calc(var(--u) * 3.45); line-height: 1.3; margin-top: calc(var(--u) * .7); color: #fff; }
.tf__stat b { font-weight: 700; }

.tf__row--1 {
  grid-template-columns: calc(var(--u) * 13) calc(var(--u) * 22) 1fr; column-gap: calc(var(--u) * 3.2);
  padding: calc(var(--u) * 4) calc(var(--u) * 4.4) calc(var(--u) * 4) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 5.6); color: var(--ccndr-plum-900);
  background: linear-gradient(135deg, #fff 0%, #f4f3f2 55%, #efe2ef 100%);
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(43, 32, 51, .4);
}
.tf__row--1 .tf__rank { font-size: calc(var(--u) * 24); color: var(--ccndr-orange-600); -webkit-text-stroke: 0; margin-top: calc(var(--u) * -1); }
.tf__row--1 .tf__art { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 4.4); }
.tf__row--1 .tf__name { font-size: calc(var(--u) * 7.2); font-weight: 700; line-height: 1.02; letter-spacing: -.028em; color: var(--ccndr-purple-700); }
.tf__row--1 .tf__stat { font-size: calc(var(--u) * 3.8); color: var(--ccndr-plum-900); margin-top: calc(var(--u) * 1.4); }
.tf__row--1 .tf__stat b { font: 700 calc(var(--u) * 5.2)/1 var(--font-display); }

.card--topfive.is-active .tf__row { animation: tf-in .85s var(--spring-soft) both; animation-delay: var(--at); }
.card--topfive.is-active .tf__row--1 { animation-name: tf-hero; animation-duration: 1s; animation-timing-function: var(--spring); }
@keyframes tf-in { from { opacity: 0; transform: translateX(calc(var(--u) * 14)); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tf-hero { from { opacity: 0; transform: translateY(calc(var(--u) * -4)) scale(1.24) rotate(-2.5deg); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
.tf__shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.tf__shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent); transform: skewX(-18deg); opacity: 0; }
.card--topfive.is-crowned .tf__shine::after { animation: tf-shine 1.1s var(--ease-out) .2s both; }
@keyframes tf-shine { from { transform: skewX(-18deg) translateX(0); opacity: 1; } to { transform: skewX(-18deg) translateX(480%); opacity: 1; } }

/* =====================================================================
   7. QUOTE
   ===================================================================== */
.card--quote { padding: calc(var(--u) * 20) 0 0; }
.qt__title { font-size: calc(var(--u) * 11); color: var(--ccndr-purple-700); padding: 0 calc(var(--u) * 7); }
.qt__gap { position: relative; flex: 1 1 auto; min-height: calc(var(--u) * 15); }
.qt__deco { position: absolute; display: block; }
.qt__deco--a { right: calc(var(--u) * 9); top: calc(50% - var(--u) * 9); width: calc(var(--u) * 13); height: calc(var(--u) * 9.4); animation: bob 5.8s ease-in-out infinite alternate; }
.qt__deco--a .bubble { border-radius: calc(var(--u) * 2.6); display: grid; place-items: center; }
.qt__deco--a .bubble::after { width: calc(var(--u) * 3); height: calc(var(--u) * 2.8); }
.qt__deco--a b { font: 700 calc(var(--u) * 6)/1 var(--font-display); color: #fff; margin-top: calc(var(--u) * -.6); }
.qt__deco--b { left: calc(var(--u) * 34); top: calc(50% - var(--u) * 2); width: calc(var(--u) * 16); height: calc(var(--u) * 11.5); animation: bob 6.6s ease-in-out -2s infinite alternate-reverse; }
.qt__deco--b .bubble { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.3); }
.qt__deco--b .bubble i { width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); border-radius: 50%; background: rgba(255, 255, 255, .88); animation: dot 1.3s ease-in-out infinite; }
.qt__deco--b .bubble i:nth-child(2) { animation-delay: .16s; }
.qt__deco--b .bubble i:nth-child(3) { animation-delay: .32s; }

.card--quote.is-tight .qt__deco--b { display: none; }
.card--quote.is-tight .qt__deco--a { top: calc(50% - var(--u) * 8); }
.qt__fig { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; }
.qt__bubble {
  position: relative; z-index: 2; width: calc(var(--u) * 88); padding: calc(var(--u) * 8.4) calc(var(--u) * 7) calc(var(--u) * 6.4); border-radius: calc(var(--u) * 7);
  background: linear-gradient(150deg, #a26cbb 0%, #7a4792 40%, #4c2d61 100%); color: #fff; transform-origin: 20% 100%;
  box-shadow: inset 0 calc(var(--u) * .6) calc(var(--u) * 1.8) rgba(255, 255, 255, .26), inset 0 calc(var(--u) * -1.4) calc(var(--u) * 3) rgba(43, 32, 51, .28), 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(76, 45, 97, .38);
}
.qt__bubble::after {
  content: ''; position: absolute; left: calc(var(--u) * 15); top: calc(100% - 1px); width: calc(var(--u) * 9); height: calc(var(--u) * 8.4);
  background: linear-gradient(160deg, #6a3e82, #55316b); clip-path: polygon(0 0, 100% 0, 8% 100%);
}
:lang(fr) .qt__mark { top: calc(var(--u) * -15.5); font-size: calc(var(--u) * 26); }
.qt__mark { position: absolute; left: calc(var(--u) * 5.6); top: calc(var(--u) * -9.4); font-size: calc(var(--u) * 30); line-height: 1; color: var(--ccndr-orange-400); text-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(43, 32, 51, .35); }
.qt__text { font-size: calc(var(--u) * 6.3); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; }
.qt__who { display: flex; align-items: center; gap: calc(var(--u) * 2.6); margin-top: calc(var(--u) * 4.6); }
.qt__avatar { flex: none; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fde3c4 0%, #ee852d 46%, #b9551a 100%); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(255, 255, 255, .25); }
.qt__who cite { font: 500 calc(var(--u) * 3.4)/1.32 var(--font-body); font-style: normal; color: var(--ccndr-lilac-200); }
.qt__img { position: relative; z-index: 1; width: calc(var(--u) * 106); max-width: none; height: auto; margin-top: calc(var(--u) * 1); }

/* =====================================================================
   8. ARCHETYPE
   ===================================================================== */
.card--archetype { padding: calc(var(--u) * 20) calc(var(--u) * 7) calc(var(--u) * 6.5); align-items: center; text-align: center; }
.ar__head { width: 100%; }
.ar__scene { position: relative; flex: 1 1 auto; min-height: calc(var(--u) * 94); width: 100%; display: grid; place-items: center; perspective: calc(var(--u) * 150); touch-action: none; cursor: grab; }
.ar__scene:active { cursor: grabbing; }
.ar__flip { position: relative; width: calc(var(--u) * 62); height: calc(var(--u) * 88); }
.card--archetype.is-active .ar__flip { animation: ar-flip 1.35s var(--spring-soft) .3s both; }
@keyframes ar-flip { 0% { opacity: 0; transform: translateY(calc(var(--u) * 16)) rotateY(-120deg) rotateZ(-9deg) scale(.7); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.ar__card {
  --mx: 50; --my: 50; --px: 0; --py: 0; --hyp: 0;
  position: absolute; inset: 0; border-radius: calc(var(--u) * 5); will-change: transform;
  box-shadow: 0 0 0 1px rgba(239, 226, 239, .18), 0 calc(var(--u) * 2.4) calc(var(--u) * 5) rgba(0, 0, 0, .4), 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(0, 0, 0, .5);
}
.ar__face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; background: var(--ccndr-plum-900); }
.ar__face::before {
  content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: calc(var(--u) * .8); pointer-events: none;
  background: conic-gradient(from calc(var(--mx) * 3.6deg), #ee852d, #fde3c4, #a877bd, #efe2ef, #8851a1, #f5a55a, #ee852d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.ar__bg { position: absolute; inset: 0; background: radial-gradient(95% 62% at 50% 38%, #8f58a8 0%, #5d3676 46%, #2b2033 100%); }
.ar__rings {
  position: absolute; inset: -12%; translate: calc(var(--px) * var(--u) * 1.4) calc(var(--py) * var(--u) * 1.4);
  background: repeating-radial-gradient(circle at 50% 42%, rgba(239, 226, 239, .16) 0 1px, transparent 1px calc(var(--u) * 2.2));
  -webkit-mask: radial-gradient(circle at 50% 42%, #000 18%, transparent 64%); mask: radial-gradient(circle at 50% 42%, #000 18%, transparent 64%);
}
.ar__markwrap {
  position: absolute; left: 50%; top: 40%; width: calc(var(--u) * 45); aspect-ratio: 552 / 500; margin: calc(var(--u) * -20.4) 0 0 calc(var(--u) * -22.5);
  translate: calc(var(--px) * var(--u) * -2) calc(var(--py) * var(--u) * -2); isolation: isolate;
  filter: drop-shadow(0 calc(var(--u) * 1.8) calc(var(--u) * 2.6) rgba(20, 12, 26, .6));
}
.ar__markwrap svg { display: block; width: 100%; height: 100%; }
.ar__foil {
  position: absolute; inset: 0; mix-blend-mode: overlay; opacity: calc(.55 + var(--hyp) * .45);
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 8%, rgba(43, 32, 51, .6) 17%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .95) 34%);
  background-size: 320% 320%; background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%);
  -webkit-mask: var(--mark-mask) center / 100% 100% no-repeat; mask: var(--mark-mask) center / 100% 100% no-repeat;
}
.ar__foil::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: color; opacity: calc(.18 + var(--hyp) * .3);
  background-image: linear-gradient(115deg, #ff9d4d 0%, #ff86ad 25%, #b98cff 50%, #ffb46a 75%, #ff86ad 100%);
  background-size: 260% 260%; background-position: calc(100% - var(--mx) * 1%) calc(100% - var(--my) * 1%);
}
.ar__sheen {
  position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light; opacity: calc(.3 + var(--hyp) * .6);
  background-image: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, .8) 43%, rgba(253, 227, 196, .7) 50%, rgba(168, 119, 189, .6) 57%, transparent 72%);
  background-size: 300% 300%; background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%);
}
.ar__glare {
  position: absolute; inset: 0; z-index: 3; mix-blend-mode: overlay; opacity: calc(.3 + var(--hyp) * .55);
  background: radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .14) 30%, transparent 58%);
}
.ar__row { position: absolute; left: calc(var(--u) * 5.4); right: calc(var(--u) * 5.4); z-index: 2; display: flex; justify-content: space-between; text-align: left; }
.ar__row--top { top: calc(var(--u) * 5.4); align-items: center; font: 700 calc(var(--u) * 2.5)/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ccndr-lilac-200); }
.ar__no { color: var(--ccndr-orange-300); letter-spacing: .1em; }
.ar__row--bottom { bottom: calc(var(--u) * 5.2); flex-direction: column; gap: calc(var(--u) * 1.8); translate: calc(var(--px) * var(--u) * -.8) calc(var(--py) * var(--u) * -.8); }
.ar__name { font-size: calc(var(--u) * 9.2); line-height: .98; letter-spacing: -.035em; color: #fff; text-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(20, 12, 26, .5); }
.ar__edition { font: 700 calc(var(--u) * 2.4)/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ccndr-lilac-200); }
.ar__shadow { position: absolute; left: 50%; top: calc(50% + var(--u) * 45); width: calc(var(--u) * 52); height: calc(var(--u) * 6); margin-left: calc(var(--u) * -26); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); pointer-events: none; }
.ar__gyro {
  position: absolute; right: 0; bottom: calc(var(--u) * 1); display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.8); border-radius: 99px;
  font: 600 calc(var(--u) * 3)/1 var(--font-body); color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(239, 226, 239, .35);
}
.ar__gyro svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }

.ar__desc { font-size: calc(var(--u) * 4.25); line-height: 1.42; color: rgba(255, 255, 255, .94); max-width: calc(var(--u) * 82); margin-top: calc(var(--u) * 1.6); text-wrap: balance; }
.ar__proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 3); width: 100%; margin-top: calc(var(--u) * 4.6); text-align: left; }
.ar__proofs li { border-top: calc(var(--u) * .35) solid rgba(239, 226, 239, .24); padding-top: calc(var(--u) * 2.4); }
.ar__proofs b { display: block; font-size: calc(var(--u) * 9.6); line-height: 1; color: var(--ccndr-orange-400); margin-left: calc(var(--u) * -.5); }
.ar__plabel { display: block; font-size: calc(var(--u) * 3.05); line-height: 1.28; color: var(--ccndr-lilac-200); margin-top: calc(var(--u) * 1); }

/* =====================================================================
   3. GUESS (hosts js/widgets/guess.js)
   ===================================================================== */
.card--guess { padding: calc(var(--u) * 20) calc(var(--u) * 7) calc(var(--u) * 6); }
.gs__kicker { --kicker: var(--ccndr-orange-300); }
.gs__q { font-size: calc(var(--u) * 8.5); line-height: 1.05; color: #fff; margin-top: calc(var(--u) * 1.6); }
.gs__q .is-accent { color: var(--ccndr-orange-300); }
.gs__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.gs__widget { width: 100%; }
.gs__after {
  flex: none; min-height: 2.5em; display: grid; place-items: center; text-align: center; text-wrap: balance;
  font-size: calc(var(--u) * 4.5); font-weight: 600; line-height: 1.2; color: var(--ccndr-lilac-200);
  opacity: 0; transform: translateY(calc(var(--u) * 2)); transition: opacity .3s ease, transform .3s ease;
}
.card--guess.is-revealed .gs__after { opacity: 1; transform: none; transition: opacity .7s ease 1.1s, transform .9s var(--spring-soft) 1.1s; }
.gs__fallback { text-align: center; color: #fff; }
.gs__fallback b { display: block; font-size: calc(var(--u) * 24); line-height: 1; }
.gs__fallback span { font: 600 calc(var(--u) * 4.4)/1.2 var(--font-body); color: var(--ccndr-lilac-200); }

/* =====================================================================
   6. MAP (hosts js/widgets/map.js)
   ===================================================================== */
.card--map { padding: calc(var(--u) * 20) calc(var(--u) * 7) calc(var(--u) * 7); }
.mp__title { font-size: calc(var(--u) * 11.2); color: #fff; margin-top: calc(var(--u) * 1.4); }
.mp__title .is-accent { color: var(--ccndr-orange-400); }
.mp__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.mp__widget { width: 100%; }
.mp__fallback { display: flex; gap: calc(var(--u) * 8); color: #fff; }
.mp__fallback dd { margin: 0; font-size: calc(var(--u) * 20); line-height: 1; color: var(--ccndr-orange-400); }
.mp__fallback dt { font-size: calc(var(--u) * 3.8); color: var(--ccndr-lilac-200); }

/* =====================================================================
   9. SUMMARY (hosts js/widgets/sharecard.js)
   ===================================================================== */
.card--summary { padding: calc(var(--u) * 20) calc(var(--u) * 6) calc(var(--u) * 6); }
.sm__head { padding: 0 calc(var(--u) * 1); }
.sm__title { font-size: calc(var(--u) * 12); line-height: .98; color: #fff; }
.sm__title .is-accent { color: var(--ccndr-orange-300); }
.sm__show { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: calc(var(--u) * 3) 0 calc(var(--u) * 4); }
.sm__float { animation: bob 6.4s ease-in-out infinite alternate; }
.sm__card {
  --pv: clamp(calc(var(--u) * 37), calc(var(--u) * (var(--H) - 110) * .5625), calc(var(--u) * 60));
  position: relative; width: var(--pv); rotate: -3.5deg; border-radius: calc(var(--u) * 3.2); transform-origin: 50% 70%;
}
.sm__gloss { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.sm__gloss::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-16deg);
  animation: sm-gloss 5.5s var(--ease-in-out) 1.8s infinite;
}
@keyframes sm-gloss { 0% { transform: skewX(-16deg) translateX(0); } 22%, 100% { transform: skewX(-16deg) translateX(520%); } }

.sm__dock {
  flex: none; border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 4.4) calc(var(--u) * 4.6) calc(var(--u) * 4.8);
  background: linear-gradient(135deg, #3a2946 0%, #2b2033 55%, #231a2a 100%);
  box-shadow: 0 calc(var(--u) * 2.6) calc(var(--u) * 7) rgba(28, 20, 34, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.sm__thanks { font-size: calc(var(--u) * 3.75); line-height: 1.42; color: rgba(255, 255, 255, .95); text-wrap: balance; }
.sm__actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2.2); margin-top: calc(var(--u) * 3.6); }
.sm__actions .pill { min-height: calc(var(--u) * 10.8); font-size: calc(var(--u) * 3.7); padding: 0 calc(var(--u) * 4.2); }
.sm__download { flex: 1 1 auto; }
.sm__replay { flex: 0 0 auto; }
.sm__subscribe { flex: 1 1 100%; }