/* =========================================================
   TXT-ERS ACTIVITY CARD MOTION SYSTEM

   The activity remains inside the Try This Today card.
   Desktop: expands across the three-card row.
   Mobile: expands in place within the stacked layout.
   ========================================================= */


/* =========================================================
   CARD STRUCTURE
   ========================================================= */

.activity-card {
  position: relative;

  min-width: 0;

  perspective: 1800px;

  transform:
    translateZ(0);
}

.activity-card.is-expanded {
  grid-column: 1 / -1;

  z-index: 30;
}

.activity-card-frame {
  position: relative;

  width: 100%;
  min-width: 0;

  transform-style:
    preserve-3d;

  transform:
    rotateY(0deg)
    translateZ(0);

  transform-origin:
    center center;

  transition:
    height 420ms
      cubic-bezier(
        0.22,
        0.75,
        0.24,
        1
      ),

    transform 440ms
      cubic-bezier(
        0.2,
        0.72,
        0.2,
        1
      );

  will-change:
    height,
    transform;
}

.activity-card.is-open
  .activity-card-frame {
  transform:
    rotateY(180deg)
    translateZ(0);
}

.activity-card-face {
  position: absolute;

  inset:
    0
    auto
    auto
    0;

  width: 100%;
  min-width: 0;

  -webkit-backface-visibility:
    hidden;

  backface-visibility:
    hidden;

  transform-style:
    preserve-3d;

  box-sizing: border-box;
}

.activity-card-front {
  z-index: 2;

  transform:
    rotateY(0deg)
    translateZ(1px);
}

.activity-card-back {
  z-index: 1;

  min-height:
    min(
      740px,
      78vh
    );

  height:
    min(
      740px,
      78vh
    );

  display: flex;
  flex-direction: column;

  overflow: hidden;

  transform:
    rotateY(180deg)
    translateZ(1px);

  border:
    1px solid
    rgba(255, 255, 255, 0.96);

  border-radius: 25px;

  background:
    radial-gradient(
      circle at 9% 8%,
      rgba(220, 212, 246, 0.34),
      transparent 29%
    ),

    radial-gradient(
      circle at 92% 88%,
      rgba(239, 198, 172, 0.23),
      transparent 31%
    ),

    linear-gradient(
      145deg,
      rgba(255, 254, 252, 0.99),
      rgba(248, 247, 251, 0.99)
    );

  box-shadow:
    0 25px 68px
    rgba(28, 38, 60, 0.15);

  color: #0b2341;
}


/* =========================================================
   EXPANSION MOTION
   ========================================================= */

.activity-card {
  transition:
    grid-column 300ms ease,
    filter 220ms ease;
}

.activity-card.is-transitioning {
  pointer-events: none;
}

.activity-card.is-expanded {
  filter:
    drop-shadow(
      0 22px 34px
      rgba(30, 40, 61, 0.08)
    );
}

body.activity-card-open
  .core-card-grid
  > .core-card:not(
    .activity-card
  ) {
  opacity: 0.72;

  transform:
    scale(0.985);

  filter:
    saturate(0.82);

  transition:
    opacity 260ms ease,
    transform 320ms ease,
    filter 260ms ease;
}

body:not(.activity-card-open)
  .core-card-grid
  > .core-card {
  transition:
    opacity 260ms ease,
    transform 320ms ease,
    filter 260ms ease;
}


/* =========================================================
   BACK HEADER
   ========================================================= */

.activity-card-back-header {
  flex:
    0
    0
    auto;

  min-height: 76px;

  padding:
    18px
    21px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  border-bottom:
    1px solid
    rgba(32, 50, 77, 0.08);

  background:
    rgba(255, 255, 255, 0.58);

  -webkit-backdrop-filter:
    blur(16px);

  backdrop-filter:
    blur(16px);
}

.activity-card-back-heading {
  min-width: 0;
}

.activity-card-back-eyebrow {
  margin: 0;

  color: #397e6e;

  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.activity-card-back-title {
  margin: 7px 0 0;

  color: #0b2341;

  font-size:
    clamp(
      1.22rem,
      2.5vw,
      1.7rem
    );

  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.activity-card-back-close {
  min-width: 78px;
  min-height: 43px;

  padding:
    8px
    13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid
    rgba(26, 45, 71, 0.10);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.90);

  color: #213653;

  box-shadow:
    0 7px 18px
    rgba(30, 40, 63, 0.07);

  font: inherit;
  font-size: 0.71rem;
  font-weight: 770;

  cursor: pointer;

  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.activity-card-back-close:hover {
  transform:
    translateY(-1px);

  background: #ffffff;

  box-shadow:
    0 10px 24px
    rgba(30, 40, 63, 0.10);
}


/* =========================================================
   ACTIVITY BODY
   ========================================================= */

.activity-card-back-body {
  flex:
    1
    1
    auto;

  min-width: 0;
  min-height: 0;

  padding:
    21px;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(68, 86, 111, 0.22)
    transparent;
}

.activity-card-back-body::-webkit-scrollbar {
  width: 7px;
}

.activity-card-back-body::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(68, 86, 111, 0.20);
}


/* =========================================================
   BACK FOOTER
   ========================================================= */

.activity-card-back-footer {
  flex:
    0
    0
    auto;

  min-height: 73px;

  padding:
    13px
    21px
    17px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  border-top:
    1px solid
    rgba(32, 50, 77, 0.08);

  background:
    rgba(255, 255, 255, 0.72);

  -webkit-backdrop-filter:
    blur(15px);

  backdrop-filter:
    blur(15px);
}

.activity-card-reset,
.activity-card-done {
  min-height: 45px;

  padding:
    9px
    17px;

  border-radius: 13px;

  font: inherit;
  font-size: 0.73rem;
  font-weight: 790;

  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.activity-card-reset {
  border:
    1px solid
    rgba(81, 73, 148, 0.13);

  background:
    rgba(255, 255, 255, 0.91);

  color: #5f55a8;
}

.activity-card-done {
  min-width: 124px;

  border: 0;

  background:
    linear-gradient(
      135deg,
      #397e6e,
      #5b9c89
    );

  color: #ffffff;

  box-shadow:
    0 11px 24px
    rgba(50, 119, 98, 0.21);
}

.activity-card-reset:hover,
.activity-card-done:hover {
  transform:
    translateY(-1px);
}

.activity-card-done:hover {
  box-shadow:
    0 14px 30px
    rgba(50, 119, 98, 0.27);
}

.activity-card.is-complete
  .activity-card-done {
  background:
    linear-gradient(
      135deg,
      #6254ad,
      #8a79cf
    );
}


/* =========================================================
   COMPLETE BADGE
   ========================================================= */

.activity-card-complete-badge {
  margin-top: 11px;
  padding:
    9px
    11px;

  display: none;

  align-items: center;

  gap: 7px;

  border:
    1px solid
    rgba(62, 139, 94, 0.13);

  border-radius: 12px;

  background:
    rgba(234, 247, 239, 0.88);

  color: #35694a;

  font-size: 0.66rem;
  font-weight: 750;
}

.activity-card.is-complete
  .activity-card-complete-badge {
  display: flex;
}


/* =========================================================
   FOCUS
   ========================================================= */

.activity-card button:focus-visible {
  outline:
    3px solid
    rgba(101, 83, 184, 0.28);

  outline-offset: 3px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {
  .activity-card {
    perspective: 1400px;
  }

  .activity-card.is-expanded {
    grid-column: auto;
  }

  body.activity-card-open
    .core-card-grid
    > .core-card:not(
      .activity-card
    ) {
    opacity: 0.88;

    transform: none;

    filter:
      saturate(0.92);
  }

  .activity-card-back {
    min-height:
      min(
        720px,
        84vh
      );

    height:
      min(
        720px,
        84vh
      );

    border-radius: 21px;
  }

  .activity-card-back-header {
    min-height: 69px;

    padding:
      15px
      16px;
  }

  .activity-card-back-title {
    font-size: 1.18rem;
  }

  .activity-card-back-close {
    min-width: 68px;
    min-height: 40px;

    padding:
      7px
      11px;
  }

  .activity-card-back-body {
    padding:
      17px
      15px;
  }

  .activity-card-back-footer {
    min-height: 72px;

    padding:
      12px
      15px
      calc(
        14px +
        env(
          safe-area-inset-bottom
        )
      );
  }

  .activity-card-reset,
  .activity-card-done {
    min-height: 47px;
  }

  .activity-card-done {
    flex:
      1
      1
      auto;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .activity-card,
  .activity-card-frame,
  .core-card-grid
    > .core-card {
    transition: none !important;
  }

  .activity-card-frame,
  .activity-card.is-open
    .activity-card-frame {
    transform: none;
  }

  .activity-card-front {
    display: block;
  }

  .activity-card.is-open
    .activity-card-front {
    display: none;
  }

  .activity-card-back {
    display: none;

    transform: none;
  }

  .activity-card.is-open
    .activity-card-back {
    display: flex;
  }
}