/* vanlis.se, Årets Vanlis. Färg, typ och form ur tokens/tokens.json (Palma,
   Pålsjö, pine-900, golden, Epilogue). Själva layouten ligger inline i
   sidorna, så att den kan ritas om i designcanvasen och klistras hit igen. */

:root {
  --palma: #F7F7ED;
  --sand-200: #EDEDDD;
  --sand-300: #DDDCBF;
  --sand-400: #BBB88F;
  --kort: #FFFFFF;
  --kant: #DCDCC8;
  --ink-900: #181A17;
  --ink-800: #2A2D28;
  --ink-700: #4B4E47;
  --ink-500: #6F7268;
  --ink-400: #8F9388;
  --palsjo: #38705E;
  --palsjo-hover: #2F5E4F;
  --palsjo-press: #254A3E;
  --palsjo-soft: #DCE8E3;
  --pine-900: #1F3A31;
  --golden: #D6A764;
  --golden-soft: #F1E1C5;
  --kurva: cubic-bezier(0.2, 0.7, 0.25, 1);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--palma);
  color: var(--ink-800);
  font-family: 'Epilogue', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(56, 112, 94, 0.5);
}
input::placeholder { color: var(--ink-500); }

/* Dölj rullningslisten på galleriet som rullar i sidled */
.rad { scrollbar-width: none; }
.rad::-webkit-scrollbar { display: none; }

/* Entréer: faller upp 16 px, ett steg i taget */
@keyframes upp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.upp { animation: upp 0.8s var(--kurva) both; }
.f1 { animation-delay: 0.1s; }
.f2 { animation-delay: 0.22s; }
.f3 { animation-delay: 0.34s; }
.f4 { animation-delay: 0.46s; }
.f5 { animation-delay: 0.58s; }

/* Långsam zoom på helskärmsfoto */
@keyframes ken { from { transform: scale(1.06); } to { transform: scale(1); } }
.ken { animation: ken 2.4s var(--kurva) both; }

/* Bandet som rullar */
@keyframes tick { to { transform: translateX(-50%); } }
.tick { animation: tick 44s linear infinite; }

/* Kort: lyfter och bilden zoomar */
.kort { transition: transform 0.24s var(--kurva); }
.kort img { transition: transform 0.42s var(--kurva); }
.kort:hover { transform: translateY(-4px); }
.kort:hover img { transform: scale(1.03); }

/* Knappar */
.knapp { transition: background 0.14s, transform 0.14s; }
.knapp:hover { background: var(--palsjo-hover) !important; }
.knapp:active { transform: translateY(1px); }
.ljus { transition: background 0.14s; }
.ljus:hover { background: var(--kort) !important; }
.lank { transition: text-decoration-color 0.14s; }
.lank:hover { text-decoration-color: var(--palsjo) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .upp, .ken, .tick { animation: none; }
  .kort, .kort img { transition: none; }
}