/* Lifted out of vayuweb.html. style-src is 'self', so a <style> block
   in the page would be refused and the rules silently lost. */
/* ══════════════════════════════════════════════════════════════
       VayuWeb — a colder, sharper skin over the VayuPress design system.
       Monochrome steel to match the mark; angles instead of curves.
       Scoped to this page only; nothing here leaks to the other pages.
       ══════════════════════════════════════════════════════════════ */

    .vw-web {
      position: absolute; inset: 0; pointer-events: none;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .vw-web svg { width: min(150vw, 1500px); height: auto; opacity: 0.30; }
    .vw-web .strand { stroke: #8b9aae; fill: none; vector-effect: non-scaling-stroke; }
    .vw-web .spoke  { stroke-width: 0.6; }
    .vw-web .ring   { stroke-width: 0.5; }

    /* the mark drifts a hair, like something waiting on a thread */
    @keyframes vw-drift {
      0%, 100% { transform: translateY(0)      rotate(0deg); }
      50%      { transform: translateY(-9px)   rotate(-0.6deg); }
    }
    .vw-drift { animation: vw-drift 7.5s ease-in-out infinite; }

    /* hairline glow behind the hero mark */
    .vw-halo {
      position: absolute; left: 50%; top: 46%;
      width: 34rem; height: 34rem; border-radius: 9999px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(191,205,222,0.10) 0%, rgba(191,205,222,0) 68%);
      pointer-events: none;
    }

    /* angular card — the corner is cut, echoing the mark's sharp joints */
    .vw-cut {
      background: rgba(255,255,255,0.022);
      border: 1px solid rgba(255,255,255,0.07);
      clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
      transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .vw-cut:hover {
      background: rgba(255,255,255,0.045);
      border-color: rgba(219,226,236,0.20);
      transform: translateY(-3px);
    }

    /* ── Premium card: gradient hairline, inner sheen, lift + glow on hover ── */
    .vw-card {
      position: relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.040) 0%, rgba(255,255,255,0.010) 60%),
        rgba(6,9,16,0.55);
      border: 1px solid rgba(255,255,255,0.075);
      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
      transition:
        border-color 0.4s ease,
        transform    0.45s cubic-bezier(0.16,1,0.3,1),
        box-shadow   0.45s ease,
        background   0.4s ease;
    }
    /* the light catching the top edge */
    .vw-card::before {
      content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(219,226,236,0.34) 26%, rgba(219,226,236,0.34) 74%, transparent);
      opacity: 0.5; transition: opacity 0.4s ease;
    }
    .vw-card:hover {
      border-color: rgba(219,226,236,0.24);
      transform: translateY(-5px);
      box-shadow: 0 26px 60px -28px rgba(0,0,0,0.95);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.062) 0%, rgba(255,255,255,0.015) 60%),
        rgba(6,9,16,0.55);
    }
    .vw-card:hover::before { opacity: 1; }

    /* index numeral in the card corner */
    .vw-idx {
      position: absolute; top: 1.15rem; right: 1.35rem;
      font-family: '"JetBrains Mono"', monospace; font-size: 0.62rem;
      letter-spacing: 0.14em; color: rgba(184,196,212,0.34);
    }

    /* icon plate */
    .vw-ico {
      width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
      background: rgba(219,226,236,0.055);
      border: 1px solid rgba(255,255,255,0.09);
      clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
      color: #dbe2ec;
      transition: background 0.4s ease, color 0.4s ease;
    }
    .vw-card:hover .vw-ico { background: rgba(219,226,236,0.11); color: #fff; }

    /* footnote strip inside a card */
    .vw-foot {
      font-family: '"JetBrains Mono"', monospace; font-size: 0.68rem;
      color: rgba(139,154,174,0.9);
      border-top: 1px solid rgba(255,255,255,0.055);
    }

    /* terminal-style policy block */
    .vw-term {
      background: rgba(2,4,9,0.75);
      border: 1px solid rgba(255,255,255,0.08);
      clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    }
    .vw-term-bar {
      border-bottom: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.022);
    }
    .vw-term pre {
      margin: 0; padding: 1.15rem 1.35rem;
      overflow-x: auto; white-space: pre; tab-size: 2;
      font-family: '"JetBrains Mono"', monospace; font-size: 0.76rem; line-height: 1.85;
      color: #b8c4d4;
    }
    .vw-term .k  { color: #f2f5f9; font-weight: 500; }
    .vw-term .v  { color: #8b9aae; }
    .vw-term .no { color: #f0a5a5; }
    .vw-term .ok { color: #9fe0c2; }

    /* stat tile */
    .vw-stat {
      background: rgba(255,255,255,0.022);
      border: 1px solid rgba(255,255,255,0.065);
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }

    /* TLD chip */
    .vw-tld {
      font-family: '"JetBrains Mono"', monospace;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    }

    /* the "coming soon" pulse */
    @keyframes vw-pulse {
      0%, 100% { opacity: 1;    box-shadow: 0 0 0 0 rgba(219,226,236,0.35); }
      70%      { opacity: 0.65; box-shadow: 0 0 0 7px rgba(219,226,236,0); }
    }
    .vw-dot { animation: vw-pulse 2.6s ease-in-out infinite; }

    /* section rule that fades out at both ends */
    .vw-rule {
      height: 1px; border: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.11) 22%, rgba(255,255,255,0.11) 78%, transparent);
    }

    /* scroll reveal — only hides content when scripting is on, so the page
       stays fully readable with JavaScript disabled */
    .vw-js [data-vw-reveal] {
      opacity: 0; transform: translateY(28px);
      transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
      transition-delay: var(--d, 0ms);
    }
    .vw-js [data-vw-reveal].vw-shown { opacity: 1; transform: none; }

    /* numbered phase rail */
    .vw-phase { position: relative; padding-left: 2.6rem; }
    .vw-phase::before {
      content: ""; position: absolute; left: 0.72rem; top: 1.9rem; bottom: -1.35rem;
      width: 1px; background: rgba(255,255,255,0.09);
    }
    .vw-phase:last-child::before { display: none; }
    .vw-phase .vw-num {
      position: absolute; left: 0; top: 0.1rem;
      width: 1.5rem; height: 1.5rem;
      display: grid; place-items: center;
      font-family: '"JetBrains Mono"', monospace; font-size: 0.62rem;
      color: #b8c4d4; background: #0a1020;
      border: 1px solid rgba(255,255,255,0.14);
      clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
    }

    @media (prefers-reduced-motion: reduce) {
      .vw-drift, .vw-dot { animation: none; }
      .vw-js [data-vw-reveal] { opacity: 1; transform: none; transition: none; }
    }