/*
 * /bypass/imperva — "The rulebook".
 *
 * Chrome owned by _shared/chrome.css. Palette: teal #7ADAE6 = pass/allowed,
 * red #F0524B = deny/blocked (semantic), purple #7C4FE8 = band. Two SOLID
 * regions: purple band (Acts 3-4), teal closer. No gradients on act bgs.
 * Distinct architecture: a descending rule ledger, a proxy diagram, a green
 * ledger callback (no curl box).
 */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.im-main { position: relative; z-index: 1; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 720ms cubic-bezier(0.22,1,0.36,1), transform 720ms cubic-bezier(0.22,1,0.36,1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 1 — the rule ledger. Sticky; a request marker descends the WAF stack.
   H1 left, ledger right. A stock request is denied deep in the stack.
   ═══════════════════════════════════════════════════════════════════════ */
.im-hero { position: relative; min-height: 300vh; --desc: 0; }
.im-hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1fr 0.9fr; align-items: center; gap: clamp(32px, 6vw, 96px); padding: 92px clamp(20px, 5vw, 80px) clamp(48px, 8vh, 96px); max-width: 1560px; margin-inline: auto; }

.im-hero-copy { max-width: 620px; }
.im-hero-copy .eyebrow { margin-bottom: 16px; }
.im-hero-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-xlarge); line-height: var(--leading-display-xlarge, 1.02); letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); margin: 0; text-wrap: balance; }
.im-hero-h1 .l2 { display: block; }
.im-hero-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); margin: 20px 0 0; max-width: 46ch; }
.im-hero-cta { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.im-hero-cta .link-cta { align-self: center; transform: translateY(3px); }

/* Ledger — a vertical spine with a descending request marker + rule rows. */
.im-ledger { position: relative; justify-self: end; width: min(440px, 100%); padding-left: 26px; }
.im-ledger::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--border-subtle); }
.im-ledger-mark { position: absolute; left: 0; top: calc(8px + var(--desc, 0) * (100% - 16px)); width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--text-primary); transition: top 120ms linear, background 300ms ease; }
.is-denied .im-ledger-mark { background: #F0524B; }
.im-ledger-status { position: absolute; right: 0; top: -30px; font-family: var(--font-code); font-size: 12px; letter-spacing: 0.05em; color: var(--text-secondary); transition: color 300ms ease; }
.is-denied .im-ledger-status { color: #F0524B; }
.im-rule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--border-subtle); }
.im-rule:first-of-type { border-top: 1px solid var(--border-subtle); }
.im-rule-name { font-family: var(--font-base); font-size: var(--mkt-body-sm); color: var(--text-tertiary); transition: color 280ms ease; }
.im-rule.is-active .im-rule-name, .im-rule.is-pass .im-rule-name { color: var(--text-primary); }
.im-rule.is-deny .im-rule-name { color: #F0524B; }
.im-rule-flag { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-quaternary); transition: color 280ms ease; }
.im-rule.is-pass .im-rule-flag { color: #7ADAE6; }
.im-rule.is-pass .im-rule-flag::before { content: "pass"; }
.im-rule.is-deny .im-rule-flag { color: #F0524B; }
.im-rule.is-deny .im-rule-flag::before { content: "deny"; }
.im-rule.is-active .im-rule-flag::before { content: "\2026"; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 2 — in front of the origin (positional proxy diagram). Hover the WAF
   node to reveal its rule layers.
   ═══════════════════════════════════════════════════════════════════════ */
.im-front { padding: clamp(120px, 16vh, 200px) clamp(20px, 5vw, 80px); max-width: 1120px; margin: 0 auto; }
.im-front-head { max-width: 640px; margin: 0 0 clamp(52px, 7vh, 88px); }
.im-front-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-medium); line-height: 1.08; letter-spacing: -0.02em; color: var(--text-primary); margin: 12px 0 0; text-wrap: balance; }
.im-front-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px 0 0; max-width: 52ch; }

.im-proxy { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 0; }
.im-node { text-align: center; }
.im-node-box { border: 1px solid var(--border-subtle); border-radius: var(--radius-default, 10px); padding: 20px 24px; font-family: var(--font-code); font-size: 13px; letter-spacing: 0.04em; color: var(--text-secondary); white-space: nowrap; }
.im-node-label { display: block; font-family: var(--font-base); font-size: 12px; color: var(--text-quaternary); margin-top: 10px; }
.im-proxy-waf { position: relative; cursor: pointer; }
.im-proxy-waf .im-node-box { border-color: color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle)); color: var(--text-primary); transition: border-color 220ms ease, box-shadow 220ms ease; }
.im-proxy-waf:hover .im-node-box, .im-proxy.is-open .im-proxy-waf .im-node-box { border-color: #7C4FE8; box-shadow: 0 0 0 1px #7C4FE8; }
.im-flow { position: relative; height: 2px; background: var(--border-subtle); overflow: hidden; }
.im-flow::after { content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--text-secondary), transparent); }
.im-proxy.is-live .im-flow--a::after { animation: imFlow 2.2s linear infinite; }
.im-proxy.is-live .im-flow--b::after { animation: imFlow 2.2s linear infinite 1.1s; opacity: 0.4; }
@keyframes imFlow { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .im-flow::after { display: none; } }
/* WAF layers panel that opens on hover */
.im-waf-layers { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); width: max(220px, 100%); border: 1px solid var(--border-subtle); border-radius: 10px; background: rgba(29,22,18,0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 12px 14px; opacity: 0; visibility: hidden; transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms; z-index: 3; }
.im-proxy.is-open .im-waf-layers { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity 220ms ease, transform 220ms ease; }
.im-waf-layers li { list-style: none; font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); padding: 5px 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ACTS 3-4 — one call, every rule passes. SOLID purple band, bloom from left.
   The ledger returns, fully green (a callback to the hero) — no code box.
   ═══════════════════════════════════════════════════════════════════════ */
.im-band { position: relative; background: #7C4FE8; color: #fff; --rise: 0; clip-path: circle(calc(var(--rise) * 150%) at 0% 50%); will-change: clip-path; }
.im-band-inner { max-width: 1180px; margin: 0 auto; padding: clamp(120px, 18vh, 220px) clamp(20px, 5vw, 80px); display: grid; grid-template-columns: 1fr 0.9fr; align-items: center; gap: clamp(40px, 6vw, 100px); }
.im-band-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-large); line-height: 1.04; letter-spacing: -0.024em; color: #fff; margin: 14px 0 0; text-wrap: balance; }
.im-band-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: rgba(255,255,255,0.9); margin: 20px 0 0; max-width: 44ch; }
.im-band-call { font-family: var(--font-code); font-size: clamp(12.5px, 1vw, 14.5px); color: rgba(255,255,255,0.92); margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,0.3); }
.im-band-call .c-cmd { color: #fff; font-weight: 700; }
.im-band-call .c-ok { color: #0B1416; background: #7ADAE6; padding: 2px 8px; border-radius: 5px; white-space: nowrap; display: inline-block; }
/* the green ledger callback */
.im-pass-ledger { justify-self: end; width: min(400px, 100%); }
.im-pass-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.24); }
.im-pass-row:first-child { border-top: 1px solid rgba(255,255,255,0.24); }
.im-pass-name { font-family: var(--font-base); font-size: 14px; color: #fff; }
.im-pass-flag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #0B1416; }
.im-pass-flag svg { width: 13px; height: 13px; }
.im-pass-flag svg path { fill: none; stroke: #0B1416; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.im-pass-flag .dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #7ADAE6; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 5 — closer. SOLID teal.
   ═══════════════════════════════════════════════════════════════════════ */
.im-closer { position: relative; background: #7ADAE6; color: #0B1416; padding: clamp(120px, 20vh, 240px) clamp(20px, 5vw, 80px) clamp(80px, 12vh, 140px); }
.im-closer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.im-closer-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-large); line-height: 1.04; letter-spacing: -0.024em; color: #0B1416; margin: 0; text-wrap: balance; }
.im-closer-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #103a40; margin: 22px auto 0; max-width: 52ch; }
.im-closer-cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.im-closer-tagline { font-family: var(--font-base); font-size: 14px; color: #14494f; }
.im-closer-more { font-family: var(--font-base); font-size: 15px; line-height: 1.6; color: #103a40; margin: clamp(40px, 6vh, 72px) auto 0; max-width: 62ch; }
.im-closer-more a { color: #0B1416; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11,20,22,0.4); transition: text-decoration-color 200ms ease; }
.im-closer-more a:hover { text-decoration-color: #0B1416; }

/* Topbar adaptation + CTA (teal on purple, purple on teal). */


@media (min-width: 1920px) { .im-band-inner { max-width: 1360px; } }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / reduced-motion (<=900px).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .im-hero { min-height: auto; }
  .im-hero-stage { position: static; height: auto; overflow: visible; display: block; padding: 120px 20px 64px; }
  .im-ledger { width: 100%; margin-top: 44px; justify-self: auto; }
  .im-proxy { grid-template-columns: 1fr; gap: 14px; }
  .im-flow { height: 24px; width: 2px; justify-self: center; }
  .im-waf-layers { position: static; opacity: 1; visibility: visible; transform: none; width: 100%; margin-top: 12px; }
  .im-band-inner { grid-template-columns: 1fr; gap: 40px; }
  .im-pass-ledger { justify-self: auto; width: 100%; }
  .im-band { clip-path: none !important; }
}

/* Closer CTA: fixed contrast for the closer background, never scroll-dependent. */