body {
	background-image: url("../assets/images/blue-flowers1.jpg");
	background-size: 300%;
}
/* page.css */
/* defaults */
:root { --bgfx: none; }

/* tint layer that only affects the page background */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* filters the BODY backdrop (your existing bg image) */
  backdrop-filter: var(--bgfx);
  transition: backdrop-filter 3s cubic-bezier(.22,.61,.36,1);
  /* optional: make the effect slightly stronger on bright screens */
  @media (prefers-color-scheme: light) {
    /* nothing required unless you want different values */
  }
}

/* section → vibe (no image changes, just filters) */

/* 1) examcademy — orangish */
body[data-section="examcademy"]{
  --bgfx: hue-rotate(-130deg) saturate(1.18) brightness(.97) contrast(1.06);
}

/* 2) theiasolutions — green-bluish */
body[data-section="theiasolutions"]{
  --bgfx: hue-rotate(-10deg) saturate(1.20) brightness(.99) contrast(1.06);
}

/* 3) ekarental — greenish */
body[data-section="ekarental"]{
  --bgfx: hue-rotate(-60deg) saturate(1.25) brightness(.97) contrast(1.07);
}

/* 4) rarablue — purplish */
body[data-section="rarablue"]{
  --bgfx: hue-rotate(105deg) saturate(1.25) brightness(1.00) contrast(1.05);
}

/* 5) mobitrek — bluish */
body[data-section="mobitrek"]{
  --bgfx: hue-rotate(50deg) saturate(1.18) brightness(.97) contrast(1.06);
}

/* 6) ssozuerich — light bluish */
body[data-section="ssozuerich"]{
  --bgfx: hue-rotate(15deg) saturate(1.08) brightness(1.06) contrast(.99);
}
h1 {
	font-family: gregi;
	font-size: 3em;
	margin-inline:auto;
}

.image-stack:hover {
	&:before,&:after {
		opacity: 0.8;;
	}
}
.image-stack {
	position: relative;
	display: inline-block;
	margin-inline: auto;
	& img {
		border-radius: var(--br);
		opacity:  0.9;
		box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.4),   /* big soft shadow */
		0 4px 10px rgba(0, 0, 0, 0.3),   /* mid-depth shadow */
		0 2px 5px rgba(255, 153, 0, 0.2);    /* tighter base shadow */
		position: relative;
		z-index: 2;
		&:hover {
			opacity: 0.1;
			z-index: 0;
		}
	}
	&:before,
	&:after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 80%;
		height: 80%;
		background-size: cover;
		background-position: center;
		border-radius: 8px;
		box-shadow: 0 8px 20px rgba(0,0,0,0.3);
		z-index: 1;
		opacity: 0.5;
		transition: opacity 300ms;
	}
	&:before {
		left: -15%;
		
		transform: translateY(-50%) rotate(-3deg);

	}

	&:after {
		right: -15%;
		
		transform: translateY(-50%) rotate(3deg);
		
	}
}
#examcademy .image-stack {
	&:before {
		background-image: url("../assets/images/ecad2.png");
	}
	&:after {
		background-image: url("../assets/images/ecad3.png");
	}
}
#theiasolutions .image-stack {
	&:before {
		background-image: url("../assets/images/theiasolutions2.png");
	}
	&::after {
		background-image: url("../assets/images/theiasolutions3.png");
	}
}
#ekarental .image-stack {
	&:before {
		background-image: url("../assets/images/tehnikalaenutus3.png");
	}
	&::after {
		background-image: url("../assets/images/tehnikalaenutus2.png");
	}
}
#rarablue .image-stack {
	&:before {
		background-image: url("../assets/images/rarablue2.png");
	}
	&::after {
		background-image: url("../assets/images/rarablue3.png");
	}
}
#mobitrek .image-stack {
	&:before {
		background-image: url("../assets/images/mobitrek3.png");
	}
	&::after {
		background-image: url("../assets/images/mobitrek2.png");
	}
}
#ssozuerich .image-stack {
	&:before {
		background-image: url("../assets/images/ssozuerich2.png");
	}
	&::after {
		background-image: url("../assets/images/ssozuerich3.png");
	}
}