/* ─────────────────────────────────────────────────────────────
   SHARED — sergisvk.com component styles
   Shared across all pages via <link rel="stylesheet" href="/css/shared.css">
   Requires css/tokens.css to be loaded first.
   ───────────────────────────────────────────────────────────── */

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
img { display: block; }
* { -webkit-tap-highlight-color: transparent; }

/* ─── BASE ─── */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background-color: var(--bg);
  background-image: var(--noise);
  background-repeat: repeat;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* ─── ICON COLORS ─── */
.icon-on-light              { filter: invert(1); }
html.dark .icon-on-light    { filter: none; }
.icon-on-dark               { filter: none; }
html.dark .icon-on-dark     { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .icon-on-light { filter: none; }
  :root:not(.light) .icon-on-dark  { filter: invert(1); }
}
/* Always white — for icons on colored backgrounds (e.g. CTA accent button) */
.icon-always-white { filter: brightness(0) invert(1); }
.btn-icon img,
.social-strip a img { transition: filter .35s ease; }

/* ─── LAYOUT ─── */
.page {
  display: flex; flex-direction: column; align-items: center;
  padding: 4rem 1.25rem 5rem;
}
.stack {
  width: 100%; max-width: var(--max);
  display: flex; flex-direction: column; gap: 2.5rem;
}

/* ─── FADE-IN STAGGER ─── */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s cubic-bezier(0.2,0,0,1), transform .45s cubic-bezier(0.2,0,0,1);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ─── SECTION ─── */
.section { display: flex; flex-direction: column; gap: .55rem; }

/* ─── SECTION LABEL ─── */
.section-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  padding-bottom: .5rem; margin-bottom: .1rem;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--border) 0%, var(--border) 55%, transparent 100%) 1;
}
html.dark .section-label {
  border-image: linear-gradient(90deg, #3a3a3a 0%, #3a3a3a 55%, transparent 100%) 1;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .section-label {
    border-image: linear-gradient(90deg, #3a3a3a 0%, #3a3a3a 55%, transparent 100%) 1;
  }
}
.section-label svg { opacity: .55; flex-shrink: 0; }
html.dark .section-label svg { opacity: .50; }
.section-note {
  margin-left: auto; font-size: .65rem; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--text-3);
}

/* ─── LINK BUTTON ─── */
.link-btn {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem; background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  position: relative; overflow: hidden;
  transition:
    transform .12s cubic-bezier(0.2,0,0,1),
    box-shadow .12s cubic-bezier(0.2,0,0,1),
    background .18s cubic-bezier(0.2,0,0,1),
    border-left-color .18s cubic-bezier(0.2,0,0,1),
    border-color .35s ease;
}

/* Faint accent pre-tint on the left border for browsers that support color-mix */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .link-btn {
    border-left-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  }
}

.link-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.link-btn:active { transform: translateY(0) scale(.99); box-shadow: none; }

/* ── CTA button — composited pulse ring ── */
.link-btn.cta {
  background: var(--accent); border-color: var(--accent);
  border-left-color: var(--accent); color: var(--accent-fg);
}
.link-btn.cta:hover { filter: brightness(1.07); }

/* Premium CTA gradient + colored shadow (color-mix browsers) */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .link-btn.cta {
    background: linear-gradient(
      155deg,
      color-mix(in srgb, var(--accent) 100%, #fff 14%) 0%,
      var(--accent) 100%
    );
    box-shadow:
      0 1px 0 rgba(255,255,255,0.14) inset,
      0 4px 18px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .link-btn.cta:hover {
    filter: brightness(1.07);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.14) inset,
      0 6px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}

.link-btn.cta::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r);
  border: 2px solid var(--accent);
  animation: cta-ring 2.6s ease infinite;
  pointer-events: none;
}
html.dark .link-btn.cta::after { border-color: var(--accent); }

@keyframes cta-ring {
  0%   { transform: scale(1);     opacity: .55; }
  70%  { transform: scale(1.035); opacity: 0;   }
  100% { transform: scale(1);     opacity: 0;   }
}

.cta-badge {
  font-size: .55rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; background: rgba(255,255,255,.22);
  padding: 2px 6px; border-radius: var(--r-xs); white-space: nowrap;
  flex-shrink: 0; align-self: center;
}
.btn-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm); overflow: hidden;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); transition: background .2s ease;
}
.link-btn.cta .btn-icon { background: rgba(255,255,255,.18); }
.btn-icon img { width: 20px; height: 20px; object-fit: contain; }
.btn-text { flex: 1; font-size: .9rem; font-weight: 500; letter-spacing: -.01em; }
.link-btn.cta .btn-text { font-weight: 600; }
.btn-sup {
  display: block; font-size: .65rem; font-weight: 400; opacity: .65; margin-bottom: 1px;
}
.btn-arrow {
  font-size: 1.1rem; font-weight: 700; opacity: .3; flex-shrink: 0;
  transition: transform .14s cubic-bezier(0.34,1.56,0.64,1), opacity .14s cubic-bezier(0.2,0,0,1), color .18s ease;
  line-height: 1;
}
.link-btn:hover .btn-arrow { transform: translateX(4px); opacity: 1; }
.link-btn.cta .btn-arrow   { opacity: .65; color: var(--accent-fg); }
.link-btn.cta:hover .btn-arrow { opacity: 1; }

/* ─── SOCIAL STRIP ─── */
.social-strip {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap;
  margin-top: .75rem; margin-bottom: .75rem;
  padding: .85rem 0 1.3rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--border) 25%, var(--border) 75%, transparent) 1;
}
.social-strip a {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  transition:
    background .18s cubic-bezier(0.2,0,0,1),
    transform .12s cubic-bezier(0.2,0,0,1),
    border-color .18s cubic-bezier(0.2,0,0,1),
    box-shadow .18s cubic-bezier(0.2,0,0,1);
}
.social-strip a img { width: 17px; height: 17px; object-fit: contain; }
.social-strip a::after {
  content: attr(data-label);
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--text); color: var(--bg);
  font-size: .62rem; font-weight: 600; letter-spacing: .03em;
  white-space: nowrap; padding: 3px 8px; border-radius: 5px;
  opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity .15s ease, transform .15s ease;
}
.social-strip a::before {
  content: ''; position: absolute; top: calc(100% + 2px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 4px solid transparent; border-bottom-color: var(--text);
  opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity .15s ease, transform .15s ease;
}
.social-strip a:hover::after,
.social-strip a:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.social-strip a:hover { transform: translateY(-3px); }

/* ─── BACK BUTTON (shared: privacy, news) ─── */
.back-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--text-2);
  padding: .45rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; align-self: flex-start;
  touch-action: manipulation;
  transition: color .15s ease, background .15s ease, transform .12s ease, box-shadow .12s ease;
}
.back-btn:hover {
  color: var(--text); background: var(--surface-2);
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.back-btn:active { transform: scale(.97); box-shadow: none; }
.back-btn svg { flex-shrink: 0; }

/* ─── FOOTER ─── */
footer {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent) 1;
}
footer p { font-size: .72rem; color: var(--text-3); text-align: center; line-height: 1.9; }
footer a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: var(--text); }
#copy-year { font-variant-numeric: tabular-nums; }

/* ─── SAFE AREA ─── */
.page { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
footer { padding-bottom: env(safe-area-inset-bottom); }

/* ─── MOBILE TOUCH FIXES ─── */
a, button, .link-btn, .social-strip a, .theme-toggle, .lang-toggle {
  touch-action: manipulation;
}
.link-btn:active {
  transform: scale(.97) translateY(0) !important;
  box-shadow: none !important; opacity: .9;
}
.social-strip a:active { transform: scale(.9) !important; opacity: .8; }

/* ─── TAP HINT ─── */
.link-btn .tap-hint {
  font-size: .62rem; font-weight: 600; letter-spacing: .03em;
  white-space: nowrap; opacity: 0; max-width: 0; overflow: hidden;
  transition: opacity .2s ease, max-width .25s ease, color .2s ease;
  flex-shrink: 0;
}
.link-btn.tap-active .tap-hint { opacity: 1; max-width: 120px; }
.link-btn.tap-active { outline: 2px solid var(--tap-color, var(--accent)); outline-offset: 2px; }
.link-btn.tap-active .btn-arrow { transform: translateX(5px); opacity: 1; }
.social-strip a.tap-active {
  outline: 2px solid var(--tap-color, var(--accent));
  outline-offset: 3px; transform: translateY(-3px);
}
.social-strip a.tap-active::after {
  content: attr(data-tap-again);
  opacity: 1; transform: translateX(-50%) translateY(0);
  background: var(--tap-color, var(--accent)); color: #fff;
}
.social-strip a.tap-active::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
  border-bottom-color: var(--tap-color, var(--accent));
}

/* ─── ACCESSIBILITY ─── */
.skip-link {
  position: fixed; top: -100%; left: 50%; transform: translateX(-50%);
  z-index: 999; background: var(--accent); color: var(--accent-fg);
  font-size: .85rem; font-weight: 700; padding: .6rem 1.4rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; transition: top .2s ease; white-space: nowrap;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
.link-btn:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.social-strip a:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 4px; }

/* ─── @KEYFRAMES ─── */
/* Composited pulse — only transform + opacity (no box-shadow) */
@keyframes pulse-ring {
  0%   { transform: scale(.6);  opacity: .7; }
  70%  { transform: scale(2.2); opacity: 0;  }
  100% { transform: scale(.6);  opacity: 0;  }
}

@keyframes sk-shimmer { to { background-position: -200% 0; } }

/* ─── SKELETON LOADER ─── */
.skeleton-section { display: flex; flex-direction: column; gap: .55rem; }
.skeleton-label {
  height: 11px; width: 88px; border-radius: 20px;
  background: var(--surface-2); margin-bottom: .35rem;
}
.skeleton-btn {
  height: 66px; border-radius: var(--r);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--border)    50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
}
.skeleton-btn.sk-cta { height: 66px; }
.skeleton-social {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--border)    50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
  flex-shrink: 0;
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
  .skeleton-btn, .skeleton-social { animation: none; }
}