/* ============================================================
   LADLA — Inner Pages Stylesheet (blog + services)
   No hardcoded colours. All values from tokens.css.
   ============================================================ */

/* === FONTS === */
@font-face {
  font-family:'Inter';
  src:url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* === BASE === */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

html {
  background:var(--black);
  color:var(--white);
  font-family:var(--font-sans);
  font-size:16px;
  overflow-x:clip;
}

body {
  background:var(--black);
  min-height:100vh;
  overflow-x:clip;
  position:relative;
}

/* Noise texture overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.008) 2px,
      rgba(255,255,255,0.008) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.004) 2px,
      rgba(255,255,255,0.004) 4px
    );
  opacity:0.4;
}

/* Cosmic radial wash at top */
body::after {
  content:'';
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(800px circle at 50% 0%, rgba(25,81,168,0.08), transparent 60%) fixed;
}

/* === SKIP LINK === */
.skip-link {
  position:fixed; top:var(--space-4); left:var(--space-4);
  z-index:100; padding:var(--space-3) var(--space-6);
  background:var(--cosmic); color:var(--white);
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  border-radius:4px; opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { opacity:1; pointer-events:auto; transform:translateY(0); }

/* === FOCUS RING === */
:focus-visible {
  outline:2px solid var(--cosmic-bright);
  outline-offset:4px;
}

/* ============================================================
   INNER TOP NAV — fixed, full width
   ============================================================ */
.inner-nav {
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-nav);
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-8);
  background:rgba(5,5,5,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--white-10);
}

/* Wordmark */
.inner-nav__wordmark {
  font-family:var(--font-sans);
  font-size:1.5rem;
  font-weight:var(--weight-black);
  color:var(--white);
  letter-spacing:0.12em;
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.inner-nav__wordmark:hover,
.inner-nav__wordmark:focus-visible { color:var(--white-60); }

/* Dot nav — right side */
.inner-nav__dots {
  display:flex; align-items:center; gap:var(--space-6);
  list-style:none; margin:0; padding:0;
}

.inner-nav__dot {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  text-decoration:none;
}
.inner-nav__dot:focus-visible {
  outline:2px solid var(--cosmic-bright); outline-offset:3px;
}
.inner-nav__dot::before {
  content:''; display:block;
  width:6px; height:6px; border-radius:50%;
  background:var(--white-20);
  transition:background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.inner-nav__dot[data-active="true"]::before {
  background:var(--cosmic);
  box-shadow:0 0 14px var(--cosmic-glow), 0 0 4px var(--cosmic-glow);
  transform:scale(1.4);
}
.inner-nav__dot:hover::before { background:var(--white-40); }

.inner-nav__label {
  position:absolute; right:calc(100% + var(--space-2));
  white-space:nowrap;
  font-size:var(--text-xs); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide); color:var(--white-60);
  opacity:0; transform:translateX(8px);
  transition:opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  pointer-events:none;
}
.inner-nav__dot:hover .inner-nav__label,
.inner-nav__dot:focus-visible .inner-nav__label { opacity:1; transform:translateX(0); }

@media(max-width:767px) {
  .inner-nav { padding:0 var(--space-4); }
  .inner-nav__label { display:none; }
  .inner-nav__dots { gap:var(--space-4); }
}

/* ============================================================
   INNER HERO — below fixed nav
   ============================================================ */
.inner-hero {
  padding-top:120px;
  padding-bottom:var(--space-16);
  padding-left:var(--space-8);
  padding-right:var(--space-8);
  max-width:720px;
  margin-inline:auto;
}

.inner-hero__eyebrow {
  display:block;
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--white-40);
  margin-bottom:var(--space-4);
}

.inner-hero__title {
  font-size:var(--text-4xl);
  font-weight:var(--weight-black);
  line-height:var(--leading-tight);
  color:var(--white);
  margin:0 0 var(--space-4);
}

.inner-hero__descriptor {
  display:block;
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--white-40);
  margin-top:var(--space-4);
  filter:drop-shadow(0 0 6px var(--cosmic-glow));
}

@media(max-width:767px) {
  .inner-hero {
    padding-top:96px;
    padding-left:var(--space-6);
    padding-right:var(--space-6);
  }
  .inner-hero__title { font-size:var(--text-3xl); }
}

/* ============================================================
   CONTENT PROSE
   ============================================================ */
.inner-content {
  max-width:720px;
  margin-inline:auto;
  padding:0 var(--space-8) var(--space-24);
}

.inner-content h2 {
  font-size:var(--text-2xl);
  font-weight:var(--weight-bold);
  color:var(--white-90);
  margin:var(--space-16) 0 var(--space-6);
  line-height:var(--leading-snug);
}

.inner-content h2:first-child { margin-top:0; }

.inner-content p {
  font-size:var(--text-lg);
  font-weight:var(--weight-light);
  line-height:var(--leading-relaxed);
  color:var(--white-60);
  margin:0 0 var(--space-8);
}

.inner-content strong,
.inner-content b {
  color:var(--white);
  font-weight:var(--weight-medium);
}

.inner-content a {
  color:var(--cosmic-bright);
  text-decoration:none;
  transition:text-decoration var(--dur-fast);
}
.inner-content a:hover,
.inner-content a:focus-visible {
  text-decoration:underline;
}

.inner-content ul,
.inner-content ol {
  font-size:var(--text-lg);
  font-weight:var(--weight-light);
  line-height:var(--leading-relaxed);
  color:var(--white-60);
  margin:0 0 var(--space-8);
  padding-left:var(--space-8);
}

.inner-content li {
  margin-bottom:var(--space-3);
}

.inner-content li strong { color:var(--white); font-weight:var(--weight-medium); }

@media(max-width:767px) {
  .inner-content {
    padding:0 var(--space-6) var(--space-16);
  }
  .inner-content h2 { font-size:var(--text-xl); }
  .inner-content p,
  .inner-content ul,
  .inner-content ol { font-size:var(--text-base); }
}

/* ============================================================
   BLOG LISTING — cards
   ============================================================ */
.blog-listing {
  max-width:720px;
  margin-inline:auto;
  padding:0 var(--space-8) var(--space-24);
}

.blog-card {
  display:block;
  padding:var(--space-8);
  border:1px solid var(--white-10);
  border-radius:8px;
  background:var(--black-soft);
  margin-bottom:var(--space-6);
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.blog-card:hover,
.blog-card:focus-visible {
  border-color:var(--cosmic-glow);
  box-shadow:0 0 24px var(--cosmic-faint), inset 0 0 16px var(--cosmic-faintest);
}

.blog-card__title {
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  color:var(--white);
  margin:0 0 var(--space-2);
  line-height:var(--leading-snug);
}

.blog-card__date {
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--white-40);
  margin-bottom:var(--space-4);
}

.blog-card__excerpt {
  font-size:var(--text-base);
  font-weight:var(--weight-light);
  line-height:var(--leading-relaxed);
  color:var(--white-60);
  margin:0 0 var(--space-4);
}

.blog-card__read-more {
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--cosmic-bright);
  letter-spacing:var(--tracking-wide);
}

@media(max-width:767px) {
  .blog-listing { padding:0 var(--space-6) var(--space-16); }
  .blog-card { padding:var(--space-6); }
}

/* ============================================================
   SERVICES LISTING — cards
   ============================================================ */
.services-listing {
  max-width:720px;
  margin-inline:auto;
  padding:0 var(--space-8) var(--space-24);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
}

.service-card {
  display:block;
  padding:var(--space-8);
  border:1px solid var(--white-10);
  border-radius:8px;
  background:var(--black-soft);
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.service-card:hover,
.service-card:focus-visible {
  border-color:var(--cosmic-glow);
  box-shadow:0 0 24px var(--cosmic-faint), inset 0 0 16px var(--cosmic-faintest);
}

.service-card__title {
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  color:var(--white);
  margin:0 0 var(--space-2);
  line-height:var(--leading-snug);
}

.service-card__descriptor {
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--white-40);
}

@media(max-width:767px) {
  .services-listing {
    grid-template-columns:1fr;
    padding:0 var(--space-6) var(--space-16);
  }
  .service-card { padding:var(--space-6); }
}

/* ============================================================
   TERMINAL CONTACT FORM (inner pages)
   ============================================================ */
.inner-terminal {
  max-width:720px;
  margin-inline:auto;
  padding:0 var(--space-8) var(--space-24);
}

.terminal-wrap { width:100%; }

.terminal-label {
  display:block;
  font-size:var(--text-xs); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-widest); text-transform:uppercase;
  color:var(--white); margin-bottom:var(--space-6);
}

/* Terminal panel */
.terminal {
  position:relative;
  padding:var(--space-8);
  border:1px solid var(--white-20);
  border-radius:6px;
  background:var(--black-soft);
  font-family:var(--font-mono); font-size:var(--text-lg);
  min-height:140px;
  animation:terminalIdlePulse 4s ease-in-out infinite;
  transition:border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              animation-play-state 0s;
}
@keyframes terminalIdlePulse {
  0%,100% { border-color:var(--white-20); box-shadow:none; }
  50%     { border-color:rgba(25,81,168,0.25); box-shadow:0 0 20px var(--cosmic-faint), inset 0 0 20px var(--cosmic-faintest); }
}
.terminal:focus-within {
  animation:none;
  border-color:var(--cosmic-glow);
  box-shadow:0 0 0 1px var(--cosmic-faint), 0 0 30px var(--cosmic-faint);
}

/* Terminal lines */
.terminal-line {
  display:flex; align-items:flex-start;
  gap:var(--space-3); line-height:var(--leading-normal);
  margin-bottom:var(--space-4);
  animation:lineAppear 200ms var(--ease-out) both;
}
.terminal-line:last-child { margin-bottom:0; }

@keyframes lineAppear {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}

.terminal-prompt {
  color:var(--white-60); flex-shrink:0; user-select:none;
}
.terminal-value { color:var(--white); flex:1; word-break:break-word; }
.terminal-value.is-done { color:var(--white-60); }

/* Live input */
.terminal-input-line { display:flex; align-items:center; gap:var(--space-3); }
.terminal-input-prompt {
  color:var(--white-60); flex-shrink:0;
  font-family:var(--font-mono); font-size:var(--text-lg); user-select:none;
}
.terminal-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--white); font-family:var(--font-mono); font-size:var(--text-lg);
  caret-color:var(--cosmic-bright); line-height:var(--leading-normal);
}
.terminal-input::placeholder { color:var(--white-20); }

/* System / success / error */
.terminal-system { color:var(--white-40); font-style:italic; }
.terminal-success {
  background:var(--cosmic-shine); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}
.terminal-error { color:var(--danger); }

/* Cosmic sweep on submit */
.terminal-sweep {
  position:absolute; top:0; left:0;
  width:0; height:100%;
  background:linear-gradient(90deg, transparent, var(--cosmic-glow) 50%, transparent);
  pointer-events:none; opacity:0;
}
.terminal-sweep.is-sweeping { animation:sweep 600ms var(--ease-out) forwards; }
@keyframes sweep {
  0%   { opacity:1; width:0; left:0; }
  50%  { opacity:1; width:40%; }
  100% { opacity:0; width:20%; left:100%; }
}

/* Direct email fallback */
.contact-email-link {
  display:inline-block; margin-top:var(--space-6);
  font-family:var(--font-mono); font-size:var(--text-sm);
  color:var(--white); letter-spacing:var(--tracking-wide);
  transition:color var(--dur-fast);
}
.contact-email-link:hover,
.contact-email-link:focus-visible {
  color:transparent;
  background:var(--cosmic-shine); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}

/* Hidden real form */
.contact-form-hidden {
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

@media(max-width:767px) {
  .inner-terminal { padding:0 var(--space-6) var(--space-16); }
  .terminal { font-size:var(--text-base); padding:var(--space-6); }
  .terminal-input,
  .terminal-input-prompt { font-size:var(--text-base); }
}

/* ============================================================
   RELATED POSTS / SERVICES
   ============================================================ */
.related-posts {
  max-width:720px;
  margin-inline:auto;
  padding:0 var(--space-8) var(--space-16);
  border-top:1px solid var(--white-10);
  padding-top:var(--space-12);
}

.related-posts h2 {
  font-size:var(--text-lg);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--white-40);
  margin:0 0 var(--space-6);
}

.related-posts ul {
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column;
  gap:var(--space-3);
}

.related-posts a {
  font-size:var(--text-base);
  color:var(--cosmic-bright);
  text-decoration:none;
  transition:text-decoration var(--dur-fast);
}
.related-posts a:hover,
.related-posts a:focus-visible { text-decoration:underline; }

@media(max-width:767px) {
  .related-posts { padding-left:var(--space-6); padding-right:var(--space-6); }
}

/* ============================================================
   RELATED SERVICE LINK (blog pages)
   ============================================================ */
.related-service-link {
  max-width:720px;
  margin-inline:auto;
  padding:0 var(--space-8) var(--space-8);
}

.related-service-link a {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);
  color:var(--cosmic-bright);
  text-decoration:none;
  border:1px solid var(--cosmic-glow);
  padding:var(--space-3) var(--space-6);
  border-radius:4px;
  transition:background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.related-service-link a:hover,
.related-service-link a:focus-visible {
  background:var(--cosmic-faintest);
  border-color:var(--cosmic-bright);
}

@media(max-width:767px) {
  .related-service-link { padding-left:var(--space-6); padding-right:var(--space-6); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  text-align:center;
  padding:var(--space-16) var(--space-8) var(--space-8);
}
.footer-divider {
  width:60px; height:1px;
  background:var(--white-10);
  margin:0 auto var(--space-12);
}
.footer-email {
  display:inline-block;
  font-family:var(--font-mono); font-size:var(--text-base);
  color:var(--white-60); letter-spacing:var(--tracking-wide);
  margin-bottom:var(--space-6);
  transition:color var(--dur-fast);
}
.footer-email:hover,
.footer-email:focus-visible {
  color:transparent;
  background:var(--cosmic-shine); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}
.footer-legal {
  display:flex; align-items:center; justify-content:center;
  gap:var(--space-3); margin-bottom:var(--space-4);
  flex-wrap:wrap;
}
.footer-legal a {
  font-size:var(--text-xs); color:var(--white-40);
  letter-spacing:var(--tracking-wide);
  transition:color var(--dur-fast);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color:var(--white-60); }
.footer-legal-sep { font-size:var(--text-xs); color:var(--white-20); user-select:none; }
.footer-copy { font-size:var(--text-xs); color:var(--white-20); }

/* ============================================================
   COSMIC TEXT — shimmer treatment
   ============================================================ */
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal] {
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-smooth),
              transform var(--dur-slow) var(--ease-smooth);
}
[data-reveal].is-revealed { opacity:1; transform:translateY(0); }
[data-reveal][data-delay="200"] { transition-delay:200ms; }
[data-reveal][data-delay="400"] { transition-delay:400ms; }

/* ============================================================
   REDUCED MOTION — all at once
   ============================================================ */
@media(prefers-reduced-motion:reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .terminal { animation:none; }
  .terminal-line { animation:none; }
  .terminal-sweep.is-sweeping { animation:none; }
  .terminal-success { animation:none; }
  .contact-email-link:hover,
  .footer-email:hover { animation:none; }
}