/* ===== Translation orbit scene (hero, right side) ===== */
.tr-scene{position:relative;width:440px;height:440px;max-width:100%;margin-inline:auto;--outer:182px;--inner:118px}
@media (max-width:480px){.tr-scene{transform:scale(.78);transform-origin:top center;height:360px}}

/* soft glow + radiating pulses */
.tr-glow{position:absolute;inset:8%;border-radius:50%;background:
  radial-gradient(circle at 50% 50%,rgba(245,158,11,.28),transparent 55%),
  radial-gradient(circle at 30% 30%,rgba(193,39,45,.28),transparent 55%),
  radial-gradient(circle at 75% 75%,rgba(14,165,233,.30),transparent 55%);filter:blur(18px)}
.tr-pulse{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;
  border:2px solid rgba(253,211,77,.55);animation:trPulse 7s ease-out infinite;opacity:0}
.tr-pulse:nth-child(3){animation-delay:2.3s}.tr-pulse:nth-child(4){animation-delay:4.6s}
@keyframes trPulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(2.7);opacity:0}}

/* orbit rings */
.tr-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1.5px dashed rgba(186,230,253,.35);transform:translate(-50%,-50%)}
.tr-ring.o{width:calc(var(--outer)*2);height:calc(var(--outer)*2)}
.tr-ring.i{width:calc(var(--inner)*2);height:calc(var(--inner)*2);border-color:rgba(253,211,77,.35)}
.tr-orbit{position:absolute;left:50%;top:50%;width:0;height:0}
.tr-orbit.o{animation:trSpin 90s linear infinite}
.tr-orbit.i{animation:trSpin 70s linear infinite reverse}
@keyframes trSpin{to{transform:rotate(360deg)}}
@keyframes trSpinRev{to{transform:rotate(-360deg)}}

/* language chips (kept upright while orbiting) */
.tr-chip{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a)*-1))}
.tr-chip>.cp{transform:translate(-50%,-50%)}
.tr-chip .cs{animation:trSpinRev 90s linear infinite}
.tr-orbit.i .tr-chip .cs{animation:trSpin 70s linear infinite}
.tr-chip span{display:block;white-space:nowrap;text-align:center;line-height:1.15;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);color:#fff;font-weight:600;font-size:14px;
  transition:all .5s}
.tr-chip small{display:block;font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#bae6fd;margin-top:1px}
.tr-orbit.i .tr-chip span{font-size:12px;padding:5px 10px}
.tr-chip.active span{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#0a1040;border-color:#fde68a;
  box-shadow:0 0 0 4px rgba(251,191,36,.25),0 0 28px rgba(251,191,36,.65);transform:scale(1.22)}
.tr-chip.active small{color:#0a1040}

/* central circle + book */
.tr-core{position:absolute;left:50%;top:50%;width:176px;height:176px;margin:-88px 0 0 -88px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#26308c,#0a1040 70%);border:2px solid rgba(253,211,77,.6);
  box-shadow:0 0 0 8px rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.5),inset 0 0 40px rgba(14,165,233,.25);
  display:grid;place-items:center;perspective:700px}
.tr-book{position:relative;width:132px;height:92px;transform:rotateX(14deg);transform-style:preserve-3d;animation:trFloat 7.5s ease-in-out infinite}
@keyframes trFloat{50%{transform:rotateX(14deg) translateY(-6px)}}
.tr-cover{position:absolute;inset:-6px -7px -8px;border-radius:8px;background:linear-gradient(135deg,#c1272d,#7f1d1d);box-shadow:0 8px 18px rgba(0,0,0,.45)}
.tr-page{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#fff,#f1f5f9);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.tr-page.l{left:0;border-radius:6px 0 0 6px;background:linear-gradient(90deg,#f1f5f9,#fff);box-shadow:inset -8px 0 10px -8px rgba(0,0,0,.25)}
.tr-page.r{right:0;border-radius:0 6px 6px 0;box-shadow:inset 8px 0 10px -8px rgba(0,0,0,.25)}
.tr-word{font-weight:800;font-size:17px;color:#141e63;line-height:1.1;transition:opacity .35s,filter .35s,transform .35s}
.tr-page.r .tr-word{color:#c1272d}
.tr-lang{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin-top:4px;font-weight:600}
.tr-word.out{opacity:0;filter:blur(4px);transform:translateY(6px)}
.tr-page .ln{width:60%;height:2px;border-radius:2px;background:#cbd5e1;margin-top:3px}
/* flipping page */
.tr-flip{position:absolute;right:0;top:0;bottom:0;width:50%;transform-origin:left center;transform-style:preserve-3d;border-radius:0 6px 6px 0;
  background:linear-gradient(90deg,#e2e8f0,#fff);backface-visibility:hidden;opacity:0}
.tr-flip.go{animation:trFlip 1.5s ease-in-out}
@keyframes trFlip{0%{transform:rotateY(0);opacity:1}100%{transform:rotateY(-180deg);opacity:1}}

/* certified seal */
.tr-seal{position:absolute;right:2%;bottom:6%;width:74px;height:74px;display:grid;place-items:center}
.tr-seal svg{position:absolute;inset:0;animation:trSpin 212s linear infinite}
.tr-seal b{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#0a1040;
  background:linear-gradient(135deg,#fde68a,#f59e0b);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.tr-badge{position:absolute;left:0;top:2%;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#e0f2fe;font-size:11px;line-height:1.3;backdrop-filter:blur(4px)}
.tr-badge b{display:block;color:#fcd34d;font-size:13px}
@media (prefers-reduced-motion:reduce){.tr-orbit,.tr-chip .cs,.tr-pulse,.tr-book,.tr-seal svg{animation:none!important}}

/* ===== extra polish ===== */
.tr-scene{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
/* rotating radar sweep */
.tr-sweep{position:absolute;left:50%;top:50%;width:calc(var(--outer)*2 + 30px);height:calc(var(--outer)*2 + 30px);margin:calc(var(--outer)*-1 - 15px) 0 0 calc(var(--outer)*-1 - 15px);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 290deg,rgba(251,191,36,.05) 320deg,rgba(251,191,36,.28) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 31%);mask:radial-gradient(circle,transparent 30%,#000 31%);animation:trSpin 11s linear infinite}
/* animated gold ring around the core */
.tr-core::before{content:'';position:absolute;inset:-7px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,#fde68a,#c1272d,#0ea5e9,#f59e0b,#fde68a);animation:trSpin 12s linear infinite;filter:blur(.3px)}
.tr-core::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#26308c,#0a1040 70%);z-index:-1}
.tr-core{z-index:2;border:0}
.tr-book{z-index:1}
/* sparkle burst on page turn */
.tr-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fde68a;box-shadow:0 0 10px #fbbf24;pointer-events:none;opacity:0;z-index:3}
.tr-spark.go{animation:trSpark .9s ease-out forwards}
@keyframes trSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}}
/* floating alphabets */
.tr-glyphs{position:absolute;inset:-6%;pointer-events:none;overflow:visible}
.tr-glyph{position:absolute;bottom:0;font-weight:700;color:rgba(186,230,253,.55);animation:trRise linear infinite;opacity:0}
@keyframes trRise{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-420px) rotate(25deg);opacity:0}}
/* status pill */
.tr-status{position:absolute;left:50%;top:-52px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(10,16,64,.7);border:1px solid rgba(253,211,77,.45);color:#fef3c7;font-size:12px;font-weight:600;backdrop-filter:blur(6px);white-space:nowrap;z-index:4}
.tr-status i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;animation:trBlink 1.2s infinite}
@keyframes trBlink{50%{opacity:.25}}
.tr-status em{font-style:normal;color:#fcd34d}