/*****************************/
/* SECTION CONTENT → CHARLEY */
/*****************************/

.section--content--charley {
  padding:calc(var(--gap) * 1.5) 0 0;
  border-top:solid 1px currentcolor;
}

.section--content--charley:not(:last-of-type) {
  padding-bottom:calc(var(--gap) * 1.5);
  border-bottom:solid 1px currentcolor;
}

/* charley content */
.section--content__charley {
  grid-column:large;
  position: relative;
}

.section--content--charley img {
  width:100%;
  height:auto;
  display:block;
}

.section--content--charley button {
  position:absolute;
}

.section--content--charley button svg {
  width:1.5em;
  aspect-ratio:1;
}





/************************************/
/* SECTION CONTENT → CHARLEY CENTER */
/************************************/

.section--content--charley--center .section--content__charley {
  display: flex;
  justify-content:center;
}





/**************************************************/
/* SECTION CONTENT → CHARLEY SPIN / FLIP / BLINDS */
/**************************************************/

.section--content--charley--spin,
.section--content--charley--flip,
.section--content--charley--blinds {
  display:none;
}

@media (width > 36em) {
  .section--content--charley--spin,
  .section--content--charley--flip  {
    display: grid;
  }
}

@media (width > 52em) {
  .section--content--charley--blinds {
    display: grid;
  }
}

.section--content--charley--blinds .section--content__charley {
  grid-column:full;
  width:100%;
  justify-self:center;
  max-width:64em;
  padding:0 var(--gap);

  display:grid;
  grid-template-columns:
   200fr
   110fr
   170fr
   100fr
   200fr
   80fr
   260fr;
}

/* spinner/flipper */
.section--content__charley__spinner,
.section--content__charley__flipper,
.section--content__charley__blind {
  display:grid;
}

.section--content__charley__blind:nth-of-type(1) {
  grid-area:1/1/2/3;
}
.section--content__charley__blind:nth-of-type(2) {
  grid-area:1/2/2/5;
}
.section--content__charley__blind:nth-of-type(3) {
  grid-area:1/4/2/7;
}
.section--content__charley__blind:nth-of-type(4) {
  grid-area:1/6/2/8;
}



/* images */
.section--content--charley--spin img,
.section--content--charley--flip img,
.section--content__charley__blind img {
  grid-area:1/1;
  transition:.5s;
}

.section--content--charley--spin img:nth-of-type(1),
.section--content--charley--flip img:nth-of-type(1),
.section--content--charley--blinds img:nth-of-type(1) {
  opacity:1;
}

.section--content--charley--spin img:nth-of-type(2),
.section--content--charley--blinds img:nth-of-type(2) {
  opacity:0;
}

/* button */
.section--content--charley--spin button,
.section--content--charley--flip button {
  bottom:1em;
  left:var(--gap);
}

.section--content--charley--blinds button {
  bottom:var(--gap);
  left:calc(50% - 1em);
}
  
  
/********/
/* FADE */
/********/

.section--content--charley--spin.spin img:nth-of-type(1),
.section--content--charley--flip.flip img:nth-of-type(1),
.section--content--charley--blinds.spin img:nth-of-type(1) {
  opacity:0;
}

.section--content--charley--spin.spin img:nth-of-type(2),
.section--content--charley--flip.flip img:nth-of-type(2),
.section--content--charley--blinds.spin img:nth-of-type(2) {
  opacity:1;
}
  
  



/*****************/
/* SPIN / BLINDS */
/*****************/

:root[data-reduced-motion="no-preference"] .section--content__charley__spinner,
:root[data-reduced-motion="no-preference"] .section--content__charley__blind {
  perspective:60em;
  transform-style:preserve-3d;
}

:root[data-reduced-motion="no-preference"] .section--content--charley--spin img,
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds img {
  opacity:1;
  transition:1s;

  backface-visibility:hidden;
}

/* delays */
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds .section--content__charley__blind:nth-of-type(1) img {
  transition-delay:0s;
}
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds .section--content__charley__blind:nth-of-type(2) img {
  transition-delay:.2s;
}
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds .section--content__charley__blind:nth-of-type(3) img {
  transition-delay:.4s;
}
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds .section--content__charley__blind:nth-of-type(4) img {
  transition-delay:.6s;
}

/* spin */
:root[data-reduced-motion="no-preference"] .section--content--charley--spin img:nth-of-type(1),
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds img:nth-of-type(1) {
  transform: rotateY(0turn);
}

:root[data-reduced-motion="no-preference"] .section--content--charley--spin img:nth-of-type(2),
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds img:nth-of-type(2) {
  transform: rotateY(-.5turn);
}

:root[data-reduced-motion="no-preference"] .section--content--charley--spin.spin img:nth-of-type(1),
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds.spin img:nth-of-type(1) {
  transform: rotateY(-.5turn);
}

:root[data-reduced-motion="no-preference"] .section--content--charley--spin.spin img:nth-of-type(2),
:root[data-reduced-motion="no-preference"] .section--content--charley--blinds.spin img:nth-of-type(2) {
  transform: rotateY(-1turn);
}




  
/********/
/* FLIP */
/********/

:root[data-reduced-motion="no-preference"] .section--content--charley--flip {
  overflow:hidden;
  scrollbar-width: none;
}

:root[data-reduced-motion="no-preference"] .section--content--charley--flip::-webkit-scrollbar {
  display: none;
}

:root[data-reduced-motion="no-preference"] .section--content--charley--flip img {
  transition:1s ease-in-out;
  opacity:1;
  transform-origin: bottom;
}

:root[data-reduced-motion="no-preference"] .section--content--charley--flip img:nth-of-type(1) {
  transform: perspective(60em) rotateY(0deg);
}

:root[data-reduced-motion="no-preference"] .section--content--charley--flip img:nth-of-type(2) {
  transform: perspective(60em) rotateX(-90deg);
}

:root[data-reduced-motion="no-preference"] .section--content--charley--flip.flip img:nth-of-type(1) {
  transform: perspective(60em) rotateX(90deg);
}

:root[data-reduced-motion="no-preference"] .section--content--charley--flip.flip img:nth-of-type(2) {
  transform: perspective(60em) rotateX(0deg);
}





/************************************/
/* SECTION CONTENT → CHARLEY SCROLL */
/************************************/

.section--content--charley--scroll {
  background-color:var(--bg-section--charley);
}

.section--content--charley--scroll .section--content__charley {
  grid-column:full;
  overflow-x:auto;
  scrollbar-width: none;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
}

.section--content__charley::-webkit-scrollbar {
  display: none;
}

.section--content--charley--scroll .section--content__charley img {
  width:auto;
  height:clamp(32em, calc(100dvh - var(--gap) * 3 - 8em), 60em);
  flex-shrink:0;
  max-width:initial;
  margin:0 auto;
}


/**********/
/* BUTTON */
/**********/

.section--content--charley--scroll button {
  top:calc(50% - 1em);
}

.section--content--charley--scroll button:nth-of-type(1) {
  left:var(--gap);
}

.section--content--charley--scroll button:nth-of-type(2) {
  right:var(--gap);
}

/* arrows */
.section--content--charley--scroll button::before,
.section--content--charley--scroll button::after {
  content:"";
  grid-area:1/1;

  width:.75em;
  height:max(.075em, 1px);

  background-color: currentColor;
}

.section--content--charley--scroll button:nth-of-type(1)::before {
  transform-origin: max(.0375em, .5px) max(.0375em, .5px);
  rotate:45deg;
  border-radius:1em 0 0 1em;
}

.section--content--charley--scroll button:nth-of-type(1)::after {
  transform-origin: max(.0375em, .5px) max(.0375em, .5px);
  rotate:-45deg;
  border-radius:1em 0 0 1em;
}

.section--content--charley--scroll button:nth-of-type(2)::before {
  transform-origin: calc( 100% - max(.0375em, .5px)) max(.0375em, .5px);
  rotate:45deg;
  border-radius:0 1em 1em 0;
}

.section--content--charley--scroll button:nth-of-type(2)::after {
  transform-origin: calc( 100% - max(.0375em, .5px)) max(.0375em, .5px);
  rotate:-45deg;
  border-radius:0 1em 1em 0;
}

/* disabled */

:root[data-reduced-motion="no-preference"] .section--content--charley--scroll button::before,
:root[data-reduced-motion="no-preference"] .section--content--charley--scroll button::after {
  transition:.5s;
}

.section--content--charley--scroll button:disabled::before,
.section--content--charley--scroll button:disabled::after {
  transform-origin:center;
  scale:.333 3.33;
}