@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Montserrat:wght@400;600&display=swap');

:root {
  --glow:#dffaff;
  --one:#101936;
  --two:#59465b;
  --three:#e28758
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  overflow:hidden;
  background:#09131f;
  color:#fff;
  font-family:Montserrat,Arial
}

.scene {
  position:relative;
  isolation:isolate;
  min-height:100vh;
  overflow:hidden;
  background:linear-gradient(180deg,var(--one),var(--two) 50%,var(--three) 78%,#112a30);
  transition:.8s
}

.scene:before {
  content:"";
  position:absolute;
  z-index:-5;
  inset:0;
  background:radial-gradient(ellipse at 50% 68%,#ffeab4 0 2%,#ffcd78 3%,transparent 13%),radial-gradient(ellipse at 78% 14%,#774b8e66,transparent 24%)
}

.stars {
  position:absolute;
  z-index:-4;
  inset:0;
  background-image:radial-gradient(#fff 0 1px,transparent 1.5px),radial-gradient(#ffd2a1 0 1px,transparent 1.5px);
  background-size:133px 119px,203px 179px;
  opacity:.8;
  animation:drift 28s linear infinite
}

.mountains {
  position:absolute;
  z-index:-3;
  inset:31% -8% 12%;
  background:linear-gradient(145deg,transparent 0 49.5%,#615365 50%) 0 100%/32% 58% no-repeat,linear-gradient(38deg,transparent 0 49.5%,#372f45 50%) 19% 100%/39% 77% no-repeat,linear-gradient(145deg,transparent 0 49.5%,#7b6065 50%) 49% 95%/31% 65% no-repeat,linear-gradient(38deg,transparent 0 49.5%,#3c3749 50%) 71% 100%/37% 74% no-repeat;
  animation:land 34s linear infinite
}

.island {
  position:absolute;
  z-index:-1;
  width:clamp(150px,23vw,340px);
  aspect-ratio:1.3;
  clip-path:polygon(2% 56%,20% 14%,62% 0,99% 38%,79% 63%,67% 100%,28% 80%);
  background:linear-gradient(135deg,#71865b 0 28%,#334e44 29% 50%,#152932 51%);
  filter:drop-shadow(0 25px 14px #0008);
  animation:float 8s ease-in-out infinite
}

.island:after {
  content:"";
  position:absolute;
  inset:43% 10% 0;
  background:linear-gradient(100deg,#354250,#10212e 55%,#080f18);
  clip-path:polygon(0 0,94% 0,69% 100%,28% 80%)
}

.island i {
  position:absolute;
  z-index:1;
  left:34%;
  top:15%;
  height:28%;
  width:9%;
  border-radius:50% 50% 10% 10%;
  background:#31472e;
  box-shadow:11px -8px 0 2px #4f7043,19px -17px 0 4px #587a48
}

.left {
  left:-4%;
  top:39%;
  scale:.75
}

.right {
  right:-4%;
  top:34%;
  scale:.9;
  animation-delay:-3s
}

nav {
  position:relative;
  z-index:3;
  width:min(1180px,calc(100% - 42px));
  height:74px;
  margin:auto;
  border-bottom:1px solid #fff3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:600 15px Cinzel,serif;
  letter-spacing:.28em
}

nav b {
  color:var(--glow);
  text-shadow:0 0 15px var(--glow)
}

nav small {
  font:10px Montserrat;
  letter-spacing:.15em
}

main {
  width:min(1180px,calc(100% - 42px));
  min-height:calc(100vh - 74px);
  margin:auto;
  padding:clamp(25px,4vh,55px) 0 28px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  text-align:center
}

header p {
  margin:0 0 9px;
  font-size:10px;
  letter-spacing:.38em;
  color:#f5c6a0
}

h1 {
  margin:0;
  font:600 clamp(47px,9vw,112px)/.9 Cinzel,serif;
  letter-spacing:.14em;
  text-indent:.14em;
  text-shadow:0 3px 18px #19182f
}

header div {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:17px;
  font-size:clamp(10px,1.5vw,14px);
  letter-spacing:.34em
}

header div:before,header div:after {
  content:"";
  width:min(15vw,180px);
  height:1px;
  background:linear-gradient(90deg,transparent,#fff)
}

header div:after {
  background:linear-gradient(90deg,#fff,transparent)
}

.altar {
  position:relative;
  display:grid;
  place-items:center;
  min-height:290px
}

.altar:before {
  content:"";
  position:absolute;
  bottom:7%;
  width:clamp(190px,28vw,355px);
  aspect-ratio:1.8;
  transform:perspective(500px) rotateX(61deg);
  border:4px solid #203e43;
  border-radius:48%;
  background:repeating-radial-gradient(ellipse,#2f4b4b 0 10px,#142e36 11px 14px);
  box-shadow:0 15px 4px #07161d,0 28px #10262e,0 42px #0b1c25,0 0 36px #6defff55
}

.orb {
  position:relative;
  z-index:1;
  width:clamp(105px,14vw,176px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 34% 24%,#fff 0 3%,#d7faff 12%,#8fdff0 29%,#357d91 57%,#133746 79%);
  box-shadow:0 0 15px #e4fbff,0 0 48px #66dce8,0 0 95px #65e7ffa6,inset -20px -20px 28px #09354dbf;
  animation:orb 4.5s ease-in-out infinite;
  transition:.6s
}

.orb:before {
  content:"";
  position:absolute;
  inset:-20%;
  border:1px solid var(--glow);
  border-radius:inherit;
  animation:pulse 2.6s ease-out infinite
}

.controls {
  display:flex;
  justify-content:center;
  gap:clamp(13px,3.5vw,56px);
  z-index:2
}

.controls button {
  position:relative;
  width:clamp(62px,9vw,106px);
  aspect-ratio:1;
  border:1px solid var(--tone);
  border-radius:50%;
  color:var(--tone);
  background:#06161f88;
  box-shadow:0 0 10px color-mix(in srgb,var(--tone) 32%,transparent);
  cursor:pointer;
  transition:.35s
}

.controls button:before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px dashed currentColor;
  border-radius:50%;
  opacity:.5
}

.controls button:hover,.controls button:focus,.controls .active {
  transform:translateY(-12px) scale(1.1);
  box-shadow:0 0 25px color-mix(in srgb,var(--tone) 80%,transparent),0 0 55px color-mix(in srgb,var(--tone) 35%,transparent)
}

.controls strong {
  font:clamp(30px,5vw,54px)/1 Cinzel,serif
}

.controls button {
  padding:0;
  overflow:visible
}

.controls button:before {
  z-index:1;
  pointer-events:none
}

.controls button img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  filter:saturate(1.1) contrast(1.05);
  transition:filter .35s,transform .35s
}

.controls button:hover img,.controls .active img {
  filter:saturate(1.3) contrast(1.12) brightness(1.12);
  transform:scale(1.06)
}

.controls small {
  position:absolute;
  z-index:2;
  top:calc(100% + 12px);
  left:0;
  right:0;
  font:600 9px Montserrat;
  letter-spacing:.18em;
  color:#fff
}

.earth {
  --tone:#b6df56
}

.water {
  --tone:#4cddff
}

.air {
  --tone:#ecfbff
}

.fire {
  --tone:#ff8b27
}

.particles {
  position:absolute;
  inset:0;
  pointer-events:none
}

.particle {
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--glow);
  box-shadow:0 0 9px var(--glow);
  opacity:0;
  animation:rise var(--time) linear infinite;
  animation-delay:var(--delay)
}

.scene.water {
  --glow:#52ddff;
  --one:#0c2c4a;
  --two:#126487;
  --three:#5dbed2
}

.scene.fire {
  --glow:#ff9b35;
  --one:#341229;
  --two:#813022;
  --three:#e26d31
}

.scene.earth {
  --glow:#c8df63;
  --one:#1d3028;
  --two:#516239;
  --three:#af9454
}

.scene.air {
  --glow:#e5fbff;
  --one:#1c4056;
  --two:#4f89a5;
  --three:#accfda
}

.scene.fire .orb {
  border-radius:50% 50% 42% 58%/62% 44% 56% 38%;
  background:radial-gradient(circle at 52% 72%,#fff4a1 0 8%,#ffb42e 20%,#ed4d1e 47%,#661525 77%);
  box-shadow:0 0 25px #ffbd3c,0 0 85px #e34217
}

.scene.water .orb {
  background:radial-gradient(circle at 34% 21%,#fff 0 3%,#91edff 15%,#219cd2 48%,#06345f 80%)
}

.scene.earth .orb {
  background:radial-gradient(circle at 32% 22%,#f4edaa 0 3%,#b6c75e 17%,#5c7135 44%,#25351e 76%);
  box-shadow:0 0 26px #b6d94f,0 0 90px #6c9530
}

.scene.air .orb {
  transform:scale(.91);
  background:radial-gradient(circle at 34% 22%,#fff 0 4%,#daf8ff 16%,#7fc6e1 40%,#255374 75%)
}

/* A esfera é um ser vivo: a arte do elemento aparece como energia absorvida. */
.orb {
  isolation:isolate;
  overflow:visible
}

.orb-core {
  position:absolute;
  inset:18%;
  z-index:2;
  border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#ffffffcc,transparent 22%);
  opacity:.9;
  animation:core-breathe 2.8s ease-in-out infinite
}

.absorbed-art {
  position:absolute;
  z-index:1;
  inset:-5%;
  width:110%;
  height:110%;
  object-fit:contain;
  opacity:0;
  filter:brightness(1.3) saturate(1.25);
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity .55s ease,transform .7s ease
}

.energy-ring {
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:148%;
  aspect-ratio:1;
  border:1px solid var(--glow);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.45);
}

.scene.water .absorbed-art,.scene.fire .absorbed-art,.scene.earth .absorbed-art,.scene.air .absorbed-art {
  opacity:.58;
  transform:scale(1.06)
}

.scene.water .absorbed-art { animation:water-flow 3.3s linear infinite; }
.scene.fire .absorbed-art { animation:fire-dance 1.35s ease-in-out infinite; }
.scene.earth .absorbed-art { animation:earth-rumble 1.5s ease-in-out infinite; }
.scene.air .absorbed-art { animation:air-spiral 4s linear infinite; }

.scene.water .ring-one,.scene.fire .ring-one,.scene.earth .ring-one,.scene.air .ring-one { animation:absorb-ring 1.35s ease-out infinite; }
.scene.water .ring-two,.scene.fire .ring-two,.scene.earth .ring-two,.scene.air .ring-two { animation:absorb-ring 1.35s .62s ease-out infinite; }
.scene.fire .orb-core { background:radial-gradient(circle,#fff5ac 0 8%,#ffb21e 30%,transparent 70%); }
.scene.earth .orb-core { background:radial-gradient(circle,#f7ed9b 0 8%,#b4db57 30%,transparent 70%); }
.scene.water .orb-core { background:radial-gradient(circle,#eaffff 0 8%,#47d8ff 32%,transparent 70%); }
.scene.air .orb-core { background:radial-gradient(circle,#fff 0 8%,#c5f4ff 32%,transparent 70%); }

@keyframes float {
  50% {
    translate:0 -16px
  }


}

@keyframes orb {
  50% {
    translate:0 -23px;
    filter:brightness(1.15)
  }


}

@keyframes pulse {
  to {
    transform:scale(1.45);
    opacity:0
  }


}

@keyframes rise {
  10% {
    opacity:.85
  }

  100% {
    transform:translate(var(--drift),-400px) scale(.15);
    opacity:0
  }


}

@keyframes drift {
  to {
    background-position:133px 119px,-203px 179px
  }


}

@keyframes land {
  to {
    background-position:-180px 100%,-260px 100%,-210px 95%,-260px 100%
  }


}

@keyframes core-breathe {
  50% { transform:scale(1.18); opacity:.55 }
}

@keyframes absorb-ring {
  12% { opacity:.9 }
  100% { transform:translate(-50%,-50%) scale(1.32); opacity:0 }
}

@keyframes water-flow {
  50% { transform:scale(1.13) rotate(9deg) }
}

@keyframes fire-dance {
  50% { transform:scale(1.13) rotate(-5deg) translateY(-5px) }
}

@keyframes earth-rumble {
  25% { transform:scale(1.08) translateX(-2px) }
  75% { transform:scale(1.08) translateX(2px) }
}

@keyframes air-spiral {
  to { transform:scale(1.08) rotate(360deg) }
}

/* Estado natural: não é uma esfera sólida, e sim uma essência alienígena de luz. */
.scene:not(.water):not(.fire):not(.earth):not(.air) .orb {
  background:radial-gradient(circle,#fff 0 4%,#d8fbff 8%,#7ceeffaa 16%,#39cce344 31%,transparent 58%);
  box-shadow:0 0 18px #f3ffff,0 0 55px #70eaff,0 0 110px #43c8e899;
  border-radius:0;
}

.scene:not(.water):not(.fire):not(.earth):not(.air) .orb::after {
  inset:-10%;
  background:conic-gradient(from 0deg,transparent 0 8%,#c9faffbb 9% 10%,transparent 11% 27%,#ffffff88 28% 29%,transparent 30% 49%,#c9faffbb 50% 51%,transparent 52% 76%,#ffffff88 77% 78%,transparent 79%);
  filter:blur(1px);
  animation:star-turn 10s linear infinite;
}

.scene:not(.water):not(.fire):not(.earth):not(.air) .orb::before {
  inset:2%;
  border:0;
  border-radius:0;
  background:linear-gradient(90deg,transparent 42%,#d9fbff 49%,#fff 50%,#d9fbff 51%,transparent 58%),linear-gradient(0deg,transparent 42%,#b9f7ffbb 49%,#fff 50%,#b9f7ffbb 51%,transparent 58%);
  filter:blur(1px);
  opacity:.9;
  animation:star-pulse 2.6s ease-in-out infinite;
}

.scene:not(.water):not(.fire):not(.earth):not(.air) .orb-core {
  inset:34%;
  background:radial-gradient(circle,#fff 0 22%,#d5fbff 38%,transparent 72%);
  box-shadow:0 0 18px #fff,0 0 38px #78eaff;
}

.scene:not(.water):not(.fire):not(.earth):not(.air) .energy-ring {
  opacity:.16;
  border-color:#bdf8ff;
  animation:idle-aura 5s ease-in-out infinite;
}

@keyframes star-turn {
  to { transform:rotate(360deg) }
}

@keyframes star-pulse {
  50% { transform:scale(1.36) rotate(45deg); opacity:.45 }
}

@keyframes idle-aura {
  50% { transform:translate(-50%,-50%) scale(1.12); opacity:.32 }
}

@media(max-width:650px) {
  h1 {
    font-size:45px
  }

  header div {
    letter-spacing:.18em
  }

  .altar {
    min-height:245px
  }

  .left,.right {
    scale:.55;
    opacity:.7
  }

  nav small {
    font-size:8px
  }

  .controls small {
    font-size:7px
  }


}