/* Storefront language switch — Apple Intelligence / Siri-style edge glow.
   The effect lives only on the viewport edges (a soft luminous border that
   breathes inward), never a full-screen wash. Uses the merchant store theme. */

.sf-i18n-edge {
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.34s ease;
}

.sf-i18n-edge.is-active {
  opacity: 1;
}

/* Inner luminous border that hugs the four edges and breathes toward center. */
.sf-i18n-edge__ring {
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow:
    inset 0 0 14px 1px color-mix(in srgb, var(--store-accent, #0f766e) 55%, transparent),
    inset 0 0 48px 8px color-mix(in srgb, var(--store-accent, #0f766e) 28%, transparent),
    inset 0 0 120px 26px color-mix(in srgb, var(--store-primary, var(--store-accent, #0f766e)) 12%, transparent);
  animation: sf-i18n-edge-breathe 1.5s ease-in-out infinite;
}

/* Multicolor gradient shimmer, masked to a soft band around the edges only. */
.sf-i18n-edge__aura {
  position: absolute;
  inset: 0;
  padding: 3px;
  background: conic-gradient(
    from 140deg,
    color-mix(in srgb, var(--store-accent, #0f766e) 70%, transparent),
    color-mix(in srgb, var(--store-accent-bright, var(--store-accent, #14b8a6)) 70%, transparent),
    color-mix(in srgb, var(--store-primary, var(--store-accent, #0f766e)) 60%, transparent),
    color-mix(in srgb, var(--store-accent, #0f766e) 70%, transparent)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(7px);
  opacity: 0.85;
  animation: sf-i18n-edge-shimmer 2.4s ease-in-out infinite;
}

.sf-i18n-edge.is-active .sf-i18n-edge__aura {
  animation-duration: 1.5s;
}

.sf-i18n-edge.is-active .sf-i18n-edge__ring {
  animation-duration: 1.05s;
}

/* Corners left in the markup for older builds — folded into the edge glow. */
.sf-i18n-edge__corner {
  display: none;
}

@keyframes sf-i18n-edge-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 0 12px 1px color-mix(in srgb, var(--store-accent, #0f766e) 48%, transparent),
      inset 0 0 40px 6px color-mix(in srgb, var(--store-accent, #0f766e) 22%, transparent),
      inset 0 0 100px 20px color-mix(in srgb, var(--store-primary, var(--store-accent, #0f766e)) 10%, transparent);
  }
  50% {
    box-shadow:
      inset 0 0 18px 2px color-mix(in srgb, var(--store-accent, #0f766e) 70%, transparent),
      inset 0 0 62px 12px color-mix(in srgb, var(--store-accent, #0f766e) 34%, transparent),
      inset 0 0 150px 34px color-mix(in srgb, var(--store-primary, var(--store-accent, #0f766e)) 16%, transparent);
  }
}

@keyframes sf-i18n-edge-shimmer {
  0%,
  100% {
    opacity: 0.6;
    filter: blur(7px) hue-rotate(-22deg) brightness(1);
  }
  50% {
    opacity: 1;
    filter: blur(9px) hue-rotate(22deg) brightness(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-i18n-edge__aura,
  .sf-i18n-edge__ring {
    animation: none !important;
  }
}