:root {
  --bg: #020202;
  --blue: 45, 125, 255;
  --red: 255, 32, 42;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  background: var(--bg);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.portal-world {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.025), transparent 42%),
    #020202;
}

.brand {
  padding-top: 48px;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .42em;
  opacity: .5;
}

.portal-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(80px, 14vw, 230px);
  transform: translateY(-20px);
}

.portal {
  --rgb: 255,255,255;

  position: relative;
  width: clamp(150px, 18vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: white;
}

.portal-blue {
  --rgb: var(--blue);
}

.portal-red {
  --rgb: var(--red);
}

.glow-ring {
  position: absolute;
  inset: 15%;
  border-radius: 50%;

  border: 3px solid rgba(var(--rgb), .95);

  box-shadow:
    0 0 6px rgba(var(--rgb), 1),
    0 0 16px rgba(var(--rgb), .9),
    0 0 38px rgba(var(--rgb), .65),
    0 0 85px rgba(var(--rgb), .34),
    inset 0 0 20px rgba(var(--rgb), .5);

  animation: pulse 4.5s ease-in-out infinite;

  transition:
    transform .6s cubic-bezier(.16,1,.3,1),
    box-shadow .6s ease;
}

.glow-ring::before {
  content: "";
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      transparent 43%,
      rgba(var(--rgb), .11) 55%,
      rgba(var(--rgb), .035) 68%,
      transparent 78%
    );
  filter: blur(10px);
}

.portal-red .glow-ring {
  animation-delay: -1.4s;
}

.portal:hover .glow-ring {
  transform: scale(1.075);

  box-shadow:
    0 0 8px rgba(var(--rgb), 1),
    0 0 24px rgba(var(--rgb), 1),
    0 0 55px rgba(var(--rgb), .82),
    0 0 120px rgba(var(--rgb), .48),
    inset 0 0 22px rgba(var(--rgb), .65);
}

.portal-label {
  position: absolute;
  top: calc(100% + 14px);
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .24;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}

.portal:hover .portal-label {
  opacity: .9;
  transform: translateY(0);
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(.985);
    opacity: .76;
  }

  50% {
    transform: scale(1.035);
    opacity: 1;
  }
}

.transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}

body.leaving .transition {
  opacity: 1;
}

.simple-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  text-align: center;
}

.simple-page h1 {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
}

.simple-page p {
  margin: 0;
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .34;
}

@media (max-width: 650px) {
  .portal-row {
    gap: 38px;
  }

  .portal {
    width: 36vw;
  }

  .brand {
    padding-top: 34px;
  }
}





/* V0.6 GLOW OVERRIDE START */

.glow-ring {
  animation-duration: 6s;

  border: 2px solid rgba(var(--rgb), 1);

  box-shadow:
    0 0 2px rgba(var(--rgb), .82),
    0 0 6px rgba(var(--rgb), .34),
    0 0 14px rgba(var(--rgb), .13),
    0 0 28px rgba(var(--rgb), .045),

    inset 0 0 4px rgba(var(--rgb), .78),
    inset 0 0 11px rgba(var(--rgb), .21);
}

.glow-ring::before {
  opacity: .48;
}

.portal:hover .glow-ring {
  border: 2px solid rgba(var(--rgb), 1);

  box-shadow:
    0 0 3px rgba(var(--rgb), .92),
    0 0 9px rgba(var(--rgb), .44),
    0 0 19px rgba(var(--rgb), .17),
    0 0 36px rgba(var(--rgb), .06),

    inset 0 0 5px rgba(var(--rgb), .86),
    inset 0 0 13px rgba(var(--rgb), .25);
}

/* V0.6 GLOW OVERRIDE END */





/* V0.8 BACKGROUND TEXTURE START */

.portal-world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      48deg,
      rgba(170, 170, 175, .085) 0px,
      rgba(170, 170, 175, .085) 1px,
      transparent 1px,
      transparent 11px
    ),
    repeating-linear-gradient(
      -48deg,
      rgba(170, 170, 175, .055) 0px,
      rgba(170, 170, 175, .055) 1px,
      transparent 1px,
      transparent 11px
    );

  background-size: 30px 30px;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.95) 52%,
      rgba(0,0,0,.55) 82%,
      transparent 115%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.95) 52%,
      rgba(0,0,0,.55) 82%,
      transparent 115%
    );
}

.brand,
.portal-row {
  position: relative;
  z-index: 1;
}

/* V0.8 BACKGROUND TEXTURE END */














/* V0.14 WHITE RABBIT START */

.portal-red::before {
  content: "";
  position: absolute;

  width: 350px;
  height: 395px;

  left: 51%;
  top: 43%;

  transform:
    translate(-50%, -50%)
    translate(32px, -18px)
    rotate(-7deg)
    scale(.96);

  pointer-events: none;
  z-index: -1;

  background: rgba(175, 175, 180, .16);

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cellipse cx='98' cy='157' rx='54' ry='66' fill='white'/%3E%3Ccircle cx='109' cy='92' r='39' fill='white'/%3E%3Cellipse cx='92' cy='37' rx='14' ry='52' transform='rotate(-12 92 37)' fill='white'/%3E%3Cellipse cx='124' cy='38' rx='13' ry='53' transform='rotate(10 124 38)' fill='white'/%3E%3Ccircle cx='44' cy='162' r='19' fill='white'/%3E%3Cellipse cx='77' cy='215' rx='34' ry='16' transform='rotate(-9 77 215)' fill='white'/%3E%3Cellipse cx='132' cy='215' rx='34' ry='16' transform='rotate(8 132 215)' fill='white'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cellipse cx='98' cy='157' rx='54' ry='66' fill='white'/%3E%3Ccircle cx='109' cy='92' r='39' fill='white'/%3E%3Cellipse cx='92' cy='37' rx='14' ry='52' transform='rotate(-12 92 37)' fill='white'/%3E%3Cellipse cx='124' cy='38' rx='13' ry='53' transform='rotate(10 124 38)' fill='white'/%3E%3Ccircle cx='44' cy='162' r='19' fill='white'/%3E%3Cellipse cx='77' cy='215' rx='34' ry='16' transform='rotate(-9 77 215)' fill='white'/%3E%3Cellipse cx='132' cy='215' rx='34' ry='16' transform='rotate(8 132 215)' fill='white'/%3E%3C/svg%3E")
    center / contain no-repeat;

  filter: blur(8px);
  opacity: 0;

  animation: rabbit-apparition 28s linear infinite;
}

@keyframes rabbit-apparition {

  0%, 10.7% { opacity: 0; }

  14% { opacity: .032; }
  17.5% { opacity: .075; }

  20.5% {
    opacity: .144;
    transform:
      translate(-50%, -50%)
      translate(28px, -21px)
      rotate(-6deg)
      scale(.98);
  }

  25% { opacity: .144; }
  27% { opacity: .045; }
  28% { opacity: 0; }


  35.7% { opacity: 0; }

  39% { opacity: .035; }
  42.5% { opacity: .085; }

  45.5% {
    opacity: .16;
    transform:
      translate(-50%, -50%)
      translate(28px, -21px)
      rotate(-6deg)
      scale(.98);
  }

  50% { opacity: .16; }
  52% { opacity: .05; }
  53% { opacity: 0; }


  60.7% { opacity: 0; }

  64% { opacity: .035; }
  67.5% { opacity: .085; }

  70.5% {
    opacity: .16;
    transform:
      translate(-50%, -50%)
      translate(28px, -21px)
      rotate(-6deg)
      scale(.98);
  }

  75% { opacity: .16; }
  77% { opacity: .05; }
  78% { opacity: 0; }


  85.7% { opacity: 0; }

  89% { opacity: .035; }
  92.5% { opacity: .085; }

  95.5% {
    opacity: .16;
    transform:
      translate(-50%, -50%)
      translate(28px, -21px)
      rotate(-6deg)
      scale(.98);
  }

  98% { opacity: .16; }
  99% { opacity: .05; }
  100% { opacity: 0; }
}

/* V0.14 WHITE RABBIT END */


/* V0.15 RABBIT SILHOUETTE OVERRIDE START */

.portal-red::before {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 260'%3E%3Cellipse cx='103' cy='174' rx='63' ry='70' fill='white'/%3E%3Ccircle cx='127' cy='91' r='42' fill='white'/%3E%3Cellipse cx='157' cy='101' rx='24' ry='17' transform='rotate(8 157 101)' fill='white'/%3E%3Cellipse cx='108' cy='34' rx='15' ry='62' transform='rotate(-13 108 34)' fill='white'/%3E%3Cellipse cx='143' cy='31' rx='14' ry='64' transform='rotate(8 143 31)' fill='white'/%3E%3Ccircle cx='43' cy='166' r='22' fill='white'/%3E%3Cellipse cx='75' cy='232' rx='38' ry='17' transform='rotate(-8 75 232)' fill='white'/%3E%3Cellipse cx='137' cy='231' rx='39' ry='17' transform='rotate(6 137 231)' fill='white'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 260'%3E%3Cellipse cx='103' cy='174' rx='63' ry='70' fill='white'/%3E%3Ccircle cx='127' cy='91' r='42' fill='white'/%3E%3Cellipse cx='157' cy='101' rx='24' ry='17' transform='rotate(8 157 101)' fill='white'/%3E%3Cellipse cx='108' cy='34' rx='15' ry='62' transform='rotate(-13 108 34)' fill='white'/%3E%3Cellipse cx='143' cy='31' rx='14' ry='64' transform='rotate(8 143 31)' fill='white'/%3E%3Ccircle cx='43' cy='166' r='22' fill='white'/%3E%3Cellipse cx='75' cy='232' rx='38' ry='17' transform='rotate(-8 75 232)' fill='white'/%3E%3Cellipse cx='137' cy='231' rx='39' ry='17' transform='rotate(6 137 231)' fill='white'/%3E%3C/svg%3E")
    center / contain no-repeat;

  filter: blur(6px);
}

/* V0.15 RABBIT SILHOUETTE OVERRIDE END */





/* V0.17 BACKGROUND MOTION START */

.portal-world::before {
  inset: -100px 0;
  will-change: transform;
  animation: background-drift 24s linear infinite;
}

@keyframes background-drift {
  from {
    transform: translate3d(0, -90px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* V0.17 BACKGROUND MOTION END */


/* V0.19 SECONDARY WORLDS START */

.cdb-page,
.kai-page {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #020202;
}

.cdb-page main,
.kai-page main {
  position: relative;
  z-index: 2;
}


/* SAME TEXTURE — STATIC CDB */

.cdb-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      48deg,
      rgba(170, 170, 175, .085) 0px,
      rgba(170, 170, 175, .085) 1px,
      transparent 1px,
      transparent 11px
    ),
    repeating-linear-gradient(
      -48deg,
      rgba(170, 170, 175, .055) 0px,
      rgba(170, 170, 175, .055) 1px,
      transparent 1px,
      transparent 11px
    );

  background-size: 30px 30px;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.95) 52%,
      rgba(0,0,0,.55) 82%,
      transparent 115%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.95) 52%,
      rgba(0,0,0,.55) 82%,
      transparent 115%
    );
}


/* SAME TEXTURE — MOVING KAI */

.kai-page::before {
  content: "";
  position: absolute;
  inset: -100px 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      48deg,
      rgba(170, 170, 175, .085) 0px,
      rgba(170, 170, 175, .085) 1px,
      transparent 1px,
      transparent 11px
    ),
    repeating-linear-gradient(
      -48deg,
      rgba(170, 170, 175, .055) 0px,
      rgba(170, 170, 175, .055) 1px,
      transparent 1px,
      transparent 11px
    );

  background-size: 30px 30px;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.95) 52%,
      rgba(0,0,0,.55) 82%,
      transparent 115%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.95) 52%,
      rgba(0,0,0,.55) 82%,
      transparent 115%
    );

  will-change: transform;
  animation: background-drift 24s linear infinite;
}

/* V0.19 SECONDARY WORLDS END */


/* V0.20 HOME NAVIGATION START */

.home-link {
  position: fixed;
  top: 22px;
  left: 24px;
  z-index: 100;

  color: rgba(190, 190, 195, .52);
  text-decoration: none;

  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;

  transition:
    color .35s ease,
    opacity .35s ease,
    transform .35s ease;
}

.home-link:hover {
  color: rgba(220, 220, 225, .92);
  transform: translateX(-2px);
}

/* V0.20 HOME NAVIGATION END */


/* V0.21 RABBIT TUNING START */

.portal-red::before {
  /* mirror independently from animated transform */
  scale: -1 1;

  /* slightly stronger apparition, timing unchanged */
  background: rgba(185, 185, 190, .195);
}

/* V0.21 RABBIT TUNING END */








/* V0.24 RABBIT POSITION START */

.portal-red::before {
  left: 50%;
  translate: -260px 0;
}

@media (max-width: 650px) {
  .portal-red::before {
    left: 50%;
    translate: -180px 0;
  }
}

/* V0.24 RABBIT POSITION END */


/* V0.25 MOBILE COMPOSITION START */

@media (max-width: 650px) {

  /* komplette Portal-Komposition ca. eine Ringhöhe nach oben */
  .portal-row {
    transform: translateY(-140px);
  }

  /* Rabbit zusätzlich ca. eine sichtbare Hasenbreite nach links */
  .portal-red::before {
    left: 50%;
    translate: -360px 0;
  }

}

/* V0.25 MOBILE COMPOSITION END */