/* Den animerade presentationen på /las-mer. Ligger separat eftersom sidan
   har en scenlayout som ingen deltagarsida eller adminvy ska ärva. */

.ram.presentationsram { max-width: 76rem; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.presentationsintro {
  max-width: 54rem;
  min-height: min(72vh, 42rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0 5rem;
}
.presentationsintro h1,
.presentationsavslut h2 {
  font-size: clamp(2.4rem, 7vw, 5.7rem);
  line-height: .96;
  margin: .2rem 0 1.5rem;
  max-width: 12ch;
}
.presentationsintro .ingress { max-width: 43rem; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.presentationsintro .knapp { align-self: flex-start; margin-top: .8rem; }
.presentationsetikett, .scennummer, .korttopp, .minietikett {
  font-family: var(--hs-ui);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.presentationsetikett { color: var(--hs-rod); margin: 0; }

.presentationsflode { display: grid; gap: clamp(5rem, 12vw, 10rem); }
.berattelsescen {
  display: grid;
  grid-template-columns: minmax(16rem, .72fr) minmax(32rem, 1.28fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  scroll-margin-top: 1.5rem;
}
.berattelsescen.omvand .scenbeskrivning { order: 2; }
.berattelsescen.omvand .scenyta { order: 1; }
.scenbeskrivning h2 { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.05; margin: .3rem 0 1rem; }
.scenbeskrivning > p:not(.scennummer) { font-size: 1.08rem; }
.scennummer { color: var(--hs-bla-lank); font-size: .78rem; margin: 0; }
.scenpunkter { padding-left: 1.2rem; }
.scenpunkter li { margin-bottom: .35rem; }
.scenfakta {
  border-left: 4px solid var(--hs-gul);
  padding: .75rem 0 .75rem 1rem;
  font-family: var(--hs-ui);
  font-weight: 900;
}
.scenkontroller { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.scenkontroller .knapp, .scenkontroller button { margin: 0; }
.scenpaus { color: var(--hs-bla-lank); }

.scenyta {
  position: relative;
  height: 34rem;
  overflow: hidden;
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 18% 16%, rgb(255 255 255 / .9), transparent 28%),
    linear-gradient(145deg, #e9e8db, #dcd9c6);
  box-shadow: inset 0 0 0 1px rgb(54 31 21 / .1);
  isolation: isolate;
}
.scenyta::after {
  content: "";
  position: absolute;
  inset: auto -8% -34% 35%;
  height: 65%;
  border-radius: 50%;
  background: rgb(252 181 46 / .24);
  z-index: -1;
}
.pausad .scenyta * { animation-play-state: paused !important; }

.webblasare {
  position: absolute;
  background: #fff;
  border: 1px solid #b8b7ad;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 1.2rem 2.8rem rgb(54 31 21 / .18);
}
.webblasare img { display: block; width: 100%; height: auto; }
.fonsterrad {
  height: 1.8rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: 0 .6rem;
  background: #f4f2ea;
  border-bottom: 1px solid #d7d5ca;
  font: 500 .55rem var(--hs-ui);
  color: #777268;
}
.fonsterrad i { width: .46rem; height: .46rem; border-radius: 50%; background: #f15b40; }
.fonsterrad i:nth-child(2) { background: #fcb52e; }
.fonsterrad i:nth-child(3) { background: #0093d0; }
.fonsterrad span { margin-left: .35rem; }

.anmalningsfonster { width: 71%; left: 4%; top: 12%; transform: rotate(-1.5deg); }
.skickatmarke, .koforslag, .aterbudsmarke {
  position: absolute;
  font: 900 .72rem var(--hs-ui);
  color: #fff;
  background: var(--hs-bla);
  border-radius: 999px;
  padding: .45rem .7rem;
  box-shadow: 0 .35rem .9rem rgb(54 31 21 / .22);
}
.skickatmarke { right: 6%; bottom: 7%; opacity: 0; }
.kvittobesked {
  position: absolute;
  inset: 1.8rem 0 0;
  padding: 3rem 8%;
  background: #fff;
  opacity: 0;
}
.kvittobesked h3 { margin: .2rem 0 1rem; font-size: 1.1rem; }
.kvittobesked p { font: 500 .75rem var(--hs-ui); }

.telefon {
  position: absolute;
  width: 14.2rem;
  height: 28.4rem;
  padding: .48rem;
  border-radius: 2rem;
  background: #211d1b;
  box-shadow: 0 1.5rem 3rem rgb(54 31 21 / .35);
}
.telefonhogtalare {
  position: absolute;
  z-index: 8;
  top: .75rem;
  left: 50%;
  width: 4rem;
  height: .32rem;
  transform: translateX(-50%);
  border-radius: 1rem;
  background: #090909;
}
.telefonskarm {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 1.58rem;
  background: #f7f6f1;
  font: 500 .62rem/1.35 var(--hs-ui);
}
.telefonstatus {
  position: absolute;
  z-index: 7;
  inset: .55rem .8rem auto;
  display: flex;
  justify-content: space-between;
  font-size: .48rem;
  color: #fff;
}
.telefonbakgrund {
  position: absolute;
  inset: 0;
  padding: 2.25rem .85rem 1rem;
  color: var(--hs-brun);
  text-align: left;
  background: #f7f6f1;
}
.mobilavsandare { padding-bottom: .55rem; border-bottom: 1px solid #d8d3c8; }
.mobilavsandare img { display: block; width: 7rem; height: auto; }
.mobilavsandare p { margin: .2rem 0 0; font-size: .48rem; }
.mobilanmalan { padding-top: .65rem; }
.mobilanmalan h3 { margin: .05rem 0 .35rem; font-size: 1.15rem; }
.mobilanmalan h4 { margin: .75rem 0 .4rem; font-size: .82rem; }
.mobilfakta {
  margin: 0;
  padding: .5rem;
  border-left: .2rem solid var(--hs-bla);
  background: #fff;
}
.mobilfalt { display: block; margin-top: .42rem; font-weight: 900; }
.mobilfalt i {
  display: block;
  margin-top: .16rem;
  padding: .38rem .45rem;
  border: 1px solid #c9c5bb;
  border-radius: .2rem;
  color: #57534d;
  background: #fff;
  font-style: normal;
  font-weight: 500;
}
.mobilskicka {
  display: block;
  margin-top: .65rem;
  padding: .5rem;
  border-radius: .25rem;
  color: #fff;
  background: var(--hs-bla);
  text-align: center;
  font-weight: 900;
}
.telefon-anmalan { right: 6%; top: 7%; opacity: 0; transform: translateX(8rem) rotate(3deg); }
.telefon-anmalan .telefonstatus { color: var(--hs-brun); }
.mejlnotis {
  position: absolute;
  z-index: 5;
  top: 2.25rem;
  inset-inline: .6rem;
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .62rem;
  border-radius: .75rem;
  background: rgb(255 255 255 / .93);
  box-shadow: 0 .5rem 1.2rem rgb(0 0 0 / .18);
  opacity: 0;
  transform: translateY(-2rem);
}
.mejlnotis p { margin: 0; flex: 1; }
.mejlnotis small { float: right; color: #777; }
.mejlikon, .litenikon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: .45rem;
  color: #fff;
  background: var(--hs-bla);
  font-weight: 900;
}
.mejlvy, .swishappvy {
  position: absolute;
  inset: 0;
  padding: 2.5rem .9rem 1rem;
  background: #fff;
  opacity: 0;
}
.mejlapphuvud {
  display: flex;
  justify-content: space-between;
  color: var(--hs-bla-lank);
  border-bottom: 1px solid #ddd;
  padding-bottom: .45rem;
}
.telefon-mejllogotyp { display: block; width: 7.5rem; height: auto; margin: .65rem 0 .5rem; }
.mejlfran { color: #57534d; margin: 0 0 .6rem; }
.mejlhuvud { font-weight: 900; font-size: .78rem; border-bottom: 1px solid #ddd; padding-bottom: .55rem; }
.miniknapp, .swishknapp {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .55rem .7rem;
  border-radius: .32rem;
  background: var(--hs-bla);
  color: #fff;
  font: 900 .56rem var(--hs-ui);
}
.mejlbetalning { margin-top: .55rem; padding-top: .45rem; border-top: 1px solid #ddd; }
.mejlbetalning p { margin: .2rem 0; }
.mejlbetalning strong { font-size: .82rem; }
.swishknapp { position: relative; gap: .35rem; width: 100%; margin-top: .45rem; font-size: .68rem; }
.swishknapp img { width: 1.2rem; height: 1.2rem; object-fit: contain; }
.swishappvy {
  padding: 3.2rem 1rem 1rem;
  text-align: center;
  font-size: .7rem;
}
.swishappsymbol { display: block; width: 3rem; height: 3rem; object-fit: contain; margin: .8rem auto; }
.swishappvy > p { margin: .65rem 0; }
.swishappvy > p > strong { font-size: .72rem; }
.swishbelopp { font-size: 1.6rem; font-weight: 900; }
.swishdetalj { padding: .55rem; border-radius: .3rem; background: #f0f0ed; }
.swish-slutknapp {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: .7rem;
  border-radius: .35rem;
  color: #fff;
  background: var(--hs-bla);
  font: 900 .7rem var(--hs-ui);
}
.minietikett { color: var(--hs-rod); font-size: .55rem; }

.handmarkor {
  position: absolute;
  z-index: 10;
  right: 13%;
  top: 64%;
  width: 2.3rem;
  height: 2.3rem;
  border: .28rem solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 .18rem var(--hs-brun), 0 .3rem .8rem rgb(0 0 0 / .25);
  opacity: 0;
}
.mejl-swish .handmarkor {
  top: calc(50% - 1.15rem);
  right: auto;
  left: calc(50% - 1.15rem);
}

.kofonster { left: 4%; top: 16%; width: 72%; }
.koforslag { left: 8%; top: 45%; background: var(--hs-rod); opacity: 0; }
.telefon-ko { right: 4%; top: 7%; opacity: 0; transform: translateX(7rem) rotate(2deg); }
.erbjudandeskarm { padding: 3.2rem 1rem 1rem; background: #fff; }
.erbjudandeskarm .telefonstatus { color: var(--hs-brun); }
.erbjudandeskarm h3 { margin: .2rem 0 .8rem; font-size: 1.05rem; }
.erbjudandeskarm .miniknapp { display: flex; margin: 1rem 0 .45rem; text-align: center; }
.erbjudandeskarm .sekundar-mini { margin-top: 0; color: var(--hs-bla-lank); background: #fff; border: 1px solid var(--hs-bla); }
.platssvar {
  position: absolute;
  inset: 2.8rem .8rem auto;
  padding: 1rem;
  background: #e7f7ec;
  border-left: 4px solid #23834b;
  border-radius: .3rem;
  opacity: 0;
  transform: scale(.85);
}
.ko-hand { right: 10%; top: 64%; }
.flodespil { position: absolute; font: 900 5rem/1 var(--hs-ui); color: var(--hs-rod); opacity: 0; }
.ko-pil { left: 63%; top: 42%; }

.scen-publicering { display: flex; align-items: center; justify-content: space-around; padding: 3rem; }
.systemkort, .gallringsruta, .datakort {
  background: #fff;
  border: 1px solid #cbc8b9;
  border-radius: .75rem;
  box-shadow: 0 1rem 2rem rgb(54 31 21 / .14);
}
.systemkort { position: relative; width: 42%; min-height: 21rem; padding: 1.2rem; }
.systemkort h3 { margin: .45rem 0 .8rem; }
.korttopp { color: var(--hs-bla-lank); font-size: .62rem; }
.systemkort dl { display: grid; grid-template-columns: 3.5rem 1fr; font: 500 .75rem var(--hs-ui); }
.systemkort dt { color: #777; }
.systemkort dd { margin: 0; }
.opubliceradmarke, .publiceradmarke, .gallratmarke, .behorighetsmarke {
  display: inline-block;
  border-radius: 999px;
  padding: .3rem .5rem;
  font: 900 .55rem var(--hs-ui);
}
.opubliceradmarke { position: absolute; left: 1.2rem; bottom: 1rem; color: #6e4b00; background: #fff0c7; }
.publiceradmarke { color: #166438; background: #dff3e6; opacity: 0; }
.kalenderlank {
  display: block;
  margin-top: .8rem;
  color: var(--hs-bla-lank);
  font: 900 .65rem var(--hs-ui);
  opacity: 0;
}
.kalenderlank b { margin-left: .25rem; font-size: 1rem; }
.kalenderkort { opacity: .45; transform: scale(.92); }
.kalenderbild { height: 7rem; margin: .8rem -1.2rem; background: linear-gradient(135deg, #361f15, #f15b40); }
.innehallspaket {
  position: absolute;
  z-index: 8;
  left: 23%;
  width: 8rem;
  padding: .7rem;
  background: #fff;
  border: 2px solid var(--hs-bla);
  border-radius: .4rem;
  box-shadow: 0 .5rem 1rem rgb(54 31 21 / .2);
  opacity: 0;
}
.innehallspaket span { font: 900 .65rem var(--hs-ui); }
.innehallspaket i { display: block; width: 100%; height: .22rem; margin-top: .3rem; background: #ddd; }
.publiceringspil { left: 47%; top: 43%; }

.scen-gallring { padding: 3.3rem; }
.datakort { position: absolute; left: 7%; width: 48%; padding: 1rem; display: flex; align-items: center; gap: .8rem; }
.datakort p { margin: 0; font: 500 .75rem var(--hs-ui); }
.deltagarkort { top: 18%; }
.kostkort { top: 40%; }
.lasikon { width: 1.4rem; height: 1.4rem; border: .22rem solid var(--hs-brun); border-radius: .3rem; color: transparent; }
.behorighetsmarke { margin-left: auto; color: #765100; background: #fff0c7; white-space: nowrap; }
.aterbudsmarke { left: 15%; top: 68%; opacity: 0; }
.gallringsruta { position: absolute; right: 7%; top: 18%; width: 35%; padding: 1.2rem; opacity: .35; transform: translateX(2rem); }
.gallringsruta h3 { margin: .2rem 0; }
.gallratmarke { margin-top: .7rem; color: #166438; background: #dff3e6; opacity: 0; }

/* Varje sekvens är ändlig. Orsak och verkan får rörelse, inte bakgrunden. */
.spelar .skickatmarke { animation: pop-in .55s 1s both; }
.spelar .kvittobesked { animation: visa-slut .55s 1.45s both; }
.spelar .telefon-anmalan { animation: telefon-in .85s 1.8s both; }
.spelar .mejlnotis { animation: notis 2.5s 2.8s both; }
.spelar .mejlvy { animation: panel 4.8s 5.2s both; }
.spelar .mejl-swish { animation: puls .8s 7.6s 2; }
.spelar .scen-anmalan .handmarkor { animation: tryck 1s 8.6s both; }
.spelar .swishappvy { animation: visa-slut .08s 9.4s both; }
.spelar .swish-slutknapp { animation: puls .8s 9.65s 2; }

.spelar .koforslag { animation: pop-in .5s .8s both; }
.spelar .telefon-ko { animation: telefon-in .8s 2s both; }
.spelar .ko-pil { animation: pil .8s 1.5s both; }
.spelar .ko-hand { animation: tryck 1s 4.5s both; }
.spelar .platssvar { animation: visa-slut .5s 5.5s both; }
.spelar .ja-knapp { animation: puls .7s 4s 2; }

.spelar .innehallspaket { animation: flytta-innehall 2s 1.5s both; }
.spelar .publiceringspil { animation: pil .8s 1s both; }
.spelar .kalenderkort { animation: publicera .7s 3.2s both; }
.spelar .publiceradmarke { animation: pop-in .5s 3.8s both; }
.spelar .kalenderlank { animation: pop-in .5s 4.4s both; }
.spelar .opubliceradmarke { animation: markera .8s 5s both; }

.spelar .aterbudsmarke { animation: pop-in .5s .8s both; }
.spelar .kostkort { animation: radera .7s 2.2s both; }
.spelar .gallringsruta { animation: publicera .7s 3.2s both; }
.spelar .gallraknapp { animation: puls .7s 4.2s 2; }
.spelar .gallratmarke { animation: pop-in .5s 5.3s both; }

@keyframes telefon-in { to { opacity: 1; transform: translateX(0) rotate(2deg); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes notis {
  0% { opacity: 0; transform: translateY(-2rem); }
  18%, 76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-.5rem); }
}
@keyframes panel {
  0% { opacity: 0; }
  5%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes visa-slut { to { opacity: 1; transform: scale(1); } }
@keyframes tryck {
  0% { opacity: 0; transform: translate(1rem, 1rem) scale(.7); }
  35%, 65% { opacity: 1; transform: translate(0, 0) scale(1); }
  80% { transform: scale(.75); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes puls { 50% { transform: scale(1.06); box-shadow: 0 0 0 .35rem rgb(0 147 208 / .2); } }
@keyframes pil { 50%, 100% { opacity: 1; transform: translateX(.5rem); } }
@keyframes flytta-innehall {
  0% { opacity: 0; transform: translateX(0) scale(.7); }
  20% { opacity: 1; transform: translateX(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(22rem) scale(.85); }
}
@keyframes publicera { to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes markera { 50% { transform: scale(1.12); } }
@keyframes radera { to { opacity: 0; transform: translateX(-3rem) scale(.8); filter: blur(.25rem); } }

.presentationsavslut { min-height: 75vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 6rem 0; }

@media (max-width: 900px) {
  .berattelsescen { grid-template-columns: 1fr; }
  .berattelsescen.omvand .scenbeskrivning,
  .berattelsescen.omvand .scenyta { order: initial; }
  .scenyta { height: 31rem; }
}
@media (max-width: 520px) {
  .ram.presentationsram { padding-inline: .8rem; }
  .presentationsintro { min-height: 78vh; padding-top: 2rem; }
  .presentationsintro h1 { font-size: 2.65rem; }
  .scenyta { height: 29rem; border-radius: .8rem; }
  .anmalningsfonster, .kofonster { width: 92%; left: 4%; top: 8%; }
  .telefon { width: 11.5rem; height: 23rem; }
  .telefon-anmalan, .telefon-ko { right: 4%; top: 15%; }
  .telefon-anmalan .telefonbakgrund { padding: 1.9rem .7rem .7rem; }
  .telefon-anmalan .mobilanmalan { padding-top: .45rem; }
  .telefon-anmalan .mobilanmalan h4 { margin-top: .35rem; }
  .telefon-anmalan .mobilskicka { margin-top: .5rem; }
  .handmarkor, .ko-hand { right: 11%; }
  .scen-publicering { padding: 1rem; gap: .65rem; }
  .systemkort { width: 48%; min-height: 19rem; padding: .7rem; }
  .systemkort dl { display: block; }
  .systemkort dt { margin-top: .35rem; }
  .kalenderbild { margin-inline: -.7rem; height: 5rem; }
  .innehallspaket { left: 10%; }
  .scen-gallring { padding: 1rem; }
  .datakort { left: 4%; width: 62%; padding: .7rem; }
  .behorighetsmarke { position: absolute; left: .7rem; top: 100%; }
  .gallringsruta { right: 4%; top: 35%; width: 52%; }
  .scenkontroller { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .berattelsescen .scenyta * { animation: none !important; }
  .telefon-anmalan, .telefon-ko { opacity: 1; transform: none; }
  .mejlnotis, .mejlvy, .handmarkor, .flodespil, .innehallspaket,
  .skickatmarke, .koforslag, .aterbudsmarke { display: none; }
  .kvittobesked, .swishappvy, .platssvar, .publiceradmarke, .kalenderlank, .gallratmarke { opacity: 1; transform: none; }
  .kalenderkort, .gallringsruta { opacity: 1; transform: none; }
  .kostkort { opacity: .25; text-decoration: line-through; }
  .scenkontroller .scenpaus,
  .scenkontroller .scenreplay { display: none; }
}