/* Microsoft 365-adoptie, ronde 9. Overschrijft de adoptie-regels uit oplossingen.css (die blijft gedeeld en ongewijzigd).
   Volgorde: opening, vergeetcurve, sterrenhemel van de licentie, de boog met maanfasen, slot met bewijs. */

/* ── Opening: de echte maan, op 390 dichter bij het productbeeld in plaats van los onder de knop ── */
@media (max-width: 560px) {
  .s-open--product .s-open__beeld:has(.am-hemel) { margin-top: 120px; }
  .am-hemel { right: -18px; width: 168px; top: -104px; }
}

/* ── Productbeeld: maanfasen uit de echte maanfoto ── */
.ad__maan { display: block; width: 22px; height: 22px; border-radius: 50%; }

/* ── Vergeetcurve: een zacht verloop van lichtblauw naar paars onder de curve, nooit onder de tekst ── */
.ad-kost::before { content: ""; position: absolute; z-index: 0; left: 30%; right: -12%; top: 18%; bottom: -14%; pointer-events: none;
  background:
    radial-gradient(50% 55% at 70% 62%, rgba(123, 74, 226, .17), rgba(123, 74, 226, .05) 55%, rgba(123, 74, 226, 0) 80%),
    radial-gradient(42% 50% at 34% 78%, rgba(94, 151, 255, .12), rgba(94, 151, 255, 0) 75%);
  /* de verlopen lopen voorbij de onderkant van dit vak; het masker laat ze daarvoor uitdoven, zodat er geen rechte rand komt */
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 98%); mask-image: linear-gradient(180deg, #000 50%, transparent 98%); }

/* ── De sterrenhemel van je licentie ── */
.ad-hemel-sectie { overflow: clip; }
.ad-hemel__sfeer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ad-hemel__sfeer::before, .ad-hemel__sfeer::after { content: ""; position: absolute; background: center / contain no-repeat; }
.ad-hemel__sfeer::before { right: -4%; top: 6%; bottom: 6%; width: 62%; background-image: url("../../sfeer/v2/nevel-paars.webp"); opacity: .38;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent); }
.ad-hemel__sfeer::after { right: -10%; top: 50%; width: 84%; aspect-ratio: 2600 / 760; transform: translateY(-50%) rotate(-22deg); background-image: url("../../sfeer/v2/melkweg.webp"); opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); }
.ad-hemel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: center; }
.ad-hemel__tekst .s-groot { margin-top: 24px; }
.ad-hemel__meer { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--tekst-2); max-width: 32em; }
.ad-hemel__keuze { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ad-wissel { display: flex; gap: 8px; }
.ad-wissel button { font: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 11px 16px; border: 1px solid rgba(171, 225, 246, .22); border-radius: 4px; background: rgba(8, 17, 40, .6); color: var(--tekst-2); cursor: pointer; }
.ad-wissel button:hover { color: var(--wit); border-color: rgba(171, 225, 246, .45); }
.ad-wissel button[aria-pressed="true"] { color: var(--zij); background: rgb(var(--laag)); border-color: rgb(var(--laag)); }
.ad-wissel button:focus-visible { outline: 2px solid var(--ijs); outline-offset: 2px; }
.ad-hemel__stand { display: grid; font-size: 15px; color: var(--wit); }
.ad-hemel__stand > span { grid-area: 1 / 1; transition: opacity 200ms linear; }
.ad-hemel[data-stand="nu"] .ad-hemel__stand > [data-p="na"], .ad-hemel[data-stand="na"] .ad-hemel__stand > [data-p="nu"] { opacity: 0; visibility: hidden; }

.ad-hemel__veld { position: relative; margin: 0; aspect-ratio: 1.3; }
.ad-hemel__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ad-hemel__lijnen path { fill: none; stroke: var(--ijs); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0;
  transition: opacity 300ms var(--erin); transition-delay: calc(var(--i) * 45ms); }
.ad-hemel__veld.is-in path[data-g="2"], .ad-hemel[data-stand="na"] .ad-hemel__veld.is-in path[data-g="1"] { opacity: .3; }

.ad-hemel__apps { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.ad-hemel__apps li { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: flex; align-items: center; gap: 8px;
  transform: translate(-14px, -50%); font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--wit); }
.ad-hemel__apps li.is-links { flex-direction: row-reverse; transform: translate(calc(-100% + 14px), -50%); }
/* ster: scherpe witte kern, ijsblauwe gloed met een zweem paars, en dunne spaken als hij aan staat */
.ad-hemel__apps i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 1.8px, rgba(214, 241, 253, .95) 2.4px, rgba(171, 225, 246, .42) 4.5px, rgba(123, 74, 226, .14) 8.5px, rgba(123, 74, 226, 0) 14px);
  transform: scale(.42); opacity: .5; transition: transform 300ms var(--erin), opacity 300ms var(--erin); transition-delay: calc(var(--i) * 40ms); }
.ad-hemel__apps i::before, .ad-hemel__apps i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 1px; margin: -.5px 0 0 -19px;
  background: linear-gradient(90deg, rgba(220, 244, 255, 0), rgba(220, 244, 255, .75), rgba(220, 244, 255, 0)); opacity: 0; transition: opacity 300ms var(--erin); transition-delay: inherit; }
.ad-hemel__apps i::after { transform: rotate(90deg) scaleX(.7); }
.ad-hemel__apps span { opacity: .42; transition: opacity 300ms var(--erin); transition-delay: calc(var(--i) * 40ms); }
.ad-hemel__apps li[data-g="0"] i { opacity: .38; }
.ad-hemel__apps li[data-g="0"] span { opacity: .34; }
.ad-hemel__apps li[data-g="2"] i, .ad-hemel[data-stand="na"] .ad-hemel__apps li[data-g="1"] i { transform: scale(1); opacity: 1; }
.ad-hemel__apps li[data-g="2"] i::before, .ad-hemel__apps li[data-g="2"] i::after,
.ad-hemel[data-stand="na"] .ad-hemel__apps li[data-g="1"] i::before, .ad-hemel[data-stand="na"] .ad-hemel__apps li[data-g="1"] i::after { opacity: 1; }
.ad-hemel__apps li[data-g="2"] span, .ad-hemel[data-stand="na"] .ad-hemel__apps li[data-g="1"] span { opacity: 1; }
.ad-hemel__noot { position: absolute; right: 0; bottom: -12px; font-size: 13px; color: var(--tekst-3); }

/* ── De boog: echte maanfasen, gloed groeit mee met hoe vol de maan is ── */
.ad-boog::before { content: ""; position: absolute; z-index: -1; left: 40%; right: -8%; top: -30%; bottom: -10%; pointer-events: none;
  background: radial-gradient(24% 34% at 72% 36%, rgba(171, 225, 246, .09), rgba(171, 225, 246, 0)), radial-gradient(34% 30% at 42% 64%, rgba(123, 74, 226, .12), rgba(123, 74, 226, 0)); }
.ad-boog { isolation: isolate; }
.ad-boog__maan { background: none; filter: drop-shadow(0 0 calc(2px + var(--f) * 12px) rgba(171, 225, 246, calc(.08 + var(--f) * .3))); }
/* ADKAR staat linksboven, in de lege hoek boven de eerste stappen */
.ad-boog__zin { right: auto; left: 0; top: 8px; bottom: auto; width: 38%; padding: 0; text-align: left; color: var(--tekst-2); font-size: 15px; }

/* ── Slot: de eerste stap links, het bewijs rechts, de maan komt op boven het wolkendek ── */
.ad-slot { padding-top: 104px; padding-bottom: 210px;
  background: linear-gradient(180deg, rgba(4, 10, 27, 0), rgba(94, 151, 255, .05) 45%, rgba(123, 74, 226, .10) 80%, rgba(123, 74, 226, 0)); }
.ad-slot__binnen { max-width: var(--breed); text-align: left; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 96px; align-items: center; justify-items: stretch; }
.ad-slot__actie { position: relative; }
.ad-slot .s-kop2 { max-width: 13ch; }
.ad-slot .s-tekst { max-width: 30em; }
.ad-slot .s-acties { justify-content: flex-start; }
.ad-bewijs { position: relative; padding: 36px 40px 40px; border: 1px solid rgba(171, 225, 246, .16); border-radius: 6px; background: rgba(8, 17, 40, .78); }
.ad-bewijs__kop { font-family: var(--kop); font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; text-wrap: balance; }
.ad-bewijs__lead { margin-top: 12px; color: var(--tekst-2); text-wrap: pretty; }
.ad-bewijs .s-bewijs__naam { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lijn-zacht); font-size: 20px; }
.ad-bewijs__tekst { margin-top: 8px; font-size: 15px; color: var(--tekst-2); text-wrap: pretty; }
.ad-bewijs .s-citaat { margin-top: 20px; }
.ad-bewijs .s-citaat p { color: var(--wit); font-size: 20px; }
.ad-bewijs .tekstlink { display: inline-block; margin-top: 20px; }

/* wolkendek en maan aan de onderrand, met de warme rand van de dageraad erachter */
.ad-slot .ad-nacht { bottom: 0; height: 480px; }
.ad-slot .ad-nacht__maan { right: auto; left: calc(50% - 250px); bottom: 70px; width: 230px; filter: brightness(.8); }
/* de gloed loopt door tot de onderrand van het slot en dooft daar uit: geen rechte rand onder de wolken */
.ad-nacht__dageraad { position: absolute; left: 0; right: 0; bottom: 0; height: 370px;
  background: radial-gradient(45% 210px at 42% 300px, rgba(255, 168, 112, .44), rgba(255, 140, 110, .14) 45%, rgba(255, 140, 110, 0) 72%),
              radial-gradient(60% 270px at 80% 300px, rgba(123, 74, 226, .18), rgba(123, 74, 226, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent); }
.ad-slot .ad-nacht__wolk { width: 2200px; }

/* meteoor: één snelle streep naar de kop, felle kop en een staart die uitdooft; daarna blijft hij stil staan */
.ad-meteoor { position: absolute; left: -60px; top: -44px; width: 230px; height: 3px; pointer-events: none; transform: rotate(22deg); transform-origin: 100% 50%; }
.js .ad-meteoor[data-reveal] { opacity: 1; transform: rotate(22deg); transition: none; }
.ad-meteoor i { position: absolute; inset: 0; transform-origin: 100% 50%;
  transition: transform 340ms cubic-bezier(.12, .7, .2, 1) 200ms, opacity 160ms linear 200ms; }
.ad-meteoor b { position: absolute; inset: 0; transform-origin: 100% 50%; clip-path: polygon(0 50%, 100% 0, 100% 100%);
  background: linear-gradient(90deg, rgba(123, 74, 226, 0), rgba(171, 225, 246, .28) 50%, rgba(226, 246, 255, .85) 92%, #fff);
  transition: transform 340ms cubic-bezier(.12, .7, .2, 1) 200ms; }
.ad-meteoor i::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 5px 2px rgba(171, 225, 246, .9), 0 0 16px 5px rgba(255, 186, 128, .28); }
.js .ad-meteoor:not(.is-in) i { opacity: 0; transform: translateX(-240px); }
.js .ad-meteoor:not(.is-in) b { transform: scaleX(.2); }

@media (max-width: 1100px) {
  .ad-hemel { gap: 32px 40px; }
  .ad-slot__binnen { gap: 40px 48px; }
  .ad-bewijs { padding: 30px 30px 34px; }
  .ad-slot .ad-nacht__maan { width: 200px; left: calc(50% - 220px); }
  .ad-boog__zin { width: 60%; margin: 28px 0 0 auto; }
}
@media (max-width: 900px) {
  .ad-hemel { grid-template-columns: minmax(0, 1fr); }
  .ad-hemel__veld { aspect-ratio: .98; margin-top: 8px; }
  .ad-hemel__sfeer::after { width: 150%; right: -40%; top: 72%; }
  .ad-hemel__sfeer::before { width: 110%; right: -20%; top: 45%; bottom: 0; }
  .ad-hemel__apps li { font-size: 13px; gap: 6px; }
  .ad-slot__binnen { grid-template-columns: minmax(0, 1fr); }
  .ad-slot { padding-bottom: 220px; }
  .ad-boog__zin { width: auto; margin: 32px 0 0 58px; }
}
@media (max-width: 560px) {
  .ad-hemel__apps i { width: 22px; height: 22px; }
  .ad-hemel__apps li { transform: translate(-11px, -50%); }
  .ad-hemel__apps li.is-links { transform: translate(calc(-100% + 11px), -50%); }
  .ad-hemel__noot { bottom: -30px; }
  .ad-bewijs { padding: 26px 22px 28px; }
  .ad-meteoor { left: -10px; top: -56px; width: 150px; }
  .ad-slot .ad-nacht__maan { width: 150px; left: auto; right: 20px; bottom: 60px; }
  .ad-slot .ad-nacht__wolk { width: 1100px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-hemel__lijnen path, .ad-hemel__apps i, .ad-hemel__apps i::before, .ad-hemel__apps i::after, .ad-hemel__apps span, .ad-hemel__stand > span { transition: none; }
  .ad-meteoor i, .ad-meteoor b { transition: none; }
  .js .ad-meteoor:not(.is-in) i { opacity: 1; transform: none; }
  .js .ad-meteoor:not(.is-in) b { transform: none; }
}