/* =====================================================
   PTTA -- tech-theme enhancement layer
   Loads AFTER components.css. Adds gradient/motion/pattern
   polish on top of the existing design system without
   touching page markup. New tokens (--font-display,
   --font-mono) live in tokens.css, the single :root block.
===================================================== */

/* ---------- subtle dot-grid backdrop ---------- */
body{ position:relative; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(11,61,145,.07) 1px, transparent 0);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.12) 65%, transparent);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.12) 65%, transparent);
}
main, .footer{ position:relative; z-index:1; }

/* ---------- display type ---------- */
h1,h2,h3,h4,.tile__title,.kicker{ font-family:var(--font-display); }
h1,h2,h3,h4{ letter-spacing:-.02em; }
.kicker{
  font-family:var(--font-mono);
  color:var(--brand-accent);
  letter-spacing:.08em;
}
.kicker::before{ content:"// "; color:var(--ring); }

main h2{ position:relative; padding-top:.65em; }
main h2::before{
  content:"";
  display:block;
  position:absolute;
  top:0; left:0;
  width:46px; height:4px;
  border-radius:4px;
  background:linear-gradient(90deg, var(--brand-accent), var(--ring));
}

.timeline .meta,
.exec__role,
.exec__loc{ font-family:var(--font-mono); letter-spacing:-.01em; }

/* ---------- selection / scrollbar ---------- */
::selection{ background:var(--brand-accent); color:#fff; }
html{ scrollbar-color:var(--brand-accent) var(--bg); }

/* ---------- divider band: gradient sheen ---------- */
.band{
  background:linear-gradient(90deg, var(--brand-accent), var(--ring), var(--brand-accent));
  background-size:200% 100%;
}
@media (prefers-reduced-motion: no-preference){
  .band{ animation:ptta-sheen 6s linear infinite; }
}
@keyframes ptta-sheen{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}

/* ---------- hero: blueprint grid + glow ---------- */
.hero::after{
  background:
    linear-gradient(180deg, rgba(8,46,110,.2) 0%, rgba(8,46,110,.88) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px);
}
.hero__inner{ position:relative; }
.hero__inner::before{
  content:"";
  position:absolute;
  top:-90px; right:-100px;
  width:340px; height:340px;
  background:radial-gradient(circle, rgba(30,108,244,.5), transparent 70%);
  filter:blur(6px);
  pointer-events:none;
}
.hero h1{ color:var(--on-brand); }
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero h1{
    background:linear-gradient(90deg, #FFFFFF, var(--on-brand-soft));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* ---------- nav: glass on scroll ---------- */
.ptta-nav--scrolled{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
}
.ptta-nav__link::after{
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--brand-accent), var(--ring));
}

/* ---------- buttons ---------- */
.btn--solid{
  background:linear-gradient(135deg, var(--brand-accent), var(--ring));
  box-shadow:0 6px 18px rgba(0,91,187,.28);
}
.btn--solid:hover{
  background:linear-gradient(135deg, var(--brand), var(--brand-accent));
  box-shadow:0 10px 26px rgba(0,91,187,.4);
  transform:translateY(-2px);
}
.btn--light:hover{
  box-shadow:0 10px 22px rgba(16,33,62,.18), 0 0 0 2px var(--ring) inset;
}

/* ---------- tiles / cards ---------- */
.tile{ position:relative; }
.tile::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, var(--brand-accent), var(--ring));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-nav);
}
.tile:hover::before,
.tile:focus-within::before{ transform:scaleX(1); }
.tile img{
  transition:transform var(--t-nav);
  filter:drop-shadow(0 4px 10px rgba(11,61,145,.18));
}
.tile:hover img{ transform:scale(1.08) translateY(-2px); }

/* ---------- footer accent ---------- */
.footer{
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg, var(--brand-accent), var(--ring)) 1;
}

/* ---------- scroll reveal (progressive enhancement, JS-gated) ---------- */
.reveal-init{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--t-slow), transform var(--t-slow);
}
.reveal-init.is-visible{ opacity:1; transform:none; }

/* ---------- motion / contrast / print safety ---------- */
@media (prefers-reduced-motion: reduce){
  .hero__inner::before{ display:none; }
  .reveal-init{ opacity:1; transform:none; transition:none; }
  .tile:hover img{ transform:none; }
  .band{ animation:none; }
}
@media (prefers-contrast: more){
  body::before{ display:none; }
}
@media print{
  body::before{ display:none; }
}