/*
 * TWOSHOT / SKILLS
 * Basato sul componente standalone della reference caricata dall'utente.
 * Logica desktop mantenuta: start 58% / peak 50% / end 42% della viewport.
 * Nessun hover. Mobile con rullo 3D + autoplay.
 */

.skills {
  --skills-bg: #F3E9DD;
  --skills-orange: var(--orange, #ff3100);
  --skills-black: #000;
  position: relative;
  overflow: hidden;
  padding: 1rem 0 3.75rem;
  background: var(--skills-bg);
  color: var(--skills-black);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

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

.skills figure,
.skills p,
.skills h2,
.skills ul {
  
  padding: 0;
}

.skills ul {
  list-style: none;
}

.skills video {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  user-select: none;
}

.skills__container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.skills__header {
  position: relative;
  z-index: 3;
  text-align: center;
}

.skills__title {
  max-width: 70%;
  margin-inline: auto;
  color: var(--skills-orange);
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: 12.55vw;
  line-height: .89;
  font-weight: 900;
}

.skills__title .char {
  position: relative;
  display: inline-block;
  will-change: transform, clip-path;
}

.skills__title .space {
  width: .22em;
}

.skills__content {
  color: var(--skills-black);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: .5rem;
  padding-top: 2.25rem;
  grid-template-rows: auto;
  grid-template-areas:
    "d d d d d d d d";
}

/* ---------- MOBILE 3D WHEEL ---------- */
.skills__mobile-wheel {
  grid-area: d;
  width: calc(100% + 3rem);
  max-width: none;
  height: 14rem;
  margin-inline: -1.5rem;
  position: relative;
  display: flex;
  overflow: hidden;
  clip-path: inset(0);
  contain: paint;
  isolation: isolate;
  touch-action: pan-x;
}

.skills__mobile-wheel::before,
.skills__mobile-wheel::after {
  content: "";
  z-index: 5;
  pointer-events: none;
  height: calc(50% - 16px);
  position: absolute;
  left: 0;
  right: 0;
}

.skills__mobile-wheel::before {
  top: -.5px;
  background: linear-gradient(
    #F3E9DD,
    #F3E9DDfa 10.79%,
    #F3E9DDec 21.99%,
    #F3E9DDd7 33.34%,
    #F3E9DDbd 44.59%,
    #F3E9DD9f 55.48%,
    #F3E9DD80 65.75%,
    #F3E9DD60 75.14%,
    #F3E9DD42 83.41%,
    #F3E9DD28 90.28%,
    #F3E9DD13 95.51%,
    #F3E9DD05 98.83%,
    #F3E9DD00
  );
}

.skills__mobile-wheel::after {
  bottom: -.5px;
  background: linear-gradient(
    #F3E9DD00,
    #F3E9DD05 1.17%,
    #F3E9DD13 4.49%,
    #F3E9DD28 9.72%,
    #F3E9DD42 16.59%,
    #F3E9DD60 24.86%,
    #F3E9DD80 34.25%,
    #F3E9DD9f 44.52%,
    #F3E9DDbd 55.41%,
    #F3E9DDd7 66.66%,
    #F3E9DDec 78.01%,
    #F3E9DDfa 89.21%,
    #F3E9DD
  );
}

.wheel__scene {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.wheel__viewport {
  position: relative;
  width: 100%;
  height: 32px;
  perspective: 1000px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.wheel__slides {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.wheel__slide {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  letter-spacing: -.01em;
  font-size: min(1.875rem, 7vw);
  line-height: 1.16667;
  font-weight: 500;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition:
    transform .58s cubic-bezier(.25,.46,.45,.94),
    opacity .42s ease,
    font-weight .2s linear;
}

/* SKILLS MOBILE — Installation Design & Production su 2 righe */
@media (max-width: 830px) {
  .skills__mobile-wheel .wheel__slide:nth-child(5) {
    line-height: 0.82;
  }
}

/* Desktop list exists in DOM but is not shown on mobile. */
.skills__desktop {
  display: none;
}

@media (min-width: 831px) {
  .skills {
    overflow: visible;
    padding-top: 5.25rem;
    padding-bottom: 3.75rem;
  }

  .skills__container {
    padding-inline: 2rem;
  }

  .skills__header {
    height: 2em;
  }

  .skills__title {
    position: sticky;
    top: 35vh;
    max-width: none;
    font-size: 10.75vw;
  }

  .skills__content {
    padding-top: 0;
    gap: 1.875rem;
    grid-template-rows: 200px auto 200px;
    grid-template-areas: none;
  }

  .skills__desktop {
    grid-area: 1 / 1 / 4 / 9;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    margin-inline: -2rem;
    overflow: clip;
  }

  .skills__desktop-list {
    grid-area: 2 / 3 / 3 / 7;
    display: flex;
    flex-direction: column;
    text-align: center;
    isolation: isolate;
  }

  .skills__desktop-item {
    position: relative;
    z-index: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.18;
    letter-spacing: -.02em;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: clamp(42px, 3.8vw, 58px);
    font-weight: 700;
  }

  .skills__desktop-item[data-multiple-words="true"] {
    column-gap: .32em;
  }

  .skills__desktop-item > span {
    position: relative;
    z-index: 20;
  }

  .skills__mobile-wheel {
    display: none;
  }
}

@media (min-width: 1100px) {
  .skills__container {
    padding-inline: 3.125rem;
  }

  .skills__desktop {
    margin-inline: -3.125rem;
  }
}

/* TwoShot fine tuning: il focus resta sempre contenuto nella viewport. */
@media (min-width: 831px) {
  .skills__desktop-list {
    width: 100%;
    min-width: 0;
  }

  .skills__desktop-item {
    max-width: 100vw;
  }
}