/* The two doors on /offers/same-site-no-php (and -us): the takeover and the padlock. Markup in site/embeds/ssnp-doors.html. */
.embed:has(> .ssd) { overflow: visible; }
.ssd { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 3.5rem 0 0; }
@media (min-width: 62rem) {
  .ssd, .ssd-sum { width: min(76rem, calc(100vw - 4rem)); margin-left: 50%; transform: translateX(-50%); }
  .ssd { gap: 3rem; margin-top: 4.5rem; }
}
.ssd-door { display: flex; flex-direction: column; min-width: 0; }
.ssd-frame { position: relative; overflow: hidden; background: var(--card); aspect-ratio: 9 / 10; }
.ssd-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: filter 500ms cubic-bezier(.16,1,.3,1); }
/* glitch slices: copies of the shot, each clipped to a band, thrown sideways during the hit */
.ssd-slice { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; pointer-events: none; }
.ssd-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); opacity: 0; transform: translateY(-4px); }
.ssd-flash { position: absolute; inset: 0; background: var(--accent); opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
.ssd-take { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1rem, 4vw, 3rem); background: color-mix(in srgb, var(--bg) 86%, transparent); color: var(--ink); opacity: 0; }
.ssd-take-big { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; color: var(--accent); }
.ssd-take ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-size: clamp(0.85rem, 1.5vw, 1.2rem); line-height: 1.3; }
.ssd-take li { margin: 0; }
.ssd-take li.ssd-stake { margin-top: 0.35rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.55rem); line-height: 1.15; color: var(--ink); }
.ssd-take li.ssd-stake + li.ssd-stake { margin-top: 0; }
.ssd-take li.ssd-stake strong { color: var(--accent); font-weight: 700; }
.ssd-ok { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.9rem 1.1rem; background: var(--bg); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.6rem); transform: translateY(100%); transition: transform 700ms cubic-bezier(.16,1,.3,1); }
.ssd-log { margin: 0; min-height: 8.6rem; padding: 0.8rem 1rem; background: var(--card); font-family: var(--font-mono); font-size: clamp(0.7rem, 1.1vw, 0.9rem); line-height: 1.7; color: var(--mute); white-space: pre-wrap; }
.ssd-log .ssd-bad { color: var(--accent); }
.ssd-log .ssd-good { color: var(--ink); }
.ssd-log b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ssd-note { margin: 0.45rem 0 0; font-size: 0.875rem; color: var(--mute); }
.ssd-name { margin: 1rem 0 0.25rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.15; }
.ssd-line { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--mute); }
.ssd-line a { color: var(--link); }

/* final state: what the page shows without script or with reduced motion */
.ssd[data-state="hit"] .ssd-php .ssd-shot, .ssd.is-taken .ssd-php .ssd-shot { filter: grayscale(1) brightness(0.3) blur(1.5px); }
.ssd[data-state="hit"] .ssd-php .ssd-take, .ssd.is-taken .ssd-php .ssd-take { opacity: 1; }
.ssd[data-state="hit"] .ssd-files .ssd-ok, .ssd.is-safe .ssd-files .ssd-ok { transform: translateY(0); }

/* the played version */
.ssd.is-scan .ssd-php .ssd-scan { animation: ssd-scan 700ms cubic-bezier(.4,0,.2,1) forwards; }
.ssd.is-glitch .ssd-php .ssd-slice { animation: ssd-slice 90ms steps(2) infinite; }
.ssd.is-glitch .ssd-php .ssd-slice:nth-of-type(2n) { animation-duration: 130ms; animation-direction: reverse; }
.ssd.is-glitch .ssd-php .ssd-flash { animation: ssd-flash 900ms steps(1) forwards; }
.ssd.is-glitch .ssd-php .ssd-frame { animation: ssd-shake 450ms cubic-bezier(.36,.07,.19,.97) 2; }
.ssd.is-slam .ssd-php .ssd-take { animation: ssd-in 260ms cubic-bezier(.16,1,.3,1) both; }
.ssd.is-slam .ssd-php .ssd-take-big { animation: ssd-slam 420ms cubic-bezier(.2,1.6,.4,1) both; }
.ssd.is-slam .ssd-php .ssd-frame { animation: ssd-quake 520ms cubic-bezier(.36,.07,.19,.97) 1; }
.ssd-take li { opacity: 0; transform: translateY(10px); transition: opacity 300ms ease-out, transform 400ms cubic-bezier(.16,1,.3,1); }
.ssd-take li.is-on, .ssd[data-state="hit"]:not(.is-playing) .ssd-take li { opacity: 1; transform: none; }
@keyframes ssd-scan { 0% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--h, 600px)); } }
@keyframes ssd-slice { 0% { opacity: 1; transform: translateX(-14px); } 50% { opacity: 1; transform: translateX(18px); } 100% { opacity: 1; transform: translateX(-6px); } }
@keyframes ssd-flash { 0% { opacity: .55; } 12% { opacity: 0; } 30% { opacity: .4; } 40% { opacity: 0; } 62% { opacity: .65; } 70%, 100% { opacity: 0; } }
@keyframes ssd-shake { 10%, 90% { transform: translateX(-3px); } 20%, 80% { transform: translateX(6px); } 30%, 50%, 70% { transform: translateX(-10px) rotate(-.4deg); } 40%, 60% { transform: translateX(10px) rotate(.4deg); } }
@keyframes ssd-quake { 10%, 90% { transform: translate(-3px, 1px); } 20%, 80% { transform: translate(7px, -2px); } 30%, 50%, 70% { transform: translate(-12px, 2px) rotate(-.6deg); } 40%, 60% { transform: translate(12px, -1px) rotate(.6deg); } }
@keyframes ssd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssd-slam { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }

/* the golden shield on the plain-file side: it rises as the request arrives, then its check draws in */
.ssd-lock { position: absolute; left: 50%; top: 46%; width: 38%; max-width: 15rem; color: var(--ssd-gold); opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity 300ms ease-out, transform 500ms cubic-bezier(.2,1.5,.4,1); overflow: visible; pointer-events: none; }
.ssd { --ssd-gold: oklch(0.83 0.15 86); }
/* On these pages orange-red is the takeover's colour, so the way out wears the shield's gold. */
.page:has(.ssd) .buy-button {
  position: relative; overflow: hidden; isolation: isolate; color: #2a1c02; text-shadow: 0 1px 0 rgba(255, 244, 200, .7);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 46%, rgba(255,255,255,0) 50%),
    radial-gradient(120% 90% at 50% 0%, #fff6c4 0%, rgba(255,246,196,0) 60%),
    linear-gradient(180deg, #ffe27a 0%, #f5c430 38%, #e0a20e 62%, #b87b00 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(120,72,0,.55), inset 0 0 0 1px rgba(150,95,0,.45),
    0 6px 0 #8a5a00, 0 10px 24px -4px rgba(245,180,30,.55), 0 0 40px -8px rgba(255,200,60,.6);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out;
}
.page:has(.ssd) .buy-button::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 22%; z-index: 1; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg) translateX(-150%); }
.page:has(.ssd) .buy-button:hover, .page:has(.ssd) .buy-button:focus-visible { filter: brightness(1.06) saturate(1.1); transform: translateY(-1px); }
.page:has(.ssd) .buy-button:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(120,72,0,.55), inset 0 0 0 1px rgba(150,95,0,.45), 0 1px 0 #8a5a00, 0 4px 12px -4px rgba(245,180,30,.5); }
@media (prefers-reduced-motion: no-preference) {
  .page:has(.ssd) .buy-button::after { animation: buy-glint 4.2s cubic-bezier(.4,0,.2,1) 1.2s infinite; }
  .page:has(.ssd) .buy-button:hover::after { animation-duration: 1.1s; animation-delay: 0s; }
}
@keyframes buy-glint { 0%, 70% { transform: skewX(-20deg) translateX(-150%); } 100% { transform: skewX(-20deg) translateX(560%); } }
.page:has(.ssd) .buy { background: color-mix(in srgb, oklch(0.83 0.15 86) 9%, var(--code)); box-shadow: inset 0 0 0 2px color-mix(in srgb, oklch(0.83 0.15 86) 70%, transparent); }
.ssd-check { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms cubic-bezier(.65,0,.35,1); }
.ssd-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.ssd[data-state="hit"] .ssd-lock, .ssd.is-lockshow .ssd-lock { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ssd[data-state="hit"] .ssd-check, .ssd.is-locked .ssd-check { stroke-dashoffset: 0; }
.ssd.is-locked .ssd-lock { animation: ssd-clunk 380ms cubic-bezier(.2,1.6,.4,1) both; }
.ssd.is-locked .ssd-ring { animation: ssd-ring 900ms cubic-bezier(.16,1,.3,1) 1 both; }
@keyframes ssd-clunk { 0% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -46%) scale(1.08, .94); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes ssd-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }
.ssd-again { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; padding: 0.4rem 0; background: none; border: 0; color: var(--link); font: inherit; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ssd-again:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ssd-sum { margin-block: 2.5rem 4.5rem; }
.ssd-big { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 5.5vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 34.01rem) { .ssd-big span { white-space: nowrap; } }
.ssd-small { margin: 1rem 0 0; max-width: 46rem; font-size: 1.05rem; line-height: 1.5; color: var(--mute); }
.ssd-small b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 34rem) {
  .ssd { grid-template-columns: 1fr; gap: 2.5rem; }
  .ssd-frame { aspect-ratio: 4 / 5; }
  .ssd-take { gap: 0.6rem; padding: 1rem; }
  .ssd-take ul { gap: 0.35rem; font-size: 0.85rem; }
  .ssd-log { min-height: 0; padding: 0.6rem 0.7rem; }
  .ssd-line { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ssd-shot, .ssd-ok, .ssd-take li, .ssd-lock, .ssd-check { transition: none; }
}

.ssd-lock-float { position: absolute; inset: 0; pointer-events: none; }

/* Safe side, once locked: a soft gold glow around the page, and the shield floating like a halo. */
.ssd-files .ssd-frame { transition: box-shadow 900ms cubic-bezier(.16,1,.3,1); }
.ssd[data-state="hit"] .ssd-files .ssd-frame, .ssd.is-locked .ssd-files .ssd-frame { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ssd-gold) 45%, transparent), 0 0 48px 4px color-mix(in srgb, var(--ssd-gold) 30%, transparent); }
.ssd[data-state="hit"] .ssd-lock, .ssd.is-locked .ssd-lock { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ssd-gold) 55%, transparent)); }
.ssd[data-state="hit"] .ssd-lock-float, .ssd.is-safe .ssd-lock-float { animation: ssd-halo 3.2s ease-in-out infinite; }
@keyframes ssd-halo { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) {
  .ssd-files .ssd-frame { transition: none; }
  .ssd[data-state="hit"] .ssd-lock-float, .ssd.is-safe .ssd-lock-float { animation: none; }
}

/* "Here's what you get": each icon in a fixed left column, its heading large beside it, the "...so you can stop" line
   small under the heading; one column every time, so a stressed eye drops straight down. */
.page p:has(> img[src^="/images/ssnp/get-"]) { float: left; clear: both; width: 6.5rem; margin: 0 1.4rem 0.4rem 0; }
.page p:has(> img[src^="/images/ssnp/get-"]) img { display: block; width: 100%; height: auto; }
.page p:has(> img[src^="/images/ssnp/get-"]) + h3 { margin: 0.9rem 0 0.35rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.15; }
.page p:has(> img[src^="/images/ssnp/get-"]) + h3 + p { margin: 0 0 1.6rem; font-size: 0.98rem; color: var(--mute); }
/* each item ends below its own icon, so the next heading starts level with the next icon */
.page p:has(> img[src^="/images/ssnp/get-"]) + h3 + p::after { content: ""; display: block; clear: both; }
.page p:has(> img[src^="/images/ssnp/get-"]) ~ h2 { clear: both; }
@media (max-width: 34rem) {
  .page p:has(> img[src^="/images/ssnp/get-"]) { width: 4.6rem; margin-right: 1rem; }
  .page p:has(> img[src^="/images/ssnp/get-"]) + h3 { margin-top: 0.4rem; }
}