/* Version 2: gemensamma komponenter och interaktioner */

/* =========================================================================
   VERSION 2 — gemensamma komponenter och nya interaktioner
   ========================================================================= */

/* Bakgrunder: samma formspråk överallt, varmare för varje kapitel */
.hero{
  background:
    radial-gradient(38% 34% at 86% 18%, rgba(255,108,44,.07), transparent 70%),
    radial-gradient(34% 30% at 8% 84%, rgba(0,135,128,.05), transparent 70%),
    var(--paper);
}
#sec-problem.chapter{
  background:
    radial-gradient(40% 40% at 12% 18%, rgba(230,176,18,.10), transparent 70%),
    radial-gradient(34% 34% at 92% 86%, rgba(255,108,44,.08), transparent 70%),
    var(--sand);
}
#sec-work.chapter{
  background:
    radial-gradient(46% 40% at 50% 46%, rgba(255,108,44,.09), transparent 70%),
    radial-gradient(30% 30% at 6% 92%, rgba(0,135,128,.06), transparent 70%),
    var(--peach);
}

/* Eyebrow: en och samma komponent i alla kapitel */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}
.eyebrow::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.eyebrow--light{ color: #fff; }
.section-head{ position: relative; z-index: 1; text-align: center; }
.contact-section .section-head .contact-headline{ margin-bottom: 14px; }
.contact-lead{
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 auto 64px;
}

/* Knapp: samma pill + boll överallt. Ljus variant för mörka ytor */
.cf-submit{ text-decoration: none; }
.cf-submit.is-light{ background: #fff; color: var(--ink); box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); }
.cf-submit.is-light .cf-submit-label{ transition: color .3s ease .1s; }
.cf-submit.is-light:hover .cf-submit-label{ color: #fff; }

/* Start */
.hero-hint{
  position: absolute;
  z-index: 3;
  left: 34px;
  bottom: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
  box-shadow: 0 8px 20px -10px rgba(34,30,27,.25);
}
.hero-hint::before{
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange);
  animation: hintPulse 1.8s ease-out infinite;
}
@keyframes hintPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,108,44,.55); }
  100%{ box-shadow: 0 0 0 10px rgba(255,108,44,0); }
}
.dot-blob{ cursor: crosshair; }
.dot-blob span.spawned{ animation: spawnPop .7s cubic-bezier(.34,1.8,.5,1) both; }
@keyframes spawnPop{ from{ scale: 0; } to{ scale: 1; } }
@media (max-width: 640px){
  .hero-hint{ display: none; }
  .headline-sub{ bottom: 200px; right: 34px; }
  .headline-tag{ bottom: 128px; }
}

/* Kapitel 1: poppa tankarna */
.problem-side{
  flex: 1 1 30%;
  text-align: right;
  transform: translateY(-48px);
}
.problem-side .problem-headline{ flex: none; transform: none; transition: opacity .3s ease, transform .5s cubic-bezier(.34,1.6,.5,1); }
.problem-side .problem-headline.is-swapping{ opacity: 0; transform: translateY(12px) scale(.96); }
.problem-hint{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.problem-hint b{ color: var(--orange); font-weight: 700; }
.quote-bubble.popped{ cursor: pointer; }
.quote-bubble.is-gone{
  opacity: 0 !important;
  transform: scale(1.35) !important;
  transition: opacity .22s ease, transform .22s ease !important;
  pointer-events: none;
}

/* Kapitel 2: film */
#sec-film{ cursor: pointer; }
.film-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 180px 48px 120px;
  text-align: left;
}
/* Toningen täcker hela sektionen så att den inte får någon kant */
.film-overlay::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 85% at 0% 100%, rgba(42,35,32,.62) 0%, rgba(42,35,32,.38) 35%, rgba(42,35,32,.14) 62%, rgba(42,35,32,0) 85%),
    linear-gradient(to top, rgba(42,35,32,.55) 0%, rgba(42,35,32,.32) 22%, rgba(42,35,32,.12) 45%, rgba(42,35,32,.03) 65%, rgba(42,35,32,0) 80%);
}
.film-headline{
  font-family: var(--font-poster);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: .95;
  color: #fff;
}
.film-lead{
  max-width: 440px;
  margin: 14px 0 24px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}

/* Kapitel 3: resan */
.process-head{
  position: absolute;
  top: 118px;
  left: 44px;
  z-index: 5;
  text-align: left;
  pointer-events: none;
}
.process-headline{
  font-family: var(--font-poster);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: .95;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.process-hint{
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
}
.process-col-tab{ font-family: var(--font-body); }

/* Kapitel 5: polaroiderna gungar */
.polaroid{
  transform: rotate(var(--r, 0deg));
  transform-origin: 50% -22px;
  cursor: pointer;
  transition: box-shadow .3s ease;
}
.polaroid:hover{
  z-index: 4;
  animation: polaroidSwing 1.6s cubic-bezier(.3,.6,.4,1) both;
  box-shadow: 0 26px 44px rgba(34,30,27,.28);
}
@keyframes polaroidSwing{
  0%  { transform: rotate(var(--r, 0deg)); }
  18% { transform: rotate(calc(var(--r, 0deg) * -1 + 5deg)); }
  40% { transform: rotate(calc(var(--r, 0deg) * .5 - 3deg)); }
  62% { transform: rotate(1.5deg); }
  82% { transform: rotate(-.6deg); }
  100%{ transform: rotate(0deg); }
}
.polaroid-title{ transition: color .25s ease; }
.polaroid-title.is-fact{ color: var(--orange); font-weight: 600; }

/* Epilog */
.site-footer{
  position: relative;
  z-index: 10;
  margin-top: -40px;
  padding: 110px 24px 36px;
  border-radius: 40px 40px 0 0;
  background:
    radial-gradient(40% 50% at 50% 0%, rgba(255,108,44,.18), transparent 70%),
    var(--cocoa);
  color: #F4EDE6;
  text-align: center;
  overflow: hidden;
}
.footer-balls{ display: flex; justify-content: center; gap: 14px; margin-bottom: 44px; }
.footer-balls button{
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--c);
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.5);
  transition: transform .45s cubic-bezier(.34,1.8,.5,1);
}
.footer-balls button:hover{ transform: translateY(-14px) scale(1.15); }
.footer-balls button.is-jumping{ animation: ballJump .9s cubic-bezier(.3,.7,.4,1); }
@keyframes ballJump{
  0%{ transform: translateY(0) scale(1); }
  15%{ transform: translateY(4px) scale(1.25, .8); }
  45%{ transform: translateY(-70px) scale(.9, 1.1); }
  75%{ transform: translateY(0) scale(1.2, .85); }
  100%{ transform: translateY(0) scale(1); }
}
.footer-headline{
  font-family: var(--font-poster);
  text-transform: uppercase;
  font-size: var(--fs-h2);
  line-height: .95;
  color: #fff;
}
.footer-lead{
  max-width: 460px;
  margin: 18px auto 34px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(244,237,230,.72);
}
.footer-meta{
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 90px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: rgba(244,237,230,.5);
}

/* Muspekarens följeslagare: en liten boll */
.cursor-ball{
  position: fixed;
  left: 0; top: 0;
  z-index: 500;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: var(--orange);
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: width .35s cubic-bezier(.34,1.6,.5,1), height .35s cubic-bezier(.34,1.6,.5,1), background .25s ease, border-color .25s ease, opacity .2s ease;
}
.cursor-ball.is-on{ opacity: 1; }
.cursor-ball.is-hover{ width: 46px; height: 46px; background: rgba(255,108,44,.12); border-color: var(--orange); }
.cursor-ball.is-film{ width: 118px; height: 118px; background: var(--orange); border-color: var(--orange); }
.cursor-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  color: #fff;
  opacity: 0;
  transition: opacity .2s ease;
}
.cursor-ball.is-film .cursor-label{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .hero-hint::before, .polaroid:hover, .footer-balls button.is-jumping, .dot-blob span.spawned{ animation: none; }
}