/* =========================================
   Reusable Full-Width Blue Banner, enhanced
   File: css/blueBanner.css
========================================= */

:root{
  /* Brand */
  --banner-bg: #FF6C63 !important;
  --banner-height: clamp(140px, 26vw, 280px);
  --banner-radius: 10px;
  --banner-shadow: 0 10px 22px rgba(0,0,0,.08);

  /* Motion tokens */
  --enter-dur: 800ms;
  --enter-ease: cubic-bezier(.22,.61,.36,1);
  --hover-dur: 240ms;
  --hover-ease: cubic-bezier(.2,.6,.2,1);
}

/* Full width container with a viewport-wide background */
.blue-banner{
  position: relative;
  height: var(--banner-height);
  margin: 10px 0 18px;
  isolation: isolate;

  /* 3D context for subtle tilt */
  perspective: 1200px;
  transform-style: preserve-3d;

  /* entry lift */
  animation: banner-enter var(--enter-dur) var(--enter-ease) both;
  will-change: transform, opacity;

  /* title baseline and idle amplitude */
  --title-dy: -50%;
  --breathe-amp: 2px;
}

/* The blue strip that stretches edge to edge */
.blue-banner::before{
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 100%;
  background: var(--banner-bg);
  border-radius: var(--banner-radius) var(--banner-radius) 0 0; /* top rounded, bottom square */
  box-shadow: var(--banner-shadow);
  z-index: -1;

  /* reveal with gentle spring and tiny 3D tilt */
  transform-origin: top center;
  animation: strip-reveal var(--enter-dur) var(--enter-ease) both;
  transition:
    transform var(--hover-dur) var(--hover-ease),
    box-shadow var(--hover-dur) var(--hover-ease);
  will-change: transform, box-shadow;
}

/* Hover and focus: micro tilt and lift */
.blue-banner:hover::before,
.blue-banner:focus-within::before{
  transform: translateY(-2px) scale(1.008) rotateX(2deg);
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

/* Centered title */
.blue-banner__title{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, var(--title-dy));
  margin: 0;
  color: #fff;
  font-family: "Montserrat", system-ui, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1;
  text-align: center;

  /* One-line fix */
  white-space: nowrap;
  max-width: 94%;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: clamp(22px, 4.2vw, 56px);

  /* rise in, then idle breathe */
  animation:
    title-rise 560ms var(--enter-ease) 120ms both,
    title-breathe 8s ease-in-out 1.2s infinite alternate;
  transition:
    transform var(--hover-dur) var(--hover-ease),
    letter-spacing var(--hover-dur) var(--hover-ease),
    text-shadow var(--hover-dur) var(--hover-ease);
  will-change: transform, letter-spacing, text-shadow;
  text-shadow: 0 1px 0 rgba(255,255,255,.12);
}

/* Hover and focus: tiny nudge */
.blue-banner:hover{
  --title-dy: calc(-50% - 2px);
  --breathe-amp: 4px;
}
.blue-banner:focus-within{
  --title-dy: calc(-50% - 2px);
  --breathe-amp: 4px;
}

.blue-banner:hover .blue-banner__title,
.blue-banner:focus-within .blue-banner__title{
  letter-spacing: .065em;
  text-shadow: 0 2px 6px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.12);
}

/* Optional color variants */
.blue-banner.is-salmon::before{ background: #FF6C63; }
.blue-banner.is-navy::before{ background: #165C7D; }

/* Disable old banner if present */
.ux-case-study-preview .label::before{ content: none !important; }

/* Keyframes */
@keyframes banner-enter{
  from{
    opacity: 0;
    transform: translateY(12px) scale(.985) rotateX(6deg);
  }
  60%{
    opacity: 1;
    transform: translateY(-2px) scale(1.01) rotateX(0deg);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

@keyframes strip-reveal{
  0%{
    opacity: 0;
    transform: scaleY(.9) translateZ(0) rotateX(8deg);
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
  }
  55%{
    opacity: 1;
    transform: scaleY(1.015) translateZ(0) rotateX(0deg);
    box-shadow: 0 18px 42px rgba(0,0,0,.16);
  }
  100%{
    opacity: 1;
    transform: scaleY(1) translateZ(0) rotateX(0deg);
    box-shadow: var(--banner-shadow);
  }
}

@keyframes title-rise{
  from{
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px));
    letter-spacing: .12em;
  }
  to{
    opacity: 1;
    transform: translate(-50%, var(--title-dy));
    letter-spacing: .06em;
  }
}

@keyframes title-breathe{
  0%{
    transform: translate(-50%, calc(var(--title-dy) - var(--breathe-amp)));
    text-shadow: 0 1px 0 rgba(255,255,255,.10);
  }
  100%{
    transform: translate(-50%, calc(var(--title-dy) + var(--breathe-amp)));
    text-shadow: 0 3px 10px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.10);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .blue-banner,
  .blue-banner::before,
  .blue-banner__title{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .blue-banner__title{
    transform: translate(-50%, -50%) !important;
  }
}

/* Mobile fine-tune */
@media (max-width: 560px){
  .blue-banner__title{
    font-size: clamp(18px, 5vw, 44px);
    letter-spacing: .045em;
  }
}