/* ============================ */
/* Glitch titre                    */
/* ============================ */

/* ========================
   Style de base pour .david
   ======================== */
.hero {
position: absolute;
padding: 0 15px 0 15px;
transform-origin: top left; 
font-size: clamp(40px, 6vw, 80px); 
font-family: 'poppins';
font-weight: bolder;
color: #ffd2d2;
letter-spacing: 10px;
line-height: 1;
z-index: 99999;
white-space: nowrap;
letter-spacing: 0.1rem;
border-radius: 5PX;
/* Petit effet de lueur/flou pour un rendu "néon" */
filter: drop-shadow(0 1px 3px);
}

.hero-container {
    position: absolute;
    padding: 200px 0;
    text-align: center;
    top: -250px;      
    left: -100px;
    }
      


.layers {
position: relative;
}

.layers::before,
.layers::after {
content: attr(data-text);
position: absolute;
width: 110%;
z-index: -1;
white-space: pre;
}

.layers::before {
top: 10px;
left: 15px;
color: #e0287d;
}

.layers::after {
top: 5px;
left: -10px;
color: #1bc7fb;
}

.single-path {
clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
);
}

.paths {
animation: paths 5s step-end infinite;
}

@keyframes paths {
0% {
    clip-path: polygon(
    0% 43%,
    83% 43%,
    83% 22%,
    23% 22%,
    23% 24%,
    91% 24%,
    91% 26%,
    18% 26%,
    18% 83%,
    29% 83%,
    29% 17%,
    41% 17%,
    41% 39%,
    18% 39%,
    18% 82%,
    54% 82%,
    54% 88%,
    19% 88%,
    19% 4%,
    39% 4%,
    39% 14%,
    76% 14%,
    76% 52%,
    23% 52%,
    23% 35%,
    19% 35%,
    19% 8%,
    36% 8%,
    36% 31%,
    73% 31%,
    73% 16%,
    1% 16%,
    1% 56%,
    50% 56%,
    50% 8%
    );
}

5% {
    clip-path: polygon(
    0% 29%,
    44% 29%,
    44% 83%,
    94% 83%,
    94% 56%,
    11% 56%,
    11% 64%,
    94% 64%,
    94% 70%,
    88% 70%,
    88% 32%,
    18% 32%,
    18% 96%,
    10% 96%,
    10% 62%,
    9% 62%,
    9% 84%,
    68% 84%,
    68% 50%,
    52% 50%,
    52% 55%,
    35% 55%,
    35% 87%,
    25% 87%,
    25% 39%,
    15% 39%,
    15% 88%,
    52% 88%
    );
}

30% {
    clip-path: polygon(
    0% 53%,
    93% 53%,
    93% 62%,
    68% 62%,
    68% 37%,
    97% 37%,
    97% 89%,
    13% 89%,
    13% 45%,
    51% 45%,
    51% 88%,
    17% 88%,
    17% 54%,
    81% 54%,
    81% 75%,
    79% 75%,
    79% 76%,
    38% 76%,
    38% 28%,
    61% 28%,
    61% 12%,
    55% 12%,
    55% 62%,
    68% 62%,
    68% 51%,
    0% 51%,
    0% 92%,
    63% 92%,
    63% 4%,
    65% 4%
    );
}

45% {
    clip-path: polygon(
    0% 33%,
    2% 33%,
    2% 69%,
    58% 69%,
    58% 94%,
    55% 94%,
    55% 25%,
    33% 25%,
    33% 85%,
    16% 85%,
    16% 19%,
    5% 19%,
    5% 20%,
    79% 20%,
    79% 96%,
    93% 96%,
    93% 50%,
    5% 50%,
    5% 74%,
    55% 74%,
    55% 57%,
    96% 57%,
    96% 59%,
    87% 59%,
    87% 65%,
    82% 65%,
    82% 39%,
    63% 39%,
    63% 92%,
    4% 92%,
    4% 36%,
    24% 36%,
    24% 70%,
    1% 70%,
    1% 43%,
    15% 43%,
    15% 28%,
    23% 28%,
    23% 71%,
    90% 71%,
    90% 86%,
    97% 86%,
    97% 1%,
    60% 1%,
    60% 67%,
    71% 67%,
    71% 91%,
    17% 91%,
    17% 14%,
    39% 14%,
    39% 30%,
    58% 30%,
    58% 11%,
    52% 11%,
    52% 83%,
    68% 83%
    );
}

76% {
    clip-path: polygon(
    0% 26%,
    15% 26%,
    15% 73%,
    72% 73%,
    72% 70%,
    77% 70%,
    77% 75%,
    8% 75%,
    8% 42%,
    4% 42%,
    4% 61%,
    17% 61%,
    17% 12%,
    26% 12%,
    26% 63%,
    73% 63%,
    73% 43%,
    90% 43%,
    90% 67%,
    50% 67%,
    50% 41%,
    42% 41%,
    42% 46%,
    50% 46%,
    50% 84%,
    96% 84%,
    96% 78%,
    49% 78%,
    49% 25%,
    63% 25%,
    63% 14%
    );
}

90% {
    clip-path: polygon(
    0% 41%,
    13% 41%,
    13% 6%,
    87% 6%,
    87% 93%,
    10% 93%,
    10% 13%,
    89% 13%,
    89% 6%,
    3% 6%,
    3% 8%,
    16% 8%,
    16% 79%,
    0% 79%,
    0% 99%,
    92% 99%,
    92% 90%,
    5% 90%,
    5% 60%,
    0% 60%,
    0% 48%,
    89% 48%,
    89% 13%,
    80% 13%,
    80% 43%,
    95% 43%,
    95% 19%,
    80% 19%,
    80% 85%,
    38% 85%,
    38% 62%
    );
}

1%,
7%,
33%,
47%,
78%,
93% {
    clip-path: none;
}
}

.movement {
position: relative;
animation: movement 5s step-end infinite;
}

@keyframes movement {
0% {
    top: 0px;
    left: -20px;
}

15% {
    top: 10px;
    left: 10px;
}

60% {
    top: 5px;
    left: -10px;
}

75% {
    top: -5px;
    left: 20px;
}

100% {
    top: 10px;
    left: 5px;
}
}

.opacity {
animation: opacity 5s step-end infinite;
}

@keyframes opacity {
0% {
    opacity: 0.1;
}

5% {
    opacity: 0.7;
}

30% {
    opacity: 0.4;
}

45% {
    opacity: 0.6;
}

76% {
    opacity: 0.4;
}

90% {
    opacity: 0.8;
}

1%,
7%,
33%,
47%,
78%,
93% {
    opacity: 0;
}
}

.font {
animation: font 7s step-end infinite;
}

@keyframes font {
0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
}

20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
}

50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
}

60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
}

90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
}
}

.glitch span {
animation: paths 5s step-end infinite;
}

.glitch::before {
animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 5s step-end infinite;
}

.glitch::after {
animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 5s step-end infinite;
}


  


/* ============================ */
/* Glitch ttexte                     */
/* ============================ */

.glitch-wrapper::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 2px;
    width: 100%;
    height: 100%;
    color: rgb(199, 255, 202);
    text-shadow: -2px 0 red;
    animation: glitch-anim 4s infinite steps(10, end);
  }
  
  
  .header-left h1::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    animation: glitch-anim2 5s infinite steps(10, end);
  }
  
  
  .header-left h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    /* Par exemple, animation glitch-anim3 */
    animation: glitch-anim3 0.8s infinite steps(6, end);
  }
  
  
  @keyframes glitch-anim {
    0%   { clip: rect(5px, 9999px, 15px, 0); transform: translate(2px, 0); }
    4%   { clip: rect(5px, 9999px, 15px, 0); transform: translate(12px, 2px); }
    8%   { clip: rect(5px, 9999px, 20px, 0); transform: translate(8px, 4px); }
    10%  { clip: rect(10px, 9999px, 18px, 0); transform: translate(16px, 0); }
    12%  { clip: rect(10px, 9999px, 18px, 0); transform: translate(-5px, -3px); }
    14%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(20px, 5px); }
    16%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(18px, -2px); }
    20%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 2px); }
    22%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(22px, 4px); }
    24%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(15px, -5px); }
    25%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(10px, -5px); }
    27%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(24px, 2px); }
    30%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 0); }
    32%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(20px, -3px); }
    34%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(18px, 6px); }
    35%  { clip: rect(10px, 9999px, 18px, 0); transform: translate(14px, 0); }
    41%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(-8px, 6px); }
    42%  { clip: rect(10px, 9999px, 18px, 0); transform: translate(20px, 8px); }
    44%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(16px, -4px); }
    45%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(12px, 4px); }
    48%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(22px, 0); }
    50%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, -4px); }
    52%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(24px, 2px); }
    54%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(20px, -2px); }
    56%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(18px, 3px); }
    60%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(6px, 3px); }
    65%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(26px, 4px); }
    70%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(-6px, -2px); }
    /* 75%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(20px, 0); }
    80%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(0, 0); }
    85%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(16px, -6px); }
    90%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(14px, 2px); }
    92%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(18px, 0); }
    94%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(22px, -3px); }
    96%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(20px, 3px); }
    98%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(24px, -4px); } */
    100% { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 0); }
  }
  
  
  @keyframes glitch-anim2 {
    0%   { clip: rect(5px, 9999px, 15px, 0); transform: translate(-2px, 0); }
    /* 4%   { clip: rect(6px, 9999px, 16px, 0); transform: translate(-12px, -2px); }
    8%   { clip: rect(7px, 9999px, 17px, 0); transform: translate(-8px, -4px); }
    10%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(10px, 5px); }
    12%  { clip: rect(7px, 9999px, 16px, 0); transform: translate(14px, 3px); }
    15%  { clip: rect(10px, 9999px, 18px, 0); transform: translate(5px, 3px); } */
    18%  { clip: rect(9px, 9999px, 19px, 0); transform: translate(16px, -3px); }
    20%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(0, 4px); }
    22%  { clip: rect(10px, 9999px, 18px, 0); transform: translate(12px, -4px); }
    25%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 4px); }
    28%  { clip: rect(6px, 9999px, 16px, 0); transform: translate(-10px, 2px); }
    30%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(6px, -2px); }
    32%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(14px, 6px); }
    35%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-6px, 4px); }
    /* 38%  { clip: rect(9px, 9999px, 19px, 0); transform: translate(10px, -2px); }
    40%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(0, 0); }
    42%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(-12px, 4px); }
    45%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(0, 4px); } */
    48%  { clip: rect(9px, 9999px, 19px, 0); transform: translate(10px, -6px); }
    50%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 0); }
    52%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(8px, 2px); }
    55%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-8px, -2px); }
    58%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(12px, 3px); }
    60%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(0, 0); }
    62%  { clip: rect(9px, 9999px, 19px, 0); transform: translate(16px, -4px); }
    65%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-6px, 4px); }
    68%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(10px, 0); }
    70%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(-6px, 4px); }
    73%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(14px, -3px); }
    75%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(-6px, 4px); }
    78%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(10px, 3px); }
    80%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(0, 0); }
    85%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-10px, 4px); }
    88%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(12px, -2px); }
    90%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-6px, 2px); }
    93%  { clip: rect(9px, 9999px, 19px, 0); transform: translate(14px, 4px); }
    95%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-8px, -3px); }
    97%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(16px, 2px); }
    100% { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 0); }
  }
  
  @keyframes glitch-anim3 {
    0%   { clip: rect(5px, 9999px, 15px, 0); transform: translate(-2px, 0); }
    4%   { clip: rect(6px, 9999px, 16px, 0); transform: translate(-12px, -2px); }
    8%   { clip: rect(7px, 9999px, 17px, 0); transform: translate(15px, 5px); }
    10%  { clip: rect(8px, 9999px, 18px, 0); transform: translate(-10px, 4px); }
    12%  { clip: rect(7px, 9999px, 16px, 0); transform: translate(12px, -3px); }
    14%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(25px, 3px); }
    16%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(14px, 3px); }
    20%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(0, 4px); }
    22%  { clip: rect(10px, 9999px, 18px, 0); transform: translate(12px, -4px); }
    25%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 4px); }
    28%  { clip: rect(6px, 9999px, 16px, 0); transform: translate(-10px, 2px); }
    30%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(6px, -2px); }
    32%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(14px, 6px); }
    /* 35%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-6px, 4px); }
    38%  { clip: rect(9px, 9999px, 19px, 0); transform: translate(10px, -2px); }
    40%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(0, 0); }
    42%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(-12px, 4px); }
    45%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(0, 4px); }
    48%  { clip: rect(9px, 9999px, 19px, 0); transform: translate(10px, -6px); }
    50%  { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 0); }
    52%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(8px, 2px); }
    55%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-8px, -2px); }
    58%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(12px, 3px); } */
    60%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(0, 0); }
    62%  { clip: rect(9px, 9999px, 19px, 0); transform: translate(16px, -4px); }
    65%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-6px, 4px); }
    68%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(10px, 0); }
    72%  { clip: rect(10px, 9999px, 20px, 0); transform: translate(-6px, 4px); }
    76%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(14px, -3px); }
    80%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(0, 0); }
    84%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-10px, 4px); }
    88%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(12px, -2px); }
    92%  { clip: rect(8px, 9999px, 16px, 0); transform: translate(-6px, 2px); }
    96%  { clip: rect(7px, 9999px, 17px, 0); transform: translate(20px, -2px); }
    100% { clip: rect(5px, 9999px, 15px, 0); transform: translate(0, 0); }
  }