:root {
  --hallows-width: 29rem;
  --hallows-height: 25rem;
  --thickness: 1.75rem;
  /* Basic Gold */
  --gold-dark: #8a6e2f;
  --gold-mid: #d4af37;
  --gold-light: #fff1ac;
  /* Specular metal */
  --metal-base: radial-gradient(circle at 30% 30%, #fffce0, var(--gold-mid) 50%, var(--gold-dark) 90%);
  --metal-front: radial-gradient(circle at 25% 25%, #fffdf2, var(--gold-mid) 45%, var(--gold-dark) 95%);
  --metal-back: radial-gradient(circle at 25% 25%, #fffdf2, var(--gold-mid) 55%, var(--gold-dark) 95%);
}

/* Base */
html, body {  
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

body {
  background: linear-gradient(120deg, #4e0202 0%,  #7F0909 60%, #ae0202 100%);
}

.deathly-hallows {
  width: var(--hallows-width);
  height: var(--hallows-height);
  position: relative;
  perspective: 4000px;
  perspective-origin: center;
  scale: 0.5;
}

.relics-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Layers */
.layer {
  --z: 0px;
  --b: 1;
  transform: translateZ(var(--z));
  filter: brightness(var(--b)) contrast(1.05) saturate(1.1);
  transform-style: preserve-3d;
}

/* Cloak rotation wrapper */
.cloak-rotation {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: cloak-rotate 2s infinite alternate ease-in-out;
  animation-delay: 0.5s;
}

@keyframes cloak-rotate {
  to { transform: rotateY(-180deg); }
}

/* Invisibility Cloak */
.invisibility-cloak {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.cloak-layer {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  clip-path: polygon(
    50% calc(0% + var(--thickness)),
    50% 0%,
    0% 100%,
    100% 100%,
    50% 0%,
    50% calc(0% + var(--thickness)),
    calc(100% - var(--thickness)) calc(100% - (var(--thickness)/2)),
    calc(0% + var(--thickness)) calc(100% - (var(--thickness)/2)),
    50% calc(0% + var(--thickness))
  );
  /* Dynamic specular metalic background */
  background: var(--metal-base);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.15), 0 0 6px rgba(0,0,0,0.2);
}

.cloak-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 20%, rgba(255,255,255,0.35), transparent 60%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cloak-layer.front {
  background: var(--metal-front);
  filter: brightness(calc(var(--b) * 1.08)) contrast(1.15);
}

.cloak-layer.back {
  transform: rotateY(180deg);
  background: var(--metal-back);
  filter: brightness(calc(var(--b) * 0.75)) contrast(1.1);
}

/* Resurrection Stone */
.resurrection-stone-wrapper {
  position: absolute;
  bottom: calc(var(--thickness)/2);
  left: 50%;
  width: calc(var(--hallows-height)/2 + 2rem);
  height: calc(var(--hallows-height)/2 + 2rem);
  transform: translateX(-50%);
  transform-style: preserve-3d;
  animation: stone-rotate 2s infinite alternate ease-in-out;
}

@keyframes stone-rotate {
  to { transform: translateX(-50%) rotateY(-180deg); }
}

.resurrection-stone {
  position: absolute;
  inset: 0;
  transform: translateZ(var(--z));
  border-radius: 50%;
}

.resurrection-stone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fffdf0, var(--gold-mid) 50%, var(--gold-dark) 90%);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.2), 0 0 6px rgba(0,0,0,0.2);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
}

/* Elder Wand (static) */
.elder-wand-wrapper {
  position: absolute;
  top: var(--thickness);
  bottom: var(--thickness);
  width: calc(var(--thickness)/2);
  left: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}

.elder-wand {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--gold-light),
    var(--gold-mid),
    var(--gold-dark)
  );
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

/* Layer Depth */
.layer-0  { --z: -6px; }
.layer-1  { --z: -5px; }
.layer-2  { --z: -4px; }
.layer-3  { --z: -3px; }
.layer-4  { --z: -2px; }
.layer-5  { --z: -1px; }
.layer-6  { --z:  0px; }
.layer-7  { --z:  1px; }
.layer-8  { --z:  2px; }
.layer-9  { --z:  3px; }
.layer-10 { --z:  4px; }
.layer-11 { --z:  5px; }
.layer-12 { --z:  6px; }

/* Layer Lighting */
.layer-0  { --b: 1.12; }
.layer-1  { --b: 1.10; }
.layer-2  { --b: 1.08; }
.layer-3  { --b: 1.06; }
.layer-4  { --b: 1.04; }
.layer-5  { --b: 1.02; }
.layer-6  { --b: 1.00; }
.layer-7  { --b: 0.98; }
.layer-8  { --b: 0.96; }
.layer-9  { --b: 0.94; }
.layer-10 { --b: 0.92; }
.layer-11 { --b: 0.90; }
.layer-12 { --b: 0.88; }

/* Responsive */
@media (min-width:480px){.deathly-hallows{scale:.75;}}
@media (min-width:576px){.deathly-hallows{scale:1;}}