/* ЯСНО · design-system (yas.css) Премиальная тёмно-золотая система для лендинга, VPN и UI Kit. Темы переключаются через , шрифты — через data-font. Бренд (имя/логотип) задаётся через assets/brand.js. */ /* ============ ТОКЕНЫ ШРИФТОВ ============ */ :root{ /* по умолчанию — как в базе платформы */ --f-display:"Unbounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",sans-serif; --f-body:"Inter","SF Pro Text",-apple-system,sans-serif; --f-mono:"JetBrains Mono",monospace; } [data-font="inter"] {--f-display:"Inter",sans-serif; --f-body:"Inter",sans-serif} [data-font="unbounded"]{--f-display:"Unbounded",sans-serif; --f-body:"Inter",sans-serif} [data-font="grotesk"] {--f-display:"Space Grotesk",sans-serif; --f-body:"Space Grotesk",sans-serif} [data-font="serif"] {--f-display:"Cormorant Garamond",serif; --f-body:"Inter",sans-serif} [data-font="manrope"] {--f-display:"Manrope",sans-serif; --f-body:"Manrope",sans-serif} [data-font="sora"] {--f-display:"Sora",sans-serif; --f-body:"Sora",sans-serif} [data-font="outfit"] {--f-display:"Outfit",sans-serif; --f-body:"Outfit",sans-serif} [data-font="onest"] {--f-display:"Onest",sans-serif; --f-body:"Onest",sans-serif} [data-font="rubik"] {--f-display:"Rubik",sans-serif; --f-body:"Rubik",sans-serif} /* ============ ТЕМЫ (по умолчанию obsidian+gold) ============ */ :root{ --bg0:#05060a; --bg1:#0a0c14; --bg2:#11131e; --text:#f3eede; --text2:#bcb39c; --muted:#7d7765; --gold:#e8c264; --gold2:#f7e3a6; --gold-deep:#b8902f; --accent:#e8c264; --accent2:#b8902f; --green:#46e2a0; --red:#ff6f8a; --blue:#74c4ff; --violet:#c2acff; --glass:rgba(20,21,30,.55); --glass2:rgba(28,30,42,.6); --bd:rgba(232,194,100,.16); --bd2:rgba(255,255,255,.08); --radius:26px; --radius-sm:16px; --radius-xs:11px; --maxw:1180px; --glow:0 0 60px rgba(232,194,100,.18); --sh:0 30px 80px -30px rgba(0,0,0,.8); } /* Тема «Капитал» — изумруд + золото (деньги) */ [data-theme="capital"]{ --bg0:#040a07; --bg1:#07140d; --bg2:#0c1f15; --gold:#5fe3a6; --gold2:#b8f5d8; --gold-deep:#1f9d6b; --accent:#e8c264; --accent2:#1f9d6b; --bd:rgba(95,227,166,.18); --glow:0 0 60px rgba(95,227,166,.18); } /* Тема «Платина» — графит + холодный металл */ [data-theme="platinum"]{ --bg0:#070809; --bg1:#0e1013; --bg2:#171a1f; --text:#eef1f5; --text2:#aab2bd; --muted:#6c757f; --gold:#cfd8e6; --gold2:#ffffff; --gold-deep:#8b97a8; --accent:#9fd0ff; --accent2:#5a7da8; --bd:rgba(207,216,230,.16); --glow:0 0 60px rgba(159,208,255,.14); } /* Тема «Рубин» — бордо + золото, дорого/премиум */ [data-theme="ruby"]{ --bg0:#0a040a; --bg1:#170610; --bg2:#260a18; --gold:#ffb38a; --gold2:#ffd9c2; --gold-deep:#c2455f; --accent:#e8c264; --accent2:#c2455f; --bd:rgba(255,179,138,.18); --glow:0 0 60px rgba(194,69,95,.2); } /* Тема «Космос» — глубокий синий + фиолет */ [data-theme="space"]{ --bg0:#04050f; --bg1:#0a0c1f; --bg2:#12152e; --gold:#9db4ff; --gold2:#d6e0ff; --gold-deep:#5566c2; --accent:#c2acff; --accent2:#5566c2; --bd:rgba(157,180,255,.16); --glow:0 0 60px rgba(157,180,255,.16); } /* Светлая тема — «Бумага» */ [data-theme="light"]{ --bg0:#f6f3ea; --bg1:#fffdf7; --bg2:#ffffff; --text:#16140d; --text2:#534d3d; --muted:#8a8472; --gold:#b8902f; --gold2:#d6ab43; --gold-deep:#8a6c1e; --accent:#b8902f; --accent2:#8a6c1e; --glass:rgba(255,253,247,.72); --glass2:rgba(248,244,234,.8); --bd:rgba(184,144,47,.22); --bd2:rgba(20,20,20,.07); --glow:0 18px 50px -24px rgba(184,144,47,.4); --sh:0 24px 60px -28px rgba(120,95,30,.35); } /* Тема «Неон» — фиолет + циан (вайбкодинг) */ [data-theme="neon"]{ --bg0:#070612; --bg1:#0c0a1e; --bg2:#15112e; --text:#eef1fb; --text2:#aab2cf; --muted:#727a9c; --gold:#8b6cff; --gold2:#c4b5ff; --gold-deep:#22d3ee; --accent:#22d3ee; --accent2:#8b6cff; --bd:rgba(139,108,255,.22); --glow:0 0 60px rgba(139,108,255,.22); } /* Тема «Кибер» — маджента + циан, дерзко */ [data-theme="cyber"]{ --bg0:#0a0410; --bg1:#15061c; --bg2:#220a2e; --text:#fdeefb; --text2:#cda9cf; --muted:#8a6f8e; --gold:#ff4d9d; --gold2:#ffa6d4; --gold-deep:#3de0ff; --accent:#3de0ff; --accent2:#ff4d9d; --bd:rgba(255,77,157,.22); --glow:0 0 60px rgba(255,77,157,.22); } /* Тема «Матрица» — зелёный код на чёрном */ [data-theme="matrix"]{ --bg0:#03070400; --bg0:#030704; --bg1:#05130a; --bg2:#08200f; --text:#dffbe7; --text2:#8fc7a3; --muted:#5d8a6e; --gold:#3ef07d; --gold2:#b6ffce; --gold-deep:#16a34a; --accent:#9bff5c; --accent2:#16a34a; --bd:rgba(62,240,125,.2); --glow:0 0 60px rgba(62,240,125,.2); } /* Тема «Моно» — спокойный электрик-синий, минимал */ [data-theme="mono"]{ --bg0:#070809; --bg1:#0d0f12; --bg2:#13161b; --text:#eef1f6; --text2:#a7afbd; --muted:#697080; --gold:#5b8cff; --gold2:#a9c2ff; --gold-deep:#3358cc; --accent:#5b8cff; --accent2:#3358cc; --bd:rgba(91,140,255,.18); --glow:0 0 60px rgba(91,140,255,.16); } /* Тема «Закат» — оранж + розовый */ [data-theme="sunset"]{ --bg0:#0d0606; --bg1:#1a0a0a; --bg2:#291210; --gold:#ff9d5c; --gold2:#ffd0a8; --gold-deep:#ff5c7a; --accent:#ff5c7a; --accent2:#ff9d5c; --bd:rgba(255,157,92,.2); --glow:0 0 60px rgba(255,92,122,.2); } /* Тема «Океан» — бирюза + синий */ [data-theme="ocean"]{ --bg0:#03090d; --bg1:#06141c; --bg2:#0a2230; --gold:#34d3e6; --gold2:#a8f0f8; --gold-deep:#1f86d8; --accent:#5ce0c0; --accent2:#1f86d8; --bd:rgba(52,211,230,.2); --glow:0 0 60px rgba(52,211,230,.18); } /* Тема «Роза» — розовый + лавандовый */ [data-theme="rose"]{ --bg0:#0c060b; --bg1:#180a16; --bg2:#261024; --gold:#ff7eb6; --gold2:#ffc2dd; --gold-deep:#b06cff; --accent:#b06cff; --accent2:#ff7eb6; --bd:rgba(255,126,182,.2); --glow:0 0 60px rgba(255,126,182,.2); } /* Тема «Мята» — мятный + бирюза */ [data-theme="mint"]{ --bg0:#040c08; --bg1:#07160f; --bg2:#0c2418; --gold:#6ef0b0; --gold2:#bafce0; --gold-deep:#2bbf8a; --accent:#7fe3d0; --accent2:#2bbf8a; --bd:rgba(110,240,176,.2); --glow:0 0 60px rgba(110,240,176,.18); } /* Тема «Медь» — тёплый металл */ [data-theme="copper"]{ --bg0:#0c0705; --bg1:#170d08; --bg2:#24160d; --gold:#e0915c; --gold2:#f6cfae; --gold-deep:#b5612f; --accent:#e6b07a; --accent2:#b5612f; --bd:rgba(224,145,92,.2); --glow:0 0 60px rgba(224,145,92,.18); } /* Тема «Лёд» — холодный голубой */ [data-theme="ice"]{ --bg0:#060a0e; --bg1:#0b131b; --bg2:#121f2b; --text:#eef4fb; --text2:#a6b6c8; --muted:#69788a; --gold:#8fd4ff; --gold2:#d4ecff; --gold-deep:#5a9fd8; --accent:#a8e0ff; --accent2:#5a9fd8; --bd:rgba(143,212,255,.18); --glow:0 0 60px rgba(143,212,255,.16); } /* ============ БАЗА ============ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--f-body); color:var(--text); background:var(--bg0); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; letter-spacing:-.011em; line-height:1.55; } .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .gold{color:var(--gold)} .grad{background:linear-gradient(120deg,var(--gold2),var(--gold) 40%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent} /* фоновая сцена */ .scene{position:fixed;inset:0;z-index:-2;background: radial-gradient(ellipse at 50% -12%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 46%), radial-gradient(ellipse at 50% 0%,var(--bg2),var(--bg1) 50%,var(--bg0) 100%)} .scene .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen} .orb.o1{width:520px;height:520px;left:-120px;top:-80px;background:radial-gradient(circle,var(--gold),transparent 70%)} .orb.o2{width:480px;height:480px;right:-120px;top:30%;background:radial-gradient(circle,var(--accent2),transparent 70%);opacity:.35} .orb.o3{width:600px;height:600px;left:30%;bottom:-200px;background:radial-gradient(circle,var(--gold-deep),transparent 70%);opacity:.3} .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ============ NAV ============ */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(18px); background:color-mix(in srgb,var(--bg0) 72%,transparent);border-bottom:1px solid var(--bd2);transition:.3s} .nav .wrap{display:flex;align-items:center;gap:28px;height:68px} .brandbox{display:flex;align-items:center;gap:11px;cursor:pointer} .brandbox .mk{width:38px;height:38px;flex:none;display:grid;place-items:center} .brandbox .mk svg{width:38px;height:38px} .brandbox .bt{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1} .brandbox .bt b{color:var(--gold)} .brandbox .bs{font-size:10px;color:var(--text2);letter-spacing:.18em;text-transform:uppercase;margin-top:3px} .nav .links{display:flex;gap:26px;margin-left:8px} .nav .links a{font-size:14px;color:var(--text2);font-weight:500;transition:.2s} .nav .links a:hover{color:var(--text)} .nav .right{margin-left:auto;display:flex;align-items:center;gap:12px} /* ============ КНОПКИ ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:14px; font-family:var(--f-body);font-weight:700;font-size:14.5px;cursor:pointer;border:1px solid transparent;transition:.22s;white-space:nowrap} .btn-g{background:linear-gradient(135deg,var(--gold2),var(--gold) 45%,var(--gold-deep));color:#1a1405; box-shadow:0 14px 34px -10px color-mix(in srgb,var(--gold) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.4)} .btn-g:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px color-mix(in srgb,var(--gold) 70%,transparent)} .btn-o{background:var(--glass);border-color:var(--bd);color:var(--text);backdrop-filter:blur(10px)} .btn-o:hover{border-color:var(--gold);color:var(--gold)} .btn-sm{padding:9px 16px;font-size:13px;border-radius:11px} .btn-lg{padding:16px 30px;font-size:16px;border-radius:16px} /* ============ КАРТОЧКИ / СЕКЦИИ ============ */ section{position:relative;padding:96px 0} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);padding:7px 14px;border:1px solid var(--bd);border-radius:50px; background:color-mix(in srgb,var(--gold) 8%,transparent);margin-bottom:20px} .h-sec{font-size:clamp(30px,4.4vw,52px);margin-bottom:16px} .lead{font-size:clamp(16px,1.7vw,19px);color:var(--text2);max-width:660px;line-height:1.6} .center{text-align:center}.center .lead{margin:0 auto} .card{background:var(--glass);border:1px solid var(--bd2);border-radius:var(--radius);padding:30px; backdrop-filter:blur(14px);box-shadow:var(--sh);transition:.3s;position:relative;overflow:hidden} .card:hover{border-color:var(--bd);transform:translateY(-4px)} .card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,transparent),transparent);border:1px solid var(--bd)} .card .ic svg{width:26px;height:26px;stroke:var(--gold)} .card h3{font-size:20px;margin-bottom:9px} .card p{color:var(--text2);font-size:14.5px;margin:0} .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)} /* HERO */ .hero{padding:150px 0 90px;text-align:center;position:relative} .hero h1{font-size:clamp(40px,7vw,86px);margin-bottom:22px;letter-spacing:-.04em} .hero .lead{margin:0 auto 36px;font-size:clamp(17px,2vw,21px)} .hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .kpis{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:60px} .kpi .v{font-family:var(--f-display);font-size:clamp(28px,4vw,44px);font-weight:800;color:var(--gold)} .kpi .l{font-size:13px;color:var(--text2);margin-top:4px} /* pricing */ .price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .plan{background:var(--glass);border:1px solid var(--bd2);border-radius:var(--radius);padding:32px;position:relative;transition:.3s} .plan.feat{border-color:var(--gold);box-shadow:var(--glow)} .plan .pn{font-size:14px;color:var(--text2);font-weight:700;letter-spacing:.04em} .plan .pp{font-family:var(--f-display);font-size:42px;font-weight:800;margin:10px 0 4px} .plan .pp small{font-size:15px;color:var(--text2);font-weight:500} .plan ul{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px} .plan li{display:flex;gap:10px;font-size:14px;color:var(--text2)} .plan li svg{width:18px;height:18px;stroke:var(--gold);flex:none;margin-top:1px} .badge{position:absolute;top:-12px;right:24px;background:linear-gradient(135deg,var(--gold2),var(--gold-deep)); color:#1a1405;font-size:11px;font-weight:800;padding:5px 12px;border-radius:50px;letter-spacing:.04em} /* footer */ footer{border-top:1px solid var(--bd2);padding:54px 0 40px;margin-top:40px} .foot{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between} .foot a{color:var(--text2);font-size:14px;display:block;margin:9px 0;transition:.2s} .foot a:hover{color:var(--gold)} .foot h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px} /* utility */ .reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:6px 13px;border-radius:50px; border:1px solid var(--bd);color:var(--text2);background:var(--glass)} .divgold{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4;margin:0 auto;max-width:var(--maxw)} @media(max-width:900px){ .nav .links{display:none} .g3,.g4,.price{grid-template-columns:1fr} .g2{grid-template-columns:1fr} section{padding:64px 0} .kpis{gap:26px} } /* ============ ЭФФЕКТЫ ФОНА (мультивыбор · AISU.toggleFx) ============ */ .fxl{position:fixed;inset:0;pointer-events:none;z-index:-1;display:none} .grain{display:none} html.fx-noise .grain{display:block} html.fx-grid .l-grid{display:block;background-image:linear-gradient(var(--bd) 1px,transparent 1px),linear-gradient(90deg,var(--bd) 1px,transparent 1px);background-size:46px 46px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse at 50% -5%,#000,transparent 78%);mask-image:radial-gradient(ellipse at 50% -5%,#000,transparent 78%)} html.fx-dots .l-dots{display:block;background-image:radial-gradient(var(--gold-deep) 1.3px,transparent 1.3px);background-size:30px 30px;opacity:.4;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 82%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 82%)} html.fx-scan .l-scan{display:block;background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);opacity:.6;overflow:hidden} html.fx-scan .l-scan::after{content:'';position:absolute;left:0;right:0;height:160px;top:-160px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold) 16%,transparent),transparent);animation:scanMove 6s linear infinite} @keyframes scanMove{to{top:100%}} html.fx-stars .l-stars{display:block;opacity:.55;background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 70% 60%,#fff,transparent),radial-gradient(1.6px 1.6px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 85% 22%,#fff,transparent),radial-gradient(1.3px 1.3px at 55% 45%,#fff,transparent),radial-gradient(1px 1px at 12% 70%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 80%,#fff,transparent);animation:twinkle 4.5s ease-in-out infinite alternate} @keyframes twinkle{from{opacity:.28}to{opacity:.62}} html.fx-beam .l-beam{display:block;opacity:.75;background:conic-gradient(from 195deg at 50% -8%,transparent,color-mix(in srgb,var(--gold) 12%,transparent),transparent 22%,color-mix(in srgb,var(--accent2) 10%,transparent) 30%,transparent 42%)} html.fx-matrix .l-matrix{display:block;opacity:.5;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--gold) 18%,transparent) 0 1px,transparent 1px 18px);-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 7px,transparent 7px 18px);mask-image:repeating-linear-gradient(180deg,#000 0 7px,transparent 7px 18px);animation:matrixFall 1.1s linear infinite} @keyframes matrixFall{to{background-position-y:18px;-webkit-mask-position-y:18px;mask-position-y:18px}} html.fx-aurora .scene .orb{animation:orbDrift 18s ease-in-out infinite alternate} html.fx-aurora .orb.o2{animation-duration:22s} html.fx-aurora .orb.o3{animation-duration:26s} @keyframes orbDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(46px,34px) scale(1.14)}} html.fx-glow .scene .orb{animation:orbGlow 5s ease-in-out infinite alternate} @keyframes orbGlow{from{opacity:.28;filter:blur(72px)}to{opacity:.6;filter:blur(52px)}} /* ============ ДИКИЕ ЭФФЕКТЫ ============ */ .fxc{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none} html.fx-constellation .fxc,html.fx-warp .fxc,html.fx-codestorm .fxc{display:block} /* Плазма */ html.fx-plasma .l-plasma{display:block;opacity:.45;mix-blend-mode:screen;background:radial-gradient(40% 40% at 22% 30%,var(--gold),transparent 60%),radial-gradient(45% 45% at 80% 38%,var(--accent2),transparent 60%),radial-gradient(50% 50% at 50% 82%,var(--gold-deep),transparent 62%);filter:blur(46px) saturate(170%);animation:plasmaMove 16s ease-in-out infinite alternate,plasmaHue 22s linear infinite} @keyframes plasmaMove{0%{transform:scale(1.25)}50%{transform:scale(1.55) translate(5%,-4%)}100%{transform:scale(1.3) translate(-5%,5%)}} @keyframes plasmaHue{to{filter:blur(46px) saturate(170%) hue-rotate(360deg)}} /* Жидкий градиент (mesh) */ html.fx-mesh .l-mesh{display:block;opacity:.5;background:conic-gradient(from 0deg at 32% 30%,var(--gold),var(--accent2),var(--gold-deep),var(--gold2),var(--gold));filter:blur(74px) saturate(150%);animation:meshSpin 26s linear infinite} @keyframes meshSpin{to{transform:rotate(360deg) scale(1.35)}} /* Грид-тоннель */ html.fx-tunnel .l-tunnel{display:block;background-image:linear-gradient(var(--gold-deep) 1px,transparent 1px),linear-gradient(90deg,var(--gold-deep) 1px,transparent 1px);background-position:50% 45%;-webkit-mask-image:radial-gradient(circle at 50% 45%,transparent 6%,#000 62%);mask-image:radial-gradient(circle at 50% 45%,transparent 6%,#000 62%);animation:tunnelZoom 3.4s linear infinite} @keyframes tunnelZoom{from{background-size:34px 34px;opacity:.12}to{background-size:130px 130px;opacity:.5}} /* Голограмма */ html.fx-holo .l-holo{display:block;opacity:.3;mix-blend-mode:screen;background:repeating-linear-gradient(115deg,rgba(255,40,140,.6),rgba(40,230,255,.6) 7px,rgba(150,60,255,.6) 14px,transparent 14px 26px);background-size:220% 220%;animation:holoShift 7s linear infinite} @keyframes holoShift{to{background-position:220% 0}} /* Северное сияние */ html.fx-aurora2 .l-aurora2{display:block;opacity:.5;mix-blend-mode:screen;background:linear-gradient(100deg,transparent 18%,var(--gold) 38%,var(--accent2) 54%,var(--gold-deep) 70%,transparent 86%);background-size:220% 220%;filter:blur(52px);-webkit-mask-image:linear-gradient(#000,transparent 78%);mask-image:linear-gradient(#000,transparent 78%);animation:auroraWave 13s ease-in-out infinite alternate} @keyframes auroraWave{0%{background-position:0 50%;transform:skewY(-7deg) translateY(-7%)}100%{background-position:100% 50%;transform:skewY(5deg) translateY(5%)}}