/* Föreställningen. Färger: natt, sammet, matt guld, havsljus.
   Typsnitt (runda 2, 19 okt): Libre Caslon, som förtexterna till en gammal film. Display till de stora orden, Text till allt
   litet (den har kraftigare hårstreck). Typsnittet saknar kapitäler, så små rubriker står i versaler i liten storlek i stället. */
@font-face { font-family: 'Libre Caslon Display'; src: url('typsnitt/libre-caslon-display-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 400 700; src: url('typsnitt/libre-caslon-text-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400 700; src: url('typsnitt/libre-caslon-text-italic-latin.woff2') format('woff2'); font-display: swap; }

:root {
  --natt: #0b0707;
  --sammet: #5a0f14;
  --guld: #c9a45c;
  --guld-ljus: #ecd9a4;
  --guld-mork: #8a6a2e;
  --ben: #e9dcc3;
  --hav: #9fd6d2;
  --serif: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --text: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --g-polerad: linear-gradient(180deg, #fff4cf 0%, #f3d488 20%, #cf9d44 42%, #9a6c25 52%, #d6a84f 62%, #fbe6a6 80%, #dcae52 100%);   /* polerat guld: ljus kant, mörkt band, ljus fot */
  --papper: #f4ebd8;
  --under: 0px;
}
/* Telefon: när adressfältet åker undan blir skärmen högre. Bilden fyller alltid den höga skärmen (lvh), texten står kvar
   där den stod (svh). --under är biten däremellan, alltså det som ligger bakom adressfältet när det syns. På dator 0. */
@supports (height: 100lvh) { :root { --under: calc(100lvh - 100svh); } }
:root { --fot: max(var(--under), env(safe-area-inset-bottom, 0px)); }   /* så högt över scenens nederkant måste text stå för att alltid synas */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--natt); color: var(--ben); color-scheme: dark; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin; scrollbar-color: rgba(201, 164, 92, .42) var(--natt); }          /* smal list i guld i stället för Windows vita */
body { margin: 0; font-family: var(--text); font-synthesis: none; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(201, 164, 92, .4); color: #fff; }
h1 { text-wrap: balance; }
p { text-wrap: pretty; margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, a { touch-action: manipulation; }                                  /* ingen väntan på dubbeltryck */
button, .biljett { -webkit-user-select: none; user-select: none; }        /* långt tryck markerar inte knapptexten */
:focus-visible { outline: 2px solid var(--guld-ljus); outline-offset: 4px; }
.dold { position: absolute; }

/* ---------- Spåret och scenen ---------- */
#spar { position: relative; height: 1200svh; }           /* skrivs över av film.js (scenerna + klippen + en skärm) */
.scen { position: sticky; top: 0; height: 100svh; height: 100lvh; overflow: hidden; background: var(--natt); }
.scen__bild, .scen__film, .scen__liv, .scen__skugga { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scen__bild, .scen__liv { object-fit: cover; object-position: 50% 50%; }
.scen__film { opacity: 0; }
.scen__film.ritad { opacity: 1; }
/* Slingan börjar på samma bild som filmen står på, så den kan komma fort. Ut tonas den mjukt över filmens första rutor. */
.scen__liv { opacity: 0; transition: opacity 280ms ease-in-out; pointer-events: none; }
.scen__liv.syns { opacity: 1; transition: opacity 140ms linear; }
/* Mobilens höga slinga i ett stopp (HOGS i film.js) står där kameran står, lagd med transform. */
.scen__liv.zoom { transform-origin: 0 0; will-change: transform; }
.scen__rida { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 450ms ease; }
.scen__rida.pa { opacity: 1; }
.scen__andas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 280ms ease-in-out; }
.scen__andas.pa { opacity: 1; transition: opacity 400ms ease; }      /* andas.js: rör sig först när den syns helt */
.scen__skugga { pointer-events: none; background:
  radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 2, 2, .55) 100%),
  linear-gradient(to bottom, rgba(5, 2, 2, .35), transparent 22%, transparent 70%, rgba(5, 2, 2, .55)); }

/* ---------- Texten ---------- */
.del { position: absolute; inset: 0; display: grid; pointer-events: none; }
.del > * { pointer-events: auto; }

.del--oppning { place-items: center; align-content: center; gap: clamp(28px, 6svh, 64px); padding: 0 6vw var(--under); text-align: center; }
.namn {
  margin: 0; font-family: var(--serif); font-weight: 400; line-height: .92; letter-spacing: -.02em;
  font-size: clamp(54px, 10.6vw, 190px);
  color: var(--guld);
  background: linear-gradient(100deg, var(--guld-mork) 0%, var(--guld) 22%, var(--guld-ljus) 38%, var(--guld) 52%, var(--guld-mork) 70%, var(--guld) 86%, var(--guld-ljus) 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: vattenljus 9s ease-in-out infinite alternate;
  text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .55));
  will-change: transform, opacity, filter;
}
.namn__ord { display: inline-block; }
.namn__under { display: block; margin-top: .3em; font-family: var(--text); font-style: italic; font-size: .26em; line-height: 1; letter-spacing: 0; }
/* Namnet står på tyget (ridan.js): texten finns kvar för Google och skärmläsare, och raden och knapparna står längre ner */
.tyg .namn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; animation: none; }
.tyg .del--oppning { align-content: end; padding-bottom: calc(10svh + var(--fot)); }
@keyframes vattenljus { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.namn.skoljs { filter: url(#skolj) drop-shadow(0 2px 14px rgba(0, 0, 0, .55)); }

.val { position: relative; isolation: isolate; display: grid; gap: 18px; justify-items: center; opacity: 0; animation: in 900ms 500ms ease-out forwards; }
.val::before { content: ''; position: absolute; z-index: -1; inset: -34px -56px; background: radial-gradient(closest-side, rgba(6, 3, 3, .5), transparent); pointer-events: none; }   /* mörker bakom raden, så att den går att läsa över vattnet */
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.val__rad { font-style: italic; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.3; color: #f1e6cf; opacity: .94; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.val__knappar { display: flex; align-items: center; gap: 22px; }
.val__knappar span { width: 1px; height: 18px; background: var(--guld); opacity: .5; }
.val__knappar button {
  min-height: 48px; padding: 0 22px; font-weight: 500; font-size: clamp(12.5px, .95vw, 14.5px); letter-spacing: .16em; text-transform: uppercase;
  color: var(--guld-ljus); border: 1px solid rgba(201, 164, 92, .55); border-radius: 999px;
  background: rgba(11, 7, 7, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 200ms ease, border-color 200ms ease, transform 120ms ease;
}
.val__knappar button:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .val__knappar button:hover { background: rgba(201, 164, 92, .18); border-color: var(--guld-ljus); } }
.val.inne { animation: none; opacity: 1; }
.val.vald { pointer-events: none; }
.val.vald .val__knappar { opacity: 0; transition: opacity 500ms ease 240ms; }                    /* knappen man valde hinner lysa till */
.val__knappar button.vald-knapp { background: var(--guld-ljus); border-color: var(--guld-ljus); color: var(--natt); transition-duration: 120ms; }

.lapp a { display: inline-block; padding: 16px 0; margin: -16px 0; color: inherit; text-decoration: none; }   /* 44 px att trycka på */
@media (hover: hover) and (pointer: fine) { .lapp a:hover { color: var(--guld-ljus); } }
.lapp { font-size: clamp(16px, 1.05vw, 19px); letter-spacing: .01em; color: var(--ben); opacity: .9; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.kopia { position: absolute; left: 6vw; right: 6vw; bottom: calc(3svh + var(--fot)); font-style: italic; font-size: 15px; line-height: 1.3; color: var(--guld-ljus); text-align: center; text-shadow: 0 1px 10px rgba(0, 0, 0, .95); opacity: 0; transition: opacity 500ms ease; pointer-events: none; }
.kopia.syns { opacity: 1; }

/* Meningarna i filmen: stor serif i ben, med en mjuk skugga bakom så att de går att läsa på bilden. Varje mening har två
   storlekar, som förtexterna till en gammal film: början (.lr) liten och kursiv, slutet (.sr) stort. */
.del--text, .slut__a, .slut__b, .slut__c { opacity: 0; visibility: hidden; }
.del--text, .del--slut > div { padding: 0 6vw; text-align: center; justify-items: center; }
.del--mitt { align-content: center; padding-top: 34svh; padding-bottom: var(--under); }
.del--nere { align-content: end; padding-bottom: calc(9svh + var(--fot)); }
.rad {
  text-wrap: balance;
  margin: 0; max-width: 16ch; font-family: var(--serif); font-weight: 400; line-height: .96; letter-spacing: -.015em;
  font-size: clamp(40px, 6.4vw, 118px); color: var(--ben);
  text-shadow: 0 2px 30px rgba(4, 2, 2, .85), 0 0 90px rgba(4, 2, 2, .7);
}
.del--mitt .rad, .rad--mellan { max-width: 20ch; font-size: clamp(40px, 6.4vw, 118px); }
.rad--mellan { max-width: 26ch; }
.rad--liten { max-width: 18ch; font-size: clamp(34px, 4.8vw, 88px); }
.rad .lr, .rad .sr { display: block; }
.rad .lr { margin-bottom: .16em; font-family: var(--text); font-style: italic; font-size: max(20px, .36em); line-height: 1.15; letter-spacing: 0; color: #eadcc0; }
.del--text { gap: clamp(10px, 1.8svh, 22px); }
/* Mörkret bakom texten: lika som förut inom den synliga skärmen (--skym högt), och det fortsätter ner bakom adressfältet */
.del--nere::before, .del--slut > div::before { --skym: 58svh; content: ''; position: absolute; inset: auto 0 0 0; height: calc(var(--skym) + var(--under)); background: linear-gradient(to top, rgba(6, 3, 3, .78) var(--under), rgba(6, 3, 3, .38) calc(var(--under) + var(--skym) * .45), transparent); pointer-events: none; }
.del--nere > *, .del--slut > div > * { position: relative; }
/* Den lilla raden under en rubrik: vilka vi är, vad som händer när man trycker */
.liten { max-width: 46ch; font-style: italic; font-size: clamp(16px, 1.25vw, 22px); line-height: 1.45; color: #f1e6cf; text-shadow: 0 1px 14px rgba(4, 2, 2, .95); font-variant-numeric: oldstyle-nums; }
.liten--kort { max-width: none; font-size: clamp(16px, 1.1vw, 20px); }
.liten--kort { text-wrap: balance; }
.hel { display: inline-block; }                                          /* meningen hålls ihop: på telefon börjar den på egen rad */

/* Havet: meningen kommer in med vågen (film.js styr förvrängningen, samma vatten som tog namnet) */
.skoljs2 { filter: url(#skolj2) blur(var(--dis, 0px)); will-change: filter, transform; }
/* Språnget: en viskning från sidan medan valen tar salongen */
.rad--viskning { max-width: none; font-family: var(--text); font-style: italic; font-size: clamp(22px, 2.6vw, 48px); letter-spacing: 0; }
.del--viskning::before { --skym: 34svh; }
/* Förmörkelsen: samma guld som ringen runt valen, lika på varje rad */
.rad--guld { text-shadow: none; }
/* Djuren: meningen står på vattnet och speglas i det */
.del--spegel { padding-bottom: calc(16svh + var(--fot)); }

/* Slutet: tre texter i samma bild */
.del--slut { opacity: 0; visibility: hidden; }
.del--slut > div { position: absolute; inset: 0; display: grid; align-content: end; gap: clamp(14px, 2.4svh, 26px); padding-bottom: calc(9svh + var(--fot)); }
/* a) Meningen står på klippan under stolen i solen. Bilden fyller skärmen runt mitten, så stolens plats räknas ur bildens höjd,
      och på låga skärmar hålls raden kvar ovanför kanten. */
/* (raden är två storlekar hög: den lilla delen står där raden stod, därför 1,6 radhöjder från nederkanten) */
.del--slut > .slut__a { align-content: start; padding-bottom: 0; padding-top: min(calc(50svh + .3 * max(100svh, 56.25vw)), calc(97svh - 1.6 * max(40px, min(6.4vw, 12svh)))); }
@supports (height: 100lvh) { .del--slut > .slut__a { padding-top: min(calc(50lvh + .3 * max(100lvh, 56.25vw)), calc(97svh - 1.6 * max(40px, min(6.4vw, 12svh)))); } }   /* bilden är lika hög som den höga skärmen */
.del--slut > .slut__a::before { --skym: 30svh; }
.slut__a .rad { max-width: none; font-size: clamp(40px, min(6.4vw, 12svh), 118px); }
/* b) Programmet: fyra nummer med en mening var, lågt i bilden så att solen och valen syns */
.del--slut > .slut__b { justify-items: stretch; gap: 0; padding: 0 5vw calc(6svh + var(--fot)); text-align: left; }
.programblad { display: contents; }
.programtitel { font-style: italic; font-size: clamp(24px, 2.1vw, 38px); line-height: 1; color: var(--guld-ljus); padding-bottom: clamp(10px, 1vw, 20px); text-shadow: 0 1px 12px rgba(4, 2, 2, .95); }
.program { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2vw; }
/* som en rollista i ett programblad: stor siffra i polerat guld till vänster, rubriken och meningen bredvid */
.program li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(4px, .5vw, 10px) clamp(12px, 1vw, 18px); align-content: start; padding-top: clamp(12px, 1vw, 18px);
  opacity: var(--in, 1); transform: translate3d(0, calc((1 - var(--in, 1)) * 12px), 0); }
.program li::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: rgba(236, 217, 164, .55); transform-origin: 0 50%; transform: scaleX(var(--in, 1)); }
.program__nr { grid-row: span 2; min-width: 1.1em; font-family: var(--serif); font-size: clamp(38px, 3.4vw, 60px); line-height: .8; color: var(--guld-ljus);
  background: var(--g-polerad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 10px rgba(4, 2, 2, .8)); }
.program h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 40px); line-height: 1; letter-spacing: -.01em; color: var(--ben); text-shadow: 0 2px 20px rgba(4, 2, 2, .9); }
.program p { font-size: clamp(14px, 1.02vw, 18px); line-height: 1.5; color: #efe4cf; text-shadow: 0 1px 12px rgba(4, 2, 2, .95); font-variant-numeric: oldstyle-nums; }
/* c) Knappen är en biljett till stolen i solen: rad 1, plats 1. Bladguld (Shyars val 26 okt, förslag 3 i _koncept/biljett/):
   matt guld lagt i blad som salongens ornament, med skarvar och en ton som skiftar från blad till blad. Texten präglad ur
   guldet, en upphöjd kant runt om, en graverad ram med svängda hörn och ett veck där talongen rivs. */
.del--slut > .slut__c::before { --skym: 64svh; }
.biljett {
  --hak: clamp(7px, .62vw, 12px); --snitt: 71%;
  position: relative; isolation: isolate; display: grid; grid-template-columns: var(--snitt) 1fr; align-items: center;
  width: clamp(300px, 26vw, 460px); height: clamp(62px, 4.8vw, 86px); margin-top: 4px;
  --l: rgba(84, 52, 10, .6); --h: rgba(255, 244, 212, .62);                                  /* graverad linje och dess ljusa kant */
  color: #835717; text-decoration: none; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .62)) drop-shadow(0 0 18px rgba(255, 190, 90, .18));
}
.biljett::before {                     /* guldet, med ett hack uppe och nere där biljetten rivs */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 2px;
  background:
    /* ramen, graverad 7 px in: mörk linje med en ljus kant på den sida som vänder bort från ljuset */
    linear-gradient(var(--l), var(--l)) left 14px top 7px / calc(100% - 28px) 1px no-repeat,
    linear-gradient(var(--h), var(--h)) left 14px top 8px / calc(100% - 28px) 1px no-repeat,
    linear-gradient(var(--l), var(--l)) left 14px bottom 8px / calc(100% - 28px) 1px no-repeat,
    linear-gradient(var(--h), var(--h)) left 14px bottom 7px / calc(100% - 28px) 1px no-repeat,
    linear-gradient(var(--l), var(--l)) left 7px top 14px / 1px calc(100% - 28px) no-repeat,
    linear-gradient(var(--h), var(--h)) left 8px top 14px / 1px calc(100% - 28px) no-repeat,
    linear-gradient(var(--l), var(--l)) right 8px top 14px / 1px calc(100% - 28px) no-repeat,
    linear-gradient(var(--h), var(--h)) right 7px top 14px / 1px calc(100% - 28px) no-repeat,
    /* ramens hörn svänger inåt, som på salongens speglar */
    radial-gradient(circle at 0 0, transparent 6.5px, var(--l) 6.5px 7.5px, var(--h) 7.5px 8.5px, transparent 8.5px) left 7px top 7px / 8px 8px no-repeat,
    radial-gradient(circle at 100% 0, transparent 6.5px, var(--l) 6.5px 7.5px, var(--h) 7.5px 8.5px, transparent 8.5px) right 7px top 7px / 8px 8px no-repeat,
    radial-gradient(circle at 0 100%, transparent 6.5px, var(--l) 6.5px 7.5px, var(--h) 7.5px 8.5px, transparent 8.5px) left 7px bottom 7px / 8px 8px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 6.5px, var(--l) 6.5px 7.5px, var(--h) 7.5px 8.5px, transparent 8.5px) right 7px bottom 7px / 8px 8px no-repeat,
    /* bladen: tunna skarvar i rader som är förskjutna, och en ton som skiftar lite från blad till blad */
    linear-gradient(0deg, rgba(112, 72, 16, .13) 1px, transparent 1px) 0 -14px / 100% 50%,
    linear-gradient(90deg, rgba(112, 72, 16, .12) 1px, transparent 1px) 0 0 / 58px 50% repeat-x,
    linear-gradient(90deg, rgba(112, 72, 16, .12) 1px, transparent 1px) 29px 100% / 58px 50% repeat-x,
    radial-gradient(38% 90% at 18% 30%, rgba(255, 242, 205, .22), transparent 70%),
    radial-gradient(30% 80% at 62% 78%, rgba(120, 78, 20, .13), transparent 70%),
    radial-gradient(26% 70% at 86% 24%, rgba(255, 238, 196, .16), transparent 70%),
    /* bladguldets fina skrynklor */
    repeating-linear-gradient(32deg, rgba(255, 245, 215, .06) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-58deg, rgba(90, 55, 10, .06) 0 1px, transparent 1px 9px),
    radial-gradient(140% 190% at 28% 0%, #f8e2a2 0%, #e4bb66 36%, #c99645 70%, #a8752a 100%);
  box-shadow: inset 2px 2px 0 rgba(255, 246, 216, .72), inset -2px -2px 0 rgba(96, 60, 12, .52), inset 0 0 0 1px rgba(120, 80, 20, .35);   /* upphöjd kant */
  -webkit-mask: radial-gradient(circle var(--hak) at var(--snitt) 0, transparent 97%, #000 100%), radial-gradient(circle var(--hak) at var(--snitt) 100%, transparent 97%, #000 100%); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle var(--hak) at var(--snitt) 0, transparent 97%, #000 100%), radial-gradient(circle var(--hak) at var(--snitt) 100%, transparent 97%, #000 100%); mask-composite: intersect;
}
.biljett__text { font-family: var(--serif); font-size: clamp(23px, 1.75vw, 31px); line-height: 1; text-align: center; letter-spacing: .015em;
  text-shadow: -1px -1px 0 rgba(255, 246, 218, .6), 1px 1px 0 rgba(70, 40, 5, .55); }                 /* präglad: ljus kant uppe till vänster, skugga nere till höger */
.biljett__plats { height: calc(100% - 16px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 6px; position: relative; font-weight: 500; font-size: clamp(9.5px, .64vw, 11px); letter-spacing: .14em; text-transform: uppercase; }
.biljett__plats { text-shadow: -1px -1px 0 rgba(255, 246, 218, .55), 1px 1px 0 rgba(70, 40, 5, .5); }
.biljett__plats::before {             /* vecket där talongen rivs: en pressad linje i punkter */
  content: ''; position: absolute; left: -1px; top: -2px; bottom: -2px; width: 2px;
  background: linear-gradient(90deg, rgba(84, 50, 8, .6) 50%, rgba(255, 246, 218, .7) 50%) 0 0 / 2px 100%;
  -webkit-mask: linear-gradient(#000 50%, transparent 50%) 0 0 / 2px 5px; mask: linear-gradient(#000 50%, transparent 50%) 0 0 / 2px 5px;
}
.biljett__plats span { display: grid; justify-items: center; gap: 4px; }
.biljett__plats b { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 1.9vw, 34px); line-height: .8; letter-spacing: 0; }

/* ---------- Filmtitlarna (13 okt): varje rad kommer fram som en text i en film, på ett sätt som hör till sin scen ----------
   film.js delar raderna i ord (.o) och bokstäver (.b, --i = plats i raden, --c = avstånd från mitten, --steg = tid mellan
   bokstäverna) och sätter klassen pa när kameran landar. Utan pa står allt i sitt startläge, utan övergång. */

/* Filmkornet: ligger över bilden men under texten och flyttas tio gånger i sekunden, som i en projektor */
.scen__korn { position: absolute; inset: -100px; background-size: 264px 264px; opacity: .36; pointer-events: none; animation: korn 800ms steps(1) infinite; will-change: transform; }
@keyframes korn {
  0% { transform: translate3d(0, 0, 0); } 12.5% { transform: translate3d(-44px, 31px, 0); } 25% { transform: translate3d(27px, -58px, 0); } 37.5% { transform: translate3d(-71px, -19px, 0); }
  50% { transform: translate3d(52px, 66px, 0); } 62.5% { transform: translate3d(-23px, -77px, 0); } 75% { transform: translate3d(83px, 12px, 0); } 87.5% { transform: translate3d(-61px, 49px, 0); }
}

/* Namnet: ett ljus drar över guldet och tänder det, och en ljusstrimma går ut åt sidorna */
@property --svep { syntax: '<percentage>'; inherits: false; initial-value: 130%; }
.namn { position: relative; }
.js:not(.stilla) .namn:not(.framme) {
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--svep) - 26%), transparent var(--svep)); mask-image: linear-gradient(100deg, #000 calc(var(--svep) - 26%), transparent var(--svep));
  animation: namnIn 1800ms cubic-bezier(.3, 0, .2, 1) 200ms both, vattenljus 9s ease-in-out infinite alternate;
}
@keyframes namnIn { 0% { --svep: 0%; opacity: 0; } 25% { opacity: 1; } 100% { --svep: 130%; opacity: 1; } }
.namn::after, .t-guld .rad::after {
  content: ''; position: absolute; left: -5%; right: -5%; top: calc(100% + .05em); height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 196, .95) 50%, transparent); box-shadow: 0 0 16px 1px rgba(236, 196, 110, .6);
  transform: scaleX(0); opacity: 0;
}
.js:not(.stilla) .namn:not(.framme)::after { animation: strimma 1500ms cubic-bezier(.2, .8, .2, 1) 950ms both; }
@keyframes strimma { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.js:not(.stilla) .val { animation-delay: 1500ms; animation-fill-mode: both; }                                          /* raden och knapparna kommer efter namnet */

/* Gemensamt för de delade raderna */
.rad { position: relative; isolation: isolate; }
.rad__in { position: relative; display: block; }
.rad .o { display: inline-block; white-space: nowrap; }
.rad .b { display: inline-block; text-shadow: none; }
/* Skuggan ligger i en egen kopia under raden. Annars lägger sig varje bokstavs skugga över grannen, och texten blir smutsig. */
.rad__skugga { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: transparent; -webkit-text-fill-color: transparent; opacity: 0; }
.rad__skugga .o, .rad__skugga .b { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
.rad__skugga .b { text-shadow: 0 2px 30px rgba(4, 2, 2, .85), 0 0 90px rgba(4, 2, 2, .7); }
.pa .rad__skugga { opacity: 1; transition: opacity 800ms linear 150ms; }

/* Havet: vattnet bär in raden (film.js), sedan drar skummets ljus över bokstäverna */
.t-vag:not(.pa) .rad { opacity: 0; }
.t-vag.pa .b { animation: skum 1100ms ease-out calc(1050ms + var(--i) * 28ms) both; }
@keyframes skum { 0%, 100% { color: var(--ben); text-shadow: 0 0 16px rgba(190, 236, 230, 0); } 28% { color: #fff; text-shadow: 0 0 16px rgba(190, 236, 230, .95); } }

/* Språnget: viskningen glider in från sidan */
.t-viskning .b { opacity: 0; transform: translate3d(-.4em, 0, 0) skewX(-10deg); }
.t-viskning.pa .b { opacity: 1; transform: none; transition: opacity 420ms linear calc(var(--i) * var(--steg)), transform 800ms cubic-bezier(.16, 1, .3, 1) calc(var(--i) * var(--steg)); }

/* Förmörkelsen: bokstäverna står först som mörka skivor med en kant av ljus, sedan tänds guldet inifrån mitten och utåt */
.t-guld .b { position: relative; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: .016em rgba(255, 238, 190, .9); opacity: 0; }
.t-guld .b::after {
  content: attr(data-b); position: absolute; inset: -.25em -.14em; padding: .25em .14em; -webkit-text-stroke: 0 transparent; opacity: 0;
  background: linear-gradient(180deg, #fff1c4 22%, var(--guld-ljus) 41%, var(--guld) 62%, var(--guld-mork) 84%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.t-guld.pa .b { opacity: 1; -webkit-text-stroke-color: rgba(255, 238, 190, 0);
  transition: opacity 500ms linear calc(var(--c) * var(--steg) * 1.6), -webkit-text-stroke-color 900ms linear calc(1500ms + var(--c) * var(--steg) * 1.6); }
.t-guld.pa .b::after { animation: tand 1100ms cubic-bezier(.2, .7, .2, 1) calc(560ms + var(--c) * var(--steg) * 1.6) both; }
@keyframes tand { 0% { opacity: 0; filter: brightness(2.6); } 30% { opacity: 1; filter: brightness(2.1); } 100% { opacity: 1; filter: brightness(1); } }
.t-guld .rad::after { left: -12%; right: -12%; top: 50%; z-index: -1; }
.t-guld.pa .rad::after { animation: strimma 1700ms cubic-bezier(.2, .8, .2, 1) 520ms both; }
/* glöden runt guldet ligger i kopian under raden: den tänds med guldet och andas sedan */
.t-guld .rad__skugga .b { -webkit-text-stroke: 0 transparent; text-shadow: 0 0 22px rgba(236, 196, 110, .5), 0 2px 8px rgba(0, 0, 0, .9); }
.t-guld .rad__skugga .b::after { content: none; }
.t-guld.pa .rad__skugga { transition: opacity 1400ms linear 700ms; animation: andas 4.5s ease-in-out 2400ms infinite alternate; }
@keyframes andas { from { opacity: 1; } to { opacity: .7; } }

/* Djuren: meningen stiger upp ur vattnet, och spegelbilden lever (film.js rör vattenytan) */
.t-yta .b { opacity: 0; transform: translate3d(0, .55em, 0) scaleY(.55); transform-origin: 50% 100%; }
.t-yta.pa .b { opacity: 1; transform: none; transition: opacity 650ms linear calc(var(--i) * var(--steg)), transform 1300ms cubic-bezier(.16, 1, .3, 1) calc(var(--i) * var(--steg)); }
.spegel__bild {
  position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 100%; transform: translateY(.06em) scaleY(-.72); opacity: 0; filter: url(#krus) blur(1px);
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 70%); mask-image: linear-gradient(to top, #000 5%, transparent 70%);
}
.pa .spegel__bild { opacity: .34; transition: opacity 1200ms linear 500ms; }

/* Vattenfallen: raden reses som en kuliss, bokstav för bokstav, och raden under följer efter */
.t-rida .o { perspective: 480px; }
.t-rida .b { opacity: 0; transform: translate3d(0, .6em, 0) rotateX(-80deg); transform-origin: 50% 100%; }
.t-rida.pa .b { opacity: 1; transform: none; transition: opacity 450ms linear calc(var(--i) * var(--steg)), transform 1100ms cubic-bezier(.16, 1, .3, 1) calc(var(--i) * var(--steg)); }
.t-rida:not(.pa) .liten { opacity: 0; transform: translate3d(0, 12px, 0); }
.t-rida.pa .liten { transition: opacity 800ms linear 900ms, transform 1000ms cubic-bezier(.16, 1, .3, 1) 900ms; }

/* Porten, platsen: ljuset går över raden och tänder den, som strålkastaren som hittar stolen */
.t-ljus .b { opacity: 0; }
.t-ljus.pa .b { animation: ljus 1100ms cubic-bezier(.2, .7, .2, 1) calc(var(--i) * var(--steg) * 1.5) both; }
@keyframes ljus {
  0% { opacity: 0; color: #fff; text-shadow: 0 0 22px rgba(255, 226, 150, 0); }
  30% { opacity: 1; color: #fffbe8; text-shadow: 0 0 22px rgba(255, 226, 150, .95); }
  100% { opacity: 1; color: var(--ben); text-shadow: 0 0 22px rgba(255, 226, 150, 0); }
}

/* Porten, programmet: linjerna ritas, och numren kommer ett i taget (--k sätts av film.js) */
.slut__b:not(.pa) .programtitel { opacity: 0; transform: translate3d(0, 10px, 0); }
.slut__b.pa .programtitel { transition: opacity 700ms linear, transform 900ms cubic-bezier(.16, 1, .3, 1); }
.slut__b:not(.pa) .program li { opacity: 0; transform: translate3d(0, 16px, 0); }
.slut__b.pa .program li { transition: opacity 700ms linear calc(180ms + var(--k) * 150ms), transform 1000ms cubic-bezier(.16, 1, .3, 1) calc(180ms + var(--k) * 150ms); }
.slut__b:not(.pa) .program li::before { transform: scaleX(0); }
.slut__b.pa .program li::before { transition: transform 1100ms cubic-bezier(.3, 0, .2, 1) calc(120ms + var(--k) * 150ms); }
.slut__b:not(.pa) .program__nr { opacity: 0; }
.slut__b.pa .program__nr { transition: opacity 900ms linear calc(650ms + var(--k) * 150ms); }

/* Porten, biljetten: orden ställs i skärpa ett i taget, sedan reses biljetten och ett ljus drar över guldet */
.t-fokus .o { opacity: 0; filter: blur(10px); transform: translate3d(0, .2em, 0) scale(1.07); }
.t-fokus.pa .o { opacity: 1; filter: blur(0); transform: none;
  transition: opacity 600ms linear calc(var(--o) * 110ms), filter 900ms cubic-bezier(.2, .7, .2, 1) calc(var(--o) * 110ms), transform 1200ms cubic-bezier(.16, 1, .3, 1) calc(var(--o) * 110ms); }
.slut__c .biljett { opacity: 0; transform: perspective(700px) rotateX(-58deg) translate3d(0, 26px, 0); transform-origin: 50% 100%; }
.slut__c.pa .biljett { opacity: 1; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--tryck, 1));
  transition: opacity 500ms linear 650ms, transform 1100ms cubic-bezier(.16, 1, .3, 1) 650ms; }
.slut__c.pa .biljett.framme { transform-origin: 50% 50%; transition: transform 160ms ease-out; }                      /* på plats: följer pekaren och svarar på tryck */
.slut__c.pa .biljett:active { --tryck: .96; }
.biljett::after {                                                                          /* ljuset som drar över guldet när biljetten har rests */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 248, 225, .7) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 130% 0;
  -webkit-mask: radial-gradient(circle var(--hak) at var(--snitt) 0, transparent 97%, #000 100%), radial-gradient(circle var(--hak) at var(--snitt) 100%, transparent 97%, #000 100%); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle var(--hak) at var(--snitt) 0, transparent 97%, #000 100%), radial-gradient(circle var(--hak) at var(--snitt) 100%, transparent 97%, #000 100%); mask-composite: intersect;
}
.slut__c.pa .biljett::after { animation: glans 1100ms ease-in-out 1650ms both; }
@keyframes glans { 0% { opacity: 1; background-position: 130% 0; } 99% { opacity: 1; background-position: -30% 0; } 100% { opacity: 0; background-position: -30% 0; } }
.biljett__plats { transform-origin: 0 50%; transition: transform 140ms ease-out; }
.biljett:active .biljett__plats { transform: rotate(2.5deg) translate3d(2px, 1px, 0); }    /* talongen rivs en aning när man trycker */
.slut__c:not(.pa) .liten--kort, .slut__c:not(.pa) .lapp { opacity: 0; transform: translate3d(0, 8px, 0); }
.slut__c.pa .liten--kort { transition: opacity 700ms linear 1350ms, transform 900ms cubic-bezier(.16, 1, .3, 1) 1350ms; }
.slut__c.pa .lapp { transition: opacity 700ms linear 1550ms, transform 900ms cubic-bezier(.16, 1, .3, 1) 1550ms; }

/* ---------- Hörnraden uppe till vänster: namnet lägger sig här när det har gått in i draperingen ---------- */
.hornrad { position: fixed; z-index: 5; top: calc(10px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); margin: 0; min-height: 44px; display: flex; align-items: center; gap: .55em;
  font-size: 16px; line-height: 1.1; color: var(--ben); text-shadow: 0 1px 10px rgba(0, 0, 0, .9), 0 0 24px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate3d(0, -4px, 0); transition: opacity 900ms ease, transform 1200ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.hornrad span { font-weight: 500; letter-spacing: .01em; }
.hornrad i { color: var(--guld-ljus); }
.hornrad i::before { content: '·'; margin-right: .55em; font-style: normal; color: var(--guld); }
.hornrad.syns { opacity: 1; transform: none; }
.stilla .hornrad { display: none; }
@media (max-width: 599px) {
  .hornrad { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font-size: 14.5px; }
  .hornrad i::before { content: none; }
}

/* ---------- Knapparna uppe till höger ---------- */
.topp { position: fixed; z-index: 5; top: calc(10px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); display: flex; align-items: center; gap: 6px; }
.ljudknapp { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; font-weight: 500; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ben); opacity: .8; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.ljudknapp[aria-pressed="true"] { color: var(--guld-ljus); opacity: 1; }
.ljudknapp[hidden] { display: none; }
/* Staplarna rör sig när ljudet är på */
.stapel { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.stapel i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.2); }
.ljudknapp[aria-pressed="true"] .stapel i { animation: stapel 820ms ease-in-out infinite alternate; }
.ljudknapp[aria-pressed="true"] .stapel i:nth-child(2) { animation-duration: 640ms; animation-delay: -300ms; }
.ljudknapp[aria-pressed="true"] .stapel i:nth-child(3) { animation-duration: 900ms; animation-delay: -520ms; }
.ljudknapp[aria-pressed="true"] .stapel i:nth-child(4) { animation-duration: 720ms; animation-delay: -120ms; }
@keyframes stapel { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.auto:not(.pausad)::after { animation: puls 2.6s ease-in-out infinite; }                  /* glödpunkten andas medan filmen spelar */
@keyframes puls { 50% { transform: scale(1.35); box-shadow: 0 0 16px var(--guld-ljus); } }
.auto { width: 44px; height: 44px; display: grid; place-items: center; }
.auto svg { width: 44px; height: 44px; transform: rotate(-90deg); overflow: visible; }
.auto__spar, .auto__ring { fill: none; stroke-width: 2; }
.auto__spar { stroke: rgba(233, 220, 195, .28); }
.auto__ring { transition: stroke-dashoffset 450ms ease-out; stroke: var(--guld-ljus); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 * (1 - var(--fyll, 0))); filter: drop-shadow(0 0 5px rgba(236, 217, 164, .8)); }
.auto.pausad .auto__ring { stroke: #8d867a; filter: none; }
.auto::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--guld-ljus); box-shadow: 0 0 10px var(--guld-ljus); }
.auto { position: relative; }
.auto.pausad::after { background: #8d867a; box-shadow: none; }

/* ---------- Utan rörelse ---------- */
.stillbilder { display: none; }
.stilla #spar { height: auto !important; }
.stilla .scen { position: relative; }
.stilla .scen__film, .stilla .scen__rida, .stilla .scen__liv, .stilla .scen__korn, .stilla .del--text, .stilla .del--slut, .stilla .topp .auto { display: none; }
.stilla .namn { animation: none; }
.stilla .val__knappar { display: none; }                               /* inget ljud att välja utan film */
.stilla .stillbilder figcaption { text-wrap: balance; }
.stilla .stillbilder { display: block; }
.stilla .stillbilder img { display: block; width: 100%; height: auto; }
.stilla .stillbilder figure { margin: 0; }
.stilla .stillbilder figcaption { padding: 28px 6vw 56px; font-family: var(--serif); font-size: clamp(28px, 4vw, 56px); line-height: 1.1; color: var(--ben); text-align: center; }
.stilla .stillbilder a { display: inline-block; padding: 12px 0; color: var(--guld-ljus); }   /* 44 px att trycka på */
.stilla .stillbilder small { display: block; max-width: 52ch; margin: 14px auto; font-family: var(--text); font-size: clamp(16px, 1.3vw, 21px); line-height: 1.45; }
.stilla .stillbilder small b { font-weight: 400; color: var(--guld-ljus); }

@media (max-width: 899px) {
  .namn { font-size: clamp(54px, 17vw, 120px); }
  .namn__ord { display: block; }
  .val__knappar { gap: 12px; }
  .val__knappar button { padding: 0 18px; }
  .del--slut > .slut__b { padding-left: 6vw; padding-right: 6vw; }
  .program { grid-template-columns: 1fr 1fr; gap: 16px 5vw; }       /* surfplatta och liggande telefon: två och två */
  .liten--kort { max-width: 30ch; }
  .slut__c .lapp { letter-spacing: 0; }
}
@media (max-width: 599px) {                                           /* stående telefon: ett nummer per rad, siffran till höger */
  /* Texten står närmare nederkanten: när adressfältet har åkt undan finns --under till under den. */
  .del--nere, .del--slut > div { padding-bottom: calc(5svh + var(--fot)); }
  .del--spegel { padding-bottom: calc(12svh + var(--fot)); padding-bottom: max(15lvh, calc(5svh + var(--fot))); }   /* meningen står på vattnet i bilden, och bilden är lika hög som den höga skärmen */
  .del--slut > .slut__b { padding-bottom: calc(3.5svh + var(--fot)); }
  .val__rad { font-size: 18px; }
  .del--slut > .slut__b::before { --skym: 86svh; }
  .program { grid-template-columns: 1fr; gap: 12px; }
  .program li { gap: 2px 12px; padding-top: 10px; }
  .program__nr { font-size: 38px; }
  .program h3 { font-size: 25px; }
  .program p { font-size: 15px; }
  .programblad { display: block; padding: 14px 16px 6px; border-radius: 14px; border: 1px solid rgba(201, 164, 92, .22);
    background: rgba(9, 5, 5, .64); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .programblad .program li:first-child { padding-top: 6px; }
  .biljett__plats { letter-spacing: .08em; padding: 0 13px 0 4px; }    /* RAD och PLATS står innanför biljettens ram */
  .tyg .del--oppning { padding-bottom: calc(5svh + var(--fot)); }
}
@media (max-height: 520px) and (orientation: landscape) {              /* liggande telefon: allt mindre, så att bilden syns */
  .rad, .slut__a .rad { font-size: clamp(26px, 9.5svh, 44px); }
  .del--mitt .rad, .rad--mellan, .rad--liten { font-size: clamp(22px, 7.6svh, 34px); }
  .rad--viskning { font-size: clamp(18px, 5.6svh, 26px); }
  .liten, .liten--kort { max-width: none; font-size: 16px; }
  .del--mitt { padding-top: 30svh; }
  .del--nere, .del--slut > div { padding-bottom: calc(6svh + var(--fot)); }
  .del--spegel { padding-bottom: calc(13svh + var(--fot)); }
  .del--slut > div { gap: 8px; }
  .del--slut > .slut__b::before, .del--slut > .slut__c::before { --skym: 96svh; }
  .programtitel { font-size: 20px; padding-bottom: 6px; }
  .program { gap: 8px 5vw; }
  .program li { gap: 2px; padding-top: 7px; }
  .program h3 { font-size: 22px; }
  .program__nr { font-size: 30px; }
  .program p { font-size: 14px; line-height: 1.35; }
  .biljett { height: 48px; }
  .biljett__plats { letter-spacing: .06em; padding: 0 15px 0 4px; font-size: 8.5px; }    /* RAD, PLATS och siffrorna står innanför ramen */
  .biljett__plats span { gap: 2px; }
  .biljett__plats b { font-size: 21px; }
}

/* ---------- Skicka mejl till oss (Shyar 2 nov: "kan du lägga till en kanpp i varje sektion, skicka mejl till oss över allt fast inte på ett jobbigt sätt men effektiv och bra", valde "1 och 2") ----------
   1 glas: under texten i varje del, kommer en stund efter texten och går med den. 2 hörnet: följer med hela filmen och glänser till när en ny text kommer (mejl.js). */
.mejl { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; text-decoration: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.mejl svg { width: 17px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.mejl:focus-visible { outline: 2px solid var(--guld-ljus); outline-offset: 4px; }

/* 1: glas, som Med ljud och Utan ljud */
.mejl--glas { padding: 0 22px; font-weight: 500; font-size: clamp(12px, .9vw, 14px); letter-spacing: .16em; text-transform: uppercase;
  color: var(--guld-ljus); border: 1px solid rgba(201, 164, 92, .55); border-radius: 999px;
  background: rgba(11, 7, 7, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 200ms ease, border-color 200ms ease, opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1); }
.mejl--glas:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .mejl--glas:hover { background: rgba(201, 164, 92, .18); border-color: var(--guld-ljus); } }
.del--text > .mejl, .slut__b .mejl { opacity: 0; transform: translate3d(0, 10px, 0); }
.del--text.pa > .mejl, .slut__b.pa .mejl { opacity: 1; transform: none; transition-delay: 0s, 0s, 1300ms, 1300ms; }   /* bara inkomsten väntar, inte färgen när man pekar */
.del--text > .mejl { margin-top: clamp(4px, 1.2svh, 14px); }
.slut__b .programblad { display: grid; }
.slut__b .mejl { margin-top: clamp(14px, 2.6svh, 28px); justify-self: center; }
.val .mejl { margin-top: clamp(8px, 1.6svh, 18px); }
.val.vald .mejl { opacity: 0; pointer-events: none; transition: opacity 500ms ease 240ms; }

/* 2: hörnet, bredvid Ljud av. Syns från att filmen börjat tills biljetten kommer (mejl.js). */
.mejl--horn { padding: 0 16px; margin-right: 4px; font-weight: 500; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--guld-ljus);
  border: 1px solid rgba(201, 164, 92, .5); border-radius: 999px; background: rgba(11, 7, 7, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s linear 500ms, background-color 200ms ease, border-color 200ms ease; }
.mejl--horn.syns { opacity: 1; visibility: visible; transition: opacity 700ms ease, visibility 0s, background-color 200ms ease, border-color 200ms ease; }
.mejl--horn.blink { animation: hornglans 1400ms ease-in-out; }
@keyframes hornglans { 0%, 100% { border-color: rgba(201, 164, 92, .5); box-shadow: none; } 45% { border-color: var(--guld-ljus); box-shadow: 0 0 18px rgba(240, 200, 120, .35); } }
@media (hover: hover) and (pointer: fine) { .mejl--horn:hover { background: rgba(201, 164, 92, .18); border-color: var(--guld-ljus); } }
@media (max-width: 759px) {          /* bredvid Ljud av krockar den med hörnraden: ett kuvert under rundknappen, lika stor ring */
  .mejl--horn { position: fixed; top: calc(60px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); width: 44px; padding: 0; margin: 0;
    isolation: isolate; border-color: transparent; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mejl--horn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mejl--horn svg { width: 15px; height: 11.5px; }
  .mejl--horn::before { content: ''; position: absolute; inset: 6px; z-index: -1; border-radius: 50%; border: 1.5px solid rgba(201, 164, 92, .7); background: rgba(11, 7, 7, .4); }
  .mejl--horn.blink { animation: none; } .mejl--horn.blink::before { animation: hornglans 1400ms ease-in-out; }
}

/* raden som säger att adressen är kopierad om inget mejlprogram öppnas */
.mejl__kopia { position: fixed; z-index: 6; left: 50%; bottom: calc(18px + var(--fot)); margin: 0; transform: translate(-50%, 8px); padding: 10px 16px; border-radius: 999px;
  font-size: 14px; color: var(--ben); background: rgba(11, 7, 7, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(201, 164, 92, .35);
  opacity: 0; pointer-events: none; transition: opacity 400ms ease, transform 400ms ease; white-space: nowrap; }
.mejl__kopia.syns { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .mejl, .mejl--horn, .mejl--horn::before { transition: none !important; animation: none !important; } }