/* =========================
   COVER TEXT pos+fix media
   ========================= */
.cover_text_pos{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(300px, 50vw);
  text-align: left;
}
/* mobile cover */
@media (max-width: 700px){
  .project .cover_text{
  transform: translate(0%, 0%);
  text-align: left;
}
}

/* =========================================================
   MENUBAR freccia non cliccabile
========================================================= */
.freccia-btn--prev{ opacity: .3; }

.freccia-btn--prev{
  pointer-events: none;
}

/* =========================
   SYSTEM IMG
   ========================= */
.sys_img{
  scale: 0.8;
 }

/* =========================
   CONCEPT — Desktop: 3 colonne (centro allineato)
            Mobile: icone 2-col + testo sotto
   ========================= */

 .concept{
  width: 100%;
  background-color: var(--neros);
  padding: clamp(40px, 8vh, 100px) 0;
}

.concept_inner{
  margin: 0 auto;
  display: grid;

  /* ali uguali */
  grid-template-columns: 1fr minmax(320px, 60ch) 1fr;

  column-gap: clamp(16px, 4vw, 64px);
  align-items: center;

  /* opzionale: limita larghezza contenitore per non “sparare” troppo su ultra-wide */
  max-width: 1200px;
  padding-inline: 14px;
}



/* testo centrale (desktop) */
 .concept_text{
  margin: 0;
  justify-self: center;
  text-align: left;
  font-family: var(--testi-font-family);
  font-weight: var(--testi-font-weight);
  color: var(--blancos);
  font-size: var(--testi-font-size);
  letter-spacing: var(--testi-letter-spacing);
  line-height: var(--testi-line-height);
  font-style: var(--testi-font-style);
  text-indent: var( --testi-text-indent);
}

 .iphone_icon{
  justify-self: end;
  transform: translateX(-8vw);
  width: clamp(72px, 10vw, 100px);
  height: clamp(130px, 16vw, 170px);
  background-color: rgba(238, 238, 238, 100%);
  border-radius: 17px;
}

.orbis_icon{
  position: relative;
  justify-self: start;
  width: clamp(180px, 22vw, 260px);
  height: clamp(160px, 20vw, 220px);
}

/* figli interni: posizionati RELATIVI al box orbis_icon */
.orbis_icon .base{
  position: absolute;
  width: 190px;
  height: 80px;
  top: 95px;
  left: 34px;
  border-radius: 100% / 100%;
  border: 1px solid var(--blancos);
}

.orbis_icon .calotta{
  position: absolute;
  top: 20px;
  width: 140px;
  height: 135px;
  left: 60px;
  background: rgba(238, 238, 238, 1);
  border-radius: 100% / 100%;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 800px){
  .concept_inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    row-gap: clamp(18px, 4vh, 28px);
  }

  .orbis_icon{
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    transform: none;
    justify-self: center;
  }

  .orbis_icon .base,
  .orbis_icon .calotta{
    left: 50%;
    transform: translateX(-50%);
  }

  .concept_text{
    margin: 4vh;
    grid-column: 1 / -1;
    grid-row: 2 / 3;
  }

  .iphone_icon{
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    transform: none;   /* <-- mancava */
    justify-self: center;
  }
}


/* =========================
   STORYBOARD – HORIZONTAL SCROLL (tua base, ripulita)
   ========================= */

 .storyboard-scroll-wrapper{
  position: relative;
  min-height: 100vh;   /* ← chiave */
  width: 100%;
  overflow: hidden;
}

 .storyboard-scroll{
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
 .storyboard-scroll::-webkit-scrollbar{ display: none; }

 .storyboard-slide{
  flex: 0 0 100vw;
  height: 100%;
  scroll-snap-align: center;

  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;

  padding: clamp(24px, 4vw, 60px);
  box-sizing: border-box;
}

 .sb-illu{
  width: auto;
  max-height: 55vh;
  object-fit: contain;
  display: block;
}

 .sb-right{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-content: start;
}

 .sb-right--leftText{
  grid-column: 1 / 2;
}

 .sb-text{
  margin: 0;
  font-family: var(--testi-font-family);
  font-weight: var(--testi-font-weight);
  color: var(--black);
  font-size: var(--testi-font-size);
  letter-spacing: var(--testi-letter-spacing);
  line-height: var(--testi-line-height);
  font-style: var(--testi-font-style);
  max-width: 40ch;
}




/* mobile */
@media (max-width: 700px){
   .storyboard-scroll-wrapper{ height: 100vh; }
   .sb-text{ max-width: 90%; }
     .storyboard-slide{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
  }
   .sb-illu{ max-height: 25vh; }
   .sb-arrow{ right: 18px; top: 20vh;}
}

/* =========================
   EFFETTI LUCE – horizontal scroll “pulito”
   ========================= */

 .effettiluce{
  width: 100%;
  overflow: hidden;
  position: relative;
}

 .effettiluce_track{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  padding-inline: 1vw;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
 .effettiluce_track::-webkit-scrollbar{ display: none; }

 .effettiluce_track img{
  height: min(75vh, 900px);
  width: auto;
  display: block;
}

/* mobile effettiluce */
@media (max-width: 700px){
  .effettiluce_track img{
  height: min(50vh, 300px);
  width: auto;
  display: block;
  }
}
/* =========================
   UI — grid responsive (niente top: 300vh)
   ========================= */

 .ui_text{
  margin: 0;
  margin-top: clamp(16px, 3vh, 28px);
  max-width: 90vw;
  font-family: var(--testi-font-family);
  font-weight: var(--testi-font-weight);
  color: var(--black);
  font-size: var(--testi-font-size);
  letter-spacing: var(--testi-letter-spacing);
  line-height: var(--testi-line-height);
  font-style: var(--testi-font-style);
}

 .ui_grid{
  width: min(1200px, 50vw);
  margin: clamp(24px, 5vh, 64px) auto 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: clamp(16px, 3vw, 32px);
}

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

@media (max-width: 700px){
   .ui_grid{ grid-template-columns: 1fr; }

   .effettiluce_freccia{
    height: 3vh;
  }
}