/*------------------------------------------------------------------------------------*/
/*------------------------------  YOUR CUSTOM CSS STYLE  -----------------------------*/

/* ============================================================
   Header / hero polish
   Loaded after style.min.css and the color scheme so it wins.
   ============================================================ */

/* Background photo fills any screen width without tiling or blur */
header[data-img] {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Soft scrim: gently darkens the left (where the title sits) and fades to
   nothing over the turtle, so the white lettering stays legible on any crop. */
header[data-img]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.12) 38%,
    rgba(0, 0, 0, 0) 62%
  );
  pointer-events: none;
  z-index: 1;
}
header[data-img] .container {
  position: relative;
  z-index: 2;
}

/* Lettering — keep the minimal white Dosis look, but make it legible
   over the photo with a soft shadow instead of changing the style. */
.header-title {
  /* watery white bloom (tight + wide glow) over the dark legibility shadow */
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.70),
    0 0 24px rgba(255, 255, 255, 0.45),
    0 2px 22px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.30);
}
.header-message {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.65),
    0 0 20px rgba(255, 255, 255, 0.42), 0 1px 14px rgba(0, 0, 0, 0.5);
}
/* "Contact" (and the "Home" link on the contact page) get the same watery halo */
header .breadcrumb a {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.60),
    0 0 18px rgba(255, 255, 255, 0.40), 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* Portrait — a very light finishing frame: thin keyline + soft shadow.
   Zero the theme's lopsided p-t-10/p-r-20 padding so the border hugs the
   photo evenly, and re-add that inset as margin to keep its position. */
.header-photo {
  padding: 0 !important;
  margin: 10px 20px 0 0;
  border: 0;
  border-radius: 4px;
  /* Option B — soft white halo: gentle luminous separation, no frame line */
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.32), 10px 12px 28px rgba(0, 0, 0, 0.55);
}

/* Softly rounded corners + a directional right/bottom shadow, so each card
   reads like a matted print lit from the top-left (depth).
   The figure is overflow:hidden, so the radius clips image + text panel.
   On hover the shadow deepens, as if the card leans toward you. */
/* Let card shadows fall off smoothly past the deck instead of being clipped
   at its edges (the theme sets overflow:hidden on the container). */
.portfolioContainer {
  overflow: visible;
}
.portfolioContainer figure {
  border: 0; /* drop the theme's thin light-gray keyline; the shadow defines the card now */
  border-radius: 6px;
  /* Negative spread keeps the blur off the top/left edges, so the shadow
     lives only on the right/bottom and the card transitions cleanly into it. */
  box-shadow: 12px 14px 20px -8px rgba(0, 0, 0, 0.26);
  transition: box-shadow 0.35s ease;
}
/* Hover: the card leans further toward you — deeper shadow only (no photo zoom). */
.portfolioContainer figure:hover {
  box-shadow: 26px 32px 46px -8px rgba(0, 0, 0, 0.46);
}
/* Kill the theme's photo zoom/fade on hover — keep the image steady. */
.portfolioContainer figure.effect-jazz:hover img {
  opacity: 0.9;
  -webkit-transform: none;
  transform: none;
}

/* Rounded buttons ("Read more" on the homepage, "Send message" on contact) —
   the theme squares the pill off on hover (border-radius:0). Keep it a pill and
   give it an on-theme dark fill + soft watery glow instead. */
.btn.btn-rounded.hover-effect {
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn.btn-rounded.hover-effect:hover {
  border-radius: 50px;
  background: #1f2b30;
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.25), 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* Section behind the cards: a gentle vignette (deepens toward the outer
   edges) plus a whisper of matte-paper grain — texture, same monochrome vibe. */
.section-portfolio {
  position: relative;
}
.section-portfolio > .container {
  position: relative;
  z-index: 1;
}
.section-portfolio::before,
.section-portfolio::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}
/* vignette — darker toward the outside */
.section-portfolio::before {
  background: radial-gradient(
    130% 115% at 50% 35%,
    rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, 0.07) 100%
  );
}
/* fine grain — barely perceptible matte texture */
.section-portfolio::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
  opacity: 0.035;
}

/* Sticky footer — pin the copyright bar to the viewport bottom on short pages
   (e.g. the contact page) instead of letting it float mid-screen. On tall
   pages (the homepage) there's no spare space, so this changes nothing there. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.section-copyright {
  margin-top: auto;
}

/* Preloader — replace the three bouncing dots with rising bubbles (on theme). */
.spinner .bounce1,
.spinner .bounce2,
.spinner .bounce3 {
  background: rgba(150, 150, 150, 0.12);
  border: 1.5px solid rgba(110, 110, 110, 0.60);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.75);
  animation: bubble-rise 1.7s ease-in infinite;
}
.spinner .bounce1 {
  width: 12px;
  height: 12px;
  animation-delay: 0s;
}
.spinner .bounce2 {
  width: 18px;
  height: 18px;
  animation-delay: 0.24s;
}
.spinner .bounce3 {
  width: 10px;
  height: 10px;
  animation-delay: 0.48s;
}
@keyframes bubble-rise {
  0% {
    transform: translateY(8px) scale(0.6);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(-26px) scale(1.05);
    opacity: 0;
  }
}