:root {
  --space: #08081d;
  --diamond: min(52vw, 510px, 67vh);
  --center-y: 49%;
  --energy: 0;
  --drift-x: 0px;
  --drift-y: 0px;
}
* {box-sizing:border-box}
html, body {width:100%; height:100%; min-height:100%; padding:0; margin:0; overflow:hidden; background:var(--space)}
body {font-family:system-ui,sans-serif; -webkit-tap-highlight-color:transparent}
button {font:inherit}
.universe {position:relative; isolation:isolate; width:100%; height:100%; height:100dvh; min-height:300px; overflow:hidden; background:radial-gradient(ellipse at 50% 43%,#2a1e51 0%,#0a0e2d 45%,#050617 85%)}
.backdrop {position:absolute; inset:-8%; background:url('../img/atmosfera.webp') center 45%/cover no-repeat; filter:blur(9px) saturate(1.18) brightness(.66); opacity:.82; transform:scale(1.02) translateZ(0); animation:slowBack 42s ease-in-out infinite alternate; will-change:transform,opacity}
.night-shade {position:absolute;inset:0;background:
 radial-gradient(ellipse 33% 40% at 50% 48%, rgba(5,7,27,.92) 0%,rgba(5,9,30,.83) 47%,rgba(13,13,34,.42) 78%,transparent 100%),
 linear-gradient(180deg,rgba(7,9,30,.26) 0%,rgba(9,10,27,.08) 31%,rgba(4,5,19,.43) 73%,rgba(3,4,16,.95) 100%),
 linear-gradient(90deg,rgba(6,7,26,.45),transparent 20%,transparent 80%,rgba(6,7,26,.55))}
.night-shade:before {content:"";position:absolute;inset:0;background: radial-gradient(ellipse at 50% 38%,transparent 24%,rgba(0,0,0,.2) 65%,rgba(0,0,0,.52) 100%)}
.color-cloud {position:absolute; width:53vw; height:55vh; border-radius:50%; filter:blur(36px); pointer-events:none; opacity:.28; animation:cloudPulse 18s ease-in-out infinite alternate; will-change:transform,opacity}
.cloud-left {left:-21%;top:28%;background:radial-gradient(ellipse,#ffd394 0%,#fb83a7 34%,transparent 65%)}
.cloud-right {right:-21%;top:23%;background:radial-gradient(ellipse,#a25af6 0%,#4ccdec 42%,transparent 65%);animation-delay:-9s}
.atmosphere,.celebration {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.atmosphere{z-index:2;opacity:.92}
.celebration{z-index:13}
.heaven-light {position:absolute; z-index:3;left:50%;top:-31%;height:96%;width: min(26vw,340px); transform:translateX(-50%);mix-blend-mode:screen;pointer-events:none}
.column {position:absolute;inset:0;left:50%;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(244,230,255,.12) 15%,rgba(255,255,255,.65) 76%,rgba(255,255,255,.95) 98%,transparent);animation:columnBright 11s ease-in-out infinite alternate;will-change:opacity}
.column.outer {width:100%;filter:blur(28px);opacity:.7}
.column.inner {width:23%;filter:blur(12px);opacity:.88}
.column.core {width:2.3%;filter:blur(2px);opacity:1;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.5) 28%,#fff 89%,transparent 100%)}
.rainbow-aura{position:absolute;z-index:3;top:var(--center-y);height:63vh;width:64vw;pointer-events:none;filter:blur(18px);mix-blend-mode:screen;opacity:.22;animation:breathe 10s ease-in-out infinite alternate;will-change:transform,opacity}
.rainbow-aura-right{left:51%;transform:translateY(-44%);background:conic-gradient(from 240deg at 0% 50%,transparent 0deg,#ec6c93 12deg,#ffd98d 25deg,#f7f2ab 33deg,#86ffc1 44deg,#69cfff 57deg,#ae85ff 68deg,transparent 89deg)}
.rainbow-aura-left{right:50%;transform:translateY(-40%) rotate(180deg);width:44vw;opacity:.11;background:conic-gradient(from 240deg at 0% 50%,transparent,#6ad9ff 25deg,#e4a4fb 56deg,transparent 87deg)}
.rainbow-rays{position:absolute;z-index:5;top:var(--center-y);left:calc(50% + var(--diamond)*.10);width:80vw;height:58vh;transform:translate3d(var(--drift-x),calc(-47% + var(--drift-y)),0) rotate(-4deg);pointer-events:none;mix-blend-mode:screen;opacity:calc(.64 + var(--energy)*.16);filter:blur(.8px);will-change:transform,opacity}
.rainbow-rays span{position:absolute;left:0;top:50%;height:100%;width:100%;opacity:.43;background:linear-gradient(90deg,var(--c) 0%,var(--c) 39%,transparent 95%);clip-path:polygon(0 46%,0 54%,100% calc(1% + var(--i)*13.8%),100% calc(5% + var(--i)*13.8%));transform:translateY(-50%);animation:rayGlimmer 9s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.7s)}
.rainbow-rays span:nth-child(1){opacity:.56}.rainbow-rays span:nth-child(7){opacity:.51}
.left-rays{position:absolute;z-index:4;left:0;top:var(--center-y);width:50%;height:40%;background:linear-gradient(90deg,transparent,#fff0d3 90%,white);clip-path:polygon(0 77%,100% 44%,100% 49%,0 88%);opacity:.18;filter:blur(2px);mix-blend-mode:screen}
.sanctuary{position:absolute;z-index:8;inset:0;display:grid;place-items:center;pointer-events:none}
.back-halo{position:absolute;left:50%;top:var(--center-y);transform:translate(-50%,-50%);width:calc(var(--diamond)*1.7);height:calc(var(--diamond)*1.7);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(160,187,255,.16) 17%,rgba(124,115,255,.14) 29%,rgba(49,37,119,.05) 56%,transparent 72%);filter:blur(4px);animation:breathe 9s ease-in-out infinite alternate;will-change:transform,opacity}
.back-halo::after{content:"";position:absolute;inset:-9%;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(255,255,255,.82) 0%,rgba(236,216,255,.38) 22%,rgba(163,202,255,.12) 48%,transparent 72%);
 opacity:calc(var(--energy)*.5);transform:scale(calc(1 + var(--energy)*.1));filter:blur(12px)}
.diamond-frame{position:absolute;left:50%;top:var(--center-y);width:var(--diamond);height:calc(var(--diamond)*1.11);transform:translate(-50%,-50%);filter:drop-shadow(0 0 18px rgba(212,233,255,.18));pointer-events:none;animation:floatGem 7.5s ease-in-out infinite;z-index:3;will-change:transform}
.diamond-interaction{pointer-events:auto;position:relative;display:block;width:100%;height:100%;border:0;outline:0;padding:0;margin:0;background:transparent;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:translateZ(0) scale(1);transform-origin:50% 48%;will-change:transform}
.diamond-interaction.is-holding{cursor:grabbing}
/* No rectangular browser focus ring around the gemstone (including after a click).
   Keyboard focus remains visible as a subtle gemstone-only illumination. */
.diamond-interaction:focus, .diamond-interaction:focus-visible{outline:none;box-shadow:none}
.diamond-interaction:focus-visible canvas{filter:drop-shadow(0 0 10px rgba(219,237,255,.94))}
.diamond-interaction canvas {position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 0 4px rgba(229,243,255,.45))}
.diamond-backlight{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:64%;height:58%;background:radial-gradient(circle,#fff,rgba(222,240,255,.45) 13%,rgba(198,143,255,.13) 35%,transparent 68%);filter:blur(20px);mix-blend-mode:screen;animation:gemCore 6s ease-in-out infinite alternate;will-change:transform,opacity}
.diamond-frontlight{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:49%;height:49%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.19) 12%,transparent 47%);filter:blur(8px);opacity:.62;mix-blend-mode:screen;animation:gemCore 8s ease-in-out infinite alternate-reverse;will-change:transform,opacity}
.orbit{position:absolute;left:50%;top:var(--center-y);width:calc(var(--diamond)*1.28);height:calc(var(--diamond)*.26);border:1px solid rgba(255,237,191,.36);box-shadow:0 0 12px rgba(255,221,162,.12),inset 0 0 9px rgba(255,232,210,.12);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);opacity:.42;animation:orbitOne 18s linear infinite;will-change:transform,opacity}
.orbit:before{content:"";position:absolute;width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 10px 4px #ffebb0;top:13%;left:9%}
.orbit-2{transform:translate(-50%,-50%) rotate(45deg);width:calc(var(--diamond)*1.1);height:calc(var(--diamond)*.24);border-color:rgba(166,215,255,.4);animation:orbitTwo 27s linear infinite reverse;opacity:.33}
.orbit-3{transform:translate(-50%,-50%) rotate(85deg);width:calc(var(--diamond)*1.12);height:calc(var(--diamond)*.2);border-color:rgba(251,172,254,.35);animation:orbitThree 31s linear infinite;opacity:.24}
.lower-glow{position:absolute;left:50%;top:calc(var(--center-y) + var(--diamond)*.58);width:calc(var(--diamond)*1.15);height:calc(var(--diamond)*.44);transform:translateX(-50%);background:radial-gradient(ellipse,#fff9ec 0%,rgba(255,245,213,.63) 12%,rgba(163,129,237,.25) 29%,transparent 67%);filter:blur(20px);opacity:.75}
.pedestal{position:absolute;left:50%;top:calc(var(--center-y) + var(--diamond)*.68);width:min(90vw,880px);height:calc(var(--diamond)*.36);transform:translateX(-50%);perspective:400px}
.ground-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,232,186,.54);box-shadow:0 0 9px rgba(255,234,187,.25),inset 0 0 7px rgba(255,253,211,.18);transform:rotateX(56deg);animation:groundBright 8s ease-in-out infinite alternate;will-change:opacity}
.ground-ring.ring-2{inset:13% 15%;border-color:rgba(189,197,255,.64);animation-delay:-1s}
.ground-ring.ring-3{inset:25% 32%;border-color:rgba(255,255,255,.78);animation-delay:-3s}
.ground-center{position:absolute;inset:33% 39%;border-radius:50%;background:radial-gradient(ellipse,#fff 0%,rgba(255,242,193,.53) 30%,transparent 74%);filter:blur(7px)}
.waterline{position:absolute;z-index:3;bottom:0;left:0;width:100%;height:25%;background:radial-gradient(ellipse at 50% 0,rgba(214,164,255,.19),transparent 70%),linear-gradient(180deg,transparent 0%,rgba(9,8,30,.35) 40%,rgba(3,4,13,.6));pointer-events:none}
.foreground-light{position:absolute;z-index:4;left:50%;bottom:-30%;transform:translateX(-50%);width:120%;height:42%;background:radial-gradient(ellipse at 50% 0,rgba(255,223,154,.22),transparent 58%);filter:blur(16px);pointer-events:none}
@keyframes slowBack{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.07) translateY(-1.6%)}}
@keyframes cloudPulse{from{opacity:.21;transform:scale(1)}to{opacity:.36;transform:scale(1.11)}}
@keyframes breathe{from{opacity:.35;transform:translate(var(--shift-x,0),var(--shift-y,0)) scale(1)}to{opacity:.72;transform:translate(var(--shift-x,0),var(--shift-y,0)) scale(1.06)}}
@keyframes columnBright{from{opacity:.62}to{opacity:.95}}
@keyframes rayGlimmer{0%,100%{opacity:.34}50%{opacity:.58}}
@keyframes floatGem{0%,100%{transform:translate(-50%,calc(-50% + 0px))}50%{transform:translate(-50%,calc(-50% - 12px))}}
@keyframes gemCore{from{opacity:.42;transform:translate(-50%,-50%) scale(.84)}to{opacity:.76;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes orbitOne{to{transform:translate(-50%,-50%) rotate(342deg)}}
@keyframes orbitTwo{to{transform:translate(-50%,-50%) rotate(405deg)}}
@keyframes orbitThree{to{transform:translate(-50%,-50%) rotate(445deg)}}
@keyframes groundBright{from{opacity:.34;box-shadow:0 0 8px #fee4b43a}to{opacity:.82;box-shadow:0 0 22px #ffdab35a}}
@media(min-aspect-ratio:1.9){:root{--diamond:min(45vw,500px,72vh)}}
@media(max-width:650px){:root{--diamond:min(83vw,55vh);--center-y:46%}
 .backdrop{background-position:50% 40%;filter:blur(9px) saturate(1.25) brightness(.62)}
 .night-shade{background:radial-gradient(ellipse 64% 33% at 50% 42%,rgba(5,7,27,.94) 0%,rgba(5,9,30,.76) 58%,transparent 100%),linear-gradient(180deg,rgba(3,4,14,.15) 0%,rgba(4,5,20,.2) 40%,rgba(4,5,18,.9) 100%)}
 .heaven-light{width:48vw;top:-19%;height:69%}
 .rainbow-rays{height:39vh;width:100vw;top:44%;left:51%;opacity:.86}
 .rainbow-aura{height:42vh;width:90vw;top:45%}
 .pedestal{width:113vw;top:calc(var(--center-y) + var(--diamond)*.64);height:calc(var(--diamond)*.45)}
 .lower-glow{top:calc(var(--center-y) + var(--diamond)*.57)}
 .orbit{opacity:.27}
 .waterline{height:28%}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}