@import url('https://fonts.googleapis.com/css2?family=Arya:wght@400;700&family=Bigshot+One&family=Gravitas+One&family=Playwrite+US+Modern:wght@100..400&display=swap');


  /* use Arya everywhere */
:root { --site-font: 'Arya', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

html { scroll-behavior: smooth; }

body, html, input, button, textarea, select, a, p, h1, h2, h3, h4, h5, h6, span, div {
  font-family: var(--site-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


  /* general smoothing */
  .card-smooth {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }

  /* container constraints: never exceed viewport minus breathing room */
  #carousel {
    transition: width 360ms cubic-bezier(.2, .9, .2, 1), height 360ms cubic-bezier(.2, .9, .2, 1);
    perspective: 1000px;
    max-height: calc(100vh - 56px);
    /* breathing room to avoid bottom crop */
  }

  .card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    will-change: transform, filter, opacity;
    border-radius: 12px;
    overflow: visible;
  }

  .card-inner {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.28);
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 360ms cubic-bezier(.2, .9, .2, 1), -webkit-mask-image 360ms, mask-image 360ms;
  }

  /* image: preserve full image, no crop */
  .card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* do not crop; scale down proportionally */
    background: #fff;
    transition: filter 360ms cubic-bezier(.2, .9, .2, 1);
  }

  .card-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #071a3a;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  /* Taper effect: vertical mask + inner squeeze + muted look for side cards */
  .card-inner.taper {
    will-change: transform, -webkit-mask-image, mask-image;
  }

  .card-inner.taper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0));
    background: transparent;
  }

  .card-inner.taper .card-img {
    filter: brightness(.88);
  }

  /* front (active) card: ensure pointer events and crispness */
  [data-front="true"] {
    pointer-events: auto;
  }

  [data-front="false"] {
    pointer-events: none;
  }

  /* responsive safety */
  @media (max-height:420px) {
    #carousel {
      max-height: calc(100vh - 32px);
    }
  }


  /* How to Style  */

  .how-pill,
  .how-arrow {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Optional: ensure texts start invisible for clean animation */
  #how h3,
  #how p,
  .how-img {
    opacity: 0;
    transform: translateY(10px);
  }