/* Diorit orb karakteri — sadece görsel/animasyon kuralları (sayfa/gövde stilleri hariç).
   Tam sürüm: css/diorit-orb.css (logo.html demosu için). */

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

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

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

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[character] {
  width: var(--diorit-logo-w, var(--diorit-logo-h, 120px));
}

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

[data-diorit-orb] {
  --orb-c1: #f6ffe3;
  --orb-c2: #19aa6d;
  --orb-c3: #03393c;
  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="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"] {
  --orb-c1: #e7e7e7;
  --orb-c2: #aeaeae;
  --orb-c3: #878787;
}

[data-diorit-orb][data-expression="uzgun"] {
  --orb-c1: #ffd900;
  --orb-c2: #f7a307;
  --orb-c3: #f18a14;
}

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

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

.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.03, 0.94);
}

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

.diorit-orb-bounce.is-shaking {
  animation: diorit-shake 0.1s linear 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,
.diorit-eye[data-shape="frown"] .shape-frown {
  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;
}

@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(7deg);
  }
  75% {
    transform: rotate(-7deg);
  }
}

@keyframes diorit-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-0.6px, -1.6px);
  }
  50% {
    transform: translate(0.6px, 1.6px);
  }
  75% {
    transform: translate(-0.6px, -0.8px);
  }
}

@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 (prefers-reduced-motion: reduce) {
  .diorit-orb-bounce,
  .diorit-orb-bounce.is-hopping,
  .diorit-orb-bounce.is-swaying,
  .diorit-orb-bounce.is-shaking,
  [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;
  }
}