.hero-right-3d{
  display:flex;
  justify-content:center;
  align-items:center;
  perspective:1800px;
  opacity:0;
  transform:translateY(28px) scale(.96);
  transition:opacity .8s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1);
}
.hero-right-3d.show{opacity:1;transform:none}
.seal-scene{
  --tilt-x:10deg;
  --tilt-y:-16deg;
  position:relative;
  width:min(100%,560px);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  isolation:isolate;
}
.seal-scene::before{
  content:'';
  position:absolute;
  inset:3%;
  border-radius:38px;
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.10),transparent 24%),
    radial-gradient(circle at 78% 14%,rgba(217,79,30,.12),transparent 20%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 24%,rgba(8,8,8,.32) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 40px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -40px 80px rgba(0,0,0,.16);
  transform:translateZ(-140px);
}
.seal-scene::after{
  content:'';
  position:absolute;
  inset:10% 8% 16%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(217,79,30,.10),transparent 62%);
  filter:blur(16px);
  transform:translateZ(-90px) scale(1.12);
  opacity:.9;
}
.seal-aura{
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(217,79,30,.24),rgba(217,79,30,.08) 36%,transparent 68%);
  filter:blur(28px);
  transform:translateZ(-110px) scale(1.12);
  animation:sealAuraPulse 5.8s ease-in-out infinite;
}
.seal-stage-grid{
  position:absolute;
  left:12%;
  right:12%;
  bottom:14%;
  height:24%;
  border-radius:50%;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/26px 100%,
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 26px;
  opacity:.26;
  filter:blur(.2px);
  transform:translateZ(-80px) rotateX(82deg);
  transform-style:preserve-3d;
}
.seal-shadow-floor{
  position:absolute;
  width:76%;
  height:18%;
  bottom:13%;
  left:50%;
  transform:translateX(-50%) translateZ(-70px) rotateX(82deg);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.46) 0%,rgba(0,0,0,.18) 42%,transparent 74%);
  filter:blur(16px);
}
.seal-platform{
  position:absolute;
  width:72%;
  height:20%;
  bottom:16%;
  left:50%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.12),rgba(255,255,255,.03) 46%,rgba(0,0,0,.10) 70%),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 12px 20px rgba(0,0,0,.16),
    inset 0 8px 18px rgba(255,255,255,.05),
    inset 0 -14px 24px rgba(0,0,0,.18);
  transform:translateX(-50%) translateZ(-18px) rotateX(82deg);
}
.seal-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px solid rgba(201,168,76,.24);
  transform-style:preserve-3d;
  pointer-events:none;
}
.orbit-a{
  width:88%;
  height:88%;
  transform:translate(-50%,-50%) rotateX(76deg) translateZ(-10px);
  animation:orbitSpin 20s linear infinite;
}
.orbit-b{
  width:68%;
  height:68%;
  border-color:rgba(217,79,30,.34);
  box-shadow:0 0 18px rgba(217,79,30,.08);
  transform:translate(-50%,-50%) rotateY(76deg) translateZ(16px);
  animation:orbitSpinReverse 14s linear infinite;
}
.orbit-c{
  width:54%;
  height:54%;
  border-color:rgba(255,255,255,.20);
  transform:translate(-50%,-50%) rotateX(80deg) rotateZ(40deg) translateZ(50px);
  animation:orbitSpin 10s linear infinite;
  opacity:.75;
}
.seal-motion{
  position:relative;
  width:min(76%,430px);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  animation:sealFloatY 6.4s ease-in-out infinite;
  z-index:3;
}
.seal-object{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(-8deg);
  transition:transform .18s ease-out;
  will-change:transform;
}
.seal-object img{
  position:relative;
  z-index:6;
  width:100%;
  object-fit:contain;
  transform:translateZ(78px) scale(1.18);
  filter:
    drop-shadow(0 34px 54px rgba(0,0,0,.34))
    drop-shadow(0 14px 24px rgba(217,79,30,.18));
}
.seal-depth,
.seal-rim-glow,
.seal-sheen{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.seal-depth{
  inset:12%;
  border:20px solid rgba(16,16,16,.92);
  background:radial-gradient(circle,transparent 58%,rgba(255,255,255,.02) 68%,transparent 74%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 10px 18px rgba(255,255,255,.03),
    inset 0 -18px 32px rgba(0,0,0,.35),
    0 18px 30px rgba(0,0,0,.18);
}
.depth-1{transform:translateZ(-38px) scale(.94)}
.depth-2{transform:translateZ(-14px) scale(.98);opacity:.96}
.depth-3{transform:translateZ(10px) scale(1.01);opacity:.92}
.depth-4{transform:translateZ(34px) scale(1.04);opacity:.88}
.seal-rim-glow{
  inset:14%;
  border:1px solid rgba(201,168,76,.28);
  box-shadow:
    0 0 34px rgba(201,168,76,.14),
    inset 0 0 22px rgba(201,168,76,.08);
  transform:translateZ(58px) scale(1.02);
}
.seal-sheen{
  inset:8%;
  background:linear-gradient(115deg,transparent 26%,rgba(255,255,255,.20) 47%,rgba(255,255,255,.06) 54%,transparent 68%);
  transform:translateZ(88px) rotateZ(0deg);
  mix-blend-mode:screen;
  opacity:.72;
  animation:sheenSweep 5.2s linear infinite;
}
.seal-spec{
  position:absolute;
  z-index:8;
  min-width:148px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(17,17,17,.72);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform-style:preserve-3d;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .seal-spec{background:rgba(18,18,18,.94)}
}
.seal-spec strong{
  display:block;
  font-size:12px;
  line-height:1.2;
  color:#fff;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.seal-spec span{
  display:block;
  font-size:11px;
  line-height:1.5;
  color:rgba(255,255,255,.68);
}
.spec-a{
  top:9%;
  right:-2%;
  transform:translateZ(70px) rotateY(-12deg);
  animation:chipFloatA 6.2s ease-in-out infinite;
}
.spec-b{
  left:-3%;
  top:36%;
  transform:translateZ(82px) rotateY(14deg);
  animation:chipFloatB 6.8s ease-in-out 1s infinite;
}
.spec-c{
  right:4%;
  bottom:10%;
  transform:translateZ(68px) rotateY(-10deg);
  animation:chipFloatC 6s ease-in-out 1.6s infinite;
}
.hero-right-3d .hero-img{opacity:1;transform:none;background:none;box-shadow:none}
.hero-right-3d .hero-img::before,
.hero-right-3d .hero-img::after{display:none!important}

@keyframes sealAuraPulse{
  0%,100%{transform:translateZ(-110px) scale(1.08);opacity:.84}
  50%{transform:translateZ(-110px) scale(1.16);opacity:1}
}
@keyframes orbitSpin{
  from{transform:translate(-50%,-50%) rotateX(76deg) rotateZ(0deg) translateZ(-10px)}
  to{transform:translate(-50%,-50%) rotateX(76deg) rotateZ(360deg) translateZ(-10px)}
}
@keyframes orbitSpinReverse{
  from{transform:translate(-50%,-50%) rotateY(76deg) rotateZ(0deg) translateZ(16px)}
  to{transform:translate(-50%,-50%) rotateY(76deg) rotateZ(-360deg) translateZ(16px)}
}
@keyframes sealFloatY{
  0%,100%{transform:translateY(0) translateZ(0)}
  50%{transform:translateY(-14px) translateZ(0)}
}
@keyframes chipFloatA{
  0%,100%{transform:translateZ(70px) translateY(0) rotateY(-12deg)}
  50%{transform:translateZ(84px) translateY(-8px) rotateY(-16deg)}
}
@keyframes chipFloatB{
  0%,100%{transform:translateZ(82px) translateY(0) rotateY(14deg)}
  50%{transform:translateZ(94px) translateY(-6px) rotateY(18deg)}
}
@keyframes chipFloatC{
  0%,100%{transform:translateZ(68px) translateY(0) rotateY(-10deg)}
  50%{transform:translateZ(82px) translateY(-8px) rotateY(-15deg)}
}
@keyframes sheenSweep{
  from{transform:translateZ(88px) rotateZ(-12deg) translateX(-26%)}
  to{transform:translateZ(88px) rotateZ(-12deg) translateX(26%)}
}

@media (max-width: 1024px){
  .seal-scene{width:min(100%,510px)}
  .seal-spec{min-width:136px;padding:10px 12px}
}
@media (max-width: 768px){
  .hero-left{order:1!important}
  .hero-right-3d{order:2!important;margin-top:8px}
  .seal-scene{width:min(100%,420px)}
  .seal-scene::before{inset:4%;border-radius:28px}
  .seal-stage-grid{left:10%;right:10%;bottom:16%;height:22%}
  .seal-motion{width:min(78%,320px)}
  .seal-object img{transform:translateZ(64px) scale(1.14)}
  .seal-depth{border-width:14px}
  .seal-spec{min-width:0;width:auto;max-width:170px;padding:9px 11px;border-radius:14px}
  .spec-a{top:7%;right:0}
  .spec-b{left:0;top:38%}
  .spec-c{right:4%;bottom:8%}
}
@media (max-width: 560px){
  .seal-scene{width:min(100%,360px)}
  .seal-spec span{display:none}
  .seal-spec strong{font-size:10px;margin-bottom:0}
  .seal-spec{padding:8px 10px}
}
@media (hover:none), (pointer:coarse){
  .hero-left{order:1!important}
  .hero-right-3d{order:2!important}
  .seal-scene{
    --tilt-x:8deg;
    --tilt-y:-10deg;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-right-3d{opacity:1!important;transform:none!important}
  .seal-aura,.seal-orbit,.seal-motion,.seal-spec,.seal-sheen{animation:none!important}
  .seal-scene{--tilt-x:7deg;--tilt-y:-8deg}
}
