/*
  Mössan: studentmallen. Bygger på Klassisk (samma uppbyggnad och CSS) med
  egen grafik: en egenritad studentmössa, konfetti, marinblått sigill med
  guldinitialer och ett ljusblått foder. Konfettin är en stillastående bild,
  ingen rörelse inuti SVG (webb-bygg 2).
  Natt är grundfärgen. Paletterna skrivs med html[data-mall] så att de vinner
  över grundfärgen.
*/
html[data-mall="mossan"] {
  --papper: #f9f8f4;
  --kuvert: #eef1f6;
  --gron: #1d2d55;
  --gron-djup: #142042;
  --guld: #c49a3f;
  --guld-linje: rgba(196, 154, 63, .5);
  --guld-text: #7a5a1f;
  --guld-ljus: #ecd391;
}
html[data-mall="mossan"][data-palett="skog"] { --gron: #22382e; --gron-djup: #1b2e25; }
html[data-mall="mossan"][data-palett="bordeaux"] { --gron: #4a1f2a; --gron-djup: #3a1720; }
html[data-mall="mossan"][data-palett="kol"] { --gron: #24221f; --gron-djup: #171614; }

/* Kuvertet */
html[data-mall="mossan"] .kuvert-insida { background: #dfe6f3 url("/mallar/mossan/bilder/foder.svg") repeat; background-size: 56px 56px; }
.kort-mossa { width: min(46%, 180px, 30vh); height: auto; }
html[data-mall="mossan"] .sigill-mono {
  color: #ecd391;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .18), 0 1.5px 1px rgba(6, 12, 31, .75);
}

/* Toppen: mössan under konfetti */
html[data-mall="mossan"] .hjalte::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.25rem;
  right: -1.25rem;
  height: 62%;
  background: url("/mallar/mossan/bilder/konfetti.svg") top center / 100% auto no-repeat;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.mossa { position: relative; width: min(60%, 230px); height: auto; margin-bottom: .4rem; }
@media (prefers-reduced-motion: no-preference) {
  /* Mössan landar med en liten gungning när kuvertet öppnats (på bilden, inte inuti SVG). */
  .oppnad .mossa { animation: mossa-landar 1.1s cubic-bezier(.2, .8, .3, 1.2) .3s both; }
}
@keyframes mossa-landar {
  0% { opacity: 0; transform: translate3d(0, -26px, 0) rotate(-7deg); }
  60% { opacity: 1; transform: translate3d(0, 3px, 0) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
html[data-mall="mossan"] .namn { color: var(--gron); }