/* 1. Inledning (biljett 01 grund, biljett 02 animerar .hero-visual) */

.hero {
  padding-top: clamp(40px, 5.5vw, 80px);
  padding-bottom: clamp(72px, 8vw, 128px);
  overflow: clip;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: clamp(40px, 4.5vw, 64px);
  align-items: end;
}

.hero__copy {
  grid-column: 1 / span 8;
  display: grid;
  gap: clamp(24px, 2.6vw, 36px);
  justify-items: start;
}

.hero h1 { max-width: 10.5em; }

.hero__aside {
  grid-column: 9 / -1;
  display: grid;
  gap: 28px;
  justify-items: start;
  padding-bottom: 0.6em;
}
.hero__aside .lead { color: var(--ink-2); max-width: 22em; }

/* ---------- Produktbild ---------- */
.hero-visual {
  grid-column: 1 / -1;
  position: relative;
  padding: clamp(14px, 3.2vw, 48px);
  border-radius: 24px;
  background: var(--green);
  isolation: isolate;
}
/* svagt ljus i den gröna scenen */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(60% 80% at 85% 0%, rgb(198 243 107 / 0.16), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgb(0 0 0 / 0.22), transparent 70%);
}

.hero-visual__frame { position: relative; }

.hv-logo { width: 18px; height: 18px; color: var(--green); flex: none; }

.hv-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 40px minmax(0, 1fr) 40px minmax(0, 1.2fr);
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--card);
}

.hv-col { display: grid; gap: 10px; align-content: center; min-width: 0; }

.hv-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-3);
  margin-bottom: 2px;
}

.hv-link { width: 100%; height: 200px; color: var(--line-2); }

/* Källor */
.hv-source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hv-source {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.hv-source span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.hv-ico {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 7px;
  background: var(--paper-2);
  color: var(--green);
}
.hv-ico svg { width: 16px; height: 16px; }
.hv-ok { width: 14px; height: 14px; margin-left: auto; color: var(--ok-dot); flex: none; }

/* Två modeller */
.hv-model {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
.hv-model__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hv-model__name { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; color: var(--ink); }
.hv-model p { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.hv-model .status { font-size: 0.75rem; padding: 1px 8px 1px 7px; }

/* Utlåtande */
.hv-verdict__card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.hv-verdict__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hv-verdict__title { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
.hv-verdict__card > p:not(.source) { font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.hv-verdict__card .source { flex-wrap: wrap; }

/* ---------- Mobil och surfplatta ---------- */
@media (max-width: 960px) {
  .hero__copy, .hero__aside { grid-column: 1 / -1; }
  .hero__aside { padding-bottom: 0; }
  .hero__grid { row-gap: 28px; }
  .hero-visual { margin-top: 12px; }

  .hv-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 12px; }
  .hv-link { display: none; }
  .hv-sources, .hv-verdict { grid-column: 1 / -1; }
  .hv-models { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .hv-models .hv-label { grid-column: 1 / -1; }
  .hv-source-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .hero-visual { border-radius: 18px; margin-inline: calc(var(--gutter) * -0.5); }
  .hv-flow { padding: 16px; }
  .app-frame__bar { padding: 10px 12px; }
  .hv-source { padding: 7px 8px; font-size: 0.8125rem; gap: 8px; }
  .hv-ico { width: 22px; height: 22px; }
  .hv-ok { display: none; }
  .hv-model { padding: 10px; }
  .hv-model__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hv-verdict__card { padding: 14px; }
}

/* Smal mobil: källistan i en kolumn, bara tre källor */
@media (max-width: 600px) {
  .hv-source-list { grid-template-columns: 1fr; }
  .hv-source:nth-child(4) { display: none; }
}

/* ---------- Produktbild: animation (biljett 02) ----------
   Slutläget står i markupen. Det som är dolt i vila (tänker-texten och
   etiketten "Granskar varandra…") är dolt redan i HTML. Från-tillstånd sätts
   bara av hv-armed (JS) och animationerna körs bara av hv-play, och bara när
   rörelse är tillåten. Tider i ms från hv-play (t = 0). */

/* Samma cell: höjden ändras inte när texten byts */
.hv-model__body { display: grid; }
.hv-model__think,
.hv-model__text { grid-area: 1 / 1; }

/* "Tänker"-svep: text-gradient som rör sig en gång */
.hv-model .hv-model__think {
  color: transparent;
  opacity: 0;
  background: linear-gradient(90deg, var(--ink-3) 0 40%, var(--ink) 50%, var(--ink-3) 60% 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Statusbyte i fast höjd */
.hv-label--swap {
  display: grid;
  overflow: hidden;
  white-space: nowrap;
}
.hv-label--swap > span { grid-area: 1 / 1; }
.hv-label__b { opacity: 0; }

/* Utlåtandets markering: fylls från vänster */
.hv-verdict__card mark {
  background: linear-gradient(var(--lime-wash), var(--lime-wash)) no-repeat 0 0 / 100% 100%;
}

/* Hover på produktytan (desktop) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-visual__frame { transition: box-shadow var(--dur-2) var(--ease-out-soft); }
}
@media (hover: hover) {
  .hero-visual__frame:hover {
    box-shadow: var(--shadow-product), 0 0 30px rgb(17 18 20 / 0.12);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Från-tillstånd före start (hv-armed) */
  .js .hero-visual.hv-armed .hero-visual__frame { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  .js .hero-visual.hv-armed .hv-source { opacity: 0; transform: translateX(-12px); }
  .js .hero-visual.hv-armed .hv-ok { opacity: 0; transform: scale(0.4); }
  .js .hero-visual.hv-armed .hv-link path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .hero-visual.hv-armed .hv-model { opacity: 0; transform: translateY(12px); }
  .js .hero-visual.hv-armed .hv-model__text { opacity: 0; transform: translateY(6px); }
  .js .hero-visual.hv-armed .hv-model .status { opacity: 0; transform: scale(0.9); }
  .js .hero-visual.hv-armed .hv-verdict__card { opacity: 0; transform: translateY(16px) scale(0.98); filter: blur(6px); }
  .js .hero-visual.hv-armed .hv-verdict__card mark { background-size: 0% 100%; }
  .js .hero-visual.hv-armed .source__doc { opacity: 0; transform: translateY(4px); }

  /* Koreografi */
  .hv-play .hero-visual__frame { animation: hv-rise 900ms var(--ease-out) both; }

  .hv-play .hv-source { animation: hv-slide 500ms var(--ease-out) 500ms both; }
  .hv-play .hv-source:nth-child(2) { animation-delay: 620ms; }
  .hv-play .hv-source:nth-child(3) { animation-delay: 740ms; }
  .hv-play .hv-source:nth-child(4) { animation-delay: 860ms; }

  .hv-play .hv-ok { animation: hv-ok-in 320ms var(--ease-out-soft) 700ms both; }
  .hv-play .hv-source:nth-child(2) .hv-ok { animation-delay: 820ms; }
  .hv-play .hv-source:nth-child(3) .hv-ok { animation-delay: 940ms; }
  .hv-play .hv-source:nth-child(4) .hv-ok { animation-delay: 1060ms; }

  .hv-play .hv-link path { stroke-dasharray: 1; animation: hv-draw 600ms var(--ease-draw) 1250ms both; }
  .hv-play .hv-models ~ .hv-link path { animation-delay: 4000ms; }

  .hv-play .hv-model {
    animation: hv-model-in 500ms var(--ease-out) 1500ms both, hv-flash 600ms var(--ease-out-soft) 2700ms both;
  }
  .hv-play .hv-model + .hv-model { animation-delay: 1620ms, 3000ms; }

  .hv-play .hv-model__think {
    animation: hv-sweep 2000ms var(--ease-draw) 1700ms forwards, hv-think-out 300ms var(--ease-in-out) 3700ms forwards;
  }
  .hv-play .hv-model + .hv-model .hv-model__think { animation-delay: 1950ms, 3700ms; }
  .hv-play .hv-model + .hv-model .hv-model__think { animation-duration: 1750ms, 300ms; }
  .hv-play .hv-model__text { animation: hv-text-in 300ms var(--ease-in-out) 3700ms both; }

  .hv-play .hv-model .status { animation: hv-status-in 320ms var(--ease-out-soft) 3800ms both; }
  .hv-play .hv-model + .hv-model .status { animation-delay: 3900ms; }

  .hv-play .hv-label__a {
    animation: hv-swap-out 300ms var(--ease-in-out) 2600ms forwards, hv-swap-in 300ms var(--ease-in-out) 3400ms forwards;
  }
  .hv-play .hv-label__b {
    animation: hv-swap-in 300ms var(--ease-in-out) 2600ms forwards, hv-swap-out 300ms var(--ease-in-out) 3400ms forwards;
  }

  .hv-play .hv-verdict__card { animation: hv-verdict-in 750ms var(--ease-out) 4300ms both; }
  .hv-play .hv-verdict__card mark { animation: hv-mark 1100ms var(--ease-out) 4900ms both; }
  .hv-play .source__doc { animation: hv-chip-in 400ms var(--ease-out) 5200ms both; }
  .hv-play .source__doc { animation-delay: calc(5200ms + var(--i, 0) * 100ms); }
  .hv-play .source__doc:nth-child(2 of .source__doc) { --i: 1; }

  @keyframes hv-rise {
    from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
  }
  @keyframes hv-slide {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hv-ok-in {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hv-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }
  @keyframes hv-model-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hv-flash {
    0%, 100% { border-color: var(--line); }
    50% { border-color: var(--green); }
  }
  @keyframes hv-sweep {
    from { opacity: 1; background-position: 200% 0; }
    to { opacity: 1; background-position: -100% 0; }
  }
  @keyframes hv-think-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes hv-text-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hv-status-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hv-swap-in {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hv-swap-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-100%); }
  }
  @keyframes hv-verdict-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
  }
  @keyframes hv-mark {
    from { background-size: 0% 100%; }
    to { background-size: 100% 100%; }
  }
  @keyframes hv-chip-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
}