@property --orb-c1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #9fcc28;
}

@property --orb-c2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #00a861;
}

@property --orb-c3 {
  syntax: "<color>";
  inherits: true;
  initial-value: #1c8267;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Geist, ui-sans-serif, system-ui, sans-serif;
  background: radial-gradient(ellipse at bottom left, #00a861 0%, #0d002e 55%);
}

diorit-logo {
  display: inline-flex;
  height: var(--diorit-logo-h, 120px);
  width: var(--diorit-logo-w, auto);
  max-width: 100%;
  line-height: 0;
}

diorit-logo[data-hero] {
  --diorit-logo-h: 120px;
}

diorit-logo svg,
diorit-logo [data-diorit-logo] {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  overflow: visible;
  cursor: pointer;
}

[data-diorit-orb] {
  --orb-c1: #9fcc28;
  --orb-c2: #00a861;
  --orb-c3: #1c8267;
  transition:
    --orb-c1 0.25s ease,
    --orb-c2 0.25s ease,
    --orb-c3 0.25s ease;
}

.diorit-orb-stop-1 {
  stop-color: var(--orb-c1);
}

.diorit-orb-stop-2 {
  stop-color: var(--orb-c2);
}

.diorit-orb-stop-3 {
  stop-color: var(--orb-c3);
}

[data-diorit-orb][data-mood="curious"] {
  --orb-c1: #d4f06a;
  --orb-c2: #14c978;
  --orb-c3: #1a9a6a;
}

[data-diorit-orb][data-mood="happy"] {
  --orb-c1: #f2f76a;
  --orb-c2: #b8e03a;
  --orb-c3: #00a861;
}

[data-diorit-orb][data-mood="sleepy"] {
  --orb-c1: #6fa84a;
  --orb-c2: #1c8267;
  --orb-c3: #0a4f44;
}

[data-diorit-orb][data-expression="notr"],
[data-diorit-orb][data-expression="uzgun"] {
  --orb-c1: #fff200;
  --orb-c2: #f7ce19;
  --orb-c3: #e5aa52;
}

[data-diorit-orb][data-expression="kizgin"] {
  --orb-c1: #ffb668;
  --orb-c2: #ff6a24;
  --orb-c3: #ff3900;
}

.diorit-orb-stop {
  transition: stop-color 0.25s ease;
}

.diorit-orb-bounce {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.4, 1);
}

.diorit-orb-bounce.is-hopping {
  animation: diorit-hop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.diorit-orb-bounce.is-squished {
  transform: scale(1.045, 0.9);
}

.diorit-orb-bounce.is-swaying {
  animation: diorit-sway 1.5s ease-in-out infinite;
}

.diorit-eye {
  transform-box: fill-box;
  transform-origin: center;
}

.diorit-eye .shape {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.18s ease;
}

.diorit-eye[data-shape="circle"] .shape-circle,
.diorit-eye[data-shape="star"] .shape-star,
.diorit-eye[data-shape="pill"] .shape-pill,
.diorit-eye[data-shape="smile"] .shape-smile {
  opacity: 1;
}

[data-diorit-orb].is-blinking .diorit-eye .shape {
  animation: diorit-blink 0.16s ease-in-out;
}

[data-diorit-orb].is-blinking-double .diorit-eye .shape {
  animation: diorit-blink-double 0.38s ease-in-out;
}

.emotion-bar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 20;
  display: flex;
  max-width: calc(100% - 2rem);
  transform: translateX(-50%);
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(255 255 255 / 0.1);
  padding: 0.375rem;
  backdrop-filter: blur(12px);
}

.emotion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f7f4ee;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.7rem 1rem;
  white-space: nowrap;
  text-align: center;
}

.emotion-btn:hover {
  background: rgb(255 255 255 / 0.12);
}

.emotion-btn.is-active {
  background: #f7f4ee;
  color: #0d002e;
}

@keyframes diorit-blink {
  0%,
  100% {
    transform: scaleY(1);
  }
  45%,
  55% {
    transform: scaleY(0.08);
  }
}

@keyframes diorit-blink-double {
  0%,
  100% {
    transform: scaleY(1);
  }
  12% {
    transform: scaleY(0.08);
  }
  28% {
    transform: scaleY(1);
  }
  44% {
    transform: scaleY(0.08);
  }
  60% {
    transform: scaleY(1);
  }
}

@keyframes diorit-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

@keyframes diorit-hop {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  32% {
    transform: translateY(-12px) scale(0.96, 1.07);
  }
  52% {
    transform: translateY(0) scale(1.07, 0.93);
  }
  72% {
    transform: translateY(-4px) scale(0.99, 1.02);
  }
}

@media (max-width: 640px) {
  diorit-logo[data-hero] {
    --diorit-logo-h: auto;
    --diorit-logo-w: calc(100vw - 3rem);
    width: calc(100vw - 3rem);
    height: auto;
  }

  diorit-logo[data-hero] svg,
  diorit-logo[data-hero] [data-diorit-logo] {
    width: 100%;
    height: auto;
  }

  .emotion-bar {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);
    gap: 0.2rem;
    border-radius: 1.25rem;
    padding: 0.3rem;
  }

  .emotion-btn {
    width: 100%;
    padding: 0.55rem 0.2rem;
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diorit-orb-bounce,
  .diorit-orb-bounce.is-hopping,
  .diorit-orb-bounce.is-squished,
  .diorit-orb-bounce.is-swaying,
  [data-diorit-orb].is-blinking .diorit-eye .shape,
  [data-diorit-orb].is-blinking-double .diorit-eye .shape,
  .diorit-orb-stop,
  .diorit-eye .shape {
    animation: none;
    transition: none;
  }

  .diorit-orb-bounce.is-squished {
    transform: none;
  }
}