/* ============================================================
   PT Sangkareang Karyatama Sejahtera — sangkareangkc.com
   Design token: industrial red/black + amber hazard accent.
   Tailwind (CDN) handles layout utilities; token/signature
   effects (glow, glass, blueprint grid, corner brackets) live here.
   ============================================================ */

:root {
  --ink: #0a0a0d;
  --ink-2: #131318;
  --ink-3: #1b1b22;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hi: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.1);
  --border-hi: rgba(255, 255, 255, 0.18);

  --red: #dc2626;
  --red-dark: #7f1d1d;
  --red-glow: #ef4444;
  --red-soft: #fdeeee;

  --amber: #f59e0b;
  --amber-glow: #fbbf24;

  --paper: #ffffff;
  --off: #f6f5f3;
  --steel: #6b7280;
  --line: #e7e5e2;
  --charcoal: #17181c;

  --font-display: "Big Shoulders Display", "Archivo", sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --shadow-glow-red: 0 0 50px rgba(220, 38, 38, 0.35);
  --shadow-glow-amber: 0 0 40px rgba(245, 158, 11, 0.28);
  --shadow-sm: 0 1px 2px rgba(10, 10, 13, 0.06);
  --shadow-md: 0 10px 34px rgba(10, 10, 13, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .counter-num { transition: none !important; }
}

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 18px; z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Texture: blueprint grid ---------- */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.blueprint-grid-fade {
  mask-image: radial-gradient(ellipse 85% 75% at 50% 15%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 15%, #000 35%, transparent 78%);
}

/* ---------- Texture: grain overlay (atmospheric depth) ---------- */
.grain::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---------- Gradient mesh (hero) ---------- */
.mesh-red {
  background:
    radial-gradient(at 15% 8%, rgba(220, 38, 38, 0.35) 0%, transparent 45%),
    radial-gradient(at 88% 78%, rgba(245, 158, 11, 0.16) 0%, transparent 50%);
}

/* ---------- Glass ---------- */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass:hover { background: var(--surface-hi); border-color: var(--border-hi); }

/* ---------- Corner brackets (blueprint / technical-drawing marks) ---------- */
.brkt { position: relative; }
.brkt::before, .brkt::after,
.brkt > .brkt-tr, .brkt > .brkt-bl {
  content: ""; position: absolute; width: 18px; height: 18px;
  border-color: currentColor; pointer-events: none;
}
.brkt::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.brkt::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.brkt > .brkt-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.brkt > .brkt-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }

/* ---------- Diagonal section cut ---------- */
.cut-bottom-l {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
}
@media (max-width: 768px) {
  .cut-bottom-l { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%); }
}

/* ---------- Hazard tick divider (engineering-drawing dashes) ---------- */
.tick-divider {
  height: 10px;
  background-image: repeating-linear-gradient(
    90deg, var(--red) 0 14px, var(--amber) 14px 28px, transparent 28px 34px
  );
  background-size: 34px 3px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.9;
}

/* ---------- Glow CTA ---------- */
.btn-glow { box-shadow: 0 0 0 rgba(220, 38, 38, 0); transition: box-shadow .25s ease, transform .15s ease, background-color .2s ease; }
.btn-glow:hover { box-shadow: var(--shadow-glow-red); transform: translateY(-1px); }
.btn-glow:active { transform: translateY(0); }

/* ---------- Reveal on scroll ---------- */
html.js-anim .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease-out, transform .55s ease-out; }
html.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Marquee (project ticker) ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 34s linear infinite; }
.mask-fade-x { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ---------- Nav ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--red); transition: right .2s ease;
}
.nav-link:hover::after { right: 0; }

/* ---------- Misc ---------- */
.text-gradient-red {
  background: linear-gradient(100deg, #ff8a8d 0%, #ef4444 45%, #f59e0b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-lift:hover { transform: translateY(-4px); }