/* ==========================================================================
   Glass Card — global utility. Add the class `glass-card` to any element.

   Effekten byggs i två lager:
     1. Den här filen ritar kanten (::before) och skuggan
     2. js/vendor/glassfilter.js läser --fx-filter och injicerar ett
        .fx-container-lager med backdrop-filter bakom innehållet

   Båda krävs. Saknas --fx-filter blir kortet bara en vanlig ruta med kant.
   ========================================================================== */

.glass-card {
  border-radius: 20px;
  box-shadow:
    0 2px 4px 0 rgba(0, 0, 0, 0.10),
    0 8px 24px 0 rgba(0, 0, 0, 0.12),
    0 16px 48px 0 rgba(0, 0, 0, 0.10);
  position: relative;
  overflow: hidden;
  transition: 0.3s ease all;
}

/* The .fx-container is the backdrop-filter layer injected by glassfilter.js —
   keep it behind the card's own content. */
.glass-card .fx-container {
  z-index: 0 !important;
}

/* Keep the card's own content above the JS glass layer (fx-container, z-index 0).
   position: relative is required for z-index to take effect on the children. */
.glass-card > * {
  position: relative;
  z-index: 1;
}

/* Glass border — a thin specular rim like Figma's native Glass effect: a clean
   light edge, brightest along the top / upper-left where the light hits, faint
   on the sides, with a subtle catch on the far (lower-right) edge. No inner glow
   or dark band, so the edge stays crisp instead of glowing. */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.80) 0%,
    rgba(255, 255, 255, 0.20) 22%,
    rgba(255, 255, 255, 0.05) 52%,
    rgba(255, 255, 255, 0.10) 80%,
    rgba(255, 255, 255, 0.35) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}

/* Small glass pills (hero tags / eyebrows) get a thinner 1px rim vs the card's
   1.5px — keeps the delicate edge in proportion to the smaller shape. */
.site-hero__tag::before,
.case-hero-x__tag::before,
.service-hero__eyebrow::before { padding: 1px; }


/* ==========================================================================
   Användning i SSM
   ========================================================================== */

/*
 * Filtret som glasytan byggs av — samma recept som dragster.se använder på
 * sina glaskort (se hero.css i temat):
 *
 *   blur(8px)              mjukar upp det som ligger bakom
 *   liquid-glass(2, 10, 1) brytningen i kanterna — styrka 2, mjukhet 10,
 *                          färgspridning 1 (ger prismaeffekten i kanten)
 *   saturate(1.25)         ger färgerna bakom mer liv
 */
.step-card,
.land-stats {
  --fx-filter: blur(8px) liquid-glass(2, 10, 1) saturate(1.25);
}

/*
 * Korten måste släppa igenom mycket ljus för att glaset ska synas.
 * Temat kör 8 % vit — men där ligger korten på foto med vit text. Här är
 * texten mörk mot ljus botten, så 22 % behövs för att den ska hålla
 * kontrast. Det är fortfarande genomskinligt nog för att brytningen och
 * kurvan bakom ska läsas tydligt.
 */
.step-card {
  background: rgba(255, 255, 255, 0.22);
  border: none;                 /* glaskanten ritas av ::before i stället */
  box-shadow:
    0 2px 4px 0 rgba(28, 16, 36, 0.08),
    0 8px 24px 0 rgba(28, 16, 36, 0.10),
    0 16px 48px 0 rgba(28, 16, 36, 0.08);
}

.land-stats {
  background: rgba(255, 255, 255, 0.28);
  border-top: none;
  border-bottom: none;
  border-radius: var(--radius-image);
}

/*
 * Kurvan bakom glaset.
 *
 * DET HÄR var vad som saknades. Glas syns bara i förhållande till vad som
 * ligger bakom — på dragster.se ligger korten över foto och en kraftig
 * färgkurva, vilket är därför effekten är så tydlig där. Mot en jämn
 * pastellbakgrund fanns i praktiken ingenting att bryta.
 *
 * Kurvan är Dragsters egen (section__curve ur temat) med samma 58px stroke
 * och blå gradient.
 */
.land-curve {
  position: absolute;
  left: 50%;
  /* Förskjuten så att kurvans mest karaktäristiska svep hamnar bakom
     kortraden i stället för ovanför den. */
  transform: translateX(-50%) translateY(-18%);
  top: 0;
  width: max(1440px, 110vw);
  height: auto;
  aspect-ratio: 1440 / 781;
  pointer-events: none;
  z-index: 0;
  /* Ingen mask och ingen klippning här — kurvan ska löpa vidare ut ur bild.
     Det som hindrar vågrät rullning är overflow-x: clip på sidnivå. */
}

/* Omslaget runt processkorten är referensram för kurvan. Utan position:
   relative här skulle kurvan positionera sig mot sidan i stället och hamna
   uppe i hero-sektionen.

   Ingen overflow här: kurvan ska tillåtas löpa utanför sektionen och
   försvinna först vid skärmkanten. Klippningen sker på sidnivå i stället
   (html/body i styling.css), vilket hindrar vågrät rullning. */
.steps-wrap {
  position: relative;
  padding-block: 40px;
}

/* Rubrik och kort ligger ovanpå kurvan */
.steps-wrap > *:not(.land-curve) {
  position: relative;
  z-index: 1;
}

/*
 * Glas behöver något att bryta. Mot en helt jämn bakgrund syns effekten
 * knappt — därför ligger mjuka färgfält bakom hela landningssidan.
 *
 * Bakgrunden sitter på VYN och inte på varje sektion. Sektionerna är
 * centrerade med max-width 1080px, så en bakgrund per sektion klipptes vid
 * deras kant och gav en synlig lodrät skarv mitt på sidan.
 *
 * position: fixed gör att fälten står stilla medan sidan rullar. Det ger
 * en lugn, sammanhållen atmosfär — och glaset bryter olika mycket beroende
 * på var korten befinner sig, vilket gör effekten levande utan animation.
 */
#view-landing::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 15% 12%, rgba(54, 69, 253, 0.08) 0%, transparent 70%),
    radial-gradient(820px 580px at 85% 30%, rgba(229, 218, 255, 0.45) 0%, transparent 70%),
    radial-gradient(760px 540px at 50% 78%, rgba(143, 120, 255, 0.10) 0%, transparent 70%);
}

/* Rörelse-känsliga användare: ta bort övergången, behåll utseendet. */
@media (prefers-reduced-motion: reduce) {
  .glass-card { transition: none; }
}

/* ==========================================================================
   Glas på dashboardens workshopkort
   ========================================================================== */

/* Frostat: tätare vit botten + kraftigare blur än landningens klarglas.
   Skuggan är medvetet EN mjuk, blåtonad pöl i stället för glasets tre
   mörka lager — de blev leriga mot den ljusa lavendelbakgrunden. */
.launcher-card.glass-card,
.service-card.glass-card {
  --fx-filter: blur(14px) liquid-glass(2, 10, 1) saturate(1.2);
  background: rgba(255, 255, 255, 0.55);
  border: none;               /* glaskanten ritas av ::before i stället */
  box-shadow:
    0 1px 2px 0 rgba(28, 16, 36, 0.04),
    0 12px 32px -8px rgba(54, 69, 253, 0.10);
}

/* Lyftet djupnar samma mjuka skugga — inte styling.css --shadow-md. */
.launcher-card.glass-card:hover,
.service-card.glass-card:hover {
  box-shadow:
    0 2px 4px 0 rgba(28, 16, 36, 0.05),
    0 20px 44px -8px rgba(54, 69, 253, 0.14);
}

/* Statusbadgen ("Analys klar") ska vara en liten pill uppe till höger.
   Regeln .glass-card > * gör alla kortbarn position:relative — det slog
   ut badgens absoluta läge och lät flexkolumnen sträcka den till en hel
   rad. Här återfår den sitt hörn, ovanpå glaslagret. */
.launcher-card.glass-card .launcher-status {
  position: absolute;
  z-index: 2;
}

/* Glas behöver något att bryta — samma mjuka färgfält som landningssidan,
   fast bakom appens dashboard. position: fixed ger stillastående atmosfär
   medan innehållet rullar. */
#view-app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 20% 18%, rgba(54, 69, 253, 0.07) 0%, transparent 70%),
    radial-gradient(820px 580px at 80% 40%, rgba(229, 218, 255, 0.40) 0%, transparent 70%),
    radial-gradient(760px 540px at 45% 85%, rgba(143, 120, 255, 0.09) 0%, transparent 70%);
}

/*
 * Ormen ska hålla sig slank på stora skärmar (tv-genomgångar). Kurvan
 * skalas med 110vw OCH med zoom-stegen i styling.css (uppmätt: vw-
 * bredden multipliceras med zoomfaktorn), så stegen här är beräknade
 * med BÅDA inräknade — visuell tjocklek landar kring 60–75px oavsett
 * skärm. Ändras zoom-brytpunkterna måste de här räknas om.
 */
@media (min-width: 1800px) { .land-curve-path { stroke-width: 44; } }
@media (min-width: 1920px) { .land-curve-path { stroke-width: 40; } }
@media (min-width: 2200px) { .land-curve-path { stroke-width: 32; } }
@media (min-width: 2560px) { .land-curve-path { stroke-width: 26; } }
@media (min-width: 3000px) { .land-curve-path { stroke-width: 20; } }
@media (min-width: 3600px) { .land-curve-path { stroke-width: 14; } }