/* ---------- Security page (page-security.php) ---------- */

/* Header (template-parts/security/hero.php): copy left, the creative right */
.shero{border-top:0;}
.shero .split{align-items:stretch;}
.shero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:48px;}
.shero-copy .h1{margin-bottom:22px;}
.shero-copy .btns{margin-top:clamp(28px,3vw,40px);}
.shero-stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(440px,46vw,620px);padding:var(--gut);
  background-image:var(--dots);
  background-size:var(--dots-size);background-position:center;
}

/* the ad in three formats, overlapping. Each image has the pixelation drawn over it on a canvas */
.senc-set{position:relative;width:100%;max-width:660px;aspect-ratio:1/.8;cursor:crosshair;touch-action:manipulation;-webkit-user-select:none;user-select:none;}
.senc{
  position:absolute;overflow:hidden;background:#0b0d12;
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(11,12,15,.04),0 24px 48px -28px rgba(11,12,15,.45);
}
.senc img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.senc canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
/* where each format sits in the group (% of the group's width and height) */
/* the main ad (feed) big and in front; the two cutdowns peek out behind it */
.senc--feed{left:23%;top:6%;width:54%;aspect-ratio:4/5;z-index:3;}
.senc--story{left:0;top:16%;width:32%;aspect-ratio:9/16;z-index:1;}
.senc--square{right:0;top:44%;width:34%;aspect-ratio:1/1;z-index:2;}
/* each ad floats a little, on its own path and timing */
.senc--feed{animation:senc-float-a 7s ease-in-out infinite;}
.senc--story{animation:senc-float-b 9s ease-in-out -2s infinite;}
.senc--square{animation:senc-float-c 8s ease-in-out -5s infinite;}
@keyframes senc-float-a{0%,100%{transform:translate(0,0);}50%{transform:translate(0,-8px);}}
@keyframes senc-float-b{0%,100%{transform:translate(0,0) rotate(0deg);}33%{transform:translate(-4px,6px) rotate(-.6deg);}66%{transform:translate(3px,-4px) rotate(.4deg);}}
@keyframes senc-float-c{0%,100%{transform:translate(0,0) rotate(0deg);}40%{transform:translate(5px,-7px) rotate(.7deg);}75%{transform:translate(-3px,3px) rotate(-.3deg);}}
@media (prefers-reduced-motion:reduce){.senc--feed,.senc--story,.senc--square{animation:none;}}

/* tags sit on the part of each cutdown that isn't covered */
.senc--square .senc-tag{left:auto;right:8px;}

/* "Encrypted" tag: shows while the ads are pixelated */
.senc-tag{
  position:absolute;left:8px;top:8px;z-index:1;font-size:11px;display:inline-block;
  padding:5px 8px;background:var(--blue);color:#fff;white-space:nowrap;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1);
}
.senc.is-enc .senc-tag{opacity:1;transform:none;transition-delay:.15s;}
@media (max-width:560px){
  .senc-tag{left:6px;top:6px;padding:4px 6px;font-size:10px;}
  .senc--square .senc-tag{left:auto;right:6px;}
}

/* Timeline (template-parts/security/protect.php) */
.stl-intro{padding-bottom:clamp(40px,5vw,72px);}
.stl-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;}

/* one row per measure: circle on the left, text on the right, always level */
.stl-grid{position:relative;border-top:1px solid var(--line);--node:clamp(68px,6.4vw,84px);}
.stl-grid::before{ /* dot grid behind the circles */
  content:"";position:absolute;left:0;top:0;bottom:0;width:50%;pointer-events:none;
  background-image:var(--dots);
  background-size:var(--dots-size);background-position:center;
}
.stl-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);cursor:pointer;}
.stl-row:focus{outline:none;}
.stl-row:focus-visible .stl-copy{outline:2px solid var(--blue);outline-offset:-2px;}

/* left: the circle, on a blue line that joins them all */
.stl-node{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(12px,1.2vw,16px) 0;}
.stl-node::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--blue);
}
.stl-row:first-child .stl-node::before{top:50%;}
.stl-row:last-child .stl-node::before{bottom:50%;}
.stl-disc{position:relative;width:var(--node);height:var(--node);color:#8a8e96;}
.stl-disc svg{width:84%;height:84%;margin:8%;}
.stl-row.is-on .stl-disc{color:var(--blue);border-color:var(--blue);--sc:1.55;z-index:1;}
.stl-disc{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .35s ease,color .25s ease;}

/* right: title and detail */
.stl-copy{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,2.2vw,30px) var(--gut);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .2s ease;
}
.stl-row:last-child .stl-copy{border-bottom:0;}
.stl-t{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.05;color:var(--soon-grey);margin-bottom:8px;transition:color .25s ease;}
.stl-d{font-size:15px;line-height:1.5;color:var(--soon-grey);max-width:44ch;transition:color .25s ease;}
.stl-row.is-on .stl-t{color:var(--ink);}
.stl-row.is-on .stl-d{color:var(--muted);}
@media (hover:hover){.stl-row:not(.is-on):hover .stl-copy{background-image:var(--hatch);}}

/* symbol motion while a measure is lit (the badge ones match the homepage hover) */
.stl-row.is-on .msec-rule{transform:scaleX(1);}
.stl-row.is-on .msec-ring,.stl-row.is-on .msec-mer ellipse{animation-play-state:running;}
.stl-disc .ssym-key{animation:ssym-key 2.4s ease-in-out infinite paused;}
.stl-disc .ssym-hole{transform-box:fill-box;transform-origin:center;animation:ssym-pulse 1.8s ease-in-out infinite paused;}
.stl-disc .ssym-sweep{transform-box:view-box;transform-origin:50px 50px;animation:msec-turn 3.2s linear infinite paused;}
.stl-disc .ssym-blip{animation:ssym-blip 3.2s linear infinite paused;}
.stl-disc .ssym-tick{stroke-dasharray:1;stroke-dashoffset:1;}
.stl-row.is-on .ssym-key,.stl-row.is-on .ssym-hole,.stl-row.is-on .ssym-sweep,.stl-row.is-on .ssym-blip{animation-play-state:running;}
.stl-row.is-on .ssym-shield{animation:ssym-draw .9s cubic-bezier(.2,.7,.2,1) both;}
@keyframes ssym-draw{from{stroke-dasharray:1;stroke-dashoffset:1;}to{stroke-dasharray:1;stroke-dashoffset:0;}}
.stl-row.is-on .ssym-tick{stroke-dashoffset:0;transition:stroke-dashoffset .45s ease;}
.stl-row.is-on .ssym-tick:nth-of-type(1){transition-delay:.15s;}
.stl-row.is-on .ssym-tick:nth-of-type(2){transition-delay:.4s;}
.stl-row.is-on .ssym-tick:nth-of-type(3){transition-delay:.65s;}
@keyframes ssym-key{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}
@keyframes ssym-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
@keyframes ssym-blip{0%,8%{opacity:0;}12%{opacity:1;}60%,100%{opacity:0;}}

/* Protocols (template-parts/security/protect.php): four cells, symbol in a small circle */
.sprot-disc{display:block;width:56px;height:56px;margin-bottom:clamp(28px,4vw,48px);}
.sprot-d{color:var(--muted);font-size:15px;line-height:1.5;}
.sprot .ssym-tick{stroke-dashoffset:0;}
.sprot-cell:hover .sprot-disc{color:var(--blue);border-color:var(--blue);--sc:1.06;}
.sprot-cell:hover .ssym-key,.sprot-cell:hover .ssym-hole,.sprot-cell:hover .ssym-sweep,.sprot-cell:hover .ssym-blip{animation-play-state:running;}
.sprot-cell:hover .ssym-tick{animation:ssym-draw .45s ease both;}
.sprot-cell:hover .ssym-tick:nth-of-type(2){animation-delay:.25s;}
.sprot-cell:hover .ssym-tick:nth-of-type(3){animation-delay:.5s;}

/* Line weight on the small discs: the badge drawings are made for the 180px homepage badges,
   so at this size their lines came out under 1px and the blue looked pale.
   These keep them about 1.5px, like the homepage, so they show in the full Medialake blue. */
.sprot-disc svg{stroke-width:3.6;}
.sfw-disc svg{stroke-width:2.1;}
/* the circle's edge thickens slightly when it turns blue, for the same reason */
.sprot-cell:hover .sprot-disc,.sfw-cell:hover .sfw-disc,.sfw-cell:focus-visible .sfw-disc{
  box-shadow:inset 0 0 0 .6px var(--blue),0 1px 0 rgba(11,12,15,.04),0 14px 34px -20px rgba(11,12,15,.3);
}

@media (max-width:860px){
  .shero-copy{gap:28px;}
  .shero-stage{min-height:0;padding:clamp(32px,8vw,56px) var(--gut);}
  .stl-head{grid-template-columns:1fr;}
  /* circles in a narrow column on the left */
  .stl-grid{--node:56px;}
  .stl-grid::before{width:88px;}
  .stl-row{grid-template-columns:88px minmax(0,1fr);}
  .stl-row.is-on .stl-disc{--sc:1.3;}
}
@media (prefers-reduced-motion:reduce){
  .stl-disc .ssym-key,.stl-disc .ssym-hole,.stl-disc .ssym-sweep,.stl-disc .ssym-blip{animation:none;}
}

/* ---------- Simplified page (header.php + frameworks.php) ---------- */

/* Header: title on the left, description and button on the right,
   split by the centre line (split-rule), which lines up with the frameworks grid's divider */
.shdr{border-top:0;}
.shdr-side{display:flex;flex-direction:column;justify-content:flex-end;}
.shdr-side .btns{margin-top:clamp(22px,2.4vw,32px);}

/* Our frameworks (template-parts/security/keys.php): the keys on the left, a row for each on the right.
   The keys' panel is plain, with the angled lines on hover (Control graphic).
   .is-on (on a key and its row) is set by assets/js/security-page.js (section 3). */
.skc-sec .split{align-items:stretch;}
.skc{display:flex;background-color:#f4f5f7;box-shadow:inset -1px 0 0 var(--line);} /* the centre line, drawn over the panel */
.skc:hover{background-image:var(--hatch);}
.skc-fig{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(32px,4vw,64px) clamp(16px,3vw,44px);}
.skc-svg{width:100%;max-width:600px;height:auto;display:block;overflow:visible;}
/* the plate */
.skc-plate .skc-tp{fill:#e9ecf1;stroke:rgba(11,12,15,.3);stroke-linejoin:round;}
.skc-plate .skc-sl{fill:#dde1e7;stroke:rgba(11,12,15,.3);stroke-linejoin:round;}
.skc-plate .skc-sr{fill:#cfd4dc;stroke:rgba(11,12,15,.3);stroke-linejoin:round;}
.skc-well{fill:#d5d9e0;stroke:rgba(11,12,15,.25);}
/* the keys: off-white tops, see-through blue sides */
.skc-k{cursor:pointer;color:var(--blue);}
.skc-k .skc-tp{fill:var(--bg);}
.skc-k .skc-sl{fill:rgba(34,76,251,.12);}
.skc-k .skc-sr{fill:rgba(34,76,251,.22);}
.skc-k polygon{stroke:var(--blue);stroke-width:1;stroke-linejoin:round;transition:fill .2s ease;}
.skc-lift{transition:transform .18s ease;}
.skc-badge{fill:none;stroke:currentColor;stroke-width:1.8;}
.skc-badge .msec-t{stroke:none;}
.skc-badge .msec-iso{stroke:var(--bg);}
.skc-m{font-family:var(--mono);font-size:12px;letter-spacing:.08em;fill:currentColor;}
.skc-led{fill:#c3c8d1;transition:fill .2s ease;}
/* the key that's on: pressed down, blue, LED lit */
.skc-k.is-on{color:#fff;}
.skc-k.is-on .skc-lift{transform:translateY(9px);}
.skc-k.is-on .skc-tp{fill:var(--blue);}
.skc-k.is-on .skc-sl{fill:#1d3fd6;}
.skc-k.is-on .skc-sr{fill:#1733b0;}
.skc-k.is-on .skc-badge .msec-iso{stroke:var(--blue);}
.skc-k.is-on .skc-led{fill:#fff;}
/* the rows */
.skc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.skc-row{flex:1;padding:clamp(24px,2.6vw,36px) var(--gut);border-bottom:1px solid var(--line);cursor:pointer;transition:background-color .2s ease;}
.skc-row:last-child{border-bottom:0;}
.skc-row:focus{outline:none;}
.skc-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.skc-rtop{display:flex;gap:12px;margin-bottom:12px;color:var(--muted);transition:color .2s ease;}
.skc-n{color:#a2a6ae;transition:color .2s ease;}
.skc-row .h3{margin-bottom:8px;}
.skc-p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;max-width:52ch;}
.skc-row.is-on{background-image:var(--hatch);}
.skc-row.is-on .skc-rtop,.skc-row.is-on .skc-n{color:var(--blue);}
@media (max-width:860px){.skc{border-bottom:1px solid var(--line);box-shadow:none;}}
@media (max-width:560px){.skc-fig{padding:28px 12px;}}
@media (prefers-reduced-motion:reduce){.skc-lift{transition:none;}}

/* Frameworks: 2 x 2 cards, badge top-left, type top-right */
.sfw .cells{border-top:0;} /* the section rule is the grid's top line */
.sfw-cell{cursor:default;}
.sfw-cell:focus{outline:none;}
.sfw-cell:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.sfw-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(32px,4vw,56px);}
.sfw-disc{width:clamp(76px,6.6vw,92px);height:clamp(76px,6.6vw,92px);color:#8a8e96;}
.sfw-disc svg{width:84%;height:84%;margin:8%;}
.sfw-type{color:var(--muted);transition:color .25s ease;}
.sfw-t{font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.05;margin-bottom:10px;}
.sfw-d{color:var(--muted);font-size:15px;line-height:1.5;max-width:46ch;}

/* hover: badge turns blue, lifts a little and animates */
.sfw-cell:hover .sfw-disc,.sfw-cell:focus-visible .sfw-disc{color:var(--blue);border-color:var(--blue);--sc:1.08;}
.sfw-cell:hover .sfw-type,.sfw-cell:focus-visible .sfw-type{color:var(--blue);}
.sfw-cell:hover .msec-rule,.sfw-cell:focus-visible .msec-rule{transform:scaleX(1);}
.sfw-cell:hover .msec-ring,.sfw-cell:hover .msec-mer ellipse,
.sfw-cell:focus-visible .msec-ring,.sfw-cell:focus-visible .msec-mer ellipse{animation-play-state:running;}
.sfw-cell .msec-ring{animation-duration:8s;}
.sfw-cell:hover .ssym-shield,.sfw-cell:focus-visible .ssym-shield{animation:ssym-draw .9s cubic-bezier(.2,.7,.2,1) both;}
.sfw-cell .msec-shackle{transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.sfw-cell:hover .msec-shackle,.sfw-cell:focus-visible .msec-shackle{transform:translateY(-4px);}

@media (max-width:860px){
  .shdr .split > .shdr-main{padding-bottom:0;border-bottom:0;}
  .shdr-side{padding-top:20px;}
}