/* ==========================================
   CORAL KEEPERS CASE STUDY – SPECIFIC STYLES
   Load with global.css on case-study-CoralKeepers.html
   ========================================== */

/* Shared hero stage — floating images scale with the main mockup */
.case-hero-stage--coral {
  position: relative;
  display: inline-block;
  max-width: min(720px, 75vw);
  max-height: 55vh;
  margin: 0;
  transform: translateY(32px);
  flex-shrink: 1;
  min-height: 0;
  overflow: visible;
  line-height: 0;
}

/* True vertical centering: see button sits outside the flex column */
.case-hero-centered:has(.case-hero-stage--coral) {
  padding: 40px;
}

.case-hero-centered:has(.case-hero-stage--coral) .case-hero-see-btn {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
}

/* Coral Keepers hero main image */
.case-hero-main-image--coral {
  position: relative;
  z-index: 2;
  margin: 0;
  display: block;
}

.case-hero-main-image--coral img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 55vh;
  height: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .case-hero-centered:has(.case-hero-stage--coral) {
    padding: 80px 20px 40px;
  }

  .case-hero-stage--coral {
    transform: translateY(24px);
  }

  .case-hero-centered:has(.case-hero-stage--coral) .case-hero-see-btn {
    bottom: 32px;
  }

  .case-hero-main-image--coral img {
    max-height: 35vh;
  }
}

/* Coral Keepers floating parallax images — positioned relative to hero stage */
.case-hero-floating-images--coral {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.case-hero-floating-images--coral .floating-img-coral-1,
.case-hero-floating-images--coral .floating-img-coral-2,
.case-hero-floating-images--coral .floating-img-coral-3,
.case-hero-floating-images--coral .floating-img-coral-4,
.case-hero-floating-images--coral .floating-img-coral-5,
.case-hero-floating-images--coral .floating-img-coral-6 {
  position: absolute;
  z-index: 0;
  height: auto;
  border-radius: 12px;
}

.floating-img-coral-1.scroll-fade,
.floating-img-coral-1.scroll-fade-in,
.floating-img-coral-2.scroll-fade,
.floating-img-coral-2.scroll-fade-in,
.floating-img-coral-3.scroll-fade,
.floating-img-coral-3.scroll-fade-in,
.floating-img-coral-4.scroll-fade,
.floating-img-coral-4.scroll-fade-in,
.floating-img-coral-5.scroll-fade,
.floating-img-coral-5.scroll-fade-in,
.floating-img-coral-6.scroll-fade,
.floating-img-coral-6.scroll-fade-in {
  transition: opacity 0.6s ease-out !important;
}

/*green coral*/
.floating-img-coral-1 {
  top: -25%;
  left: -60%;
  width: 30%;
  opacity: 0.55;
  filter: blur(2px);
}

/*purple coral*/
.floating-img-coral-2 {
  top: -2%;
  right: -2%;
  width: 14%;
  opacity: 0.85;
  filter: blur(1px);
}

/*orange star*/
.floating-img-coral-3 {
  top: 56%;
  right: -5%;
  width: 17%;
  opacity: 0.4;
  filter: blur(4px);
}

/*pink star*/
.floating-img-coral-4 {
  bottom: -5%;
  left: -10%;
  width: 35%;
  opacity: 0.45;
  filter: blur(4px);
}

/*happy corey*/
.floating-img-coral-5 {
  top: -20%;
  left: -10%;
  width: 20%;
  opacity: 0.60;
  filter: blur(2px);
}

/*confused corey*/
.floating-img-coral-6 {
  right: -30%;
  top: 5%;
  width: 10%;
  opacity: 0.5;
  filter: blur(2px);
}

/* Problem section — Corey image trio */
/* Full-width stack that stays within the case study container margins.
   Images are large (~62% of the container) and alternate alignment:
   Meet + Dead flush left, Corey's Health flush right. */
.problem-corey-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  margin-top: 16px;
}

.problem-corey-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Meet Corey — left aligned to the content margin */
.problem-corey-meet {
  align-self: flex-start;
}

/* Meet Corey + Dead Corey — slide + fade in from the left (instead of the default up) */
.problem-corey-meet.scroll-fade,
.problem-corey-dead.scroll-fade {
  transform: translateX(-120px);
}

.problem-corey-meet.scroll-fade-in,
.problem-corey-dead.scroll-fade-in {
  transform: translateX(0);
}

/* Corey's Health — slide + fade in from the right */
.problem-corey-health.scroll-fade {
  transform: translateX(120px);
}

.problem-corey-health.scroll-fade-in {
  transform: translateX(0);
}

/* Dead Corey — left aligned to the content margin */
.problem-corey-dead {
  align-self: flex-start;
}

/* Corey's Health — right aligned to the content margin */
.problem-corey-health {
  align-self: flex-end;
}

@media (max-width: 700px) {
  .problem-corey-img {
    width: 100%;
  }

  .problem-corey-meet,
  .problem-corey-dead,
  .problem-corey-health {
    align-self: stretch;
  }
}

/* Research section — three concern images within case study margins */
.coral-research-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 100%;
  padding-top: 32px;
}

.coral-research-item {
  min-width: 0;
}

.coral-research-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Research images — translate up + scale in (staggered) */
.coral-research-img.scroll-fade,
.coral-research-img.scroll-fade-in {
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out,
    filter 0.9s ease-out !important;
}

.coral-research-img.scroll-fade {
  transform: translateY(20px) scale(0.96);
}

.coral-research-img.scroll-fade-in {
  transform: translateY(0) scale(1);
}

.coral-research-item:nth-child(1) .coral-research-img.scroll-fade,
.coral-research-item:nth-child(1) .coral-research-img.scroll-fade-in {
  transition-delay: 0s !important;
}

.coral-research-item:nth-child(2) .coral-research-img.scroll-fade,
.coral-research-item:nth-child(2) .coral-research-img.scroll-fade-in {
  transition-delay: 0.25s !important;
}

.coral-research-item:nth-child(3) .coral-research-img.scroll-fade,
.coral-research-item:nth-child(3) .coral-research-img.scroll-fade-in {
  transition-delay: 0.5s !important;
}

@media (prefers-reduced-motion: reduce) {
  .coral-research-img.scroll-fade,
  .coral-research-img.scroll-fade-in {
    transform: none;
    transition-delay: 0s !important;
  }
}

@media (max-width: 700px) {
  .coral-research-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.coral-research-hmw {
  padding-top: 32px;
  width: 100%;
  max-width: 100%;
}

.coral-research-hmw img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.coral-journey-map {
  padding-bottom: 48px;
}

.coral-content-image--no-top-gap {
  margin-top: 0;
}

/* Physical prototype — same image treatment as case content, light bottom spacing only */
.coral-prototype-media {
  width: 100%;
  max-width: 100%;
  padding-top: 0;
  padding-bottom: 24px;
}

.coral-prototype-spaced {
  padding-bottom: 100px;
}

.coral-prototype-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Body text — matches section intro styling with spacing below */
.body-text {
  margin: 0;
  max-width: 640px;
  padding-bottom: 24px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.55);
}

/* Solution feature screenshots */
.coral-features-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 100%;
  margin: 24px 0 0;
  padding-bottom: 100px;
}

.coral-features-item {
  min-width: 0;
}

.coral-features-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

@media (max-width: 600px) {
  .coral-features-row {
    grid-template-columns: 1fr;
  }
}

.coral-solution-cta {
  margin-top: 3rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.coral-solution-cta .about-cta-btn {
  margin-top: 0;
}

/* Scroll fade — translate up + scale (matches site-wide pattern) */
.case-content-image.scroll-fade,
.coral-features-img.scroll-fade,
.coral-prototype-img.scroll-fade {
  transform: translateY(20px) scale(0.96);
}

.case-content-image.scroll-fade-in,
.coral-features-img.scroll-fade-in,
.coral-prototype-img.scroll-fade-in {
  transform: translateY(0) scale(1);
}

.coral-features-img.scroll-fade,
.coral-features-img.scroll-fade-in {
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out,
    filter 0.9s ease-out !important;
}

.coral-features-item:nth-child(1) .coral-features-img.scroll-fade,
.coral-features-item:nth-child(1) .coral-features-img.scroll-fade-in {
  transition-delay: 0s !important;
}

.coral-features-item:nth-child(2) .coral-features-img.scroll-fade,
.coral-features-item:nth-child(2) .coral-features-img.scroll-fade-in {
  transition-delay: 0.25s !important;
}

.coral-features-item:nth-child(3) .coral-features-img.scroll-fade,
.coral-features-item:nth-child(3) .coral-features-img.scroll-fade-in {
  transition-delay: 0.5s !important;
}

@media (prefers-reduced-motion: reduce) {
  .case-content-image.scroll-fade,
  .case-content-image.scroll-fade-in,
  .coral-features-img.scroll-fade,
  .coral-features-img.scroll-fade-in,
  .coral-prototype-img.scroll-fade,
  .coral-prototype-img.scroll-fade-in {
    transform: none;
    transition-delay: 0s !important;
  }
}