/* 健三 V2 claim: rain-alley backdrop + live ink, talisman seals that burn, an imperial scroll for each step */
.v2c .backdrop { background: linear-gradient(180deg, rgba(7, 5, 5, .55), rgba(7, 5, 5, .9) 72%, #070505), url(/media/hero.webp) 70% 30% / cover no-repeat; }
@media (max-width: 700px) { .v2c .backdrop { background: linear-gradient(180deg, rgba(7, 5, 5, .45), rgba(7, 5, 5, .88) 70%, #070505), url(/v2/media/alley.webp) center top / cover no-repeat; } }
.v2c .ink { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.v2c main, .v2c .wallbox, .v2c .foot { position: relative; z-index: 2; }
.v2c .couplet { position: fixed; top: 110px; z-index: 1; width: 46px; padding: 14px 0; writing-mode: vertical-rl; text-orientation: upright; font-size: 28px; letter-spacing: .14em; line-height: 1;
  color: #ffe7b8; background: linear-gradient(90deg, #a91a0b, #df3a22 50%, #a91a0b); border: 2px solid #f3d9a0; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); transform-origin: top center;
  animation: c2drop 1s .2s cubic-bezier(.3, 1.4, .5, 1) both, c2swing 5s 1.2s ease-in-out infinite; }
.v2c .couplet.l { left: 14px; } .v2c .couplet.r { right: 14px; animation-delay: .35s, 1.6s; }
@keyframes c2drop { from { transform: translateY(-130%); } }
@keyframes c2swing { 0%, 100% { transform: rotate(1deg); } 50% { transform: rotate(-1deg); } }
@media (max-width: 1100px) { .v2c .couplet { display: none; } }

/* the seven seals become talisman strips that burn away, leaving a red seal */
@property --b { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.v2c .ring li { width: 30px; height: 64px; margin: -32px -15px; border: 0; border-radius: 2px; background: none; box-shadow: none; color: #b0150a; font-size: 18px;
  align-items: start; padding-top: 6px; z-index: 0; transition: color .3s .6s; }
.v2c .ring li::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 2px;
  background: repeating-linear-gradient(180deg, rgba(176, 21, 10, .5) 0 2px, transparent 2px 6px) 5px 30px / calc(100% - 10px) calc(100% - 36px) no-repeat, linear-gradient(180deg, #f6e7a6, #e8cf7a 60%, #d9b860);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(160, 30, 10, .35);
  -webkit-mask-image: linear-gradient(to top, transparent var(--b), #000 calc(var(--b) + 6%)); mask-image: linear-gradient(to top, transparent var(--b), #000 calc(var(--b) + 6%)); }
.v2c .ring li.now { animation: none; box-shadow: none; }
.v2c .ring li.now::before { box-shadow: 0 0 0 3px rgba(243, 217, 160, .55), 0 0 26px rgba(243, 217, 160, .6); }
.v2c .ring li.done { background: none; box-shadow: none; color: #fff3e6; }
.v2c .ring li.done::before { animation: burnUp .9s ease-in forwards; }
@keyframes burnUp { 0% { --b: 0%; filter: brightness(1.4); } 100% { --b: 100%; filter: brightness(.6); } }
.v2c .ring li.done::after { content: ""; position: absolute; left: 50%; top: 2px; width: 26px; height: 26px; margin-left: -13px; z-index: -1; border-radius: 6px; border: 0; inset: auto auto auto 50%;
  background: #d8321f; box-shadow: 0 0 18px rgba(255, 74, 46, .8); transform: rotate(-8deg); animation: sealGlow .5s .7s both; }
@keyframes sealGlow { from { opacity: 0; transform: scale(2) rotate(-30deg); } to { opacity: 1; transform: rotate(-8deg); } }

/* the step slip as an imperial scroll: rods on top and bottom, it unrolls for every new step */
.v2c .slip { border-radius: 2px; background: linear-gradient(180deg, #2a1610, #1a0e0a 30%, #140a08); border-color: rgba(243, 217, 160, .4); margin: 18px 0; }
.v2c .slip::before, .v2c .slip::after { left: -14px; right: -14px; height: 14px; border-radius: 7px; opacity: 1;
  background: linear-gradient(180deg, #6a3c18, #c08a4a 45%, #5a3010); box-shadow: 0 4px 12px rgba(0, 0, 0, .6); }
.v2c .slip::before { top: -12px; } .v2c .slip::after { bottom: -12px; }
.v2c .slip-card.in { animation: unrollY .6s cubic-bezier(.3, 1.2, .5, 1) both; transform-origin: top center; }
@keyframes unrollY { from { opacity: 0; transform: scaleY(.15); filter: blur(4px); } }
.v2c .room { padding-top: 96px; }
@media (max-width: 560px) { .v2c .room { padding-top: 74px; } .v2c .ring li { width: 24px; height: 50px; margin: -25px -12px; font-size: 15px; } .v2c .ring li.done::after { width: 22px; height: 22px; margin-left: -11px; } }
/* soft edges: the envelope stills have a dark square background that shows on the rain backdrop */
.v2c .env img, .v2c .rv-media .rv-env { -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }