/* Screen 01 — "Corner 1" artwork composited on the 3840×2160 design canvas.
   Geometry comes from the delivered assets: every .lyr / .tx carries its
   design-pixel origin in --x / --y, so 1 unit == 1 design px == var(--u). */

:root {
  /* The reference artwork is set in DB Heavent, which ships locally — matching
     its ink widths also reproduces the ink heights to within a pixel. */
  --font-art: "DB Heavent";
}

.page--art {
  padding: 0;
  background: #04081c;
}

.page--art .hud-frame {
  display: none;
}

/* ---- Layer primitives ---- */

.lyr {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.lyr--icon {
  height: calc(var(--h, var(--w)) * var(--u));
  object-fit: contain;
}

/* The HUD frame and its divider are additive glows in the source artwork;
   alpha-compositing them turns the soft edge lobes into dark smears. */
.lyr--glow {
  mix-blend-mode: screen;
}

/* Sits above .art-btn (z-index 4); .lyr is pointer-events: none, so the
   buttons underneath stay clickable. */
.lyr--over-btn {
  z-index: 5;
}

/* --y is the box top the line would have at line-height:1, so a taller --lh
   has its half-leading subtracted to keep the first baseline on the design. */
.tx {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--y) - (var(--lh, var(--fs)) - var(--fs)) / 2) * var(--u));
  margin: 0;
  padding: 0;
  font-family: var(--font-art);
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh, var(--fs)) * var(--u));
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: #fff;
  z-index: 3;
}

/* ---- Page 01 — landing ---- */

.tx--eng {
  font-weight: 700;
  background: linear-gradient(90deg, #7ecfe5 0%, #8acb9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tx--coe {
  font-weight: 700;
  color: #fff;
}

.tx--lockup {
  font-weight: 700;
  color: #80d0df;
}

.hero-rule {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    closest-side ellipse at 35% 50%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(120, 220, 255, 0.7) 16%,
    rgba(50, 160, 235, 0.28) 42%,
    rgba(40, 120, 200, 0) 78%
  );
}

.tx--points {
  list-style: none;
  font-weight: 400;
  color: #fff;
}

.tx--points li {
  position: relative;
  padding-left: calc(37 * var(--u));
}

.tx--points li::before {
  content: "•";
  position: absolute;
  left: 0;
}

.tx--tagline {
  font-weight: 700;
  color: #07eeff;
}

.tx--cta {
  font-weight: 400;
  color: #fff;
}

.tx--touch {
  font-weight: 400;
  color: #c9eaf8;
  animation: hint-pulse 2s ease-in-out infinite;
}

.lyr--touch {
  animation: hint-pulse 2s ease-in-out infinite;
}

/* Labels ride the silver spokes of the wheel artwork, so they are dark. */
.tx--wheel-sm,
.tx--wheel-lg {
  color: #16324f;
}

.tx--wheel-sm {
  font-weight: 400;
}

.tx--wheel-lg {
  font-weight: 700;
}

.tx--wheel-core {
  font-weight: 700;
  color: #f8bf15;
}

/* ---- Page 02 — hub ---- */

.tx--panel-head {
  font-weight: 700;
  color: #fff;
}

.tx--panel-sub {
  font-weight: 400;
  color: #4fffff;
}

.step-chevron {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--w) * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #9ed7d1 0%, #8ecdc9 100%);
  z-index: 3;
}

/* The viewBox is in badge pixels, so the path coordinates are the measured
   chevron geometry rather than an arbitrary grid. */
.step-chevron svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #0c3149;
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* ---- Pages 03–06 — detail ---- */

.tx--title {
  font-weight: 700;
  color: #fff;
}

.tx--card {
  font-weight: 700;
  color: #fff;
}

/* Page 5 is the only page whose card copy sits directly under a large coloured
   kicker, and against it the Bold weight the reference uses reads heavier than
   the same copy on pages 3, 4 and 6. Medium evens them out. Point sizes are
   left alone, so these two runs come out ~2% narrower than the reference. */
.tx--card-medium {
  font-weight: 500;
}

.tx--kicker {
  font-weight: 700;
}

.tx--kicker-green {
  color: #3ab54b;
}

.tx--kicker-amber {
  color: #fcb042;
}

/* ---- Artwork-backed buttons ---- */

.art-btn {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  padding: 0;
  border: 0;
  background: var(--art) center / 100% 100% no-repeat;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 4;
  overflow: visible;
  transition:
    transform var(--motion-fast) var(--ease-out),
    filter var(--motion-fast) var(--ease-out);
}

/* A breathing cyan ring marks the landing start CTA as tappable. */
.page--landing .art-btn::after {
  content: "";
  position: absolute;
  inset: calc(-10 * var(--u));
  border: calc(3 * var(--u)) solid rgba(75, 248, 250, 0.6);
  box-shadow:
    0 0 calc(24 * var(--u)) rgba(75, 248, 250, 0.45),
    inset 0 0 calc(20 * var(--u)) rgba(75, 248, 250, 0.2);
  pointer-events: none;
  animation: touch-ring-pulse 2.4s ease-in-out infinite;
  z-index: 2;
}

.page--landing .art-btn:active::after,
.page--landing .art-btn.is-pressed::after {
  animation: none;
  opacity: 1;
  border-color: rgba(160, 253, 255, 0.95);
  box-shadow:
    0 0 calc(34 * var(--u)) rgba(75, 248, 250, 0.7),
    inset 0 0 calc(26 * var(--u)) rgba(75, 248, 250, 0.35);
}

.art-btn:active,
.art-btn.is-pressed {
  transform: scale(0.97);
  filter: brightness(1.12);
}

.art-btn:focus-visible {
  outline: calc(4 * var(--u)) solid var(--color-focus);
  outline-offset: calc(6 * var(--u));
}

.art-btn--start {
  --art: url("../assets/images/con1/C1P1/icon1C1P1.webp");
  border-radius: 999px;
}

.art-btn--start::after {
  border-radius: 999px;
}

.art-btn--start:active,
.art-btn--start.is-pressed {
  animation: none;
}

.art-btn .tx {
  z-index: 1;
}

.page--hub .art-btn.pillar {
  border-radius: calc(32 * var(--u));
  animation: pillar-touch-hint 2.8s ease-in-out infinite;
}

.page--hub .art-btn.pillar:active,
.page--hub .art-btn.pillar.is-pressed {
  animation: none;
}

.pillar--1 {
  --art: url("../assets/images/con1/C1P2/button1C1P2.webp");
}

.pillar--2 {
  --art: url("../assets/images/con1/C1P2/button2C1P2.webp");
}

.pillar--3 {
  --art: url("../assets/images/con1/C1P2/button3C1P2.webp");
}

.pillar--4 {
  --art: url("../assets/images/con1/C1P2/button4C1P2.webp");
}

.pillar__label {
  position: absolute;
  left: 0;
  top: calc((var(--y) - (var(--lh) - var(--fs)) / 2) * var(--u));
  width: 100%;
  font-family: var(--font-art);
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
  font-weight: 700;
  text-align: center;
  color: #fff;
}

/* ---- Nav cluster — flat pale face, matching screen 02/03 ---- */

#nav-back,
#nav-next,
#nav-home {
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  min-width: calc(104 * var(--u));
  min-height: calc(104 * var(--u));
  border: 0;
  background: rgba(116, 139, 170, 0.94);
  box-shadow:
    inset 0 calc(6 * var(--u)) calc(8 * var(--u)) calc(-2 * var(--u))
      rgba(255, 255, 255, 0.95),
    inset 0 calc(-6 * var(--u)) calc(9 * var(--u)) calc(-3 * var(--u))
      rgba(255, 255, 255, 0.6),
    0 calc(5 * var(--u)) calc(16 * var(--u)) rgba(0, 6, 22, 0.3);
  color: #122851;
}

/* The `hidden` attribute must beat the flex display above. */
.btn-cluster[hidden] {
  display: none !important;
}

.btn-cluster .cluster-glyph {
  width: 50%;
  height: 44.23%;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-chrome--cluster.is-hub #nav-home {
  left: 89.28%;
  top: 88.73%;
}

.nav-chrome--cluster.is-hub #nav-next {
  left: 93.06%;
  top: 88.73%;
}

.nav-chrome--cluster.is-detail #nav-back {
  left: 89.15%;
  top: 88.73%;
}

.nav-chrome--cluster.is-detail #nav-home {
  left: 92.83%;
  top: 88.73%;
}

@keyframes pillar-touch-hint {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: none;
  }

  50% {
    filter: brightness(1.06);
    box-shadow:
      0 calc(10 * var(--u)) calc(36 * var(--u)) rgba(79, 255, 255, 0.22),
      0 0 calc(20 * var(--u)) rgba(79, 255, 255, 0.15);
  }
}

@keyframes touch-ring-pulse {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

@keyframes hint-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-btn,
  .btn-cluster,
  .tx--touch,
  .lyr--touch {
    animation: none;
    transition: none;
  }

  .page--landing .art-btn::after {
    animation: none;
    opacity: 0.85;
  }

  .page--hub .art-btn.pillar {
    animation: none;
  }
}