/* Stilskiss B – Backyard Groups egen stil enligt loggan och den mörkgröna bannern.
   Läggs ovanpå styles.css. Festivalteasern behåller festivalens färger. */

.stil-b {
  --natt: #0e100b;
  --natt-2: #151810;
  --oliv: #8d9b2f;
  --oliv-ljus: #b4c34c;
  --oliv-mork: #3d4515;
  --guld: #d6b35c;
  --guld-ljus: #ead08a;
  --vit: #f2eee2;
  --dimma: #c6c4b2;
  --linje: rgba(242, 238, 226, .12);

  /* en lugnare palett: olivgrönt och guld växlar mellan tjänsterna */
  --kat-event: #d6b35c;
  --kat-tradgard: #b4c34c;
  --kat-fix: #d6b35c;
  --kat-stad: #b4c34c;
  --kat-second: #d6b35c;
  background: var(--natt);
}

/* Festivalen är ett eget varumärke och behåller sina färger */
.stil-b .festival-teaser {
  --natt: #120d2b;
  --skymning: #3a1a5e;
  --guld: #f8bb2b;
  --guld-ljus: #ffd56a;
  --magenta: #e6219a;
  --magenta-ljus: #ff5cc0;
  --vit: #fff6ea;
  --dimma: #c9c0e6;
  --kat-event: #e6219a;
  --kat-tradgard: #8fae2f;
  --kat-fix: #f2872a;
  --kat-stad: #19a9b8;
  --kat-second: #5b5ff0;
  color: var(--vit);
}

/* Sliten struktur som i loggans vita text: en statisk brusmask */
.stil-b .slitet {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -11 8.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -11 8.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask-size: 260px; mask-size: 260px;
}

/* Sidhuvud */
.stil-b .sidhuvud { background: rgba(14, 16, 11, .92); }
.stil-b .sidhuvud.over-hero { background: transparent; }
.stil-b .sidhuvud.over-hero.scrollad, .stil-b .sidhuvud.over-hero:has(.huvudmeny.oppen) { background: rgba(14, 16, 11, .95); }
.stil-b .logo img { box-shadow: 0 0 0 2px rgba(141, 155, 47, .5); }
.stil-b .logo small { color: var(--oliv-ljus); }
.stil-b .huvudmeny .meny-festival a { background: var(--guld); }
@media (max-width: 859px) { .stil-b .huvudmeny { background: var(--natt-2); } }

/* Toppen: natt i skogen, varmt sken från huset */
.stil-b .hero {
  background:
    radial-gradient(60% 55% at 82% 92%, rgba(214, 179, 92, .26) 0%, transparent 65%),
    radial-gradient(80% 50% at 15% 100%, rgba(141, 155, 47, .28) 0%, transparent 60%),
    linear-gradient(180deg, #07080a 0%, #0b0f0c 35%, #131a0e 70%, #1c2510 92%, #1f2912 100%);
}
.stil-b .himmel-varm {
  background: radial-gradient(55% 45% at 80% 95%, rgba(255, 196, 92, .38) 0%, transparent 70%);
  animation: varm 9s ease-in-out infinite alternate;
}
@keyframes varm { from { opacity: .35; } to { opacity: 1; } }
.stil-b .hero-stjarnor { opacity: .45; }

/* Dimma som driver långsamt mellan granlagren */
.stil-b .dimma {
  position: absolute; left: -50%; width: 200%; bottom: 90px; height: 220px;
  background:
    radial-gradient(30% 45% at 20% 60%, rgba(180, 195, 120, .12), transparent 70%),
    radial-gradient(26% 40% at 55% 55%, rgba(180, 195, 120, .10), transparent 70%),
    radial-gradient(30% 45% at 85% 60%, rgba(180, 195, 120, .12), transparent 70%);
  animation: dimma 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes dimma { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

/* Eldflugor */
.stil-b .eldflugor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stil-b .eldflugor span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #f6e08a; box-shadow: 0 0 8px 2px rgba(246, 224, 138, .7);
  animation: flyg var(--d) ease-in-out var(--f) infinite alternate, blink calc(var(--d) / 3) ease-in-out var(--f) infinite alternate;
  will-change: transform, opacity;
}
@keyframes flyg { 0% { transform: translate(0, 0); } 50% { transform: translate(26px, -34px); } 100% { transform: translate(-18px, -70px); } }
@keyframes blink { from { opacity: .1; } to { opacity: 1; } }

/* Huset (samma lager som scenen i skiss A) */
.stil-b .lager-scen { right: 5%; height: max(200px, 17vw); aspect-ratio: 340 / 240; bottom: 30px; }
.stil-b .husglod { animation: varm 5s ease-in-out infinite alternate; }
.stil-b .fonster { animation: fonster 7s ease-in-out infinite alternate; }
@keyframes fonster { from { fill: #f4c35a; } to { fill: #ffd98a; } }
.stil-b .lager-scen .glod { animation: glod 2.6s ease-in-out infinite alternate; }
.stil-b .lager-scen .glod:nth-of-type(odd) { animation-duration: 3.7s; animation-delay: -1.2s; }
@media (max-width: 859px) { .stil-b .lager-scen { height: 130px; right: -10px; bottom: 34px; } }

/* Rubriken: vit sliten text och olivgrön pensel, som i loggan */
.stil-b .husikon { width: 120px; height: auto; color: var(--oliv-ljus); margin: 0 0 12px -6px; display: block; }
.stil-b .hero-text .kicker { color: var(--guld); opacity: 1; letter-spacing: .16em; }
.stil-b .hero h1 { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(2.6rem, 11.2vw, 6.4rem); line-height: .96; text-shadow: none; }
@media (min-width: 900px) { .stil-b .hero h1 { font-size: min(6.6rem, 6.9vw); } }
.stil-b .hero h1 .slitet { color: var(--vit); }
.stil-b .hero h1 .pensel { font-family: var(--rubrik); font-weight: 400; color: var(--oliv-ljus); font-size: .82em; transform: rotate(-3deg); transform-origin: left; margin-top: 10px; display: block; }
.stil-b .hero-ingress { color: #e4e2d2; }
.stil-b .hero-text { text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }

/* Penseldrag under rubrikerna i olivgrönt, i festivalen magenta */
.stil-b .mala::after { background: var(--oliv); }
.stil-b .festival-teaser .mala::after { background: var(--magenta); }
.stil-b .sektion-rubrik { font-family: var(--smal); font-weight: 700; letter-spacing: .01em; }
.stil-b .sektion-rubrik .guld { font-family: var(--rubrik); font-weight: 400; color: var(--oliv-ljus); }

/* Skylten: mörkare trä, guldprickar */
.stil-b .skylt a {
  background:
    repeating-linear-gradient(178deg, rgba(0,0,0,0) 0 7px, rgba(0,0,0,.12) 7px 8px, rgba(255,255,255,.03) 8px 15px),
    linear-gradient(180deg, #6a4a2a, #4a3119 55%, #33210f);
}
.stil-b .vagskylt-stolpe { background: linear-gradient(90deg, #22160a, #4a3119 40%, #22160a); }

/* En kontakt – olivgrönt penseldrag bakom */
.stil-b .kontaktband { background: var(--natt); }
.stil-b .kontaktband .skrift { position: relative; color: var(--vit); isolation: isolate; padding: 6px 4px; }
.stil-b .kontaktband .skrift::before {
  content: ""; position: absolute; inset: 8% -14px 4% -10px; z-index: -1; background: var(--oliv-mork);
  clip-path: polygon(2% 14%, 18% 2%, 52% 10%, 84% 0, 99% 12%, 97% 52%, 100% 88%, 70% 100%, 34% 92%, 6% 100%, 0 60%);
  transform: rotate(-1.5deg);
}
.stil-b .kontaktband .orter svg { color: var(--oliv-ljus); }

/* Aktuellt */
.stil-b .aktuellt { background: var(--natt); }
.stil-b .erbjudande { background: #171a12; }
.stil-b .etikett { color: var(--natt); }
.stil-b .pris { color: var(--natt); }

/* Tjänster: lite ljusare olivton, lugna kort med ikon som i bannern */
.stil-b .tjanster { background: #1b2013; }
.stil-b .tjanster .ingress { color: #d7d5c4; }
.stil-b .tjanst { background: #11140d; border-top-width: 3px; }
.stil-b .tjanst-text { position: relative; }
.stil-b .tjanst-ikon {
  position: absolute; top: -28px; right: 18px; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: #11140d; color: var(--kat);
  box-shadow: 0 0 0 3px var(--kat);
  transition: transform .25s ease;
}
.stil-b .tjanst-ikon svg { width: 28px; height: 28px; }
.stil-b .tjanst:hover .tjanst-ikon { transform: rotate(-8deg) scale(1.06); }
.stil-b .tjanst .devis { color: var(--kat); }

/* Sidfot */
.stil-b .sidfot { background: #080907; }
.stil-b .sidfot .devis-stor { color: var(--oliv-ljus); }

/* Lugn version */
@media (prefers-reduced-motion: reduce) {
  .stil-b .eldflugor span { opacity: .6; }
  .stil-b .himmel-varm { opacity: .7; }
}

.stil-b .forslag { background: #070806; color: var(--dimma); }