.contact-space {
  --contact-accent: #43bdff;
  --contact-accent-soft: rgba(69, 190, 255, 0.32);
  --frost-edge: rgba(103, 202, 255, 0.58);
  --frost-edge-soft: rgba(103, 202, 255, 0.18);
  --channel-surface: #0b1926;
  --channel-ink: #f5fbff;
  --channel-muted: rgba(211, 229, 240, 0.72);
  --channel-action: rgba(255, 255, 255, 0.07);
  --channel-edge: rgba(125, 213, 255, 0.52);
  position: fixed;
  z-index: 96;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  color: rgba(244, 249, 253, 0.96);
  background: #01050b;
}

.contact-space__scrim {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 37% 52%, rgba(23, 117, 190, 0.14), transparent 38%),
    radial-gradient(circle at 83% 18%, rgba(69, 166, 225, 0.055), transparent 27%),
    linear-gradient(118deg, rgba(0, 3, 8, 0.9), rgba(2, 11, 21, 0.95));
  cursor: default;
}

.contact-space__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  padding:
    max(28px, env(safe-area-inset-top))
    max(32px, env(safe-area-inset-right))
    max(26px, env(safe-area-inset-bottom))
    max(32px, env(safe-area-inset-left));
  pointer-events: none;
}

.contact-space__fracture-field {
  position: absolute;
  z-index: 0;
  inset: -5%;
  overflow: hidden;
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 24%, rgba(0, 0, 0, 0.12) 48%, rgba(0, 0, 0, 0.52) 70%, #000 91%);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 24%, rgba(0, 0, 0, 0.12) 48%, rgba(0, 0, 0, 0.52) 70%, #000 91%);
  transform: scale(1);
  transition:
    opacity 720ms ease,
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-space__fracture-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(142deg, transparent 0 17.8%, rgba(135, 219, 255, 0.24) 17.9% 18.02%, transparent 18.12% 100%),
    linear-gradient(27deg, transparent 0 79.4%, rgba(135, 219, 255, 0.21) 79.5% 79.62%, transparent 79.72% 100%),
    linear-gradient(71deg, transparent 0 9.3%, rgba(135, 219, 255, 0.16) 9.4% 9.5%, transparent 9.62% 100%);
}

.contact-space__fracture {
  --fracture-shape: polygon(4% 23%, 18% 5%, 43% 9%, 59% 1%, 91% 12%, 99% 37%, 92% 69%, 72% 96%, 42% 90%, 21% 99%, 2% 73%);
  --fracture-line: linear-gradient(132deg, rgba(169, 231, 255, 0.94), rgba(89, 190, 242, 0.45) 48%, rgba(104, 205, 255, 0.16));
  position: absolute;
  display: block;
  aspect-ratio: 1.48;
  background: var(--fracture-line);
  clip-path: var(--fracture-shape);
  filter:
    drop-shadow(0 0 8px rgba(95, 199, 248, 0.18))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.24));
}

.contact-space__fracture::before {
  content: "";
  position: absolute;
  inset: 1.25px;
  background: linear-gradient(145deg, rgba(2, 10, 19, 0.96), rgba(3, 14, 25, 0.88));
  clip-path: var(--fracture-shape);
}

.contact-space__fracture--north-west {
  --fracture-line: linear-gradient(145deg, rgba(179, 237, 255, 0.98), rgba(92, 197, 245, 0.56) 38%, rgba(78, 174, 232, 0.12) 88%);
  top: 1%;
  left: -8%;
  width: min(43vw, 690px);
  transform: rotate(-7deg);
}

.contact-space__fracture--north-east {
  --fracture-line: linear-gradient(215deg, rgba(179, 237, 255, 0.98), rgba(92, 197, 245, 0.54) 39%, rgba(78, 174, 232, 0.12) 88%);
  top: -12%;
  right: -4%;
  width: min(35vw, 560px);
  transform: rotate(16deg) scale(0.86);
  opacity: 0.78;
}

.contact-space__fracture--south-west {
  --fracture-line: linear-gradient(35deg, rgba(179, 237, 255, 0.96), rgba(92, 197, 245, 0.5) 40%, rgba(78, 174, 232, 0.1) 88%);
  bottom: -17%;
  left: 3%;
  width: min(39vw, 630px);
  transform: rotate(10deg) scale(0.92);
  opacity: 0.8;
}

.contact-space__fracture--south-east {
  --fracture-line: linear-gradient(325deg, rgba(179, 237, 255, 0.96), rgba(92, 197, 245, 0.5) 40%, rgba(78, 174, 232, 0.1) 88%);
  right: -10%;
  bottom: -12%;
  width: min(42vw, 670px);
  transform: rotate(-13deg);
  opacity: 0.72;
}

@font-face {
  font-family: "CT Black";
  src: url("./assets/contact/contact-title.woff") format("woff");
  font-weight: 900;
  font-display: block;
}

.contact-space__heading {
  --contact-title-size: clamp(54px, 5.4vw, 92px);
  position: absolute;
  z-index: 8;
  top: max(38px, env(safe-area-inset-top));
  left: max(44px, env(safe-area-inset-left));
  max-width: min(460px, 38vw);
  pointer-events: none;
}

.contact-space__heading h2,
.contact-information h3,
.contact-information p {
  margin: 0;
}

/* ---- title: 联系 和 关于我 ----
   Each character is its own sticker: white with a thin black edge, a black
   block pushed down-left behind it, and a light rim round the block so it
   reads on the dark page. Ice-blue shards burst out behind. The three layers
   (rim, block, letters) hold the same characters in the same places, so no
   block ever covers a neighbouring letter. */
.contact-title {
  --s: var(--contact-title-size);
  --title-ice: #22d6f7;
  --title-rim: #eaf9ff;
  position: relative;
  display: block;
  width: calc(var(--s) * 2.9);
  height: calc(var(--s) * 2.12);
  color: #fff;
  font-family: "CT Black", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--s);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  transform: rotate(-4deg);
  transform-origin: left top;
}

.contact-title__burst {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--title-ice);
  transform-origin: 50% 52%;
}

.contact-title__layer {
  position: absolute;
  inset: 0;
}

.contact-title__layer--edge { z-index: 1; }
.contact-title__layer--ink { z-index: 2; }
.contact-title__layer--face { z-index: 3; }

.ct {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  font-size: calc(var(--f) * var(--s));
  line-height: 1;
  white-space: nowrap;
  transform: rotate(var(--r));
  transform-origin: 50% 60%;
}

.ct--1 { --x: -0.02; --y: 0;    --f: 1.06; --r: -10deg; --d: 0ms; }
.ct--2 { --x: 0.97;  --y: 0.22; --f: 0.9;  --r: 7deg;   --d: 50ms; }
.ct--3 { --x: 1.92;  --y: 0.1;  --f: 0.52; --r: -15deg; --d: 250ms; }
.ct--4 { --x: 0.3;   --y: 1.12; --f: 0.84; --r: 9deg;   --d: 100ms; }
.ct--5 { --x: 1.06;  --y: 1.12; --f: 0.76; --r: -7deg;  --d: 140ms; }
.ct--6 { --x: 1.78;  --y: 0.84; --f: 1;    --r: -3deg;  --d: 180ms; }

.contact-title__layer--edge .ct {
  color: var(--title-rim);
  -webkit-text-stroke: 0.3em var(--title-rim);
  transform: translate(-0.08em, 0.1em) rotate(var(--r));
}

.contact-title__layer--ink .ct {
  color: #000;
  -webkit-text-stroke: 0.22em #000;
  transform: translate(-0.08em, 0.1em) rotate(var(--r));
}

.contact-title__layer--face .ct {
  color: #fff;
  -webkit-text-stroke: 0.06em #000;
  paint-order: stroke fill;
}

/* on opening, the letters slam down one after another and the shards fire */
.contact-space:not([hidden]) .ct {
  animation: contact-title-slam 420ms cubic-bezier(0.2, 0.9, 0.25, 1.1) calc(150ms + var(--d)) both;
}

.contact-space:not([hidden]) .contact-title__burst {
  animation: contact-title-burst 380ms cubic-bezier(0.16, 1, 0.3, 1) 380ms both;
}

@keyframes contact-title-slam {
  0% { opacity: 0; scale: 1.85; }
  22% { opacity: 1; }
  62% { scale: 0.93; }
  100% { opacity: 1; scale: 1; }
}

@keyframes contact-title-burst {
  0% { opacity: 0; scale: 0.35; }
  55% { opacity: 1; scale: 1.07; }
  100% { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-space:not([hidden]) .ct,
  .contact-space:not([hidden]) .contact-title__burst {
    animation: none;
  }
}

.contact-device {
  position: relative;
  z-index: 2;
  width: min(1460px, 100%);
  height: 100%;
  min-height: calc(100svh - 56px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(380px, 0.68fr);
  align-items: center;
  gap: clamp(38px, 4.8vw, 84px);
  pointer-events: none;
}

.contact-shard-selector {
  --wheel-drag-x: 0px;
  --wheel-drag-y: 0px;
  --ice-edge: #67caff;
  position: relative;
  z-index: 4;
  width: min(55vw, 78vh, 760px);
  aspect-ratio: 1.1;
  place-self: center end;
  overflow: visible;
  isolation: isolate;
  pointer-events: auto;
  transform-origin: 52% 52%;
  will-change: transform, opacity;
}

.contact-shard-selector::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 13%;
  top: 19%;
  width: 70%;
  height: 64%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(45, 150, 218, 0.09), rgba(6, 19, 32, 0.025) 48%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}

.contact-shard-wheel,
.contact-shard-items {
  position: absolute;
  inset: 0;
}

.contact-shard-wheel {
  cursor: grab;
  touch-action: none;
  transform: translate3d(var(--wheel-drag-x), var(--wheel-drag-y), 0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-shard-selector.is-dragging .contact-shard-wheel {
  cursor: grabbing;
  transition-duration: 0ms;
}

.contact-shard {
  --ice-shape: polygon(3% 18%, 16% 4%, 43% 7%, 53% 1%, 81% 9%, 97% 25%, 93% 69%, 81% 94%, 53% 98%, 34% 91%, 11% 95%, 2% 71%);
  position: absolute;
  z-index: var(--slot-z, 0);
  left: var(--slot-x, 100%);
  top: var(--slot-y, 50%);
  display: block;
  width: clamp(250px, 32vw, 460px);
  aspect-ratio: 1.42;
  padding: 0;
  border: 0;
  color: var(--shard-ink, #f5fbff);
  background: transparent;
  opacity: var(--slot-opacity, 0);
  cursor: pointer;
  perspective: 1000px;
  pointer-events: auto;
  touch-action: manipulation;
  transform:
    translate(-50%, -50%)
    rotate(var(--slot-rotation, 0deg))
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    scale(var(--slot-scale, 0.2));
  transform-origin: center;
  /* shards further from the middle sink into the dark instead of going out of
     focus: blur made them look smeared */
  filter: brightness(var(--slot-dim, 1)) saturate(var(--slot-sat, 1));
  transition:
    left 560ms cubic-bezier(0.16, 1, 0.3, 1),
    top 560ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 360ms ease,
    filter 440ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: left, top, transform, opacity, filter;
}

.contact-shard[data-slot="-1"],
.contact-shard[data-slot="1"] {
  --slot-dim: 0.74;
  --slot-sat: 0.86;
}

.contact-shard[data-slot="-2"],
.contact-shard[data-slot="2"],
.contact-shard[data-slot="far"] {
  --slot-dim: 0.5;
  --slot-sat: 0.7;
}

.contact-shard[data-slot="far"] {
  visibility: hidden;
  pointer-events: none;
  transition:
    left 560ms cubic-bezier(0.16, 1, 0.3, 1),
    top 560ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms ease,
    visibility 0ms linear 560ms,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- the ice light ----
   Every shard is a slab of ice in its own colour, and its light is that colour
   too: the edge catches a lighter tint of it on the upper left, the slab's
   thickness carries the same edge, and only the chosen shard glows, briefly
   and close to its outline. Dark shards (TikTok, Douyin, GitHub) get a silver
   edge and almost no glow, so they never turn into a grey fog. */
.contact-shard {
  --ice-rim: linear-gradient(
    138deg,
    color-mix(in srgb, var(--shard-light) 42%, #ffffff 58%) 0%,
    var(--shard-light) 20%,
    color-mix(in srgb, var(--shard-surface) 74%, #000000 26%) 58%,
    color-mix(in srgb, var(--shard-light) 78%, var(--shard-surface) 22%) 90%,
    color-mix(in srgb, var(--shard-light) 62%, #ffffff 38%) 100%
  );
  --ice-rim-width: 1.5px;
}

.contact-shard__plate {
  position: absolute;
  inset: 0;
  display: block;
  isolation: isolate;
  filter:
    drop-shadow(0 0 0.6px color-mix(in srgb, var(--shard-light) 55%, transparent))
    drop-shadow(0 22px 22px rgba(0, 0, 0, 0.5));
  transform-origin: center;
  transform-style: preserve-3d;
  transition:
    filter 260ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-shard__plate::before {
  content: none;
}

.contact-shard__depth,
.contact-shard__surface {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: var(--ice-shape);
  pointer-events: none;
}

/* the slab's thickness: an ice edge with the brand colour seen through it */
.contact-shard__depth {
  z-index: 1;
  background: var(--ice-rim);
  opacity: 0.62;
  transform: translate3d(8px, 10px, -10px);
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-shard__depth::before {
  content: "";
  position: absolute;
  inset: var(--ice-rim-width);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--shard-surface) 66%, #000 34%),
    color-mix(in srgb, var(--shard-surface) 42%, #000 58%)
  );
  clip-path: var(--ice-shape);
}

.contact-shard__surface {
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  background: var(--ice-rim);
}

.contact-shard__surface::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: var(--ice-rim-width);
  background: var(--shard-surface);
  clip-path: var(--ice-shape);
}

/* frost on the face: light from the upper left, one refraction line */
.contact-shard__surface::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: var(--ice-rim-width);
  background:
    linear-gradient(141deg, rgba(228, 247, 255, 0.24) 0%, rgba(228, 247, 255, 0.07) 24%, transparent 42%),
    linear-gradient(117deg, transparent 0 61.4%, rgba(214, 243, 255, 0.2) 61.6% 61.95%, transparent 62.2%),
    linear-gradient(320deg, rgba(0, 10, 24, 0.28), transparent 38%);
  clip-path: var(--ice-shape);
  pointer-events: none;
}

.contact-shard__emblem,
.contact-shard__watermark {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--shard-ink);
  pointer-events: none;
}

.contact-shard__emblem {
  z-index: 3;
  left: 21%;
  top: 48%;
  width: 18%;
  aspect-ratio: 1;
  opacity: 0.9;
  transform: translate(-50%, -50%) translateZ(18px);
  transition:
    opacity 220ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-shard__watermark {
  z-index: 2;
  right: -7%;
  bottom: -13%;
  width: 49%;
  aspect-ratio: 1;
  opacity: 0.12;
  transform: rotate(-7deg) translateZ(8px);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(135deg, transparent 3%, rgba(0, 0, 0, 0.32) 31%, #000 72%);
  mask-image: linear-gradient(135deg, transparent 3%, rgba(0, 0, 0, 0.32) 31%, #000 72%);
  transition:
    opacity 320ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-shard__emblem svg,
.contact-shard__watermark svg,
.contact-information__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.contact-shard:hover .contact-shard__plate,
.contact-shard:focus-visible .contact-shard__plate {
  transform: translateY(-4px) scale(1.018);
}

.contact-shard:hover .contact-shard__plate,
.contact-shard:focus-visible .contact-shard__plate {
  filter:
    drop-shadow(0 0 0.8px color-mix(in srgb, var(--shard-light) 70%, #ffffff 30%))
    drop-shadow(0 0 7px color-mix(in srgb, var(--shard-halo) 70%, transparent))
    drop-shadow(0 26px 26px rgba(0, 0, 0, 0.55));
}

/* the chosen shard: a bright edge in its own colour and a short glow hugging it */
.contact-shard.is-active {
  --ice-rim-width: 2px;
}

.contact-shard.is-active .contact-shard__plate {
  filter:
    drop-shadow(0 0 0.8px color-mix(in srgb, var(--shard-light) 55%, #ffffff 45%))
    drop-shadow(0 0 9px var(--shard-halo))
    drop-shadow(0 0 24px color-mix(in srgb, var(--shard-halo) 34%, transparent))
    drop-shadow(0 32px 32px rgba(0, 0, 0, 0.6));
}

.contact-shard.is-active .contact-shard__depth {
  opacity: 0.8;
  transform: translate3d(10px, 12px, -12px);
}

.contact-shard.is-active .contact-shard__emblem {
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(24px) scale(1.06);
}

.contact-shard.is-active .contact-shard__watermark {
  opacity: 0.18;
  transform: rotate(-4deg) translate3d(-2%, -2%, 10px) scale(1.035);
}

.contact-shard:focus-visible {
  outline: none;
}

.contact-shard:focus-visible .contact-shard__plate {
  filter:
    drop-shadow(0 0 1px #ffffff)
    drop-shadow(0 0 2px var(--shard-light))
    drop-shadow(0 0 12px var(--shard-halo))
    drop-shadow(0 32px 32px rgba(0, 0, 0, 0.6));
}

.contact-space[data-contact-direction="next"] .contact-shard-selector.is-switching .contact-shard.is-active .contact-shard__plate {
  animation: contact-shard-settle-next 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-space[data-contact-direction="previous"] .contact-shard-selector.is-switching .contact-shard.is-active .contact-shard__plate {
  animation: contact-shard-settle-previous 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes contact-shard-settle-next {
  0% { transform: translate3d(-18px, 11px, 0) rotateY(-10deg) scale(0.92); }
  72% { transform: translate3d(3px, -2px, 0) rotateY(2deg) scale(1.015); }
  100% { transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
}

@keyframes contact-shard-settle-previous {
  0% { transform: translate3d(-18px, -11px, 0) rotateY(10deg) scale(0.92); }
  72% { transform: translate3d(3px, 2px, 0) rotateY(-2deg) scale(1.015); }
  100% { transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
}

.contact-information {
  position: relative;
  z-index: 6;
  width: min(450px, 34vw);
  min-height: 340px;
  padding: clamp(38px, 3.4vw, 50px);
  justify-self: start;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 12%, 9% 0, 88% 0, 100% 16%, 96% 84%, 87% 100%, 7% 94%, 0 76%);
  pointer-events: auto;
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.52));
}

.contact-information.is-clickable {
  cursor: pointer;
}

.contact-information::before,
.contact-information::after {
  content: "";
  position: absolute;
  clip-path: inherit;
  pointer-events: none;
}

.contact-information::before {
  z-index: -2;
  inset: 0;
  background: var(--channel-edge);
  transition: background-color 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-information::after {
  z-index: -1;
  inset: 1.5px;
  background: var(--channel-surface);
  transition: background-color 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-information__icon {
  display: grid;
  width: 56px;
  aspect-ratio: 1;
  place-items: center;
  padding: 13px;
  color: #000;
  background: #fff;
  clip-path: polygon(50% 0, 94% 24%, 88% 78%, 50% 100%, 8% 78%, 4% 25%);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.24));
  transform-origin: center;
}

.contact-information__icon:empty {
  visibility: hidden;
}

.contact-information h3 {
  margin-top: 30px;
  color: var(--channel-ink);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(40px, 3.3vw, 54px);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: 0.018em;
  white-space: nowrap;
  text-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  transition: color 280ms ease;
}

.contact-information[data-channel="default"] h3 {
  font-size: clamp(36px, 2.8vw, 46px);
}

.contact-information p {
  max-width: 31ch;
  margin-top: 22px;
  color: var(--channel-muted);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 480;
  line-height: 1.82;
  letter-spacing: 0.004em;
  transition: color 280ms ease;
}

.contact-information__actions {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}

.contact-information__actions:empty {
  display: none;
}

.contact-information__actions button,
.contact-information__actions a {
  position: relative;
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border: 1px solid var(--channel-edge);
  color: var(--channel-ink);
  background: var(--channel-action);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 14px, calc(100% - 7px) 100%, 11px 100%, 0 calc(100% - 10px));
  text-decoration: none;
  font-size: 14px;
  font-weight: 640;
  line-height: 1.45;
  letter-spacing: 0;
  cursor: pointer;
  transform-origin: left center;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    filter 180ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-information__actions button:hover,
.contact-information__actions button:focus-visible,
.contact-information__actions a:hover,
.contact-information__actions a:focus-visible {
  color: var(--channel-ink);
  border-color: var(--channel-ink);
  background: var(--channel-action);
  filter: brightness(1.12);
  transform: translateX(5px) skewX(-1deg);
}

.contact-information__actions [aria-disabled="true"] {
  color: var(--channel-muted);
  cursor: default;
}

.contact-information__actions [aria-disabled="true"]:hover,
.contact-information__actions [aria-disabled="true"]:focus-visible {
  background: var(--channel-action);
  filter: none;
  transform: none;
}

/* EIL's signature (the user's own logo) in the free corner under the card */
.contact-space__signature {
  position: absolute;
  z-index: 3;
  right: max(52px, env(safe-area-inset-right));
  bottom: max(30px, env(safe-area-inset-bottom));
  width: clamp(120px, min(13vw, 20vh), 220px);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  user-select: none;
}

.contact-space:not([hidden]) .contact-space__signature {
  animation: contact-signature-in 620ms cubic-bezier(0.16, 1, 0.3, 1) 460ms both;
}

@keyframes contact-signature-in {
  0% { opacity: 0; translate: 0 14px; }
  100% { opacity: 0.92; translate: 0 0; }
}

@media (max-height: 650px) and (orientation: landscape), (max-aspect-ratio: 4/5) {
  .contact-space__signature {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-space:not([hidden]) .contact-space__signature {
    animation: none;
  }
}

.contact-space__close {
  --contact-close-shape: polygon(4% 0, 95% 0, 100% 20%, 100% 74%, 94% 91%, 72% 83%, 57% 100%, 37% 84%, 0 91%, 0 25%);
  position: absolute;
  z-index: 10;
  isolation: isolate;
  top: max(20px, env(safe-area-inset-top));
  right: max(28px, env(safe-area-inset-right));
  width: clamp(210px, 21vw, 330px);
  height: clamp(66px, 6vw, 84px);
  padding: 0;
  border: 0;
  color: rgba(211, 238, 250, 0.86);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease;
}

.contact-space__close-plate {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  clip-path: var(--contact-close-shape);
  pointer-events: none;
  transition:
    filter 260ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-space__close-plate::before,
.contact-space__close-plate::after {
  content: "";
  position: absolute;
  clip-path: var(--contact-close-shape);
}

.contact-space__close-plate::before {
  inset: 0;
  background: linear-gradient(132deg, rgba(183, 234, 255, 0.92), rgba(67, 181, 239, 0.82) 26%, rgba(33, 107, 211, 0.72) 68%, rgba(136, 218, 255, 0.74));
  filter:
    drop-shadow(0 18px 30px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 11px rgba(70, 177, 233, 0.14));
}

.contact-space__close-plate::after {
  inset: 1.5px;
  background:
    linear-gradient(92deg, rgba(1, 6, 15, 0.48), rgba(4, 15, 28, 0.23) 47%, rgba(0, 4, 12, 0.52)),
    linear-gradient(0deg, rgba(0, 3, 10, 0.48), transparent 66%),
    url("./assets/theme/preview-close-fill.jpg") 52% 46% / cover no-repeat;
  filter: blur(1.7px) saturate(0.9) brightness(0.78) contrast(1.06);
}

.contact-space__close::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(105deg, transparent 24%, rgba(220, 248, 255, 0.2) 47%, transparent 69%) 145% 50% / 220% 100% no-repeat;
  clip-path: var(--contact-close-shape);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    background-position 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-space__close-glyph {
  position: absolute;
  z-index: 5;
  top: 24%;
  left: 19%;
  display: block;
  width: clamp(70px, 7vw, 98px);
  height: 32px;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-space__close-glyph::before,
.contact-space__close-glyph::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 1.2px;
  background: currentColor;
  transform-origin: center;
}

.contact-space__close-glyph::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-space__close-glyph::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-space__close:hover,
.contact-space__close:focus-visible {
  color: #fff;
  outline: none;
}

.contact-space__close:hover::before,
.contact-space__close:focus-visible::before {
  opacity: 1;
  background-position: -34% 50%;
}

.contact-space__close:hover .contact-space__close-plate,
.contact-space__close:focus-visible .contact-space__close-plate {
  filter: brightness(1.1) saturate(1.06);
  transform: translateY(-1px);
}

.contact-space__close:hover .contact-space__close-glyph,
.contact-space__close:focus-visible .contact-space__close-glyph {
  transform: scale(0.86);
}

.contact-space__close:focus-visible .contact-space__close-plate::before {
  filter:
    drop-shadow(0 0 5px rgba(121, 211, 255, 0.42))
    drop-shadow(0 13px 23px rgba(0, 6, 15, 0.46));
}

.contact-space__close:active .contact-space__close-plate {
  filter: brightness(1.15) saturate(1.08);
  transform: translateY(1px) scale(0.992);
}

.contact-space__close:active .contact-space__close-glyph {
  transform: scale(0.74);
}

.contact-space:not(.is-open) .contact-shard {
  pointer-events: none;
}

.contact-space.is-opening .contact-space__scrim,
.contact-space.is-opening .contact-shard,
.contact-space.is-opening .contact-information,
.contact-space.is-opening .contact-space__close,
.contact-space.is-closing .contact-space__scrim,
.contact-space.is-closing .contact-shard,
.contact-space.is-closing .contact-information,
.contact-space.is-closing .contact-space__close {
  pointer-events: none;
}

.contact-space:not(.is-open) .contact-space__fracture-field {
  opacity: 0;
  transform: scale(1.045);
}

@media (max-width: 980px) {
  .contact-device {
    grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
    gap: 24px;
  }

  .contact-shard-selector {
    width: min(55vw, 72vh, 590px);
  }

  .contact-shard {
    width: clamp(170px, 25vw, 300px);
  }

  .contact-information {
    width: min(380px, 37vw);
    min-height: 290px;
    padding: 32px;
  }
}

@media (max-width: 820px) {
  .contact-space__stage {
    padding: 18px;
  }

  .contact-space__heading {
    --contact-title-size: clamp(34px, 6vw, 50px);
    top: 18px;
    left: 20px;
    max-width: 44vw;
  }

  .contact-device {
    grid-template-columns: minmax(0, 1.12fr) minmax(250px, 0.88fr);
    min-height: calc(100svh - 36px);
    gap: 16px;
  }

  .contact-shard-selector {
    width: min(53vw, 68vh, 480px);
  }

  .contact-shard {
    width: clamp(130px, 24vw, 220px);
  }

  .contact-information {
    width: min(320px, 40vw);
    min-height: 246px;
    padding: 26px;
  }

  .contact-information__icon {
    width: 42px;
    padding: 10px;
  }

  .contact-information h3 {
    margin-top: 19px;
    font-size: clamp(28px, 4.5vw, 38px);
    line-height: 1;
    white-space: normal;
  }

  .contact-information[data-channel="default"] h3 {
    font-size: clamp(25px, 3.8vw, 32px);
  }

  .contact-information p {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.62;
  }

  .contact-information__actions {
    gap: 7px;
    margin-top: 18px;
  }

  .contact-information__actions button,
  .contact-information__actions a {
    min-height: 42px;
    padding: 8px 13px;
    font-size: 11.5px;
  }

  .contact-space__close {
    top: 16px;
    right: 18px;
    width: clamp(150px, 24vw, 220px);
    height: clamp(50px, 8vw, 64px);
  }

  .contact-space__close-glyph {
    left: 16%;
    width: 64px;
  }

  .contact-space__close-glyph::before,
  .contact-space__close-glyph::after {
    width: 24px;
  }
}

@media (max-height: 650px) and (orientation: landscape) {
  .contact-space__stage {
    min-height: 100dvh;
    padding:
      max(12px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  .contact-space__heading {
    --contact-title-size: clamp(30px, 9vh, 46px);
    top: max(14px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left));
    max-width: 38vw;
  }

  .contact-device {
    width: min(1100px, 96vw);
    min-height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1.2fr) minmax(270px, 0.8fr);
    gap: clamp(16px, 3vw, 36px);
  }

  .contact-shard-selector {
    width: min(52vw, 78vh, 470px);
  }

  .contact-shard {
    width: clamp(125px, 23vw, 250px);
  }

  .contact-information {
    width: min(350px, 37vw);
    min-height: 224px;
    padding: 24px 27px;
  }

  .contact-information__icon {
    width: 38px;
    padding: 9px;
  }

  .contact-information h3 {
    margin-top: 15px;
    font-size: clamp(27px, 6.5vh, 38px);
    white-space: nowrap;
  }

  .contact-information[data-channel="default"] h3 {
    font-size: clamp(24px, 5.8vh, 32px);
  }

  .contact-information p {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.55;
  }

  .contact-information__actions {
    margin-top: 14px;
  }

  .contact-information__actions button,
  .contact-information__actions a {
    min-height: 38px;
    padding: 7px 11px;
    font-size: 10px;
  }

  .contact-space__close {
    top: max(12px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: min(20vw, 210px);
    min-width: 146px;
    height: min(13vh, 58px);
  }

  .contact-space__close-glyph {
    top: 18%;
    left: 14%;
    width: 60px;
  }

  .contact-space__fracture-field {
    opacity: 0.76;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-shard,
  .contact-shard__plate,
  .contact-shard__plate::before,
  .contact-shard__depth,
  .contact-shard__surface,
  .contact-shard__emblem,
  .contact-shard__watermark,
  .contact-shard-wheel,
  .contact-information,
  .contact-information::before,
  .contact-information::after,
  .contact-information h3,
  .contact-information p,
  .contact-information__actions button,
  .contact-information__actions a,
  .contact-space__scrim,
  .contact-space__fracture-field,
  .contact-space__close,
  .contact-space__close::before,
  .contact-space__close-plate,
  .contact-space__close-glyph {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}