/*
Theme Name: Vik-Vik
Description: Лаконичная тема-сайт про морских свинок
Version: 1.0
Author: Claude
Text Domain: vikvik
*/
:root{
  --ink:#1f3a2e;
  --leaf:#b8d88b;
  --mist:#f1f6ea;
  --orange:#e8923a;
  --brown:#7a4a2b;
  --pink:#f0b3b3;
  --white:#fff;
  --display:'Unbounded','Trebuchet MS',Arial,sans-serif;
  --body:'Nunito','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:18px;line-height:1.65;color:var(--ink);background:var(--mist)}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

/* header */
header{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.logo{font-family:var(--display);font-weight:700;font-size:20px;text-decoration:none}
nav{display:flex;gap:24px;font-weight:700}
nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--orange)}

/* hero */
.hero{background:var(--leaf);border-radius:0 0 48px 48px;padding-bottom:56px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1.08;letter-spacing:-.02em}
.lead{margin-top:22px;max-width:30em;font-size:20px}
.pig-btn{position:relative;background:none;border:0;cursor:pointer;width:100%;padding:0}
.pig-btn svg{width:100%;height:auto;display:block;overflow:visible}
.pig-btn.hop svg{animation:hop .5s ease-out}
.bubble{position:absolute;top:2%;right:8%;background:var(--white);font-family:var(--display);font-weight:500;font-size:18px;padding:10px 18px;border-radius:20px 20px 20px 4px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.pig-btn.hop .bubble{opacity:1;transform:none}
.hint{text-align:center;font-size:15px;margin-top:6px}
.eye{transform-origin:248px 108px;animation:blink 5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-22px) rotate(-2deg)}100%{transform:translateY(0)}}

/* sections */
section{padding:84px 0 0}
h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1.15;margin-bottom:20px}
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:48px}
.two p+p{margin-top:14px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px}
.facts div{padding:4px 28px;border-left:3px solid var(--orange)}
.facts b{display:block;font-family:var(--display);font-size:clamp(24px,3.4vw,34px);line-height:1.2}
.facts span{display:block;margin-top:6px;font-size:16px}

.food{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.box{background:var(--white);border-radius:28px;padding:30px}
.box.big{background:var(--ink);color:var(--white)}
.box h3{font-family:var(--display);font-weight:500;font-size:20px;margin-bottom:12px}
.box ul{list-style:none}
.box li{padding:7px 0;border-bottom:1px solid rgba(31,58,46,.14)}
.box li:last-child{border:0}
.box.big li{border-color:rgba(255,255,255,.2)}

.steps{list-style:none;margin-top:12px}
.steps li{padding:16px 0 16px 44px;border-bottom:1px solid rgba(31,58,46,.15);position:relative}
.steps li::before{content:"";position:absolute;left:4px;top:24px;width:18px;height:18px;border-radius:50%;background:var(--leaf);border:3px solid var(--ink)}

footer{margin-top:96px;background:var(--ink);color:var(--white);padding:40px 0;text-align:center;font-size:16px}
footer b{font-family:var(--display);font-weight:500}

@media (max-width:760px){
  body{font-size:17px}
  nav{gap:14px;font-size:15px}
  .hero .wrap,.two,.food{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:22px}
  section{padding-top:60px}
  .bubble{right:4%}
}
@media (prefers-reduced-motion:reduce){
  .eye,.pig-btn.hop svg{animation:none}
  html{scroll-behavior:auto}
}