/* ==========================================================================
   Ensan ID • style.css  (optimized)
   Visual spec: black bg, gold/blue accents, ok-green verdicts
   Fully responsive • accessible • motion-safe • GPU-friendly
   ========================================================================== */

/* 1) Fonts (system fallback if Google Fonts blocked)
   Tip: using <link rel="preconnect"> + <link href=...> in HTML is faster than @import.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600;700&family=Inter:wght@300;400;600;700&display=swap');

/* 2) Design Tokens */
:root{
  /* Colors */
  --bg: #000;
  --fg: #fff;
  --muted: #C8CCD4;
  --accent-blue: #1E90FF;
  --accent-gold: #FFD700;
  --ok-green: #35D49A;
  --alert-red: #FF365D;

  /* Surfaces */
  --card-bg: #0B0B0B;
  --card-stroke: #171717;

  /* Glow / shadows */
  --glow-gold: 0 0 24px rgba(255,215,0,0.25);
  --glow-blue: 0 0 24px rgba(30,144,255,0.25);
  --glow-green: 0 0 24px rgba(53,212,154,0.25);
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.4);

  /* Typography (fluid) */
  --ff: "Inter","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  --fs-hero: clamp(2rem, 2.2rem + 1.5vw, 4.25rem);
  --fs-sub: clamp(1rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --fs-eyebrow: clamp(0.8rem, 0.75rem + 0.4vw, 1rem);

  /* Spacing (fluid) */
  --space-1: clamp(6px, 0.3vw, 8px);
  --space-2: clamp(10px, 0.6vw, 14px);
  --space-3: clamp(16px, 1.0vw, 22px);
  --space-4: clamp(22px, 1.6vw, 32px);
  --space-6: clamp(32px, 2.4vw, 48px);
  --space-8: clamp(48px, 3.6vw, 72px);

  --radius-sm: 10px;
  --radius-lg: 16px;

  /* Layout widths */
  --wrap: min(1100px, 94vw);
  --wrap-wide: min(1320px, 96vw);

  /* Motion */
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 900ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* 3) Reset + Base */
*{ box-sizing: border-box; }
html,body{ height:100%; background:var(--bg); color:var(--fg); }
body{
  margin:0;
  font-family: var(--ff);
  font-weight: 600;
  line-height: 1.55;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color: var(--accent-blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Focus visibility */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 4) Layout helpers */
.wrap{ width: var(--wrap); margin-inline: auto; }
.wrap-wide{ width: var(--wrap-wide); margin-inline: auto; }
.stack{ display:flex; flex-direction:column; gap: var(--space-2); }
.cluster{ display:flex; gap: var(--space-2); align-items:center; flex-wrap:wrap; }
.center{ display:grid; place-items:center; }

/* 5) Hero Section (uses small viewport units to avoid mobile URL-bar jumps) */
.hero{
  min-height: 80svh;
  display:grid;
  place-items:center;
  padding: var(--space-1) 0 var(--space-1);
  position: relative;
  overflow: clip;
  contain: layout paint;
}
.hero__inner{ text-align: center; }
.hero__eyebrow{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  color: var(--muted);
}
.hero__headline{
  margin: var(--space-2) 0 var(--space-2);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: 1.05;
  max-width: 32ch;
  margin-inline: auto;
}
.hero__sub{
  font-size: var(--fs-sub);
  color: #E6E9EF;
  max-width: 60ch;
  margin: 0 auto var(--space-6);
  opacity:.95;
}

/* 6) CTA buttons */
.btn{
  --btn-bg: #111;
  --btn-fg: var(--fg);
  --btn-bd: #222;
  appearance: none;
  border:1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: clamp(12px, 1.2vw, 16px) clamp(18px, 2.4vw, 28px);
  border-radius: 12px;
  font-weight: 600;
  letter-spacing:.01em;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  display:inline-grid;
  place-items:center;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ box-shadow: 0 0 0 4px rgba(30,144,255,.25); }

.btn--primary{
  --btn-bg: linear-gradient(180deg, rgba(255,215,0,0.16), rgba(255,215,0,0.06));
  --btn-bd: rgba(255,215,0,0.45);
  box-shadow: var(--glow-gold);
  color:#FFF7D6;
}
.btn--primary:hover{ box-shadow: 0 0 34px rgba(255,215,0,.35); }

.btn--secondary{
  --btn-bg: linear-gradient(180deg, rgba(30,144,255,0.16), rgba(30,144,255,0.06));
  --btn-bd: rgba(30,144,255,0.45);
  box-shadow: var(--glow-blue);
}

/* 7) Section blocks */
.section{
  padding: var(--space-8) 0;
  border-top: 1px solid var(--card-stroke);
}
.section--tight{ padding: var(--space-6) 0; }

/* 8) Cards */
.card{
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
  will-change: transform;
}
.card--glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  -webkit-backdrop-filter: saturate(110%) blur(6px);
  backdrop-filter: saturate(110%) blur(6px);
}

/* 9) Grids (fluid) */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px){
  .grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1160px){
  .grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* 10) Forms (verify + upload) */
.input, .select, .file{
  width:100%;
  padding: 14px 16px;
  border-radius: 12px;
  border:1px solid #222;
  background:#0D0F14;
  color: var(--fg);
  font-size: 0.98rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus, .select:focus, .file:focus{
  border-color: var(--accent-blue);
  box-shadow: var(--glow-blue);
}
.label{ color:#AAB2BE; font-size: .92rem; margin-bottom: 8px; display:block; }

/* 11) Verification verdict states */
.verdict{
  padding: var(--space-3);
  border-radius: 12px;
  border:1px solid #222;
  background: #0E1117;
}
.verdict--valid{
  border-color: rgba(53,212,154,0.5);
  box-shadow: var(--glow-green);
}
.verdict--invalid{
  border-color: rgba(255,54,93,0.5);
  box-shadow: 0 0 24px rgba(255,54,93,0.25);
}
.verdict__title{
  font-weight: 600;
  letter-spacing:.01em;
  margin: 0 0 6px 0;
}
.verdict__meta{
  color:#B7BEC9;
  font-size: .95rem;
}

/* 12) Status chips */
.chip{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing:.02em;
  border:1px solid currentColor;
}
.chip--ok{ color: var(--ok-green); }
.chip--bad{ color: var(--alert-red); }
.chip--warn{ color: var(--accent-gold); }

/* 13) Footer */
.footer{
  padding: var(--space-6) 0 var(--space-6);
  border-top: 1px solid var(--card-stroke);
  color:#AAB2BE;
  font-size: .95rem;
}

/* 14) Motion primitives (JS toggles .is-in) */
/* Reveal: visible by default. Only hide/animate when JS is active */
.reveal{ opacity:1; transform:none; }

/* When JS has initialized, we fade + lift in */
html.js .reveal{
  opacity:0; transform: translateY(10px);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
  will-change: opacity, transform;
}
html.js .reveal.is-in{
  opacity:1; transform: translateY(0);
}

/* Safety: kill any legacy full-screen canvas still hanging around */
canvas#matrix3d{ display:none !important; }


/* 15) Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* 16) Large displays (institutional screens) */
@media (min-width: 1400px){
  .hero__headline{ max-width: 22ch; }
  .hero__sub{ max-width: 40ch; }
}

/* 17) Print (for certificate preview pages) */
@media print{
  body{ background:#fff; color:#000; }
  .hero, .footer{ display:none; }
  .card, .verdict{ box-shadow:none; border-color:#ccc; }
}

/* 18) Utility spacing */
.mt-1{ margin-top: var(--space-1); }
.mt-2{ margin-top: var(--space-2); }
.mt-3{ margin-top: var(--space-3); }
.mt-4{ margin-top: var(--space-4); }
.mb-2{ margin-bottom: var(--space-2); }
.mb-3{ margin-bottom: var(--space-3); }
.mb-4{ margin-bottom: var(--space-4); }

.hidden{ display:none !important; }

/* 19) Safety for ultra-small devices */
@media (max-width: 360px){
  .btn{ padding: 10px 14px; }
  .hero__headline{ font-size: clamp(1.7rem, 6vw, 2.6rem); }
}

/* ==========================================================================
   Merkle Bloom (responsive, transparent) — encryption/robustness vibe
   ========================================================================== */
.hero-crypto{
  position: relative;
  width: clamp(320px, 36vw, 720px);
  height: clamp(60px, 18vw, 120px);
  /* tightened gap under emblem for better balance */
  margin: 0 auto clamp(10px, 1.2vw, 10px);
  isolation: isolate;
  contain: layout paint;
}
.hero-crypto #merkleCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  background: transparent;          /* blends with page */
  pointer-events: none;             /* never blocks clicks */
  z-index: 2;
  image-rendering: optimizeQuality; /* crisper text glow on some browsers */
}
/* ensure hidden canvas is actually removed from flow */
.hero-crypto #merkleCanvas[hidden]{ display:none !important; }

/* Optional: ultra-subtle crypto lattice hint (kept transparent) */
.hero-crypto::before{
  content:"";
  position:absolute; inset:-2%;
  pointer-events:none;
  opacity: .06;
  background:
    radial-gradient(120% 160% at 50% 40%, rgba(255,215,0,.10), transparent 70%),
    repeating-linear-gradient( 0deg, transparent 0 18px, rgba(255,255,255,.04) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.04) 18px 19px);
  mask-image: radial-gradient(80% 80% at 50% 50%, black 60%, transparent 100%);
}

/* Kill any legacy full-screen canvases if still present */
canvas#matrix3d{ display:none !important; }
/* STOP old hero lattice background if it exists */
.hero-crypto::before{ content: none !important; }

/* Kill any legacy full-screen canvas from old builds */
#matrix3d{ display:none !important; }

/* ==========================================================================
   SURGICAL ADDITIONS: Hero pulsation + one-time pixel fade-in
   (non-destructive; used by index.php #hero.hero--pulse and app.js)
   ========================================================================== */

/* emblem text that gently pulses */
.emblem{
  display:inline-block;
  will-change: transform, filter;
  filter: drop-shadow(0 0 0.35rem rgba(255,215,0,.25));
}
.emblem__text{
  font-weight: 700;
  letter-spacing:.02em;
  font-size: clamp(1.6rem, 4.5vw, 3.2rem);
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* keep only a subtle pulse on the emblem */
.hero.hero--pulse .emblem{
  animation: ensanPulse 2200ms ease-in-out infinite;
}
@keyframes ensanPulse{
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0.25rem rgba(30,144,255,.22)); }
  50%  { transform: scale(1.035); filter: drop-shadow(0 0 0.55rem rgba(255,215,0,.28)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0.25rem rgba(30,144,255,.22)); }
}

/* pixel overlay host (inserted/removed by app.js) */
.hero-pixels{
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 3;
}

/* pixels: gold + neo-blue squares that fade-in and vanish */
.hero-pixel{
  position:absolute;
  width:6px; height:6px;
  opacity:0;
  border-radius:1px;
  will-change: transform, opacity;
  transform: translate3d(0,0,0) scale(.8);
}
.hero-pixel--g{ background: var(--accent-gold); }
.hero-pixel--b{ background: var(--accent-blue); }

@keyframes pixelReveal{
  0%   { opacity:0; transform: translate3d(var(--tx),var(--ty),0) scale(.8); }
  70%  { opacity:.9; transform: translate3d(0,0,0) scale(1); }
  100% { opacity:0; transform: translate3d(0,0,0) scale(1); }
}

/* reduced-motion: no pulse, no pixel wash */
@media (prefers-reduced-motion: reduce){
  .hero.hero--pulse .emblem{ animation: none !important; }
  .hero-pixels{ display:none !important; }
}

/* ===== ScanFlow (hero) ===== */
#scanflow{
  position: relative;
  width: clamp(560px, 60vw, 980px);
  height: clamp(84px, 8.5vw, 120px);
  margin: var(--space-3) auto 0;
  pointer-events: none;
  isolation: isolate;
}

.scanflow__belt{
  position: absolute; inset: 0;
  overflow: visible;
}

/* Passport token */
.scanflow__pass{
  position: absolute; top: 50%;
  width: clamp(80px, 9vw, 120px);
  height: clamp(52px, 5.6vw, 72px);
  border-radius: 8px;
  transform: translate3d(-20%, -50%, 0); /* centered vertically */
  background: linear-gradient(180deg, #0d0f14, #0b0b0b);
  border: 1px solid #1a1a1a;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  will-change: transform, filter, box-shadow, opacity;
}
.scanflow__pass:before{
  /* subtle hologram strip */
  content:""; position:absolute; inset:1px;
  background: linear-gradient(135deg, rgba(255,215,0,.08), rgba(30,144,255,.06));
  border-radius: 7px;
}

/* Verdict halos (applied after scan) */
.scanflow__pass--valid{
  box-shadow: 0 0 22px rgba(30,144,255,.45), 0 6px 18px rgba(0,0,0,.35);
  border-color: rgba(30,144,255,.5);
  filter: saturate(1.15);
}
.scanflow__pass--invalid{
  box-shadow: 0 0 22px rgba(255,54,93,.50), 0 6px 18px rgba(0,0,0,.35);
  border-color: rgba(255,54,93,.55);
  filter: saturate(1.1);
}

/* Scanner */
.scanflow__scanner{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
  z-index: 2;
}
.scanner__beam{
  width: 64%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,215,0,0), rgba(255,215,0,.9), rgba(30,144,255,.95), rgba(255,215,0,.9), rgba(255,215,0,0));
  filter: drop-shadow(0 0 8px rgba(30,144,255,.75)) drop-shadow(0 0 14px rgba(255,215,0,.35));
  border-radius: 2px;
  animation: beamOsc 2.2s ease-in-out infinite;
}
.scanner__glow{
  position:absolute;
  width:66%; height:48px;
  border-radius:12px;
  background: radial-gradient(ellipse at 50% 50%, rgba(30,144,255,.18), rgba(255,215,0,.07) 55%, transparent 70%);
  opacity:.7;
}

@keyframes beamOsc{
  0%   { transform: translateY(-18px); }
  50%  { transform: translateY( 18px); }
  100% { transform: translateY(-18px); }
}

/* Exit fade */
@keyframes passFadeOut {
  to { opacity:0; transform: translate3d(110%, -50%, 0) rotate(.4deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .scanner__beam{ animation:none; }
}