/* =========================
   PREMIUM ENHANCEMENTS LAYER
========================= */
:root {
  --wolf-ring-color: rgba(245, 245, 245, 0.72);
  --wolf-ring-blend: difference;
  --wolf-hover-border: color-mix(in srgb, var(--main-color) 70%, #fff);
  --wolf-hover-strong-border: color-mix(in srgb, var(--main-color) 82%, #fff);
  --wolf-hover-shadow: 0 0 0.65rem
    color-mix(in srgb, var(--main-color) 60%, transparent);
  --wolf-hover-strong-shadow: 0 0 0.95rem
    color-mix(in srgb, var(--main-color) 78%, transparent);
  --wolf-core-shadow: drop-shadow(0 0 0.28rem rgba(255, 255, 255, 0.28));
  --wolf-ring-size: 3.8rem;
}

body.light {
  --wolf-ring-color: rgba(20, 26, 40, 0.62);
  --wolf-ring-blend: normal;
  --wolf-hover-border: color-mix(in srgb, var(--main-color) 72%, #111);
  --wolf-hover-strong-border: color-mix(in srgb, var(--main-color) 84%, #111);
  --wolf-hover-shadow: 0 0 0.65rem
    color-mix(in srgb, var(--main-color) 46%, transparent);
  --wolf-hover-strong-shadow: 0 0 0.95rem
    color-mix(in srgb, var(--main-color) 58%, transparent);
  --wolf-core-shadow: drop-shadow(0 0 0.34rem rgba(0, 0, 0, 0.28));
}

header {
  background: color-mix(in srgb, var(--bg-color) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--main-color) 12%, transparent);
  border-radius: 1.2rem;
  margin: 0.9rem clamp(0.8rem, 2vw, 1.8rem) 0;
}

/* =========================
   PREMIUM BUTTON SYNC
========================= */
:root {
  --btn-grad-a: #6b1fb5;
  --btn-grad-b: #3f2eb8;
  --btn-grad-c: #1c2d8c;
  --btn-text: #ffffff;
  --btn-border: color-mix(in srgb, var(--main-color) 48%, #1a226a);
  --btn-glow: 0 0 1rem color-mix(in srgb, #5038c7 56%, transparent);
}

body.light {
  --btn-text: #ffffff;
  --btn-border: color-mix(in srgb, var(--main-color) 42%, #2a3c8f);
  --btn-glow: 0 0 0.8rem color-mix(in srgb, #4f3ac4 42%, transparent);
}

.btn,
.btn-small,
.dw-ai-form button,
.dw-ai-close,
.dw-ai-mic,
.services-swiper-prev,
.services-swiper-next,
.lightbox-close,
.lightbox-prev,
.lightbox-next,
.ios-btn,
button[type="submit"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  background: linear-gradient(
    130deg,
    var(--btn-grad-a),
    var(--btn-grad-b),
    var(--btn-grad-c)
  );
  background-size: 220% 220%;
  box-shadow: var(--btn-glow);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease,
    background-position 0.4s ease;
}

/* Power style: AI send button */
.dw-ai-form button {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  animation: ai-send-gradient-flow 2.8s linear infinite;
}

.dw-ai-form button::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, #8f66ff 60%, transparent);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 1rem color-mix(in srgb, #6d53ff 52%, transparent);
  transition: opacity 0.22s ease;
}

.dw-ai-form button:hover::after {
  opacity: 1;
}

@keyframes ai-send-gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn::before,
.btn-small::before,
.dw-ai-form button::before,
.dw-ai-close::before,
.dw-ai-mic::before,
.services-swiper-prev::before,
.services-swiper-next::before,
.lightbox-close::before,
.lightbox-prev::before,
.lightbox-next::before,
.ios-btn::before,
button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: -140% -35%;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, 0.2) 48%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.2) 52%,
    transparent 68%
  );
  transform: translateX(-135%) rotate(11deg);
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: -1;
}

.btn:hover,
.btn-small:hover,
.dw-ai-form button:hover,
.dw-ai-close:hover,
.dw-ai-mic:hover,
.services-swiper-prev:hover,
.services-swiper-next:hover,
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.ios-btn:hover,
button[type="submit"]:hover {
  transform: translateY(-0.16rem);
  filter: saturate(1.08);
  box-shadow:
    var(--btn-glow),
    0 0.45rem 1.3rem rgba(0, 0, 0, 0.2);
  background-position: 100% 50%;
}

.btn:hover::before,
.btn-small:hover::before,
.dw-ai-form button:hover::before,
.dw-ai-close:hover::before,
.dw-ai-mic:hover::before,
.services-swiper-prev:hover::before,
.services-swiper-next:hover::before,
.lightbox-close:hover::before,
.lightbox-prev:hover::before,
.lightbox-next:hover::before,
.ios-btn:hover::before,
button[type="submit"]:hover::before {
  transform: translateX(140%) rotate(11deg);
}

/* Resume keeps outlined style but synced premium effects */
.resume-box .resume-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--second-bg-color) 78%, transparent);
  border: 0.2rem solid
    color-mix(in srgb, var(--main-color) 34%, var(--second-bg-color));
  color: var(--white-color);
  box-shadow: inset 0 0 0 transparent;
  transition:
    border-color 0.26s ease,
    box-shadow 0.26s ease,
    transform 0.22s ease,
    color 0.22s ease;
}

.resume-box .resume-btn::before {
  content: "";
  position: absolute;
  inset: -140% -30%;
  background: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, var(--main-color) 45%, #fff) 49%,
    color-mix(in srgb, var(--main-color) 25%, #fff) 50%,
    color-mix(in srgb, var(--main-color) 45%, #fff) 51%,
    transparent 65%
  );
  transform: translateX(-138%) rotate(10deg);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.resume-box .resume-btn:hover {
  transform: translateY(-0.12rem);
  border-color: color-mix(in srgb, var(--main-color) 72%, #fff);
  box-shadow: 0 0 0.95rem color-mix(in srgb, var(--main-color) 42%, transparent);
}

.resume-box .resume-btn:hover::before,
.resume-box .resume-btn.active::before {
  transform: translateX(140%) rotate(10deg);
}

.resume-box .resume-btn.active {
  border-color: var(--main-color);
  color: var(--main-color);
  box-shadow:
    0 0 1rem color-mix(in srgb, var(--main-color) 38%, transparent),
    inset 0 0 0.9rem color-mix(in srgb, var(--main-color) 12%, transparent);
}

/* Wolf ring cursor (desktop only) */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }

  a,
  button,
  input,
  textarea,
  [role="button"],
  .btn,
  .sci a,
  .dw-ai-fab,
  .resume-btn {
    cursor: none;
  }

  .wolf-cursor,
  .wolf-cursor-core,
  .wolf-cursor-ring {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 2147483647;
    will-change: transform, opacity, filter;
  }

  .wolf-cursor {
    transform: translate3d(0, 0, 0);
    mix-blend-mode: normal;
  }

  .wolf-cursor-ring {
    width: var(--wolf-ring-size);
    height: var(--wolf-ring-size);
    border-radius: 50%;
    border: 1px solid var(--wolf-ring-color);
    transform: translate3d(-9999px, -9999px, 0);
    margin-left: calc(var(--wolf-ring-size) * -0.5);
    margin-top: calc(var(--wolf-ring-size) * -0.5);
    mix-blend-mode: var(--wolf-ring-blend);
    transition:
      transform 0.08s linear,
      scale 0.1s linear,
      border-color 0.12s linear,
      opacity 0.12s linear,
      box-shadow 0.12s linear;
  }

  .wolf-cursor-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed transparent;
    animation: wolf-ring-rotate 1.2s linear infinite;
    animation-play-state: paused;
  }

  .wolf-cursor-core {
    width: 1.85rem;
    height: 1.85rem;
    transform: translate3d(-9999px, -9999px, 0);
    margin-left: -0.925rem;
    margin-top: -0.925rem;
    mix-blend-mode: normal;
    transition:
      opacity 0.1s linear,
      transform 0.1s linear,
      scale 0.1s linear;
  }

  .wolf-cursor-core img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: var(--wolf-core-shadow);
  }

  .wolf-cursor.hover .wolf-cursor-ring {
    scale: 1.42;
    border-color: var(--wolf-hover-border);
    box-shadow: var(--wolf-hover-shadow);
  }

  .wolf-cursor.hover-strong .wolf-cursor-ring {
    scale: 1.75;
    border-color: var(--wolf-hover-strong-border);
    box-shadow: var(--wolf-hover-strong-shadow);
  }

  .wolf-cursor.hover .wolf-cursor-ring::before {
    border-color: color-mix(in srgb, var(--main-color) 68%, #fff);
    animation-play-state: running;
  }

  .wolf-cursor.hover .wolf-cursor-core {
    opacity: 0.96;
  }

  .wolf-cursor.hover-strong .wolf-cursor-core {
    scale: 1.08;
    opacity: 1;
  }

  .wolf-cursor.click .wolf-cursor-ring {
    scale: 1.22;
  }

  .wolf-cursor.click .wolf-cursor-core {
    scale: 0.9;
  }

  @keyframes wolf-ring-rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

/* Bento grid enhancement (resume skills) */
@media (min-width: 1100px) {
  .resume-details.skill .resume-list.skill-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.4rem;
  }

  .resume-details.skill .resume-list.skill-grid .resume-item {
    grid-column: span 3;
  }

  .resume-details.skill .resume-list.skill-grid .resume-item:nth-child(1),
  .resume-details.skill .resume-list.skill-grid .resume-item:nth-child(5),
  .resume-details.skill .resume-list.skill-grid .resume-item:nth-child(10) {
    grid-column: span 6;
  }
}

.dw-ai-mic {
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--main-color) 65%, transparent);
  background: color-mix(in srgb, var(--main-color) 22%, transparent);
  color: var(--white-color);
  font-size: 1.45rem;
  padding: 0.7rem 0.95rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.dw-ai-mic:hover {
  transform: translateY(-0.08rem);
  box-shadow: 0 0 0.8rem color-mix(in srgb, var(--main-color) 60%, transparent);
}

.dw-ai-mic.active {
  background: color-mix(in srgb, #ff4d7a 68%, transparent);
  border-color: #ff8fac;
  box-shadow: 0 0 0.9rem rgba(255, 77, 122, 0.5);
}