/* Arvæv: the pillar page. Its centrepiece is the layers, drawn: skin, fascia
   and muscle gliding past each other, and the same three held by a scar. */

.arv-what-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.arv-what-grid h2 { margin-bottom: 22px; }

.layers { margin: 0; display: grid; gap: 22px; }
.layer-set { position: relative; display: grid; gap: 7px; padding: 26px 26px 22px; border-radius: 26px; background: var(--esp-2); box-shadow: inset 0 0 0 1px rgba(227, 161, 90, .16); overflow: hidden; }
.ly { position: relative; display: flex; align-items: center; height: 38px; padding-left: 14px; border-radius: 14px; width: 86%; }
.ly-skin { background: linear-gradient(90deg, #E7C9AE, #D9AE8E); }
.ly-fascia { background: linear-gradient(90deg, #EEDFC9, #D8C2A2); margin-left: 7%; }
.ly-muscle { background: linear-gradient(90deg, #B5654A, #8E4632); margin-left: 3%; }
.ly-name { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: rgba(42, 29, 21, .78); }
.ly-muscle .ly-name { color: rgba(253, 244, 232, .9); }
.ly-cap { margin-top: 10px; font-family: var(--serif); font-size: 1.15rem; color: var(--cream); }

/* gliding: each layer slides on its own breath */
.free .ly-skin { animation: glide-a 6s ease-in-out infinite alternate; }
.free .ly-fascia { animation: glide-b 7.5s ease-in-out infinite alternate; }
.free .ly-muscle { animation: glide-a 9s ease-in-out infinite alternate-reverse; }
@keyframes glide-a { from { translate: -5% 0; } to { translate: 5% 0; } }
@keyframes glide-b { from { translate: 4% 0; } to { translate: -4% 0; } }

/* bound: a scar runs down through all three, and they move as one block */
.bound .ly { animation: glide-block 6s ease-in-out infinite alternate; }
.bound .seam { position: absolute; left: 52%; top: 20px; height: 136px; width: 6px; border-radius: 4px; background: linear-gradient(180deg, #F6D9B6, var(--ember) 45%, #9E5439); box-shadow: 0 0 0 3px rgba(227, 161, 90, .2), 0 0 24px rgba(227, 161, 90, .5); animation: glide-block 6s ease-in-out infinite alternate; }
@keyframes glide-block { from { translate: -1.5% 0; } to { translate: 1.5% 0; } }

.arv-quote { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(24px, 4vw, 48px); }
.arv-intro { margin-top: 16px; max-width: 58ch; color: var(--cream-2); font-size: 1.08rem; }

/* three kinds of scar, each a door to its own page */
.scar-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.scar-card { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: 28px; overflow: hidden; background: var(--esp-2); color: var(--cream); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(227, 161, 90, .14), 0 40px 80px -44px rgba(0, 0, 0, .9); transition: box-shadow .5s var(--ease), translate .5s var(--ease); }
.sc-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: transform 1.4s var(--ease), filter .6s; }
.sc-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; }
.sc-words { font-size: .9rem; font-weight: 600; color: var(--latte); }
.sc-title { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.12; }
.sc-text { color: var(--cream-2); }
.sc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--ember-hi); }
.sc-more::after { content: ''; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: translate .3s var(--ease); }
.scar-card:hover { translate: 0 -4px; box-shadow: 0 0 0 1.5px rgba(227, 161, 90, .55), 0 40px 90px -36px rgba(227, 161, 90, .45); }
.scar-card:hover img { transform: scale(1.04); filter: brightness(.96); }
.scar-card:hover .sc-more::after { translate: 4px 0; }

.arv-chat { margin-top: 30px; }
#forskning .creds-line { margin-top: 30px; justify-content: flex-start; }

@media (max-width: 960px) {
  .arv-what-grid { grid-template-columns: 1fr; }
  .scar-cards { grid-template-columns: 1fr; }
  .sc-img { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .free .ly, .bound .ly, .bound .seam { animation: none; }
  .scar-card, .sc-img img { transition: none; }
}