/* PlanIT 3D slider
   ----------------
   All rules are scoped under .pslider so the embed can't leak styles into the
   host Webflow page.

   Brand fonts (Campton for headings, Inter for body) and the colour tokens
   below are the same assets planitpackaging.com already serves, so the embed
   matches the surrounding site exactly and reuses the browser's cache. */

@font-face {
  font-family: 'Campton';
  src: url('https://cdn.prod.website-files.com/677c1828a1c37ee63c939277/677c3c6a1a15bc7ada94792e_CamptonBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('https://cdn.prod.website-files.com/677c1828a1c37ee63c939277/677c3c6a7a1d1c47e01e9a68_CamptonBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('https://cdn.prod.website-files.com/677c1828a1c37ee63c939277/677c3c6a5b5844e3dc55a2ac_CamptonSemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('https://cdn.prod.website-files.com/677c1828a1c37ee63c939277/677c27c85555cc90d380671e_Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('https://cdn.prod.website-files.com/677c1828a1c37ee63c939277/677c27c71726a515ecffb0f7_Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('https://cdn.prod.website-files.com/677c1828a1c37ee63c939277/677c27c790e3cd5227a6263a_Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.pslider {
  /* brand tokens, lifted from planit-packaging.shared.css */
  --ps-yellow: #efd973;
  --ps-navy: #1e4d7b;
  --ps-navy-deep: #00507f;
  --ps-blue-light: #0074bc;
  --ps-blue-deep: #00507f;
  --ps-body: #22384d;

  --ps-head: 'Campton', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --ps-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --ps-radius: 32px;
  /* Percentage of the slider itself, not the viewport — vw units would ignore
     the host page's padding and let the card overhang the blue panel.
     Wide enough that full descriptions stay a few lines rather than a tall
     column, since the card's height is set by the longest one. */
  --ps-card-w: min(920px, 92%);

  /* ---- carousel geometry -------------------------------------------------
     Three machines must fit side by side without touching. Given a slide of
     width W (% of stage), a side scale S and a side offset G (% of W):

        side inner edge = 50% + P·W·(G − S/2)   must exceed   50% + W/2
        side outer edge = 50% + P·W·(G + S/2)   should stay near 100%

     P is the perspective foreshortening from --ps-side-z, 1700/(1700+190) ≈ 0.9,
     which shrinks the effective offset — ignore it and the machines touch.
     This also caps the centre slide at roughly W ≤ 100/(1+2S), so a bigger
     centre machine is paid for with smaller side ones, not a wider offset. */
  --ps-slide-w: 44%;
  --ps-side-scale: 0.62;
  --ps-side-gap: 94%;
  --ps-side-z: -190px;
  --ps-side-rot: 15deg;

  --ps-stage-h: clamp(240px, 27vw, 385px);
  --ps-card-lift: clamp(90px, 11vw, 140px);
  --ps-panel-foot: clamp(140px, 15vw, 190px);

  position: relative;
  box-sizing: border-box;
  /* Flows as an ordinary block in the host page: full width of whatever it is
     dropped into, intrinsic height, and never its own scroll container. No
     rule in this file may set a height or overflow on .pslider itself. */
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: var(--ps-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pslider *,
.pslider *::before,
.pslider *::after {
  box-sizing: border-box;
}

/* ---------- blue panel ---------- */

.pslider__panel {
  position: relative;
  border-radius: var(--ps-radius);
  background: radial-gradient(125% 115% at 50% 0%, var(--ps-blue-light) 0%, var(--ps-blue-deep) 100%);
  padding: clamp(30px, 4.2vw, 60px) clamp(16px, 3vw, 48px) var(--ps-panel-foot);
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.pslider__eyebrow {
  /* Capped width so the phrase breaks onto a balanced second line instead of
     stretching across a wide container. */
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--ps-head);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ps-yellow) !important;
}

.pslider__heading {
  margin: clamp(10px, 1.3vw, 20px) auto 0;
  max-width: 21ch;
  font-family: var(--ps-head);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 33px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: #fff !important;
}

.pslider__intro {
  margin: clamp(9px, 1.1vw, 15px) auto 0;
  max-width: 66ch;
  font-family: var(--ps-text);
  font-weight: 400;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.6;
  /* Explicit rather than inherited so a host page's typography can't tint it,
     and at full opacity — 0.95 blended it with the blue and read as off-white.
     !important because this sits on white text over a blue panel: if the host
     Webflow page sets a dark paragraph colour with !important, the copy becomes
     unreadable rather than merely off-brand. */
  color: #fff !important;
}

/* RichText from the CMS, so normalise whatever markup it ships with. */
.pslider__intro > *:first-child { margin-top: 0; }
.pslider__intro > *:last-child { margin-bottom: 0; }

.pslider__intro p {
  margin: 0 0 0.65em;
}

/* The host Webflow page styles its own p/span/li; force the embed's copy to
   keep the panel's white regardless. Links opt out below. */
.pslider__intro p,
.pslider__intro span,
.pslider__intro li,
.pslider__intro strong,
.pslider__intro b,
.pslider__intro em {
  color: inherit !important;
}

.pslider__intro strong,
.pslider__intro b {
  font-weight: 700;
}

.pslider__intro a {
  color: var(--ps-yellow);
  text-decoration: underline;
}

/* ---------- 3D stage ---------- */

.pslider__stage {
  position: relative;
  height: var(--ps-stage-h);
  margin-top: clamp(18px, 3vw, 46px);
  perspective: 1700px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  user-select: none;
}

.pslider__track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.pslider__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--ps-slide-w);
  height: 100%;
  margin-left: calc(var(--ps-slide-w) / -2);
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.22, 0.9, 0.24, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}

/* Position comes entirely from data-off (written by the script) so every
   breakpoint can retune the geometry in CSS alone. */
.pslider__slide[data-off='0'] {
  transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  opacity: 1;
  z-index: 30;
}

.pslider__slide[data-off='1'] {
  transform: translate3d(var(--ps-side-gap), 0, var(--ps-side-z)) rotateY(calc(-1 * var(--ps-side-rot))) scale(var(--ps-side-scale));
  opacity: 1;
  z-index: 20;
}

.pslider__slide[data-off='-1'] {
  transform: translate3d(calc(-1 * var(--ps-side-gap)), 0, var(--ps-side-z)) rotateY(var(--ps-side-rot)) scale(var(--ps-side-scale));
  opacity: 1;
  z-index: 20;
}

.pslider__slide[data-off='2'] {
  transform: translate3d(calc(var(--ps-side-gap) * 1.35), 0, calc(var(--ps-side-z) * 1.9)) rotateY(calc(-1 * var(--ps-side-rot))) scale(calc(var(--ps-side-scale) * 0.7));
  opacity: 0;
  z-index: 10;
}

.pslider__slide[data-off='-2'] {
  transform: translate3d(calc(var(--ps-side-gap) * -1.35), 0, calc(var(--ps-side-z) * 1.9)) rotateY(var(--ps-side-rot)) scale(calc(var(--ps-side-scale) * 0.7));
  opacity: 0;
  z-index: 10;
}

.pslider__slide[aria-hidden='true'] {
  pointer-events: none;
}

.pslider__slide[data-pos='side'] {
  cursor: pointer;
  pointer-events: auto;
}

.pslider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 26px 34px rgba(0, 24, 62, 0.42));
  transition: filter 0.5s ease;
}

.pslider__slide[data-pos='side'] .pslider__img {
  filter: drop-shadow(0 18px 24px rgba(0, 24, 62, 0.34)) brightness(0.95);
}

/* ---------- product card ---------- */

/* In normal flow, pulled up over the panel — no absolute-position maths that
   would drift as the copy length changes. */
/* Every slide's card is rendered and stacked into a single grid cell, so the
   row is as tall as the longest description and all slides share that height.
   Doing it in layout rather than by measuring in JS keeps it correct when the
   text reflows at a different width. */
.pslider__cardwrap {
  position: relative;
  z-index: 5;
  display: grid;
  width: var(--ps-card-w);
  margin: calc(-1 * var(--ps-card-lift)) auto 0;
}

.pslider__card {
  grid-area: 1 / 1;
  display: grid;
  /* Narrow media column — the wider the text column, the fewer lines the
     longest description wraps to, and that is what sets the card's height. */
  grid-template-columns: minmax(110px, 26%) 1fr;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(6, 32, 74, 0.22);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease;
}

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

.pslider__product {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.pslider__logo {
  max-width: min(240px, 70%);
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 6px;
}

.pslider__title {
  margin: 0 0 9px;
  font-family: var(--ps-head);
  font-weight: 700;
  font-size: clamp(18px, 1.95vw, 26px);
  line-height: 1.18;
  color: var(--ps-navy) !important;
}

.pslider__desc {
  margin: 0;
  font-family: var(--ps-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ps-body) !important;
}

/* ---------- controls ---------- */

/* Arrows and dots share one row below the machines. The slides span nearly the
   full stage width, so anything overlaid on the stage would sit on top of a
   machine — the controls live underneath it instead. */
.pslider__controls {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(18px, 2.4vw, 28px);
}

.pslider__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(4px);
}

.pslider__nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
}

.pslider__nav:focus-visible {
  outline: 3px solid var(--ps-yellow);
  outline-offset: 3px;
}

.pslider__nav svg {
  width: 17px;
  height: 17px;
}

.pslider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pslider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.pslider__dot[aria-current='true'] {
  width: 24px;
  border-radius: 5px;
  background: var(--ps-yellow);
}

/* ---------- footer ---------- */

.pslider__footer {
  margin-top: clamp(22px, 3vw, 34px);
  text-align: center;
}

.pslider__prompt {
  margin: 0 0 12px;
  font-family: var(--ps-text);
  font-weight: 700;
  font-size: 25px;
  color: var(--ps-navy) !important;
}

.pslider__cta {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--ps-navy);
  color: #fff;
  font-family: var(--ps-text);
  font-weight: 600;
  font-size: clamp(12px, 1vw, 14px);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pslider__cta:hover {
  background: var(--ps-navy-deep);
  transform: translateY(-1px);
}

/* ---------- states ---------- */

.pslider__msg {
  padding: 48px 24px;
  border-radius: var(--ps-radius);
  background: #f3f6fb;
  color: #5b6b80;
  font-size: 14px;
  text-align: center;
}

.pslider__msg--error {
  background: #fdf1f1;
  color: #a23434;
}

/* Before data arrives the root holds roughly the height the slider will occupy,
   so the surrounding page never reflows when it appears. Sized from the panel's
   own padding + stage rather than a magic number. */
.pslider[data-loading='true'] {
  min-height: calc(var(--ps-stage-h) + var(--ps-panel-foot) + 190px);
}

.pslider__panel,
.pslider__cardwrap,
.pslider__footer {
  animation: pslider-in 0.28s ease both;
}

@keyframes pslider-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pslider__panel,
  .pslider__cardwrap,
  .pslider__footer {
    animation: none;
  }
}

/* ---------- tablet: keep the 3D, tighten it ---------- */

@media (max-width: 1024px) {
  .pslider {
    --ps-slide-w: 48%;
    --ps-side-scale: 0.56;
    --ps-side-gap: 92%;
    --ps-side-z: -150px;
    --ps-stage-h: clamp(220px, 30vw, 320px);
    --ps-card-lift: 100px;
    --ps-panel-foot: 155px;
  }
}

/* ---------- mobile: one machine at a time ---------- */

@media (max-width: 640px) {
  .pslider {
    --ps-card-w: 94%;
    --ps-slide-w: 86%;
    --ps-stage-h: clamp(190px, 50vw, 260px);
    --ps-card-lift: 70px;
    --ps-panel-foot: 120px;
    --ps-radius: 22px;
  }

  /* No coverflow here — the neighbours would be unreadable at this width, so
     they slide out and fade rather than sitting alongside. */
  .pslider__stage {
    perspective: none;
  }

  .pslider__slide {
    transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.24, 1), opacity 0.35s ease;
  }

  .pslider__slide[data-off='0'] {
    transform: none;
    opacity: 1;
  }

  .pslider__slide[data-off='1'],
  .pslider__slide[data-off='2'] {
    transform: translate3d(42%, 0, 0) scale(0.86);
    opacity: 0;
    pointer-events: none;
  }

  .pslider__slide[data-off='-1'],
  .pslider__slide[data-off='-2'] {
    transform: translate3d(-42%, 0, 0) scale(0.86);
    opacity: 0;
    pointer-events: none;
  }

  .pslider__card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pslider__product {
    max-width: 150px;
    margin: 0 auto;
  }

  .pslider__logo {
    margin-inline: auto;
    object-position: center;
  }

  .pslider__nav {
    width: 36px;
    height: 36px;
  }

  .pslider__nav svg {
    width: 15px;
    height: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pslider__slide,
  .pslider__card,
  .pslider__nav,
  .pslider__cta {
    transition-duration: 0.01ms;
  }
}