/* ==========================================================
   CodeByCp Hero Ingredients Widget — Styles
   ========================================================== */

/* ── Section ── */
.cbcp-hi-section {
    position: relative;
    overflow: hidden;
}

/* ── Orbs ── */
.cbcp-hi-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.25;
    pointer-events: none;
}
.cbcp-hi-orb--1 {
    width: 500px; height: 500px;
    top: -150px; right: -100px;
    animation: cbcpHiOrbFloat 12s ease-in-out infinite;
}
.cbcp-hi-orb--2 {
    width: 400px; height: 400px;
    bottom: -100px; left: -80px;
    animation: cbcpHiOrbFloat 15s ease-in-out infinite reverse;
}

@keyframes cbcpHiOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -20px) scale(1.05); }
    66%      { transform: translate(-20px, 15px) scale(0.95); }
}

/* ── Grain ── */
.cbcp-hi-grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
}

/* ── Particles ── */
.cbcp-hi-particle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: cbcpHiParticle 8s ease-in-out infinite;
}
.cbcp-hi-particle:nth-child(1) { left: 8%;  animation-delay: 0s; }
.cbcp-hi-particle:nth-child(2) { left: 22%; animation-delay: 1.5s; width: 4px; height: 4px; }
.cbcp-hi-particle:nth-child(3) { left: 48%; animation-delay: 3s;   width: 8px; height: 8px; }
.cbcp-hi-particle:nth-child(4) { left: 68%; animation-delay: 0.8s; width: 5px; height: 5px; }
.cbcp-hi-particle:nth-child(5) { left: 85%; animation-delay: 2.2s; }
.cbcp-hi-particle:nth-child(6) { left: 93%; animation-delay: 4s;   width: 4px; height: 4px; }

@keyframes cbcpHiParticle {
    0%   { transform: translateY(80px) scale(0); opacity: 0; }
    20%  { opacity: 0.45; }
    80%  { opacity: 0.25; }
    100% { transform: translateY(-350px) scale(1.5); opacity: 0; }
}

/* ── Container ── */
.cbcp-hi-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* ── Header ── */
.cbcp-hi-header {
    text-align: center;
    margin-bottom: 60px;
}

.cbcp-hi-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2D2A24;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(18px);
    animation: cbcpHiFadeUp 0.8s ease forwards 0.3s;
}
.cbcp-hi-tag::before,
.cbcp-hi-tag::after {
    content: '';
    width: 28px;
    height: 1px;
    background: #2D2A24;
}

.cbcp-hi-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.1;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(28px);
    animation: cbcpHiFadeUp 0.9s ease forwards 0.5s;
}
.cbcp-hi-title em {
    font-style: italic;
    font-weight: 400;
    color: #C9981A;
}

.cbcp-hi-subtitle {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(16px, 2.2vw, 21px);
    color: #8A7F6B;
    font-style: italic;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(18px);
    animation: cbcpHiFadeUp 0.8s ease forwards 0.7s;
}

/* ── Cards Stack ── */
.cbcp-hi-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Card ── */
.cbcp-hi-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 20px;
    padding: 30px 32px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: transform 0.5s cubic-bezier(0.23,1,0.32,1),
                box-shadow 0.5s ease,
                background 0.4s ease;
}

.cbcp-hi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 0% 50%, rgba(232,185,49,0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cbcp-hi-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 50px rgba(201,152,26,0.15), 0 3px 12px rgba(0,0,0,0.04);
}
.cbcp-hi-card:hover::before { opacity: 1; }

/* Visible state */
.cbcp-hi-card.cbcp-hi-visible {
    animation: cbcpHiCardSlide 0.65s cubic-bezier(0.23,1,0.32,1) forwards;
}

@keyframes cbcpHiCardSlide {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Number Circle ── */
.cbcp-hi-num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 16px rgba(232,185,49,0.35);
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cbcp-hi-card:hover .cbcp-hi-num {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(232,185,49,0.45);
}

.cbcp-hi-num::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid #E8B931;
    opacity: 0;
    transition: opacity 0.3s;
}
.cbcp-hi-card:hover .cbcp-hi-num::after {
    opacity: 0.5;
    animation: cbcpHiPulse 1.6s ease-in-out infinite;
}

@keyframes cbcpHiPulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ── Card Content ── */
.cbcp-hi-card-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.cbcp-hi-card-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 14px;
    line-height: 1.2;
}

/* ── Benefit Tags ── */
.cbcp-hi-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cbcp-hi-benefits li {
    font-size: 13px;
    font-weight: 500;
    color: #4A4538;
    background: rgba(232,185,49,0.10);
    border: 1px solid rgba(232,185,49,0.25);
    padding: 6px 16px;
    border-radius: 50px;
    line-height: 1.3;
    white-space: nowrap;
    transition: background 0.3s, border-color 0.3s, transform 0.3s, color 0.3s;
}

.cbcp-hi-card:hover .cbcp-hi-benefits li {
    background: rgba(232,185,49,0.18);
    border-color: rgba(232,185,49,0.4);
}

.cbcp-hi-benefits li:hover {
    transform: translateY(-2px);
}

/* ── Bottom ── */
.cbcp-hi-bottom {
    text-align: center;
    margin-top: 55px;
    opacity: 0;
    animation: cbcpHiFadeUp 0.8s ease forwards 1.3s;
}

.cbcp-hi-bottom p {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-style: italic;
    color: #8A7F6B;
    margin: 0;
}

.cbcp-hi-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}
.cbcp-hi-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #E8B931;
}
.cbcp-hi-dots span:nth-child(2) {
    width: 7px;
    height: 7px;
}

@keyframes cbcpHiFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .cbcp-hi-card {
        padding: 22px 20px;
        gap: 16px;
    }
    .cbcp-hi-num {
        width: 46px;
        height: 46px;
        font-size: 13px;
    }
    .cbcp-hi-benefits li {
        font-size: 12px;
        padding: 5px 12px;
    }
    .cbcp-hi-stack {
        gap: 14px;
    }
    .cbcp-hi-header {
        margin-bottom: 40px;
    }
}