/* PluginPip 2027 | Signal Dock, connected editorial folders for the homepage.
   All artwork is original SVG/CSS. The folder faces are real navigation links. */
.hero { --pp-dock-line: #c9f53d; }
.hero__signal { opacity: 1; z-index: 1; }
.pp-dock-routes use {
    fill: none;
    stroke: var(--pp-dock-line);
    stroke-opacity: .68;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pp-dock-routes use:nth-child(2),
.pp-dock-routes use:nth-child(4) { stroke: #6b9bff; stroke-opacity: .65; }
.pp-dock-routes__tracers use {
    fill: none;
    stroke: #e7ff89;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 66 1300;
    stroke-dashoffset: 66;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(201,245,61,.86));
    animation: pp27-dock-travel 16s linear infinite;
}
.pp-dock-routes__tracers use:nth-child(2) { animation-delay: 4s; stroke: #7eb3ff; filter: drop-shadow(0 0 6px #3266ff); }
.pp-dock-routes__tracers use:nth-child(3) { animation-delay: 8s; }
.pp-dock-routes__tracers use:nth-child(4) { animation-delay: 12s; stroke: #7eb3ff; filter: drop-shadow(0 0 6px #3266ff); }
.pp-dock-routes__junctions circle,
.pp-dock-routes__junctions rect { fill: var(--ink-deep); stroke: var(--pp-dock-line); stroke-width: 3.5; }
.pp-dock-routes__junctions circle:nth-child(2),
.pp-dock-routes__junctions circle:nth-child(4) { stroke: var(--blue); }
.pp-dock-routes__cores circle { fill: var(--pp-dock-line); }
.pp-dock-routes__cores circle:nth-child(2) { fill: #87aaff; }
@keyframes pp27-dock-travel {
    0% { opacity: 0; stroke-dashoffset: 66; }
    2% { opacity: 1; }
    18% { opacity: 1; stroke-dashoffset: -580; }
    24%,100% { opacity: 0; stroke-dashoffset: -650; }
}
/* Layer sits above wiring but below the large headline, allowing meaningful reading order. */
.pp-signal-docks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pp-signal-folder {
    --pp-folder-tone: var(--pink);
    position: absolute;
    width: clamp(195px, 17vw, 265px);
    min-height: 103px;
    display: block;
    pointer-events: auto;
    isolation: isolate;
    color: #fff9ff;
    text-decoration: none;
    border-radius: 18px;
    transform: translateY(0);
    transition: transform .25s ease;
    animation: pp27-dock-lift 16s ease-in-out infinite;
    will-change: transform;
}
.pp-signal-folder--quality { left: 68%; top: 15.8%; animation-delay: 0s; }
.pp-signal-folder--local { right: 7%; top: 31.7%; animation-delay: 4s; width: clamp(185px,15.4vw,235px); }
.pp-signal-folder--web { left: 10.3%; top: 61.9%; animation-delay: 8s; width: clamp(210px, 18vw, 270px); }
.pp-signal-folder--experience { left: 58.8%; top: 75.4%; animation-delay: 12s; width: clamp(215px, 18vw, 285px); }
.pp-signal-folder--pink { --pp-folder-tone: #f248a0; }
.pp-signal-folder--lime { --pp-folder-tone: #c9f53d; }
.pp-signal-folder--blue { --pp-folder-tone: #5995ff; }
.pp-signal-folder--lavender { --pp-folder-tone: #d5adff; }
/* A raised, rounded tab gives the folder its recognizable silhouette. */
.pp-signal-folder__tab {
    position: absolute;
    left: 12%; top: -14px;
    width: 35%; height: 25px;
    background: linear-gradient(150deg,#936ac9 0%,#513379 72%,#352054 100%);
    border: 2px solid var(--pp-folder-tone);
    border-bottom: 0;
    border-radius: 13px 15px 0 0;
    box-shadow: 0 -3px 10px color-mix(in srgb,var(--pp-folder-tone) 36%,transparent);
    transform: translateY(5px);
    animation: pp27-dock-tab 16s ease-in-out infinite;
}
.pp-signal-folder__face {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 54px 1px minmax(0,1fr);
    align-items: center;
    gap: 13px;
    min-height: 103px;
    padding: 16px 16px 14px;
    border-radius: 17px;
    border: 2px solid rgba(214,193,255,.7);
    background: linear-gradient(115deg,rgba(58,32,97,.98),rgba(30,15,65,.99) 78%);
    box-shadow: 0 11px 24px rgba(6,3,24,.46), 0 0 0 1px rgba(255,255,255,.09) inset, 0 0 14px rgba(181,114,243,.16);
    animation: pp27-dock-face 16s ease-in-out infinite;
    overflow: hidden;
}
.pp-signal-folder__face::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg,transparent 15%,rgba(255,255,255,.12) 52%,transparent 85%);
    opacity: 0; transform: translateX(-100%);
    animation: pp27-dock-shimmer 16s ease-in-out infinite;
}
.pp-signal-folder__icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--pp-folder-tone); }
.pp-signal-folder__icon svg { display: block; width: 43px; height: 43px; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--pp-folder-tone) 30%, transparent)); }
.pp-signal-folder__divider { width: 1px; height: 53px; background: rgba(224,204,255,.65); }
.pp-signal-folder__copy { display: grid; align-content: center; min-width:0; gap: 6px; }
.pp-signal-folder__copy strong { display:block; font-family:var(--body); font-weight:780; font-size: clamp(.94rem,1.18vw,1.17rem); line-height:1.1; letter-spacing:-.018em; text-wrap:balance; }
.pp-signal-folder__copy small { display:block; color:#d6c8e9; font-size: clamp(.66rem,.78vw,.81rem); line-height:1.2; }
.pp-signal-folder__light { position:absolute; right:9px; top:10px; width:5px; height:5px; border-radius:50%; background:var(--pp-folder-tone); box-shadow:0 0 8px var(--pp-folder-tone); }
.pp-signal-folder--pink .pp-signal-folder__tab { animation-delay:0s; }
.pp-signal-folder--lime .pp-signal-folder__tab { animation-delay:4s; }
.pp-signal-folder--blue .pp-signal-folder__tab { animation-delay:8s; }
.pp-signal-folder--lavender .pp-signal-folder__tab { animation-delay:12s; }
.pp-signal-folder--pink .pp-signal-folder__face,
.pp-signal-folder--pink .pp-signal-folder__face::before {animation-delay:0s}
.pp-signal-folder--lime .pp-signal-folder__face,
.pp-signal-folder--lime .pp-signal-folder__face::before {animation-delay:4s}
.pp-signal-folder--blue .pp-signal-folder__face,
.pp-signal-folder--blue .pp-signal-folder__face::before {animation-delay:8s}
.pp-signal-folder--lavender .pp-signal-folder__face,
.pp-signal-folder--lavender .pp-signal-folder__face::before {animation-delay:12s}
@keyframes pp27-dock-lift {
    0%,24%,100% { transform: translateY(0); }
    4%,18% { transform: translateY(-6px); }
}
@keyframes pp27-dock-tab {
    0%,24%,100% { transform: translateY(5px); }
    4%,18% { transform:translateY(-3px); }
}
@keyframes pp27-dock-face {
    0%,24%,100% { border-color:rgba(214,193,255,.7); box-shadow:0 11px 24px rgba(6,3,24,.46),0 0 0 1px rgba(255,255,255,.09) inset,0 0 14px rgba(181,114,243,.16); }
    4%,18% { border-color:var(--pp-folder-tone); box-shadow:0 15px 29px rgba(6,3,24,.5),0 0 0 1px rgba(255,255,255,.25) inset,0 0 19px color-mix(in srgb,var(--pp-folder-tone) 56%,transparent); }
}
@keyframes pp27-dock-shimmer {
    0%,4%,24%,100% { opacity:0; transform:translateX(-100%); }
    9% { opacity:.5; }
    16% { opacity:.05; transform:translateX(110%); }
}
.pp-signal-folder:hover, .pp-signal-folder:focus-visible { animation:none; transform:translateY(-7px); outline:0; }
.pp-signal-folder:hover .pp-signal-folder__tab, .pp-signal-folder:focus-visible .pp-signal-folder__tab { animation:none; transform: translateY(-3px); }
.pp-signal-folder:hover .pp-signal-folder__face, .pp-signal-folder:focus-visible .pp-signal-folder__face {
    animation:none;
    border-color:var(--pp-folder-tone);
    box-shadow: 0 15px 30px #07021b99,0 0 0 2px var(--pp-folder-tone),0 0 26px color-mix(in srgb,var(--pp-folder-tone) 56%, transparent);
}
.pp-signal-folder:focus-visible { outline: 3px solid white; outline-offset: 5px; border-radius: 18px; }
/* The message is never hidden, including before its pulse arrives. */
.hero__asterisk { left: 62%; top: 42%; font-size: clamp(2rem,3.3vw,4rem); opacity:.92; }
.hero__title { z-index: 4; }
.hero__line--one { color: #f9f6ff; }
.hero__line--two { color: var(--lavender); }
/* Folder positions remain legible on narrower desktops. */
@media (max-width: 1190px) and (min-width: 761px) {
    .pp-signal-folder { width: 200px; }
    .pp-signal-folder--local { width: 183px; right:4%; }
    .pp-signal-folder--experience { width: 222px; }
    .pp-signal-folder__face { grid-template-columns: 42px 1px minmax(0,1fr); gap:10px; padding:13px 10px; min-height:91px; }
    .pp-signal-folder__icon { width: 40px; height:40px; }
    .pp-signal-folder__icon svg { width:33px; height:33px; }
    .pp-signal-folder__copy strong { font-size:.92rem; }
    .pp-signal-folder__copy small { font-size:.69rem; }
    .pp-signal-folder { min-height:91px; }
    .hero__asterisk { top: 44%; left:65%; }
}
/* Mobile: keep interactive folders, but present them in an uncluttered grid.
   The line becomes a small connection rail instead of crossing text or cards. */
@media (max-width:1320px) {
    .hero { min-height:0; height:auto; padding-bottom:118px; padding-top:150px; }
    .hero__signal { opacity:.27; }
    .hero__signal .pp-dock-routes use,
    .hero__signal .pp-dock-routes__tracers use,
    .hero__signal .pp-dock-routes__junctions,
    .hero__signal .pp-dock-routes__cores { display:none; }
    .hero__topline { top: 110px; }
    .hero__stage { width: min(100% - 8vw,660px); min-height:180px; margin:0 auto 25px; }
    .hero__title { font-size: clamp(2.1rem,8.6vw,4.25rem); }
    .hero__line--two { font-size:.82em; }
    .hero__asterisk { top: -28px; left:auto; right:1%; font-size:2.5rem; }
    .pp-signal-docks {
        position:relative;
        inset:auto;
        z-index:5;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:17px 12px;
        width:min(100% - 8vw,660px);
        margin:10px auto 28px;
    }
    .pp-signal-docks::before { content:""; position:absolute; left:5%; right:5%; top:50%; height:2px; background:linear-gradient(90deg,transparent,var(--lime),var(--blue),transparent); opacity:.42; pointer-events:none; }
    .pp-signal-folder,
    .pp-signal-folder--quality,
    .pp-signal-folder--local,
    .pp-signal-folder--web,
    .pp-signal-folder--experience { position:relative; inset:auto; width:100%; min-height:85px; }
    .pp-signal-folder__tab { top:-10px; height:19px; }
    .pp-signal-folder__face { min-height:85px; grid-template-columns:34px 1px minmax(0,1fr); gap:7px; padding:10px 9px; border-radius:13px; }
    .pp-signal-folder__icon {width:33px;height:33px}
    .pp-signal-folder__icon svg {width:29px;height:29px}
    .pp-signal-folder__divider {height:39px}
    .pp-signal-folder__copy {gap:4px}
    .pp-signal-folder__copy strong {font-size:clamp(.72rem,2.45vw,.98rem);line-height:1.08}
    .pp-signal-folder__copy small {font-size:clamp(.61rem,2vw,.75rem)}
    .hero__foot { margin-top:0; align-items:flex-start; }
}
@media (min-width:761px) and (max-width:1320px) {
    .hero { padding-top:182px; padding-bottom:148px; }
    .hero__topline { top:126px; }
    .hero__stage { min-height:260px; margin-bottom:8px; }
    .hero__title { font-size:clamp(3.25rem,7.15vw,6.3rem); }
    .pp-signal-docks { width:min(100% - 10vw,770px); gap:22px 18px; margin-top:-15px; margin-bottom:35px; }
    .pp-signal-folder__face { min-height:100px; grid-template-columns:48px 1px minmax(0,1fr); gap:13px; padding:14px 17px; }
    .pp-signal-folder__icon { width:44px; height:44px; }
    .pp-signal-folder__icon svg { width:39px; height:39px; }
    .pp-signal-folder__copy strong { font-size:1.05rem; }
    .pp-signal-folder__copy small { font-size:.8rem; }
    .pp-signal-folder { min-height:100px; }
    .hero__asterisk { top:-20px; right:2%; }
}
@media (max-width:395px) {
    .pp-signal-folder__face { grid-template-columns:25px 1px minmax(0,1fr); gap:6px; padding:10px 8px; }
    .pp-signal-folder__icon {width:25px;height:25px}
    .pp-signal-folder__icon svg {width:24px;height:24px}
    .pp-signal-folder__copy strong {font-size:.74rem}
    .pp-signal-folder__copy small {font-size:.62rem}
}

/* v1.5.8: compact signal folders centred on the routing junctions.
   Junction coordinates come from the 1600x860 SVG viewBox. */
@media (min-width:1321px) {
  .pp-signal-folder {
    width:clamp(170px,11.7vw,210px);
    min-height:72px;
    border-radius:13px;
    transform:translateY(-50%);
    animation:pp27-dock-centred 16s ease-in-out infinite;
    will-change:transform;
  }
  .pp-signal-folder--quality {
    left:calc(67.875% - clamp(85px,5.85vw,105px));
    top:21.744%;
    width:clamp(170px,11.7vw,210px);
  }
  .pp-signal-folder--local {
    left:calc(91.375% - clamp(78px,5.4vw,97px));
    right:auto;
    top:36.628%;
    width:clamp(156px,10.8vw,194px);
  }
  .pp-signal-folder--web {
    left:calc(10.375% - clamp(90px,6.1vw,110px));
    top:68.488%;
    width:clamp(180px,12.2vw,220px);
  }
  .pp-signal-folder--experience {
    left:calc(75.75% - clamp(96px,6.65vw,119px));
    top:81.628%;
    width:clamp(192px,13.3vw,238px);
  }
  .pp-signal-folder__tab {
    top:-10px;left:13%;width:30%;height:18px;
    border-radius:9px 10px 0 0;
  }
  .pp-signal-folder__face {
    grid-template-columns:34px 1px minmax(0,1fr);
    gap:9px;
    min-height:72px;
    padding:10px 11px;
    border-radius:12px;
    border-width:1.5px;
    box-shadow:0 8px 20px rgba(6,3,24,.38),0 0 0 1px rgba(255,255,255,.06) inset;
  }
  .pp-signal-folder__icon {width:33px;height:33px}
  .pp-signal-folder__icon svg {width:29px;height:29px}
  .pp-signal-folder__divider {height:37px}
  .pp-signal-folder__copy {gap:3px}
  .pp-signal-folder__copy strong {font-size:clamp(.77rem,.91vw,.94rem);line-height:1.13}
  .pp-signal-folder__copy small {font-size:clamp(.58rem,.69vw,.74rem);line-height:1.18}
  .pp-signal-folder__light {right:8px;top:8px;width:4px;height:4px}
  @keyframes pp27-dock-centred {
    0%,24%,100% {transform:translateY(-50%)}
    4%,18% {transform:translateY(calc(-50% - 4px))}
  }
  .pp-signal-folder:hover,.pp-signal-folder:focus-visible {
    animation:none;transform:translateY(calc(-50% - 4px));
  }
  .pp-signal-folder:hover .pp-signal-folder__face,
  .pp-signal-folder:focus-visible .pp-signal-folder__face{
    box-shadow:0 12px 25px #07021b99,0 0 0 1px var(--pp-folder-tone),0 0 15px color-mix(in srgb,var(--pp-folder-tone) 35%,transparent);
  }
}

@media (prefers-reduced-motion:reduce) {
    .pp-dock-routes__tracers use,
    .pp-signal-folder,
    .pp-signal-folder__tab,
    .pp-signal-folder__face,
    .pp-signal-folder__face::before { animation:none !important; transition:none !important; }
    .pp-signal-folder__face::before { opacity:0; }
}