/* --- Kurogami hero - perfect circle on desktop, tight ring on mobile --- */

/* Mobile defaults - ring on the video itself */
@media (max-width: 640px) {
  .hero-media .video-circle, .video-circle { display: contents !important; }
  video.hero-video {
    width: 320px !important;
    height: 320px !important;
    border: 2px solid #14f195 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    object-fit: cover !important;
  }
}

/* Desktop - draw ring via wrapper pseudo-element for mathematically perfect circle */
@media (min-width: 641px) {
  .hero-media .video-circle, .video-circle {
    position: relative !important;
    display: block !important;
    width: 560px !important;
    height: 560px !important;
    margin: 0 auto !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .hero-media .video-circle::before,
  .hero-media .video-circle::after,
  .video-circle::before,
  .video-circle::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border: 2px solid #14f195 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Video becomes pure circle with no own border - avoids any oval artifacts */
  video.hero-video {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    transform: none !important;
    perspective: none !important;
    -webkit-appearance: none !important;
  }
}

/* Global cleanups to prevent distortion */
.hero-media .video-circle, .video-circle, video.hero-video {
  outline: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
  box-sizing: border-box !important;
}