/* ==================================================
   FONT
================================================== */

@font-face {
  font-family: "Alte Haas Grotesk";

  src:
    url("../fonts/AlteHaasGroteskRegular.ttf")
    format("truetype");

  font-weight: 400;
  font-style: normal;

  font-display: swap;
}



/* ==================================================
   FARBEN
================================================== */

:root {
  --paper: #ffffff;
  --ink: #000000;

  --alert: #ff0000;

  --input-blue: #3336ff;

  --link-blue: #0000ee;
  --url-green: #00a000;
}


body.dark {
  --paper: #111111;
  --ink: #ffffff;
}



/* ==================================================
   BASIS
================================================== */

* {
  box-sizing: border-box;
}


html,
body {
  width: 100%;
  height: 100%;

  margin: 0;

  overflow: hidden;
}


body {
  background: var(--paper);
  color: var(--ink);

  font-family:
    "Alte Haas Grotesk",
    Arial,
    Helvetica,
    sans-serif;

  font-weight: 400;
}


button,
input {
  font: inherit;
}



/* ==================================================
   VIEWPORT
================================================== */

.viewport {
  position: fixed;

  inset: 0;

  overflow: hidden;

  background: var(--paper);
}



/* ==================================================
   FESTE 5120 × 2880 BÜHNE

   Die komplette Bühne wird über JavaScript
   proportional skaliert.

   Die einzelnen Elemente selbst skalieren
   NICHT unabhängig voneinander.
================================================== */

.stage {
  position: absolute;

  width: 5120px;
  height: 2880px;

  transform-origin: 0 0;

  overflow: hidden;

  background: var(--paper);
}



/* ==================================================
   RE:SEARCH WORTMARKE

   499,405 pt
   × 96 / 72
   = 665,873 px
================================================== */

.wordmark {
  position: absolute;

  z-index: 20;

  left: -8px;
  top: -72px;

  margin: 0;

  white-space: nowrap;

  color: var(--ink);

  font-family:
    "Alte Haas Grotesk",
    Arial,
    Helvetica,
    sans-serif;

  font-size: 665.873px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0;

  pointer-events: none;

  user-select: none;
}



/* ==================================================
   THEME BUTTON
================================================== */

.theme-button {
  position: absolute;

  z-index: 30;

  left: 4714px;
  top: 157px;

  width: 302px;
  height: 146px;

  padding: 0;

  border:
    3px
    solid
    var(--ink);

  border-radius: 75px;

  background: var(--paper);

  color: var(--ink);

  cursor: pointer;
}



/* ==================================================
   SONNEN ICON
================================================== */

.sun,
.sun::before,
.sun::after,
.sun span,
.sun span::before,
.sun span::after {
  position: absolute;

  display: block;

  content: "";
}


.sun {
  left: 50%;
  top: 50%;

  width: 47px;
  height: 47px;

  border:
    3px
    solid
    currentColor;

  border-radius: 50%;

  transform:
    translate(
      -50%,
      -50%
    );
}


.sun::before {
  left: 21px;
  top: -31px;

  width: 3px;
  height: 19px;

  background: currentColor;

  box-shadow:
    0
    90px
    0
    currentColor;
}


.sun::after {
  left: -31px;
  top: 21px;

  width: 19px;
  height: 3px;

  background: currentColor;

  box-shadow:
    90px
    0
    0
    currentColor;
}


.sun span {
  inset: 0;

  transform:
    rotate(45deg);
}


.sun span::before {
  left: 21px;
  top: -31px;

  width: 3px;
  height: 19px;

  background: currentColor;

  box-shadow:
    0
    90px
    0
    currentColor;
}


.sun span::after {
  left: -31px;
  top: 21px;

  width: 19px;
  height: 3px;

  background: currentColor;

  box-shadow:
    90px
    0
    0
    currentColor;
}



/* ==================================================
   CHAT PANEL
================================================== */

.chat-panel {
  position: absolute;

  z-index: 10;

  left: 1071px;
  top: 475px;

  width: 1156px;
  height: 2260px;

  overflow: hidden;

  border:
    3px
    solid
    var(--ink);

  border-radius: 55px;

  background:
    var(--paper);

  transition:
    background-color
    220ms
    linear;
}


.chat-panel.answer-state {
  background:
    var(--alert);
}



/* ==================================================
   NACHRICHTENBEREICH
================================================== */

.chat-messages {
  position: absolute;

  inset: 0;

  overflow: hidden;
}



/* ==================================================
   FESTE NACHRICHTEN-SLOTS
================================================== */

.message-slot {
  position: absolute;
}


.greeting-slot {
  left: 44px;
  top: 206px;
}


.user-slot {
  right: 46px;
  top: 350px;
}


.thinking-slot {
  left: 72px;
  top: 488px;
}


.answer-slot {
  left: 52px;
  top: 490px;
}



/* ==================================================
   ALLGEMEINE SPRECHBLASE
================================================== */

.speech-bubble {
  position: relative;

  display: block;

  color: #000000;

  background: transparent;

  transform-origin:
    50%
    50%;

  backface-visibility:
    hidden;
}


.speech-bubble--user {
  color: #ffffff;
}



/* ==================================================
   SVG DER SPRECHBLASE
================================================== */

.speech-bubble__svg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}


.speech-bubble__svg path {
  stroke: #000000;

  stroke-width: 2px;

  stroke-linejoin: round;

  stroke-linecap: round;

  vector-effect:
    non-scaling-stroke;
}


.speech-bubble--bot
.speech-bubble__svg
path {
  fill: #ffffff;
}


.speech-bubble--user
.speech-bubble__svg
path {
  fill: #000000;
}



/* ==================================================
   INHALT DER SPRECHBLASE
================================================== */

.speech-bubble__content {
  position: absolute;

  z-index: 1;

  overflow-wrap: anywhere;

  word-break: normal;
}



/* ==================================================
   BEGRÜSSUNGSBLASE
================================================== */

.speech-bubble--greeting {
  width: 674.93px;
  height: 143.34px;
}


.speech-bubble--greeting
.speech-bubble__content {
  left: 74px;
  right: 43px;

  top: 0;

  height: 143.34px;

  display: flex;

  align-items: center;

  white-space: nowrap;

  font-size: 54px;

  line-height: 1;
}



/* ==================================================
   NUTZER SPRECHBLASE
================================================== */

.speech-bubble--user
.speech-bubble__content {
  left: 46px;
  right: 73px;

  top: 30px;
  bottom: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 54px;

  line-height: 1.08;

  text-align: left;
}



/* ==================================================
   DENKBLASE
================================================== */

.speech-bubble--thinking {
  width: 294px;
  height: 143.34px;
}


.speech-bubble--thinking
.speech-bubble__content {
  left: 74px;
  right: 35px;

  top: 0;

  height: 143.34px;

  display: flex;

  align-items: center;

  font-size: 54px;
}



/* ==================================================
   DENKPUNKTE
================================================== */

.thinking-dots {
  display: flex;

  gap: 9px;
}


.thinking-dots span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #000000;

  animation:
    dot
    1.1s
    ease-in-out
    infinite;
}


.thinking-dots span:nth-child(2) {
  animation-delay: 120ms;
}


.thinking-dots span:nth-child(3) {
  animation-delay: 240ms;
}


@keyframes dot {

  0%,
  70%,
  100% {
    opacity: 0.3;

    transform:
      translateY(0);
  }


  35% {
    opacity: 1;

    transform:
      translateY(-8px);
  }

}



/* ==================================================
   ANTWORTBLASE
================================================== */

.speech-bubble--answer {
  width: 914.93px;

  min-height: 1078.39px;
}


.speech-bubble--answer
.speech-bubble__content {
  left: 62px;
  right: 51px;

  top: 55px;
  bottom: 74px;

  font-size: 52px;

  line-height: 1.08;
}



/* ==================================================
   ANTWORT INHALT
================================================== */

.answer-heading {
  margin:
    0
    0
    60px
    0;

  font-size: 52px;

  font-weight: 400;

  line-height: 1.08;
}


.search-result {
  margin:
    0
    0
    62px
    0;
}


.search-result:last-child {
  margin-bottom: 0;
}


.search-result a {
  color:
    var(--link-blue);

  text-decoration:
    underline;

  text-decoration-thickness:
    3px;

  text-underline-offset:
    2px;
}


.result-url {
  color:
    var(--url-green);
}



/* ==================================================
   COMPOSER / SUCHFELD
================================================== */

.composer {
  position: absolute;

  z-index: 50;

  left: 32px;

  bottom: 75px;

  width: 1092px;

  height: 159px;

  margin: 0;

  border:
    5px
    solid
    var(--input-blue);

  border-radius: 82px;

  background: #ffffff;

  transition:
    opacity
    120ms
    linear;
}


.chat-panel.answer-state
.composer {
  opacity: 0;

  pointer-events: none;
}



/* ==================================================
   INPUT
================================================== */

.composer input {
  position: absolute;

  left: 45px;

  top: 0;

  width: 875px;

  height: 149px;

  padding: 0;

  border: 0;

  outline: 0;

  background: transparent;

  color: #000000;

  font-size: 54px;

  line-height: 1;
}


.composer input::placeholder {
  color: #a4a4a4;

  opacity: 1;
}



/* ==================================================
   SEARCH BUTTON
================================================== */

.search-button {
  position: absolute;

  right: 31px;

  top: 36px;

  width: 82px;

  height: 82px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  border: 0;

  background: transparent;

  color: #000000;

  cursor: pointer;
}



/* ==================================================
   SEARCH ICON
================================================== */

.search-icon {
  display: block;

  width: 82px;

  height: 82px;

  overflow: visible;
}


.search-icon circle,
.search-icon line {
  fill: none;

  stroke:
    currentColor;

  stroke-width: 3;

  stroke-linecap: round;

  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}



/* ==================================================
   KLEINER TEXT UNTEN
================================================== */

.chat-note {
  position: absolute;

  z-index: 60;

  left: 0;

  bottom: 20px;

  width: 100%;

  margin: 0;

  color:
    rgba(
      0,
      0,
      0,
      0.35
    );

  text-align: center;

  font-size: 18px;

  line-height: 1;
}



/* ==================================================
   ASCII BILD / WELTKUGEL

   Etwas auffälligere Bewegung:
   - stärkere Drehung
   - leichte vertikale Bewegung
   - schnellerer Zyklus
================================================== */

.ascii-image {
  position: absolute;

  z-index: 2;

  right: 0;

  top: 313px;

  width: 3970px;

  height: 2531px;

  object-fit: fill;

  mix-blend-mode: multiply;

  pointer-events: none;

  transform-origin:
    50%
    50%;

  animation:
    earthRotation
    18s
    ease-in-out
    infinite;

  will-change: transform;

  backface-visibility: hidden;
}



/* ==================================================
   AUFFÄLLIGERE ERDROTATION

   Das flache PNG bewegt sich zwischen
   -13° und +13° um die vertikale Achse.

   Zusätzlich bewegt es sich leicht nach
   oben und unten.
================================================== */

@keyframes earthRotation {

  0% {
    transform:
      perspective(7000px)
      rotateY(-13deg)
      translateY(0);
  }


  25% {
    transform:
      perspective(7000px)
      rotateY(-5deg)
      translateY(-14px);
  }


  50% {
    transform:
      perspective(7000px)
      rotateY(13deg)
      translateY(0);
  }


  75% {
    transform:
      perspective(7000px)
      rotateY(5deg)
      translateY(14px);
  }


  100% {
    transform:
      perspective(7000px)
      rotateY(-13deg)
      translateY(0);
  }

}



/* ==================================================
   DARK MODE
================================================== */

body.dark
.ascii-image {
  filter: invert(1);

  mix-blend-mode: screen;
}


body.dark
.chat-note {
  color:
    rgba(
      255,
      255,
      255,
      0.35
    );
}



/* ==================================================
   DEKONSTRUKTIONS-EBENE
================================================== */

.deconstruction-layer {
  position: absolute;

  z-index: 100;

  inset: 0;

  overflow: hidden;

  pointer-events: auto;
}



/* ==================================================
   DEKONSTRUKTIONS-ELEMENTE
================================================== */

.deconstruction-piece {
  position: absolute;

  margin: 0;

  will-change: transform;

  backface-visibility: hidden;
}



/* ==================================================
   FALLANIMATION
================================================== */

.deconstruction-piece.is-falling {
  animation:
    controlledFall
    2s
    cubic-bezier(
      0.18,
      0.74,
      0.18,
      1
    )
    forwards;
}


@keyframes controlledFall {

  from {
    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(0deg);
  }


  to {
    transform:
      translate3d(
        var(--dx),
        var(--dy),
        0
      )
      rotate(
        var(--rotation)
      );
  }

}



/* ==================================================
   REDUCED MOTION
================================================== */

@media
(prefers-reduced-motion: reduce) {

  .deconstruction-piece.is-falling {
    animation-duration: 1ms;
  }


  .ascii-image {
    animation: none;
  }

}


body {
  opacity: 0;
  transition: opacity 0.5s;
}