/* ═══════════════════════════════════════════════════════════════
   GLASS.CSS — Apple Liquid Glass Material System
   
   PERFORMANCE ARCHITECTURE:
   • backdrop-filter ONLY on navbar (1 GPU layer)  
   • Cards: white base + iridescent tint + specular (no blur = fast)
   • Animations: transform only (compositor thread)
   • contain: paint on cards to limit repaint zones
   
   APPLE GLASS ANATOMY:
   1. Base: thin white semi-transparent layer
   2. Iridescent tint: subtle blue-violet color shift
   3. Specular highlight: bright top-left edge (catches light)
   4. Top rim: hairline bright line (most distinctive Apple detail)
   5. Shadow: soft drop, very light
═══════════════════════════════════════════════════════════════ */

/* ══ GLASS CARD — No backdrop-filter, full 60fps ══ */
/* 
  Uses the painted-glass technique:
  white base → iridescent overlay → specular pseudo-element
  The background gradient shows through because the white is very thin
*/
.glass {
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow: var(--glass-shadow-md);
  position: relative;
  contain: paint;
  /* Force GPU layer for transforms */
  transform: translateZ(0);
}

/* Layered iridescent + specular using ::before */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* Specular: top-left bright catch */
    var(--glass-specular),
    /* Iridescent tint underneath */
    var(--glass-iridescent);
  pointer-events: none;
  z-index: 0;
}

/* Top rim: the most Apple-specific detail */
.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.95) 30%,
    rgba(255,255,255,1.0) 50%,
    rgba(255,255,255,0.95) 70%,
    transparent 100%
  );
  border-radius: 1px;
  pointer-events: none;
  z-index: 10;
}

/* ── Smaller glass variant ── */
.glass-sm {
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.86);
  box-shadow: var(--glass-shadow-sm);
  position: relative;
  contain: paint;
  transform: translateZ(0);
}
.glass-sm::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-specular);
  pointer-events: none;
  z-index: 0;
}

/* ── Strong glass (uses blur — use sparingly!) ── */
.glass-strong {
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: var(--glass-shadow-lg);
  position: relative;
}
.glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-specular), var(--glass-iridescent);
  pointer-events: none;
  z-index: 0;
}
.glass-strong::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
  pointer-events: none;
  z-index: 10;
}

/* ── Tilt card (3D mouse tracking) ── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform var(--t-slow), box-shadow var(--t-slow);
  will-change: transform;
}
.tilt-card:hover { box-shadow: var(--glass-shadow-lg); }

/* ── Glow effects ── */
.svc-glow, .proj-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--t-slow);
  pointer-events: none;
  z-index: 0;
}
.svc-glow  { background: radial-gradient(circle at 30% 30%, hsla(230,80%,68%,0.14) 0%, transparent 60%); }
.proj-glow { background: radial-gradient(circle at 20% 20%, hsla(260,75%,68%,0.12) 0%, transparent 60%); }
.service-card:hover .svc-glow,
.project-card:hover .proj-glow { opacity: 1; }

/* ── Reveal scroll animation ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }


/* Proof links — clickable claim citations */
.proof-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px dashed hsla(230,75%,55%,0.55);
  transition: border-color 0.18s, color 0.18s;
  cursor: pointer;
}
.proof-link:hover {
  color: hsl(230,75%,55%);
  border-bottom-color: hsl(230,75%,55%);
}
.proof-link sup { color: hsl(230,75%,55%); }