/* ═══════════════════════════════════════════════════
   ADICIS™ Lab — Hexagons
   v2 · Mobile-First Refactor
   ═══════════════════════════════════════════════════ */

/* ── Grid container ──────────────────────────────── */
.hexagon-grid {
    position: relative;
    width: 950px;
    max-width: 95vw;
    height: 750px;

    perspective: none;
    transform-style: flat;
}

@media (hover: hover) and (pointer: fine) {
    .hexagon-grid {
        perspective: 1500px;
        transform-style: preserve-3d;
    }
}

/* ── Hexágono individual ─────────────────────────── */
.hexagon {
    position: absolute;
    width: 150px;
    height: 150px;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: flat;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .hexagon {
        transform-style: preserve-3d;
    }
}

/* ── Overlay de luz (::before) ───────────────────── */
.hexagon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hexagon:hover::before  { opacity: 1; }
.hexagon:active::before { opacity: 1; }

/* ── Hover + Active ─────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .hexagon:hover {
        transform: translateZ(40px) scale(1.1) rotateZ(2deg);
        z-index: 10;
        filter: drop-shadow(0 15px 40px currentColor);
    }
}

.hexagon:active {
    transform: scale(1.08);
    z-index: 10;
    filter: drop-shadow(0 10px 25px currentColor);
    transition: all 0.15s ease;
}

/* ── Animação de descoberta (v2 — sobrescrita na v3) ─ */
.hexagon.discovered {
    animation: discover-pulse 0.8s ease;
}

@keyframes discover-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.15); }
}

/* ── Forma hexagonal (hex-shape) ────────────────── */
.hex-shape {
    width: 100%;
    height: 100%;
    position: relative;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 2px solid rgba(255,255,255,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    transition: all 0.4s ease;
    overflow: hidden;
    backdrop-filter: none;
}

@media (hover: hover) and (pointer: fine) {
    .hex-shape {
        backdrop-filter: blur(10px);
    }
}

/* ── Efeito brilho deslizante (::after) ─────────── */
.hex-shape::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .hexagon:hover .hex-shape::after { transform: translateX(100%); }
    .hexagon:hover .hex-shape {
        background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
        border-color: currentColor;
        box-shadow: inset 0 0 30px rgba(255,255,255,0.1);
    }
}

.hexagon:active .hex-shape::after { transform: translateX(100%); }
.hexagon:active .hex-shape {
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
    border-color: currentColor;
    box-shadow: inset 0 0 30px rgba(255,255,255,0.1);
}

/* ── Ícone ───────────────────────────────────────── */
.hex-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

@media (hover: hover) and (pointer: fine) {
    .hexagon:hover .hex-icon { transform: scale(1.15) rotateY(10deg); }
}

.hexagon:active .hex-icon { transform: scale(1.12); }

/* ── Label ───────────────────────────────────────── */
.hex-label {
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* ── Badge NEW ───────────────────────────────────── */
.hex-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--red);
    color: white;
    font-size: 0.7em;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(255,107,107,0.5);
    animation: badge-pulse 2s infinite;
    pointer-events: none;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}

/* ══════════════════════════════════════════════════
   POSICIONAMENTO DOS 10 HEXÁGONOS
   ══════════════════════════════════════════════════ */

.hex-center {
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    color: var(--gold);
}

.hex-center .hex-shape {
    background: linear-gradient(135deg, rgba(255,217,90,0.2), rgba(255,167,38,0.1));
    border-color: var(--gold);
    box-shadow: 0 0 40px rgba(255,217,90,0.2);
    animation: center-pulse 3s infinite;
}

@keyframes center-pulse {
    0%, 100% { box-shadow: 0 0 40px rgba(255,217,90,0.2); }
    50%       { box-shadow: 0 0 60px rgba(255,217,90,0.4); }
}

.hex-framework  { left: 12%;  top: 190px; color: var(--primary); }
.hex-researcher { left: 50%;  top: 190px; transform: translateX(-50%); color: var(--violet); }
.hex-cases      { right: 12%; top: 190px; color: var(--green); }

.hex-manifesto  { left: 5%;   top: 370px; color: var(--red); }
.hex-faq        { left: 28%;  top: 370px; color: var(--cyan); }
.hex-paper      { right: 28%; top: 370px; color: var(--amber); }
.hex-partnership{ right: 5%;  top: 370px; color: var(--pink); }

.hex-resources  { left: 28%;  top: 550px; color: var(--turquoise); }
.hex-timeline   { right: 28%; top: 550px; color: var(--purple); }

/* ══════════════════════════════════════════════════
   TOOLTIP
   ══════════════════════════════════════════════════ */
.tooltip {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(0, 0, 0, 0.95);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.85em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    border: 1px solid currentColor;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    backdrop-filter: none;
}

@media (hover: hover) and (pointer: fine) {
    .tooltip { backdrop-filter: blur(10px); }
}

.tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.95);
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .hexagon:hover .tooltip {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        bottom: -55px;
    }
}

@media (hover: none) {
    .hexagon:active .tooltip {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        bottom: -55px;
        transition: opacity 0.1s ease;
    }
}

/* ══════════════════════════════════════════════════
   RESPONSIVO — ESCALA DO GRID
   ══════════════════════════════════════════════════ */

@media (max-width: 968px) {
    .hexagon-grid {
        transform: scale(0.65);
        margin: -50px 0;
    }
}

@media (max-width: 768px) {
    .hexagon-grid {
        transform: scale(0.55);
        margin: -90px 0;
    }
    .hex-icon  { font-size: 2em; }
    .hex-label { font-size: 0.85em; }
}

@media (max-width: 640px) {
    .hexagon-grid {
        transform: scale(0.47);
        margin: -130px 0;
    }
    .hex-icon  { font-size: 1.8em; }
    .hex-label { font-size: 0.8em; }
}

@media (max-width: 430px) {
    .hexagon-grid {
        transform: scale(0.40);
        margin: -160px 0;
    }
    .hex-icon  { font-size: 1.6em; }
    .hex-label { font-size: 0.75em; }
}


/* ═══════════════════════════════════════════════════════════════
   ADICIS™ Lab — Hexagons — v3 · Thematic Animations
   ─────────────────────────────────────────────────────────────
   Etapas implementadas:
     ① Emojis      → index.html  (8 substituições semânticas)
     ② Stagger     → cascata de entrada sincronizada com loading screen
     ③ ~~Scanner~~ → removido a pedido do pesquisador
     ④ Idle Icons  → micro-animações temáticas por hexágono (desktop only)
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   @KEYFRAMES GLOBAIS
   ══════════════════════════════════════════════════ */

/* Centro: glow duplo — substitui center-pulse */
@keyframes center-glow {
    0%, 100% {
        box-shadow: 0 0 40px rgba(255,217,90,0.20);
        filter:     drop-shadow(0 0  0px rgba(255,217,90,0.00));
    }
    50% {
        box-shadow: 0 0 70px rgba(255,217,90,0.42),
                    0 0 100px rgba(255,167,38,0.12);
        filter:     drop-shadow(0 0 22px rgba(255,217,90,0.45));
    }
}

/* Stagger: fade-in opacity do hexágono-pai */
@keyframes hex-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Stagger: pop-in elástico da hex-shape */
@keyframes hex-shape-pop {
    0%   { transform: scale(0.68); }
    65%  { transform: scale(1.08); }
    100% { transform: scale(1.00); }
}

/* Centro — rotação estelar lenta */
@keyframes hex-star-spin {
    0%   { transform: scale(1.00) rotate(  0deg); }
    50%  { transform: scale(1.10) rotate(180deg); }
    100% { transform: scale(1.00) rotate(360deg); }
}

/* Framework — respiração cognitiva */
@keyframes hex-brain-breathe {
    0%, 100% {
        transform: scale(1.00);
        filter: drop-shadow(0 2px  5px rgba(0,0,0,0.50));
    }
    50% {
        transform: scale(1.12);
        filter: drop-shadow(0 2px 16px rgba(42,82,152,0.70));
    }
}

/* Researcher — foco institucional */
@keyframes hex-profile-focus {
    0%, 100%  { transform: scale(1.00) translateY( 0px); filter: drop-shadow(0 2px  5px rgba(0,0,0,0.50)); }
    35%        { transform: scale(1.10) translateY(-3px); filter: drop-shadow(0 4px 12px rgba(118,75,162,0.60)); }
    70%        { transform: scale(1.04) translateY(-1px); filter: drop-shadow(0 2px  8px rgba(118,75,162,0.30)); }
}

/* Cases — foco analítico */
@keyframes hex-microscope {
    0%, 55%, 100% { transform: scale(1.00) translateY( 0px); }
    22%            { transform: scale(1.22) translateY(-4px); }
    66%            { transform: scale(0.90) translateY( 3px); }
    82%            { transform: scale(1.06) translateY( 0px); }
}

/* Manifesto — balanço epistêmico */
@keyframes hex-balance {
    0%, 100% { transform: rotate(  0deg); }
    20%       { transform: rotate(-12deg); }
    55%       { transform: rotate( 10deg); }
    80%       { transform: rotate( -3deg); }
}

/* FAQ — pulso de consulta */
@keyframes hex-chat-bounce {
    0%, 100%  { transform: translateY( 0px) scale(1.00); }
    18%        { transform: translateY(-9px) scale(1.08); }
    32%        { transform: translateY( 0px) scale(1.00); }
    48%        { transform: translateY(-4px) scale(1.03); }
    60%        { transform: translateY( 0px) scale(1.00); }
}

/* Paper — precisão documental */
@keyframes hex-precision {
    0%, 62%, 100% { transform: scale(1.00) rotate( 0deg); }
    22%            { transform: scale(1.16) rotate(-7deg); }
    42%            { transform: scale(1.16) rotate( 0deg); }
    52%            { transform: scale(0.92) rotate( 5deg); }
}

/* Partnership — convergência orbital */
@keyframes hex-launch {
    0%, 100% { transform: translateY(  0px) rotate(-4deg); }
    25%       { transform: translateY(-11px) rotate(-4deg); }
    50%       { transform: translateY(-16px) rotate( 0deg); }
    75%       { transform: translateY( -8px) rotate( 6deg); }
    92%       { transform: translateY( -2px) rotate(-2deg); }
}

/* Resources — estrutura modular */
@keyframes hex-puzzle {
    0%, 100%  { transform: rotate(  0deg) scale(1.00); }
    25%        { transform: rotate( 22deg) scale(1.14); }
    50%        { transform: rotate(  0deg) scale(0.93); }
    75%        { transform: rotate(-18deg) scale(1.07); }
}

/* Timeline — progressão sequencial */
@keyframes hex-map-float {
    0%, 100% { transform: translateY( 0px) rotate( 0deg); }
    28%       { transform: translateY(-8px) rotate( 5deg); }
    70%       { transform: translateY( 4px) rotate(-3deg); }
}

/* discover-pulse — upgrade v3 (sobrescreve versão v2) */
@keyframes discover-pulse {
    0%   { filter: drop-shadow(0 5px 15px rgba(0,0,0,0.30));                  }
    20%  { filter: brightness(1.90) drop-shadow(0 0 36px currentColor);       }
    52%  { filter: brightness(0.85) drop-shadow(0 5px 15px rgba(0,0,0,0.30)); }
    78%  { filter: brightness(1.30) drop-shadow(0 0 16px currentColor);       }
    100% { filter: drop-shadow(0 5px 15px rgba(0,0,0,0.30));                  }
}


/* ══════════════════════════════════════════════════
   PRÉ-ANIMAÇÃO
   ══════════════════════════════════════════════════ */

#hexGrid:not(.hex-animated) .hexagon { opacity: 0; }


/* ══════════════════════════════════════════════════
   ② STAGGER ENTRANCE — cascata por camada
   ══════════════════════════════════════════════════ */

/* ── Camada 0 · Centro ─────────────────────────── */
#hexGrid.hex-animated .hex-center {
    animation: hex-fade-in 0.50s ease 0.12s both;
}
#hexGrid.hex-animated .hex-center .hex-shape {
    animation:
        center-glow   3.0s ease-in-out 0.82s infinite,
        hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.12s both;
}

/* ── Camada 1 ──────────────────────────────────── */
#hexGrid.hex-animated .hex-framework  { animation: hex-fade-in 0.50s ease 0.26s both; }
#hexGrid.hex-animated .hex-researcher { animation: hex-fade-in 0.50s ease 0.40s both; }
#hexGrid.hex-animated .hex-cases      { animation: hex-fade-in 0.50s ease 0.54s both; }

#hexGrid.hex-animated .hex-framework  .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.26s both; }
#hexGrid.hex-animated .hex-researcher .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.40s both; }
#hexGrid.hex-animated .hex-cases      .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.54s both; }

/* ── Camada 2 ──────────────────────────────────── */
#hexGrid.hex-animated .hex-manifesto  { animation: hex-fade-in 0.50s ease 0.68s both; }
#hexGrid.hex-animated .hex-faq        { animation: hex-fade-in 0.50s ease 0.82s both; }
#hexGrid.hex-animated .hex-paper      { animation: hex-fade-in 0.50s ease 0.96s both; }
#hexGrid.hex-animated .hex-partnership{ animation: hex-fade-in 0.50s ease 1.10s both; }

#hexGrid.hex-animated .hex-manifesto  .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.68s both; }
#hexGrid.hex-animated .hex-faq        .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.82s both; }
#hexGrid.hex-animated .hex-paper      .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.96s both; }
#hexGrid.hex-animated .hex-partnership .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 1.10s both; }

/* ── Camada 3 · Base ───────────────────────────── */
#hexGrid.hex-animated .hex-resources  { animation: hex-fade-in 0.50s ease 1.24s both; }
#hexGrid.hex-animated .hex-timeline   { animation: hex-fade-in 0.50s ease 1.38s both; }

#hexGrid.hex-animated .hex-resources  .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 1.24s both; }
#hexGrid.hex-animated .hex-timeline   .hex-shape { animation: hex-shape-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 1.38s both; }


/* ══════════════════════════════════════════════════
   ④ IDLE ICON ANIMATIONS — desktop only
   ══════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {

    .hex-center      .hex-icon { animation: hex-star-spin     12.0s linear      0s infinite; }
    .hex-framework   .hex-icon { animation: hex-brain-breathe  3.0s ease-in-out 0s infinite; }
    .hex-researcher  .hex-icon { animation: hex-profile-focus      4.5s ease-in-out 0s infinite; }
    .hex-cases       .hex-icon { animation: hex-microscope     4.0s ease-in-out 0s infinite; }
    .hex-manifesto   .hex-icon {
        animation:        hex-balance 4.5s ease-in-out 0s infinite;
        transform-origin: center top;
    }
    .hex-faq         .hex-icon { animation: hex-chat-bounce    3.5s ease-in-out 0s infinite; }
    .hex-paper       .hex-icon { animation: hex-precision      5.0s ease-in-out 0s infinite; }
    .hex-partnership .hex-icon { animation: hex-launch         2.8s ease-in-out 0s infinite; }
    .hex-resources   .hex-icon { animation: hex-puzzle         6.0s ease-in-out 0s infinite; }
    .hex-timeline    .hex-icon { animation: hex-map-float      4.5s ease-in-out 0s infinite; }

    .hexagon:hover .hex-icon {
        animation-play-state: paused;
    }

}


/* ══════════════════════════════════════════════════
   DISCOVER-PULSE — upgrade v3
   ══════════════════════════════════════════════════ */

.hexagon.discovered {
    animation: discover-pulse 1.0s ease;
}
/* ── SVG Icons in Hexagons ─────────────────────────────────────── */
.hex-svg-icon {
    width: 1.2em;
    height: 1.2em;
    display: block;
    margin: 0 auto;
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   HEX-PHOTO — Ilustrações PNG full-bleed por hexágono
   ─────────────────────────────────────────────────────────────
   Cada PNG foi pré-processado individualmente (crop quadrado +
   zoom de preenchimento + máscara hexagonal pointy-top idêntica
   ao clip-path da .hex-shape). Aqui apenas posicionamos a imagem
   para preencher 100% da área interna, com bordas coincidentes.
   ═══════════════════════════════════════════════════════════════ */

.hex-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    /* Clip redundante: garante bordas perfeitamente nítidas
       mesmo que o alpha do PNG sofra reamostragem */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Scrim inferior — legibilidade do rótulo sobre a ilustração */
.hex-shape.has-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(to top,
        rgba(2,11,31,0.88) 0%,
        rgba(2,11,31,0.30) 40%,
        transparent 62%);
}

/* O ícone SVG dá lugar à ilustração */
.hex-shape.has-photo .hex-icon { display: none; }

/* Rótulo ancorado na base, acima da imagem e do scrim */
.hex-shape.has-photo {
    justify-content: flex-end;
    padding-bottom: 16px;
}
.hex-shape.has-photo .hex-label {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0,0,0,0.95),
                 0 0 14px rgba(0,0,0,0.75);
}

/* ── <picture> wrapper transparente ao layout ──────────────────
   A <img.hex-photo> é absolutamente posicionada; envolvê-la em
   <picture> (para WebP + srcset @2x) não deve criar um flex-item.
   display:contents faz o <picture> desaparecer da árvore de layout,
   mantendo o comportamento idêntico ao da <img> solta original. */
.hex-shape.has-photo picture { display: contents; }