/* =============================================================================
   home.css - the homepage's own components (hm-* classes).

   Linked from app/page.tsx only, right after exact.css, so it loads on "/" and
   nowhere else. Component classes only - never a bare utility name (a bare
   utility in a sheet that loads after tailwind-utils.css shadows its
   responsive variants; see site.css, THE ONE RULE).

   Palette = the homepage's: card #0f1214, row #0b0e10, hairline #1d2226 /
   #202c2f, title #e0e0e2, body #d4d4d8, muted #8d9097 (6.06:1 on the card),
   teal #658a95 / #8fc3cc -> #2f4449 (the old cards' shield and radar
   gradient), highlight #b2ccd5, one red accent for a "hit".

   Every animation is transform/opacity only and stops under
   prefers-reduced-motion (block at the end).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. MODULE STRIP - the scroller at the foot of the hero: each wired OSINT
   module as its bare logo + its name, one row drifting left. The track holds
   the list twice and slides by -50%, so the loop is seamless; every item
   carries its own trailing margin so both halves are exactly equal.
   --------------------------------------------------------------------------- */
/* The hero's vertical position (desktop). The column is 100vh tall but starts
   under the 56px header row, and centring the block in it (plus its 120px top
   margin) left the headline ~230px under the nav on a 975px-tall window. From
   768px the block is placed from the top instead, by viewport height: ~250px
   down at 975px tall, ~215px at 800px, ~295px at 1215px, never closer than 60px
   under the header row on a short laptop screen. Below 768px nothing changes (mt-[120px]). */
@media (min-width:768px){#cayo-exact-home .hm-hero-col{justify-content:flex-start}#cayo-exact-home .hm-hero-top{margin-top:clamp(60px,19.75vh,240px)}}
/* The module strip sits halfway between the buttons and the bottom of the
   screen, at any height. The buttons end at 56 + min(19.75vh, 240px) + 401px
   (the hero rule above) and the strip is 92px tall, so the gap that leaves
   equal space above and below it is 40.125vh - 274.5px while the 19.75vh
   top grows, and 50vh - 394.5px once it is capped (from 1215px tall) - the
   larger of the two is always the right one. Floor 90px (short screens),
   cap 300px (very tall ones). ~213px at 1215px tall, ~117px at 975px. */
@media (min-width:768px){#cayo-exact-home .hm-hero-col>.hm-mq{margin-top:min(300px,max(90px,calc(40.125vh - 274.5px),calc(50vh - 394.5px)))}}
.hm-mq{margin-top:90px;position:relative}
@media (min-width:768px){.hm-mq{margin-top:80px}}
.hm-mq-lead{text-align:center;font-size:16px;line-height:175%;color:#a1a1aa;text-wrap:balance}
@media (min-width:768px){.hm-mq-lead{font-size:18px}}
.hm-mq-lead b{color:#e0e0e2;font-weight:600}
.hm-mq-rows{margin-top:30px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.hm-mq-row{overflow:hidden;padding:4px 0}
.hm-mq-track{display:flex;width:max-content;animation:hm-mq 90s linear infinite}
.hm-mq:hover .hm-mq-track{animation-play-state:paused}
@keyframes hm-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hm-mq-item{display:inline-flex;align-items:center;gap:11px;margin-right:46px;color:#8d9097;white-space:nowrap;transition:color .2s linear}
.hm-mq-item svg{width:20px;height:20px;flex:none;fill:currentColor}
.hm-mq-item span{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#a1a1aa;transition:color .2s linear}
.hm-mq-item:hover,.hm-mq-item:hover span{color:#e0e0e2}

/* ---------------------------------------------------------------------------
   2. SEARCH-MODE VISUALS - drawn straight onto the card, no frame: the old
   homepage's cards carried one big graphic (a radar, a shield) and nothing
   boxed around it. Each visual is 230px tall and fades out at its edges.
   --------------------------------------------------------------------------- */
.hm-vis{position:relative;height:230px;width:100%;-webkit-user-select:none;user-select:none}
.hm-vis svg{display:block;width:100%;height:100%;overflow:visible}
.hm-fade-b{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.hm-fade-y{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 82%,transparent 100%)}

/* Shared pieces. A chip floats on a visual (absolute) unless .hm-chip-static;
   a tag is the small uppercase type label; a field is an input the way the
   bot's forms ask for it (LABEL | value). */
.hm-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid #202c2f;background:rgba(11,14,16,.92);font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.02em;color:#d4d4d8;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hm-chip svg{width:13px;height:13px;flex:none;color:#8d9097}
.hm-chip-static{position:relative;z-index:auto}
.hm-chip-dim{color:#8d9097}
.hm-tag{flex:none;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:6px;border:1px solid #202c2f;background:#0b0e10;font-family:"Geist Mono",monospace;font-size:10px;font-style:normal;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8d9097}
.hm-tag-on{color:#0b0e10;background:#8fc3cc;border-color:#8fc3cc}
.hm-field{display:inline-flex;align-items:center;min-width:0;max-width:100%;height:36px;border-radius:999px;border:1px solid #202c2f;background:#0b0e10;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.hm-field-key{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 12px 0 14px;border-right:1px solid #202c2f;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8d9097}
.hm-field-val{min-width:0;padding:0 16px 0 12px;font-family:"Geist Mono",monospace;font-size:12.5px;color:#e0e0e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A word rolling through a list (timing inline: steps(n) over a -100% slide). */
.hm-roll{display:inline-block;height:1.3em;overflow:hidden;vertical-align:bottom}
.hm-roll>span{display:flex;flex-direction:column}
.hm-roll>span>b{display:block;height:1.3em;line-height:1.3em;font-weight:500;color:#e0e0e2;white-space:nowrap}
@keyframes hm-rollsteps{to{transform:translateY(-100%)}}
/* Text inside the SVG visuals. */
.hm-svg-label{font-family:"Geist Mono",monospace;font-size:11px;fill:#8d9097}
.hm-svg-label-hi{fill:#d4d4d8}
.hm-svg-core{font-family:"Geist Mono",monospace;font-size:13px;font-weight:600;fill:#0b1214}
@media (max-width:479px){.hm-hide-sm{display:none}}

/* 2a. Radar - Intelligence Search. The sweep swings across the half-dial,
   hits surface in the archive's buckets, one red hit keeps pulsing. */
.hm-radar-sweep{transform-box:view-box;transform-origin:200px 232px;animation:hm-sweep 5s ease-in-out infinite alternate}
@keyframes hm-sweep{from{transform:rotate(-78deg)}to{transform:rotate(78deg)}}
.hm-blip{opacity:0;animation:hm-blip 5s ease-in-out infinite}
@keyframes hm-blip{0%,100%{opacity:0}20%,55%{opacity:1}}
.hm-hit-ring{transform-box:fill-box;transform-origin:center;animation:hm-ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes hm-ping{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(2.6);opacity:0}}

/* 2b. Directory - Phonebook. The query and the free export on top, every
   selector filed under the domain scrolling past below. */
.hm-dir-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hm-dir{position:absolute;top:50px;left:0;right:0;bottom:0;overflow:hidden}
.hm-dir-list{display:flex;flex-direction:column;animation:hm-dir 26s linear infinite}
@keyframes hm-dir{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.hm-dir-row{flex:none;display:flex;align-items:center;gap:12px;height:38px;margin-bottom:8px;padding:0 10px 0 8px;border-radius:12px;border:1px solid #1a2124;background:linear-gradient(90deg,rgba(32,44,47,.55),rgba(11,14,16,.35))}
.hm-dir-ico{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#0b0e10;border:1px solid #202c2f;color:#8fc3cc}
.hm-dir-ico svg{width:13px;height:13px}
.hm-dir-sel{flex:1;min-width:0;font-family:"Geist Mono",monospace;font-size:12px;color:#d4d4d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 2c. Identity graph - Identity Portal. The selector in the middle; the
   fields of a result light up one after another along their links. */
.hm-link{stroke-dasharray:4 7;animation:hm-dash 1.6s linear infinite}
@keyframes hm-dash{to{stroke-dashoffset:-22}}
.hm-sat{animation:hm-sat 6s ease-in-out infinite}
@keyframes hm-sat{0%,100%{opacity:.45}12%,40%{opacity:1}}

/* 2d. Export - Stealer Export. System ID in, a drop runs down, the .zip's
   bar fills and the check lands, then it starts over. */
.hm-exp{display:flex;flex-direction:column;align-items:center;justify-content:center}
.hm-exp>.hm-field,.hm-file{width:100%;max-width:420px}
.hm-flow{position:relative;display:block;width:2px;height:40px;background:repeating-linear-gradient(180deg,#3a5156 0 4px,transparent 4px 9px)}
.hm-flow>i{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:999px;background:#8fc3cc;box-shadow:0 0 12px rgba(143,195,204,.8);animation:hm-drop 1.8s ease-in infinite}
@keyframes hm-drop{0%{transform:translateY(-4px);opacity:0}15%,85%{opacity:1}100%{transform:translateY(36px);opacity:0}}
.hm-file{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;border:1px solid #202c2f;background:linear-gradient(90deg,rgba(32,44,47,.6),rgba(11,14,16,.5));box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
.hm-file-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#8fc3cc,#2f4449);color:#0b1214;box-shadow:inset 0 0 0 3px #22292d}
.hm-file-ico svg{width:20px;height:20px}
.hm-file-main{flex:1;min-width:0;display:block}
.hm-file-name{display:block;font-family:"Geist Mono",monospace;font-size:12.5px;color:#e0e0e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-file-bar{display:block;margin-top:9px;height:6px;border-radius:999px;background:#1d2226;overflow:hidden}
.hm-file-bar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8fc3cc,#4b676c);transform-origin:left center;animation:hm-fill 3.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes hm-fill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.hm-file-done{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#8fc3cc;color:#0b0e10;opacity:0;animation:hm-done 3.6s ease infinite}
.hm-file-done svg{width:12px;height:12px}
@keyframes hm-done{0%,68%{opacity:0}78%,100%{opacity:1}}
.hm-exp-foot{margin-top:14px;display:flex;gap:8px}

/* 2e. Raw file - UUID & Storage ID. Two ways in (a System UUID, or a Storage
   ID + the bucket it lives in), one raw .txt out, streamed line by line. */
.hm-raw{display:flex;flex-direction:column;gap:12px;width:100%}
.hm-raw>.hm-field{align-self:flex-start}
.hm-raw-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.hm-sep{display:flex;align-items:center;gap:12px;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#4b5358}
.hm-sep::before,.hm-sep::after{content:"";flex:1;height:1px;background:#1d2226}
.hm-out{margin-top:6px;padding-top:14px;border-top:1px dashed #202c2f}
.hm-out-head{display:flex;align-items:center;gap:8px;font-family:"Geist Mono",monospace;font-size:11.5px;color:#a1a1aa}
.hm-out-head svg{width:14px;height:14px;flex:none;color:#8fc3cc}
.hm-lines{position:relative;display:flex;flex-direction:column;gap:9px;margin-top:12px;height:96px;overflow:hidden}
.hm-line{display:flex;align-items:center;gap:12px;opacity:0;animation:hm-line 6s ease infinite}
@keyframes hm-line{0%{opacity:0;transform:translateY(6px)}10%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.hm-ln{flex:none;width:18px;text-align:right;font-family:"Geist Mono",monospace;font-size:11px;color:#4b5358}
.hm-bar{height:8px;border-radius:999px;background:linear-gradient(90deg,#8fc3cc,#4b676c);opacity:.55}
.hm-line .hm-bar{height:7px;opacity:.4}

/* ---------------------------------------------------------------------------
   3. MODULE CARDS - one full-width row that scrolls on its own, each card
   "@username -> what this module reads". The shell is the homepage's small
   card (.feature-container ring from site.css).
   .hm-mods breaks out of the max-w-5xl rail to the viewport edges (the shell
   clips overflow-x); the track holds two identical sets and slides -50%.
   --------------------------------------------------------------------------- */
.hm-mods{position:relative;width:100vw;left:50%;margin-left:-50vw;margin-top:100px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
@media (min-width:768px){.hm-mods{margin-top:120px}}
.hm-mods-track{display:flex;width:max-content;padding:2px 0;animation:hm-mods 320s linear infinite}
.hm-mods:hover .hm-mods-track,.hm-mods:focus-within .hm-mods-track{animation-play-state:paused}
@keyframes hm-mods{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hm-mods-set{display:flex;align-items:stretch;gap:20px;padding-right:20px}
.hm-card{flex:none;width:300px;border-radius:40px;padding:28px}
.hm-card .hm-to{animation:none;opacity:1}
.hm-mod{height:100%;display:flex;flex-direction:column}
.hm-mod-head{display:flex;align-items:center;gap:14px}
.hm-logo{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#0b0e10;border:1px solid #202c2f;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.hm-logo svg{width:22px;height:22px;fill:#e0e0e2}
.hm-mod-name{font-size:19px;font-weight:700;letter-spacing:-.01em;color:#fff}
.hm-query{margin-top:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hm-handle{font-family:"Geist Mono",monospace;font-size:13px;color:#e0e0e2;padding:6px 11px;border-radius:999px;border:1px solid #202c2f;background:#0b0e10}
.hm-to{flex:none;width:28px;height:14px;color:#8fc3cc;animation:hm-nudge 1.6s ease-in-out infinite}
@keyframes hm-nudge{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(5px);opacity:1}}
.hm-reads{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8d9097}
.hm-fields{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.hm-fields li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:#d4d4d8}
.hm-fields li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:999px;background:#8fc3cc;box-shadow:0 0 10px rgba(143,195,204,.6)}
.hm-mod-note{margin-top:40px;text-align:center;font-size:14px;line-height:175%;color:#a1a1aa;text-wrap:balance}
.hm-mod-note b{color:#e0e0e2;font-weight:600}

/* ---------------------------------------------------------------------------
   4. CLOSING CALL - the last screen before the footer.
   --------------------------------------------------------------------------- */
.hm-cta-row{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:15px}
.hm-cta-row>*{position:relative;isolation:isolate}
/* The badge arc over the closing call (components/home/BadgeArc.tsx): cayo's
   own 640x233 arc, placed as cayo places it - full rail width x 233px, the
   drawing centred, the title straight under it. On a phone it scales with
   the width instead (height follows the viewBox). */
.hm-arc{display:block;width:100%;height:233px}
@media (max-width:639.98px){.hm-arc{height:auto;aspect-ratio:640/233}}

/* Under the homepage plan cards: the way to the full comparison on /pricing. */
.hm-plans-link{display:flex;justify-content:center;margin-top:44px}
.hm-plans-link>a{display:inline-flex;align-items:center;gap:10px;padding:10px 4px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:#b2ccd5;transition:color .2s linear}
.hm-plans-link>a:hover{color:#fff}
.hm-plans-link svg{width:16px;height:16px;flex:none;transition:transform .2s ease}
.hm-plans-link>a:hover svg{transform:translateX(4px)}
.hm-plans-link>a:focus-visible{outline:2px solid #658a95;outline-offset:4px;border-radius:8px}

/* ---------------------------------------------------------------------------
   5. REDUCED MOTION - everything above holds still.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hm-mq-track,.hm-radar-sweep,.hm-blip,.hm-hit-ring,.hm-dir-list,.hm-link,.hm-sat,.hm-flow>i,.hm-file-bar>span,.hm-file-done,.hm-line,.hm-to{animation:none}
  .hm-roll>span{animation:none!important}
  .hm-plans-link svg{transition:none}
  .hm-blip,.hm-line,.hm-file-done{opacity:1}
  .hm-flow>i{display:none}
  .hm-radar-sweep{transform:rotate(-20deg)}
  .hm-mods{overflow-x:auto}
  .hm-mods-track{animation:none}
  .hm-mods-set[aria-hidden]{display:none}
}