/* =====================================================================
   SIGNATURE PROFILE — Samuel Pinto · Web Designer & Developer
   Section: #team (index.html) · Behaviour: profile.js
   Photo: assets/samuel-pinto.jpg  (replace that file to swap the portrait)

   Concept: the profile is a live design canvas. On hover the card opens
   outward and reveals the "tool" layer (rulers, grid, smart guides),
   the portrait is selected like an object on an artboard, and the role
   and bio take the stage.

   How the states are written:
   - Base rules  = OPEN state (also what renders if JavaScript is off).
   - .sp.is-ready:not(.is-open) = REST state.
   ===================================================================== */

.team h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.08em}

.sp{
  --sp-ink:#0e0d13;
  --sp-ink-2:#1b1926;
  --sp-chrome:#121118;
  --sp-text:#f5f3f9;
  --sp-muted:#c9c6d3;
  --sp-soft:#8f8b9d;
  --sp-accent:#9c8aff;
  --sp-line:rgba(255,255,255,.065);
  --sp-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sp-ease:cubic-bezier(.16,1,.3,1);
  --sp-dur:.95s;
  --sp-ruler:20px;               /* ruler thickness                       */
  --sp-inset:22px;               /* rest-state margin hiding the tool layer */
  --sp-h:clamp(540px,50vw,640px);
  --sp-fh:calc(var(--sp-h) * .75);/* frame height                           */
  --sp-fw:calc(var(--sp-fh) * .75);/* frame width (photo is 3:4)            */
  --sp-fl:9%;                    /* frame left                             */
  --sp-role-rest:.6;             /* role scale at rest (read by profile.js) */
  position:relative;
  isolation:isolate;
  height:var(--sp-h);
  border-radius:14px;
  overflow:hidden;
  -webkit-clip-path:inset(0 round 14px);
          clip-path:inset(0 round 14px);
  color:var(--sp-text);
  -webkit-tap-highlight-color:transparent;
}

/* ---------- Canvas: the card that opens outward ---------- */
.sp__canvas{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(90% 85% at 26% 46%,var(--sp-ink-2) 0%,var(--sp-ink) 64%);
  clip-path:inset(0 round 14px);
  transition:clip-path var(--sp-dur) var(--sp-ease);
}
.sp.is-ready:not(.is-open) .sp__canvas{clip-path:inset(var(--sp-inset) round 12px)}

.sp__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--sp-line) 1px,transparent 1px),linear-gradient(90deg,var(--sp-line) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:var(--sp-ruler) var(--sp-ruler);
  transition:opacity .8s ease;
}
.sp.is-ready:not(.is-open) .sp__grid{opacity:.55}
/* Lit grid under the cursor: a 460px window with a fixed radial fade that
   follows the pointer, holding grid lines aligned to the canvas. It moves with
   transforms only (--lx/--ly, --gx/--gy from profile.js), so the light never
   repaints the card. Looks the same as a radial mask at the cursor. */
.sp__grid--lit{
  --sp-g:rgba(156,138,255,.34);
  inset:auto;left:0;top:0;width:460px;height:460px;overflow:hidden;
  background:none;
  -webkit-mask-image:radial-gradient(230px circle at 50% 50%,#000 0%,transparent 75%);
          mask-image:radial-gradient(230px circle at 50% 50%,#000 0%,transparent 75%);
  transform:translate3d(var(--lx,-999px),var(--ly,-999px),0);
}
.sp__grid--lit::before{
  content:"";position:absolute;left:0;top:0;width:524px;height:524px;
  background-image:linear-gradient(var(--sp-g) 1px,transparent 1px),linear-gradient(90deg,var(--sp-g) 1px,transparent 1px);
  background-size:64px 64px;
  transform:translate3d(var(--gx,0px),var(--gy,0px),0);
}
.sp.is-ready:not(.is-open) .sp__grid--lit{opacity:0}

/* Rulers live in the margin that is clipped away at rest */
.sp__ruler,.sp__corner{position:absolute;background-color:var(--sp-chrome);background-repeat:no-repeat}
.sp__ruler--x{
  top:0;left:var(--sp-ruler);right:0;height:var(--sp-ruler);
  border-bottom:1px solid var(--sp-line);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 64px),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 1px,transparent 1px 8px);
  background-size:100% 9px,100% 5px;
  background-position:0 100%,0 100%;
}
.sp__ruler--y{
  top:var(--sp-ruler);left:0;bottom:0;width:var(--sp-ruler);
  border-right:1px solid var(--sp-line);
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 1px,transparent 1px 64px),
                   repeating-linear-gradient(180deg,rgba(255,255,255,.13) 0 1px,transparent 1px 8px);
  background-size:9px 100%,5px 100%;
  background-position:100% 0,100% 0;
}
.sp__corner{top:0;left:0;width:var(--sp-ruler);height:var(--sp-ruler);border-right:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line)}
.sp__marker{position:absolute;background:var(--sp-accent)}
.sp__ruler--x .sp__marker{top:0;bottom:0;left:0;width:1px;transform:translateX(calc(var(--mx,-20px) - var(--sp-ruler)))}
.sp__ruler--y .sp__marker{left:0;right:0;top:0;height:1px;transform:translateY(calc(var(--my,-20px) - var(--sp-ruler)))}

/* ---------- The ampersand: where design meets development ---------- */
.sp__amp{
  position:absolute;z-index:1;top:50%;
  left:calc(var(--sp-fl) + var(--sp-fw) * .52);
  font:italic 400 calc(var(--sp-h) * .9)/1 Georgia,"Times New Roman",serif;
  color:var(--sp-accent);
  opacity:.17;
  pointer-events:none;user-select:none;
  transform:translate3d(calc(var(--px,0) * -26px),calc(-55% + var(--py,0) * -16px),0);
  transition:opacity 1.1s var(--sp-ease);
}
.sp.is-ready:not(.is-open) .sp__amp{opacity:.075}

/* ---------- Portrait frame ---------- */
.sp__frame{
  position:absolute;z-index:2;
  top:calc(50% - var(--sp-fh) / 2);
  left:var(--sp-fl);
  width:var(--sp-fw);height:var(--sp-fh);
  perspective:1100px;
  transform:scale(1.045);
  transition:transform var(--sp-dur) var(--sp-ease);
}
.sp.is-ready:not(.is-open) .sp__frame{transform:none}

.sp__tilt{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.sp__photo{
  position:absolute;inset:0;margin:0;overflow:hidden;
  border-radius:4px;
  isolation:isolate;
  background:#a6a5a3;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05);
}
.sp__zoom{
  position:absolute;inset:-4%;
  transform:scale(1.07);
  transition:transform 1.4s var(--sp-ease);
}
.sp.is-ready:not(.is-open) .sp__zoom{transform:none}
.sp__zoom img{
  display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 22%;
  transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px),0);
  filter:saturate(1) contrast(1.05) brightness(1.02);
  transition:filter 1s var(--sp-ease);
}
.sp.is-ready:not(.is-open) .sp__zoom img{filter:saturate(.9) contrast(1.01)}
.sp__photo::after{ /* soft floor so the portrait sits in the canvas */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(14,13,19,.32));
}
.sp__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 46% at calc(50% + var(--px,0) * 42%) calc(36% + var(--py,0) * 34%),rgba(255,255,255,.42),transparent 70%);
  mix-blend-mode:soft-light;
  transition:opacity .8s var(--sp-ease);
}
.sp.is-ready:not(.is-open) .sp__glow{opacity:0}
.sp__sweep{
  position:absolute;inset:-20% -60%;pointer-events:none;
  background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.34) 50%,transparent 57%);
  mix-blend-mode:soft-light;
  transform:translateX(70%);
  transition:transform 1.35s cubic-bezier(.45,0,.15,1) .06s;
}
.sp.is-ready:not(.is-open) .sp__sweep{transform:translateX(-70%);transition:none}

/* Selection box — floats above the photo for real depth on tilt */
.sp__select{
  position:absolute;inset:-10px;pointer-events:none;
  border:1px solid var(--sp-accent);
  transform:translateZ(38px);
  opacity:1;
  transition:opacity .5s ease .12s,transform var(--sp-dur) var(--sp-ease);
}
.sp.is-ready:not(.is-open) .sp__select{opacity:0;transform:translateZ(38px) scale(1.035);transition-delay:0s}
.sp__select i{
  position:absolute;width:9px;height:9px;
  background:#fff;border:1px solid var(--sp-accent);border-radius:1px;
  transform:scale(1);
  transition:transform .5s var(--sp-ease) calc(.3s + var(--d,0s));
}
.sp__select i:nth-child(1){top:-5px;left:-5px}
.sp__select i:nth-child(2){top:-5px;right:-5px;--d:.05s}
.sp__select i:nth-child(3){bottom:-5px;right:-5px;--d:.1s}
.sp__select i:nth-child(4){bottom:-5px;left:-5px;--d:.15s}
.sp.is-ready:not(.is-open) .sp__select i{transform:scale(0);transition-delay:0s}
.sp__size{
  position:absolute;left:50%;top:calc(100% + 10px);
  transform:translateX(-50%);
  padding:5px 7px;border-radius:3px;
  background:#7b5cff;color:#fff;
  font:600 10px/1 var(--sp-mono);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  min-width:9ch;text-align:center; /* live cursor coordinates (profile.js) */
}

/* Smart guides drawn from the frame edges */
.sp__guide{
  position:absolute;left:-100vw;right:-100vw;height:0;pointer-events:none;
  border-top:1px dashed rgba(156,138,255,.42);
  transform:scaleX(1);opacity:1;
  transition:transform 1.1s var(--sp-ease) .1s,opacity .6s ease .1s;
}
.sp__guide--top{top:-10px}
.sp__guide--bottom{bottom:-10px}
.sp.is-ready:not(.is-open) .sp__guide{transform:scaleX(0);opacity:0;transition-delay:0s}

/* ---------- Copy ---------- */
.sp__copy{
  position:absolute;z-index:3;top:50%;
  left:calc(var(--sp-fl) + var(--sp-fw) + clamp(40px,6.5%,96px));
  right:clamp(28px,7%,96px);
  max-width:560px;
  transform:translateY(-50%);
  transition:transform var(--sp-dur) var(--sp-ease);
}
.sp.is-ready:not(.is-open) .sp__copy{transform:translateY(calc(-50% + var(--sp-shift,0px)))}

.sp__tag{
  margin:0 0 18px;
  color:#a595ff;
  font-size:11px;font-weight:800;line-height:1.2;letter-spacing:1.35px;
}
.sp__name{
  margin:0;
  color:#fff;
  font-size:clamp(44px,4.6vw,68px);font-weight:800;line-height:.95;letter-spacing:-.07em;
}
.sp__role{
  margin:18px 0 0;
  color:#fff;
  font-size:clamp(26px,2.7vw,38px);font-weight:700;line-height:1.08;letter-spacing:-.045em;
  text-wrap:balance;
  transform-origin:0 0;
  transform:scale(1);
  transition:transform var(--sp-dur) var(--sp-ease),color .7s ease,opacity .3s ease;
}
.sp.is-ready:not(.is-open) .sp__role{transform:scale(var(--sp-role-rest));color:var(--sp-muted)}
.sp__role em{
  display:inline-block;
  padding:0 .06em;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:0;
  color:var(--sp-accent);
  transform:none;
  transition:transform 1s var(--sp-ease) .08s,color .7s ease;
}
.sp.is-ready:not(.is-open) .sp__role em{color:inherit;transform:translateY(.04em) rotate(-8deg)}

.sp__bio{
  position:relative;
  margin:26px 0 0;padding-left:20px;
  max-width:31em;
  color:#cbcad0;
  font-size:clamp(15px,1.15vw,16.5px);line-height:1.62;
}
.sp__bio::before{
  content:"";position:absolute;left:0;top:.4em;bottom:.4em;width:1px;
  background:linear-gradient(var(--sp-accent),rgba(156,138,255,.08));
  transform-origin:top;transform:scaleY(1);
  transition:transform .9s var(--sp-ease) .2s;
}
.sp.is-ready:not(.is-open) .sp__bio::before{transform:scaleY(0);transition-delay:0s}
.sp-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.sp-line__in{
  display:block;
  transform:none;opacity:1;
  transition:transform .75s var(--sp-ease),opacity .55s ease;
  transition-delay:calc(.3s + var(--i,0) * 75ms);
}
.sp.is-ready:not(.is-open) .sp-line__in{
  transform:translateY(105%);opacity:0;
  transition-duration:.45s,.3s;
  transition-delay:calc((var(--n,1) - 1 - var(--i,0)) * 35ms);
}
/* language swap choreography */
.sp.is-swapping .sp__role{opacity:0}
.sp.is-swapping .sp-line__in{
  transform:translateY(-105%);opacity:0;
  transition:transform .3s cubic-bezier(.5,0,.75,0),opacity .25s ease;
  transition-delay:calc(var(--i,0) * 25ms);
}
.sp.is-entering .sp-line__in{transform:translateY(105%);opacity:0;transition:none}
.sp.is-relang .sp-line__in{transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- HUD (bottom-left) ---------- */
.sp__hud{
  position:absolute;z-index:3;
  left:calc(var(--sp-fl) + var(--sp-fw) + clamp(40px,6.5%,96px));bottom:calc(var(--sp-inset) + 14px);
  display:grid;pointer-events:none;
  color:var(--sp-soft);
  font:600 10.5px/1 var(--sp-mono);letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.sp__hud>span{grid-area:1/1;white-space:nowrap;transition:opacity .5s ease,transform .7s var(--sp-ease)}
.sp__hint{display:inline-flex;align-items:center;gap:10px;opacity:0;transform:translateY(6px)}
.sp__hint::before{
  content:"";width:7px;height:7px;flex:none;
  border:1px solid var(--sp-accent);background:rgba(156,138,255,.25);
  animation:sp-pulse 2.4s ease-in-out infinite;
}
.sp.is-ready:not(.is-open) .sp__hint{opacity:1;transform:none}
.sp__coords,.sp__close{opacity:1;color:#b3abe6}
.sp.is-ready:not(.is-open) .sp__coords,
.sp.is-ready:not(.is-open) .sp__close{opacity:0;transform:translateY(6px)}
@keyframes sp-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:1}}

@media (hover:hover) and (pointer:fine){ .sp__hint-tap,.sp__close{display:none} }
@media (hover:none),(pointer:coarse){ .sp__hint-hover,.sp__coords{display:none} }
.sp.is-touch .sp__hint-hover,.sp.is-touch .sp__coords{display:none}
.sp.is-touch .sp__hint-tap,.sp.is-touch .sp__close{display:inline}

/* ---------- Language switch (drives the site-wide ES/EN) ---------- */
.sp__lang{
  position:absolute;z-index:6;
  top:calc(var(--sp-inset) + 16px);right:calc(var(--sp-inset) + 16px);
  display:grid;grid-template-columns:1fr 1fr;padding:3px;gap:2px;
  border:1px solid rgba(255,255,255,.13);border-radius:999px;
  background:rgba(255,255,255,.035);
}
/* the white indicator: sits on ES by default, slides to EN when data-active="en" */
.sp__lang::before{
  content:"";position:absolute;top:3px;bottom:3px;left:3px;
  width:calc(50% - 4px);border-radius:999px;background:#fff;
  transform:translateX(calc(100% + 2px));
  transition:transform .38s var(--sp-ease);
  pointer-events:none;
}
.sp__lang[data-active="en"]::before{transform:translateX(0)}
.sp__lang button{
  position:relative;z-index:1;
  appearance:none;border:0;margin:0;cursor:pointer;
  min-width:36px;min-height:28px;padding:0 10px;border-radius:999px;
  background:transparent;color:var(--sp-soft);
  font:700 10.5px/1 var(--sp-mono);letter-spacing:.1em;
  transition:color .3s ease;
}
.sp__lang button:hover{color:#fff}
.sp__lang button[aria-pressed="true"]{color:#16141e}
.sp__lang button:focus-visible{outline:2px solid var(--sp-accent);outline-offset:2px}

/* ---------- Toggle: keyboard + touch control over the whole card ---------- */
.sp__toggle{
  position:absolute;inset:0;z-index:5;
  appearance:none;border:0;margin:0;padding:0;
  background:transparent;color:transparent;
  border-radius:14px;cursor:crosshair;
}
.sp__toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sp__toggle:focus{outline:none}
.sp__toggle:focus-visible{outline:2px solid var(--sp-accent);outline-offset:-6px}
@media (hover:none),(pointer:coarse){ .sp__toggle{cursor:pointer} }

/* ---------- Touch: tap to open, tap again to close (same states as hover) ---------- */
.sp__toggle{touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sp__lang button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (hover:none),(pointer:coarse){
  .sp__hint{color:#bdb5ef}
  .sp__lang button{min-width:42px;min-height:34px}
}
.sp.is-touch .sp__hint{color:#bdb5ef}
/* instant feedback under the finger, before the card opens */
.sp.is-pressed:not(.is-open) .sp__frame{transform:scale(.985);transition-duration:.25s}
.sp.is-pressed:not(.is-open) .sp__canvas{clip-path:inset(calc(var(--sp-inset) + 3px) round 12px);transition-duration:.25s}
/* Touch timing: same states as hover, shorter and without waits, so a tap answers at once */
.sp.is-touch{--sp-dur:.6s}
.sp.is-touch .sp__select{transition:opacity .35s ease,transform var(--sp-dur) var(--sp-ease)}
.sp.is-touch .sp__select i{transition-delay:calc(.12s + var(--d,0s))}
.sp.is-touch .sp__guide{transition-duration:.7s,.4s;transition-delay:0s}
.sp.is-touch .sp__bio::before{transition-duration:.6s;transition-delay:.08s}
.sp.is-touch .sp__zoom{transition-duration:.9s}
.sp.is-touch .sp__sweep{transition-duration:1s;transition-delay:0s}
.sp.is-touch:not(.is-swapping):not(.is-relang) .sp-line__in{transition-duration:.55s,.4s;transition-delay:calc(.06s + var(--i,0) * 45ms)}
.sp.is-touch.is-ready:not(.is-open):not(.is-swapping) .sp-line__in{transition-duration:.26s,.2s;transition-delay:0s}
/* keep the moving layers on the GPU for the whole visit: no re-layering flicker when it opens */
.sp.is-touch .sp__tilt,.sp.is-touch .sp__amp,.sp.is-touch .sp__zoom img{will-change:transform}
/* the first tap always opens the card, even on the language switch */
.sp.is-touch.is-ready:not(.is-open) .sp__lang{pointer-events:none}

/* Used once on load so the rest state appears without animating */
.sp.sp--still,.sp.sp--still *,.sp.sp--still *::before,.sp.sp--still *::after{transition:none !important}

/* ---------- Tablet ---------- */
@media (max-width:1023px){
  .sp{--sp-h:clamp(500px,60vw,560px);--sp-fl:6%;--sp-fh:calc(var(--sp-h) * .72)}
  .sp__copy{left:calc(var(--sp-fl) + var(--sp-fw) + 44px);right:44px}
  .sp__hud{left:calc(var(--sp-fl) + var(--sp-fw) + 44px)}
  .sp__name{font-size:44px}
  .sp__role{font-size:28px}
}

@media (min-width:768px) and (max-width:1023px) and (max-height:600px){
  .sp{--sp-h:clamp(400px,calc(100vh - 80px),500px)}
  .sp__name{font-size:40px}
  .sp__role{font-size:26px}
}

/* ---------- Phone: stacked, tap to reveal ---------- */
@media (max-width:767px){
  .sp{
    --sp-ruler:12px;--sp-inset:14px;
    height:auto;
    display:flex;flex-direction:column;gap:52px;
    padding:calc(var(--sp-inset) + 74px) calc(var(--sp-inset) + 18px) calc(var(--sp-inset) + 66px);
  }
  .sp__frame{position:relative;top:auto;left:auto;width:100%;height:auto;aspect-ratio:3/4;max-width:100%;transform:scale(1.02)}
  .sp__select{inset:-7px;transform:translateZ(14px)}
  .sp.is-ready:not(.is-open) .sp__select{transform:translateZ(14px) scale(1.03)}
  .sp__amp{left:auto;right:-6%;top:30%;font-size:min(420px,120vw)}
  .sp__copy{position:relative;top:auto;left:auto;right:auto;max-width:none;transform:none}
  .sp.is-ready:not(.is-open) .sp__copy{transform:none}   /* name + role stay under the photo; the bio opens below */
  /* On phones the card grows to make room for the bio instead of reserving empty space */
  .sp__reveal{display:grid;grid-template-rows:1fr;transition:grid-template-rows .85s var(--sp-ease)}
  .sp.is-ready:not(.is-open) .sp__reveal{grid-template-rows:0fr;transition-delay:.12s}
  .sp__reveal-in{min-height:0;overflow:hidden}
  .sp.is-touch .sp__reveal{transition-duration:.55s}
  .sp.is-touch.is-ready:not(.is-open) .sp__reveal{transition-duration:.42s;transition-delay:0s}
  .sp__name{font-size:42px}
  .sp__role{font-size:30px}
  .sp__bio{font-size:15.5px}
  .sp__lang{top:calc(var(--sp-inset) + 16px);right:calc(var(--sp-inset) + 16px)}
  .sp__hud{left:calc(var(--sp-inset) + 18px);bottom:calc(var(--sp-inset) + 22px)}
}

@media (max-width:767px) and (orientation:landscape){
  .sp{flex-direction:row;align-items:center;gap:clamp(24px,5vw,40px);padding-top:calc(var(--sp-inset) + 58px);padding-bottom:calc(var(--sp-inset) + 56px)}
  .sp__frame{flex:0 0 auto;width:min(30%,210px)}
  .sp__copy{flex:1 1 auto;min-width:0}
  .sp__amp{right:auto;left:22%;top:50%}
  .sp__hud{left:auto;right:calc(var(--sp-inset) + 22px)}
}

/* ---------- Reduced motion: same states, cross-fades only ---------- */
@media (prefers-reduced-motion:reduce){
  .sp,.sp *,.sp *::before,.sp *::after{transition-duration:.2s !important;transition-delay:0s !important;animation:none !important}
  .sp .sp__frame,.sp.is-ready:not(.is-open) .sp__frame,
  .sp .sp__zoom,.sp.is-ready:not(.is-open) .sp__zoom,
  .sp .sp-line__in,.sp.is-ready:not(.is-open) .sp-line__in,
  .sp .sp__role,.sp.is-ready:not(.is-open) .sp__role,
  .sp .sp__role em,.sp.is-ready:not(.is-open) .sp__role em,
  .sp .sp__guide,.sp.is-ready:not(.is-open) .sp__guide,
  .sp .sp__bio::before,.sp.is-ready:not(.is-open) .sp__bio::before{transform:none !important}
  .sp .sp__copy,.sp.is-ready:not(.is-open) .sp__copy{transform:translateY(-50%) !important}
  .sp__sweep{display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .sp .sp__copy,.sp.is-ready:not(.is-open) .sp__copy{transform:none !important}
}