/* ============================================================================
   Google Ads — ENTRY FROM THE SIDES.  Loaded by google-ads.html only.

   Two things, and they are this page's alone (MOTION-CHARTER §3):
     1. The colour field. One fixed layer under the whole page whose hue is a
        pure function of scroll depth — teal-blue at the surface, drifting
        toward indigo as you descend. The pointer lights a soft bloom in it.
        No clock: stop scrolling and the colour holds.
     2. Campaign pieces slide in alternately from the LEFT and the RIGHT, with
        a slight turn, and lock onto a centre spine. Pure function of scrollY.

   Nothing a reader reads moves on its own. Without JS (or under reduced
   motion) every piece sits in its final place and the field is a still teal.
   ========================================================================== */

:root{ --ads-h: 196; --ads-tint: hsl(var(--ads-h) 40% 95%); }

/* ------------------------------------------------------------ the field --- */
.ads-field{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 40% at var(--mx,50%) var(--my,38%), hsl(calc(var(--ads-h) + 16) 74% 48% / .26), transparent 70%),
    radial-gradient(64% 54% at 10% 104%, hsl(calc(var(--ads-h) - 24) 62% 34% / .50), transparent 62%),
    radial-gradient(58% 48% at 92% -6%,  hsl(calc(var(--ads-h) + 42) 58% 42% / .34), transparent 62%),
    linear-gradient(180deg, hsl(var(--ads-h) 60% 8%), hsl(calc(var(--ads-h) + 28) 52% 12%));
}

/* the sections let the field through — dark ones as glass, light ones as a
   tint that follows the same hue, so the whole page turns together */
.ads .hero{ background: linear-gradient(180deg, rgba(4,18,28,.38), rgba(7,27,41,.22) 40%, rgba(13,45,66,.30)); }
.ads .sec--dark{ background: linear-gradient(180deg, rgba(7,27,41,.42), rgba(13,45,66,.24) 55%, rgba(7,27,41,.42)); }
.ads .sec--close{ background: linear-gradient(180deg, rgba(7,27,41,.30), rgba(4,18,28,.96)); }
.ads .sec--light{ background: linear-gradient(180deg, #ffffff, hsl(var(--ads-h) 45% 96%)); }
.ads .sec--tintlight{ background: var(--ads-tint); }

/* --------------------------------------------------------- the readout ---- */
.fx-read{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0; padding:10px 14px;
  width:max-content; max-width:100%;
  border:1px solid rgba(var(--accent-rgb),.16); border-radius:8px;
  background:rgba(4,18,28,.35);
  font:600 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(191,238,255,.62);
}
.fx-read b{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.fx-read i{ font-style:normal; opacity:.55; }
.fx-read span{ white-space:nowrap; }

/* ------------------------------------------------------------ the flow ---- */
.ads-flow{ position:relative; margin-top:44px; }
.ads-spine{
  position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px;
  background:linear-gradient(transparent, rgba(var(--accent-rgb),.38) 6%, rgba(var(--accent-rgb),.38) 94%, transparent);
}
.ads-slide{
  position:relative; width:min(100%, 560px); margin:0 0 30px;
  will-change:transform, opacity;
}
.ads-slide:last-child{ margin-bottom:0; }
.ads-slide[data-ads-side="left"]{ margin-right:auto; }
.ads-slide[data-ads-side="right"]{ margin-left:auto; }

/* where the piece meets the spine */
.ads-node{
  position:absolute; top:22px; width:11px; height:11px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.55); background:rgba(4,18,28,.9);
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ads-node::before{
  content:""; position:absolute; top:50%; height:1px; width:34px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.55), transparent);
}
[data-ads-side="left"]  .ads-node{ right:-46px; }
[data-ads-side="left"]  .ads-node::before{ right:100%; transform:scaleX(-1); }
[data-ads-side="right"] .ads-node{ left:-46px; }
[data-ads-side="right"] .ads-node::before{ left:100%; }
.ads-slide.placed .ads-node{ background:var(--accent); box-shadow:0 0 16px 3px rgba(var(--accent-rgb),.6); }

/* ---------------------------------------------------------- the pieces ---- */
.ad-card{
  position:relative; overflow:hidden; border-radius:14px;
  border:1px solid rgba(var(--accent-rgb),.18);
  background:linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  backdrop-filter:blur(5px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ad-card::before{           /* pointer sheen — follows --gx/--gy */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%), rgba(var(--accent-rgb),.13), transparent 62%);
  transition:opacity .3s;
}
.ad-card:hover::before{ opacity:1; }
.ad-card:hover{ border-color:rgba(var(--accent-rgb),.42); box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--accent-rgb),.12); }
/* the leading edge lights while a piece is still travelling */
.ad-card::after{
  content:""; position:absolute; top:0; bottom:0; width:2px; pointer-events:none;
  background:linear-gradient(transparent, var(--accent), transparent);
  box-shadow:0 0 18px 3px rgba(var(--accent-rgb),.6);
  opacity:var(--edge,0);
}
[data-ads-side="left"]  .ad-card::after{ right:0; }
[data-ads-side="right"] .ad-card::after{ left:0; }

.ad-h{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid rgba(var(--accent-rgb),.12);
  font:600 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:rgba(191,238,255,.72);
}
.ad-h .step{ color:var(--accent); }
.ad-h .demo{ margin-left:auto; opacity:.5; font-weight:500; letter-spacing:.08em; }
.ad-b{ padding:16px; }
.ad-b > h3{ font-size:1.15rem; margin-bottom:6px; }
.ad-b > .copy{ font-size:.95rem; line-height:1.5; margin:0 0 14px; }

/* search-term rows */
.ad-rows{ display:grid; gap:7px; font-size:14px; }
.ad-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.03); }
.ad-row .term{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-row .amt{ font-family:var(--mono); font-size:12.5px; color:#dbeaf3; font-variant-numeric:tabular-nums; }
.ad-row .st{ font:700 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:5px 8px; border-radius:100px; }
.st.keep{ color:var(--accent); background:rgba(var(--accent-rgb),.12); }
.st.block{ color:#ffc0cd; background:rgba(255,120,150,.13); }
.ad-row.blocked .term{ text-decoration:line-through; opacity:.55; }

/* negatives */
.ad-neg{ display:flex; flex-wrap:wrap; gap:8px; }
.ad-neg span{
  font:500 12.5px/1 var(--mono); padding:7px 10px; border-radius:6px;
  border:1px solid rgba(255,140,170,.32); color:#ffc9d4; background:rgba(255,120,150,.07);
}
.ad-neg span::before{ content:"− "; opacity:.7; }

/* keyword research */
.ad-kw{ display:grid; gap:9px; }
.ad-kw div{ display:grid; grid-template-columns:minmax(0,1fr) 44px 90px; gap:12px; align-items:center; font-size:14px; }
.ad-kw code{ font-family:var(--mono); font-size:13px; color:#eaf4fa; }
.ad-kw em{ font-style:normal; font:600 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(191,238,255,.6); }
.ad-kw i{ display:block; height:6px; border-radius:3px; background:rgba(var(--accent-rgb),.14); position:relative; overflow:hidden; }
.ad-kw i::after{ content:""; position:absolute; inset:0; width:var(--v,50%); background:linear-gradient(90deg, var(--primary-light), var(--accent)); border-radius:3px; }

/* ad group tree */
.ad-tree{ list-style:none; margin:0; padding:0; font-size:14px; }
.ad-tree > li{ font-weight:600; color:#eaf4fa; }
.ad-tree ul{ list-style:none; margin:8px 0 0 10px; padding:0 0 0 16px; border-left:1px solid rgba(var(--accent-rgb),.25); display:grid; gap:6px; }
.ad-tree ul li{ font-weight:400; color:#a8c4d5; position:relative; }
.ad-tree ul li::before{ content:""; position:absolute; left:-16px; top:.8em; width:10px; height:1px; background:rgba(var(--accent-rgb),.25); }
.ad-tree small{ font:500 10.5px/1 var(--mono); letter-spacing:.08em; color:rgba(191,238,255,.55); margin-left:8px; }

/* the ad itself — a faithful preview, so it is white on purpose */
.ad-prev{ background:#fff; color:#202124; border-radius:10px; padding:14px 16px; font-family:Arial, Helvetica, sans-serif; }
.ad-prev .sp{ display:flex; align-items:center; gap:8px; font-size:12px; color:#202124; margin-bottom:6px; }
.ad-prev .sp b{ font-weight:700; }
.ad-prev .sp i{ width:22px; height:22px; border-radius:50%; background:#e8f0fe; display:grid; place-items:center; font-style:normal; font-size:11px; color:#1a73e8; font-weight:700; }
.ad-prev .sp span{ color:#5f6368; }
.ad-prev .hl{ font-size:18px; line-height:1.3; color:#1a0dab; margin:0; }
.ad-prev .ds{ font-size:13.5px; line-height:1.45; color:#4d5156; margin:6px 0 0; }
.ad-prev .ex{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:13px; color:#1a0dab; }

/* weekly log */
.ad-log{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px; }
.ad-log li{ display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:baseline; }
.ad-log b{ font:600 10.5px/1.6 var(--mono); letter-spacing:.1em; color:var(--accent); text-transform:uppercase; }

/* ------------------------------------------------- armed (JS on) states --- */
.fx-on .ads-slide{ opacity:0; }
.fx-on [data-ads-side].ads-copy{ opacity:0; }
.ads-copy{ will-change:transform, opacity; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .ads-spine{ left:7px; }
  .ads-slide{ width:auto; margin-left:30px !important; margin-right:0 !important; }
  .ads-node{ left:-29px !important; right:auto !important; }
  .ads-node::before{ display:none; }
  .ad-kw div{ grid-template-columns:minmax(0,1fr) 40px 64px; }
  .ad-row{ grid-template-columns:minmax(0,1fr) auto; }
  .ad-row .amt{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .ads-field{ background:linear-gradient(180deg, hsl(196 60% 8%), hsl(224 52% 12%)); }
  .ads-slide, .ads-copy{ opacity:1 !important; transform:none !important; }
}