/* Skirbo identity 01: primary lowercase wordmark, 5-second colour movement. */
:root {
  --sk-brand-primary: #6366f1;
  --sk-brand-highlight: #818cf8;
  --sk-brand-secondary: #a855f7;
  --sk-brand-tempo: 5s;
}

.sk-brand-logo {
  position: relative;
  display: block;
  width: 104px;
  aspect-ratio: 1966 / 541;
  overflow: hidden;
  isolation: isolate;
  background: var(--sk-brand-primary);
  -webkit-mask: url('/images/brand/skirbo-wordmark-v2.svg') center / contain no-repeat;
  mask: url('/images/brand/skirbo-wordmark-v2.svg') center / contain no-repeat;
  mask-mode: alpha;
}

.sk-brand-fill,
.sk-brand-satin {
  position: absolute;
  display: block;
  inset: 0;
  pointer-events: none;
}

.sk-brand-fill {
  background: linear-gradient(110deg, #6366f1 8%, #818cf8 27%, #a855f7 48%, #6366f1 70%, #818cf8 90%);
  background-size: 250% 200%;
  animation: sk-brand-flow var(--sk-brand-tempo) ease-in-out infinite;
}

/* A dedicated layer leaves every underlying colour treatment intact. */
.sk-brand-satin {
  z-index: 2;
  inset: -10% -130%;
  background: linear-gradient(110deg, transparent 39%, rgba(226,232,240,.15) 45%, rgba(255,255,255,.85) 50%, rgba(226,232,240,.15) 55%, transparent 61%);
  opacity: 0;
  transform: translateX(-40%);
}

.header-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  line-height: 1;
  background: none;
  -webkit-text-fill-color: currentColor;
  letter-spacing: normal;
}

.header-logo:focus-visible {
  outline: 2px solid var(--sk-brand-highlight);
  outline-offset: 4px;
  border-radius: 4px;
}

.logo-text .sk-brand-logo { width: 176px; margin: 0 auto; }
.sk-brand-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Shared styling also covers the dynamically created cookie buttons. */
:is(button, .cta-btn, .cta-btn-sm, .header-cta, .support-button, .cta-telegram, .action-btn, .form-submit) {
  isolation: isolate;
  overflow: hidden;
}

:is(button, .cta-btn, .cta-btn-sm, .header-cta, .support-button, .cta-telegram, .action-btn, .form-submit):not(.support-launcher) {
  position: relative;
}

:is(button, .cta-btn, .cta-btn-sm, .header-cta, .support-button, .cta-telegram, .action-btn, .form-submit)::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: -10% -130%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 41%, rgba(255,255,255,.07) 46%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.07) 54%, transparent 59%);
  opacity: 0;
  transform: translateX(-40%);
}

@keyframes sk-brand-flow {
  0%, 100% { background-position: 0% 40%; }
  50% { background-position: 100% 65%; }
}

@keyframes sk-satin-hover {
  0% { transform: translateX(-40%); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(40%); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
  :is(.header-logo, .logo-text):hover .sk-brand-satin {
    animation: sk-satin-hover 1.1s cubic-bezier(.2,.55,.35,1) both;
  }
  :is(button, .cta-btn, .cta-btn-sm, .header-cta, .support-button, .cta-telegram, .action-btn, .form-submit):not(:disabled):not([aria-disabled='true']):hover::after {
    animation: sk-satin-hover 1.1s cubic-bezier(.2,.55,.35,1) both;
  }
}

.header-logo:focus-visible .sk-brand-satin,
:is(button, .cta-btn, .cta-btn-sm, .header-cta, .support-button, .cta-telegram, .action-btn, .form-submit):not(:disabled):not([aria-disabled='true']):focus-visible::after {
  animation: sk-satin-hover 1.1s cubic-bezier(.2,.55,.35,1) both;
}

@media (max-width: 480px) {
  .header-logo .sk-brand-logo { width: 88px; }
  .logo-text .sk-brand-logo { width: 152px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-brand-fill { animation: none; background-position: 45% 50%; }
  .sk-brand-satin,
  :is(button, .cta-btn, .cta-btn-sm, .header-cta, .support-button, .cta-telegram, .action-btn, .form-submit)::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

@media print {
  .sk-brand-fill { animation: none; background: #333d47; }
  .sk-brand-satin { display: none; }
}