@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */


   /* 1. Container for just the banner section */
.cloud-banner-section {
  position: relative;        /* Anchors the absolute clouds inside this block */
  width: 100%;
  overflow: hidden;          /* Hides clouds when they drift past the edge */
  padding-top: 0;         /* Tight padding to hug your image close */
  padding-bottom: 0;
  background: rgba (233 187 48 / 0.9); /* Sky Gradient */
  line-height: 0;            /* CRUCIAL: Inherits from your image-container to eliminate extra bottom height */
  font-size: 0;
}

/* 2. Fixes your existing responsive image behavior */
.cloud-banner-section .hero-image {
  position: relative;
  z-index: 2;                /* Keeps image above the clouds */
  width: 100%;               /* Lets it expand fully inside its 800px indexbanner wrapper */
  height: auto;              /* Overrides any strict aspect-ratio forcing */
  aspect-ratio: 16 / 9;       /* Preserves natural image proportions as it resizes */
}

/* 3. Base Cloud Styling */
.cloud {
  position: absolute;
  z-index: 1;                /* Puts clouds behind the banner image */
  width: 120px;              /* Scaled down slightly to fit the tighter height */
  height: 40px;
  background: #ffffff;
  border-radius: 50px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.05);
  animation: floatLeft 25s linear infinite;
}

.cloud::before {
  content: "";
  position: absolute;
  background: #ffffff;
  width: 55px;
  height: 55px;
  top: -28px;
  left: 15px;
  border-radius: 50%;
}

.cloud::after {
  content: "";
  position: absolute;
  background: #ffffff;
  width: 40px;
  height: 40px;
  top: -20px;
  right: 20px;
  border-radius: 50%;
}

/* 4. Tighter Positioning for Lower Profile Banner Row */
.cloud-1 { top: 5%; transform: scale(1.0); animation-duration: 32s; }
.cloud-2 { top: 45%; transform: scale(0.6); animation-duration: 22s; opacity: 0.8; }
.cloud-3 { top: 20%; transform: scale(0.4); animation-duration: 45s; opacity: 0.6; }
.cloud-4 { top: 60%; transform: scale(0.8); animation-duration: 28s; animation-delay: -8s; }

/* 5. Infinite Horizontal Drift Loop */
@keyframes floatLeft {
  0% { left: 105%; }
  100% { left: -25%; }
}


/* 4. FADE BANNER IMAGE - LEFT/RIGHT */

.fade-image {
  /* Standard mask property */
  mask-image: linear-gradient(
    to right, 
    transparent 0%, 
    black 25%, 
    black 75%, 
    transparent 100%
  );
  
  /* WebKit prefix for Safari and older Chromium browsers */
  -webkit-mask-image: linear-gradient(
    to right, 
    transparent 0%, 
    black 25%, 
    black 75%, 
    transparent 100%
  );
}


.fade-all-edges {
  /* The image to apply the mask onto */
  object-fit: cover;
  
  /* Symmetrical fade amount (adjust this percentage to change the feather width) */
  --fade-size: 25%;

  /* Vertical fade (top & bottom) combined with Horizontal fade (left & right) */
  -webkit-mask-image: 
    linear-gradient(to bottom, transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent),
    linear-gradient(to right, transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent);
  
  mask-image: 
    linear-gradient(to bottom, transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent),
    linear-gradient(to right, transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent);

  /* Tells the browser to only show the area where BOTH gradients overlap */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}