/* Story slider: the centred slide with its neighbours stepping back, and the
   pill controls with autoplay (.exp-slider, .exp-slide). Behaviour in
   assets/js/experience.js.
*/

/* ---- slider ---------------------------------------------------------------- */
.exp-slider{
  --slide-w: 86vw;                                /* the middle card, as on aws.amazon.com */
  --slide-h: clamp(420px, 44.4vw, 800px);         /* 640px at 1440 */
  --slide-gap: 16px;                              /* each card sits 16px in from its slot */
  --slide-ease: cubic-bezier(.25,.8,.3,1);
  --slide-time: .7s;
  position:relative; padding:clamp(40px, 3.6vw, 60px) 0 clamp(96px, 9vw, 150px);
  overflow-x:clip;
}
.exp-slider__track{
  position:relative; height:var(--slide-h);
  transition:opacity .35s var(--ease), translate .45s var(--ease-out);
  touch-action:pan-y;
}
.exp-slider__track.is-swapping{ opacity:0; translate:0 14px; }

/* each slide sits in the middle; assets/js/experience.js sets --offset (-1, 0, 1 …) */
.exp-slide{
  position:absolute; top:0; left:calc(50% - var(--slide-w) / 2);
  width:var(--slide-w); height:100%;
  transform:translateX(calc(var(--offset, 0) * 100%)) scaleY(.9);
  transition:transform var(--slide-time) var(--slide-ease), visibility 0s linear var(--slide-time);
  visibility:hidden;
}
.exp-slide.is-near{ visibility:visible; transition:transform var(--slide-time) var(--slide-ease); }
.exp-slide.is-active{ transform:translateX(0) scaleY(1); z-index:1; }
.exp-slide.is-jump{ transition:none; }

/* wrapping round the loop: no fly-across */
.exp-slide__card{
  position:absolute; inset:0 var(--slide-gap);
  display:block; overflow:hidden;
  background:var(--ink); color:var(--white);
  transition:box-shadow var(--slide-time) var(--slide-ease);
}
.exp-slide.is-active .exp-slide__card{ box-shadow:0 40px 80px -44px rgba(21,19,15,.55); }
.exp-slide:not(.is-active) .exp-slide__card{ cursor:pointer; }
.exp-slide__card:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.exp-slide__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:scale 1.6s var(--ease-out);
}
.exp-slide.is-active .exp-slide__card:hover .exp-slide__img{ scale:1.03; }

/* shade from the bottom-left corner, where the headline sits */
.exp-slide__card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(130% 100% at 0% 100%, rgba(12,11,9,.78) 0%, rgba(12,11,9,.46) 38%, rgba(12,11,9,0) 72%),
    linear-gradient(0deg, rgba(12,11,9,.34) 0%, rgba(12,11,9,0) 45%),
    linear-gradient(180deg, rgba(12,11,9,.26) 0%, rgba(12,11,9,0) 22%);
}

/* destination tag, top left */
.exp-slide__tag{
  position:absolute; z-index:1; top:clamp(22px, 5vw, 72px); left:clamp(22px, 5vw, 72px);
  padding:8px 12px 7px;
  background:rgba(12,11,9,.36); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:500 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--white);
}

/* headline, bottom left */
.exp-slide__body{
  position:absolute; z-index:1; left:clamp(22px, 5vw, 72px); right:clamp(22px, 5vw, 72px); bottom:clamp(26px, 4.4vw, 64px);
  display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:820px;
}
.exp-slide__hed{
  font:500 clamp(28px, 3.1vw, 50px)/1.08 var(--serif); letter-spacing:-.01em; color:var(--white);
  text-wrap:balance;
}
.exp-slide__meta{ font:400 13px/1.4 var(--sans); letter-spacing:.04em; color:var(--white); }
.exp-slide__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:6px; padding-bottom:7px;
  border-bottom:1px solid var(--gold);
  font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--white);
  transition:gap .35s var(--ease-out);
}
.exp-slide__cta svg{ width:14px; height:14px; color:var(--gold); }
.exp-slide.is-active .exp-slide__card:hover .exp-slide__cta{ gap:16px; }

/* neighbours: the words step back so the middle card leads */
.exp-slide__tag,.exp-slide__body{ transition:opacity var(--slide-time) var(--ease); }
.exp-slide:not(.is-active) .exp-slide__tag,
.exp-slide:not(.is-active) .exp-slide__body{ opacity:.55; }

/* ---- controls: a dark pill, centred below ------------------------------------ */
.exp-slider__controls{
  display:flex; align-items:center; justify-content:center; gap:4px;
  width:max-content; height:44px; margin:24px auto 0; padding:0 4px; border-radius:40px;
  background:var(--ink); color:var(--white);
}
.exp-slider__btn{
  width:40px; height:36px; display:grid; place-items:center; border:0; border-radius:40px;
  background:transparent; color:var(--white); cursor:pointer;
  transition:background .3s var(--ease);
}
.exp-slider__btn svg{ width:16px; height:auto; }
.exp-slider__btn:hover{ background:rgba(255,255,255,.12); }
.exp-slider__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.exp-slider__count{
  min-width:52px; text-align:center;
  font:500 12px/1 var(--sans); letter-spacing:.12em; color:var(--white); font-variant-numeric:tabular-nums;
}

/* the component's own display rules would otherwise override [hidden] */
.exp-slider__controls[hidden],.exp-slider__btn[hidden]{ display:none; }

/* autoplay: pause / play, ringed by a gold line that fills over --auto */
.exp-slider__play{ position:relative; margin-left:6px; }
.exp-slider__play::before{                       /* hairline between the arrows and the pause */
  content:""; position:absolute; left:-5px; top:10px; bottom:10px; width:1px; background:rgba(255,255,255,.18);
}
.exp-slider__btn .exp-slider__ring{ position:absolute; inset:0; width:28px; height:28px; margin:auto; rotate:-90deg; }
.exp-slider__ring circle{
  fill:none; stroke:var(--gold); stroke-width:1.4; stroke-dasharray:100; stroke-dashoffset:100;
  animation:exp-ring var(--auto, 6s) linear forwards; animation-play-state:paused;
}
@keyframes exp-ring{ to{ stroke-dashoffset:0; } }
.exp-slider__btn .exp-slider__icon{ position:relative; width:9px; height:11px; }
.exp-slider__icon--play,
.exp-slider__play.is-off .exp-slider__icon--pause,
.exp-slider__play.is-off .exp-slider__ring{ display:none; }
.exp-slider__play.is-off .exp-slider__icon--play{ display:block; }

/* drag */
.exp-slider__track{ cursor:grab; -webkit-user-select:none; user-select:none; }
.exp-slider__track.is-dragging{ cursor:grabbing; }
.exp-slider__track.is-dragging .exp-slide{ transition:none; }
.exp-slide img{ -webkit-user-drag:none; }
@media (max-width:720px){
  .exp-slider{ --slide-w: 88vw; --slide-h: min(560px, 128vw); --slide-gap: 6px; }
  .exp-slide__body{ gap:12px; }
  .exp-slide__hed{ font-size:26px; }
  .exp-slider__controls{ margin-top:18px; }
}
@media (prefers-reduced-motion:reduce){
  .exp-slider{ --slide-time: 0s; }
  .exp-slider__track{ transition:none; }
}