/* ============================================================
   yourcustomprofile.app — catalogue card frames
   The 30 edge treatments added with the rank-gated catalogue
   (content/catalog.mjs, lane `frameFx`).

   Contract, same as profile-v3.css: `.frame-fx-<id>` goes on the card and
   only paints `.profile-card__frame`, which is the masked ring inside the
   card edge. A rule here never moves the card, never changes its padding and
   never paints over the content. `is-framed` decides whether the ring exists
   at all; these rules only decide what it looks like.

   The `frameFx` lane is a surface treatment, so each one answers a physical
   question — is this edge printed, torn, machined, lit, or grown? Colours
   come from the member's accent unless the material is inherently a colour
   (brass, wax, cyanotype).
   ============================================================ */

/* All 30 opt the ring in. Kept in one selector so the list is auditable
   against the catalogue in a single read. */
.profile-card.is-framed.frame-fx-letterpressEdge .profile-card__frame,
.profile-card.is-framed.frame-fx-brushRule .profile-card__frame,
.profile-card.is-framed.frame-fx-pixelBracket .profile-card__frame,
.profile-card.is-framed.frame-fx-washiTape .profile-card__frame,
.profile-card.is-framed.frame-fx-inkBleed .profile-card__frame,
.profile-card.is-framed.frame-fx-risoEdge .profile-card__frame,
.profile-card.is-framed.frame-fx-blueprintRule .profile-card__frame,
.profile-card.is-framed.frame-fx-terrazzoChip .profile-card__frame,
.profile-card.is-framed.frame-fx-vineHairline .profile-card__frame,
.profile-card.is-framed.frame-fx-carbonWeave .profile-card__frame,
.profile-card.is-framed.frame-fx-embossRule .profile-card__frame,
.profile-card.is-framed.frame-fx-perforated .profile-card__frame,
.profile-card.is-framed.frame-fx-stampBorder .profile-card__frame,
.profile-card.is-framed.frame-fx-ledgerLine .profile-card__frame,
.profile-card.is-framed.frame-fx-vitrineLip .profile-card__frame,
.profile-card.is-framed.frame-fx-plaqueScrew .profile-card__frame,
.profile-card.is-framed.frame-fx-marbleVein .profile-card__frame,
.profile-card.is-framed.frame-fx-archivalTag .profile-card__frame,
.profile-card.is-framed.frame-fx-causticRim .profile-card__frame,
.profile-card.is-framed.frame-fx-coronaRing .profile-card__frame,
.profile-card.is-framed.frame-fx-flareStreak .profile-card__frame,
.profile-card.is-framed.frame-fx-spectrumEdge .profile-card__frame,
.profile-card.is-framed.frame-fx-hudBracket .profile-card__frame,
.profile-card.is-framed.frame-fx-circuitEtch .profile-card__frame,
.profile-card.is-framed.frame-fx-chromeChamfer .profile-card__frame,
.profile-card.is-framed.frame-fx-scanSweep .profile-card__frame,
.profile-card.is-framed.frame-fx-onyxBevel .profile-card__frame,
.profile-card.is-framed.frame-fx-giltRule .profile-card__frame,
.profile-card.is-framed.frame-fx-sealWax .profile-card__frame,
.profile-card.is-framed.frame-fx-reliefCrest .profile-card__frame,
.profile-card.is-framed.frame-fx-gutterRule .profile-card__frame,
.profile-card.is-framed.frame-fx-matBoard .profile-card__frame,
.profile-card.is-framed.frame-fx-lightSpill .profile-card__frame,
.profile-card.is-framed.frame-fx-ventSlot .profile-card__frame,
.profile-card.is-framed.frame-fx-inlayBand .profile-card__frame {
  display: block;
}

/* ---- frame seam -----------------------------------------------------------
   Every rule below reads its thickness from `--frame-width` (the studio's seam
   slider, 0-16px, default 6). The multipliers are the thickness each effect was
   hand-tuned at, divided by that 6px default, so nothing changes visually at
   the default value while the slider keeps working for all 35 frames. Before
   this, only the hand-written families in profile-v3.css honoured the slider;
   every catalogue effect hard-coded its own padding and the control was inert.
   A few effects are structurally zero (a bracket, a slot) and stay at 0 — their
   shape lives in a mask or a pseudo-element, not in a seam. */

/* ---------------------------------------------------------- letterpress
   A debossed rule that presses into the surface: dark on top, light under,
   no colour at all. */
.frame-fx-letterpressEdge .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.833);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.22));
  filter: none;
}

/* ----------------------------------------------------------- brush rule
   One dry-brush stroke for a border: irregular along its length so it never
   reads as a CSS line. */
.frame-fx-brushRule .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.667);
  background: linear-gradient(96deg,
    transparent 0 2%, currentColor 4% 18%, transparent 20% 22%,
    currentColor 24% 46%, transparent 48% 51%, currentColor 53% 74%,
    transparent 76% 79%, currentColor 81% 96%, transparent 98%);
  color: color-mix(in srgb, var(--accent) 78%, #000 22%);
  filter: blur(0.4px);
}
.frame-fx-brushRule .profile-card__frame::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.12;
  -webkit-mask: linear-gradient(180deg, #000 0 30%, transparent 32%);
  mask: linear-gradient(180deg, #000 0 30%, transparent 32%);
}

/* -------------------------------------------------------- pixel bracket
   Corner brackets, eight pixels deep. No line runs the full edge. */
.frame-fx-pixelBracket .profile-card__frame {
  padding: 0;
  background:
    linear-gradient(var(--accent) 0 0) left top / 34px 8px no-repeat,
    linear-gradient(var(--accent) 0 0) left top / 8px 34px no-repeat,
    linear-gradient(var(--accent) 0 0) right top / 34px 8px no-repeat,
    linear-gradient(var(--accent) 0 0) right top / 8px 34px no-repeat,
    linear-gradient(var(--accent) 0 0) left bottom / 34px 8px no-repeat,
    linear-gradient(var(--accent) 0 0) left bottom / 8px 34px no-repeat,
    linear-gradient(var(--accent) 0 0) right bottom / 34px 8px no-repeat,
    linear-gradient(var(--accent) 0 0) right bottom / 8px 34px no-repeat;
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent));
}

/* ------------------------------------------------------------ washi tape
   Torn paper strips holding the card down at two corners. */
.frame-fx-washiTape .profile-card__frame {
  padding: 0;
  background:
    linear-gradient(102deg, rgba(255, 250, 235, 0.42) 0 100%) left -14px top 22px / 96px 22px no-repeat,
    linear-gradient(102deg, rgba(255, 250, 235, 0.34) 0 100%) right -16px bottom 26px / 104px 20px no-repeat;
  -webkit-mask: none;
  mask: none;
  border-radius: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter: blur(0.3px);
}

/* ------------------------------------------------------------ ink bleed
   The edge wicks into the paper: a soft, uneven stain. */
.frame-fx-inkBleed .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.167);
  background: radial-gradient(circle at 30% 20%, var(--accent), transparent 62%),
    radial-gradient(circle at 74% 78%, var(--accent-2), transparent 58%),
    radial-gradient(circle at 50% 50%, currentColor, transparent 70%);
  color: color-mix(in srgb, var(--accent) 40%, transparent);
  filter: blur(3.5px);
  opacity: 0.8;
}
.frame-fx-inkBleed .profile-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 18px 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ------------------------------------------------------------ riso edge
   Two inks meeting badly on purpose: the two arcs are offset by three
   pixels and never line up. */
.frame-fx-risoEdge .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.0);
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  translate: 3px 2px;
  opacity: 0.85;
}
.frame-fx-risoEdge .profile-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(300deg, var(--accent-2), var(--accent));
  translate: -3px -2px;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* ------------------------------------------------------- blueprint rule
   Measured ticks along the edge, every 12px, with a longer tick at each
   quarter. */
.frame-fx-blueprintRule .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.667);
  background:
    repeating-linear-gradient(90deg, rgba(190, 225, 255, 0.85) 0 1px, transparent 1px 12px) top center / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(190, 225, 255, 0.85) 0 1px, transparent 1px 12px) bottom center / 100% 6px no-repeat,
    repeating-linear-gradient(0deg, rgba(190, 225, 255, 0.6) 0 1px, transparent 1px 12px) left center / 6px 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(190, 225, 255, 0.6) 0 1px, transparent 1px 12px) right center / 6px 100% no-repeat;
  background-color: rgba(8, 47, 87, 0.5);
}

/* -------------------------------------------------------- terrazzo chip
   Stone chips set in the border, flat and honed. */
.frame-fx-terrazzoChip .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.167);
  background:
    radial-gradient(circle at 14% 20%, #b08968 0 5px, transparent 6px),
    radial-gradient(circle at 82% 18%, #6b705c 0 4px, transparent 5px),
    radial-gradient(circle at 92% 74%, #a26769 0 5px, transparent 6px),
    radial-gradient(circle at 24% 86%, #5c677d 0 4px, transparent 5px),
    radial-gradient(circle at 58% 92%, #cbb18a 0 3px, transparent 4px),
    linear-gradient(150deg, #ede8dc, #d8d1c1);
}

/* -------------------------------------------------------- vine hairline
   A thin stem with three leaves, growing along one edge only. */
.frame-fx-vineHairline .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.333);
  background: linear-gradient(90deg, #4d7c0f, #365314);
  opacity: 0.8;
}
.frame-fx-vineHairline .profile-card__frame::before,
.frame-fx-vineHairline .profile-card__frame::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 8px;
  border-radius: 80% 6% 80% 6%;
  background: linear-gradient(140deg, #84cc16, #3f6212);
}
.frame-fx-vineHairline .profile-card__frame::before {
  top: 18%;
  left: -5px;
  rotate: -22deg;
}
.frame-fx-vineHairline .profile-card__frame::after {
  bottom: 26%;
  right: -5px;
  rotate: 158deg;
}

/* --------------------------------------------------------- carbon weave
   Twill carbon under a matte coat: a 4px two-tone lattice. */
.frame-fx-carbonWeave .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.0);
  background:
    repeating-linear-gradient(45deg, #1c1f24 0 2px, #2b3038 2px 4px),
    #15181c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  filter: saturate(0.6);
}

/* ----------------------------------------------------------- emboss rule
   Raised, with a soft shadow beneath it. The opposite of the letterpress. */
.frame-fx-embossRule .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.833);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(0, 0, 0, 0.42));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ----------------------------------------------------------- perforated
   A tear-off ticket edge: half-circles punched along the two long sides. */
.frame-fx-perforated .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.5);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 5px at 50% 0, transparent 98%, #000 100%) top center / 14px 10px repeat-x,
    radial-gradient(circle 5px at 50% 100%, transparent 98%, #000 100%) bottom center / 14px 10px repeat-x;
  mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 5px at 50% 0, transparent 98%, #000 100%) top center / 14px 10px repeat-x,
    radial-gradient(circle 5px at 50% 100%, transparent 98%, #000 100%) bottom center / 14px 10px repeat-x;
  -webkit-mask-composite: xor, add;
  mask-composite: exclude, add;
}

/* --------------------------------------------------------- stamp border
   A postal frame: a solid rule with perforations cut into it. */
.frame-fx-stampBorder .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.5);
  background: #f4f0e4;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 4px at 50% 0, transparent 96%, #000 100%) top center / 11px 8px repeat-x,
    radial-gradient(circle 4px at 50% 100%, transparent 96%, #000 100%) bottom center / 11px 8px repeat-x,
    radial-gradient(circle 4px at 0 50%, transparent 96%, #000 100%) left center / 8px 11px repeat-y,
    radial-gradient(circle 4px at 100% 50%, transparent 96%, #000 100%) right center / 8px 11px repeat-y;
  mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 4px at 50% 0, transparent 96%, #000 100%) top center / 11px 8px repeat-x,
    radial-gradient(circle 4px at 50% 100%, transparent 96%, #000 100%) bottom center / 11px 8px repeat-x,
    radial-gradient(circle 4px at 0 50%, transparent 96%, #000 100%) left center / 8px 11px repeat-y,
    radial-gradient(circle 4px at 100% 50%, transparent 96%, #000 100%) right center / 8px 11px repeat-y;
  -webkit-mask-composite: xor, add, add, add;
  mask-composite: exclude, add, add, add;
  opacity: 0.92;
}

/* ---------------------------------------------------------- ledger line
   Account-book rules in red and ink: one red thread, two grey hairlines. */
.frame-fx-ledgerLine .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.833);
  background:
    linear-gradient(90deg, transparent 0 12px, #9f1239 12px 14px, transparent 14px) left / 100% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(120, 130, 150, 0.35) 22px 23px),
    rgba(12, 14, 20, 0.4);
}

/* ---------------------------------------------------------- vitrine lip
   A glass case edge with one highlight running the top-left. */
.frame-fx-vitrineLip .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.5);
  background:
    linear-gradient(215deg, rgba(255, 255, 255, 0.72) 0 8%, transparent 26%),
    linear-gradient(215deg, rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0.3) 76%, transparent 84%),
    rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------- plaque & screw
   Four screws and one plate. The corners are the whole idea. */
.frame-fx-plaqueScrew .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.0);
  background: linear-gradient(150deg, #e9d08a, #b98f3d 44%, #8a6522 78%, #d7b766);
  box-shadow: inset 0 0 0 1px rgba(60, 46, 16, 0.5);
}
.frame-fx-plaqueScrew .profile-card__frame::before,
.frame-fx-plaqueScrew .profile-card__frame::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff2c4, #a97f2c 62%, #6b4d13);
  box-shadow: 0 0 0 1px rgba(60, 46, 16, 0.6);
}
.frame-fx-plaqueScrew .profile-card__frame::before { top: 5px; left: 5px; }
.frame-fx-plaqueScrew .profile-card__frame::after { bottom: 5px; right: 5px; }

/* ---------------------------------------------------------- marble vein
   One vein, followed exactly, honed not polished. */
.frame-fx-marbleVein .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.167);
  background:
    linear-gradient(118deg, transparent 46%, rgba(120, 118, 124, 0.6) 48%, transparent 50%),
    linear-gradient(118deg, transparent 62%, rgba(150, 148, 154, 0.4) 64%, transparent 66%),
    linear-gradient(158deg, #f2f0ec, #dcd9d3 56%, #bfbbb4);
}

/* --------------------------------------------------------- archival tag
   A string-tied label on one corner. The string is drawn, not implied. */
.frame-fx-archivalTag .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.333);
  background: rgba(226, 214, 190, 0.7);
}
.frame-fx-archivalTag .profile-card__frame::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 22px;
  width: 54px;
  height: 22px;
  border-radius: 3px;
  background: #efe6cf;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.6);
  transform: rotate(-3deg);
}
.frame-fx-archivalTag .profile-card__frame::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 74px;
  width: 26px;
  height: 1.5px;
  background: rgba(120, 100, 70, 0.8);
  rotate: 24deg;
  z-index: 1;
}

/* ---------------------------------------------------------- caustic rim
   Water light crawling the edge: two offset soft bands. */
.frame-fx-causticRim .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.0);
  background:
    radial-gradient(circle at 20% 12%, rgba(125, 211, 252, 0.75), transparent 34%),
    radial-gradient(circle at 82% 88%, rgba(56, 189, 248, 0.55), transparent 38%),
    radial-gradient(circle at 64% 24%, rgba(186, 230, 253, 0.5), transparent 30%);
  filter: blur(2.5px);
  opacity: 0.85;
}

/* ----------------------------------------------------------- corona ring
   A solar ring, unevenly hot: bright on one side, cold on the other. */
.frame-fx-coronaRing .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.667);
  background: conic-gradient(from 210deg,
    rgba(255, 240, 200, 0.9), rgba(255, 200, 120, 0.45) 22%,
    rgba(255, 255, 255, 0.2) 46%, rgba(255, 214, 150, 0.55) 68%,
    rgba(255, 240, 200, 0.9));
  filter: blur(1.4px) drop-shadow(0 0 14px rgba(255, 226, 170, 0.5));
}

/* ---------------------------------------------------------- flare streak
   One anamorphic pass across the top edge. Nothing else is lit. */
.frame-fx-flareStreak .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.333);
  background: rgba(148, 163, 184, 0.18);
}
.frame-fx-flareStreak .profile-card__frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.5) 34%, #eff6ff 50%, rgba(147, 197, 253, 0.5) 66%, transparent);
  filter: blur(1.5px);
}

/* --------------------------------------------------------- spectrum edge
   A refracted band, thin and cold: the gradient runs the short way so the
   band looks split rather than painted. */
.frame-fx-spectrumEdge .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.5);
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #0ea5e9, #8b5cf6, #ef4444);
  opacity: 0.72;
  filter: saturate(1.2);
}

/* ----------------------------------------------------------- HUD bracket
   Four reticles that breathe. Static corners, animated brightness. */
.frame-fx-hudBracket .profile-card__frame {
  padding: 0;
  background:
    linear-gradient(#4ade80 0 0) left top / 26px 2px no-repeat,
    linear-gradient(#4ade80 0 0) left top / 2px 26px no-repeat,
    linear-gradient(#4ade80 0 0) right top / 26px 2px no-repeat,
    linear-gradient(#4ade80 0 0) right top / 2px 26px no-repeat,
    linear-gradient(#4ade80 0 0) left bottom / 26px 2px no-repeat,
    linear-gradient(#4ade80 0 0) left bottom / 2px 26px no-repeat,
    linear-gradient(#4ade80 0 0) right bottom / 26px 2px no-repeat,
    linear-gradient(#4ade80 0 0) right bottom / 2px 26px no-repeat;
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.7));
}

/* --------------------------------------------------------- circuit etch
   Traces with a single lit node. One path, one light. */
.frame-fx-circuitEtch .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.5);
  background:
    linear-gradient(90deg, rgba(52, 211, 153, 0.5) 0 22%, transparent 22%) 0 8px / 100% 1.5px no-repeat,
    linear-gradient(0deg, rgba(52, 211, 153, 0.4) 0 40%, transparent 40%) 14px 0 / 1.5px 100% no-repeat,
    linear-gradient(90deg, rgba(52, 211, 153, 0.4) 0 18%, transparent 18%) 100% 76% / 100% 1.5px no-repeat,
    linear-gradient(0deg, rgba(52, 211, 153, 0.35) 0 26%, transparent 26%) calc(100% - 16px) 100% / 1.5px 100% no-repeat,
    rgba(6, 30, 24, 0.45);
}
.frame-fx-circuitEtch .profile-card__frame::after {
  content: "";
  position: absolute;
  top: 8px;
  left: calc(22% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 9px #34d399;
}

/* -------------------------------------------------------- chrome chamfer
   A machined bevel with three lights: white top, grey side, warm bottom. */
.frame-fx-chromeChamfer .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.833);
  background: linear-gradient(160deg, #f8fafc 0 8%, #94a3b8 34%, #475569 56%, #cbd5e1 78%, #64748b 100%);
  filter: contrast(1.06);
}

/* ------------------------------------------------------------ scan sweep
   A bar of light passing the edge. The bar is the only moving part. */
.frame-fx-scanSweep .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.5);
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}
.frame-fx-scanSweep .profile-card__frame::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(186, 230, 253, 0.85), transparent);
  filter: blur(2px);
}

/* ------------------------------------------------------------ onyx bevel
   Black stone, honed corners: no specular, just a change of value. */
.frame-fx-onyxBevel .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.0);
  background: conic-gradient(from 200deg, #0a0a0c, #23232a 18%, #050506 42%, #2c2c35 64%, #0a0a0c 86%, #181820);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------------------- gilt rule
   A gold rule, brushed not bright: matte with one grain direction. */
.frame-fx-giltRule .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.5);
  background: repeating-linear-gradient(
    92deg,
    #b8934a 0 2px, #d8b26a 2px 3px, #a88338 3px 5px, #e6c884 5px 6px
  );
  filter: saturate(0.85);
  opacity: 0.95;
}

/* -------------------------------------------------------------- seal wax
   A broken seal on one corner. Red wax, one crack, off-centre.

   The seam is painted with an inset shadow rather than a masked background.
   The ring's shared mask is `content-box` minus the border box, i.e. it keeps
   only the padding band — and the wax seal and its crack are pseudo-elements
   of that same ring, positioned outside the band. Under a mask they were cut
   down to a 2px crescent: the effect read as a red sliver on the live profile,
   not as a seal. An un-masked ring lets the pseudo-elements paint where they
   are drawn; the seam is identical at the default 6px width. */
.frame-fx-sealWax .profile-card__frame {
  padding: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  box-shadow: inset 0 0 0 calc(var(--frame-width, 6px) * 0.333) rgba(120, 30, 30, 0.14);
}
.frame-fx-sealWax .profile-card__frame::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 46px;
  height: 46px;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 36% 30%, #f87171, #b91c1c 58%, #7f1d1d);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.8), inset 0 -2px 5px rgba(0, 0, 0, 0.4);
}
.frame-fx-sealWax .profile-card__frame::before {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 1.5px;
  height: 22px;
  background: rgba(60, 8, 8, 0.7);
  rotate: 28deg;
  z-index: 1;
}

/* ----------------------------------------------------------- relief crest
   A crest in low relief: two concentric rings and one flat bar, no colour. */
.frame-fx-reliefCrest .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 1.333);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.4)),
    rgba(120, 128, 145, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

/* ----------------------------------------------------------- gutter rule
   A printed gutter: the shadow falls on one side only, because a bound page
   does not light evenly. Reads as the fold of a book, not as a border. */
.frame-fx-gutterRule .profile-card__frame {
  padding: 0 0 0 calc(var(--frame-width, 6px) * 2.333);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.12) 42%, transparent 72%),
    linear-gradient(90deg, currentColor 0 1px, transparent 1px) 13px 0 / 1px 100% no-repeat;
  color: color-mix(in srgb, var(--accent) 55%, #000 45%);
  filter: none;
}

/* --------------------------------------------------------------- mat board
   A wide cut mat with a bevelled lip: the bevel is a light-to-dark ramp that
   only exists near the opening, which is what a real mat cut looks like. */
.frame-fx-matBoard .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 2.667);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.22)),
    rgba(206, 199, 184, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 22px rgba(0, 0, 0, 0.32);
}

/* -------------------------------------------------------------- light spill
   Light escapes one corner: a hard wedge at 45°, not a glow. The card stays
   dark; only the corner is overexposed. */
.frame-fx-lightSpill .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.5);
  background:
    linear-gradient(135deg, rgba(255, 236, 190, 0.7), transparent 26%),
    linear-gradient(315deg, rgba(255, 236, 190, 0.16), transparent 34%);
  filter: drop-shadow(0 0 6px rgba(255, 226, 168, 0.28));
}

/* ---------------------------------------------------------------- vent slot
   Machined slots along one edge. No continuous rule: the edge is interrupted
   by openings, which is what a vent is. */
.frame-fx-ventSlot .profile-card__frame {
  padding: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 9px,
      rgba(160, 172, 190, 0.42) 9px 13px,
      transparent 13px 22px) top left / 100% 4px no-repeat,
    repeating-linear-gradient(90deg,
      transparent 0 9px,
      rgba(160, 172, 190, 0.22) 9px 13px,
      transparent 13px 22px) bottom left / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 8%) left top / 100% 100% no-repeat;
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
}

/* --------------------------------------------------------------- inlay band
   A second material set into the edge: one band sits proud of the surface and
   the seam between the two is the only line. */
.frame-fx-inlayBand .profile-card__frame {
  padding: calc(var(--frame-width, 6px) * 0.333);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.3)),
    linear-gradient(90deg, #8a6a2f, #d9b665 34%, #8a6a2f 62%, #e6cd8f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------- motion
   Only three of these edges gain from movement. Everything else is a
   material, and materials do not animate. */
@media (prefers-reduced-motion: no-preference) {
  .frame-fx-scanSweep .profile-card__frame::after { animation: cf-scan 4.5s linear infinite; }
  .frame-fx-causticRim .profile-card__frame { animation: cf-drift 9s ease-in-out infinite; }
  .frame-fx-coronaRing .profile-card__frame { animation: cf-ring 12s linear infinite; }
  .frame-fx-hudBracket .profile-card__frame { animation: cf-breathe 3.4s ease-in-out infinite; }
  .frame-fx-spectrumEdge .profile-card__frame { background-size: 200% 100%; animation: cf-spectrum 14s linear infinite; }
}

@keyframes cf-scan {
  0% { left: -30%; }
  100% { left: 108%; }
}
@keyframes cf-drift {
  0%, 100% { filter: blur(2.5px); opacity: 0.8; }
  50% { filter: blur(3.4px); opacity: 0.95; }
}
@keyframes cf-ring {
  to { rotate: 360deg; }
}
@keyframes cf-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.5)); }
  50% { filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.9)); }
}
@keyframes cf-spectrum {
  to { background-position: -200% 0; }
}

html[data-motion="low"] .frame-fx-scanSweep .profile-card__frame::after,
html[data-motion="low"] .frame-fx-causticRim .profile-card__frame,
html[data-motion="low"] .frame-fx-coronaRing .profile-card__frame,
html[data-motion="low"] .frame-fx-hudBracket .profile-card__frame,
html[data-motion="low"] .frame-fx-spectrumEdge .profile-card__frame,
html.is-slow-device .frame-fx-scanSweep .profile-card__frame::after,
html.is-slow-device .frame-fx-causticRim .profile-card__frame,
html.is-slow-device .frame-fx-coronaRing .profile-card__frame,
html.is-slow-device .frame-fx-hudBracket .profile-card__frame,
html.is-slow-device .frame-fx-spectrumEdge .profile-card__frame {
  animation: none !important;
}
/* The scan bar has no home position without motion, so it parks centred. */
html[data-motion="low"] .frame-fx-scanSweep .profile-card__frame::after {
  left: 40%;
  opacity: 0.35;
}