/* ═══════════════════════════════════════════════════════════════════════════
   misa.lol landing · #constellations
   Owns the section grid and copy, the kind chips' "on" state, #constelLine,
   the preview carousel (viewport, slides, arrows, dots, autoplay, progress),
   the Lovebirds / Trinity / Crossroads slides and their arrange controls.
   The generic .chip component, .section/.container, .eyebrow/h2/.sub and the
   [data-reveal] transitions belong to base.css and motion.css.
   Order: base rules → media blocks, widest to narrowest → motion blocks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section layout ── */
.constel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* Phone-only copy, chip suffixes and the phone link stay out of the desktop composition. */
.constel-phone-copy,
.constel-phone-only,
.constel-phone-link {
  display: none;
}

.constel__copy p.big {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 34px);
  color: var(--ivory);
  margin: 14px 0 0;
  overflow-wrap: anywhere;
}

.constel__copy .plus {
  color: var(--crimson);
}

/* ── Kind chips: the selected group size ── */
.chip.on {
  border-color: rgba(240, 6, 70, .55);
  color: var(--text);
  transform: translateY(-1px);
}

.chip.on i {
  background: var(--crimson);
  box-shadow: 0 0 8px var(--crimson);
}

.chip.on b {
  color: var(--crimson);
}

/* ── Carousel frame ── */
.constel-carousel {
  position: relative;
  min-width: 0;
  padding-bottom: 54px;
}

/* One native, touch-friendly sliding viewport for the three previews. */
.constel-viewport {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--r);
  border: 1px solid var(--line);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.constel-viewport::-webkit-scrollbar {
  display: none;
}

/* The scripted glide drives scrollLeft itself; snapping would fight it. */
.constel-viewport.is-gliding {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* Trinity's cards need more height than the 16:9 stage gives on narrow desktops. */
#constellations .constel-viewport:has(.constel-trinity.is-current) {
  min-height: 320px;
}

.constel-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ── Carousel controls ── */
.constel-prev,
.constel-next {
  position: absolute;
  top: calc((100% - 54px) / 2);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid #eee8e26b;
  border-radius: 50%;
  background: #0b0a10ed;
  color: #eee8e2;
  z-index: 3;
  box-shadow: 0 4px 20px #0005;
}

.constel-prev {
  left: -20px;
  transition: background .2s, border-color .2s;
}

.constel-next {
  right: -20px;
  transition: background .2s, border-color .2s, box-shadow .2s;
}

.constel-prev:hover,
.constel-next:hover {
  background: #26111b;
  border-color: #fff;
}

.constel-next:hover {
  box-shadow: 0 0 20px #f0064626;
}

.constel-prev:active,
.constel-next:active {
  background: #481529;
}

.constel-prev:focus-visible,
.constel-carousel :is(.constel-next, .constel-dots button):focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 4px;
}

.constel-dots {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  gap: 0;
}

.constel-dots button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.constel-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #eee8e24d;
  transition: background .3s, transform .3s;
}

.constel-dots button[aria-pressed=true] span {
  background: #eee8e2;
  transform: scale(1.2);
}

.constel-dots button:hover span {
  background: #eee8e2b3;
}

.constel-autoplay {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 100px;
  color: var(--ash);
  font-size: 12px;
  background: transparent;
}

.constel-autoplay:hover {
  color: var(--ivory);
}

.constel-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 4;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: #eee8e21a;
  pointer-events: none;
}

.constel-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: #f00646;
  box-shadow: 0 0 8px #f0064670;
}

/* Arrange mode locks the viewport and dims the controls that would move the slide. */
.constel-carousel.is-arranging .constel-viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

.constel-carousel.is-arranging :is(.constel-prev, .constel-next, .constel-dots, .constel-autoplay, .constel-progress) {
  opacity: .22;
  pointer-events: none;
}

/* ── Lovebirds slide ── */
/* The slide's children are all absolutely positioned; the flex centering still
   decides the static position of the sr-only status span. */
#constellations .constel-lovebirds {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  background: #0a141c;
  color: #f5f8fc;
  text-align: center;
  container-type: inline-size;
}

.constel-lovebirds__media,
.constel-lovebirds__video,
.constel-lovebirds__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.constel-lovebirds__media {
  z-index: -3;
  overflow: hidden;
  background: #0a141c url("/assets/constellations/lovebirds-poster.webp") center / cover no-repeat;
}

.constel-lovebirds__video {
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity;
  /* The playback controller blends decoded frames; a CSS transition would show a black seam. */
  transition: none;
}

.constel-lovebirds__shade {
  z-index: -2;
  background: linear-gradient(180deg, #0208104d, transparent 36%, #0208102e 70%, #020810c9), linear-gradient(90deg, #06101a30, transparent 48%, #06101a30);
}

.constel-lovebirds__title {
  position: absolute;
  top: 5%;
  left: 50%;
  translate: -50% 0;
  margin: 0;
  color: #f0f5f9;
  font: 500 clamp(10px, 1.7cqw, 14px) / 1.3 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .11em;
  text-shadow: 0 2px 10px #000b;
}

.constel-lovebirds__profiles {
  position: absolute;
  inset: 0;
}

/* Each card is placed by four custom properties so the arrange script can move it. */
.constel-person {
  --card-x: 10.3%;
  --card-y: 34%;
  --card-w: 30.8%;
  --card-h: 48%;
  --card-angle: -1.5deg;
  box-sizing: border-box;
  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  width: var(--card-w);
  height: var(--card-h);
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2.2% 1.4% 2%;
  container-type: inline-size;
  border: 1px solid #c8e4ef40;
  border-radius: clamp(12px, 2.5cqw, 20px);
  background: linear-gradient(145deg, #b7d5e322, #10202b47 58%, #0b121b69);
  box-shadow: inset 0 1px 0 #e1f4ff20, 0 12px 30px #03091145, 0 0 24px #a5d9ff0d;
  backdrop-filter: blur(3px) saturate(1.08);
  -webkit-backdrop-filter: blur(3px) saturate(1.08);
  rotate: var(--card-angle);
  transform-origin: center;
}

.constel-person:nth-child(2) {
  --card-x: 61%;
  --card-angle: 1.5deg;
}

.constel-person__avatar {
  display: block;
  flex: 0 0 auto;
  width: 26%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  outline: 0;
  box-shadow: 0 6px 20px #0007;
}

.constel-person__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  transform: scale(1.24);
  border: 0;
}

.constel-person:nth-child(2) .constel-person__avatar img {
  object-position: center 31%;
  transform: scale(1.3);
}

.constel-person h3 {
  max-width: 100%;
  flex: 0 0 auto;
  margin: 3% 0 0;
  padding: .08em .1em;
  overflow: visible;
  font-family: "Death Note", var(--font-serif), serif;
  font-size: clamp(14px, 9cqw, 28px);
  font-style: normal;
  font-weight: 400;
  /* Death Note's full glyph height exceeds 1.2em, including its low strokes. */
  line-height: 1.45;
  letter-spacing: .07em;
  color: #f5fbff;
  text-shadow: 0 0 12px #b4d8ff55, 0 2px 6px #05101ccc;
  white-space: nowrap;
}

.constel-person__light {
  width: 20%;
  height: 1px;
  flex: 0 0 1px;
  margin: 3% 0;
  background: linear-gradient(90deg, transparent, #d5eaffb3, transparent);
  box-shadow: 0 0 7px #b7daff42;
}

.constel-person__discord {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7%;
  width: 100%;
  min-height: 34px;
  padding: 6% 7%;
  box-sizing: border-box;
  border: 1px solid #d5eafa1a;
  border-radius: clamp(7px, 4cqw, 12px);
  background: #050d1680;
  color: #f5f8fc;
  text-align: left;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.constel-person__discord-icon {
  display: grid;
  width: 17%;
  flex: 0 0 17%;
  place-items: center;
  color: #c5dcff;
  filter: drop-shadow(0 0 5px #accfff4d);
}

.constel-person__discord-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.constel-person__discord > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.constel-person__discord strong {
  font: 600 clamp(9px, 6cqw, 15px) / 1.15 var(--font-ui, system-ui, sans-serif);
}

.constel-person__discord small {
  color: #c0cdd7;
  font: 400 clamp(7px, 4.2cqw, 11px) / 1.2 var(--font-ui, system-ui, sans-serif);
  white-space: nowrap;
}

.constel-person__link-arrow {
  margin-left: auto;
  color: #a5bbca;
  font-size: clamp(12px, 7cqw, 18px);
}

.constel-person__discord:hover {
  background: #102536cc;
  border-color: #c6e2f14a;
  box-shadow: 0 0 18px #adceff12;
}

.constel-person__discord:focus-visible {
  outline: 2px solid #e0efff;
  outline-offset: 3px;
}

/* ── Playback and arrange controls (Lovebirds and Trinity) ── */
.constel-layout-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
}

.constel-layout-controls button,
.constel-video-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #c4dbe53d;
  border-radius: 999px;
  background: #06101ad9;
  color: #e7f0f6;
  font: 500 10px / 1.2 var(--font-ui, system-ui, sans-serif);
  box-shadow: 0 4px 16px #02081033;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.constel-video-toggle {
  position: absolute;
  z-index: 8;
  left: 12px;
  bottom: 12px;
}

.constel-layout-controls button:hover,
.constel-video-toggle:hover {
  background: #182b38;
  border-color: #cadfec8c;
}

.constel-layout-controls button:focus-visible,
.constel-video-toggle:focus-visible {
  outline: 2px solid #e0efff;
  outline-offset: 3px;
}

.constel-layout-toggle svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The buttons' inline-flex display must not defeat the hidden attribute. */
.constel-layout-controls [hidden] {
  display: none;
}

.constel-layout-hint {
  position: absolute;
  right: 0;
  bottom: 42px;
  width: max-content;
  max-width: 75vw;
  padding: 7px 10px;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  background: #06101aed;
  color: #d8e2e6;
  font: 400 10px / 1.4 var(--font-ui, system-ui, sans-serif);
}

.constel-resize-handle {
  display: none;
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 5;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #071017c9;
  cursor: nwse-resize;
  touch-action: none;
}

.constel-resize-handle::before,
.constel-resize-handle::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-radius: 1px;
}

.constel-resize-handle::after {
  right: 11px;
  bottom: 11px;
  width: 4px;
  height: 4px;
  opacity: .5;
}

.constel-lovebirds.is-arranging .constel-person {
  animation: none;
  rotate: 0deg;
  transform: none;
  outline: 1px dashed #f4fbffad;
  outline-offset: 3px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.constel-lovebirds.is-arranging .constel-person:focus-visible {
  outline: 2px solid #f4fbff;
}

.constel-lovebirds.is-arranging .constel-person.is-manipulating {
  z-index: 6;
  cursor: grabbing;
  outline-style: solid;
}

.constel-lovebirds.is-arranging .constel-resize-handle {
  display: block;
}

.constel-lovebirds.is-arranging .constel-person__discord {
  pointer-events: none;
}

.constel-lovebirds.is-arranging .constel-video-toggle {
  visibility: hidden;
}

/* ── Trinity slide ── */
#constellations .constel-trinity {
  isolation: isolate;
  overflow: hidden;
  background: #a6d8ed;
  color: #fff;
  container-type: inline-size;
}

.constel-trinity__background,
.constel-trinity__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.constel-trinity__background {
  z-index: -3;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.012);
}

.constel-trinity__shade {
  z-index: -2;
  background: linear-gradient(180deg, #06101c42, transparent 30%, #06101c33 66%, #06101cb8), linear-gradient(90deg, #07122242, transparent 24%, transparent 76%, #07122242);
}

.constel-trinity__title {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  margin: 0;
  translate: -50% 0;
  color: #f8fcff;
  font: 600 clamp(10px, 1.55cqw, 14px) / 1.2 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .22em;
  text-transform: lowercase;
  text-shadow: 0 2px 14px #06111dcc;
}

.constel-trinity__profiles {
  position: absolute;
  inset: 36px 3.5% 64px;
  z-index: 1;
  display: block;
}

/* Three lanes at 80% of the old footprint; the reading-height floor wins on narrow previews. */
.trinity-person {
  --accent: #eafaff;
  --glass-a: #28465780;
  --glass-b: #10263cba;
  --tilt: -1.8deg;
  --trinity-x: 3.06%;
  --trinity-y: 44.2%;
  --trinity-w: 24.48%;
  --trinity-h: 49.6%;
  --trinity-min-h: 132px;
  box-sizing: border-box;
  position: absolute;
  min-width: 0;
  left: var(--trinity-x);
  width: var(--trinity-w);
  height: max(var(--trinity-min-h), var(--trinity-h));
  top: clamp(0px, var(--trinity-y), calc(100% - max(var(--trinity-min-h), var(--trinity-h))));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, .7cqw, 6px);
  padding: clamp(6px, .9cqw, 12px);
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: clamp(12px, 2.2cqw, 20px);
  background: linear-gradient(145deg, var(--glass-a), var(--glass-b));
  box-shadow: inset 0 1px 0 #fff4, 0 13px 28px #06111b4d, 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
  backdrop-filter: blur(5px) saturate(1.12);
  -webkit-backdrop-filter: blur(5px) saturate(1.12);
  rotate: var(--tilt);
  transform-origin: 50% 100%;
}

.trinity-person--sunset {
  --trinity-x: 37.76%;
  --accent: #ffd9a0;
  --glass-a: #523e368c;
  --glass-b: #182231c4;
  --tilt: .4deg;
}

.trinity-person--night {
  --trinity-x: 72.46%;
  --accent: #b4d8ff;
  --glass-a: #2f426785;
  --glass-b: #101a32c4;
  --tilt: 1.8deg;
}

.trinity-person__identity {
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.trinity-person__identity h3 {
  margin: 0;
  color: #fff;
  font: 650 clamp(12px, 2.3cqw, 21px) / 1.35 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .08em;
  overflow-wrap: anywhere;
  text-shadow: 0 0 13px color-mix(in srgb, var(--accent) 35%, transparent), 0 2px 6px #07111be6;
}

.trinity-person__bio {
  width: 100%;
  min-width: 0;
  min-block-size: 2.9em;
  margin: 0;
  color: #f3f7fc;
  font: 400 clamp(11px, 1.55cqw, 13px) / 1.45 var(--font-ui, system-ui, sans-serif);
  text-align: center;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 5px #06111d;
}

/* The typewriter keeps the full bio in the DOM and only changes glyph opacity. */
.trinity-bio-word {
  display: inline-block;
  max-width: 100%;
}

.trinity-bio-char {
  opacity: 1;
  transition: none;
}

.trinity-person__discord {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 14px;
  background: #0a142d40;
  color: var(--accent);
  text-decoration: none;
  box-shadow: inset 0 1px 0 #ffffff10;
}

.trinity-person__discord svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.trinity-person__discord:hover {
  background: #ffffff1c;
  color: #fff;
}

.trinity-person__discord:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.constel-trinity__caption {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 29px;
  translate: -50% 0;
  margin: 0;
  color: #eaf3f9b5;
  white-space: nowrap;
  font: 500 clamp(7px, 1.2cqw, 9px) / 1.2 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .11em;
  text-shadow: 0 1px 5px #000b;
}

/* Trinity's manipulation controls sit outside the bounded profile stage. */
.trinity-layout-controls button {
  min-height: 44px;
}

.trinity-layout-hint {
  max-width: min(330px, calc(100vw - 64px));
  white-space: normal;
  line-height: 1.6;
  text-align: right;
  bottom: 52px;
}

.trinity-resize-handle {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0 0 16px 0;
  background: transparent;
  color: #fff;
  cursor: nwse-resize;
  touch-action: none;
}

.trinity-resize-handle::before,
.trinity-resize-handle::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  width: 13px;
  height: 13px;
  border-radius: 0 0 3px 0;
}

.trinity-resize-handle::after {
  right: 14px;
  bottom: 14px;
  width: 6px;
  height: 6px;
  opacity: .6;
}

/* A card that is being arranged, or carries a saved layout, sits flat and still. */
.constel-trinity.is-arranging .trinity-person,
.constel-trinity .trinity-person[style*="--trinity-"] {
  animation: none;
  transition: none;
  rotate: 0deg;
  transform: none;
  translate: none;
}

.constel-trinity.is-arranging .trinity-person {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.constel-trinity.is-arranging .trinity-person.is-manipulating {
  cursor: grabbing;
  z-index: 3;
}

.constel-trinity.is-arranging .trinity-resize-handle:not([hidden]) {
  display: block;
}

.constel-trinity.is-arranging .trinity-person__discord {
  pointer-events: none;
}

.trinity-person:focus-visible,
.trinity-resize-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Crossroads slide ── */
#constellations .constel-crossroads {
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  color: #f3f0f7;
  background: #fff2f7;
}

.constel-crossroads__background,
.constel-crossroads__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.constel-crossroads__background {
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.constel-crossroads__wash {
  z-index: -2;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .12), transparent 46%), linear-gradient(180deg, rgba(255, 245, 250, .06), rgba(238, 178, 207, .08));
}

.constel-crossroads__title {
  position: absolute;
  top: 4.5%;
  left: 50%;
  margin: 0;
  translate: -50% 0;
  color: #714154;
  font: 600 clamp(12px, 2.5cqw, 20px) / 1 var(--font-ui, system-ui, sans-serif);
  letter-spacing: -.03em;
}

.constel-crossroads__profiles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 32%));
  grid-template-rows: repeat(2, minmax(98px, 34%));
  place-content: center;
  gap: 7% 9%;
  padding-top: 5%;
}

.crossroads-person {
  position: relative;
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5% 8% 7%;
  overflow: hidden;
  border: 1px solid rgba(205, 91, 149, .075);
  border-radius: clamp(11px, 2cqw, 17px);
  background: rgba(255, 190, 222, .012);
  box-shadow: 0 12px 26px rgba(107, 46, 77, .065);
  text-align: center;
  backdrop-filter: blur(1px) saturate(1.04);
  -webkit-backdrop-filter: blur(1px) saturate(1.04);
}

/* Each name types itself in; the step count matches its length. */
.crossroads-person:nth-child(1) {
  --name-chars: 3;
  --type-delay: .3s;
}

.crossroads-person:nth-child(2) {
  --name-chars: 3;
  --type-delay: .44s;
}

.crossroads-person:nth-child(3) {
  --name-chars: 5;
  --type-delay: .58s;
}

.crossroads-person:nth-child(4) {
  --name-chars: 4;
  --type-delay: .72s;
}

.crossroads-person:nth-child(1),
.crossroads-person:nth-child(4) {
  rotate: -.7deg;
}

.crossroads-person:nth-child(2),
.crossroads-person:nth-child(3) {
  rotate: .7deg;
}

.crossroads-person__avatar {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(42px, 7.8cqw, 60px);
  height: clamp(42px, 7.8cqw, 60px);
  max-width: none;
  flex: 0 0 auto;
  object-fit: cover;
  border: 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 8px 10px rgba(112, 42, 78, .18));
}

.crossroads-person h3 {
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  margin: 3.5% 0 0;
  overflow: visible;
  color: #69334c;
  font: 900 clamp(9px, 1.85cqw, 14px) / 1.15 "Courier New", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 1px 0 rgba(255, 207, 231, .85), 0 1px rgba(255, 207, 231, .85);
  white-space: nowrap;
}

.crossroads-person__discord {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(15px, 2.7cqw, 21px);
  height: clamp(15px, 2.7cqw, 21px);
  margin-top: 4%;
  place-items: center;
  color: #ea5a9c;
  filter: drop-shadow(0 3px 7px rgba(153, 43, 98, .22));
  transition: transform .22s ease, color .22s ease;
}

.crossroads-person__discord svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.crossroads-person__discord:hover,
.crossroads-person__discord:focus-visible {
  color: #ff3f96;
  transform: translateY(-1px) scale(1.1);
}

.crossroads-person__discord:focus-visible {
  outline: 2px solid rgba(255, 63, 150, .5);
  outline-offset: 3px;
  border-radius: 5px;
}

.constel-crossroads__caption {
  position: absolute;
  right: 2.4%;
  bottom: 2.8%;
  margin: 0;
  color: rgba(111, 61, 85, .44);
  font: 600 clamp(6px, 1cqw, 8px) / 1 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .08em;
}

/* ── Shared view counter on every slide ── */
.constel-shared-views {
  position: absolute;
  z-index: 9;
  left: 2.8%;
  bottom: 3.2%;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: rgba(244, 248, 251, .78);
  font: 650 clamp(9px, 1.45cqw, 12px) / 1 var(--font-ui, system-ui, sans-serif);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .48);
}

.constel-shared-views svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.constel-shared-views svg circle {
  fill: currentColor;
  stroke: none;
}

.constel-shared-views--lovebirds {
  left: 12px;
  bottom: 51px;
  color: rgba(238, 247, 252, .82);
}

.constel-shared-views--trinity {
  color: rgba(234, 243, 249, .78);
}

.constel-shared-views--crossroads {
  color: rgba(102, 55, 78, .72);
  text-shadow: 0 1px 5px rgba(255, 255, 255, .4);
}

/* ── ≤1050px: copy above the carousel ── */
@media (max-width: 1050px) {
  .constel {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .constel__copy {
    max-width: 700px;
  }

  .constel-carousel {
    width: 100%;
    max-width: 850px;
    margin-inline: auto;
  }
}

/* ── ≤700px: the phone builder — copy, group size, preview, then browse ── */
@media (max-width: 700px) {
  /* #constellations beats base's .landing-atmosphere .section.container padding. */
  #constellations.constel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-block: 48px;
  }

  #constellations .constel__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #constellations .eyebrow {
    font-size: 20px;
    margin: 0 0 10px;
  }

  #constellations h2 {
    font-size: clamp(30px, 8.1vw, 40px);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.04em;
  }

  #constellations .constel-phone-copy {
    display: block;
    font-size: 14px;
    line-height: 1.65;
    margin: 14px 0 0;
    max-width: 38ch;
    color: #a99da6;
  }

  #constellations :is(.constel-desktop-copy, .constel-desktop-link) {
    display: none;
  }

  #constellations .constel-phone-only {
    display: inline;
  }

  #constellations .chips {
    order: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    margin: 22px 0 0;
    border: 1px solid #ffffff12;
    border-radius: 17px;
    background: #121014;
  }

  #constellations .chips .chip {
    flex-direction: column;
    min-height: 62px;
    padding: 10px 3px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
    justify-content: center;
    white-space: nowrap;
    background: transparent;
    border-color: transparent;
    transform: none;
  }

  #constellations .chips .chip i {
    display: none;
  }

  #constellations .chips .chip b {
    font-size: 10px;
    font-weight: 400;
    color: #94848e;
  }

  #constellations .chips .chip.on {
    background: #35131f;
    border-color: #f006464d;
    color: #fff0f4;
    box-shadow: 0 3px 12px #0002;
  }

  #constellations .chips .chip.on b {
    color: #ef9fb6;
  }

  #constellations .big {
    order: 2;
    font: 400 12px / 1.7 var(--font-ui);
    letter-spacing: 0;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px dashed #ffffff17;
    border-radius: 10px;
    background: #ffffff03;
    color: #a99da6;
    overflow-wrap: anywhere;
    text-align: center;
  }

  #constellations .big [data-name] {
    color: #e9dce3;
  }

  #constellations .big .plus {
    color: #ff426d;
    padding-inline: 2px;
  }

  #constellations .constel-carousel {
    min-width: 0;
    max-width: 100%;
    padding: 42px 10px 64px;
    border: 1px solid #ffffff14;
    border-radius: 23px;
    background: linear-gradient(145deg, #19121a, #0d0b10);
    box-shadow: 0 12px 30px #0002;
  }

  #constellations .constel-carousel::before {
    content: "LIVE PREVIEW";
    position: absolute;
    top: 17px;
    left: 18px;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .12em;
    color: #bfa4b3;
  }

  /* Every shared profile keeps the same desktop-shaped stage on phones. */
  #constellations .constel-viewport {
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: auto;
    border-radius: 15px;
    border-color: #ffffff0c;
    background: #0a090e;
    contain: layout paint style;
    transform: translateZ(0);
  }

  /* Undoes the :has() desktop height floor, which outranks the rule above. */
  #constellations .constel-viewport:has(.constel-trinity.is-current) {
    min-height: 0;
  }

  #constellations :is(.constel-prev, .constel-next) {
    top: auto;
    bottom: 9px;
    transform: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 0;
    border-radius: 12px;
    background: #ffffff05;
    color: #cfbfc9;
    box-shadow: none;
  }

  #constellations .constel-prev {
    left: 10px;
  }

  #constellations .constel-next {
    left: auto;
    right: 10px;
  }

  #constellations :is(.constel-prev, .constel-next) svg {
    width: 18px;
    height: 18px;
  }

  #constellations .constel-dots {
    position: absolute;
    bottom: 9px;
    left: 50%;
    right: auto;
    width: max-content;
    height: 44px;
    transform: translateX(-50%);
    padding: 3px;
    margin: 0;
    gap: 3px;
    border-radius: 12px;
    background: #06050866;
  }

  #constellations .constel-dots button {
    display: flex;
    gap: 6px;
    justify-content: center;
    min-width: 62px;
    width: auto;
    min-height: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 9px;
    color: #978691;
  }

  #constellations .constel-dots b {
    font-size: 11px;
    font-weight: 500;
  }

  #constellations .constel-dots button[aria-pressed=true] {
    background: #35212d;
    color: #f3dce6;
  }

  #constellations .constel-dots span {
    width: 4px;
    height: 4px;
  }

  #constellations .constel-dots button[aria-pressed=true] span {
    background: #ff426d;
    transform: none;
  }

  #constellations .constel-autoplay {
    top: 0;
    bottom: auto;
    right: 10px;
    min-height: 42px;
    padding: 8px;
    font-size: 10px;
    color: #a88f9e;
  }

  #constellations .constel-progress {
    bottom: 59px;
    height: 2px;
    left: 20px;
    right: 20px;
    border-radius: 2px;
    overflow: hidden;
    background: #ffffff08;
  }

  #constellations .constel-phone-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 17px;
    margin: 0;
    border: 1px solid #ef356544;
    border-radius: 14px;
    background: #220e17;
    color: #f2c9d7;
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
  }

  #constellations .constel-phone-link span {
    font-size: 20px;
    line-height: 1;
    color: #ff426d;
  }

  /* Phone previews favour stable composition over glass and entrance effects. */
  #constellations :is(.constel-person, .trinity-person, .crossroads-person) {
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #constellations :is(.constel-person__avatar, .crossroads-person__avatar, .trinity-person__identity h3) {
    filter: none;
  }

  /* Trinity on a 16:9 phone stage. */
  .constel-trinity__title {
    top: 6px;
    font-size: clamp(7px, 1.55cqw, 10px);
  }

  .constel-trinity__profiles {
    inset: 22px 3.5% 34px;
  }

  .trinity-person {
    --trinity-y: 12%;
    --trinity-h: 76%;
    --trinity-min-h: 0px;
    gap: 2px;
    padding: 3px 4px;
    border-radius: clamp(7px, 2.2cqw, 12px);
  }

  .trinity-person__identity h3 {
    font-size: clamp(7px, 2.3cqw, 12px);
    letter-spacing: .06em;
  }

  .trinity-person__bio {
    font-size: clamp(6px, 1.55cqw, 9px);
    line-height: 1.25;
    min-block-size: 2.5em;
  }

  .trinity-person__discord {
    width: 24px;
    min-height: 24px;
    border-radius: 7px;
  }

  .trinity-person__discord svg {
    width: 13px;
    height: 13px;
  }

  .constel-trinity__caption {
    top: 16px;
    font-size: 5px;
  }
}

/* ── ≤600px: tighter Lovebirds and Crossroads cards ── */
@media (max-width: 600px) {
  .constel-person {
    --card-x: 6%;
    --card-y: 28%;
    --card-w: 39%;
    --card-h: 50%;
    --card-angle: -1.2deg;
    padding: 3% 2.3%;
    border-radius: 12px;
  }

  .constel-person:nth-child(2) {
    --card-x: 55%;
    --card-angle: 1.2deg;
  }

  .constel-person__avatar {
    width: 31%;
  }

  .constel-person h3 {
    margin-top: 3%;
    font-size: clamp(14px, 11cqw, 22px);
  }

  .constel-person__light {
    margin-block: 3%;
  }

  .constel-person__discord {
    padding: 7%;
    min-height: 40px;
    gap: 8%;
  }

  .constel-person__discord strong {
    font-size: clamp(10px, 8cqw, 14px);
  }

  .constel-person__discord small {
    font-size: clamp(8px, 6cqw, 10px);
  }

  .constel-person__link-arrow {
    display: none;
  }

  .constel-layout-controls {
    right: 8px;
    bottom: 8px;
  }

  .constel-video-toggle {
    left: 8px;
    bottom: 8px;
  }

  .constel-layout-controls button,
  .constel-video-toggle {
    min-height: 36px;
    font-size: 9px;
    padding: 8px;
  }

  /* Trinity's controls keep their 44px target; only the font and padding tighten. */
  .trinity-layout-controls button {
    min-height: 44px;
  }

  .constel-layout-toggle svg {
    width: 12px;
    height: 12px;
  }

  .constel-crossroads__profiles {
    grid-template-columns: repeat(2, minmax(0, 39%));
    grid-template-rows: repeat(2, minmax(88px, 34%));
    gap: 6% 6%;
    padding-top: 7%;
  }

  .crossroads-person {
    padding: 6% 7% 7%;
    border-radius: 9px;
  }

  .crossroads-person__avatar {
    width: clamp(34px, 11cqw, 46px);
    height: clamp(34px, 11cqw, 46px);
  }

  .crossroads-person h3 {
    margin-top: 5%;
    font-size: clamp(8px, 2.8cqw, 12px);
  }

  .crossroads-person__discord {
    width: 14px;
    height: 14px;
    margin-top: 3%;
  }

  .constel-crossroads__caption {
    display: none;
  }

  .constel-shared-views {
    left: 3%;
    bottom: 3%;
    gap: 4px;
    font-size: 8px;
  }

  .constel-shared-views--lovebirds {
    left: 8px;
    bottom: 49px;
  }
}

/* ── Pointer hover lifts, only where a pointer can hover ── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .constel-person {
    transition: rotate .45s ease, box-shadow .45s ease;
  }

  .constel-person:hover {
    rotate: 0deg;
    box-shadow: inset 0 1px 0 #e1f4ff30, 0 15px 34px #0309115c, 0 0 26px #a5d9ff14;
  }

  .trinity-person {
    transition: rotate .45s ease, translate .45s ease, box-shadow .45s ease;
  }

  .trinity-person:hover {
    rotate: 0deg;
    translate: 0 -3px;
    box-shadow: inset 0 1px 0 #fff5, 0 17px 34px #06111b66;
  }

  .trinity-person__discord {
    transition: background .2s, color .2s;
  }

  .crossroads-person {
    transition: rotate .35s ease, translate .35s ease, border-color .35s ease, box-shadow .35s ease;
  }

  .crossroads-person:hover {
    rotate: 0deg;
    translate: 0 -3px;
    border-color: rgba(212, 91, 153, .18);
    background: rgba(255, 190, 222, .025);
    box-shadow: 0 18px 36px rgba(107, 46, 77, .11);
  }
}

/* ── Entrances: transform and opacity only ── */
@media (prefers-reduced-motion: no-preference) {
  .constel-lovebirds.is-visible .constel-person {
    animation: lovebirds-card-reveal .8s cubic-bezier(.2, .7, .25, 1) both;
  }

  .constel-lovebirds.is-visible .constel-person:nth-child(2) {
    animation-delay: .14s;
  }

  .constel-lovebirds.is-arranging .constel-person {
    animation: none;
  }

  @keyframes lovebirds-card-reveal {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .constel-trinity.is-current .trinity-person {
    animation: trinity-card-in .7s cubic-bezier(.2, .75, .2, 1) both;
  }

  .constel-trinity.is-current .trinity-person--sunset {
    animation-delay: .1s;
  }

  .constel-trinity.is-current .trinity-person--night {
    animation-delay: .2s;
  }

  /* Same specificity as the entrance: arranged and saved cards must still win. */
  .constel-trinity.is-arranging .trinity-person,
  .constel-trinity .trinity-person[style*="--trinity-"] {
    animation: none;
  }

  @keyframes trinity-card-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .constel-crossroads.is-current .crossroads-person {
    animation: crossroads-in .7s cubic-bezier(.2, .7, .25, 1) both;
  }

  .constel-crossroads.is-current .crossroads-person:nth-child(2) {
    animation-delay: .08s;
  }

  .constel-crossroads.is-current .crossroads-person:nth-child(3) {
    animation-delay: .16s;
  }

  .constel-crossroads.is-current .crossroads-person:nth-child(4) {
    animation-delay: .24s;
  }

  .constel-crossroads.is-current .crossroads-person h3 {
    animation: crossroads-type .72s steps(var(--name-chars), end) var(--type-delay) both;
  }

  @keyframes crossroads-in {
    from {
      opacity: 0;
      transform: translateY(10px) scale(.96);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes crossroads-type {
    from {
      clip-path: inset(0 100% 0 0);
    }

    to {
      clip-path: inset(0 0 0 0);
    }
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .constel-viewport {
    scroll-behavior: auto;
  }

  .constel-prev,
  .constel-next,
  .constel-dots span {
    transition: none;
  }

  .constel-autoplay,
  .constel-progress {
    display: none;
  }

  .constel-person,
  .constel-person__discord,
  .constel-layout-controls button,
  .constel-video-toggle,
  .trinity-person,
  .trinity-person__discord,
  .trinity-bio-char,
  .crossroads-person {
    animation: none;
    transition: none;
  }

  .trinity-bio-char {
    opacity: 1 !important;
  }

  .crossroads-person h3 {
    clip-path: none;
    animation: none;
  }
}