/* ── Before / After reveal button ──────────────────────────────
   Extracted from playground demo. `.panel` (demo controls) and
   body/page demo styles removed — this is meant to drop into an
   existing theme, so it only carries the component itself.
------------------------------------------------------------------ */

@property --reveal {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.ba-section{
	max-width:100%;
	margin-bottom: 100px;
}

.ba{
  --duration:900ms;
  --easing:cubic-bezier(.4,0,.2,1);
  --feather:100px;
  --reveal:0;
  --edge-color:#E61717;

  /* label pill */
  --pill-bg:26,26,26;
  --pill-alpha:.70;
  --pill-fg:#FFFFFF;
  --pill-blur:10px;
  --cursor-size:104px;
  --hint-size:12px;
  --state-size:14px;
  --fade:300ms;
  --exit-scale:.30;

  --press-scale:1;
  --cx:50%;
  --cy:50%;

  --angle:90deg;
  --clip-r:calc(100% - var(--reveal) * 100%);
  --clip-l:0px;
  --edge: calc(var(--reveal) * (100% + var(--feather)));

  display:block;
  width:100%;
  margin:0;padding:0;border:0;
  background:none;font:inherit;color:inherit;text-align:left;appearance:none;

  position:relative;
  overflow:hidden;
  contain:paint;
  -webkit-tap-highlight-color:transparent;

  transition:--reveal var(--duration) var(--easing);
}
.ba[data-dir="rtl"]{
  --angle:270deg;
  --clip-r:0px;
  --clip-l:calc(100% - var(--reveal) * 100%);
}
.ba.is-ready{cursor:none}
.ba:focus-visible{outline:2px solid var(--edge-color);outline-offset:3px}

.ba__after{display:block;width:100%;height:auto}

.ba__before{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  clip-path:inset(0 var(--clip-r) 0 var(--clip-l));
}
@supports (mask-image: linear-gradient(#000, transparent)) or
		  (-webkit-mask-image: linear-gradient(#000, transparent)) {
  .ba__before{
	clip-path:none;
	-webkit-mask-image:linear-gradient(var(--angle),
	  #000 calc(var(--edge) - var(--feather)), transparent var(--edge));
			mask-image:linear-gradient(var(--angle),
	  #000 calc(var(--edge) - var(--feather)), transparent var(--edge));
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
}
.ba.is-animating .ba__before{will-change:mask-image,-webkit-mask-image}
.ba__after,.ba__before{user-select:none;-webkit-user-drag:none}

.ba__edge{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(var(--angle),
	transparent calc(var(--edge) - 2px),
	var(--edge-color) calc(var(--edge) - 2px),
	var(--edge-color) var(--edge),
	transparent var(--edge));
  transition:opacity .3s ease;
}
.ba.has-edge.is-animating .ba__edge{opacity:1}

.ba__cursor{
  box-sizing:border-box;
  position:absolute;top:0;left:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:2px;
  width:var(--cursor-size);
  height:var(--cursor-size);
  padding:10px;
  border-radius:9999px;
  background: rgba(26, 26, 26, 0.7);
  -webkit-backdrop-filter:blur(0px);
		  backdrop-filter:blur(0px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  color:var(--pill-fg);
  font-family:"Neue Haas Grotesk Text Pro",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  text-align:center;white-space:nowrap;
  pointer-events:none;
  opacity:0;
  translate:calc(var(--cx) - 50%) calc(var(--cy) - 50%);
  scale:var(--press-scale);
  transform:scale(var(--exit-scale));
  transition:opacity var(--fade) ease,
			 transform var(--fade) cubic-bezier(.22,1,.36,1),
			 backdrop-filter var(--fade) ease,
			 -webkit-backdrop-filter var(--fade) ease,
			 scale 220ms cubic-bezier(.2,0,.2,1);
  will-change:transform,translate;
}
.ba__cursor.is-visible{
  opacity:1;
  transform:none;
  -webkit-backdrop-filter:blur(var(--pill-blur));
		  backdrop-filter:blur(var(--pill-blur));
}
.ba.is-pressed .ba__cursor{transition:opacity .2s ease, scale 110ms ease-out}

/* elongated shape — for a single-line label like "Switch to Before" */
.ba[data-shape="pill"] .ba__cursor{
  flex-direction:row;
  gap:5px;
  width:auto;height:auto;
  padding:14px 24px;
}

.ba__hint{
	font-weight: 400;
	font-size: 14px;
	line-height: 120%;
	letter-spacing: 0px;
	opacity:.72
}
.ba__hint:empty{display:none}
.ba__state{
	font-weight: 500;
	font-size: 14px;
	line-height: 120%;
	letter-spacing: 0px;
	text-transform: uppercase;
}

.mob-ba-btns {
	display: none;
}

@media (hover:none),(max-width:991px){
  .ba,.ba.is-ready{cursor:pointer}
  .ba__cursor{display:none}
}
@media (max-width:991px){ 
	.mob-ba-btns {
		display: flex;
		justify-content: center;
		margin-top: 16px;
	}
	
	.mob-ba-btns a {
		display: block;
		padding: 10px 24px;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 12px;
		line-height: 100%;
		letter-spacing: 2%;
		color: #5C5C5C;
	}
	
	.mob-ba-btns a.active {
		color: #F5F5F5;
		background-color: #5C5C5C;
	}
	.ba-section{
		margin-bottom: 80px;
	}
}

@media (prefers-reduced-motion:reduce){
  .ba{--duration:1ms;--feather:0px}
  .ba__edge{display:none}
  .ba__cursor{transition:none}
}