/* ShieldPick homepage film.
   Default: five scenes stacked as ordinary full width sections. Everything
   is readable and clickable like this, with no script at all.
   .sp-film--on (added by home-film.js on wide screens with motion allowed)
   turns the stack into one pinned stage that scroll drives. */

.sp-film, .sp-film * { box-sizing: border-box; }
.sp-film {
  position: relative;
  margin: 0;
  background: var(--sp-ink);
  color: var(--sp-text);
  font-family: var(--sp-font-body);
}

.sp-scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 880px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--sp-ink);
}

/* ---- layers ---- */
.sp-scene__layers {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  transform-origin: 50% 50%;
}
.sp-layer {
  position: absolute;
  inset: -4% -4%;
  width: 108%;
  height: 108%;
  max-width: none;
  margin: 0;
  border: 0;
  display: block;
}
img.sp-layer--back { object-fit: cover; }
.sp-layer--mid, .sp-layer--front, .sp-layer--motes {
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* drifting layers are oversized so their travel never uncovers an edge */
.sp-layer--mid { background-image: url('/assets/img/scenes/shared/mid-1600.webp'); opacity: .55; inset: -10%; width: 120%; height: 120%; }
.sp-layer--front { background-image: url('/assets/img/scenes/shared/front-1600.webp'); opacity: .42; inset: -14%; width: 128%; height: 128%; }
.sp-layer--motes { background-image: url('/assets/img/scenes/shared/motes-1600.webp'); opacity: .7; inset: -10%; width: 120%; height: 120%; }

/* scrim: darkens the side the words sit on, and the foot of each scene */
.sp-scene__layers::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 20, 32, .86) 0%, rgba(11, 20, 32, .58) 34%, rgba(11, 20, 32, 0) 66%),
    linear-gradient(180deg, rgba(11, 20, 32, .42) 0%, rgba(11, 20, 32, 0) 22%, rgba(11, 20, 32, 0) 62%, rgba(11, 20, 32, .92) 100%);
  pointer-events: none;
}

/* the thread of light: amber while exposed, cyan once protected */
.sp-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.sp-thread path {
  fill: none;
  stroke: var(--sp-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(76, 201, 240, .9));
}
.sp-thread .sp-thread__sheath { stroke-width: 16; opacity: .16; filter: none; }
.sp-thread--exposed path { stroke: var(--sp-ember); filter: drop-shadow(0 0 6px rgba(244, 162, 89, .95)); }
.sp-thread circle { fill: #fff; filter: drop-shadow(0 0 8px rgba(244, 162, 89, 1)); }

/* ---- words ---- */
.sp-scene__copy {
  position: relative;
  width: 100%;
  max-width: var(--sp-max);
  margin: 0 auto;
  padding: calc(var(--sp-nav-h) + 48px) var(--sp-gutter) clamp(48px, 9vh, 96px);
}
.sp-scene__copy > * { max-width: 34rem; }
.sp-film h1, .sp-film h2 {
  margin: 0;
  font-family: var(--sp-font-ui);
  font-weight: 650;
  letter-spacing: -.032em;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}
.sp-film h1 { font-size: clamp(2.7rem, 6vw, 5rem); }
.sp-film h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.sp-scene__caption {
  margin: 18px 0 0;
  font-family: var(--sp-font-caption);
  font-style: italic;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.25;
  color: #F6E7D3;
  text-wrap: balance;
}
.sp-scene__body {
  margin: 18px 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #CBD7E4;
  text-wrap: pretty;
}
.sp-scene__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; max-width: none; }
.sp-scene__link {
  display: inline-block;
  margin: 22px 0 0;
  font-family: var(--sp-font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--sp-accent);
  text-decoration: underline;
  text-decoration-color: rgba(76, 201, 240, .45);
  text-underline-offset: 5px;
  transition: color .2s var(--sp-ease), text-decoration-color .2s var(--sp-ease);
}
.sp-scene__link:hover { color: var(--sp-accent-hi); text-decoration-color: currentColor; }
.sp-scene__link:focus-visible { outline: 2px solid var(--sp-accent-hi); outline-offset: 4px; border-radius: 4px; }
.sp-scene__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
  font-size: .9rem;
  color: #B4C3D4;
}
.sp-scene__facts li { margin: 0; padding: 0 0 0 20px; position: relative; list-style: none; }
.sp-scene__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--sp-accent);
  border-bottom: 2px solid var(--sp-accent);
  transform: rotate(-45deg);
}

/* ---- scene specifics ---- */
.sp-scene--tunnel .sp-scene__layers { transform-origin: 50% 49.7%; }
.sp-scene--vault .sp-scene__layers { transform-origin: 79% 46%; }
.sp-scene--horizon .sp-scene__layers::after {
  background:
    linear-gradient(90deg, rgba(11, 20, 32, .7) 0%, rgba(11, 20, 32, .3) 36%, rgba(11, 20, 32, 0) 62%),
    linear-gradient(180deg, rgba(11, 20, 32, .5) 0%, rgba(11, 20, 32, 0) 26%, rgba(11, 20, 32, 0) 60%, rgba(11, 20, 32, .94) 100%);
}

/* arrival: a calm dawn drawn in CSS, with the picks */
.sp-scene--arrival .sp-scene__layers {
  background:
    radial-gradient(90% 60% at 72% 112%, rgba(244, 162, 89, .62) 0%, rgba(244, 162, 89, .2) 34%, rgba(244, 162, 89, 0) 62%),
    radial-gradient(70% 50% at 20% 0%, rgba(76, 201, 240, .14) 0%, rgba(76, 201, 240, 0) 70%),
    linear-gradient(180deg, #0B1420 0%, #101f33 48%, #1d2e45 100%);
}
/* real light for the dawn: the horizon plate again, enlarged and blurred */
.sp-scene--arrival .sp-scene__layers::before {
  content: '';
  position: absolute;
  inset: -12%;
  background: url('/assets/img/scenes/horizon/back-960.webp') 88% 30% / 240% auto no-repeat;
  filter: blur(34px) saturate(1.15) brightness(.72);
  opacity: .9;
}
.sp-scene--arrival .sp-scene__layers::after {
  background:
    linear-gradient(90deg, rgba(11, 20, 32, .82) 0%, rgba(11, 20, 32, .6) 36%, rgba(11, 20, 32, .12) 68%, rgba(11, 20, 32, .2) 100%),
    linear-gradient(180deg, rgba(11, 20, 32, .4) 0%, rgba(11, 20, 32, 0) 30%, rgba(11, 20, 32, 0) 68%, rgba(11, 20, 32, .94) 100%);
}
.sp-scene--arrival { align-items: center; }
.sp-scene--arrival .sp-scene__copy {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 40px 56px;
  align-items: center;
  padding-top: calc(var(--sp-nav-h) + 40px);
  padding-bottom: 56px;
}
.sp-scene--arrival .sp-scene__copy > * { max-width: none; }
.sp-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sp-pick {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  border-radius: 18px;
  background: rgba(13, 24, 38, .72);
  border: 1px solid rgba(134, 219, 246, .16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px rgba(4, 9, 16, .45);
}
.sp-pick--first { border-color: rgba(76, 201, 240, .55); }
.sp-pick__rank {
  margin: 0;
  font-family: var(--sp-font-ui);
  font-size: .86rem;
  font-weight: 600;
  color: var(--sp-ember);
}
.sp-pick--first .sp-pick__rank { color: var(--sp-accent); }
.sp-pick__name {
  margin: 6px 0 0;
  font-family: var(--sp-font-ui);
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
}
.sp-pick__score { margin: 12px 0 0; font-family: var(--sp-font-ui); color: var(--sp-muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.sp-pick__score b { font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; color: #fff; margin-right: 4px; }
.sp-pick__points { margin: 14px 0 20px; padding: 0; list-style: none; display: grid; gap: 7px; font-size: .93rem; line-height: 1.45; color: #CBD7E4; }
.sp-pick__points li { margin: 0; padding: 0; list-style: none; }
.sp-pick__actions { margin-top: auto; display: grid; gap: 10px; }
.sp-pick__actions .sp-btn { width: 100%; }
.sp-pick__review { font-family: var(--sp-font-ui); font-size: .93rem; font-weight: 500; color: var(--sp-text); text-align: center; text-decoration: underline; text-decoration-color: rgba(230, 237, 245, .35); text-underline-offset: 4px; }
.sp-pick__review:hover { color: #fff; text-decoration-color: currentColor; }

/* ---- film switched on: one pinned stage ---- */
.sp-film--on { height: 100vh; overflow: hidden; }
.sp-film--on .sp-scene { position: absolute; inset: 0; min-height: 0; }
.sp-film--on .sp-scene__layers, .sp-film--on .sp-layer, .sp-film--on .sp-scene__copy { will-change: transform, opacity; }
.sp-film__hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 5;
  transform: translateX(-50%);
  font-family: var(--sp-font-ui);
  font-size: .82rem;
  font-weight: 500;
  color: rgba(230, 237, 245, .72);
  pointer-events: none;
}
.sp-film--on .sp-film__hint { display: block; }

/* ---- small screens: the stacked version ---- */
@media (max-width: 767px) {
  .sp-scene { min-height: 0; }
  .sp-scene__copy { padding: 250px var(--sp-gutter) 44px; }
  .sp-scene--exposed .sp-scene__copy { padding-top: calc(var(--sp-nav-h) + 190px); }
  .sp-scene__layers::after {
    background: linear-gradient(180deg, rgba(11, 20, 32, .25) 0%, rgba(11, 20, 32, .1) 22%, rgba(11, 20, 32, .88) 48%, rgba(11, 20, 32, 1) 100%);
  }
  .sp-scene--horizon .sp-scene__layers::after {
    background: linear-gradient(180deg, rgba(11, 20, 32, .25) 0%, rgba(11, 20, 32, .1) 22%, rgba(11, 20, 32, .88) 48%, rgba(11, 20, 32, 1) 100%);
  }
  img.sp-layer--back { height: 62%; inset: 0 -4% auto -4%; }
  .sp-layer--front { display: none; }
  .sp-thread { display: none; }
  .sp-scene--arrival .sp-scene__copy { grid-template-columns: 1fr; padding-top: 56px; }
  .sp-picks { grid-template-columns: 1fr; }
  .sp-scene__actions .sp-btn { flex: 1 1 auto; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sp-scene--arrival .sp-scene__copy { grid-template-columns: 1fr; gap: 28px; }
}


/* ---- homepage sections below the film: small adjustments only ---- */
.sp-home-latest .sp-latest {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-latest__item { margin: 0; padding: 0; list-style: none; }
.sp-latest__link {
  display: block;
  height: 100%;
  padding: 20px 20px 18px;
  border-radius: 14px;
  background: var(--sp-card);
  border: 1px solid var(--sp-line);
  color: var(--sp-text);
  text-decoration: none;
  transition: border-color .2s var(--sp-ease), transform .2s var(--sp-ease);
}
.sp-latest__link:hover { border-color: rgba(76, 201, 240, .55); transform: translateY(-2px); }
.sp-latest__link:focus-visible { outline: 2px solid var(--sp-accent-hi); outline-offset: 3px; }
.sp-latest__date { display: block; font-size: .82rem; color: var(--sp-muted); font-variant-numeric: tabular-nums; }
.sp-latest__title { display: block; margin-top: 8px; font-family: var(--sp-font-ui); font-size: 1.08rem; font-weight: 600; line-height: 1.3; color: #fff; }
.sp-latest__desc { display: block; margin-top: 8px; font-size: .92rem; line-height: 1.55; color: var(--sp-muted); }
.sp-home-latest .sp-home-more {
  margin: 48px 0 18px;
  font-family: var(--sp-font-ui);
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}

/* review cards: the provider logo box was wider than its column and ran
   over the bullet list (it did so before the redesign too) */
.vpn-card .vpn-left { min-width: 0; }
.vpn-card .logo-box { width: 100%; max-width: 200px; height: auto; }
.vpn-card .logo-box img { width: 100%; height: auto; }