animation

apps/web/src/app/features/hunting/encounter-card/encounter-card.component.scss

@@ -2,106 +2,156 @@
   display: block;
 }
 
+/*
+ * The card is one painted frame, so every slot is placed as a share of that
+ * artwork rather than flowed: percentages keep the crest, the artwork panel,
+ * the two text bands and the blue plaque on their painted counterparts at any
+ * card width. Coordinates come from the 560x957 frame derivative, which is
+ * cut to the frame's silhouette so no black surround shows on the panel.
+ */
 .encounter-card {
-  display: grid;
-  overflow: hidden;
-  border: 1px solid var(--ar-border-highlight);
-  border-radius: var(--ar-radius-md);
-  background:
-    linear-gradient(125deg, rgb(255 255 255 / 0.045), transparent 42%), rgb(12 15 17 / 0.96);
-  box-shadow: var(--ar-shadow-raised);
+  position: relative;
+  container-type: inline-size;
+  max-inline-size: 20rem;
+  margin-inline: auto;
+  aspect-ratio: 560 / 957;
+  background-image: url('/images/hud/runtime/enemy-card-560.webp');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 
+/* ---------- crest ---------- */
+
+.encounter-card__crest {
+  position: absolute;
+  inset-block-start: 9%;
+  inset-inline-start: 50%;
+  inline-size: 16.8%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Scaled past the frame so the icon's own painted ring is cropped away and
+   only the portrait sits inside the crest ring. */
+.encounter-card__crest-icon {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  scale: 1.22;
+}
+
+/* ---------- artwork ---------- */
+
 .encounter-card__artwork-frame {
-  position: relative;
-  overflow: hidden;
-  aspect-ratio: 4 / 3;
-  border-block-end: 1px solid rgb(155 122 66 / 0.45);
-  background: var(--ar-bg);
-}
-
-.encounter-card__artwork-frame::after {
-  content: '';
   position: absolute;
-  inset: 0;
-  box-shadow: inset 0 -3.5rem 3rem -1.5rem rgb(0 0 0 / 0.75);
-  pointer-events: none;
+  inset-block: 12.6% 40.4%;
+  inset-inline: 15% 14.6%;
+  display: grid;
+  padding: 4% 6% 2%;
+  place-items: end center;
 }
 
 .encounter-card__artwork {
   inline-size: 100%;
   block-size: 100%;
-  object-fit: cover;
-  object-position: center;
+  object-fit: contain;
+  object-position: bottom;
+  filter: drop-shadow(0 0.35rem 0.7rem rgb(0 0 0 / 0.75));
 }
 
-.encounter-card__body {
-  display: grid;
-  justify-items: center;
-  gap: var(--ar-space-2);
-  padding: var(--ar-space-4);
-  text-align: center;
-}
+/* ---------- text bands ---------- */
 
 .encounter-card__name {
+  position: absolute;
+  inset-block-start: 62.8%;
+  inset-inline: 15% 14.6%;
+  display: grid;
+  block-size: 5.4%;
   margin: 0;
+  overflow: hidden;
+  place-items: center;
   color: var(--ar-text);
   font-family: Georgia, 'Times New Roman', serif;
-  font-size: 1.4rem;
+  font-size: clamp(0.85rem, 5.4cqw, 1.35rem);
   font-weight: 400;
+  line-height: 1;
+  text-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 0.9);
+  white-space: nowrap;
+}
+
+.encounter-card__meta {
+  position: absolute;
+  inset-block-start: 69.2%;
+  inset-inline: 12% 12%;
+  display: grid;
+  block-size: 8.8%;
+  gap: 1.2cqw;
+  place-content: center;
+  justify-items: center;
 }
 
 .encounter-card__level {
   color: var(--ar-gold);
-  font-size: var(--ar-font-sm);
-  letter-spacing: 0.06em;
+  font-size: clamp(0.6rem, 3.5cqw, 0.85rem);
+  letter-spacing: 0.08em;
+  line-height: 1;
   text-transform: uppercase;
 }
 
+/* The badge sizes itself off the shared token, so scaling it with the card is
+   a matter of redefining that token inside the card. */
 .encounter-card__danger {
-  margin-block: var(--ar-space-1);
+  --ar-font-sm: clamp(0.6rem, 3.4cqw, 0.8125rem);
 }
 
+/* ---------- attack plaque ---------- */
+
 .encounter-card__attack {
-  inline-size: 100%;
-  margin-block-start: var(--ar-space-2);
-  padding: var(--ar-space-2) var(--ar-space-4);
-  border: 1px solid var(--ar-border-highlight);
-  border-radius: var(--ar-radius-sm);
+  position: absolute;
+  inset-block-start: 81.1%;
+  inset-inline-start: 11.8%;
+  inline-size: 77.1%;
+  block-size: 10.4%;
+  padding: 0;
+  border: 0;
+  border-radius: 0.2rem;
   color: var(--ar-text);
-  background: linear-gradient(180deg, #263b4b, #17232d);
+  background: transparent;
   font-family: Georgia, 'Times New Roman', serif;
-  font-size: 1rem;
-  letter-spacing: 0.02em;
+  font-size: clamp(0.8rem, 4.6cqw, 1.15rem);
+  letter-spacing: 0.08em;
+  text-shadow: 0 0.1rem 0.35rem rgb(0 0 0 / 0.85);
 }
 
 .encounter-card__attack:hover {
-  border-color: #d6b26b;
-  background: linear-gradient(180deg, #315067, #1a2c3a);
+  color: #f4ecda;
+  box-shadow: inset 0 0 1.1rem rgb(150 200 245 / 0.5);
+}
+
+.encounter-card__attack:active {
+  box-shadow: inset 0 0.15rem 0.7rem rgb(0 0 0 / 0.6);
 }
 
 .encounter-card__attack:focus-visible {
   outline: 2px solid var(--ar-blue);
-  outline-offset: 2px;
+  outline-offset: -3px;
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .encounter-card {
-    transition:
-      border-color var(--ar-motion-base),
-      box-shadow var(--ar-motion-base);
+    transition: filter var(--ar-motion-base);
   }
 
   .encounter-card:hover {
-    border-color: #d6b26b;
-    box-shadow:
-      var(--ar-shadow-raised),
-      0 0 1.1rem rgb(214 178 107 / 0.35);
+    filter: drop-shadow(0 0 0.9rem rgb(214 178 107 / 0.3));
   }
 
   .encounter-card__attack {
     transition:
-      border-color var(--ar-motion-fast),
-      background var(--ar-motion-fast);
+      color var(--ar-motion-fast),
+      box-shadow var(--ar-motion-fast);
   }
 }