/* Selected Scheme B: shared ring mechanics, varied materials and matching About-card objects. */
#keychain-assembly{--motion-scale:1;animation:keychain-breathe 2s cubic-bezier(.44,0,.56,1) infinite alternate}
.charm{animation:tag-breathe var(--sway-duration) cubic-bezier(.44,0,.56,1) infinite alternate}
.charm-bloom{--idle-angle:4.3deg;--sway-duration:1.85s}
.charm-travel{--idle-angle:-3.8deg;--sway-duration:2.05s}
.charm-town{--idle-angle:3deg;--sway-duration:2.2s}
.charm-gift{--idle-angle:-4.1deg;--sway-duration:1.95s}
@keyframes tag-breathe{from{rotate:calc(var(--idle-angle) * var(--motion-scale) * -1)}to{rotate:calc(var(--idle-angle) * var(--motion-scale))}}
@keyframes keychain-breathe{from{translate:0 0}to{translate:0 5px}}
@media(max-width:700px){#keychain-assembly{--motion-scale:.7;width:min(60vh,126vw);height:min(60vh,126vw)}}
@media(prefers-reduced-motion:reduce){#keychain-assembly,.charm{animation:none;rotate:0deg}#keychain-assembly{translate:0 0}}
/* Scheme B only: enhanced resin, molded polymer, brushed chrome and smoked acrylic. */
.keychain-option-b .tag-sprite{height:62%;background-image:url('/assets/keychain-irregular-atlas-v3.png');background-repeat:no-repeat;mask-size:100% 100%;mask-repeat:no-repeat;transform:none}
.keychain-option-b .charm-hit{margin:0;border-radius:0}
.keychain-option-b .charm-travel{--joint-x:-1.5%}
.keychain-option-b .charm-town{--joint-x:1.5%}
.keychain-option-b .sprite-pde{left:31.91174%;top:31.72446%;width:36.34724%;background-size:341.15385% 100%;background-position:0% 0;transform:scale(0.84);transform-origin:50.67308% 4.96054%;mask-image:url('/assets/keychain-b-v3-mask-pde.svg')}
.keychain-option-b .charm-link-front .sprite-pde{clip-path:polygon(50.67308% 4.96054%,58.36538% 4.96054%,58.36538% 31.5%,50.67308% 31.5%)}
.keychain-option-b .charm-bloom .charm-hit{left:37.20725%;top:47.36496%;width:26.53908%;height:31.76469%;clip-path:polygon(49% 0,100% 94%,95% 100%,5% 100%,0 94%)}
.keychain-option-b .sprite-visual{left:39.14623%;top:32.84284%;width:23.7655%;background-size:521.76471% 100%;background-position:36.2622% 0;transform:scale(0.9);transform-origin:47.05882% 3.15671%;mask-image:url('/assets/keychain-b-v3-mask-visual.svg')}
.keychain-option-b .charm-link-front .sprite-visual{clip-path:polygon(47.05882% 3.15671%,58.82353% 3.15671%,58.82353% 31.5%,47.05882% 31.5%)}
.keychain-option-b .charm-travel .charm-hit{left:42.59223%;top:47.50755%;width:16.79662%;height:37.87103%;clip-path:polygon(33% 0,64% 0,82% 10%,100% 48%,98% 67%,81% 95%,64% 100%,32% 100%,15% 95%,0 62%,0 46%,19% 11%)}
.keychain-option-b .sprite-brand{left:31.4574%;top:31.93416%;width:37.74521%;background-size:328.51852% 100%;background-position:69.69206% 0;transform:scale(0.9);transform-origin:50% 4.62232%;mask-image:url('/assets/keychain-b-v3-mask-brand.svg')}
.keychain-option-b .charm-link-front .sprite-brand{clip-path:polygon(50% 4.62232%,57.40741% 4.62232%,57.40741% 31.5%,50% 31.5%)}
.keychain-option-b .charm-gift .charm-hit{left:35.861%;top:47.94791%;width:29.06381%;height:35.41759%;clip-path:polygon(50% 0,60% 5%,69% 28%,100% 49%,100% 57%,72% 71%,58% 100%,47% 100%,33% 72%,0 57%,0 49%,32% 29%,42% 5%)}
.keychain-option-b .sprite-workflow{left:38.65694%;top:31.93416%;width:26.14205%;background-size:474.33155% 100%;background-position:100% 0;transform:scale(0.95);transform-origin:44.65241% 4.62232%;mask-image:url('/assets/keychain-b-v3-mask-workflow.svg')}
.keychain-option-b .charm-link-front .sprite-workflow{clip-path:polygon(44.65241% 4.62232%,55.34759% 4.62232%,55.34759% 31.5%,44.65241% 31.5%)}
.keychain-option-b .charm-town .charm-hit{left:42.49437%;top:48.08072%;width:16.46809%;height:39.44374%;clip-path:polygon(29% 0,70% 0,82% 10%,100% 20%,100% 78%,84% 100%,22% 100%,0 82%,0 20%,18% 10%)}
.keychain-option-b .charm:not(.charm-link-front){filter:drop-shadow(.45cqw .8cqw .5cqw #0008)!important}
.keychain-option-b .charm:has(.charm-hit:active) .tag-sprite{filter:contrast(1.04) brightness(.95)}
.keychain-option-b .keychain-selection{top:calc(50% + min(34vh,420px))}
@media(max-width:700px){.keychain-option-b .keychain-selection{top:calc(49% + 24.5vh)}}

/* Option B only: the introduction card uses the same four irregular objects. */
body.keychain-option-b .discipline-object{
  container-type:inline-size;
}
body.keychain-option-b .about-playground{
  --card-tag-height:min(320px,124cqw);
  --card-tag-source-width:520;
  --card-tag-background-size:341.153846%;
  --card-tag-background-position:0%;
  --card-tag-mask:url('/assets/keychain-b-v3-mask-pde.svg');
  --card-tag-center-offset:.065774;
}
body.keychain-option-b [data-discipline="1"]{
  --card-tag-height:min(350px,174cqw);
  --card-tag-source-width:340;
  --card-tag-background-size:521.764706%;
  --card-tag-background-position:36.262204%;
  --card-tag-mask:url('/assets/keychain-b-v3-mask-visual.svg');
  --card-tag-center-offset:-.058415;
}
body.keychain-option-b [data-discipline="2"]{
  --card-tag-height:min(312px,124cqw);
  --card-tag-source-width:540;
  --card-tag-background-size:328.518519%;
  --card-tag-background-position:69.692058%;
  --card-tag-mask:url('/assets/keychain-b-v3-mask-brand.svg');
  --card-tag-center-offset:.051231;
}
body.keychain-option-b [data-discipline="3"]{
  --card-tag-height:min(350px,174cqw);
  --card-tag-source-width:374;
  --card-tag-background-size:474.331551%;
  --card-tag-background-position:100%;
  --card-tag-mask:url('/assets/keychain-b-v3-mask-workflow.svg');
  --card-tag-center-offset:-.036589;
}
body.keychain-option-b .discipline-object-inner{
  width:calc(var(--card-tag-height) * var(--card-tag-source-width) / 887);
  height:var(--card-tag-height);
  /* Center the rotated outline while leaving the original rotation intact. */
  translate:calc(var(--card-tag-height) * var(--card-tag-center-offset)) 0;
  transition-property:transform,translate;
}
body.keychain-option-b .discipline-sprite{
  background-image:url('/assets/keychain-irregular-atlas-v3.png');
  background-repeat:no-repeat;
  background-size:var(--card-tag-background-size) 100%;
  background-position:var(--card-tag-background-position) 0;
  -webkit-mask-image:var(--card-tag-mask);
  mask-image:var(--card-tag-mask);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-mode:alpha;
}
@media(max-width:700px){
  body.keychain-option-b .about-playground{--card-tag-height:min(216px,124cqw)}
  body.keychain-option-b [data-discipline="1"],
  body.keychain-option-b [data-discipline="3"]{--card-tag-height:min(230px,174cqw)}
  body.keychain-option-b [data-discipline="2"]{--card-tag-height:min(214px,124cqw)}
}