@charset "utf-8";
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); */
@font-face {
  font-family: "MyriadPro";
  src: url("../fonts/MyriadPro-Semibold.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "MyriadPro";
  src: url("../fonts/MyriadPro-Bold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "MyriadPro";
  src: url("../fonts/MyriadPro-Black.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
:root {
  --md-text-primary: #5e0f2e;
  --md-accent: #c22f5b;
  --md-bg-fallback: #faede7;
  --md-accent-deep: #9a1d47;
  --color-pink: #d3145a;
  --color-maroon: #67012e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  /*height: 100%;*/
  margin: 0;
  overscroll-behavior-y: contain; /* Prevent pull-to-refresh on Chrome/Android */
}

body {
  font-family: "MyriadPro", Arial, Helvetica, sans-serif;
  /* font-family: "Roboto", sans-serif; */
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: var(--md-bg-fallback);
}

body.is-dragging {
  -webkit-user-select: none;
  user-select: none;
}

/* --- Circle of support experience --- */
.experience {
  position: relative;
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content-block {
  min-height: 600px;
width: 100%;
position: relative;
}


.experience__bg {
  position: absolute;
  inset: 0;
  background: url("../assets/main-bg.png") center / cover no-repeat;
  /* transform: scale(1.02); */
  background-size: contain;
}

.experience__inner {
  /* position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: max(env(safe-area-inset-top), 12px) clamp(14px, 4vw, 22px)
    max(env(safe-area-inset-bottom), 16px); */
    position: absolute;
    z-index: 1;
    min-height: 100%;
    padding: max(env(safe-area-inset-top), 12px) clamp(14px, 4vw, 22px) max(env(safe-area-inset-bottom), 16px);
    width: 100%;
    left: 0;
    top: 0;
}

.copy-block {
  position: relative;
  z-index: 2;
  max-width: 22rem;
  margin-right: auto;
}

.tagline {
  color: var(--md-text-primary);
  font-weight: 700;
  font-size: clamp(0.95rem, 4.4vw, 1.18rem);
  line-height: 1.34;
  text-align: left;
  letter-spacing: 0.02em;
  white-space: pre-line;
  min-height: 5.5em;
}

.campaign-line {
  margin-top: 0.85rem;
  color: var(--md-accent);
  font-weight: 900;
  font-size: clamp(0.68rem, 3.1vw, 0.88rem);
  line-height: 1.22;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.campaign-line.is-visible {
  visibility: visible;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}
#final-result {
  object-fit: contain;
  z-index: 20;
}

.reload-btn {
  position: absolute;
  right: max(env(safe-area-inset-right), 14px);
  bottom: max(env(safe-area-inset-bottom), 14px);
  z-index: 30;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(94, 15, 46, 0.72);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.reload-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.spot {
  position: absolute;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 10;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  letter-spacing: 0.02em;
}
.spot.show {
  opacity: 1;
  visibility: visible;
}

.spot#spot1 {
  left: 2%;
  top: 11%;
  font-size: 13px;
  transform: rotate(-30deg);
}
.spot#spot2 {
  left: auto;
  right: 18%;
  top: 12%;
  font-size: 12px;
  transform: rotate(30deg);
  width: 80px;
}
.spot#spot3 {
  left: auto;
  right: 2%;
  top: 28%;
  transform: rotate(0deg);
}
.spot#spot4 {
  left: 1.5%;
  top: 36%;
  transform: rotate(-20deg);
}
.spot#spot5 {
  left: auto;
  right: 3%;
  top: 47%;
  transform: rotate(-6deg);
  font-size: 12px;
  width: 85px;
}

.tagline-block {
  position: absolute;
  width: 165px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;

}
.tagline-block.active {
  opacity: 1;
  visibility: visible;
}
.tagline-block strong {
  font-weight: 800;
}
.tagline-block .line1 {
  color: var(--color-pink);
  font-weight: 800;
}
.tagline-block .line2 {
  color: var(--color-maroon);
}

/* GSAP split-text (DIY) */
.tagline-block .split-word {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
}
.tagline-block#block1 {
  top: 17%;
  left: 22%;
  z-index: 3;
}
.tagline-block#block2 {
  top: 18%;
  left: 22%;
  z-index: 2;
}
.tagline-block#block3 {
  top: 17%;
  left: 22%;
  z-index: 1;
}

.drag-area {
  max-width: 100%;
    aspect-ratio: 1;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 10%;
}

/* .stage {
  position: relative;
  flex: 1;
  margin-top: 4px;
  min-height: min(74vh, 640px);
} */

.ring-svg {
  position: absolute;
  left: 50%;
  top: clamp(52%, 42vh + 56px, 58%);
  width: min(98vmin, 500px);
  max-width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(194, 47, 91, 0.16));
  opacity: 0;
  visibility: hidden;
}

.ring-svg.show {
  opacity: 1;
  visibility: visible;
}

.ring-svg.ring--complete .ring-svg__track {
  filter: brightness(1.05);
}

.hearts-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hearts-layer article {
  margin: 0;
}

.heart-item {
  position: absolute;
  pointer-events: auto;
  width: clamp(118px, 32vw, 152px);
  /* padding-top: clamp(26px, 7vh, 44px); */
  transform-origin: center 60%;
}

.heart-item__cord {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  width: clamp(2px, 0.6vw, 3px);
  height: clamp(28px, 8vh, 48px);
  margin-left: -1px;
  background: linear-gradient(
    180deg,
    var(--md-accent) 0%,
    var(--md-accent-deep) 100%
  );
  border-radius: 2px;
  pointer-events: none;
}

.heart-item__cord--short {
  height: clamp(22px, 6.5vh, 36px);
}

.heart-item__cord--long {
  height: clamp(34px, 9vh, 52px);
}

.heart-item__cord--longer {
  height: clamp(38px, 10vh, 56px);
}

.heart-drag {
  position: relative;
  cursor: grab;
  touch-action: manipulation;
}

.heart-drag:active {
  cursor: grabbing;
}

/* Text sits on the crochet hearts from the artwork — no oval / pill backdrop. */
.heart-shape {
  position: relative;
  box-sizing: border-box;
  min-height: clamp(62px, 18vw, 84px);
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.heart-shape--soft,
.heart-shape--accent {
  background: none;
  box-shadow: none;
}

.heart-label {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(0.62rem, 2.9vw, 0.78rem);
  line-height: 1.15;
  text-shadow:
    0 1px 2px rgba(30, 0, 14, 0.65),
    0 0 10px rgba(30, 0, 14, 0.28);
  padding: 0 2px;
}

.heart-shape--accent .heart-label {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(0, 0, 0, 0.35);
}

.slot-tl {
  left: 6%;
  top: -8%;
  transform: translate(-50%, 0);
}

.slot-tr {
  left: auto;
  right: 25%;
  top: -8%;
  transform: translate(50%, 0);
}

.slot-ml {
  left: 8%;
  top: 22%;
  transform: translate(-50%, 0);
}

.slot-mr {
  left: auto;
  right: 8%;
  top: 10%;
  transform: translate(50%, 0);
}

.slot-br {
  left: auto;
  right: 10%;
  top: 35%;
  transform: translate(50%, 0);
}

@media screen and (min-width: 375px) {
  .content-block {
    min-height: 640px;
  }
  .spot#spot1{
    top: 12%;
  }
  .spot#spot2 {
    top: 13%;
  }
  .tagline-block {
    font-size: 19px;
  }
}

@media screen and (min-width: 381px) {
  .spot#spot1 {
    top: 10%;
    font-size: 14px;
  }
  .spot#spot2 {
    top: 11%;
    font-size: 13px;
  }
  .spot#spot3 {
    font-size: 14px;
    top: 27%;
  }
  .spot#spot4 {
    font-size: 14px;
    top: 35%;
  }
  .spot#spot5 {
    font-size: 13px;
    width: 95px;
    right: 2%;
  }
  .tagline-block {
    font-size: 20px;
  }
}

@media screen and (min-width: 410px) {
  .content-block {
      min-height: 700px;
  }
  .tagline-block {
    font-size: 22px;
    width: 180px;
    left: 23%;
  }
  .spot#spot1 {
    left: 3%;
    top: 10%;
    font-size: 15px;
  }
  .spot#spot2 {
    right: 18%;
    top: 11%;
    font-size: 15px;
    width: 90px;
  }
  .spot#spot3 {
    font-size: 15px;
    top: 27%;
    right: 3%;
  }
  .spot#spot4 {
    font-size: 15px;
    top: 35%;
    width: 90px;
  }
  .spot#spot5 {
    font-size: 14px;
    width: 100px;
    right: 3%;
  }
}

@media screen and (min-width: 480px) {
  .content-block {
      min-height: 700px;
      width: 430px;
  }
}

@media (min-width: 600px) {
  .content-block {
    min-height: 700px;
    width: 430px;
  }
  .copy-block {
    max-width: 26rem;
  }

  .tagline {
    font-size: 1.18rem;
  }

  .heart-label {
    font-size: 0.76rem;
  }

  .heart-item {
    width: clamp(134px, 24vw, 110px);
  }

  .ring-svg {
    width: min(82vmin, 520px);
  }
}

audio.audio-media {
  display: inline-block;
  height: 0.1px;
  width: 0.1px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
}