/* ============================================================
   Tehkikaat — "Declassified Dossier" design layer
   Editorial noir: huge type, mono case-file chrome, redactions,
   stamps, ticker strips, paper evidence break.
   ============================================================ */

::selection { background: #C9A227; color: #07090D; }

html { scrollbar-color: #39455A #07090D; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #07090D; }
body::-webkit-scrollbar-thumb { background: #39455A; border-radius: 0; }

/* Global film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- */
/* Scroll reveal                                               */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------- */
/* Display type helpers                                        */
.text-outline { -webkit-text-stroke: 1px rgba(237,232,220,.4); color: transparent; }
.text-outline-gold { -webkit-text-stroke: 1px rgba(201,162,39,.65); color: transparent; }
@media (min-width: 768px) {
  .text-outline, .text-outline-gold { -webkit-text-stroke-width: 1.5px; }
}

/* Vertical rail text */
.rail { writing-mode: vertical-rl; letter-spacing: .35em; }

/* ---------------------------------------------------------- */
/* Ticker strip                                                */
.ticker { overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; will-change: transform; animation: ticker 46s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* Giant scrolling wordmark */
.marquee-word { overflow: hidden; white-space: nowrap; }
.marquee-word > span { display: inline-flex; animation: ticker 30s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-word > span { animation: none; } }

/* ---------------------------------------------------------- */
/* Redacted text — hover / focus to reveal                     */
.redact { position: relative; white-space: nowrap; cursor: help; outline: none; }
.redact::after {
  content: ""; position: absolute; inset: -0.25em -0.85em -0.05em -0.14em; background: #EDE8DC;
  transition: transform .45s cubic-bezier(.16,1,.3,1); transform-origin: left center;
}
.redact:hover::after, .redact:focus-visible::after { transform: scaleX(0); transform-origin: right center; }
.paper .redact::after { background: #14100A; }

/* Large redaction with an explicit label (hero): label rides on ::before,
   so the bar's em-based insets keep tracking the parent font size */
.redact-label::before {
  content: "[ REDACTED — HOVER TO REVEAL ]";
  position: absolute; inset: -0.25em -0.85em -0.05em -0.14em; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-style: normal;
  font-size: clamp(10px, 1.1vw, 15px); letter-spacing: .3em; color: #07090D;
  pointer-events: none; transition: opacity .3s ease;
}
.redact-label:hover::before, .redact-label:focus-visible::before { opacity: 0; }

/* ---------------------------------------------------------- */
/* Rubber stamps                                               */
.stamp {
  display: inline-block; padding: .35em .8em;
  border: 3px double currentColor; border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600;
  letter-spacing: .25em; text-transform: uppercase; line-height: 1.1;
  transform: rotate(-7deg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0.12'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0.12'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- */
/* Corner-tick frames (crosshair corners)                      */
.tick-frame { position: relative; }
.tick-frame::before, .tick-frame::after {
  content: ""; position: absolute; width: 16px; height: 16px; z-index: 5;
  transition: opacity .3s ease;
}
.tick-frame::before { top: -1px; left: -1px; border-top: 2px solid #C9A227; border-left: 2px solid #C9A227; }
.tick-frame::after { bottom: -1px; right: -1px; border-bottom: 2px solid #C9A227; border-right: 2px solid #C9A227; }
.tick-hover::before, .tick-hover::after { opacity: 0; }
.tick-hover:hover::before, .tick-hover:hover::after { opacity: 1; }

/* ---------------------------------------------------------- */
/* Case-file card (site-wide card idiom)                       */
.card-file {
  position: relative;
  background: linear-gradient(160deg, #10131A 0%, #0B0E14 100%);
  border: 1px solid rgba(237,232,220,.08);
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.card-file:hover { border-color: rgba(201,162,39,.45); }
a.card-file:hover, .card-file.lift:hover { transform: translateY(-4px); }

/* Manila folder tab */
.folder { position: relative; margin-top: 18px; }
.folder::before {
  content: attr(data-tab); position: absolute; top: -19px; left: 0; z-index: 5;
  background: #C9A227; color: #07090D;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .2em; padding: 4px 16px 2px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}

/* Declassified stamp on hover */
.declass { position: relative; }
.declass .declass-stamp {
  position: absolute; top: 18px; right: 14px; z-index: 6;
  color: #C0432E; font-size: 12px;
  opacity: 0; transform: rotate(-14deg) scale(1.6);
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.declass:hover .declass-stamp { opacity: 1; transform: rotate(-14deg) scale(1); }

/* ---------------------------------------------------------- */
/* Duotone evidence imagery                                    */
.evidence-img { filter: grayscale(1) contrast(1.08) brightness(.8); transition: filter .5s ease, transform .6s ease; }
a:hover .evidence-img, .card-file:hover .evidence-img, .svc-row:hover .evidence-img { filter: grayscale(.1) contrast(1.02) brightness(.95); }

/* Scanline sweep on hover */
.scanline { position: relative; overflow: hidden; }
.scanline::after {
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(201,162,39,.14), transparent);
  opacity: 0; pointer-events: none;
}
.scanline:hover::after { animation: scan 1.1s ease-in-out; }
@keyframes scan { 0% { top: -30%; opacity: 1; } 100% { top: 130%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scanline:hover::after { animation: none; } }

/* ---------------------------------------------------------- */
/* Service index rows                                          */
.svc-row { position: relative; }
.svc-row .svc-peek {
  position: absolute; right: 8%; top: 50%; z-index: 20; width: 240px; aspect-ratio: 4/3;
  transform: translateY(-50%) rotate(4deg) scale(.85); opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 24px 60px rgba(0,0,0,.6); border: 1px solid rgba(201,162,39,.4);
}
.svc-row:hover .svc-peek { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1); }
.svc-row .svc-title { transition: transform .35s cubic-bezier(.16,1,.3,1), color .3s ease; }
.svc-row:hover .svc-title { transform: translateX(16px); }

/* ---------------------------------------------------------- */
/* Paper evidence section                                      */
.paper {
  background-color: #EDE8DC; color: #14100A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
}
.paper ::selection { background: #14100A; color: #EDE8DC; }

/* Taped photograph */
.taped { position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.taped::before, .taped::after {
  content: ""; position: absolute; width: 90px; height: 26px;
  background: rgba(237,232,220,.5); border: 1px solid rgba(20,16,10,.08);
  backdrop-filter: blur(1px); z-index: 5;
}
.taped::before { top: -12px; left: -28px; transform: rotate(-40deg); }
.taped::after { bottom: -12px; right: -28px; transform: rotate(-40deg); }

/* Typewriter-style keyline under paper headings */
.keyline { border-bottom: 2px solid #14100A; }

/* ---------------------------------------------------------- */
/* Dashed chain-of-custody connector                           */
.chain { position: relative; }
@media (min-width: 768px) {
  .chain::before {
    content: ""; position: absolute; top: 44px; left: 6%; right: 6%; height: 0;
    border-top: 1px dashed rgba(201,162,39,.35); z-index: 0;
  }
}

/* ---------------------------------------------------------- */
/* Blinking "recording" dot + status pulse                     */
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
.dot-live { animation: blink 1.6s infinite; }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(192,67,46,.5); }
  70% { box-shadow: 0 0 0 8px rgba(192,67,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,67,46,0); }
}
.pulse-red { animation: pulse-ring 2s infinite; }
@media (prefers-reduced-motion: reduce) { .dot-live, .pulse-red { animation: none; } }

/* ---------------------------------------------------------- */
/* Ken Burns drift for hero background                         */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
.kenburns { animation: kenburns 22s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .kenburns { animation: none; } }

/* ---------------------------------------------------------- */
/* FAQ details/summary                                         */
details.faq summary { cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .chev { transition: transform .3s ease; }
details.faq[open] summary .chev { transform: rotate(45deg); }
details.faq[open] { border-color: rgba(201,162,39,.4); }

/* ---------------------------------------------------------- */
/* Buttons                                                     */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: #C9A227; color: #07090D; font-weight: 600;
  padding: 1rem 2rem; border: 1px solid #C9A227;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
  box-shadow: 4px 4px 0 rgba(201,162,39,.25);
}
.btn-gold:hover { background: #E3C15C; border-color: #E3C15C; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(201,162,39,.3); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border: 1px solid rgba(237,232,220,.25); color: #EDE8DC;
  padding: 1rem 2rem; transition: border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btn-ghost:hover { border-color: #C9A227; color: #C9A227; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(201,162,39,.15); }
@media (prefers-reduced-motion: reduce) {
  .btn-gold:hover, .btn-ghost:hover { transform: none; }
}

/* Gold underline flourish (inner-page headings) */
.rule-gold { position: relative; display: inline-block; }
.rule-gold::after {
  content: ""; position: absolute; left: 0; bottom: -10px;
  width: 56px; height: 2px; background: linear-gradient(90deg, #C9A227, transparent);
}
.rule-gold-center::after { left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #C9A227, transparent); }

/* Focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #C9A227; outline-offset: 3px;
}