/* Storefront language switch — Apple Intelligence-style viewport edge glow (merchant theme) */

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

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

.sf-i18n-edge__aura {
  position: absolute;
  inset: -2px;
  border-radius: 0;
  background: conic-gradient(
    from 210deg,
    color-mix(in srgb, var(--store-accent, #0f766e) 0%, transparent) 0deg,
    color-mix(in srgb, var(--store-accent, #0f766e) 42%, transparent) 72deg,
    color-mix(in srgb, var(--store-primary, var(--store-accent, #0f766e)) 24%, transparent) 144deg,
    color-mix(in srgb, var(--store-accent-bright, var(--store-accent, #14b8a6)) 32%, transparent) 216deg,
    color-mix(in srgb, var(--store-accent, #0f766e) 0%, transparent) 360deg
  );
  filter: blur(14px);
  opacity: 0.72;
  animation: sf-i18n-edge-aura-spin 3.2s linear infinite;
}

.sf-i18n-edge.is-active .sf-i18n-edge__aura {
  opacity: 0.95;
  animation-duration: 1.8s;
}

.sf-i18n-edge__ring {
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--store-accent, #0f766e) 58%, transparent),
    inset 0 0 56px color-mix(in srgb, var(--store-accent, #0f766e) 24%, transparent),
    inset 0 0 140px color-mix(in srgb, var(--store-primary, var(--store-accent, #0f766e)) 14%, transparent),
    0 0 72px color-mix(in srgb, var(--store-accent, #0f766e) 20%, transparent),
    0 0 120px color-mix(in srgb, var(--store-accent-bright, var(--store-accent, #14b8a6)) 10%, transparent);
  animation: sf-i18n-edge-pulse 1.05s ease-in-out infinite;
}

.sf-i18n-edge__corner {
  position: absolute;
  width: clamp(4rem, 22vw, 6.5rem);
  height: clamp(4rem, 22vw, 6.5rem);
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.88;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--store-accent, #0f766e) 62%, transparent),
    transparent 72%
  );
  animation: sf-i18n-edge-corner 1.2s ease-in-out infinite;
}

.sf-i18n-edge__corner--tl { top: -1.25rem; left: -1.25rem; }
.sf-i18n-edge__corner--tr { top: -1.25rem; right: -1.25rem; animation-delay: 0.15s; }
.sf-i18n-edge__corner--bl { bottom: -1.25rem; left: -1.25rem; animation-delay: 0.3s; }
.sf-i18n-edge__corner--br { bottom: -1.25rem; right: -1.25rem; animation-delay: 0.45s; }

html.sf-i18n-edge-active,
html.sf-i18n-edge-active body.storefront-body {
  overflow: clip;
}

@keyframes sf-i18n-edge-aura-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes sf-i18n-edge-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--store-accent, #0f766e) 50%, transparent),
      inset 0 0 44px color-mix(in srgb, var(--store-accent, #0f766e) 20%, transparent),
      0 0 56px color-mix(in srgb, var(--store-accent, #0f766e) 16%, transparent);
  }
  50% {
    filter: brightness(1.1);
    box-shadow:
      inset 0 0 0 3px color-mix(in srgb, var(--store-accent, #0f766e) 68%, transparent),
      inset 0 0 72px color-mix(in srgb, var(--store-accent, #0f766e) 32%, transparent),
      0 0 88px color-mix(in srgb, var(--store-accent, #0f766e) 26%, transparent);
  }
}

@keyframes sf-i18n-edge-corner {
  0%, 100% { opacity: 0.68; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

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