/* ALECTIUS — enhancement layer (loaded last, additive only) */
/* Safe polish on top of Nicepage: smoother rendering, transitions,
   focus states, and hover feedback. No layout dimensions changed. */

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { image-rendering: auto; }

/* Smooth, tasteful transitions on interactive elements */
a,
.u-btn,
.u-button-link,
.u-image,
.u-social-url {
  transition: color .25s ease, background-color .25s ease,
              transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

/* Buttons: subtle lift + shadow on hover */
.u-btn:hover,
.u-button-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.u-btn:active,
.u-button-link:active { transform: translateY(0); }

/* Portfolio / content images: gentle zoom + lift on hover */
.u-image:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

/* Links get a soft opacity feedback */
a:hover { opacity: .88; }

/* Accessible keyboard focus (was missing) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.u-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Contact form inputs: cleaner, modern feel */
.u-input {
  transition: border-color .25s ease, box-shadow .25s ease;
}
.u-input:focus {
  border-color: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
  outline: none;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, .u-btn, .u-button-link, .u-image {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   SERVICES / "FUNCTIONS" CARDS — remove photos, clean modern look
   Applies to service cards in sections 3, 4 and 5, all breakpoints.
   Photos are replaced with refined dark gradients so the text
   stays readable and the section looks intentional, not busy.
   ============================================================ */
.u-section-3 .u-image,
.u-section-4 .u-image,
.u-section-5 .u-image {
  position: relative;
  background-image: none !important;
  background-color: #141414 !important;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Card 1 — Photo (indigo) */
.u-section-3 .u-image-1,
.u-section-4 .u-image-1,
.u-section-5 .u-image-1 {
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(99,102,241,.35), transparent 55%),
    linear-gradient(160deg, #1a1a2e 0%, #101014 100%) !important;
}
/* Card 2 — Content (teal) */
.u-section-3 .u-image-2,
.u-section-4 .u-image-2,
.u-section-5 .u-image-2 {
  background-image:
    radial-gradient(120% 120% at 100% 0%, rgba(20,184,166,.32), transparent 55%),
    linear-gradient(160deg, #10201e 0%, #101014 100%) !important;
}
/* Card 3 — Design (violet) */
.u-section-3 .u-image-3,
.u-section-4 .u-image-3,
.u-section-5 .u-image-3 {
  background-image:
    radial-gradient(120% 120% at 0% 100%, rgba(168,85,247,.32), transparent 55%),
    linear-gradient(160deg, #1e1526 0%, #101014 100%) !important;
}
/* Card 4 — Marketing (amber) */
.u-section-3 .u-image-4,
.u-section-4 .u-image-4,
.u-section-5 .u-image-4 {
  background-image:
    radial-gradient(120% 120% at 100% 100%, rgba(245,158,11,.30), transparent 55%),
    linear-gradient(160deg, #241b10 0%, #101014 100%) !important;
}

/* thin accent bar at the top of each card */
.u-section-3 .u-image::after,
.u-section-4 .u-image::after,
.u-section-5 .u-image::after {
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  opacity:.5;
}

/* stronger, cleaner hover for the service cards */
.u-section-3 .u-image:hover,
.u-section-4 .u-image:hover,
.u-section-5 .u-image:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.38);
}

/* ============================================================
   SCROLL REVEAL — smooth fade + rise as blocks enter the viewport.
   Layout is unchanged: elements settle in their normal position.
   Toggled by scroll-reveal.js (adds .is-inview). Falls back to
   fully visible if JS is disabled.
   ============================================================ */
/* Hidden state applies ONLY when JS is on (html.js), so the cards
   are never stuck invisible if JavaScript fails to run. */
.js .reveal-init {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal-init.is-inview {
  opacity: 1;
  transform: none;
}
/* stagger cards within a row */
.js .reveal-init.d1 { transition-delay: .06s; }
.js .reveal-init.d2 { transition-delay: .14s; }
.js .reveal-init.d3 { transition-delay: .22s; }
.js .reveal-init.d4 { transition-delay: .30s; }

/* pure fade-in variant (no upward slide) — used for the photo gallery */
.js .reveal-init.reveal-fade { transform: none; }

/* kill the blue tap-highlight flash on links/buttons across the whole site */
a, button, .u-btn, .u-button-link, input, textarea {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1 !important; transform: none !important; }
}