/*use only for the aimations */


/*ISI open and collapase animation*/


/* ── ISI Expand/Collapse: Allow parent containers to grow ── */

/* When any important-card has height:auto (expanded state via JS),
   all ancestor containers must also allow growth */

/* Product card wrappers */
/*#breast-franchise #enhertu-datroway #enhertu-card,*/
/*#breast-franchise #enhertu-datroway #datroway-card,*/
/*#breast-franchise #truqap-lynparza #truqap-card,*/
/*#breast-franchise #truqap-lynparza #lynparza-card,*/
/*#breast-franchise #etcamah-card #etcamah,*/
/*#advancing-treatment #enhertu-datroway #enhertu-card,*/
/*#advancing-treatment #enhertu-datroway #datroway-card,*/
/*#advancing-treatment #truqap-lynparza #truqap-card,*/
/*#advancing-treatment #truqap-lynparza #lynparza-card,*/
/*#advancing-treatment #etcamah-card #etcamah {*/
/*    max-height: none !important;*/
/*    height: auto !important;*/
/*}*/

/* The outer card container (.cmp-cards__advanced) */
/*#breast-franchise #enhertu-datroway .cmp-cards__advanced--container .cmp-cards__advanced,*/
/*#breast-franchise #truqap-lynparza .cmp-cards__advanced--container .cmp-cards__advanced,*/
/*#breast-franchise #etcamah-card .cmp-cards__advanced--container .cmp-cards__advanced,*/
/*#advancing-treatment #enhertu-datroway .cmp-cards__advanced--container .cmp-cards__advanced,*/
/*#advancing-treatment #truqap-lynparza .cmp-cards__advanced--container .cmp-cards__advanced,*/
/*#advancing-treatment #etcamah-card .cmp-cards__advanced--container .cmp-cards__advanced {*/
/*    max-height: none !important;*/
/*    height: auto !important;*/
/*}*/

/* The description wrapper */
/*#breast-franchise #enhertu-datroway .cmp-cards__advanced--description,*/
/*#breast-franchise #truqap-lynparza .cmp-cards__advanced--description,*/
/*#breast-franchise #etcamah-card .cmp-cards__advanced--description,*/
/*#advancing-treatment #enhertu-datroway .cmp-cards__advanced--description,*/
/*#advancing-treatment #truqap-lynparza .cmp-cards__advanced--description,*/
/*#advancing-treatment #etcamah-card .cmp-cards__advanced--description {*/
/*    max-height: none !important;*/
/*}*/

/* Important cards — collapsed state (default fixed height) */
/*#breast-franchise .en-important-card,*/
/*#breast-franchise .dw-important-card,*/
/*#breast-franchise .tq-important-card,*/
/*#breast-franchise .lp-important-card,*/
/*#breast-franchise .ea-important-card,*/
/*#advancing-treatment .en-important-card,*/
/*#advancing-treatment .dw-important-card,*/
/*#advancing-treatment .tq-important-card,*/
/*#advancing-treatment .lp-important-card,*/
/*#advancing-treatment .ea-important-card {*/
/*    overflow: hidden !important;*/
/*}*/



/* ==========================================================================
   SCROLL REVEAL SYSTEM  (annotation #8 — "Apple iPhone page" pattern)
   --------------------------------------------------------------------------
   HOW TO USE
     <div class="reveal">          → one element
     <div data-reveal-group>       → parent; JS auto-staggers its .reveal children

   STATES
     html.js .reveal               → softened: low opacity, blurred, translated down
     html.js .reveal.is-revealed   → full clarity (CSS transition only — JS never
                                     animates directly)

   PROGRESSIVE DISCLOSURE, NOT DECORATION
     opacity floor (--reveal-opacity-floor) keeps content perceivable and
     SEO-safe at all times. Elements are never fully invisible.

   NO-JS FALLBACK
     The html.js class is added by a tiny inline <script> before <body>.
     Without it, none of these rules apply — everything is fully visible.

   ACCESSIBILITY
     prefers-reduced-motion kills all transitions and shows content immediately.
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --reveal-duration:      900ms;
  --reveal-ease:          cubic-bezier(0.22, 1, 0.36, 1); /* ≈ easeOutQuint   */
  --reveal-distance:      28px;    /* vertical travel in the default variant   */
  --reveal-blur:          4px;     /* softened-state blur amount               */
  --reveal-opacity-floor: 0.12;   /* never fully hidden — progressive disclosure */
  --reveal-stagger:       80ms;   /* delay step between siblings in a group   */
}

/* ── AEM pre-paint state ────────────────────────────────────────────────────
   The reference file authors .reveal directly in the HTML. AEM cannot do that
   here, so these rendered-component selectors establish the same softened
   state before the footer JavaScript runs. When scripting is disabled the
   block does not apply, preserving the fully-visible no-JS fallback.         */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  :is(
    #poiner-in-breast-cancer.cmp-teaser .cmp-teaser__pretitle,
    #poiner-in-breast-cancer.cmp-teaser .cmp-teaser__subtitle,
    #poiner-in-breast-cancer.cmp-teaser .cmp-teaser__description,
    #poiner-in-breast-cancer.cmp-teaser .cmp-teaser__action-container,
    #qa-section .azcl-column-par1,
    #qa-section .azcl-column-par2,
    #united-states-section #us-head-text,
    #united-states-section #us-images-section .cmp-cards__advanced,
    #sun-card-section .cmp-cards__advanced--media,
    #sun-card-section .img-txt-sub-section-1,
    #sun-card-section .img-txt-sub-section-2,
    #sun-card-section .img-txt-sub-section-3,
    #sun-card-section .img-txt-sub-section-4,
    #az-all-logos-section #all-az-logos-txt,
    #az-all-logos-section .azpbc-main-heading,
    #az-all-logos-section .azpbc-treatment-block,
    #enhertu-datroway .cmp-cards__advanced,
    #truqap-lynparza .cmp-cards__advanced,
    #etcamah-card .cmp-cards__advanced
  ):not(#isi-section *) {
    opacity: var(--reveal-opacity-floor);
    transform: translateY(var(--reveal-distance));
    filter: blur(var(--reveal-blur));
    transition:
      opacity   var(--reveal-duration) var(--reveal-ease),
      transform var(--reveal-duration) var(--reveal-ease),
      filter    var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  :is(
    #poiner-in-breast-cancer.cmp-teaser .cmp-teaser__pretitle,
    #poiner-in-breast-cancer.cmp-teaser .cmp-teaser__subtitle,
    #poiner-in-breast-cancer.cmp-teaser .cmp-teaser__description,
    #poiner-in-breast-cancer.cmp-teaser .cmp-teaser__action-container,
    #qa-section .azcl-column-par1,
    #qa-section .azcl-column-par2,
    #united-states-section #us-head-text,
    #united-states-section #us-images-section .cmp-cards__advanced,
    #sun-card-section .cmp-cards__advanced--media,
    #sun-card-section .img-txt-sub-section-1,
    #sun-card-section .img-txt-sub-section-2,
    #sun-card-section .img-txt-sub-section-3,
    #sun-card-section .img-txt-sub-section-4,
    #az-all-logos-section #all-az-logos-txt,
    #az-all-logos-section .azpbc-main-heading,
    #az-all-logos-section .azpbc-treatment-block,
    #enhertu-datroway .cmp-cards__advanced,
    #truqap-lynparza .cmp-cards__advanced,
    #etcamah-card .cmp-cards__advanced
  ).is-revealed:not(#isi-section *) {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ── Hidden (softened) state ────────────────────────────────────────────────
   Gated on html.js so no-JS visitors always see fully visible content.      */
html.js .reveal {
  opacity:    var(--reveal-opacity-floor);
  transform:  translateY(var(--reveal-distance));
  filter:     blur(var(--reveal-blur));
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter    var(--reveal-duration) var(--reveal-ease);

  /* Per-element stagger delay — set as inline CSS var by JS for grouped
     elements; defaults to 0ms for standalone elements.                      */
  transition-delay: var(--reveal-delay, 0ms);
}

/* ── Revealed (full clarity) state ─────────────────────────────────────────
   JS adds .is-revealed when the element crosses the IntersectionObserver
   threshold. CSS does all the motion from here.                             */
html.js .reveal.is-revealed {
  opacity:   1;
  transform: none;
  filter: blur(0);
}

/* Regulatory and required-reference content must never be softened. This is
   a CSS safeguard; JS also removes stale reveal classes from these regions. */
html.js #isi-section .reveal,
html.js #reference-section.reveal,
html.js #reference-section .reveal,
html.js footer.reveal,
html.js footer .reveal,
html.js .legal.reveal,
html.js [data-no-reveal].reveal,
html.js [data-no-reveal] .reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ── Accessibility ──────────────────────────────────────────────────────────
   Users who prefer reduced motion see content immediately — no transitions,
   no blur, no translate. The .is-revealed class is still added by JS but
   the transition is suppressed here.                                        */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity:    1;
    transform:  none;
    filter:     none;
    transition: none;
  }
}





/*badge animation*/


/* ===== CSS VARIABLES ===== */
:root {
  --brand-yellow: #F0AB00;
  --brand-blue: #0600D3;
  --brand-purple: #55005F;
  --brand-lavender: #D16DFF;
  --gradient-shadow: linear-gradient(
    45deg,
    var(--brand-yellow),
    var(--brand-blue),
    var(--brand-purple),
    var(--brand-lavender),
    var(--brand-yellow),
    var(--brand-blue),
    var(--brand-purple),
    var(--brand-lavender)
  );

  /* Fluid badge size: 180px at 576px → 300px at 1440px */
  --badge-size: clamp(180px, 15vw + 60px, 300px);
  --ring-size: calc(var(--badge-size) - 20px);
  --ring-offset: calc((var(--ring-size) - var(--badge-size)) / 2);
}

/* ── BADGE IMAGE ── */
#breast-franchise  .bcam-badge {
  position: absolute;
  bottom: 10%;
  left: 74%;
  transform: translateY(-20%);
  width: var(--badge-size);
  height: var(--badge-size);
  /* border-radius: 2000px; */
  background: url("/content/dam/intelligentcontent/multibrand/pioneersinbreastcancer/us/en/images/desktop/breast-cancer-awaerness-round.png") no-repeat center;
  background-size: 100%;
  z-index: 2;
  max-width:305px;
  width:100%;
}

/* ── GRADIENT BORDER RING (::before) ── */
#breast-franchise #poiner-in-breast-cancer .cmp-teaser__content::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 74%;
  transform: translateY(-20%);
  width: var(--ring-size);
  height: var(--ring-size);
  margin-top: calc(-1 * var(--ring-offset));
  margin-left: calc(-1 * var(--ring-offset));
  border-radius: 2000px;
  background: var(--gradient-shadow);
  background-size: 400%;
  z-index: 1;
  animation: bcam-gradient-rotate 20s linear infinite;
}

/* ── BLURRED GLOW (::after) ── */
#breast-franchise #poiner-in-breast-cancer .cmp-teaser__content::after {
  content: "";
  position: absolute;
  top: 75%;
  left: calc(75% - 10px);
  transform: translateY(-50%) scale(1.25);
  width: var(--ring-size);
  height: var(--ring-size);
  margin-top: calc(-1 * var(--ring-offset));
  margin-left: calc(-1 * var(--ring-offset));
  border-radius: 2000px;
  background: var(--gradient-shadow);
  background-size: 400%;
  z-index: 0;
  filter: blur(20px);
  animation: bcam-gradient-rotate 20s linear infinite;
  /* Safari clips filter: blur() to the rectangular border box, not to
     border-radius, so this glow shows square corners (Chrome/Edge are fine).
     Feather the shape with a radial mask instead of relying on the rounded
     clip - works in every engine and keeps the soft edge. */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 60%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 60%, transparent 100%);
}

/* ── KEYFRAMES ── */
@keyframes bcam-gradient-rotate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 300% 0;
  }
  100% {
    background-position: 0 0;
  }
}




/* ── Force scrollbar back on indication cards ── */
#breast-franchise #enhertu-datroway #enhertu-card .en-indication-card,
#breast-franchise #enhertu-datroway #datroway-card .dw-indication-card,
#breast-franchise #enhertu-datroway #truqap-card .tq-indication-card,
#breast-franchise #enhertu-datroway #lynparza-card .lp-indication-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 300px !important;
}

/* ── Force scrollbar back on important cards ── */
#breast-franchise #enhertu-datroway #enhertu-card .en-important-card,
#breast-franchise #enhertu-datroway #datroway-card .dw-important-card,
#breast-franchise #enhertu-datroway #truqap-card .tq-important-card,
#breast-franchise #enhertu-datroway #lynparza-card .lp-important-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 339px !important;
}

/* ── Hide arrow buttons ── */
#breast-franchise #enhertu-datroway #enhertu-card .en-indication-card::-webkit-scrollbar-button,
#breast-franchise #enhertu-datroway #enhertu-card .en-important-card::-webkit-scrollbar-button,
#breast-franchise #enhertu-datroway #datroway-card .dw-indication-card::-webkit-scrollbar-button,
#breast-franchise #enhertu-datroway #datroway-card .dw-important-card::-webkit-scrollbar-button,
#breast-franchise #enhertu-datroway #truqap-card .tq-indication-card::-webkit-scrollbar-button,
#breast-franchise #enhertu-datroway #truqap-card .tq-important-card::-webkit-scrollbar-button,
#breast-franchise #enhertu-datroway #lynparza-card .lp-indication-card::-webkit-scrollbar-button,
#breast-franchise #enhertu-datroway #lynparza-card .lp-important-card::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* ── Scrollbar width ── */
#breast-franchise #enhertu-datroway #enhertu-card .en-indication-card::-webkit-scrollbar,
#breast-franchise #enhertu-datroway #enhertu-card .en-important-card::-webkit-scrollbar,
#breast-franchise #enhertu-datroway #datroway-card .dw-indication-card::-webkit-scrollbar,
#breast-franchise #enhertu-datroway #datroway-card .dw-important-card::-webkit-scrollbar,
#breast-franchise #enhertu-datroway #truqap-card .tq-indication-card::-webkit-scrollbar,
#breast-franchise #enhertu-datroway #truqap-card .tq-important-card::-webkit-scrollbar,
#breast-franchise #enhertu-datroway #lynparza-card .lp-indication-card::-webkit-scrollbar,
#breast-franchise #enhertu-datroway #lynparza-card .lp-important-card::-webkit-scrollbar { width: 6px }

/* ── Track (all same) ── */
#breast-franchise #enhertu-datroway #enhertu-card .en-indication-card::-webkit-scrollbar-track,
#breast-franchise #enhertu-datroway #enhertu-card .en-important-card::-webkit-scrollbar-track,
#breast-franchise #enhertu-datroway #datroway-card .dw-indication-card::-webkit-scrollbar-track,
#breast-franchise #enhertu-datroway #datroway-card .dw-important-card::-webkit-scrollbar-track,
#breast-franchise #enhertu-datroway #truqap-card .tq-indication-card::-webkit-scrollbar-track,
#breast-franchise #enhertu-datroway #truqap-card .tq-important-card::-webkit-scrollbar-track,
#breast-franchise #enhertu-datroway #lynparza-card .lp-indication-card::-webkit-scrollbar-track,
#breast-franchise #enhertu-datroway #lynparza-card .lp-important-card::-webkit-scrollbar-track { background:#f3f3f3 }

/* ── Thumb radius (all same) ── */
#breast-franchise #enhertu-datroway #enhertu-card .en-indication-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #enhertu-card .en-important-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #datroway-card .dw-indication-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #datroway-card .dw-important-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #truqap-card .tq-indication-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #truqap-card .tq-important-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #lynparza-card .lp-indication-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #lynparza-card .lp-important-card::-webkit-scrollbar-thumb { border-radius:3px; min-height:40px }

/* ── Per brand thumb colors ── */
#breast-franchise #enhertu-datroway #enhertu-card .en-indication-card,
#breast-franchise #enhertu-datroway #enhertu-card .en-important-card { scrollbar-color:#EA721F #f3f3f3; scrollbar-width:thin }
#breast-franchise #enhertu-datroway #enhertu-card .en-indication-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #enhertu-card .en-important-card::-webkit-scrollbar-thumb { background:#EA721F }

#breast-franchise #enhertu-datroway #datroway-card .dw-indication-card,
#breast-franchise #enhertu-datroway #datroway-card .dw-important-card { scrollbar-color:#1E22AA #f3f3f3; scrollbar-width:thin }
#breast-franchise #enhertu-datroway #datroway-card .dw-indication-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #datroway-card .dw-important-card::-webkit-scrollbar-thumb { background:#1E22AA }

#breast-franchise #enhertu-datroway #truqap-card .tq-indication-card,
#breast-franchise #enhertu-datroway #truqap-card .tq-important-card { scrollbar-color:#250E62 #f3f3f3; scrollbar-width:thin }
#breast-franchise #enhertu-datroway #truqap-card .tq-indication-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #truqap-card .tq-important-card::-webkit-scrollbar-thumb { background:#250E62 }

#breast-franchise #enhertu-datroway #lynparza-card .lp-indication-card,
#breast-franchise #enhertu-datroway #lynparza-card .lp-important-card { scrollbar-color:#004D74 #f3f3f3; scrollbar-width:thin }
#breast-franchise #enhertu-datroway #lynparza-card .lp-indication-card::-webkit-scrollbar-thumb,
#breast-franchise #enhertu-datroway #lynparza-card .lp-important-card::-webkit-scrollbar-thumb { background:#004D74 }

@media (max-width: 992px) {
  #breast-franchise #badge-wrapper .bcam-badge::before {
    content: "" !important;          
    position: absolute;
    inset: 7px;                    
    border-radius: 50%;
    background: var(--gradient-shadow);
    background-size: 400%;
    z-index: 1;
    animation: bcam-gradient-rotate 20s linear infinite;
    -webkit-mask: radial-gradient(
      circle closest-side,
      transparent calc(100% - 5px),
      #000       calc(100% - 5px)
    );
    mask: radial-gradient(
      circle closest-side,
      transparent calc(100% - 5px),
      #000       calc(100% - 5px)
    );
  }
}
























.pbc-back-to-top {
  position: fixed;
  bottom: 30px;
  right: 5px;
  z-index: 999;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: block;
  box-shadow: 0px 3px 16px 0px #00000033;
  cursor: pointer;
  text-decoration: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index:999999999999999999999999;
}

.pbc-back-to-top__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  transition: opacity 0.2s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pbc-back-to-top__icon--default {
  opacity: 1;
}

.pbc-back-to-top__icon--hover {
  opacity: 0;
}

.pbc-back-to-top:hover .pbc-back-to-top__icon--default {
  opacity: 0;
}

.pbc-back-to-top:hover .pbc-back-to-top__icon--hover {
  opacity: 1;
}



/*rapid response tickt to remove the animation and badch*/

#breast-franchise #poiner-in-breast-cancer .cmp-teaser__content::after{
    display:none;
}
#breast-franchise #poiner-in-breast-cancer .cmp-teaser__content::before{
    display:none;
}