/* ==========================================================================
   what's inside — desktop: a quiet, editorial divided list. mobile: three
   scattered bubbles you tap to reveal — no popup, the bubble itself
   slides aside and the copy fills the space it left behind.
   ========================================================================== */

.inside {
  position: relative;
  z-index: 2;
  background: var(--hero-bg, #eef2e9);
  padding: clamp(3.5rem, 10vw, 6rem) clamp(1.1rem, 6vw, 3rem) clamp(4rem, 10vw, 7rem);
}

.inside__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
}

/* the magnifier lens is a desktop-only extra — hidden by default so
   its duplicated text copy doesn't render as a second, visible block
   on mobile (where the whole feature is enabled inside the desktop
   media query below instead) */
.inside__magnifier {
  display: none;
}

/* two tiny empty bubbles that float near the middle icon — desktop
   only, hidden here by default */
.inside__tiny-bubble {
  display: none;
}

/* -- ambient decoration: same scattered dot/ring language as the hero
   halo, sized down and spread around the edges so the section doesn't
   feel empty beside the narrow centered content column. Clipped to
   itself (not the whole section) so the negative-offset rings don't
   cause horizontal scroll — this must NOT be on `.inside` itself,
   since the desktop icon bubbles live in `.inside__inner` (a sibling)
   and are absolutely positioned, so they add no height to the section;
   clipping at the section level was cutting the lower bubbles off. -- */

.inside__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.inside__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--hero-green-accent);
}

.inside__dot--1 { top: 8%;   left: 6%;   width: 10px; height: 10px; opacity: 0.35; }
.inside__dot--2 { top: 20%;  right: 9%;  width: 6px;  height: 6px;  opacity: 0.5; }
.inside__dot--3 { bottom: 16%; left: 11%; width: 7px; height: 7px;  opacity: 0.4; }
.inside__dot--4 { bottom: 28%; right: 6%; width: 12px; height: 12px; opacity: 0.28; }
.inside__dot--5 { top: 48%;  left: 3%;   width: 5px;  height: 5px;  opacity: 0.5; }

.inside__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(40, 104, 71, 0.16);
}

.inside__ring--1 {
  top: -60px;
  right: -80px;
  width: 240px;
  height: 240px;
}

.inside__ring--2 {
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  border-color: rgba(40, 104, 71, 0.12);
}

@media (min-width: 1024px) {
  .inside__dot--1 { left: 10%; }
  .inside__dot--2 { right: 14%; }
  .inside__dot--4 { right: 12%; }
  .inside__ring--1 { width: 320px; height: 320px; }
  .inside__ring--2 { width: 380px; height: 380px; }
}

.inside__heading {
  margin: 0 0 clamp(2.5rem, 7vw, 3.5rem);
}

.inside__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hero-green-accent);
  margin-bottom: 0.9rem;
}

.inside__title {
  margin: 0 0 1rem;
  font-family: var(--hero-font);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hero-ink);
}

.inside__lead {
  margin: 0;
  max-width: 32rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hero-body);
}

/* -- desktop divided list -- */

.inside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.inside__item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(40, 104, 71, 0.14);
}

.inside__item:first-child {
  border-top: none;
  padding-top: 0;
}

.inside__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(40, 104, 71, 0.1);
  box-shadow: 0 10px 22px -14px rgba(32, 45, 41, 0.4);
}

.inside__icon picture,
.inside__icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.inside__item-copy h3 {
  margin: 0 0 0.4rem;
  font-family: var(--hero-font);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--hero-ink);
}

.inside__item-copy p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--hero-body);
}

/* -- mobile bubbles -- */

.inside-mobile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 8vw, 3rem);
}

.inside-mobile__row {
  position: relative;
  height: 112px;
}

/* -- "tap" hint: taken clean out of the flex flow (position:absolute)
   so it never adds its own row/gap to the layout — the spacing between
   row 1, row 2 and row 3 stays identical whether the hint is visible or
   not. It just floats in the empty space beside bubble 1 / above bubble
   2, visible only while every bubble is closed. -- */
.inside-mobile__hint {
  position: absolute;
  top: 112px;
  right: 10%;
  transform: translateY(-95%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.inside-mobile__hint-item--2 .inside-mobile__hint-text {
  animation-delay: 1.4s;
}

/* the tap gesture itself: a finger that physically presses down and
   releases, with ripple rings pulsing outward right at the moment of
   contact — like an app's onboarding "tap here" tutorial gif. Runs on
   its own clock, completely independent of the "Tap" label below it. */
.inside-mobile__hint-tap {
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inside-mobile__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--hero-green-accent);
  opacity: 0;
  animation: inside-tap-ripple 2.1s ease-out infinite;
}

.inside-mobile__ripple--1 {
  animation-delay: 0.15s;
}

.inside-mobile__ripple--2 {
  animation-delay: 0.5s;
}

.inside-mobile__hint-finger {
  position: relative;
  z-index: 1;
  font-size: 1.6rem;
  color: var(--hero-green-accent);
  transform-origin: 75% 15%;
  animation: inside-finger-tap 2.1s ease-in-out infinite;
}

/* down-press, hold, release, long pause before the next tap */
@keyframes inside-finger-tap {
  0%, 62%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  8% {
    transform: translate(-2px, 8px) rotate(-6deg) scale(0.9);
  }
  18% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* rings expand outward from the fingertip and fade, timed to start
   right as the finger makes contact (~8% into its own cycle) */
@keyframes inside-tap-ripple {
  0% {
    transform: scale(0.35);
    opacity: 0.55;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* the "Tap" label pops in/out on a different-length loop than the tap
   gesture above, so the two visibly drift out of sync rather than
   ticking together */
.inside-mobile__hint-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-green-accent);
  animation: inside-hint-pop 3.1s ease-in-out infinite;
}

/* the second "Tap" pops on its own offset timing, so the two labels
   pop in and out independently rather than in lockstep */
.inside-mobile__hint-text--2 {
  animation-delay: 1.5s;
}

@keyframes inside-hint-pop {
  0%, 100% {
    opacity: 0;
    transform: scale(0.6) translateY(8px);
  }
  20%, 38% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  55% {
    opacity: 0;
    transform: scale(0.75) translateY(-6px);
  }
}

/* once any bubble has been opened, the hint has done its job */
.inside-mobile.has-opened .inside-mobile__hint {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .inside-mobile__hint-finger,
  .inside-mobile__hint-text,
  .inside-mobile__ripple {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .inside-mobile__ripple {
    display: none;
  }
}

.inside-mobile__bubble {
  position: absolute;
  top: 0;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* a soft, glassy sheen — light catching the upper-left of a floating
     bubble — rather than a flat tinted circle. The image sits centered
     inside like an icon, not filling the bubble. */
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 70% 78%, rgba(40, 104, 71, 0.14) 0%, rgba(40, 104, 71, 0.05) 60%),
    rgba(255, 255, 255, 0.55);
  box-shadow:
    0 18px 30px -16px rgba(32, 45, 41, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 1;
  /* the gentle up/down drift is a separate animation from the click
     slide (which transitions `left`) so the two never fight — one
     moves the bubble across the row, the other just bobs it in place */
  animation: inside-bubble-float 4.2s ease-in-out infinite;
  transition: left 0.55s var(--ease-cinematic, cubic-bezier(0.16, 1, 0.3, 1)),
    background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.inside-mobile__bubble picture, .inside-mobile__bubble img

 {
    width: 85px;
    height: 111px;
    object-fit: contain;
    pointer-events: none;
}

.inside-mobile__row:nth-child(2) .inside-mobile__bubble {
  animation-delay: -1.4s;
}

.inside-mobile__row:nth-child(3) .inside-mobile__bubble {
  animation-delay: -2.8s;
}

@keyframes inside-bubble-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* resting spot is inset from the edge (closer to center) — but once
   clicked, the bubble still travels all the way to the true opposite
   edge of the row, same distance as before */
.inside-mobile__row[data-inside-start="left"] .inside-mobile__bubble {
  left: 12%;
}

.inside-mobile__row[data-inside-start="left"].is-open .inside-mobile__bubble {
  left: calc(100% - 112px);
}

.inside-mobile__row[data-inside-start="right"] .inside-mobile__bubble {
  left: calc(88% - 112px);
}

.inside-mobile__row[data-inside-start="right"].is-open .inside-mobile__bubble {
  left: 0;
}

.inside-mobile__row.is-open .inside-mobile__bubble {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 42%),
    var(--hero-green);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 18px 32px -14px rgba(40, 104, 71, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.inside-mobile__text {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease 0.12s;
}

.inside-mobile__row[data-inside-start="left"] .inside-mobile__text {
  left: 12%;
  width: calc(88% - 112px - 1.1rem);
}

.inside-mobile__row[data-inside-start="right"] .inside-mobile__text {
  right: 12%;
  width: calc(88% - 112px - 1.1rem);
}

.inside-mobile__row.is-open .inside-mobile__text {
  opacity: 1;
  pointer-events: auto;
}

.inside-mobile__text h3 {
  margin: 0 0 0.3rem;
  font-family: var(--hero-font);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--hero-ink);
}

.inside-mobile__text p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--hero-body);
}

@media (prefers-reduced-motion: reduce) {
  .inside-mobile__bubble,
  .inside-mobile__text {
    transition: none;
  }

  .inside-mobile__bubble {
    animation: none;
  }
}

@media (min-width: 1024px) {
  /* match the product section's own container so both sections' text
     shares the same left edge instead of each being centered on its
     own, narrower box */
  .inside__inner {
    max-width: 76rem;
    margin: 0 auto;
  }

  /* the readable text column stays narrow, but left-aligned (no
     margin:auto) so it starts flush at that shared left edge rather
     than floating centered inside the wider box */
  .inside__content {
    max-width: 34rem;
    margin: 0;
    /* hovering the text swaps the cursor for a small magnifying-glass
       "loupe" — a custom inline SVG cursor in the site's green, with a
       `zoom-in` fallback for any browser that can't load a custom one */
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='9' fill='rgba(255,255,255,0.5)' stroke='%232d7252' stroke-width='2.5'/%3E%3Cline x1='19.5' y1='19.5' x2='27' y2='27' stroke='%232d7252' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
        13 13,
      zoom-in;
  }

  /* the loupe's lens: a circular window, clipped via overflow:hidden,
     that shows a scaled-up copy of the text sliding underneath it as
     the (real) cursor moves — app.js keeps it centered on the cursor
     and keeps the inner copy's translate lined up so the zoomed text
     stays visually anchored to whatever's actually under the lens. */
  .inside__magnifier {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 30;
    background: var(--hero-bg, #eef2e9);
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow:
      0 16px 32px -10px rgba(32, 45, 41, 0.4),
      0 0 0 1px rgba(40, 104, 71, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
  }

  .inside__magnifier.is-active {
    opacity: 1;
    visibility: visible;
  }

  .inside__magnifier-inner {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
  }

  /* the clone keeps the same classes as the real text, so it inherits
     identical typography — just strip the pointer/cursor styling since
     it's a purely visual, non-interactive copy */
  .inside__magnifier .inside__item {
    cursor: default;
  }

  .inside__list {
    display: block;
  }


    .inside__icon {
        position: absolute;
        width: 150px;
        height: 150px;
        left: calc(34rem + 4rem);
        box-shadow: 0 20px 36px -18px rgba(32, 45, 41, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.7);
        background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 42%), radial-gradient(circle at 70% 78%, rgba(40, 104, 71, 0.14) 0%, rgba(40, 104, 71, 0.05) 60%), rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(6px);
        animation: inside-bubble-float 4.6s ease-in-out infinite;
        /* the hover nudge below uses `translate`/`scale`, not
           `transform` — `transform` is already owned by the float
           keyframes above, and a plain hover rule setting `transform`
           would simply be overridden by that running animation and
           never visibly apply. Different properties, no collision. */
        translate: 0 0;
        scale: 1;
        transition: translate 0.3s cubic-bezier(0.16, 1, 0.3, 1), scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
    }

    .inside__icon:hover:not(.is-popped) {
      translate: 0 -10px;
      scale: 1.07;
    }
    .inside__icon picture, .inside__icon img {
        width: 101px;
        height: 132px;
    }

     .inside__item:nth-child(1) .inside__icon

 {
        top: -237px;
        left: calc(50rem + 6rem);
        animation-delay: 0s;
    }

     .inside__item:nth-child(2) .inside__icon
 {
        top: -95px;
        left: calc(52rem + 10rem);
    }
      .inside__item:nth-child(3) .inside__icon {
        top: 40px;
        left: calc(50rem + 6rem);
        animation-delay: -3.2s;
    }

    .inside__tiny-bubble {
        display: block;
        position: absolute;
        top: 254px;
        left: calc(48rem + 10rem);
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 72% 74%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 30%), conic-gradient(from 200deg, rgba(180, 220, 255, 0.18), rgba(255, 220, 235, 0.14), rgba(220, 255, 210, 0.16), rgba(180, 220, 255, 0.18)), rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(3px);
        box-shadow: 0 10px 20px -10px rgba(32, 45, 41, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -3px 4px rgba(40, 104, 71, 0.12);
        pointer-events: none;
        animation: inside-bubble-float 4.6s ease-in-out infinite;
    }

  .inside__tiny-bubble--1 {
    translate: -50px -14px;
    animation-delay: -1.2s;
  }

  .inside__tiny-bubble--2 {
    translate: 168px 186px;
    animation-delay: -2.6s;
  }

  .inside-mobile {
    display: none;
  }

  /* click a bubble: it pops (scales up and vanishes), waits, then pops
     back in. This `animation` override completely replaces the base
     rule's continuous float animation for as long as either class is
     present — that's intentional here, not the usual collision bug —
     and simply resumes the float once both classes are removed again. */
  .inside__icon.is-popped {
    animation: inside-bubble-pop 0.4s ease forwards;
    pointer-events: none;
  }

  .inside__icon.is-popping-in {
    animation: inside-bubble-pop-in 0.45s var(--ease-cinematic, ease) forwards;
  }

  /* a soap bubble wobbles under its own surface tension right before it
     bursts (squash, stretch, swell) — then the film gives way all at
     once and it's gone, fast, not a slow fade */
  @keyframes inside-bubble-pop {
    0% {
      transform: scale(1, 1);
      opacity: 1;
    }
    20% {
      transform: scale(1.1, 0.9);
    }
    38% {
      transform: scale(0.92, 1.1);
    }
    54% {
      transform: scale(1.08, 0.96);
    }
    68% {
      transform: scale(1.22, 1.22);
      opacity: 1;
    }
    80% {
      transform: scale(1.3, 1.3);
      opacity: 0.5;
    }
    100% {
      transform: scale(0.15, 0.15);
      opacity: 0;
    }
  }

  /* the actual "burst": two ring outlines race outward from the
     bubble's edge and fade, like the film snapping apart, timed to
     fire right as the bubble itself vanishes (68-100% of the pop) */
  .inside__icon.is-popped::before,
  .inside__icon.is-popped::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: inside-bubble-burst 0.5s ease-out forwards;
    animation-delay: 0.25s;
  }

  .inside__icon.is-popped::after {
    border-color: rgba(40, 104, 71, 0.4);
    animation-delay: 0.32s;
  }

  @keyframes inside-bubble-burst {
    0% {
      transform: scale(0.85);
      opacity: 0.9;
      border-width: 3px;
    }
    100% {
      transform: scale(2.1);
      opacity: 0;
      border-width: 0.5px;
    }
  }

  @keyframes inside-bubble-pop-in {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    65% {
      transform: scale(1.15);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
}

@media (min-width: 1440px) {
  .inside__inner {
    max-width: 84rem;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .inside__icon {
    animation: none;
    transition: none;
    translate: 0 0;
  }

  .inside__icon.is-popped,
  .inside__icon.is-popping-in {
    animation: none;
  }

  .inside__tiny-bubble {
    animation: none;
  }
}