/* ==========================================================================
   SAJ Dental Clinic — Inner Banner section
   Scope: every selector is under .inner-banner. Visual values are CSS
   custom properties so they can map to future CMS / widget controls.
   ========================================================================== */

/* Standalone preview page only (inner-banner.html).
   The extra height just gives the page room to scroll so the
   ScrollTrigger parallax can be previewed. */
.inner-banner-preview {
  margin: 0;
  min-height: 200vh;
  background: #F7FAFD;
}

.inner-banner {
  /* ---- Brand ---- */
  --ib-navy: #0B2340;
  --ib-navy-soft: #1A3557;
  --ib-orange: #F4511E;
  --ib-orange-strong: #D6400F;      /* AA contrast for small orange text */
  --ib-text: #44516A;
  --ib-bg-1: #F8FBFE;
  --ib-bg-2: #EEF5FC;
  --ib-bg-3: #E4EEF9;

  /* ---- Type ---- */
  --ib-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ib-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ib-title-size: clamp(2.5rem, 4.4vw, 5.75rem);
  --ib-description-size: clamp(1rem, 1.1vw, 1.375rem);
  --ib-description-width: min(30em, 38vw);

  /* ---- Layout ---- */
  --ib-gutter-left: clamp(24px, 8.5vw, 172px);
  --ib-gutter-right: clamp(20px, 4vw, 72px);
  --ib-image-ratio: 1.5729;                     /* 1186 / 754 — the photo's ratio */
  --ib-visual-w: min(57vw, 1240px);             /* image box width */
  --ib-visual-h: calc(var(--ib-visual-w) / var(--ib-image-ratio));
  --ib-min-height: max(calc(var(--ib-visual-h) - var(--ib-visual-bleed)), 560px);
  --ib-image-mask: url(#inner-banner-mask-wide);
  --ib-visual-bleed: 14px;                      /* image runs off the top edge, as in the design */

  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: var(--ib-min-height);
  overflow: hidden;
  overflow: clip;
  background-color: var(--ib-bg-1);
  background-image:
    radial-gradient(120% 90% at 0% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(112deg, var(--ib-bg-1) 0%, var(--ib-bg-2) 48%, var(--ib-bg-3) 100%);
  font-family: var(--ib-font-body);
  color: var(--ib-text);
  -webkit-font-smoothing: antialiased;
}

.inner-banner *,
.inner-banner *::before,
.inner-banner *::after {
  box-sizing: border-box;
}

/* Hidden SVG holding the shared defs. Not display:none — gradients and
   clip paths inside a display:none SVG do not render in every browser. */
.inner-banner__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Generic inner layer: the outer element takes scroll motion, the inner
   layer takes mouse parallax + idle drift, so the transforms never fight. */
.inner-banner__layer {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   A–C. Background
   -------------------------------------------------------------------------- */
.inner-banner__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.inner-banner__glow,
.inner-banner__shape,
.inner-banner__tooth {
  position: absolute;
  will-change: transform;
}

.inner-banner__glow .inner-banner__layer {
  border-radius: 50%;
}

.inner-banner__glow--warm {
  left: 4%;
  top: 18%;
  width: 42vw;
  height: 42vw;
  max-width: 760px;
  max-height: 760px;
}

.inner-banner__glow--warm .inner-banner__layer {
  background: radial-gradient(closest-side, rgba(244, 81, 30, 0.07), rgba(244, 81, 30, 0));
}

.inner-banner__glow--cool {
  left: 36%;
  top: -20%;
  width: 46vw;
  height: 46vw;
  max-width: 860px;
  max-height: 860px;
}

.inner-banner__glow--cool .inner-banner__layer {
  background: radial-gradient(closest-side, rgba(150, 196, 238, 0.32), rgba(150, 196, 238, 0));
}

/* Soft pale-blue wave, bottom left */
.inner-banner__shape--one {
  left: -6%;
  bottom: -14%;
  width: 52%;
  height: 58%;
}

/* Translucent white ribbon sweeping across the top */
.inner-banner__shape--two {
  left: 2%;
  top: -12%;
  width: 62%;
  height: 46%;
}

/* White wave rising towards the right, along the bottom */
.inner-banner__shape--three {
  right: -6%;
  bottom: -8%;
  width: 82%;
  height: 46%;
}

/* Tooth silhouettes */
.inner-banner__tooth svg {
  overflow: visible;
}

.inner-banner__tooth--outline {
  left: -5%;
  top: -14%;
  width: clamp(220px, 26vw, 520px);
  aspect-ratio: 100 / 110;
  color: #1269A8;
}

/* Partial opacity lives on the inner layer: the outer element is what the
   intro fades from 0 → 1. */
.inner-banner__tooth--outline .inner-banner__layer {
  opacity: 0.05;
}

.inner-banner__tooth--outline use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.inner-banner__tooth--soft {
  right: 2%;
  bottom: -16%;
  width: clamp(140px, 15vw, 300px);
  aspect-ratio: 100 / 110;
}

.inner-banner__tooth--soft .inner-banner__layer {
  opacity: 0.6;
}

.inner-banner__tooth--soft use {
  fill: rgba(255, 255, 255, 0.35);
  stroke: #FFFFFF;
  stroke-width: 1.4;
}

/* --------------------------------------------------------------------------
   D. Container
   -------------------------------------------------------------------------- */
.inner-banner__container {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: var(--ib-min-height);
  display: flex;
  align-items: center;
  padding: clamp(56px, 6vw, 120px) var(--ib-gutter-right) clamp(56px, 6vw, 120px) var(--ib-gutter-left);
}

/* --------------------------------------------------------------------------
   E. Content
   -------------------------------------------------------------------------- */
.inner-banner__content {
  position: relative;
  z-index: 3;
  max-width: 44vw;
  will-change: transform;
}

.inner-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 24px);
  margin: 0 0 clamp(18px, 2vw, 36px);
  font-size: clamp(0.75rem, 0.78vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ib-navy-soft);
}

.inner-banner__eyebrow-line {
  display: block;
  flex: none;
  width: clamp(44px, 3.5vw, 70px);
  height: 2px;
  border-radius: 2px;
  background: var(--ib-orange);
  transform-origin: left center;
}

.inner-banner__title {
  margin: 0 0 clamp(18px, 1.8vw, 34px);
  font-family: var(--ib-font-display);
  font-size: var(--ib-title-size);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ib-navy);
}

/* Each line is a mask the words rise out of. The padding/negative margin
   leaves room for italic overhang and descenders so nothing is clipped. */
.inner-banner__title-line {
  display: block;
  overflow: hidden;
  padding: 0 0.12em 0.1em 0;
  margin-bottom: -0.1em;
}

.inner-banner__title-text,
.inner-banner__title-highlight {
  display: inline-block;
}

.inner-banner__title-highlight {
  font-style: italic;
  font-weight: 600;
  color: var(--ib-orange);
}

.inner-banner__description {
  max-width: var(--ib-description-width);
  margin: 0 0 clamp(24px, 2.2vw, 42px);
  font-size: var(--ib-description-size);
  line-height: 1.6;
  color: var(--ib-text);
}

/* --------------------------------------------------------------------------
   G. Breadcrumb
   -------------------------------------------------------------------------- */
.inner-banner__breadcrumb {
  display: inline-flex;
  max-width: 100%;
  padding: clamp(12px, 1vw, 18px) clamp(22px, 1.6vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 30px -12px rgba(11, 35, 64, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.inner-banner__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.9375rem, 0.95vw, 1.1875rem);
  line-height: 1.3;
}

.inner-banner__breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.inner-banner__breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ib-navy-soft);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.3s ease;
}

.inner-banner__breadcrumb-link:hover {
  color: var(--ib-orange-strong);
}

.inner-banner__breadcrumb-link:focus-visible {
  outline: 2px solid var(--ib-orange);
  outline-offset: 4px;
}

.inner-banner__breadcrumb-icon,
.inner-banner__breadcrumb-separator {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inner-banner__breadcrumb-icon {
  width: 1.4em;
  height: 1.4em;
  stroke-width: 1.7;
  color: var(--ib-orange-strong);
}

.inner-banner__breadcrumb-separator {
  width: 1em;
  height: 1em;
  stroke-width: 2;
  color: #8A95A8;
}

.inner-banner__breadcrumb-current {
  font-weight: 600;
  color: var(--ib-orange-strong);
}

/* --------------------------------------------------------------------------
   F. Visual
   The box always keeps the photo's aspect ratio, so the objectBoundingBox
   mask lines up with the photo at every size.
   -------------------------------------------------------------------------- */
.inner-banner__visual {
  position: absolute;
  top: calc(var(--ib-visual-bleed) * -1);
  right: 0;
  z-index: 2;
  width: var(--ib-visual-w);
  height: var(--ib-visual-h);
  will-change: transform;
}

.inner-banner__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: transform;
}

.inner-banner__image-wrapper {
  position: absolute;
  inset: 0;
  margin: 0;
  -webkit-clip-path: var(--ib-image-mask);
  clip-path: var(--ib-image-mask);
}

.inner-banner__image-reveal {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.inner-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 62% 42%;     /* the patient's smile — keeps it stable while scaling */
  will-change: transform;
}

/* Glossy rim + halo trace the mask shape */
.inner-banner__halo,
.inner-banner__rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.inner-banner__halo {
  z-index: 1;
}

.inner-banner__halo use {
  fill: none;
  stroke: #FFFFFF;
  stroke-opacity: 0.55;
  stroke-width: clamp(16px, 1.6vw, 30px);
}

.inner-banner__rim use {
  fill: none;
  stroke: #FFFFFF;
  stroke-opacity: 0.95;
  stroke-width: 2px;
}

.inner-banner__shape-ref--stacked {
  display: none;
}

/* Glass tooth peeking out from behind the image (like the reference) */
.inner-banner__tooth--glass {
  left: -4%;
  top: 57%;
  z-index: 1;
  width: 20%;
  aspect-ratio: 100 / 110;
  filter: drop-shadow(0 18px 30px rgba(18, 105, 168, 0.12));
}

.inner-banner__tooth--glass .inner-banner__layer {
  opacity: 0.85;
}

.inner-banner__tooth--glass use {
  fill: url(#inner-banner-glass);
  stroke: #FFFFFF;
  stroke-opacity: 0.75;
  stroke-width: 1.4;
}

/* --------------------------------------------------------------------------
   Intro pre-state.
   Elements marked data-ib-reveal start hidden only until JS takes over
   (.is-animated). If GSAP never loads, the fail-safe animation shows
   everything after a short delay.
   -------------------------------------------------------------------------- */
.inner-banner:not(.is-animated) [data-ib-reveal] {
  opacity: 0;
  animation: inner-banner-failsafe 0.8s ease 1.8s forwards;
}

@keyframes inner-banner-failsafe {
  to { opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptop */
@media (max-width: 1366px) {
  .inner-banner {
    --ib-description-width: min(30em, 40vw);
  }
}

/* iPad landscape / small laptop: keep two columns, smaller image */
@media (max-width: 1199px) {
  .inner-banner {
    --ib-title-size: clamp(2.4rem, 4.2vw, 3.4rem);
    --ib-visual-w: 58vw;
    --ib-gutter-left: clamp(24px, 6vw, 72px);
    --ib-description-width: 38vw;
    --ib-min-height: calc(var(--ib-visual-h) - var(--ib-visual-bleed));
  }

  .inner-banner__container {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .inner-banner__content {
    max-width: 44vw;
  }

  .inner-banner__tooth--soft,
  .inner-banner__tooth--glass {
    display: none;
  }
}

/* iPad portrait + mobile: stacked — text first, image below */
@media (max-width: 900px) {
  .inner-banner {
    --ib-title-size: clamp(2.3rem, 7.4vw, 3.6rem);
    --ib-description-size: clamp(1rem, 2.3vw, 1.125rem);
    --ib-description-width: 34em;
    --ib-gutter-left: clamp(20px, 7vw, 64px);
    --ib-gutter-right: clamp(20px, 7vw, 64px);
    --ib-visual-w: 112vw;
    --ib-visual-shift: -16vw;      /* pulls the empty left edge of the photo off-screen */
    --ib-min-height: 0px;
    --ib-image-mask: url(#inner-banner-mask-stacked);

    display: block;
  }

  .inner-banner__container {
    display: block;
    padding-top: clamp(56px, 10vw, 96px);
    padding-bottom: 0;
  }

  .inner-banner__content {
    max-width: 640px;
  }

  .inner-banner__visual {
    position: relative;
    top: auto;
    right: auto;
    margin: clamp(20px, 4vw, 40px) 0 0 calc(var(--ib-visual-shift) - var(--ib-gutter-left));
  }

  .inner-banner__tooth--glass {
    display: block;
  }

  .inner-banner__shape-ref--wide { display: none; }
  .inner-banner__shape-ref--stacked { display: inline; }

  .inner-banner__tooth--glass {
    left: 15%;
    top: auto;
    bottom: 2%;
    width: 15%;
  }

  .inner-banner__shape--one {
    top: 30%;
    bottom: auto;
    width: 90%;
    height: 40%;
  }

  .inner-banner__shape--two {
    left: -10%;
    width: 120%;
    height: 22%;
  }

  .inner-banner__shape--three {
    right: -20%;
    width: 140%;
    height: 26%;
  }

  .inner-banner__tooth--outline {
    left: auto;
    right: -14%;
    top: -4%;
    width: 52vw;
  }

  .inner-banner__glow--warm {
    left: -20%;
    top: 4%;
    width: 90vw;
    height: 90vw;
  }

  .inner-banner__glow--cool {
    left: 20%;
    top: 40%;
    width: 100vw;
    height: 100vw;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .inner-banner {
    --ib-title-size: clamp(2.15rem, 9.6vw, 2.75rem);
    --ib-visual-w: 128vw;
    --ib-visual-shift: -24vw;
  }

  .inner-banner__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.22em;
  }

  .inner-banner__title {
    line-height: 1.1;
  }

  .inner-banner__breadcrumb {
    padding: 11px 20px;
  }

  .inner-banner__halo use {
    stroke-width: 14px;
  }

  .inner-banner__tooth--outline .inner-banner__layer {
    opacity: 0.032;
  }

  .inner-banner__tooth--glass,
  .inner-banner__shape--two path + path {
    display: none;
  }
}

/* Reduced motion: nothing hidden for long, no CSS transitions */
@media (prefers-reduced-motion: reduce) {
  .inner-banner:not(.is-animated) [data-ib-reveal] {
    animation-delay: 0.6s;
  }

  .inner-banner__breadcrumb-link {
    transition: none;
  }
}