/* ---------- Case popup (Figma "Case 01", 75:2154) ----------
   A dimmed, blurred page with an 870px black panel scrolling over it. The panel is a
   column of blocks; the numbers are Figma's (panel px). Wide blocks (.case__fit) keep
   their design size and are scaled down by case.js when the screen is narrower.
   Small text in the phone screens is set at the main card's size (9.991px, the
   profile name), as on the home screen; only the tab bar stays smaller. */

.case {
  --panel-top: 92px;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(2, 1, 2, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.case[hidden] {
  display: none;
}

.case.is-open {
  opacity: 1;
}

html.case-open {
  overflow: hidden;
}

.case__panel {
  position: relative;
  width: min(870px, 100%);
  margin: var(--panel-top) auto 0;
  padding-bottom: 90px;
  border-radius: 40px 40px 0 0;
  overflow: clip; /* like Figma's frame */
  display: flow-root; /* keeps the cross's top margin inside the panel */
  background: #000;
  color: #fff;
  font-family: "Geist", sans-serif;
  translate: 0 60px;
  transition: translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.case.is-open .case__panel {
  translate: 0 0;
}

/* Figma corner smoothing 80% on the top corners */
@supports (corner-shape: superellipse(2)) {
  .case__panel {
    border-radius: 72px 72px 0 0;
    corner-shape: superellipse(1.96);
  }
}

/* The cross floats: it stays where it starts on screen (34px into the panel) while
   the case scrolls under it. In the flow but taking no space (margins). */
.case__close {
  position: sticky;
  z-index: 3;
  top: calc(var(--panel-top) + 34px);
  display: block;
  width: 49px;
  height: 49px;
  margin: 34px auto -83px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.case__close img {
  display: block;
  width: 100%;
  height: 100%;
}

.case__close:hover {
  transform: rotate(90deg);
}

.case__close:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

/* ---------- Text ---------- */

/* 16px text (12px in Figma) */
.case__head {
  padding: 83px 56px 0;
  max-width: 525px;
  box-sizing: content-box;
}

.case__app {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.72px;
}

.case__title {
  max-width: 394px; /* Figma's two-line break */
  margin: 11px 0 0;
  font-size: 48.063px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -1.4419px;
}

.case__text {
  margin: 11px 0 0;
  font-size: 16px;
  line-height: 1.4;
}

/* Fixed line breaks (<br> in the markup), never re-wrapped: the lines keep their
   length. On screens too narrow for the longest line the size steps down instead
   (longest lines at 16px: 505px above, 433px below). */
.case__text--lines {
  white-space: nowrap;
  font-size: min(16px, calc((100vw - 56px) * 16 / 505));
}

.case__text--narrow.case__text--lines {
  font-size: min(16px, calc((100vw - 56px) * 16 / 433));
}

.case__text--narrow {
  max-width: none;
  margin: 56px 56px 0;
}

/* ---------- Blocks ---------- */

.case__block {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.case__block img {
  display: block;
  max-width: none;
}

/* A rotated child sized to its box, like Figma's rotated vectors */
.rot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.rot > img,
.rot > svg {
  position: absolute;
}

/* Home screen: the phone card, copied (272 × 550) */
.case__home {
  width: 272px;
  height: 550px;
  margin-top: 53px;
  translate: 1px 0;
}

.case__home > .phone {
  position: absolute;
  left: 0;
  top: 0;
}

/* Tab bar icons on a dashed grid */
.case__icons {
  width: 420px;
  height: 372px;
  margin-top: 141px;
}

.case__icons img,
.case__icons svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Arrival of a dashed grid (once, case.js adds .is-armed then .is-drawn; icons and
   reward blocks): the dashed lines draw themselves one after another — vertical ones
   from the top, horizontal ones from the left — then what sits on the grid settles in.
   .grid-up is for lines drawn in an upside-down SVG (bottom-up in its own space). */
/* stroke-box: the lines are hairlines with no fill area to clip against */
.is-armed .grid-v {
  clip-path: inset(0 0 100% 0) stroke-box;
}

.is-armed .grid-up {
  clip-path: inset(100% 0 0 0) stroke-box;
}

.is-armed .grid-h {
  clip-path: inset(0 100% 0 0) stroke-box;
}

.is-armed .grid-v,
.is-armed .grid-up,
.is-armed .grid-h {
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i) * 55ms);
}

.is-armed .grid-icon {
  opacity: 0;
  transform: scale(0.85);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.34, 1.5, 0.5, 1);
  transition-delay: calc(700ms + var(--i) * 90ms);
}

.is-drawn .grid-v,
.is-drawn .grid-up,
.is-drawn .grid-h {
  clip-path: inset(0) stroke-box;
}

.is-drawn .grid-icon {
  opacity: 1;
  transform: none;
}

/* Timer over the particle stream */
.case__timer {
  width: 318px;
  height: 546px;
  margin-top: 115px;
}

/* Drawn by case.js: dots on a transparent canvas, so no box shows around them
   (the exported picture had a near-black background that read as a rectangle).
   The clock sits above it. */
.case__particles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 870px;  /* the whole panel width (it clips), 100px over the block top and bottom */
  height: 746px;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  pointer-events: none;
  /* thins out towards every edge, so there is no frame around the stream */
  -webkit-mask: radial-gradient(50% 50% at 50% 50%, #000 45%, transparent 100%);
  mask: radial-gradient(50% 50% at 50% 50%, #000 45%, transparent 100%);
}

.case__clock {
  position: absolute;
  left: 50%;
  top: 242px; /* centre at panel y 1898 */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Host Grotesk", sans-serif;
  white-space: nowrap;
}

.case__clock-total {
  margin-bottom: -4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.8px;
}

/* 00 05 45 with the colons drawn as dots (the Figma group over the gaps) */
.case__clock-now {
  position: relative;
  display: flex;
  gap: 21px;
  font-size: 70px;
  line-height: normal;
}

/* Each pair keeps the width of "00" so the dots between them never shift as the
   digits change */
.case__clock-now > span {
  min-width: 1.12em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.case__clock-total {
  font-variant-numeric: tabular-nums;
}

.case__clock-now img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 23px;
  transform: translate(-50%, -38%);
}

/* Two phone screens side by side */
.case__pair {
  width: 634px;
  height: 550px;
  margin-top: 229px;
  display: flex;
  gap: 90px;
  translate: 11px 0;
}

/* Reward hexagon on its grid */
.case__reward {
  width: 618px;
  height: 618px;
  margin-top: 229px;
  translate: 3px 0;
}

.case__reward > * {
  position: absolute;
}

.case__reward-grid {
  inset: 0;
  overflow: hidden;
  opacity: 0.8;
}

.case__reward-a,
.case__reward-b {
  position: absolute;
  container-type: size;
}

.case__reward-a {
  left: 0;
  top: 127.74px;
  width: 618px;
  height: 362.514px;
}

.case__reward-b {
  left: 127.75px;
  top: 0;
  width: 362.514px;
  height: 618px;
  transform: rotate(180deg);
}

.case__reward-a img,
.case__reward-b img,
.case__reward-a svg,
.case__reward-b svg {
  position: absolute;
  inset: 0 -0.22%;
  width: 100.44%;
  height: 100%;
}

.case__reward-glow {
  left: 207.6px;
  top: 196.7px;
  width: 202.8px;
  height: 224.7px;
}

.case__reward-hex,
.case__reward-inner {
  container-type: size;
}

.case__reward-hex {
  left: 207.6px;
  top: 196.7px;
  width: 202.8px;
  height: 224.7px;
}

.case__reward-hex img {
  inset: 0 -0.51%;
  width: 101.02%;
  height: 100%;
}

.case__reward-inner {
  left: 215.5px;
  top: 204.3px;
  width: 187px;
  height: 207.6px;
}

.case__reward-inner img {
  inset: -0.42% 0.17%;
  width: 99.66%;
  height: 100.84%;
}

.case__reward-num {
  left: 215.5px;
  top: 245.7px;
  width: 187px;
  height: 125.7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 95.077px/normal "Host Grotesk", sans-serif;
  letter-spacing: -2.8523px;
  color: #020103;
  text-shadow: 0 0 47.239px #eaffff;
}

.case__reward-token {
  left: 371.06px; /* 377 − 12.38% of 48 */
  top: 242px;
  width: 59.88px;
  height: 59.88px;
}

/* ---------- Phone screens in the case (Figma 02. Timer, 03. Completed) ---------- */

.cp {
  position: relative;
  flex-shrink: 0;
  width: 272px;
  height: 550px;
  font-family: "Host Grotesk", sans-serif;
  color: #fff;
}

.cp > img,
.cp__screen > * {
  position: absolute;
}

.cp__shadow {
  left: 0;
  top: 0;
  width: 487.29px;
  height: 680.3px;
  opacity: 0.8;
}

.cp__frame {
  inset: 0;
  width: 100%;
  height: 100%;
}

.cp__screen {
  position: absolute;
  left: 14px;
  top: 11px;
  width: 244px;
  height: 528.041px;
  overflow: hidden;
  border-radius: 34px;
  background: #000;
}

/* The particle stream, drawn by case.js like the timer block's */
.cp__particles {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.cp__status {
  left: 0;
  top: 0;
  width: 244px;
  height: 35.036px;
}

.cp__status span {
  position: absolute;
  left: calc(50% - 88.22px);
  top: calc(50% + 0.73px);
  width: 30.031px;
  transform: translate(-50%, -50%);
  text-align: center;
  font: 600 10.64px/normal -apple-system, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.2128px;
}

.cp__status img {
  position: absolute;
  right: 20.02px;
  top: calc(50% + 0.48px);
  width: 48.8px;
  height: 8.759px;
  transform: translateY(-50%);
}

.cp__nav {
  left: 0;
  top: 35.04px;
  width: 244px;
  padding: 10.01px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cp__icon {
  width: 25.026px;
  height: 25.026px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0.626px solid #1d1d1d;
  border-radius: 50%;
}

.cp__icon img {
  width: 15.015px;
  height: 15.015px;
}

.cp__nav-title {
  font-size: 10.01px;
}

.cp__info {
  width: 25.652px;
  height: 25.652px;
  margin: -0.313px;
}

.cp__strict {
  left: calc(16.67% + 26.9px);
  top: 80.08px;
  width: 109.487px;
  padding: 6.256px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.503px;
  font-size: 9.991px;
}

.cp__strict img {
  width: 15.015px;
  height: 15.015px;
}

.cp__clock {
  left: calc(50% + 0.31px);
  top: calc(50% - 5.63px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.cp__clock-total {
  margin-bottom: -2.503px;
  font-size: 10.01px;
  font-weight: 500;
}

.cp__clock-now {
  font-size: 43.795px;
  line-height: normal;
}

.cp__clock-now small {
  font-size: 31.282px;
}

/* the clock runs (case.js): steady digit widths so it doesn't shuffle */
.cp__clock-total,
.cp__clock-now > span {
  font-variant-numeric: tabular-nums;
}

.cp__badge {
  left: calc(58.33% - 15.33px);
  top: 355.99px;
  width: 33.785px;
  height: 27.528px;
  transform: translateX(-50%);
}

/* The hexagon's vector sits in a box inset by 2.3–2.5% (the padding); the container
   size is that content box, so the rotated child gets its swapped size */
.cp__hex {
  position: absolute;
  left: -0.63px;
  top: 0;
  width: 25.026px;
  height: 27.528px;
  padding: 0.625px 0.628px 0.625px 0.623px;
  box-sizing: border-box;
  overflow: hidden;
  container-type: size;
}

.cp__hex .rot img {
  inset: 0 -7.56% -21.05% -7.56%;
  width: 115.12%;
  height: 121.05%;
}

.cp__hex b {
  position: absolute;
  left: 12.51px;
  top: 13.76px;
  width: 23.774px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 12.298px;
  font-weight: 500;
  letter-spacing: -0.3689px;
  color: #000;
}

.cp__token {
  position: absolute;
  left: 16.89px; /* 18.77 − 12.5% of 15.015 */
  top: 0;
  width: 18.77px;
  height: 18.77px;
}

.cp__note {
  left: calc(50% - 0.17px);
  top: 403.03px;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font-size: 9.991px;
  letter-spacing: -0.0876px;
}

.cp__sound {
  left: calc(50% + 0.31px);
  top: 434.82px;
  width: 129.508px;
  height: 30.031px;
  padding: 5.005px 7.508px;
  box-sizing: border-box;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2.503px;
  border: 0.626px solid #1d1d1d;
  border-radius: 25.026px;
  font-size: 9.991px;
}

.cp__sound img {
  flex-shrink: 0;
  width: 15.015px;
  height: 15.015px;
}

.cp__sound span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp__sound .cp__chev {
  width: 10.01px;
  height: 10.01px;
  transform: rotate(180deg);
}

.cp__home {
  left: calc(50% - 0.31px);
  bottom: 2.64px;
  width: 86.964px;
  height: 3.128px;
  transform: translateX(-50%);
  border-radius: 2.503px;
  background: #4b4b4b;
  box-shadow: inset 0 0.206px 0 rgba(0, 0, 0, 0.3);
}

/* Completed */
.cp__grid {
  left: 0;
  top: 55.06px;
  width: 244px;
  height: 244px;
  overflow: hidden;
}

.cp__grid-a,
.cp__grid-b {
  position: absolute;
  container-type: size;
}

.cp__grid-a {
  left: 0;
  top: 50.44px;
  width: 244px;
  height: 143.129px;
}

.cp__grid-b {
  left: 50.44px;
  top: 0;
  width: 143.128px;
  height: 244px;
  transform: rotate(180deg);
}

.cp__grid-a img,
.cp__grid-b img {
  position: absolute;
  inset: 0 -0.22%;
  width: 100.44%;
  height: 100%;
}

.cp__big-hex,
.cp__big-inner {
  container-type: size;
}

.cp__big-hex {
  left: 33.59%;
  right: 33.59%;
  top: 25.12%;
  bottom: 58.06%;
}

.cp__big-hex img {
  inset: 0 -7.95% -18.75% -7.95%;
  width: 115.9%;
  height: 118.75%;
}

.cp__big-num {
  left: 34.87%;
  right: 34.87%;
  top: 28.79%;
  bottom: 61.74%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 37.538px;
  letter-spacing: -1.1262px;
  color: #000;
  text-shadow: 0 0 18.651px #eaffff;
}

.cp__big-inner {
  left: 34.87%;
  right: 34.87%;
  top: 25.71%;
  bottom: 58.77%;
}

.cp__big-inner img {
  inset: -0.42% 0.17%;
  width: 99.66%;
  height: 100.84%;
}

.cp__big-token {
  left: calc(58.33% + 6.57px - 2.35px);
  top: 150.78px;
  width: 23.46px;
  height: 23.46px;
}

.cp__congrats {
  left: 10.01px;
  top: 312.82px;
  width: 223.979px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.503px;
  text-align: center;
}

.cp__congrats b {
  font-size: 25.026px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.7508px;
}

.cp__congrats span {
  font-size: 10.01px;
  color: #9f9f9f;
  white-space: nowrap;
}

.cp__stat {
  top: 383.52px;
  width: 109.487px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.503px;
  text-align: center;
}

.cp__stat--l {
  left: 10.01px;
}

.cp__stat--r {
  left: calc(50% + 2.5px);
}

.cp__stat span {
  font-size: 9.991px;
  letter-spacing: -0.0876px;
  color: #9f9f9f;
}

.cp__stat b {
  font-size: 12.513px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.3754px;
}

.cp__btn {
  top: 435.45px;
  left: calc(50% + 2.5px);
  width: 90.718px;
  height: 30.031px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0.626px solid #fff;
  border-radius: 31.282px;
  font-size: 9.991px;
  white-space: nowrap;
}

.cp__btn--fill {
  left: calc(8.33% + 9.07px);
  width: 90.092px;
  border: 0;
  background: #fff;
  color: #000;
}

.cp__confetti {
  left: 0;
  top: 0.63px;
  width: 244px;
  height: 434.82px;
  pointer-events: none;
}

/* Live confetti (case.js): falls over the whole screen and heaps up at its bottom.
   The design's still picture stays for reduced motion. */
.cp__confetti--live {
  top: 0;
  height: 528px;
}

/* ---------- Narrow screens ---------- */

/* Phones and narrow tablets: the two screens go one under the other, full size */
@media (max-width: 700px) {
  /* Text 1.5× the stepped-down size (up to the desktop 16px); the lines wrap
     to the screen instead of keeping the desktop breaks */
  .case__text--lines,
  .case__text--narrow.case__text--lines {
    white-space: normal;
    font-size: min(16px, calc((100vw - 56px) * 24 / 505));
  }

  .case__text--lines br {
    display: none;
  }

  .case__pair {
    width: 272px;
    height: auto;
    flex-direction: column;
    gap: 56px;
    translate: 0 0;
  }
}

@media (max-width: 900px) {
  .case__panel {
    --panel-top: 48px;
  }

  .case__head {
    max-width: none;
    padding: 96px 24px 0;
  }

  .case__title {
    font-size: 40px;
  }

  .case__text--narrow {
    margin: 48px 24px 0;
  }
}

/* ---------- Entrance (case.js), as on the home screen ----------
   Words rise out of a blur line by line; the picture blocks rise and sharpen as
   they scroll in. .cr-armed = waiting, .is-in = shown. */
.cr-w {
  display: inline-block;
}

.cr-armed .cr-w {
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(6px);
}

.cr-armed .is-in .cr-w {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease-out;
}

.cr-armed .case__home,
.cr-armed .case__timer,
.cr-armed .case__pair {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(40px);
}

.cr-armed .case__home.is-in,
.cr-armed .case__timer.is-in,
.cr-armed .case__pair.is-in {
  opacity: 1;
  filter: none; /* not blur(0): no filter layer left over the live canvases */
  transform: none;
  transition: opacity 0.9s ease-out, filter 0.9s ease-out, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .case,
  .case__panel {
    transition: none;
  }
}