/* BrandLift Studio – shared visual system: icons, decorative orbits */

/* Icon sprite usage: <svg class="icon"><use href="#i-seo"/></svg> */
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.card-icon {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px;
  border-radius: 15px; color: var(--gold-light); font-size: 30px;
  background: radial-gradient(circle at 30% 20%, rgba(201, 164, 92, 0.22), rgba(201, 164, 92, 0.04) 70%), var(--surface);
  border: 1px solid rgba(201, 164, 92, 0.28);
  box-shadow: 0 0 30px -8px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.card-icon .icon { transition: transform .4s var(--ease); }
.card:hover .card-icon .icon { transform: translateY(-2px) scale(1.08); }

/* Decorative orbit lines (About, page intros) */
.orbit-deco { position: absolute; z-index: -1; right: max(-120px, -8vw); top: 50%; width: min(560px, 90vw); aspect-ratio: 1; transform: translateY(-50%); opacity: .6; pointer-events: none; -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 70%); mask-image: radial-gradient(circle, #000 38%, transparent 70%); }
.orbit-deco svg { width: 100%; height: 100%; overflow: visible; }
.orbit-deco .o-line { fill: none; stroke: rgba(201, 164, 92, 0.35); stroke-width: 1; }
.orbit-deco .o-dash { stroke-dasharray: 2 7; stroke: rgba(201, 164, 92, 0.3); }
.orbit-deco .o-node { fill: var(--gold); }
.orbit-deco .o-node-glow { fill: rgba(201, 164, 92, 0.25); }
@media (max-width: 720px) { .orbit-deco { opacity: .3; right: -40%; } }

/* Internal pages, large desktop: the Home canvas lattice (same data URI as home.css #main::before and
   .site-footer::after), quieter than Home. Scoped by each page's unique h1 so Home, detail, legal and error
   pages are untouched. Anchored to the bottom so the tile phase runs on into the footer's pattern.
   Mask = horizontal fade (strongest in the side gutters, faint behind the content column)
   intersected with a vertical fade-in below the header. */
@media (min-width: 1200px) {
  #main:has(#services-h1, #packages-h1, #portfolio-h1, #about-h1, #contact-h1) { position: relative; isolation: isolate; }
  #main:has(#services-h1, #packages-h1, #portfolio-h1, #about-h1, #contact-h1)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='.7'%3E%3Cpath d='M48 6l9 21 21-9-9 21 21 9-21 9 9 21-21-9-9 21-9-21-21 9 9-21-21-9 21-9-9-21 21 9z'/%3E%3C/g%3E%3C/svg%3E") center bottom / 96px 96px;
    opacity: .07;
    -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .45) 22%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .45) 78%, #000), linear-gradient(180deg, transparent 0, #000 360px);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .45) 22%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .45) 78%, #000), linear-gradient(180deg, transparent 0, #000 360px);
    mask-composite: intersect; }
  /* No opaque graphite slabs: .section-alt keeps its hairline borders, but its background becomes a barely-there
     centre lift (transparent at both edges, ~1% at the middle) so the canvas and lattice run straight through. */
  #main:has(#services-h1, #packages-h1, #portfolio-h1, #about-h1, #contact-h1) .section-alt {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.012) 50%, transparent); }
  /* Seamless canvas: hide the section-level separators (borders stay 1px wide but transparent, so nothing moves) */
  #main:has(#services-h1, #packages-h1, #portfolio-h1, #about-h1, #contact-h1) .section-alt { border-block-color: transparent; }
  #main:has(#services-h1, #packages-h1, #portfolio-h1, #about-h1, #contact-h1) .section-alt::before { content: none; }

  /* Main -> footer hand-off: the footer keeps its own background, cards and lattice, but its first ~200px blend in.
     - top border recoloured to the page tone (still 1px, so nothing moves)
     - ::before (normally the 1px top hairline) becomes a page-tone overlay fading out over 200px; it sits under ::after
     - ::after (glow + lattice) keeps its radial mask, intersected with a 200px fade-in from the top */
  #main:has(#services-h1, #packages-h1, #portfolio-h1, #about-h1, #contact-h1) + .site-footer { border-top-color: #0b0b0c; }
  #main:has(#services-h1, #packages-h1, #portfolio-h1, #about-h1, #contact-h1) + .site-footer::before {
    top: 0; height: 200px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #0b0b0c, rgba(11, 11, 12, 0)); }
  #main:has(#services-h1, #packages-h1, #portfolio-h1, #about-h1, #contact-h1) + .site-footer::after {
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000, transparent 80%), linear-gradient(180deg, transparent 0, #000 200px);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000, transparent 80%), linear-gradient(180deg, transparent 0, #000 200px);
    mask-composite: intersect; }
}