/* 94-skins.css — extracted from main.css */

/* ============ DISTINCT BLUE SKINS (no hero changes) ============ */
/* Helpers */
.section{ position: relative; }
.bg-skin{ isolation:isolate; }
.bg-skin > .container{ position:relative; z-index:2; }

/* 1) SLOPE-TOP — angled top cut, clean & modern */
.bg-slope-top{ overflow:hidden; background:linear-gradient(180deg,#f7fbff,#ffffff); }
.bg-slope-top::before{
  content:""; position:absolute; inset:-80px 0 auto; height:180px; z-index:1; pointer-events:none;
  background:linear-gradient(135deg, rgba(18,115,222,.10), rgba(32,164,255,.10));
  clip-path:polygon(0 100%, 100% 0, 100% 30%, 0 100%); /* angled slice */
}

/* 2) MESH-LEFT — soft left-to-right blue with faint blueprint mesh */
.bg-mesh-left{
  background:
    radial-gradient(1200px 600px at 0% 30%, rgba(18,115,222,.10), transparent 60%),
    linear-gradient(90deg, #f1f7ff 0%, #ffffff 55%);
}
.bg-mesh-left::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(transparent 0 98%, rgba(12,36,97,.08) 99%) 0 0/26px 26px,
    linear-gradient(90deg, transparent 0 98%, rgba(12,36,97,.08) 99%) 0 0/26px 26px;
  opacity:.06;
}

/* 3) DOTS — micro grain/dots for product sections */
.bg-dots{
  background:
    radial-gradient(circle at 2px 2px, rgba(30,115,190,.12) 1.1px, transparent 1.2px) 0 0/18px 18px,
    linear-gradient(180deg,#fbfdff,#f5f9ff);
}

/* 4) SPOT-RIGHT — off-center blue spotlight from the right */
.bg-spot-right{
  background:linear-gradient(180deg, #f6faff, #ffffff);
}
.bg-spot-right::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(60% 60% at 85% 35%, rgba(47,139,247,.20), transparent 65%);
  filter:blur(8px);
}

/* 5) BAND-CENTER — horizontal soft band behind the container */
.bg-band-center{ background:linear-gradient(180deg,#f7fbff,#ffffff); }
.bg-band-center::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:420px; transform:translateY(-50%);
  background:radial-gradient(60% 140% at 50% 50%, rgba(30,115,190,.10), rgba(255,255,255,0) 70%);
  filter:blur(8px); opacity:.8; pointer-events:none; z-index:1;
}

/* 6) SLOPE-BOTTOM — angled bottom exit; good before next block */
.bg-slope-bottom{ overflow:hidden; background:linear-gradient(180deg,#f4f8ff,#ffffff); }
.bg-slope-bottom::after{
  content:""; position:absolute; inset:auto 0 -80px; height:180px; z-index:1; pointer-events:none;
  background:linear-gradient(135deg, rgba(18,115,222,.10), rgba(32,164,255,.10));
  clip-path:polygon(0 0, 100% 0, 100% 0, 0 70%); /* angled fade at bottom */
}

/* Optional rhythm helpers */
.pad-tight{ padding:48px 0; }
.pad-roomy{ padding:88px 0; }

/* Make sure default whites don't override skins */
.section.about,.section.services,.work,.contact,.services,.promos{ background:transparent !important; }

/* ===========================================================
   LIVELIER BLUE BACKGROUNDS (no HTML changes)
   - Subtle animated layers (60–90s loops)
   - Uses your palette; hero remains untouched
   - Respects prefers-reduced-motion
   =========================================================== */

/* ---- animation tokens ---- */
:root{
  --ws-float-a: 82s;
  --ws-float-b: 68s;
  --ws-pan: 90s;
}

/* shared keyframes (very gentle) */
@keyframes ws-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(0,-10px,0) scale(1.01); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes ws-pan {
  0%   { background-position: 0% 0%, 0% 0%; }
  50%  { background-position: 100% 50%, 50% 100%; }
  100% { background-position: 0% 0%, 0% 0%; }
}
@keyframes ws-slow-rotate {
  0%   { transform: rotate(0deg) }
  50%  { transform: rotate(180deg) }
  100% { transform: rotate(360deg) }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .bg-skin::before,
  .bg-skin::after{ animation: none !important; }
}

/* ===========================================================
   1) ABOUT  .bg-slope-top  — add drifting orbs + dotted mist
   =========================================================== */
.bg-slope-top{
  overflow:hidden;
  background:
    radial-gradient(1100px 540px at 10% -10%, rgba(18,115,222,.10), transparent 60%),
    linear-gradient(180deg,#f7fbff,#ffffff);
}
.bg-slope-top::before{
  content:"";
  position:absolute; inset:-90px 0 auto; height:190px; z-index:1; pointer-events:none;
  background:
    linear-gradient(135deg, rgba(18,115,222,.10), rgba(32,164,255,.10));
  clip-path:polygon(0 100%, 100% 0, 100% 32%, 0 100%);
  transform-origin: left top;
  animation: ws-drift var(--ws-float-a) ease-in-out infinite;
}
/* extra “action”: faint dots + two soft orbs */
.bg-slope-top::after{
  content:"";
  position:absolute; inset:-6% -4% -4%; z-index:0; pointer-events:none;
  background:
    /* dotted mist */
    radial-gradient(circle at 2px 2px, rgba(30,115,190,.12) 1.1px, transparent 1.2px) 0 0/18px 18px,
    /* orbs */
    radial-gradient(28% 28% at 15% 78%, rgba(47,139,247,.20), transparent 60%),
    radial-gradient(26% 26% at 85% 30%, rgba(168,209,255,.33), transparent 60%);
  opacity:.7;
  animation: ws-pan var(--ws-pan) linear infinite;
}

/* ===========================================================
   2) SERVICES  .bg-mesh-left  — animated blueprint mesh + orbs
   =========================================================== */
.bg-mesh-left{
  background:
    radial-gradient(1200px 600px at 0% 30%, rgba(18,115,222,.12), transparent 60%),
    linear-gradient(90deg, #f1f7ff 0%, #ffffff 55%);
}
.bg-mesh-left::before{
  content:"";
  position:absolute; inset:-2% -2%; pointer-events:none; z-index:0;
  background:
    /* diagonal mesh */
    repeating-linear-gradient( 30deg, rgba(12,36,97,.06) 0 1px, transparent 1px 22px ),
    repeating-linear-gradient(-30deg, rgba(12,36,97,.06) 0 1px, transparent 1px 22px ),
    /* faint grid */
    linear-gradient(transparent 0 98%, rgba(12,36,97,.08) 99%) 0 0/26px 26px,
    linear-gradient(90deg, transparent 0 98%, rgba(12,36,97,.08) 99%) 0 0/26px 26px;
  opacity:.10;
  animation: ws-pan 80s linear infinite;
}
.bg-mesh-left::after{
  content:"";
  position:absolute; inset:-4% -2%; z-index:0; pointer-events:none;
  background:
    radial-gradient(28% 28% at 8% 24%, rgba(47,139,247,.22), transparent 60%),
    radial-gradient(24% 24% at 72% 70%, rgba(168,209,255,.28), transparent 60%);
  filter: blur(6px);
  animation: ws-drift var(--ws-float-b) ease-in-out infinite;
}

/* ===========================================================
   3) PROMOS  .bg-dots + .bg-band-center — add moving band + halos
   =========================================================== */
.bg-dots{
  background:
    radial-gradient(circle at 2px 2px, rgba(30,115,190,.12) 1.1px, transparent 1.2px) 0 0/18px 18px,
    linear-gradient(180deg,#fbfdff,#f5f9ff);
}
.bg-band-center::before{
  content:"";
  position:absolute; left:0; right:0; top:50%; height:460px;
  transform:translateY(-50%);
  background:
    radial-gradient(60% 120% at 50% 50%, rgba(30,115,190,.14), rgba(255,255,255,0) 70%),
    radial-gradient(20% 40% at 20% 40%, rgba(168,209,255,.35), transparent 60%),
    radial-gradient(18% 36% at 80% 60%, rgba(47,139,247,.28), transparent 60%);
  filter: blur(8px);
  opacity:.9;
  animation: ws-pan 75s linear infinite;
}

/* ===========================================================
   4) WORK  .bg-spot-right + .bg-slope-bottom — extra motion & shapes
   =========================================================== */
.bg-spot-right{
  background:linear-gradient(180deg, #f6faff, #ffffff);
}
.bg-spot-right::before{
  content:"";
  position:absolute; inset:-4% -2%; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 60% at 86% 32%, rgba(47,139,247,.22), transparent 65%),
    radial-gradient(24% 24% at 70% 80%, rgba(168,209,255,.30), transparent 60%);
  filter: blur(8px);
  animation: ws-drift var(--ws-float-a) ease-in-out infinite;
}
.bg-slope-bottom{ overflow:hidden; }
.bg-slope-bottom::after{
  content:"";
  position:absolute; inset:auto -2% -80px; height:190px; z-index:1; pointer-events:none;
  background:linear-gradient(135deg, rgba(18,115,222,.10), rgba(32,164,255,.10));
  clip-path:polygon(0 0, 100% 0, 100% 0, 0 70%);
  transform-origin:right bottom;
  animation: ws-drift var(--ws-float-b) ease-in-out infinite;
}

/* ===========================================================
   5) CONTACT  .bg-band-center — calmer but with animated micro-grid
   =========================================================== */
.section.contact.bg-band-center{
  background: linear-gradient(180deg,#f7fbff,#ffffff);
}
.section.contact.bg-band-center::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(transparent 0 98%, rgba(12,36,97,.06) 99%) 0 0/22px 22px,
    linear-gradient(90deg, transparent 0 98%, rgba(12,36,97,.06) 99%) 0 0/22px 22px;
  opacity:.06;
  animation: ws-pan 88s linear infinite;
}

/* WORK – make the diagonal blue element clearly visible */
.section.work.bg-spot-right::before,
.section.work.bg-spot-right::after{ content:none !important; }

/* Visible diagonal sweep (top-right ➜ bottom-left) */
.section.work.bg-spot-right::before{
  content:"";
  position:absolute;
  inset:-8% -6% -10% -6%;
  z-index:0;               /* container is z-index:2, so this sits behind content */
  pointer-events:none;

  /* stronger sweep + two halos so it’s obvious but still soft */
  background:
    /* main diagonal band */
    linear-gradient(135deg,
      rgba(47,139,247,.36) 0%,
      rgba(47,139,247,.22) 22%,
      rgba(47,139,247,.12) 42%,
      rgba(47,139,247,0)   62%),
    /* subtle supporting glows */
    radial-gradient(50% 70% at 92% 12%, rgba(168,209,255,.32), transparent 60%),
    radial-gradient(45% 65% at 12% 92%, rgba(47,139,247,.22), transparent 60%);
  background-repeat:no-repeat;
  background-size:160% 160%;      /* makes the band broad */
  background-position:95% 5%;     /* start near top-right */
  filter: blur(8px);              /* softer, but not disappearing */
  opacity: .95;                   /* keep it visible */
  animation: ws-drift var(--ws-float-a) ease-in-out infinite;
}

/* Bottom accent: soft curved fade (no straight line) */
.section.work.bg-slope-bottom::after{
  content:"";
  position:absolute; inset:auto -6% -80px -6%;
  height:220px; z-index:1; pointer-events:none;
  background:
    radial-gradient(140% 160% at 100% 0%,
      rgba(18,115,222,.18) 0%,
      rgba(32,164,255,.12) 32%,
      transparent 68%);
  filter: blur(10px);
  animation: ws-drift var(--ws-float-b) ease-in-out infinite;
}