/* Diaspora Career Connect: motion and the few effects Elementor cannot
   express, layered on top of native widgets.

   Everything else, every colour, size, space and font, lives in the
   Elementor settings on each element, so it is editable in the editor and
   nothing here is load-bearing for the layout. */

:root{
  --dcc-navy:#0A1A2E; --dcc-navy9:#050D18; --dcc-navy7:#123052;
  --dcc-blue:#1E63B8; --dcc-cyan:#38BDD8;
  --dcc-gold:#D9A441; --dcc-gold-l:#EFC66C;
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;overflow-x:clip}

/* ── the dark field ──────────────────────────────────────────────────
   Drifting gradient blobs and a film grain. The blobs are pseudo
   elements on the container, so no extra markup is needed and the
   section keeps the effect if it is moved or duplicated.            */
.field{position:relative;isolation:isolate;overflow:hidden}
.field>*{position:relative;z-index:1}

.field::before,
.field::after{
  content:'';position:absolute;z-index:0;border-radius:50%;
  filter:blur(80px);pointer-events:none;will-change:transform}

.field::before{
  width:70vw;height:70vw;left:-18vw;top:-24vw;
  background:radial-gradient(circle at 35% 35%,
    rgba(26,70,117,.95) 0%, rgba(18,48,82,.6) 45%, transparent 72%);
  animation:dcc-drift-a 18s ease-in-out infinite alternate}

.field::after{
  width:60vw;height:60vw;right:-14vw;top:-20vw;
  background:radial-gradient(circle at 60% 40%,
    rgba(217,164,65,.5) 0%, rgba(138,107,43,.26) 48%, transparent 74%);
  animation:dcc-drift-b 23s ease-in-out infinite alternate}

/* a second pair, lower, on the hero only */
.field.dcc-hero .e-con-inner::before,
.field.dcc-hero .e-con-inner::after{
  content:'';position:absolute;z-index:-1;border-radius:50%;
  filter:blur(80px);pointer-events:none}
.field.dcc-hero .e-con-inner::before{
  width:52vw;height:52vw;left:18vw;bottom:-26vw;
  background:radial-gradient(circle,rgba(30,99,184,.5) 0%,transparent 70%);
  animation:dcc-drift-c 20s ease-in-out infinite alternate}
.field.dcc-hero .e-con-inner::after{
  width:34vw;height:34vw;right:6vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(56,189,216,.22) 0%,transparent 70%);
  animation:dcc-drift-a 26s ease-in-out infinite alternate-reverse}

@keyframes dcc-drift-a{to{transform:translate3d(16vw,12vh,0) scale(1.22)}}
@keyframes dcc-drift-b{to{transform:translate3d(-15vw,15vh,0) scale(.82)}}
@keyframes dcc-drift-c{to{transform:translate3d(13vw,-14vh,0) scale(1.24)}}

/* film grain, so the gradients do not look like flat plastic */
.field>.e-con-inner::after,
.field.dcc-grain::after{pointer-events:none}
.field.dcc-grain{position:relative}
.field::marker{content:''}
.dcc-grain>.e-con-inner{position:relative}
.dcc-grain>.e-con-inner::after{
  content:'';position:absolute;inset:0;z-index:-1;opacity:.26;
  pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px}

/* ── header ──────────────────────────────────────────────────────── */
.dcc-header{position:sticky;top:0;z-index:99;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  transition:padding .3s ease,background-color .3s ease}
.dcc-header .elementor-nav-menu--main .elementor-item{white-space:nowrap}
.dcc-header .elementor-nav-menu--dropdown{border-radius:12px;overflow:hidden}
@media(max-width:1024px){
  .dcc-header .elementor-nav-menu--dropdown{max-height:calc(100dvh - 72px);overflow-y:auto}
}

/* ── buttons: lift, and the arrow leads ──────────────────────────── */
.elementor-button{transition:transform .2s cubic-bezier(.22,1,.36,1),
  background-color .2s ease,color .2s ease,box-shadow .35s ease}
.elementor-button:hover{transform:translateY(-2px)}
.elementor-button:active{transform:translateY(0)}
.elementor-button .elementor-button-icon{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.elementor-button:hover .elementor-button-icon{transform:translateX(4px)}

/* ── cards and tiles answer the cursor ───────────────────────────── */
.card,.tier,.sect,.feat__i,.spk__i,.mv__item,.desk{
  transition:transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s ease,border-color .3s ease}
.card:hover,.tier:hover,.sect:hover,.feat__i:hover,.spk__i:hover{
  transform:translateY(-5px)}
.card:hover,.spk__i:hover{box-shadow:0 26px 52px -26px rgba(10,26,46,.34)}

/* photo panels: a slow zoom under the scrim */
.mv__item,.card,.cta-photo{overflow:hidden}
.mv__item img,.card img,.stack img{
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.mv__item:hover img,.card:hover img{transform:scale(1.05)}

/* a hairline that draws across a support desk on hover */
.desk{position:relative}
.desk::after{content:'';position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--dcc-gold);transition:width .9s cubic-bezier(.22,1,.36,1)}
.desk:hover::after{width:100%}

/* ── the editorial image stack ───────────────────────────────────── */
.stack{position:relative}
.stack__b{box-shadow:0 26px 56px -26px rgba(5,13,24,.45)}
.stack__note{box-shadow:0 24px 54px -22px rgba(5,13,24,.6)}

/* ── long links must be able to break on a phone ─────────────────── */
.contacts a,.foot__meta a,.elementor-icon-list-text{overflow-wrap:anywhere}

/* ── respect a reduced-motion preference ─────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .field::before,.field::after,
  .field.dcc-hero .e-con-inner::before,
  .field.dcc-hero .e-con-inner::after{animation:none}
  .elementor-button:hover,.card:hover,.tier:hover,.sect:hover,
  .feat__i:hover,.spk__i:hover{transform:none}
  .mv__item:hover img,.card:hover img{transform:none}
  .elementor-invisible{visibility:visible!important;animation:none!important}
}