@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900&display=swap");

/* ==== Reset / Base ==== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:none}
body{
  margin:0;color:#fff;background:#fff;overflow:hidden;
  font-family:'Source Sans Pro',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:300;letter-spacing:-.025em;line-height:1.75;font-size:15pt;
}
a{color:inherit;text-decoration:none;border-bottom:1px dotted;transition:border-color .2s;outline:0}
a:hover{border-color:transparent}
ul,ol{margin:0;padding:0;list-style:none}
:root{color-scheme:dark light}
.icon,.icon::before,.icon>.label{all:unset}

/* ==== Layering ==== */
#bg{z-index:0}
#overlay{z-index:1}
#main{z-index:2}
#wrapper,#bg,#overlay,#main{position:fixed}

/* ==== Wrapper ==== */
@keyframes wrapper-fade{from{opacity:0}to{opacity:1}}
#wrapper{animation:wrapper-fade 3s forwards;inset:0;opacity:0}

/* ==== Moving BG (простая и надёжная версия) ==== */
#bg{
  inset:0; height:100%; width:100%;
  background-color:#348cb2;
  background-image:url("/assets/css/images/bg.jpg");
  background-repeat:repeat-x;
  background-position: left bottom;     /* стартовая позиция */
  background-size:2250px auto;          /* ширина одного «тайла» */

  /* движение за счёт background-position */
  animation: bg-pan 60s linear infinite;
  will-change: background-position;
}
@keyframes bg-pan{
  from { background-position-x: 0; }
  to   { background-position-x: -2250px; } /* сдвиг на ширину тайла */
}

/* ==== Overlay (диагонали + виньетка) ==== */
@keyframes overlay-fade{from{opacity:0}to{opacity:1}}
#overlay{
  animation: overlay-fade 1.5s 1.5s forwards;
  inset:0; opacity:.8;
  background-attachment: fixed, fixed;
  background-image: url("/assets/css/images/overlay-pattern.png"), url("/assets/css/images/overlay.svg");
  background-position: top left, center center;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}
#overlay::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(120% 120% at 50% -10%, transparent 60%, rgba(0,0,0,.22) 100%);
}

/* ==== Main ==== */
#main{inset:0;width:100%;height:100%;text-align:center}
#main::before{content:'';display:inline-block;width:1px;height:100%;vertical-align:middle}

/* ==== Header (glass card) ==== */
#header{
  display:inline-block;vertical-align:middle;width:90%;max-width:clamp(640px,72vw,1100px);
  text-align:center;cursor:default;position:relative;top:-1em;

  background:
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.06)),
    rgba(0,0,0,.35);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:1.75rem 2rem 1.5rem;
  box-shadow:0 12px 36px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.06) inset;

  opacity:0; animation:header-in 1s 2.25s forwards;
}
@keyframes header-in{from{transform:translate3d(0,1em,0);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}
#header h1{
  font-size:clamp(2rem,6vw,4.5rem);font-weight:900;letter-spacing:-.035em;line-height:1.05;margin:0;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
#header>p{font-size:clamp(1rem,2.2vw,1.25rem);margin:.5rem 0 .25rem;opacity:.9}

/* ==== Social ==== */
#header nav{margin-top:1.25rem}
#header nav ul.social{
  --size:3.4rem; --icon:1.45rem; --ring:rgba(255,255,255,.35);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.25rem 0 0;direction:ltr
}
#header nav ul.social li{order:0!important;height:auto!important;width:auto!important;line-height:normal!important}
#header nav ul.social a{
  border:0;color:#fff;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--size);height:var(--size);border-radius:50%;
  border:1px solid var(--ring);
  transition:transform .15s,border-color .2s,background-color .2s,color .2s;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none
}
#header nav ul.social a i{font-size:var(--icon);line-height:1}
#header nav ul.social a:hover,#header nav ul.social a:focus{transform:translateY(-2px);border-color:#fff}

/* подсказка из aria-label */
#header nav ul.social a::after{
  content:attr(aria-label);position:absolute;left:50%;top:calc(100% + 8px);
  transform:translateX(-50%);pointer-events:none;
  padding:.25rem .5rem;border-radius:6px;font-size:.8rem;line-height:1;white-space:nowrap;
  background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.18);
  opacity:0; translate:0 4px; transition:opacity .15s, translate .15s;
}
#header nav ul.social a:hover::after,
#header nav ul.social a:focus-visible::after{opacity:1; translate:0 0}

/* бренды (минимально) */
#header nav ul.social a[aria-label*="Twitter"],
#header nav ul.social a[aria-label*="X"]{--brand:#1da1f2}
#header nav ul.social a[aria-label*="Facebook"]{--brand:#1877f2}
#header nav ul.social a[aria-label*="VK"]{--brand:#0077ff}
#header nav ul.social a[aria-label*="Telegram"]{--brand:#229ed9}
#header nav ul.social a[aria-label*="Medium"]{--brand:#00ab6c}
#header nav ul.social a[aria-label*="Pinterest"]{--brand:#e60023}
#header nav ul.social a[aria-label*="Блог"]{--brand:#ffffff}

#header nav ul.social a:hover,
#header nav ul.social a:focus{
  border-color:var(--brand,#fff);
  background-color:rgba(255,255,255,.18);
  color:var(--brand,#fff);
}

/* ==== Footer — компактный и «отклеенный» ==== */
#footer{
  position:absolute; left:0; right:0; bottom:24px;
  width:100%; height:auto; line-height:1.2; text-align:center; cursor:default; background:none;
}
#footer span{
  display:inline-block; font-size:.9rem; padding:.25rem .6rem; border-radius:10px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
}
@media (max-width:480px){
  #footer{ bottom:16px; }
  #footer span{ font-size:.85rem; padding:.22rem .5rem; }
}

/* ==== Media ==== */
@media screen and (max-width:1680px){
  body{font-size:13pt}
}
@media screen and (max-width:1280px){
  body{font-size:12pt}
}
@media screen and (max-width:736px){
  body{min-width:320px;font-size:11pt}
  #header h1{font-size:clamp(2rem,8vw,2.5rem)}
  #header>p{font-size:1rem}
}
@media screen and (max-width:480px){
  #header nav{padding:0 1em}
  #header nav ul.social{--size:3.6rem; --icon:1.5rem}
}

/* ==== A11y / Motion ==== */
a:focus{outline:2px solid #fff;outline-offset:3px;border-radius:10px}
a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:10px}
#header nav ul.social a:focus{outline:2px solid var(--brand,#fff);border-radius:999px}
#header nav ul.social a:focus-visible{outline:2px solid var(--brand,#fff);border-radius:999px}
@media (prefers-reduced-motion: reduce){
  #bg{animation:none!important}
  #wrapper,#overlay,#header{animation-duration:.01ms!important;animation-iteration-count:1!important}
}