:root {
  --oracle-gold: #f5cf68;
  --oracle-gold-soft: #d9ae51;
  --oracle-ivory: #fff7df;
  --oracle-muted: #d5c9ae;
  --oracle-dark: #17140f;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--oracle-dark);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--oracle-ivory);
  background: var(--oracle-dark);
  font-family: Georgia, "Times New Roman", serif;
}

.oracle-section {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4.5rem) 1rem;
  isolation: isolate;
  overflow: hidden;
  background-image: url("assets/seelenblick-hintergrund.jpg");
  background-position: center 45%;
  background-size: cover;
}

.oracle-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(15, 13, 10, .53);
  backdrop-filter: blur(1.5px);
}

.oracle-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  box-shadow:
    inset 0 0 15vw rgba(0, 0, 0, .72),
    inset 0 -22rem 18rem rgba(8, 7, 5, .68);
  pointer-events: none;
}

.oracle {
  position: relative;
  z-index: 1;
  width: min(100%, 70rem);
  text-align: center;
}

.oracle__heading {
  max-width: 42rem;
  margin-inline: auto;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}

.oracle__eyebrow,
.oracle__message-label {
  margin: 0 0 .65rem;
  color: var(--oracle-gold);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.oracle h1 {
  margin: 0;
  color: #fff0b0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 3.75rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-shadow:
    0 1px 0 #fff7d8,
    0 2px 2px rgba(91, 55, 8, .8),
    0 5px 10px rgba(0, 0, 0, .85),
    0 0 7px rgba(226, 174, 59, .48);
}

.oracle__intro {
  max-width: 34rem;
  margin: .9rem auto 0;
  color: #fff0b0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(.92rem, 2vw, 1.05rem);
  line-height: 1.6;
  text-shadow:
    0 1px 0 rgba(255, 247, 216, .65),
    0 3px 8px rgba(0, 0, 0, .82),
    0 0 6px rgba(226, 174, 59, .38);
}

.oracle__table {
  position: relative;
  min-height: clamp(17rem, 34vw, 23rem);
  margin-top: clamp(.5rem, 2vw, 1.25rem);
  perspective: 1200px;
  transform-style: preserve-3d;
}

.oracle__table::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 9%;
  left: 50%;
  width: min(56%, 31rem);
  height: 2.7rem;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  filter: blur(17px);
  transform: rotateX(62deg);
  pointer-events: none;
}

.oracle__cards {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.oracle__cards::before {
  content: "";
  position: absolute;
  inset: -8% -5%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.oracle__cards::before {
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 224, 128, .28) 0%,
      rgba(222, 160, 48, .12) 35%,
      transparent 70%
    );
  filter: blur(18px);
  transform: scale(.78);
}

.oracle__glitter-particle {
  position: absolute;
  z-index: 25;
  top: 50%;
  left: 50%;
  width: var(--glitter-size);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: var(--glitter-color);
  box-shadow:
    0 0 4px #fff8cf,
    0 0 10px var(--glitter-color),
    0 0 18px rgba(238, 174, 57, .7);
  pointer-events: none;
  mix-blend-mode: screen;
  animation:
    glitter-burst 1.84s cubic-bezier(.12, .68, .2, 1) var(--glitter-delay) forwards;
}

.oracle-card {
  position: absolute;
  z-index: 30;
  width: clamp(7rem, 15vw, 10.3rem);
  aspect-ratio: .61;
  padding: 0;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  cursor: pointer;
  filter:
    drop-shadow(0 12px 8px rgba(0, 0, 0, .52))
    drop-shadow(0 28px 22px rgba(0, 0, 0, .48));
  transform:
    translateX(var(--card-x))
    translateY(var(--card-y))
    rotate(var(--card-r));
  transform-origin: 50% 120%;
  transform-style: preserve-3d;
  transition:
    transform .65s cubic-bezier(.2, .8, .2, 1),
    opacity .45s ease,
    filter .45s ease;
  animation: card-float 3.8s ease-in-out infinite alternate;
  animation-delay: var(--card-delay);
  touch-action: manipulation;
  will-change: transform, filter;
  -webkit-tap-highlight-color: transparent;
}

.oracle-card[data-card="0"] {
  --card-x: -6.8rem;
  --card-y: 1.2rem;
  --card-r: -9deg;
  --card-delay: -.5s;
  z-index: 30;
}

.oracle-card[data-card="1"] {
  --card-x: 0rem;
  --card-y: 0rem;
  --card-r: 0deg;
  --card-delay: -1.4s;
  z-index: 32;
}

.oracle-card[data-card="2"] {
  --card-x: 6.8rem;
  --card-y: 1.2rem;
  --card-r: 9deg;
  --card-delay: -2.2s;
  z-index: 30;
}

.oracle-card__ghost {
  position: absolute;
  width: clamp(6.8rem, 14.5vw, 10rem);
  aspect-ratio: .61;
  border: 1px solid rgba(255, 224, 139, .78);
  border-radius: .7rem;
  background-color: #4d2b0e;
  background-image: url("assets/seelenblick-hintergrund.jpg");
  background-position: 50% 32%;
  background-size: 265%;
  box-shadow:
    0 8px 9px rgba(0, 0, 0, .36),
    inset 0 0 0 4px rgba(20, 16, 10, .64),
    inset 0 0 0 5px rgba(245, 207, 104, .36);
  filter: sepia(.12) saturate(1.12) brightness(.92);
  opacity: .82;
  pointer-events: none;
  transform:
    translateX(var(--ghost-x))
    translateY(var(--ghost-y))
    rotate(var(--ghost-r));
  transform-origin: 50% 115%;
  transition: opacity .45s ease, transform .55s ease;
  will-change: transform;
}

.oracle-card:hover,
.oracle-card:focus-visible {
  z-index: 8;
  animation-play-state: paused;
  filter:
    drop-shadow(0 16px 10px rgba(0, 0, 0, .58))
    drop-shadow(0 38px 28px rgba(0, 0, 0, .58))
    drop-shadow(0 0 13px rgba(245, 207, 104, .32));
  transform:
    translateX(var(--card-x))
    translateY(calc(var(--card-y) - 1.45rem))
    rotate(var(--card-r))
    scale(1.075);
}

.oracle-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: .55rem;
}

.oracle-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.2, .75, .2, 1);
}

.oracle-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 139, .92);
  border-radius: .75rem;
  backface-visibility: hidden;
  box-shadow:
    0 3px 2px rgba(255, 235, 169, .2),
    0 12px 12px rgba(0, 0, 0, .48),
    0 29px 44px rgba(0, 0, 0, .62),
    0 0 20px rgba(245, 207, 104, .24),
    inset 0 0 0 4px rgba(20, 16, 10, .62),
    inset 0 0 0 5px rgba(245, 207, 104, .5),
    inset 0 1px 0 6px rgba(255, 244, 196, .12);
}

.oracle-card__back {
  background: #4d2b0e;
}

.oracle-card__back-image {
  position: absolute;
  inset: .55rem;
  border: 1px solid rgba(245, 207, 104, .54);
  border-radius: .42rem;
  background-image: url("assets/seelenblick-hintergrund.jpg");
  background-position: 50% 32%;
  background-size: 265%;
  filter: sepia(.16) saturate(1.2) brightness(1.12) contrast(1.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 184, .52),
    inset 0 -9px 16px rgba(29, 13, 2, .42),
    0 1px 0 rgba(255, 221, 130, .34);
}

.oracle-card__back-title {
  position: absolute;
  z-index: 2;
  top: 31%;
  left: 50%;
  translate: -50% -50%;
  color: #e8b956;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .025em;
  white-space: nowrap;
  -webkit-text-stroke: .45px rgba(61, 31, 5, .85);
  text-shadow:
    0 -1px 0 #fff1a9,
    0 1px 0 #a26719,
    0 2px 0 #6b3b0c,
    0 4px 5px rgba(0, 0, 0, .9),
    0 0 7px rgba(255, 207, 92, .62);
}

.oracle-card__front {
  transform: rotateY(180deg);
  padding: 0;
  background: #24180e;
}

.oracle-card__front img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.oracle.is-revealed .oracle-card:not(.is-selected) {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  transform:
    translateX(var(--card-x))
    translateY(calc(var(--card-y) + 4rem))
    rotate(var(--card-r))
    scale(.82);
}

.oracle.is-revealed .oracle-card.is-selected {
  z-index: 10;
  animation: none;
  filter:
    drop-shadow(0 20px 12px rgba(0, 0, 0, .65))
    drop-shadow(0 42px 32px rgba(0, 0, 0, .62))
    drop-shadow(0 0 18px rgba(245, 207, 104, .4));
  transform: translate(0, -1.35rem) rotate(0) scale(1.095);
}

.oracle.is-revealed .oracle-card__ghost {
  opacity: 0;
  transform: translateY(3rem) scale(.82);
}

.oracle-card.is-selected .oracle-card__inner {
  transform: rotateY(180deg);
}

.oracle.is-shuffling .oracle-card {
  animation-duration: .72s;
  animation-timing-function: cubic-bezier(.55, .08, .42, .95);
  animation-iteration-count: infinite;
}

.oracle.is-shuffling .oracle__cards::before {
  opacity: 1;
  animation: magic-glow 1.25s ease-in-out infinite alternate;
}

.oracle.is-shuffling .oracle-card[data-card="0"] {
  animation-name: shuffle-left;
}

.oracle.is-shuffling .oracle-card[data-card="1"] {
  animation-name: shuffle-center;
}

.oracle.is-shuffling .oracle-card[data-card="2"] {
  animation-name: shuffle-right;
}

.oracle.is-shuffling .oracle-card__ghost {
  opacity: .94;
  animation: ghost-shuffle .76s cubic-bezier(.55, .08, .42, .95)
    var(--ghost-delay) infinite;
}

.oracle.is-shuffling .oracle-card:hover,
.oracle.is-shuffling .oracle-card:focus-visible {
  transform:
    translateX(var(--card-x))
    translateY(var(--card-y))
    rotate(var(--card-r));
}

.oracle__hint {
  margin: -.6rem 0 0;
  color: #e9d8ad;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem;
  letter-spacing: .04em;
  text-shadow: 0 2px 9px #000;
  transition: opacity .3s ease;
}

.oracle.is-revealed .oracle__hint {
  opacity: 0;
}

.oracle__message {
  width: min(100%, 38rem);
  margin: 1rem auto 0;
  padding: clamp(1.2rem, 4vw, 1.8rem);
  border: 1px solid rgba(245, 207, 104, .4);
  border-radius: 1rem;
  background: rgba(18, 15, 11, .82);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px);
  animation: message-reveal .7s ease both;
}

.oracle__message blockquote {
  margin: .45rem auto 1.25rem;
  color: #fff7df;
  font-size: clamp(1.3rem, 4vw, 1.85rem);
  line-height: 1.4;
}

.oracle__again {
  padding: .72rem 1.15rem;
  border: 1px solid rgba(245, 207, 104, .7);
  border-radius: 999px;
  color: var(--oracle-dark);
  background: var(--oracle-gold);
  font: 700 .78rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.oracle__again:hover {
  transform: translateY(-2px);
  background: #ffe49a;
}

@keyframes card-float {
  to {
    translate: 0 -.82rem;
  }
}

@keyframes magic-glow {
  from {
    opacity: .55;
    transform: scale(.72) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: scale(1.02) rotate(2deg);
  }
}

@keyframes glitter-burst {
  0% {
    opacity: 0;
    transform:
      translate(var(--glitter-start-x), var(--glitter-start-y))
      rotate(0deg)
      scale(.15);
  }
  10% {
    opacity: 1;
    transform:
      translate(var(--glitter-start-x), var(--glitter-start-y))
      rotate(55deg)
      scale(1.35);
  }
  58% {
    opacity: .9;
  }
  100% {
    opacity: 0;
    transform:
      translate(var(--glitter-x), var(--glitter-y))
      rotate(420deg)
      scale(.2);
  }
}

@keyframes shuffle-left {
  0%, 100% {
    transform: translateX(-6.8rem) translateY(1.2rem) rotate(-9deg);
    z-index: 1;
  }
  50% {
    transform: translateX(6.8rem) translateY(-.25rem) rotate(7deg);
    z-index: 4;
  }
}

@keyframes shuffle-center {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0);
    z-index: 3;
  }
  50% {
    transform: translateX(-6.8rem) translateY(1.2rem) rotate(-9deg);
    z-index: 1;
  }
}

@keyframes shuffle-right {
  0%, 100% {
    transform: translateX(6.8rem) translateY(1.2rem) rotate(9deg);
    z-index: 2;
  }
  50% {
    transform: translateX(0) translateY(-.5rem) rotate(0);
    z-index: 3;
  }
}

@keyframes ghost-shuffle {
  0%, 100% {
    transform:
      translateX(var(--ghost-x))
      translateY(var(--ghost-y))
      rotate(var(--ghost-r));
  }
  45% {
    transform:
      translateX(var(--ghost-mix-x))
      translateY(-.75rem)
      rotate(var(--ghost-mix-r))
      scale(1.015);
  }
  72% {
    transform:
      translateX(0)
      translateY(.25rem)
      rotate(0);
  }
}

@keyframes message-reveal {
  from {
    opacity: 0;
    translate: 0 .8rem;
  }
}

@media (max-width: 720px) {
  .oracle-section {
    padding-inline: .65rem;
    background-position: 50% 35%;
  }

  .oracle__table {
    min-height: 18rem;
  }

  .oracle h1 {
    font-size: clamp(3rem, 10vw, 3.75rem);
  }

  .oracle-card {
    width: clamp(6rem, 27vw, 8rem);
  }

  .oracle-card__ghost {
    width: clamp(5.85rem, 26vw, 7.8rem);
  }

  .oracle-card__back-title {
    font-size: clamp(.88rem, 4.1vw, 1.08rem);
  }

  .oracle-card[data-card="0"] {
    --card-x: -4.2rem;
    --card-y: 1.1rem;
    --card-r: -10deg;
  }

  .oracle-card[data-card="1"] {
    --card-x: 0rem;
    --card-y: 0rem;
    --card-r: 0deg;
  }

  .oracle-card[data-card="2"] {
    --card-x: 4.2rem;
    --card-y: 1.1rem;
    --card-r: 10deg;
  }

  .oracle__message {
    margin-top: .3rem;
  }

  @keyframes shuffle-left {
    0%, 100% {
      transform: translateX(-4.2rem) translateY(1.1rem) rotate(-10deg);
      z-index: 1;
    }
    50% {
      transform: translateX(4.2rem) translateY(-.2rem) rotate(8deg);
      z-index: 4;
    }
  }

  @keyframes shuffle-center {
    0%, 100% {
      transform: translateX(0) translateY(0) rotate(0);
      z-index: 3;
    }
    50% {
      transform: translateX(-4.2rem) translateY(1.1rem) rotate(-10deg);
      z-index: 1;
    }
  }

  @keyframes shuffle-right {
    0%, 100% {
      transform: translateX(4.2rem) translateY(1.1rem) rotate(10deg);
      z-index: 2;
    }
    50% {
      transform: translateX(0) translateY(-.4rem) rotate(0);
      z-index: 3;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-card {
    animation: none;
  }

  .oracle.is-shuffling .oracle-card__ghost {
    animation: none;
  }

  .oracle.is-shuffling .oracle__cards::before {
    opacity: .55;
    animation: none;
  }

  .oracle__glitter-particle {
    animation-name: glitter-fade;
    animation-duration: .65s;
  }

  .oracle-card,
  .oracle-card__inner,
  .oracle__message {
    transition-duration: .01ms;
    animation-duration: .01ms;
  }
}

@keyframes glitter-fade {
  0%, 100% { opacity: 0; }
  35%, 65% { opacity: .8; }
}