/* =========================================================
   MEILE TAU — HOME SCREEN WIDGET CAROUSEL
   Izoliuotas stilius. Neliečia likusio puslapio.
========================================================= */

.widget-msgs {
  position: relative;
  overflow: hidden;
  padding: 76px 0 88px;
  background:
    linear-gradient(
      180deg,
      #fdf7fc 0%,
      #fbf2f8 100%
    );
  isolation: isolate;
}


/* ---------------------------------------------------------
   Dekoratyviniai glow fonai
--------------------------------------------------------- */

.widget-msgs::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(920px, 84vw);
  height: 430px;
  left: 50%;
  top: 57%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(146, 86, 255, .30) 0%,
      rgba(178, 92, 232, .22) 28%,
      rgba(233, 160, 216, .13) 52%,
      rgba(233, 160, 216, .05) 68%,
      transparent 80%
    );
  filter: blur(18px);
  pointer-events: none;
}

.widget-msgs::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(560px, 58vw);
  height: 240px;
  left: 50%;
  top: 57%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, .34) 0%,
      rgba(255, 255, 255, .12) 38%,
      transparent 72%
    );
  filter: blur(22px);
  pointer-events: none;
}


.widget-msgs-shell {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
   Plūduriuojančios širdelės
--------------------------------------------------------- */

.floating-hearts {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fh {
  position: absolute;
  color: rgba(146, 86, 255, .65);
  font-size: 30px;
  line-height: 1;
  will-change: transform, opacity;
  animation: fhFloat 7s ease-in-out infinite;
}

.fh-1 { left: 6%;  top: 22%; font-size: 34px; animation-duration: 8s;  animation-delay: 0s;   }
.fh-2 { left: 20%; top: 90%; font-size: 24px; animation-duration: 6.5s; animation-delay: 1.2s; color: rgba(212, 83, 126, .6); }
.fh-3 { left: 46%; top: 25%; font-size: 22px; animation-duration: 7.5s; animation-delay: 2.4s; }
.fh-4 { right: 10%; top: 30%; font-size: 32px; animation-duration: 9s;  animation-delay: .8s;  color: rgba(212, 83, 126, .55); }
.fh-5 { right: 22%; top: 90%; font-size: 23px; animation-duration: 6s;  animation-delay: 3s;   color: rgba(212, 83, 126, .6); }
.fh-6 { right: 4%;  top: 50%; font-size: 29px; animation-duration: 8.5s; animation-delay: 1.8s; color: rgba(212, 83, 126, .6); }

@keyframes fhFloat {
  0%   { transform: translateY(0)    rotate(0deg);   opacity: .7; }
  50%  { transform: translateY(-22px) rotate(6deg);  opacity: 1;  }
  100% { transform: translateY(0)    rotate(0deg);   opacity: .7; }
}
}

@media (max-width: 700px) {
  .fh-3, .fh-6 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fh { animation: none; opacity: .6; }
}


/* ---------------------------------------------------------
   Antraštė
--------------------------------------------------------- */

.widget-msgs-heading {
  max-width: 800px;
  margin: 0 auto 28px;
  text-align: center;
}

.widget-msgs .widget-msgs-heading .kicker {
  margin-bottom: 12px;
}

.widget-msgs-title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #28133e;
}

.widget-msgs-subtitle {
  max-width: 650px;
  margin: 14px auto 0;
  color: #756780;
  font-size: 15px;
  line-height: 1.65;
}


/* ---------------------------------------------------------
   Rankraštiniai užrašai
--------------------------------------------------------- */

.widget-msgs-note {
  position: absolute;
  z-index: 1;
  margin: 0;

  font-family: "Caveat", cursive;
  font-size: 27px;
  line-height: 1.02;
  font-weight: 500;

  color: #8048dd;

  pointer-events: none;
}

.widget-msgs-note-top {
  right: 0;
  top: 4px;
  text-align: right;
  transform: rotate(-5deg);
}

.widget-msgs-note-left {
  left: -8px;
  bottom: 12px;
  transform: rotate(-4deg);
}

.widget-msgs-note-bottom {
  right: 5px;
  bottom: 7px;
  text-align: right;
  transform: rotate(-4deg);
}


/* =========================================================
   CAROUSEL
========================================================= */

.wc-carousel {
  position: relative;
  display: grid;

  grid-template-columns:
    62px
    minmax(0, 1fr)
    62px;

  align-items: center;
  gap: 8px;

  width: 100%;
  margin-top: 8px;
}


/* ---------------------------------------------------------
   Matoma karuselės zona
--------------------------------------------------------- */

.wc-viewport {
  position: relative;
  overflow: hidden;

  padding:
    38px
    12px
    42px;
}


/* ---------------------------------------------------------
   Judanti juosta
--------------------------------------------------------- */

.wc-track {
  display: flex;
  align-items: center;

  gap: 18px;

  will-change: transform;

  transition:
    transform .55s
    cubic-bezier(.22, .8, .25, 1);
}


/* ---------------------------------------------------------
   Vienas slide
--------------------------------------------------------- */

.wc-slide {
  flex:
    0 0
    calc((100% - 72px) / 5);

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

  opacity: .42;

  transform: scale(.80);

  transition:
    transform .42s ease,
    opacity .42s ease,
    filter .42s ease;
}


.wc-slide.is-near {
  opacity: .82;
  transform: scale(.91);
}


.wc-slide.is-active {
  position: relative;
  z-index: 5;

  opacity: 1;

  transform: scale(1.09);
}


/* =========================================================
   TELEFONO KORTELĖ
========================================================= */

.wc-phone {
  position: relative;

  width: 100%;
  max-width: 235px;

  overflow: hidden;

  border-radius: 28px;

  background: #09070d;

  border: 4px solid rgba(93, 60, 120, .30);

  box-shadow:
    0 18px 38px rgba(47, 20, 68, .14);

  transition:
    border-color .4s ease,
    box-shadow .4s ease;
}


/* Aktyvus telefonas */

.wc-slide.is-active .wc-phone {
  border-color: rgba(156, 93, 255, .66);

  box-shadow:
    0 28px 58px rgba(70, 30, 105, .25),
    0 0 0 5px rgba(166, 108, 255, .08);
}


/* Ekrano nuotrauka */

.wc-phone img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 9 / 16;

  object-fit: cover;
}


/* ---------------------------------------------------------
   Šoniniai telefonai šiek tiek blankesni
--------------------------------------------------------- */

.wc-slide:not(.is-active):not(.is-near) .wc-phone {
  filter: saturate(.72);
}


/* =========================================================
   RODYKLĖS
========================================================= */

.wc-arrow {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  justify-self: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #2c123f,
      #452064
    );

  box-shadow:
    0 13px 28px
    rgba(45, 18, 69, .18);

  cursor: pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.wc-arrow:hover {
  transform: translateY(-2px);

  box-shadow:
    0 17px 34px
    rgba(45, 18, 69, .25);
}


.wc-arrow svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke: currentColor;
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   PAGINATION DOTS
========================================================= */

.wc-dots {
  position: relative;
  z-index: 5;

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

  gap: 8px;

  min-height: 15px;

  margin-top: 1px;
}


.wc-dot {
  width: 9px;
  height: 9px;

  padding: 0;

  border: 0;
  border-radius: 999px;

  background: #9678c4;

  cursor: pointer;

  transition:
    width .25s ease,
    background .25s ease,
    opacity .25s ease;
}


.wc-dot.is-active {
  width: 29px;

  background:
    linear-gradient(
      90deg,
      #7540df,
      #a865ff
    );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .wc-slide {
    flex:
      0 0
      calc((100% - 36px) / 3);
  }

  .wc-phone {
    max-width: 240px;
  }

  .widget-msgs-note {
    display: none;
  }

}


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

@media (max-width: 700px) {

  .widget-msgs {
    padding:
      54px 0
      65px;
  }

  .widget-msgs-heading {
    margin-bottom: 15px;
  }

  .widget-msgs-title {
    font-size: 37px;
  }

  .widget-msgs-subtitle {
    font-size: 14px;
  }


  .wc-carousel {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      42px;

    gap: 2px;
  }


  .wc-arrow {
    width: 40px;
    height: 40px;
  }


  .wc-arrow svg {
    width: 19px;
    height: 19px;
  }


  .wc-viewport {
    padding:
      22px
      4px
      28px;
  }


  .wc-track {
    gap: 12px;
  }


  .wc-slide {
    flex: 0 0 82%;

    opacity: .42;

    transform: scale(.86);
  }


  .wc-slide.is-near {
    opacity: .68;
    transform: scale(.91);
  }


  .wc-slide.is-active {
    transform: scale(1);
  }


  .wc-phone {
    max-width: 260px;
  }

}