/* Translations block on the home page: two quest-log cards in Minecraft tooltip frames.
   Loop (7s): a sheen reads the English card, pixels carry the text over, the Russian card lights up.
   Everything moves only under html.motion-on, i.e. the site's own «Пауза анимаций» switch. */
.translation-art.tr-stage{position:relative;display:block;width:min(440px,100%);aspect-ratio:440/300;min-height:0;margin-inline:auto;container-type:inline-size;user-select:none;-webkit-user-select:none;pointer-events:none}
.translation-section:has(.tr-stage){overflow:visible}
.tr-aura{position:absolute;inset:8% 6% 2%;background:radial-gradient(closest-side at 40% 45%,#8b4dff40,transparent 70%),radial-gradient(closest-side at 70% 60%,#ff9a3c2e,transparent 70%);filter:blur(6px);opacity:.75}

.tr-float{position:absolute;width:44%;height:66%;filter:drop-shadow(0 16px 26px #05020c99)}
.tr-en{left:3%;top:13%;rotate:-6deg;z-index:1}
.tr-ru{left:47%;top:24%;rotate:5deg;z-index:2}

/* Notched pixel corners + a two-tone frame, like the in-game tooltip. */
.tr-card{--n:max(4px,1.25cqw);position:relative;overflow:hidden;box-sizing:border-box;width:100%;height:100%;padding:8% 9% 9%;display:flex;flex-direction:column;
  border:var(--n) solid transparent;color:#f4ecff;font-family:Manrope,Arial,sans-serif;transition:transform .55s cubic-bezier(.2,.8,.2,1);
  background:repeating-linear-gradient(0deg,#ffffff06 0 2px,transparent 2px 4px) padding-box,linear-gradient(180deg,#1c0e2c,#12081d) padding-box,linear-gradient(180deg,#9a64ff,#4a1fa8) border-box;
  clip-path:polygon(0 var(--n),var(--n) var(--n),var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),0 calc(100% - var(--n)))}
.tr-card::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 2px #00000066,inset 0 3px 0 2px #ffffff12;pointer-events:none}
.tr-ru .tr-card{color:#fff4e6;background:repeating-linear-gradient(0deg,#ffffff06 0 2px,transparent 2px 4px) padding-box,linear-gradient(180deg,#2b1631,#1c0d21) padding-box,linear-gradient(180deg,#ffc56e,#c4621f) border-box}

.tr-head{display:flex;align-items:center;gap:6%;min-height:0}.tr-ru .tr-head{padding-right:max(30px,16%)}
.tr-pixel{flex:none;width:max(30px,9cqw);height:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #00000080)}
.tr-head small{font:800 max(9px,2.45cqw)/1.35 Manrope,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#bda5ea}
.tr-ru .tr-head small{color:#ffbf7a}
.tr-head b{position:absolute;top:7%;right:8%;padding:.3em .5em;font:900 max(8px,2.2cqw)/1 Manrope,Arial,sans-serif;letter-spacing:.06em;color:#c9ff9a;background:#2d5a1d;box-shadow:inset 0 0 0 1px #8ddd5366}
.tr-card strong{display:block;margin-top:14%;font:800 max(15px,5.5cqw)/1.18 Manrope,Arial,sans-serif;letter-spacing:-.02em;text-shadow:0 2px 0 #00000059}
.tr-foot{margin-top:auto;font:600 max(10px,2.75cqw)/1.35 Manrope,Arial,sans-serif;color:#a88fd6}
.tr-ru .tr-foot{color:#f5ac6a}
.tr-sheen{position:absolute;inset:-10% -40%;background:linear-gradient(105deg,transparent 38%,#ffffff2b 50%,transparent 62%);translate:-110% 0;pointer-events:none}

.tr-beam{position:absolute;left:31%;top:2%;width:34%;height:26%;z-index:3}
/* Runes like the ones that fly into the book at an enchanting table: lavender on the English side, gold by the time they land. */
.tr-beam i{position:absolute;left:0;top:70%;width:max(9px,2.7cqw);aspect-ratio:1;opacity:0;color:#e9dcff;filter:drop-shadow(0 0 2px #c4a2ff) drop-shadow(0 0 6px #8b5cf6b0)}
.tr-beam i svg{display:block;width:100%;height:100%}

.tr-crystal{position:absolute;right:1%;top:-3%;width:14%;z-index:3;filter:drop-shadow(0 0 12px #a562dd88)}
.tr-crystal .tr-pixel{width:100%}
.tr-spark{position:absolute;width:max(6px,1.7cqw);aspect-ratio:1;opacity:.85;
  background:linear-gradient(#fff,#fff) center/33% 100% no-repeat,linear-gradient(#fff,#fff) center/100% 33% no-repeat;filter:drop-shadow(0 0 4px #d7b8ff)}
.tr-spark.s1{right:16%;top:4%}.tr-spark.s2{right:3%;top:24%;scale:.7}.tr-spark.s3{left:2%;top:6%;scale:.8}.tr-spark.s4{left:44%;bottom:2%;scale:.6}

/* Hover spreads the cards a little; the floating wrapper keeps its own animation. */
@media (hover:hover){.translation-section:hover .tr-en .tr-card{transform:translate(-5%,-2%) rotate(-3deg)}.translation-section:hover .tr-ru .tr-card{transform:translate(5%,2%) rotate(3deg)}}

html.motion-on .tr-en{animation:tr-bob-en 6.6s ease-in-out infinite}
html.motion-on .tr-ru{animation:tr-bob-ru 6.6s ease-in-out -3.3s infinite,tr-ru-glow 7s ease-in-out infinite}
html.motion-on .tr-en .tr-sheen{animation:tr-sheen-en 7s ease-in-out infinite}
html.motion-on .tr-ru .tr-sheen{animation:tr-sheen-ru 7s ease-in-out infinite}
html.motion-on .tr-ru .tr-head b{animation:tr-pop 7s ease-in-out infinite}
html.motion-on .tr-beam i{animation:tr-fly 7s cubic-bezier(.45,.05,.55,.95) infinite}
html.motion-on .tr-beam i:nth-child(2){animation-delay:.14s}html.motion-on .tr-beam i:nth-child(3){animation-delay:.28s}html.motion-on .tr-beam i:nth-child(4){animation-delay:.42s}html.motion-on .tr-beam i:nth-child(5){animation-delay:.56s}html.motion-on .tr-beam i:nth-child(6){animation-delay:.7s}
html.motion-on .tr-crystal{animation:tr-crystal 5.4s ease-in-out infinite}
html.motion-on .tr-aura{animation:tr-aura 7s ease-in-out infinite}
html.motion-on .tr-spark{animation:tr-twinkle 3.2s ease-in-out infinite}
html.motion-on .tr-spark.s2{animation-delay:-1.1s}html.motion-on .tr-spark.s3{animation-delay:-2.2s}html.motion-on .tr-spark.s4{animation-delay:-.6s;animation-duration:4.1s}

@keyframes tr-bob-en{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -3.2%;rotate:-4.5deg}}
@keyframes tr-bob-ru{0%,100%{translate:0 0;rotate:5deg}50%{translate:0 -3.2%;rotate:3.5deg}}
@keyframes tr-ru-glow{0%,42%,100%{filter:drop-shadow(0 16px 26px #05020c99) drop-shadow(0 0 0 #ffa04800)}58%{filter:drop-shadow(0 16px 26px #05020c99) drop-shadow(0 0 20px #ffa048a6)}}
@keyframes tr-sheen-en{0%{translate:-110% 0}22%,100%{translate:110% 0}}
@keyframes tr-sheen-ru{0%,48%{translate:-110% 0}72%,100%{translate:110% 0}}
@keyframes tr-pop{0%,52%,70%,100%{scale:1}60%{scale:1.22}}
@keyframes tr-fly{0%,16%{left:0;top:70%;opacity:0;scale:.55;rotate:-18deg;color:#e9dcff}20%{opacity:1}28%{left:22%;top:18%}36%{left:50%;top:0;scale:1.15;rotate:0deg;color:#f3e9ff}44%{left:78%;top:22%;color:#ffe6b0}50%{left:94%;top:78%;opacity:1;scale:.85;rotate:14deg;color:#ffc56e}54%,100%{left:96%;top:90%;opacity:0;scale:.4;color:#ffc56e}}
@keyframes tr-crystal{0%,100%{translate:0 0;rotate:-4deg;filter:drop-shadow(0 0 10px #a562dd70)}50%{translate:0 -9%;rotate:5deg;filter:drop-shadow(0 0 20px #b77cffb0)}}
@keyframes tr-aura{0%,40%,100%{opacity:.6}60%{opacity:1}}
@keyframes tr-twinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}}

html[data-season=light] .tr-aura{opacity:.45}
@media(max-width:800px){.translation-art.tr-stage{width:min(400px,100%)}}
/* Phones: the stage is ~300px wide, so the cards get tighter type instead of overflowing labels. */
@container (max-width:380px){.tr-card{padding:7% 7% 8%}.tr-head{gap:5px}.tr-pixel{width:24px}.tr-head small{font-size:8.5px;letter-spacing:.05em}.tr-head b{font-size:8px;right:6%}.tr-card strong{margin-top:10%;font-size:15px}.tr-foot{font-size:9.5px}}