/* =========================================================
   PAGE ABOUT — ESTILOS
   ========================================================= */

/* ─── LAYOUT PRINCIPAL ─────────────────────────────────── */
.about-content {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 16px;
  align-items: start; /* necessário para o sticky funcionar */
  padding: 0 0 clamp(80px, 12vw, 160px);
}

/* ─── COLUNA ESQUERDA — BIO (sticky) ─────────────────── */
.about-content__bio-wrap {
  grid-column: span 8;
  position: sticky;
  top: calc(var(--nav-height));
  align-self: start;
}

.about-content__bio p {
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -.05em;
  line-height: 1.5em;
  color: #d9d9d9;
  margin-bottom: 1.5em;
}

.about-content__bio p:last-child {
  margin-bottom: 0;
}

.about-content__bio strong,
.about-content__bio b {
  color: #818181;
  font-weight: 500;
}

/* ─── COLUNA DIREITA — PRÊMIOS ────────────────────────── */
.about-content__awards {
  grid-column: span 3;
  padding-left: 0;  
}

.about-content__awards > h2 {
  color: #e7af19;
  font-weight: 400;
  font-size: .875rem;
  margin: -8px 0 24px;
}

.awards-group {
  margin-bottom: clamp(28px, 4vw, 32px);
}

.awards-group:last-child {
  margin-bottom: 0;
}

.awards-group__title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -.05em;
  /* text-transform: uppercase; */
  color: var(--color-muted);
  margin-bottom: 16px;
}

.awards-group__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.awards-group__item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
}

.award-level--grand-prix {
  color: #5c7b8c;
}

.award-level--gold {
  color: #e7af19;
}

.award-level--silver {
  color: #7a7a7a;
}

.award-level--bronze {
  color: #a67035;
}

.award-level--shortlist {
  color: var(--color-text);
}

.award-name {
  color: var(--color-text);
}

.awards-group__text {
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  color: var(--color-muted);
  line-height: 1.6;
}

/* Levels de prêmio com cor */
.award-level {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -.05em;
}

/* .award-level--grand-prix  { color: #e0c97e; }
.award-level--gold        { color: #d4a93a; }
.award-level--silver      { color: #a8b0bd; }
.award-level--bronze      { color: #c4874a; }
.award-level--shortlist   { color: var(--color-muted); } */

.award-name {
  color: var(--color-text);
  flex: 1;
  letter-spacing: -.05em;
}

/* Contato */
.about-email {
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  color: var(--color-muted);
  transition: color var(--transition-base);
}

.about-email:hover {
  color: var(--color-text);
}

/* ─── GALERIA SWIPER ──────────────────────────────────── */
.about-gallery {
  width: 100%;
  overflow: hidden;
}

.about-gallery__swiper {
  width: 100%;
}

/*
 * CHAVE DO MARQUEE CONTÍNUO:
 * O Swiper aplica `transition: transform Xms ease` via inline style.
 * Sobrescrever só o timing-function para `linear` faz as transições
 * encadeadas com delay:0 parecerem um único movimento ininterrupto.
 */
.about-gallery__swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.about-gallery .swiper-slide {
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  cursor: default;
}

.about-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform, filter, clip-path;
}


/* ─── GLITCH EFFECTS — 4 variantes via classe ─────────── */

/* A — RGB Split: canais de cor deslocados */
@keyframes glitch-a {
  0%, 100% { transform: translate(0);           filter: none; }
  10%       { transform: translate(-4px, 1px);   filter: drop-shadow(4px 0 0 rgba(255,0,80,.9)) drop-shadow(-4px 0 0 rgba(0,200,255,.9)); }
  20%       { transform: translate(4px, -1px);   filter: drop-shadow(-4px 0 0 rgba(255,0,80,.9)) drop-shadow(4px 0 0 rgba(0,200,255,.9)); }
  30%       { transform: translate(0);           filter: none; }
  60%       { transform: translate(2px, 2px);    filter: drop-shadow(-3px 0 0 rgba(0,255,120,.8)) drop-shadow(3px 0 0 rgba(200,0,255,.8)); }
  70%       { transform: translate(-2px, -2px);  filter: none; }
}
.glitch-a:hover img {
  animation: glitch-a 0.45s steps(1) infinite;
}

/* B — Scan Slice: fatias horizontais pulando lateralmente */
@keyframes glitch-b {
  0%, 100% { clip-path: none;                                              transform: translate(0); }
  15%       { clip-path: polygon(0 12%, 100% 12%, 100% 28%, 0 28%);       transform: translate(-8px, 0); }
  30%       { clip-path: polygon(0 55%, 100% 55%, 100% 78%, 0 78%);       transform: translate(6px, 0); }
  45%       { clip-path: none;                                              transform: translate(0); }
  65%       { clip-path: polygon(0 3%, 100% 3%, 100% 8%, 0 8%);           transform: translate(10px, 0); }
  80%       { clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%);       transform: translate(-6px, 0); }
  90%       { clip-path: none;                                              transform: translate(0); }
}
.glitch-b:hover img {
  animation: glitch-b 0.5s steps(1) infinite;
}

/* C — Wave Skew: distorção angular + rotação de matiz */
@keyframes glitch-c {
  0%, 100% { transform: skewX(0deg)   scaleX(1);    filter: none; }
  10%       { transform: skewX(-10deg) scaleX(1.03); filter: hue-rotate(80deg)  saturate(4) brightness(1.2); }
  20%       { transform: skewX(8deg)  scaleX(0.97); filter: hue-rotate(200deg) saturate(3); }
  35%       { transform: skewX(0deg)   scaleX(1);    filter: none; }
  70%       { transform: skewX(5deg)  scaleX(1.01); filter: hue-rotate(-80deg) brightness(1.4) saturate(2); }
  80%       { transform: skewX(0deg)   scaleX(1);    filter: none; }
}
.glitch-c:hover img {
  animation: glitch-c 0.55s steps(1) infinite;
}

/* D — Stutter Flicker: piscada rápida + deslocamento brusco */
@keyframes glitch-d {
  0%         { opacity: 1; transform: translate(0);          filter: none; }
  9%         { opacity: 1; transform: translate(0);          filter: none; }
  10%        { opacity: 0; transform: translate(6px, 0);     filter: brightness(2); }
  11%        { opacity: 1; transform: translate(-6px, 3px);  filter: none; }
  20%        { opacity: 1; transform: translate(0);          filter: none; }
  49%        { opacity: 1; transform: translate(0);          filter: none; }
  50%        { opacity: 0; transform: translate(-8px, -3px); filter: brightness(3) saturate(5); }
  51%        { opacity: 1; transform: translate(8px, 3px);   filter: none; }
  52%        { opacity: 0; }
  53%        { opacity: 1; transform: translate(0);          filter: none; }
  100%       { opacity: 1; transform: translate(0);          filter: none; }
}
.glitch-d:hover img {
  animation: glitch-d 0.35s steps(1) infinite;
}

/* ─── RESPONSIVO ──────────────────────────────────────── */
@media (max-width: 900px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: clamp(10px, 2vw, 40px);
    padding: 0 0 clamp(20px, 8vw, 130px);
  }

  .about-content__bio-wrap {
    grid-column: 1;
    position: static;
  }

  .about-content__awards {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1;
    /* padding-top: clamp(28px, 4vw, 48px); */
  }

  .about-content__awards > h2 {
    width: 100%;    
  }

  .awards-group {
    width: 50%;
  }

  .about-gallery .swiper-slide {
    width: clamp(140px, 55vw, 220px);
  }
}

@media (max-width: 600px) {
  .awards-group {
    width: 100%;
  }
}

@media (min-width: 1200px) {  
  .about-content__bio {
    max-width: 600px;
  }
}