/* Caption Card Base Styles */
.cotc-caption-card {
  --dynamic-circ-x: 18.25%;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* Ensure it has a solid background to block parallax */
  box-shadow: 0 -10px 20px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.3);
}

.caption-image-wrapper {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 27.5px;
  right: 27.5px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.caption-image-wrapper .scroll-animator-section,
.caption-image-wrapper .scroll-animator-content {
  width: 100%;
  height: 100%;
}

.caption-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient Masks */
.caption-bg-fade_left {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.caption-bg-fade_right {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.caption-text-box {
  border-radius: 8px;
  transition: all 0.3s ease;
}
.cotc-caption-card__title {
  font-family: var(--cotc-copperplate);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 2.5rem;
  line-height:0.9em;
}
.cotc-caption-card__text {
  font-family: var(--cotc-roboto);
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.25rem;
}
.caption-text-box a.btn.cotc-btn-primary {
  border: 1px solid;
  font-family: var(--cotc-copperplate);
  font-size: 2.0em;
  color: var(--cotc-white);
}
.caption-text-box a.btn.cotc-btn-primary:hover {
  color: var(--cotc-black);
}
/* Background Color Modifiers */
.bg-cotc-black {
  background-color: var(--cotc-black);
  color: var(--cotc-white);
}
.bg-cotc-black .cotc-caption-card__title { color: var(--cotc-yellow); }

.bg-cotc-red {
  background-color: var(--cotc-red);
  color: var(--cotc-white);
}
.bg-cotc-red .cotc-caption-card__title { color: var(--cotc-yellow); }

.bg-cotc-tan {
  background-color: var(--cotc-tan);
  color: var(--cotc-black);
}
.bg-cotc-tan .cotc-caption-card__title { color: var(--cotc-red); }

.bg-cotc-blue {
  background-color: var(--cotc-blue);
  color: var(--cotc-black);
}
.bg-cotc-blue .cotc-caption-card__title { color: var(--cotc-white); }

.bg-cotc-yellow {
  background-color: var(--cotc-yellow);
  color: var(--cotc-black);
}
.bg-cotc-yellow .cotc-caption-card__title { color: var(--cotc-red); }

.bg-cotc-white {
  background-color: var(--cotc-white);
  color: var(--cotc-black);
}
.bg-cotc-white .cotc-caption-card__title { color: var(--cotc-red); }

/* 70% Transparent Background Matching Card's Set Background Color */
.caption-text-box.match-card-bg-70 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
  box-shadow: none !important;
}
.bg-cotc-black .caption-text-box.match-card-bg-70 {
  background-color: rgba(0, 0, 0, 0.70) !important;
  box-shadow: none !important;
}
.bg-cotc-tan .caption-text-box.match-card-bg-70 {
  background-color: rgba(229, 195, 150, 0.70) !important;
  box-shadow: none !important;
}
.bg-cotc-red .caption-text-box.match-card-bg-70 {
  background-color: rgba(204, 34, 7, 0.70) !important;
  box-shadow: none !important;
}
.bg-cotc-blue .caption-text-box.match-card-bg-70 {
  background-color: rgba(83, 195, 205, 0.70) !important;
  box-shadow: none !important;
}
.bg-cotc-yellow .caption-text-box.match-card-bg-70 {
  background-color: rgba(254, 204, 11, 0.70) !important;
  box-shadow: none !important;
}
.bg-cotc-white .caption-text-box.match-card-bg-70 {
  background-color: rgba(255, 255, 255, 0.70) !important;
  box-shadow: none !important;
}
.cotc-caption-card[data-is-circular="true"] .caption-text-box.match-card-bg-70 {
  box-shadow: none !important;
}

/* Character Layer Desktop layout */
@media (min-width: 992px) {
  .caption-char-layer {
    position: absolute;
    width: 50%;
    height: 100%;
    /* Apply scale via transform for smooth, layout-independent scaling */
    transform: scale(var(--char-scale, 1));
  }
  
  .caption-char-layer[data-is-circular="false"] {
    width: 50%;
    height: 100%;
  }
  
  .caption-char-layer[data-h-pos="left"] { left: 0; transform-origin: left center; }
  .caption-char-layer[data-h-pos="right"] { right: 0; transform-origin: right center; }
  
  .caption-char-layer[data-h-pos="left"] .scroll-animator-section { text-align: right; }
  .caption-char-layer[data-h-pos="right"] .scroll-animator-section { text-align: left; }
  
  /* Standard Image Placement */
  .caption-char-layer[data-is-circular="false"][data-v-pos="top"] { top: 0; bottom: auto; transform-origin: left top; }
  .caption-char-layer[data-is-circular="false"][data-h-pos="right"][data-v-pos="top"] { transform-origin: right top; }
  
  .caption-char-layer[data-is-circular="false"][data-v-pos="bottom"] { bottom: 0; top: auto; transform-origin: left bottom; }
  .caption-char-layer[data-is-circular="false"][data-h-pos="right"][data-v-pos="bottom"] { transform-origin: right bottom; }
  
  /* If centered vertically, combine translateY and scale */
  .caption-char-layer[data-is-circular="false"][data-v-pos="center"] { 
    top: 50%; bottom: auto; 
    transform: translateY(-50%) scale(var(--char-scale, 1)); 
    transform-origin: left center;
  }
  .caption-char-layer[data-is-circular="false"][data-h-pos="right"][data-v-pos="center"] {
    transform-origin: right center;
  }

  /* Circular Graphic Cut-out Effect */
  .caption-char-layer[data-is-circular="true"] {
    /* Force perfect square relative to viewport height so it doesn't collapse */
    width: 130vh;
    height: 130vh; 
    --circ-x: 0;
    --circ-y: 0;
    transform: translate(var(--circ-x), var(--circ-y));
  }
  
  /* Dynamic horizontal shift: circular dynamic x offset set to 18.25% */
  .caption-char-layer[data-is-circular="true"][data-h-pos="right"] { right: 0; left: auto; --circ-x: var(--dynamic-circ-x, 18.25%); }
  .caption-char-layer[data-is-circular="true"][data-h-pos="left"] { left: 0; right: auto; --circ-x: calc(var(--dynamic-circ-x, 18.25%) * -1); }
  
  /* Vertical clipping */
  .caption-char-layer[data-is-circular="true"][data-v-pos="top"] { top: 0; bottom: auto; --circ-y: -25%; }
  .caption-char-layer[data-is-circular="true"][data-v-pos="bottom"] { bottom: 0; top: auto; --circ-y: 25%; }
  .caption-char-layer[data-is-circular="true"][data-v-pos="center"] { top: 50%; bottom: auto; --circ-y: -50%; }

  /* Text column width for circular caption cards (set to 58%) */
  .cotc-caption-card[data-is-circular="true"] .row > .col-lg-8 {
    flex: 0 0 auto !important;
    width: 58% !important;
  }
  #block-pirate-chickens-welcomeaboard .cotc-caption-card[data-is-circular="true"] .row > .col-lg-8 {
    width: 61% !important;
  }
  #block-pirate-chickens-orderonline .cotc-caption-card[data-is-circular="true"] .row > .col-lg-8 {
    width: 58% !important;
  }

  /* Graphic on Right -> Text on Left */
  .cotc-caption-card[data-is-circular="true"][data-char-pos="right"] .row > .col-lg-8 {
    margin-left: 0 !important;
  }
  .cotc-caption-card[data-is-circular="true"][data-char-pos="right"] .caption-text-box {
    text-align: right !important;
    margin-right: 0 !important;
  }

  /* Graphic on Left -> Text on Right */
  .cotc-caption-card[data-is-circular="true"][data-char-pos="left"] .row > .col-lg-8 {
    margin-left: auto !important; /* Push the 40% column to the far right edge */
  }
  .cotc-caption-card[data-is-circular="true"][data-char-pos="left"] .caption-text-box {
    text-align: left !important;
    margin-left: 0 !important;
  }
  .cotc-caption-card__title {
    font-size: 3.5rem;
  }
  .cotc-caption-card__text {
    font-size: 1.5rem;
  }
  .cotc-caption-card__text p.sm-note {
    font-size: 0.75em !important;
  }
  .cotc-caption-card__text p.sm-note strong {
    font-weight: 600;
  }
}

.sm-note-wrap {
  width: 65%;
  float: right;
}

/* Character Layer Mobile & Tablet Portrait layout */
@media screen and (max-width: 991px) {
  
  /* Text container pushing based on narrow placement */
  .cotc-caption-card[data-narrow-pos="top"] .container.position-relative {
    margin-top: auto;
    margin-bottom: 5vh;
  }
  .cotc-caption-card[data-narrow-pos="bottom"] .container.position-relative {
    margin-bottom: auto;
    margin-top: 5vh;
  }

  .caption-char-layer {
    position: relative;
    width: 100%;
    height: 40vh; /* Standard space */
    margin-bottom: 2rem;
    transform: scale(var(--char-scale, 1));
    transform-origin: bottom center;
  }
  
  .caption-char-layer[data-is-circular="false"] {
    height: 40vh;
  }
  
  .caption-char-layer .scroll-animator-section {
    text-align: center !important;
  }

  /* Circular Graphic Mobile Cut-out Effect */
  .caption-char-layer[data-is-circular="true"] {
    position: absolute !important;
    /* Force square based on width to overflow the screen */
    width: 150vw; 
    height: 150vw;
    margin-bottom: 0;
    --circ-x: -50%;
    --circ-y: 0;
    transform: translate(var(--circ-x), var(--circ-y)) !important;
  }
  
  /* Narrow Placement (Top/Bottom Cutoff) */
  .caption-char-layer[data-is-circular="true"][data-narrow-pos="top"] {
    top: 0 !important; bottom: auto !important; --circ-y: -14%;
  }
  .caption-char-layer[data-is-circular="true"][data-narrow-pos="bottom"] {
    bottom: 0 !important; top: auto !important; --circ-y: 14%;
  }

  /* Narrow Typography Tweaks */
  .cotc-caption-card__title {
    font-size: 2.2rem;
    letter-spacing: 0;
  }
  
  /* Horizontal Cutoff based on Alignment (v-pos) */
  .caption-char-layer[data-is-circular="true"][data-v-pos="top"] {
    left: 0 !important; right: auto !important; --circ-x: -25%;
  }
  .caption-char-layer[data-is-circular="true"][data-v-pos="center"] {
    left: 50% !important; right: auto !important; --circ-x: -50%;
  }
  .caption-char-layer[data-is-circular="true"][data-v-pos="bottom"] {
    right: 0 !important; left: auto !important; --circ-x: 25%;
  }
}

/* --- ANIMATION SEQUENCING --- */
/* DESKTOP ( >= 992px ) */
@media (min-width: 992px) {
  /* Text slides in at 0.3s */
  .cotc-caption-card .anim-role-text,
  .cotc-caption-card .anim-role-text .scroll-animator-content {
    transition-delay: 0.3s;
  }
  /* Graphic waits until 0.9s */
  .cotc-caption-card .anim-role-graphic,
  .cotc-caption-card .anim-role-graphic .scroll-animator-content {
    transition-delay: 0.9s;
  }
}

/* MOBILE ( < 992px ) */
@media (max-width: 991.98px) {
  /* If narrow_placement == 'top', Graphic is on top. Animate Graphic first, then Text. */
  .cotc-caption-card[data-narrow-pos="top"] .anim-role-graphic,
  .cotc-caption-card[data-narrow-pos="top"] .anim-role-graphic .scroll-animator-content {
    transition-delay: 0.1s;
  }
  .cotc-caption-card[data-narrow-pos="top"] .anim-role-text,
  .cotc-caption-card[data-narrow-pos="top"] .anim-role-text .scroll-animator-content {
    transition-delay: 0.6s;
  }
  
  /* If narrow_placement == 'bottom', Text is on top. Animate Text first, then Graphic. */
  .cotc-caption-card[data-narrow-pos="bottom"] .anim-role-text,
  .cotc-caption-card[data-narrow-pos="bottom"] .anim-role-text .scroll-animator-content {
    transition-delay: 0.1s;
  }
  .cotc-caption-card[data-narrow-pos="bottom"] .anim-role-graphic,
  .cotc-caption-card[data-narrow-pos="bottom"] .anim-role-graphic .scroll-animator-content {
    transition-delay: 0.6s;
  }
}