/* Booktell på webben, i appens designspråk Sagoljus: samma färger, glas och ljus som appen. */
:root {
  --bas: #0b1322;
  --bas-2: #111c31;
  --ink: #fff6e6;
  --ink-2: rgba(255, 246, 230, .74);
  --ink-3: rgba(255, 246, 230, .5);
  --guld-1: #ffe08a;
  --guld-2: #f5a83c;
  --glas: rgba(255, 255, 255, .085);
  --glas-kant: rgba(255, 255, 255, .16);
  --spela-bg: radial-gradient(circle at 34% 28%, #fff3c4 0%, #ffd56e 42%, #f29f37 100%);
  --spela-ink: #191a2e;
  --spela-glod: 0 0 0 6px rgba(255, 214, 120, .15), 0 14px 36px rgba(255, 170, 60, .5);
  --font: "Avenir Next", "Nunito", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--bas); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.liten-rubrik { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--guld-1); }
.glas { background: var(--glas); border: 1px solid var(--glas-kant); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }

/* Guldknappen och App Store */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 30px; border-radius: 29px; font: 700 17.5px var(--font); text-decoration: none; color: var(--spela-ink); background: var(--spela-bg); box-shadow: var(--spela-glod); white-space: nowrap; }
.knapp.glas-knapp { color: var(--ink); background: var(--glas); box-shadow: inset 0 0 0 1.5px var(--glas-kant); }
.appstore { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 18px; border-radius: 14px; color: #fff; background: #000; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.appstore svg { width: 26px; height: 26px; fill: #fff; }
.appstore span { display: flex; flex-direction: column; line-height: 1.05; }
.appstore small { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.appstore b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.finstilt { font-size: 13.5px; font-weight: 500; color: var(--ink-3); }

/* Eldflugor */
.eldflugor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.eldflugor i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff7d6 0%, #ffd56a 45%, rgba(255, 190, 70, 0) 72%); opacity: .7; animation: glimra 4s ease-in-out infinite; }
@keyframes glimra { 0%, 100% { opacity: .75; transform: translateY(0); } 50% { opacity: .25; transform: translateY(-6px); } }

/* Ljusslingan med foton */
.slinga { position: relative; height: 270px; }
.slinga svg.trad { position: absolute; left: 0; top: 0; width: 100%; height: 110px; overflow: visible; }
.slinga svg.trad path { fill: none; stroke: rgba(225, 196, 140, .85); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.slinga .lampa { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px 2px rgba(255, 214, 110, .8), 0 0 22px 6px rgba(255, 190, 80, .3); animation: lys 3s ease-in-out infinite; transition: background .5s var(--tand, 0s), box-shadow .5s var(--tand, 0s); }
.slinga .lampa.slackt { background: rgba(255, 246, 230, .25); box-shadow: none; transition: none; }
@keyframes lys { 50% { opacity: .55; } }
.foton { position: absolute; top: 0; bottom: 0; display: flex; justify-content: space-around; }
.polaroid { position: relative; flex: none; align-self: flex-start; width: var(--b, 150px); transform-origin: 50% 0; transform: rotate(var(--lut)); animation: gunga 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
.polaroid .papper { position: relative; display: block; padding: 6% 6% 20%; border-radius: 4px; background: #fbf4e6; box-shadow: 0 18px 26px -12px rgba(0, 0, 0, .7); transform-origin: 50% 0; transition: transform .45s cubic-bezier(.2, .9, .25, 1.25), box-shadow .45s; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.polaroid::before { content: ""; position: absolute; left: 50%; top: -10px; width: 12px; height: 22px; margin-left: -6px; border-radius: 2px; background: linear-gradient(90deg, #e8b765, #c98f3c); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); z-index: 2; }
/* Ett foto man pekar på lyfts mot ljuset och rätar upp sig, med ett eget sken. */
@media (hover: hover) {
  .polaroid:hover { animation-play-state: paused; z-index: 3; }
  .polaroid:hover .papper { transform: rotate(calc(var(--lut) * -1)) translateY(10px) scale(1.08); box-shadow: 0 34px 44px -20px rgba(0, 0, 0, .85), 0 0 0 2px rgba(255, 224, 138, .7), 0 0 42px 8px rgba(255, 200, 90, .35); }
}
@keyframes gunga { 0%, 100% { transform: rotate(var(--lut)); } 50% { transform: rotate(calc(var(--lut) * -.4)); } }

/* Telefon och iPad med tunna kanter, som de riktiga: en smal svart ram och en tunn metallkant. Skärmen
   placeras med top/left i procent av enheten själv (padding i procent räknas på föräldern och blev för tjock).
   Ramen är 1,7 % av bredden på telefonen och 2 % på iPaden. */
.telefon { position: relative; width: 280px; aspect-ratio: 1206 / 2622; border-radius: 15.6% / 7.2%; background: #050608; box-shadow: 0 0 0 1px #3a3d46, 0 0 0 2.5px #15171c, 0 40px 80px -30px rgba(0, 0, 0, .9); }
.telefon img { position: absolute; top: .78%; bottom: .78%; left: 1.7%; right: 1.7%; width: 96.6%; height: 98.44%; object-fit: cover; border-radius: 14.2% / 6.55%; }
.ipad { position: relative; width: 100%; aspect-ratio: 2420 / 1668; border-radius: 4.2% / 6.1%; background: #050608; box-shadow: 0 0 0 1px #3a3d46, 0 0 0 3px #15171c, 0 50px 100px -40px rgba(0, 0, 0, .9); }
.ipad img { position: absolute; top: 2.9%; bottom: 2.9%; left: 2%; right: 2%; width: 96%; height: 94.2%; object-fit: cover; border-radius: 2.4% / 3.5%; }

/* Allt som skrollar tonar ut mjukt */
.tona { -webkit-mask-image: linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* Enheter som lutar mot pekaren, med ett svagt sken över glaset */
.lutar { perspective: 1400px; }
.lutar .enheter { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.lutar .enheter .telefon { transform: translateZ(40px); }
.lutar .enheter .ipad::after, .lutar .enheter .telefon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(500px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 240, 200, .12), transparent 60%); opacity: 0; transition: opacity .4s; }
.lutar:hover .enheter .ipad::after, .lutar:hover .enheter .telefon::after { opacity: 1; }

/* Det som tonar fram */
.tona-fram.dold { opacity: 0; transform: translateY(28px); }
.tona-fram.synlig { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }

/* Knapparna svarar på pekaren */
.appstore, .knapp { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
  .appstore:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 12px 26px -10px rgba(0, 0, 0, .8); }
  .knapp:hover { transform: translateY(-2px); box-shadow: 0 0 0 7px rgba(255, 214, 120, .2), 0 18px 44px rgba(255, 170, 60, .6); }
}
.appstore.liten { height: 44px; padding: 0 16px 0 13px; border-radius: 11px; gap: 8px; }
.appstore.liten svg { width: 20px; height: 20px; }
.appstore.liten small { font-size: 9px; }
.appstore.liten b { font-size: 16px; }