.portal-container{position:relative;width:90vw;max-width:500px;aspect-ratio:1/1;margin:50px auto;perspective:1000px}@media (min-width:768px){.portal-container{margin:100px auto}}.portal-inner-content{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .1s linear}.portal-container .inner-ring,.portal-container .outer-ring,.portal-container .portal-video{position:absolute;top:50%;left:50%}.portal-container .portal-video{pointer-events:none}.portal-container .inner-ring,.portal-container .outer-ring{cursor:grab;touch-action:none}.portal-container .inner-ring.dragging,.portal-container .outer-ring.dragging{cursor:grabbing}.outer-ring{width:100%;height:100%;z-index:3}.inner-ring,.outer-ring{transform:translate(-50%,-50%) rotate(0deg)}.inner-ring{width:70%;height:70%;z-index:2}.portal-video{width:65%;height:65%;z-index:1;border-radius:50%;object-fit:cover;transform:translate(-50%,-50%);transition:opacity .6s ease}.portal-video.fade-out{opacity:0}.portal-video.fade-in{opacity:0;animation:portal-video-appear .6s ease forwards}@keyframes portal-video-appear{0%{opacity:0}to{opacity:1}}.portal-glow{position:absolute;top:50%;left:50%;width:65%;height:65%;z-index:1;border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;background:radial-gradient(circle,hsla(0,0%,100%,.9) 0,rgba(0,230,255,.6) 30%,rgba(0,180,220,.3) 60%,transparent 80%)}.portal-glow.active{animation:portal-pulse 1.4s ease-in-out forwards}@keyframes portal-pulse{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}35%{transform:translate(-50%,-50%) scale(.8);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}70%{transform:translate(-50%,-50%) scale(1.1);opacity:.5}to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}.portal-lightning{top:0;left:0;width:100%;height:100%;z-index:4;pointer-events:none}.lightning-bolt,.portal-lightning{position:absolute;overflow:visible}.lightning-bolt{top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;filter:drop-shadow(0 0 8px rgba(0,210,255,.9)) drop-shadow(0 0 20px rgba(0,150,255,.6))}.lightning-bolt line{stroke:rgba(100,215,255,.95);stroke-width:2.5;stroke-linecap:round}.lightning-bolt .bolt-core{stroke:rgba(230,250,255,.95);stroke-width:1.2}.portal-lightning.active .lightning-bolt:first-child{animation:bolt-flash 1.4s ease-out forwards;animation-delay:.05s}.portal-lightning.active .lightning-bolt:nth-child(2){animation:bolt-flash 1.4s ease-out forwards;animation-delay:.15s}.portal-lightning.active .lightning-bolt:nth-child(3){animation:bolt-flash 1.4s ease-out forwards;animation-delay:.25s}.portal-lightning.active .lightning-bolt:nth-child(4){animation:bolt-flash 1.4s ease-out forwards;animation-delay:.1s}.portal-lightning.active .lightning-bolt:nth-child(5){animation:bolt-flash 1.4s ease-out forwards;animation-delay:.3s}.portal-lightning.active .lightning-bolt:nth-child(6){animation:bolt-flash 1.4s ease-out forwards;animation-delay:0s}@keyframes bolt-flash{0%{opacity:0}8%{opacity:1}15%{opacity:.2}22%{opacity:.9}30%{opacity:.1}38%{opacity:1}50%{opacity:.8}65%{opacity:.3}80%{opacity:.1}to{opacity:0}}.portal-orbiting{position:absolute;top:50%;left:50%;width:0;height:0;z-index:2;pointer-events:none}.portal-rune{position:absolute;font-size:18px;color:rgba(120,220,255,.85);text-shadow:0 0 8px rgba(0,200,255,.8),0 0 20px rgba(0,150,255,.4),0 0 40px rgba(0,100,255,.2);animation:rune-pulse 4s ease-in-out infinite alternate}.portal-rune-orbit{position:absolute;top:0;left:0;width:0;height:0}.portal-rune-orbit:first-child{animation:orbit-1 28s linear infinite}.portal-rune-orbit:nth-child(2){animation:orbit-2 34s linear infinite reverse}.portal-rune-orbit:nth-child(3){animation:orbit-3 24s linear infinite}.portal-rune-orbit:nth-child(4){animation:orbit-4 38s linear infinite reverse}.portal-rune-orbit:nth-child(5){animation:orbit-5 30s linear infinite}.portal-rune-orbit:nth-child(6){animation:orbit-6 26s linear infinite reverse}.portal-rune-orbit:first-child .portal-rune{animation-delay:0s}.portal-rune-orbit:nth-child(2) .portal-rune{animation-delay:-1.5s;font-size:16px}.portal-rune-orbit:nth-child(3) .portal-rune{animation-delay:-.8s;font-size:20px}.portal-rune-orbit:nth-child(4) .portal-rune{animation-delay:-2.5s;font-size:15px}.portal-rune-orbit:nth-child(5) .portal-rune{animation-delay:-1.2s;font-size:17px}.portal-rune-orbit:nth-child(6) .portal-rune{animation-delay:-3s;font-size:19px}@keyframes orbit-1{0%{transform:rotate(0deg) translateX(135px) rotate(0deg)}to{transform:rotate(1turn) translateX(135px) rotate(-1turn)}}@keyframes orbit-2{0%{transform:rotate(60deg) translateX(145px) rotate(-60deg)}to{transform:rotate(420deg) translateX(145px) rotate(-420deg)}}@keyframes orbit-3{0%{transform:rotate(120deg) translateX(128px) rotate(-120deg)}to{transform:rotate(480deg) translateX(128px) rotate(-480deg)}}@keyframes orbit-4{0%{transform:rotate(180deg) translateX(150px) rotate(-180deg)}to{transform:rotate(540deg) translateX(150px) rotate(-540deg)}}@keyframes orbit-5{0%{transform:rotate(240deg) translateX(132px) rotate(-240deg)}to{transform:rotate(600deg) translateX(132px) rotate(-600deg)}}@keyframes orbit-6{0%{transform:rotate(300deg) translateX(142px) rotate(-300deg)}to{transform:rotate(660deg) translateX(142px) rotate(-660deg)}}@keyframes rune-pulse{0%{opacity:.5;filter:brightness(.8)}to{opacity:1;filter:brightness(1.3)}}.portal-particle{position:absolute;top:0;left:0;width:0;height:0}.portal-particle:after{content:"";position:absolute;border-radius:50%;background:rgba(140,230,255,.9);box-shadow:0 0 6px rgba(0,200,255,.8),0 0 14px rgba(0,150,255,.4);transform:translate(-50%,-50%)}.portal-particle:first-child{animation:particle-orbit-1 18s linear infinite}.portal-particle:nth-child(2){animation:particle-orbit-2 22s linear infinite reverse}.portal-particle:nth-child(3){animation:particle-orbit-3 15s linear infinite}.portal-particle:nth-child(4){animation:particle-orbit-4 26s linear infinite reverse}.portal-particle:nth-child(5){animation:particle-orbit-5 20s linear infinite}.portal-particle:nth-child(6){animation:particle-orbit-6 30s linear infinite reverse}.portal-particle:nth-child(7){animation:particle-orbit-7 17s linear infinite}.portal-particle:nth-child(8){animation:particle-orbit-8 24s linear infinite reverse}.portal-particle:nth-child(9){animation:particle-orbit-9 19s linear infinite}.portal-particle:nth-child(10){animation:particle-orbit-10 28s linear infinite reverse}.portal-particle:first-child:after{width:4px;height:4px;animation:particle-twinkle 2s ease-in-out infinite alternate}.portal-particle:nth-child(2):after{width:3px;height:3px;animation:particle-twinkle 2.8s ease-in-out infinite alternate;animation-delay:-.5s}.portal-particle:nth-child(3):after{width:5px;height:5px;animation:particle-twinkle 1.8s ease-in-out infinite alternate;animation-delay:-1.2s}.portal-particle:nth-child(4):after{width:3px;height:3px;animation:particle-twinkle 3.2s ease-in-out infinite alternate;animation-delay:-.3s}.portal-particle:nth-child(5):after{width:4px;height:4px;animation:particle-twinkle 2.5s ease-in-out infinite alternate;animation-delay:-1.8s}.portal-particle:nth-child(6):after{width:2px;height:2px;animation:particle-twinkle 2.2s ease-in-out infinite alternate;animation-delay:-.7s}.portal-particle:nth-child(7):after{width:5px;height:5px;animation:particle-twinkle 1.6s ease-in-out infinite alternate;animation-delay:-2s}.portal-particle:nth-child(8):after{width:3px;height:3px;animation:particle-twinkle 3s ease-in-out infinite alternate;animation-delay:-1.5s}.portal-particle:nth-child(9):after{width:4px;height:4px;animation:particle-twinkle 2.3s ease-in-out infinite alternate;animation-delay:-.9s}.portal-particle:nth-child(10):after{width:2px;height:2px;animation:particle-twinkle 2.7s ease-in-out infinite alternate;animation-delay:-1.1s}@keyframes particle-orbit-1{0%{transform:rotate(15deg) translateX(118px)}to{transform:rotate(375deg) translateX(118px)}}@keyframes particle-orbit-2{0%{transform:rotate(75deg) translateX(155px)}to{transform:rotate(435deg) translateX(155px)}}@keyframes particle-orbit-3{0%{transform:rotate(140deg) translateX(125px)}to{transform:rotate(500deg) translateX(125px)}}@keyframes particle-orbit-4{0%{transform:rotate(200deg) translateX(160px)}to{transform:rotate(560deg) translateX(160px)}}@keyframes particle-orbit-5{0%{transform:rotate(50deg) translateX(140px)}to{transform:rotate(410deg) translateX(140px)}}@keyframes particle-orbit-6{0%{transform:rotate(280deg) translateX(165px)}to{transform:rotate(640deg) translateX(165px)}}@keyframes particle-orbit-7{0%{transform:rotate(330deg) translateX(122px)}to{transform:rotate(690deg) translateX(122px)}}@keyframes particle-orbit-8{0%{transform:rotate(95deg) translateX(152px)}to{transform:rotate(455deg) translateX(152px)}}@keyframes particle-orbit-9{0%{transform:rotate(170deg) translateX(130px)}to{transform:rotate(530deg) translateX(130px)}}@keyframes particle-orbit-10{0%{transform:rotate(245deg) translateX(148px)}to{transform:rotate(605deg) translateX(148px)}}@keyframes particle-twinkle{0%{opacity:.3}to{opacity:1}}.portal-stone{position:absolute;pointer-events:none;z-index:1;filter:drop-shadow(0 0 5px rgba(32,200,255,.35)) drop-shadow(0 0 12px rgba(32,200,255,.2)) drop-shadow(0 0 25px rgba(20,160,240,.1)) drop-shadow(0 4px 10px rgba(0,0,0,.6))}.portal-stone svg{width:100%;height:100%;overflow:visible;animation:crystal-shimmer 5s ease-in-out infinite alternate}.portal-stone-1 svg{animation-delay:0s}.portal-stone-2 svg{animation-delay:-1.8s}.portal-stone-3 svg{animation-delay:-3.5s}@keyframes crystal-shimmer{0%{filter:brightness(.9) saturate(.95)}50%{filter:brightness(1.12) saturate(1.1)}to{filter:brightness(.92) saturate(.98)}}.portal-stone-1{width:130px;height:160px;top:-5%;left:-16%;animation:crystal-float-1 5s ease-in-out infinite}.portal-stone-2{width:100px;height:130px;bottom:0;left:-12%;animation:crystal-float-2 6.5s ease-in-out infinite}.portal-stone-3{width:80px;height:110px;top:30%;right:-16%;animation:crystal-float-3 5.8s ease-in-out infinite}@keyframes crystal-float-1{0%,to{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(-8deg)}}@keyframes crystal-float-2{0%,to{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-11px) rotate(12deg)}}@keyframes crystal-float-3{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-9px) rotate(-5deg)}}