/* Harmony Tech Labs — main.css */

/* ─── Grain texture overlay ───────────────────────────────────────────────── */
#grain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
}

/* ─── Page loader ─────────────────────────────────────────────────────────── */
#page-loader { cursor: none; }

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.loader-hex {
  animation: loader-hex-spin 1.4s ease-in-out infinite alternate;
}
@keyframes loader-hex-spin {
  from { transform: scale(0.9) rotate(-8deg); opacity: 0.7; }
  to   { transform: scale(1.1) rotate(8deg);  opacity: 1;   }
}

.loader-bar-wrap {
  width: 120px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #D4AF37, #00D4FF);
  border-radius: 2px;
  animation: loader-slide 1s ease-in-out infinite alternate;
}
@keyframes loader-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%);  }
}

/* ─── Custom cursor — only on public pages that load the cursor elements ──── */
@media (pointer: fine) {
  body.custom-cursor,
  body.custom-cursor * { cursor: none !important; }
}

#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: #D4AF37;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  margin: -3px 0 0 -3px;
  transition: background 0.2s, width 0.2s, height 0.2s;
  will-change: transform;
}

#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(212,175,55,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  margin: -17px 0 0 -17px;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.2s, background 0.2s, margin 0.3s;
  will-change: transform;
}

.cursor-ring--hover { width: 48px !important; height: 48px !important; margin: -24px 0 0 -24px !important; border-color: rgba(212,175,55,0.8) !important; }
.cursor-dot--hover  { width: 4px !important; height: 4px !important; margin: -2px 0 0 -2px !important; }
.cursor-ring--click { transform: scale(0.85) !important; }
.cursor-ring--view  {
  width: 80px !important; height: 80px !important;
  margin: -40px 0 0 -40px !important;
  background: rgba(212,175,55,0.08) !important;
  border-color: rgba(212,175,55,0.6) !important;
}
.cursor-ring--view::after {
  content: 'View';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #D4AF37;
}

/* ─── Hero gradient text ──────────────────────────────────────────────────── */
.hero-gradient-text {
  background: linear-gradient(135deg, #D4AF37 0%, #f0d060 40%, #00D4FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Scroll reveal animations ────────────────────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Marquee strips ──────────────────────────────────────────────────────── */
.marquee-track {
  animation: marquee-run 30s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partners-marquee {
  width: max-content;
  animation: marquee-run 40s linear infinite;
}
.partners-marquee:hover { animation-play-state: paused; }

/* ─── Work cards ──────────────────────────────────────────────────────────── */
.work-card-img { will-change: transform; }

/* ─── Service card mouse-glow ─────────────────────────────────────────────── */
.service-card { position: relative; overflow: hidden; }
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.04) 0%, transparent 70%);
}
.service-card--active::after { opacity: 1; }

/* ─── Scroll-line animation fix ───────────────────────────────────────────── */
.scroll-line { display: block; }

/* ─── Focus outlines ──────────────────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Link & button transitions ──────────────────────────────────────────── */
a, button {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 200ms;
}

/* ─── Flash slide-in ──────────────────────────────────────────────────────── */
#flash-container > div {
  animation: flash-in 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
@keyframes flash-in {
  from { opacity:0; transform: translateX(1.5rem); }
  to   { opacity:1; transform: translateX(0); }
}

/* ─── Scrollbar hide utility ──────────────────────────────────────────────── */
.scrollbar-hide::-webkit-scrollbar { display:none; }
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }

/* ─── Smooth html scroll ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ─── Mobile cursor off ───────────────────────────────────────────────────── */
@media (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none !important; }
  body.custom-cursor, body.custom-cursor * { cursor: auto !important; }
}

/* ─── Service panel transitions ──────────────────────────────────────────── */
.service-panel {
  transition: opacity 0.35s ease;
}
.service-tab {
  border-left: 3px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* ─── Mobile: service accordion ──────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Initial state: first panel visible, rest hidden via display:none */
  .service-panel {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 420px;
    flex-direction: column;
  }
  .service-panel + .service-panel { display: none; }

  /* Tighten service tabs on mobile */
  .service-tab { padding-top: 12px; padding-bottom: 12px; }
  .service-tab p { font-size: 0.8125rem; }
}

/* ─── Mobile: general layout polish ──────────────────────────────────────── */
@media (max-width: 639px) {
  /* Reduce oversized section vertical padding on small phones */
  section.py-28 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  section.py-32 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

  /* Hero: tighter padding so content isn't pushed too far down */
  .hero-content-pad { padding-top: 7rem; padding-bottom: 5rem; }

  /* Work cards: slightly shorter on small phones */
  .work-card { height: 18rem !important; }

  /* Founder floating card: ensure it doesn't overflow narrow screens */
  .founder-float-card { left: 1rem !important; right: 1rem !important; }

  /* CTA banner buttons: full width on tiny screens */
  .cta-btn-row { flex-direction: column !important; }
  .cta-btn-row > a { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   HIGH-END REFINEMENTS — premium technical boutique layer
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Technical mono labels ───────────────────────────────────────────────── */
.font-mono-tech {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: 'liga' 0;
}
/* Eyebrow labels rendered with a leading slash, engineer-doc style */
.tech-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.2em;
}
.tech-eyebrow::before {
  content: '// ';
  opacity: 0.5;
}

/* ─── Dot-grid background (command-center feel) ───────────────────────────── */
.dot-grid {
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 38px 38px;
  background-position: -1px -1px;
}

/* ─── Premium card: 1px border with gold glow on hover (Bento UI 2.0) ─────── */
.premium-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.premium-card:hover {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -28px rgba(212, 175, 55, 0.25);
}
/* Corner glow point — the 1% detail that signals craft */
.premium-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 2.5rem;
  width: 4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.premium-card:hover::after { opacity: 1; }

/* ─── Hero code-editor card ───────────────────────────────────────────────── */
.code-card {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.code-card .code-line {
  opacity: 0;
  transform: translateX(-6px);
  animation: code-line-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes code-line-in {
  to { opacity: 1; transform: translateX(0); }
}
/* Blinking terminal caret */
.code-caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  background: #D4AF37;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink {
  50% { opacity: 0; }
}

/* ─── Live status ping dot ────────────────────────────────────────────────── */
.ping-ring {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
}
.ping-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #D4AF37;
  opacity: 0.75;
  animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ping-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #D4AF37;
}
@keyframes ping {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* ─── Border Beam — a light that travels the card edge (SaaS-grade) ───────── */
/* Registering the angle as a custom property lets us animate a conic gradient
   smoothly without rotating (and distorting) the element itself. */
@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.beam-border { position: relative; }
.beam-border::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  padding: 1.25px;                 /* ring thickness */
  background: conic-gradient(
    from var(--beam-angle, 0deg) at 50% 50%,
    transparent 0deg,
    transparent 55deg,
    rgba(212, 175, 55, 0.9) 90deg,
    rgba(0, 212, 255, 0.9) 115deg,
    transparent 150deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: beam-spin 4.5s linear infinite;
  pointer-events: none;
}
.beam-border:hover::before { opacity: 1; }
/* Showpiece variant — beam stays faintly lit at rest, brightens on hover */
.beam-border--live::before { opacity: 0.55; }
.beam-border--live:hover::before { opacity: 1; }

@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}

/* Glowing live-status dot (editor status bar) */
.status-dot {
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.9);
}

/* ─── Reduced motion: respect user preference ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .code-card { transition: none !important; transform: none !important; }
  .code-card .code-line { animation: none; opacity: 1; transform: none; }
  .code-caret, .ping-ring::before { animation: none; }
  .beam-border::before { animation: none; }
}