/* r10-kantljuset.html – lyft ur startsektionerna med kalla/sx_in.py (ändra i källan och kör om) */
.r10 { position: relative; padding: var(--sektion) 0; overflow: hidden; }
.r10-huvud { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 24px; align-items: end; }
.r10-huvud > div { grid-column: 1 / span 7; }
.r10-huvud .t-etikett { margin-bottom: 28px; }
.r10-huvud h2 { font-size: clamp(2rem, 1.3rem + 1.8vw, 3.25rem); line-height: 1.02; font-weight: 260; font-variation-settings: "opsz" 72; letter-spacing: -.03em; }
.r10-ingress { grid-column: 9 / span 4; font-size: 1.0625rem; line-height: 1.5; color: var(--is-2); max-width: 30ch; }

/* scenen och hyllan */
.r10-scen { margin-top: 80px; perspective: 1600px; perspective-origin: 50% 30%; }
.r10-hylla { --sb: min(300px, calc((100vw - 2 * var(--marg) - 84px) / 4)); display: flex; justify-content: center; gap: 28px; transform-style: preserve-3d; will-change: transform; }
.r10-plats { position: relative; flex: none; width: var(--sb); transform-style: preserve-3d; }
.r10-plats:nth-child(1) { transform: rotateY(12deg) translateZ(-36px); }
.r10-plats:nth-child(2) { transform: rotateY(4deg); }
.r10-plats:nth-child(3) { transform: rotateY(-4deg); }
.r10-plats:nth-child(4) { transform: rotateY(-12deg) translateZ(-36px); }

/* glasskivan */
.r10-skiva { position: relative; width: 100%; height: calc(var(--sb) * 1.4); border-radius: 4px 4px 0 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(159, 180, 196, .04), rgba(159, 180, 196, .10));
  box-shadow: inset 0 0 0 1px rgba(206, 222, 238, .2), inset 0 1px 0 rgba(238, 243, 250, .38), inset 0 -40px 60px -30px rgba(190, 215, 240, .08);
  transition: filter .5s ease; }
.r10-skiva::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgba(238, 243, 250, 0) 42%, rgba(238, 243, 250, .07) 50%, rgba(238, 243, 250, 0) 58%);
  background-size: 300% 100%; background-position: var(--rx, 30%) 0; }
.r10-skiva::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: linear-gradient(0deg, rgba(190, 215, 240, .11), rgba(190, 215, 240, 0)); }
.r10-skiva.tand::after { opacity: 1; }
.r10-skiva.nara { filter: brightness(1.1); }
/* kantljuset längs sidorna */
.r10-kant { position: absolute; bottom: 0; width: 1px; height: 100%; z-index: 2; pointer-events: none; transform: scaleY(0); transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(214, 234, 255, .8), rgba(214, 234, 255, .18) 55%, rgba(214, 234, 255, 0)); transition: transform .9s var(--ease); }
.r10-kant.v { left: 0; }
.r10-kant.h { right: 0; }
.r10-skiva.tand .r10-kant { transform: none; }

/* graveringen: riktig text, ljusast nertill närmast ljuskällan; bakgrunden är 200 % hög – övre halvan släckt, nedre tänd */
.r10-gravyr { position: absolute; inset: 0; z-index: 1; padding: 28px; display: flex; flex-direction: column; color: transparent;
  background-image: linear-gradient(180deg, rgba(170, 196, 228, .08) 0%, rgba(170, 196, 228, .08) 44%, rgba(178, 202, 232, .8) 52%, rgba(200, 218, 240, .9) 76%, rgba(232, 242, 255, 1) 100%);
  background-size: 100% 200%; background-position: 0 0; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 7px rgba(140, 190, 240, .28)); transition: background-position .9s var(--ease); }
.r10-skiva.tand .r10-gravyr { background-position: 0 100%; }
.r10-gravyr blockquote p { font-size: 22px; line-height: 1.3; font-weight: 320; font-variation-settings: "opsz" 24; letter-spacing: -.008em; text-indent: -.32em; text-wrap: pretty; }
.r10-skiva.lang .r10-gravyr blockquote p { font-size: 17px; line-height: 1.34; }
.r10-skiva.kort .r10-gravyr blockquote p { font-size: 26px; line-height: 1.22; }
.r10-varm { background: var(--varmt-ord); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .25; transition: opacity 1s ease .2s; }
.r10-skiva.tand .r10-varm { opacity: 1; }
.r10-gravyr figcaption { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.r10-gravyr figcaption span { color: transparent; }
.r10-namn { font-size: .9375rem; font-weight: 500; letter-spacing: .01em; }
.r10-utan { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.r10-fem { font-size: 110px; }
.r10-fem small { font-size: .36em; font-weight: 300; letter-spacing: 0; }
.r10-stj { display: flex; gap: 6px; margin-top: 16px; opacity: .12; transition: opacity 1s ease .25s; }
.r10-stj svg { width: 18px; height: 18px; fill: url(#r10-ljus); }
.r10-skiva.tand .r10-stj { opacity: 1; }
.r10-utan p { margin-top: 16px; font-size: .9375rem; }

/* listen i hyllan och ljuslinjen som tänds från vänster */
.r10-list { position: relative; height: 16px; background: #0b1934; box-shadow: inset 0 1px 0 var(--linje); }
.r10-ljus { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(214, 234, 255, .9); box-shadow: 0 0 18px rgba(159, 180, 196, .55), 0 0 4px rgba(214, 234, 255, .7);
  -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%); mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
  -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.r10-list.tand .r10-ljus { -webkit-mask-position: 0 0; mask-position: 0 0; }
.r10-pol { position: absolute; left: 50%; top: 100%; width: 340px; height: 60px; margin: -6px 0 0 -170px; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(closest-side, rgba(159, 180, 196, .10), rgba(159, 180, 196, 0)); }
.r10-plats.tand .r10-pol { opacity: 1; }

.r10-prickar { display: none; }
.r10-mer { margin-top: 88px; display: flex; justify-content: center; }

/* slutläget utan övergångar */
.r10-still .r10-gravyr, .r10-still .r10-kant, .r10-still .r10-varm, .r10-still .r10-stj, .r10-still .r10-pol, .r10-still .r10-skiva::after { transition: none; }

@media (max-width: 1100px) {
  .r10-huvud > div, .r10-ingress { grid-column: 1 / -1; }
  .r10-hylla { gap: 18px; --sb: min(300px, calc((100vw - 2 * var(--marg) - 54px) / 4)); }
  .r10-gravyr { padding: 20px; }
  .r10-gravyr blockquote p { font-size: 17px; }
  .r10-skiva.lang .r10-gravyr blockquote p { font-size: 13.5px; }
  .r10-skiva.kort .r10-gravyr blockquote p { font-size: 20px; }
  .r10-fem { font-size: 76px; }
}
@media (max-width: 760px) {
  .r10-scen { margin: 48px calc(-1 * var(--marg)) 0; perspective: none; }
  .r10-hylla { --sb: 78vw; justify-content: flex-start; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0 var(--marg) 70px; scroll-padding-inline: var(--marg); transform: none !important; transform-style: flat; }
  .r10-hylla::-webkit-scrollbar { display: none; }
  .r10-plats, .r10-plats:nth-child(n) { transform: none; scroll-snap-align: start; transform-style: flat; }
  .r10-skiva { height: auto; min-height: 380px; aspect-ratio: .74; }
  .r10-gravyr { padding: 24px; }
  .r10-gravyr blockquote p { font-size: 21px; }
  .r10-skiva.lang .r10-gravyr blockquote p { font-size: 16.5px; }
  .r10-skiva.kort .r10-gravyr blockquote p { font-size: 25px; }
  .r10-fem { font-size: 96px; }
  .r10-pol { width: 260px; margin-left: -130px; }
  .r10-prickar { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
  .r10-prickar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(170, 196, 228, .28); transition: background-color .5s ease, box-shadow .5s ease; }
  .r10-prickar i.nu { background: var(--bla); box-shadow: 0 0 0 4px rgba(0, 152, 212, .16); }
  .r10-mer { margin-top: 56px; }
}