/* ─────────────────────────────────────────────────────────────────────────
   JorTech — intro.css
   Styles for the full-screen intro animation overlay.
   Structure: #intro shell > .ph phases > slides.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Shell ── */
#intro {
  position:   fixed;
  inset:      0;
  z-index:    9999;
  background: #000;
  overflow:   hidden;
}

/* Particle canvas (behind everything) */
#ptcl {
  position:       absolute;
  inset:          0;
  pointer-events: none;
}

/* Skip button — bottom-right */
.skip-btn {
  position:     absolute;
  bottom:       1.6rem;
  right:        2rem;
  z-index:      50;
  color:        rgba(255,255,255,.70);
  font-size:    .78rem;
  cursor:       pointer;
  font-family:  var(--font);
  border:       1px solid rgba(255,255,255,.35);
  padding:      .35rem .9rem;
  border-radius: 4px;
  transition:   color .2s, border-color .2s;
  user-select:  none;
}
.skip-btn:hover {
  color:         #fff;
  border-color:  rgba(255,255,255,.4);
}

/* Progress bar — bottom edge (3 px thick) */
.prog-bar {
  position:   absolute;
  bottom:     0;
  left:       0;
  height:     3px;
  z-index:    50;
  background: linear-gradient(90deg, var(--titleColor), var(--accent2));
  width:      0;
}

/* ── Phase wrapper (each acte = one .ph) ── */
.ph {
  position:       absolute;
  inset:          0;
  z-index:        2;
  display:        flex;
  align-items:    center;
  justify-content: center;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .65s ease;
}
.ph.active {
  opacity:        1;
  pointer-events: auto;
}

/* ── Acte 1 : Logo ── */
.a1-logo {
  width:      clamp(260px, 80vw, 560px);
  opacity:    0;
  transform:  scale(.88);
  transition: opacity .8s ease, transform .8s ease;
}
.a1-logo.show { opacity: 1; transform: scale(1); }
.a1-logo svg  { width: 100%; height: auto; display: block; }

.a1-tag {
  font-size:      clamp(.78rem, 1.9vw, 1.05rem);
  color:          #58a6ff;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-top:     2rem;
  opacity:        0;
  transition:     opacity .5s ease;
}
.a1-tag.show { opacity: 1; }

/* ── Acte 2 : Personal intro ── */
.a2-ring {
  position:   relative;
  width:      clamp(140px, 18vw, 180px);
  height:     clamp(140px, 18vw, 180px);
  margin:     0 auto clamp(1.6rem, 3vw, 2.4rem);
  opacity:    0;
  transform:  scale(.8);
  transition: opacity .6s ease, transform .6s ease;
}
.a2-ring.show { opacity: 1; transform: scale(1); }

.a2-photo {
  width:           100%;
  height:          100%;
  border-radius:   50%;
  object-fit:      cover;
  object-position: top center;
  display:         block;
}

/* Conic gradient spinning ring */
.a2-ring::before {
  content:       "";
  position:      absolute;
  inset:         -5px;
  border-radius: 50%;
  background:    conic-gradient(var(--titleColor), var(--accent2), var(--accent3), var(--titleColor));
  animation:     spin 3s linear infinite;
  z-index:       -1;
}
.a2-ring::after {
  content:       "";
  position:      absolute;
  inset:         -2px;
  border-radius: 50%;
  background:    #000;
  z-index:       -1;
}

.a2-name {
  font-size:      clamp(2.6rem, 6.5vw, 4.4rem);
  font-weight:    900;
  letter-spacing: -1.5px;
  color:          #fff;
  opacity:        0;
  transform:      translateY(14px);
  transition:     opacity .5s ease .1s, transform .5s ease .1s;
}
.a2-name.show { opacity: 1; transform: translateY(0); }

.a2-role {
  font-size:      clamp(.85rem, 2.2vw, 1.2rem);
  color:          var(--titleColor);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top:     .6rem;
  opacity:        0;
  transition:     opacity .5s ease .25s;
}
.a2-role.show { opacity: 1; }

.a2-loc {
  font-size:      .88rem;
  color:          rgba(255,255,255,.62);
  margin-top:     .5rem;
  letter-spacing: 1px;
  opacity:        0;
  transition:     opacity .5s ease .4s;
}
.a2-loc.show { opacity: 1; }

/* ── Actes 3-6 : Fullscreen slides ── */
#ph2 { padding: 0; }

/* Section badge — top-left of slide */
.sec-badge {
  position:       absolute;
  top:            1.8rem;
  left:           2.5rem;
  z-index:        20;
  display:        flex;
  align-items:    center;
  gap:            .6rem;
  opacity:        0;
  transform:      translateX(-14px);
  transition:     opacity .4s ease, transform .4s ease;
}
.sec-badge.show { opacity: 1; transform: translateX(0); }

.sec-dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sec-label {
  font-size:      clamp(.68rem, 1.6vw, .85rem);
  font-weight:    700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ── Individual slide ── */
.slide {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity .55s ease;
}
.slide.on { opacity: 1; }

/* Background image with Ken Burns zoom */
.slide-bg {
  position:         absolute;
  inset:            0;
  background-size:  cover;
  background-position: center;
  transform:        scale(1.05);
  transition:       transform 2.8s ease;
  filter:           brightness(.5) saturate(1.1);
}
.slide.on .slide-bg { transform: scale(1); }

/* Dark gradient vignette over image */
.slide-vignette {
  position:   absolute;
  inset:      0;
  background:
    linear-gradient(to top,  rgba(0,0,0,.92) 0%, rgba(0,0,0,.4)  40%, rgba(0,0,0,.1) 100%),
    linear-gradient(to right, rgba(0,0,0,.25) 0%, transparent 55%);
}

/* Text block anchored to bottom-left */
.slide-text {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  padding:  clamp(2rem,5vw,3.5rem) clamp(2rem,6vw,5rem);
}

.slide-title {
  font-size:      clamp(2.4rem, 6vw, 5rem);
  font-weight:    900;
  letter-spacing: -1.5px;
  line-height:    1.05;
  color:          #fff;
  opacity:        0;
  transform:      translateY(18px);
  transition:     opacity .5s ease .2s, transform .5s ease .2s;
}
.slide.on .slide-title { opacity: 1; transform: translateY(0); }

.slide-sub {
  font-size:      clamp(.82rem, 1.8vw, 1rem);
  color:          rgba(255,255,255,.5);
  letter-spacing: 2px;
  margin-top:     .7rem;
  opacity:        0;
  transform:      translateY(8px);
  transition:     opacity .5s ease .38s, transform .5s ease .38s;
}
.slide.on .slide-sub { opacity: 1; transform: translateY(0); }

/* Coloured titleColor bar that grows on enter */
.slide-bar {
  width:        0;
  height:       4px;
  border-radius: 2px;
  margin-top:   1.2rem;
  transition:   width .9s ease .55s;
}
.slide.on .slide-bar { width: clamp(60px, 8vw, 100px); }

/* ── Acte 5 : Quality diagram background ── */
.diag-wrap {
  position:         absolute;
  inset:            0;
  background:       radial-gradient(ellipse 90% 70% at 50% 50%, #0a0e15 0%, #050810 100%);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          3rem 2rem;
}

/* ── Acte 6 : CTA ── */
.cta-wrap {
  position:         absolute;
  inset:            0;
  background:       radial-gradient(ellipse 80% 60% at 50% 50%, rgba(88,166,255,.07) 0%, #000 70%);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  text-align:       center;
  padding:          3rem;
}

/* ── Mobile overrides ── */
@media (max-width: 768px) {
  .slide-title { font-size: clamp(1.8rem, 7vw, 3rem); letter-spacing: -.5px; }
  .slide-text  { padding: 2rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   INTRO — Mobile responsive (≤ 600px) + 4K guard (≥ 2000px)
   Strategies: clamp() fluid type, vw units, max-width containers,
   reduced letter-spacing, overflow-x scroll for fixed SVGs.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Acte 1 */
  .a1-logo { width: clamp(240px, 85vw, 400px); }
  .a1-tag  {
    font-size:      clamp(.68rem, 3.2vw, .85rem);
    letter-spacing: 1.5px;
    text-align:     center;
    padding:        0 1rem;
    max-width:      90vw;
    word-break:     break-word;
  }

  /* Acte 2 */
  .a2-ring { width: clamp(110px, 28vw, 160px); height: clamp(110px, 28vw, 160px); }
  .a2-name {
    font-size:  clamp(1.7rem, 9vw, 2.8rem);
    max-width:  90vw;
  }
  .a2-role {
    font-size:      clamp(.72rem, 3.4vw, .92rem);
    letter-spacing: 1px;
    max-width:      90vw;
    text-align:     center;
    padding:        0 .5rem;
  }
  .a2-loc {
    font-size: clamp(.78rem, 3vw, .92rem);
    max-width: 90vw;
    text-align: center;
  }

  /* Actes 3-6 slides */
  .sec-badge { left: 1rem; top: 1rem; }
  .slide-title {
    font-size:      clamp(1.4rem, 7vw, 2.4rem);
    letter-spacing: -.5px;
  }
  .slide-sub {
    font-size:      clamp(.72rem, 3vw, .88rem);
    letter-spacing: 1px;
  }
  .slide-text { padding: 1.5rem 1.2rem; }

  /* Quality diagram: allow horizontal scroll instead of crushing */
  .diag-wrap {
    overflow-x:     auto;
    overflow-y:     hidden;
    align-items:    flex-start;
    justify-content: flex-start;
    padding:        1.5rem 0;
    -webkit-overflow-scrolling: touch;
  }
  .diag-wrap svg { min-width: 680px; width: 680px; height: auto; }

  /* CTA slide */
  .cta-wrap { padding: 2rem 1.5rem; }

  /* Skip button */
  .skip-btn { bottom: .8rem; right: .8rem; font-size: .72rem; padding: .28rem .65rem; }
}

/* ── Tablet (601–1024px) ── */
@media (min-width: 601px) and (max-width: 1024px) {
  .a1-logo { width: clamp(300px, 60vw, 480px); }
  .a1-tag  { letter-spacing: 3px; }
  .a2-ring { width: clamp(140px, 16vw, 170px); height: clamp(140px, 16vw, 170px); }
}

/* ── 4K / large screens (≥ 2000px) ── */
@media (min-width: 2000px) {
  .a1-logo  { width: clamp(560px, 30vw, 900px); }
  .a1-tag   { font-size: clamp(1.1rem, 1.4vw, 1.6rem); letter-spacing: 6px; }
  .a2-ring  { width: clamp(180px, 12vw, 280px); height: clamp(180px, 12vw, 280px); }
  .a2-name  { font-size: clamp(4rem, 5vw, 7rem); }
  .a2-role  { font-size: clamp(1.1rem, 1.5vw, 1.8rem); }
  .slide-title { font-size: clamp(5rem, 6vw, 9rem); }
  .skip-btn    { font-size: 1rem; padding: .5rem 1.4rem; bottom: 2.5rem; right: 3rem; }
}

/* ── Slide image brightness: 0.5 → 0.68 (more visible) ── */
/* Overrides the default in .slide-bg */
.slide-bg { filter: brightness(.68) saturate(1.15); }
.slide.on .slide-bg { transform: scale(1); filter: brightness(.72) saturate(1.2); }

/* ── Slide eyebrow label ── */
.slide-eyebrow {
  font-size:      clamp(.65rem, 1.3vw, .78rem);
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          rgba(255,255,255,.45);
  margin-bottom:  .9rem;
  opacity:        0;
  transition:     opacity .5s ease .1s;
}
.slide.on .slide-eyebrow { opacity: 1; }

/* ── Slide highlighted word — color + delayed glow ── */
.slide-hl { color: var(--c, #58a6ff); }

@keyframes hl-glow {
  from { color: #fff; text-shadow: none; }
  to   { color: var(--c, #58a6ff); text-shadow: 0 0 36px var(--c, #58a6ff); }
}
.slide.on .slide-hl { animation: hl-glow .7s ease 1.1s both; }

/* ── Slide description (general public sentence) ── */
.slide-desc {
  font-size:    clamp(.85rem, 1.7vw, 1.05rem);
  color:        rgba(255,255,255,.78);
  max-width:    52ch;
  line-height:  1.7;
  margin-top:   .8rem;
  opacity:      0;
  transform:    translateY(8px);
  transition:   opacity .5s ease .5s, transform .5s ease .5s;
}
.slide.on .slide-desc { opacity: 1; transform: translateY(0); }

/* ── Quality slide — desktop diagram header ── */
.slide-diag-desktop { position: absolute; inset: 0; }
.slide-diag-text-over {
  position:      absolute;
  top:           2.5rem;
  left:          clamp(2rem, 5vw, 5rem);
  z-index:       10;
}
.slide-title-over {
  font-size:   clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color:       #fff;
  line-height: 1.1;
  margin-top:  .5rem;
}

/* ── Quality slide — mobile text-only ── */
.slide-quality-mobile {
  display:          none;
  position:         absolute;
  inset:            0;
  background:       radial-gradient(ellipse 110% 80% at 50% 110%,
                      rgba(240,180,41,.10) 0%, #000 65%);
  flex-direction:   column;
  align-items:      flex-start;
  justify-content:  flex-end;
}

/* ── Show/hide per viewport ── */
@media (max-width: 600px) {
  .slide-diag-desktop { display: none; }
  .slide-quality-mobile { display: flex; }
}
@media (min-width: 601px) {
  .slide-quality-mobile { display: none; }
}

/* Mobile: smaller font for slide descriptions */
@media (max-width: 600px) {
  .slide-desc { font-size: clamp(.80rem, 3.5vw, .95rem); max-width: 90vw; }
  .slide-eyebrow { letter-spacing: 2px; }
}

/* ══ Sequential highlight animation (slide-hl-seq) ══
   Triggered when parent .slide gets .on class.
   Each span starts white, then transitions to --c color with glow. */
.slide-hl-seq { color: #fff; }

@keyframes hl-seq {
  0%   { color: #fff; text-shadow: none; }
  100% { color: var(--c); text-shadow: 0 0 28px var(--c); }
}
.slide.on .slide-hl-seq {
  animation: hl-seq .45s ease var(--d, 1s) both;
}

/* ══ Quality slide desktop: text at bottom-left ══ */
.slide-diag-text-over {
  position:  absolute;
  bottom:    clamp(2rem, 4vw, 3.5rem);
  left:      clamp(2rem, 5vw, 5rem);
  top:       auto;          /* override previous top:2.5rem */
  z-index:   10;
}
/* Bottom vignette so text is readable over diagram */
.slide-diag-desktop::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  height:     45%;
  background: linear-gradient(to top, rgba(5,8,16,.92) 0%, transparent 100%);
  z-index:    5;
  pointer-events: none;
}

/* title-over animations */
.slide-title-over .slide-eyebrow { opacity: 0; transition: opacity .5s ease .1s; }
.slide.on .slide-title-over .slide-eyebrow { opacity: 1; }

.slide-title-over {
  font-size:   clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 900;
  color:       #fff;
  line-height: 1.15;
  margin-top:  .5rem;
  opacity:     0;
  transform:   translateY(14px);
  transition:  opacity .5s ease .25s, transform .5s ease .25s;
}
.slide.on .slide-title-over { opacity: 1; transform: translateY(0); }

/* ══ Mobile quality layout ══ */
.slide-quality-mobile {
  position:         absolute;
  inset:            0;
  background:       #0a0e15;
  flex-direction:   column;
  overflow-y:       auto;
  -webkit-overflow-scrolling: touch;
}
.slide-quality-mobile-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        1.5rem 1rem 2rem;
  min-height:     100%;
  justify-content: center;
  gap:            1.5rem;
}
.mobile-quality-svg {
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  flex-shrink: 1;   /* autorise le rétrécissement si besoin */
}

.slide-text-mobile-q {
  position:  relative;
  padding:   0;
  width:     100%;
}

/* ══ Mobile show/hide ══ */
@media (max-width: 600px) {
  .slide-diag-desktop  { display: none; }
  .slide-quality-mobile { display: flex; }
}
@media (min-width: 601px) {
  .slide-quality-mobile { display: none; }
}


/* ── I build : plus grand que la 2e ligne ── */
.title-build {
  display:     block;
  font-size:   clamp(3.4rem, 7vw, 6rem);
  line-height: 1;
  margin-bottom: .25rem;
}

/* ── slide-title-over aligné sur slide-title ── */
.slide-title-over {
  font-size:   clamp(2.4rem, 5vw, 4.2rem) !important;
  font-weight: 900;
  line-height: 1.1;
}


/* v17 — Slide 01 tighter spacing and comma-separated phrasing */
.slide-title-ui {
  line-height: 1.06;
}

.title-build {
  display: block;
  font-size: clamp(3.4rem, 7vw, 6rem);
  line-height: 0.95;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .title-build {
    margin-bottom: 0;
    line-height: 0.96;
  }
  .slide-title-ui {
    line-height: 1.08;
  }
}



/* ══ Slide 01 — I build layout ════════════════════════════════
   title-build  = big first line (I build)
   title-second-line = same-size second line, fills full width
   No extra gap — line-height controls spacing naturally.
   ══════════════════════════════════════════════════════════════ */
.slide-title-ui {
  display:   block;
}

.title-build {
  display:       block;
  font-size:     clamp(3.8rem, 8.5vw, 7rem);
  line-height:   0.96;
  margin-bottom: 0.02em;   /* tiny nudge, same rhythm as other slides */
  font-weight:   900;
  letter-spacing: -2px;
}

.title-second-line {
  display:        block;
  font-size:      clamp(2.4rem, 6vw, 5rem);  /* identical to .slide-title */
  font-weight:    900;
  letter-spacing: -1.5px;
  line-height:    1.05;
  color:          #fff;
}

@media (max-width: 600px) {
  .title-build      { font-size: clamp(2.8rem, 10vw, 4rem); }
  .title-second-line { font-size: clamp(1.8rem, 7vw, 3rem); }
}


/* v19 — Slide 03 two-line title */
.title-project-line,
.title-project-rest {
  display: block;
}


/* ── External SVG quality diagrams ── */
.quality-diag-img {
  display:    block;
  width:      100%;
  height:     auto;
}
.quality-diag-desktop-img {
  max-width:  100%;
  object-fit: contain;
}