/* ============================================================
   NadPoint – Brand Hero Frontend CSS
   Full-width breakout · 25 Animations · Icon/Badge styles
   Seasonal overlays · Responsive fluid scaling
   ============================================================ */

/* ── 1. FULL-WIDTH BREAKOUT ─────────────────────────────────── */
/* The brand hero sits inside .ndp-section which has 40px padding.
   Override both the section padding AND the inner max-width for
   brand_hero only, making it truly edge-to-edge.               */
.ndp-section-brand_hero {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}
.ndp-section-brand_hero .ndp-section-header { display: none; }
.ndp-section-brand_hero .ndp-section-inner   { max-width: none !important; padding: 0 !important; }

.ndp-bh-section {
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Break out of any ancestor that still has horizontal padding */
.ndp-homepage .ndp-bh-section {
    margin-left:  calc(-1 * var(--bh-outer-pad, 0px));
    margin-right: calc(-1 * var(--bh-outer-pad, 0px));
    width: calc(100% + 2 * var(--bh-outer-pad, 0px));
}

/* ── 2. BACKGROUND VIDEO ────────────────────────────────────── */
.ndp-bh-bg-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}

/* ── 3. OVERLAY ─────────────────────────────────────────────── */
.ndp-bh-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
}

/* ── 4. INNER CONTENT ────────────────────────────────────────── */
.ndp-bh-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 860px;
    margin: 0 auto;
    padding: 50px 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.ndp-bh-inner.align-left   { align-items: flex-start; text-align: left; }
.ndp-bh-inner.align-center { align-items: center;     text-align: center; }
.ndp-bh-inner.align-right  { align-items: flex-end;   text-align: right; }

/* ── 5. ELEMENTS ─────────────────────────────────────────────── */
.ndp-bh-element { width: 100%; }

/* Brand logo image */
.ndp-bh-logo-img {
    max-width: min(360px, 80%); max-height: 200px;
    object-fit: contain; display: block; margin: 0 auto;
}
.align-left  .ndp-bh-logo-img { margin-left: 0; }
.align-right .ndp-bh-logo-img { margin-left: auto; margin-right: 0; }

/* Brand name text */
.ndp-bh-brand-name {
    margin: 0 0 10px; line-height: 1.15;
    word-break: break-word; display: block;
}
/* Gradient text mode */
.ndp-bh-brand-name.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Per-character colour mode */
.ndp-bh-brand-name .bh-char { display: inline; }

/* Subtitle */
.ndp-bh-subtitle {
    font-size: clamp(11px, 1.4vw, 14px);
    font-weight: 600; text-transform: uppercase;
    letter-spacing: 2px; margin: 0 0 10px; display: block;
}

/* Tagline */
.ndp-bh-tagline {
    line-height: 1.65; max-width: 640px; margin: 0 0 18px; display: block;
}
.ndp-bh-tagline-img { max-width: min(440px, 85%); height: auto; display: block; }

/* CTA */
.ndp-bh-cta {
    display: inline-block; padding: 13px 34px;
    text-decoration: none; font-weight: 700; font-size: 15px;
    transition: all .25s ease; margin: 10px 0;
}
.ndp-bh-cta-filled  { border: none; }
.ndp-bh-cta-outline { background: transparent !important; }
.ndp-bh-cta-ghost   { border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(5px); }
.ndp-bh-cta-pill    { border-radius: 50px !important; }
.ndp-bh-cta:hover   { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }

/* ── 6. SOCIAL ICON STYLES ────────────────────────────────────── */
.ndp-bh-social {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0;
}
.align-center .ndp-bh-social { justify-content: center; }
.align-left   .ndp-bh-social { justify-content: flex-start; }
.align-right  .ndp-bh-social { justify-content: flex-end; }

.ndp-bh-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all .25s ease;
    flex-shrink: 0; overflow: hidden;
}
.ndp-bh-social-link svg { display: block; }

/* Style 1: Circle */
.bh-icon-circle { border-radius: 50%; }
/* Style 2: Square */
.bh-icon-square { border-radius: 0; }
/* Style 3: Rounded */
.bh-icon-rounded { border-radius: 10px; }
/* Style 4: Outline */
.bh-icon-outline { background: transparent !important; border: 2px solid; }
/* Style 5: Gradient */
.bh-icon-gradient { border-radius: 50%; }
/* Style 6: Glass */
.bh-icon-glass {
    border-radius: 50%; background: rgba(255,255,255,.15) !important;
    backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
/* Style 7: 3D Shadow */
.bh-icon-3d { border-radius: 12px; box-shadow: 3px 4px 0 rgba(0,0,0,.35); }
/* Style 8: Pill */
.bh-icon-pill { border-radius: 50px; padding: 0 14px !important; }
/* Style 9: Flat */
.bh-icon-flat { background: transparent !important; border: none !important; }
/* Style 10: Neon */
.bh-icon-neon { border-radius: 50%; border: none; }

/* Social hover animations */
.bh-social-hover-lift:hover     { transform: translateY(-5px); }
.bh-social-hover-pulse:hover    { animation: ndpSocialPulse .5s ease; }
.bh-social-hover-spin:hover     { animation: ndpSocialSpin .5s ease; }
.bh-social-hover-shake:hover    { animation: ndpSocialShake .4s ease; }
.bh-social-hover-bounce:hover   { animation: ndpSocialBounce .6s ease; }

/* Social icon animation (continuous) */
.bh-social-anim-float  { animation: ndpFloat 3s ease-in-out infinite; }
.bh-social-anim-pulse  { animation: ndpPulse 2s ease-in-out infinite; }
.bh-social-anim-glow   { animation: ndpNeonGlow 2s ease-in-out infinite; }
.bh-social-anim-none   {}

/* Staggered delay for social icons */
.ndp-bh-social-link:nth-child(2) { animation-delay: .1s; }
.ndp-bh-social-link:nth-child(3) { animation-delay: .2s; }
.ndp-bh-social-link:nth-child(4) { animation-delay: .3s; }
.ndp-bh-social-link:nth-child(5) { animation-delay: .4s; }
.ndp-bh-social-link:nth-child(6) { animation-delay: .5s; }
.ndp-bh-social-link:nth-child(7) { animation-delay: .6s; }
.ndp-bh-social-link:nth-child(8) { animation-delay: .7s; }

/* ── 7. APP BADGE STYLES (15) ─────────────────────────────────── */
.ndp-bh-badges {
    display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0;
}
.align-center .ndp-bh-badges { justify-content: center; }
.align-left   .ndp-bh-badges { justify-content: flex-start; }
.align-right  .ndp-bh-badges { justify-content: flex-end; }
.ndp-bh-badges.badges-stack  { flex-direction: column; align-items: flex-start; }
.align-center .ndp-bh-badges.badges-stack { align-items: center; }

.ndp-bh-badge {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; transition: all .22s ease;
    min-width: 145px; padding: 10px 18px; font-family: inherit;
}
.ndp-bh-badge:hover { transform: translateY(-3px); }

/* Badge Style 1: Official Black */
.ndp-badge-s1  { background:#000;border-radius:10px;border:1px solid #333;color:#fff; }
/* Badge Style 2: Official White */
.ndp-badge-s2  { background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.15);color:#111; }
/* Badge Style 3: Minimal Outline */
.ndp-badge-s3  { background:transparent;border:2px solid currentColor;border-radius:10px; }
/* Badge Style 4: Brand Gradient */
.ndp-badge-s4  { background:linear-gradient(135deg,#1b3022,#c59b27);border-radius:10px;color:#fff;border:none; }
/* Badge Style 5: Glass */
.ndp-badge-s5  { background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:10px;color:#fff; }
/* Badge Style 6: Pill Rounded */
.ndp-badge-s6  { background:#000;border-radius:50px;color:#fff;border:none; }
/* Badge Style 7: Square */
.ndp-badge-s7  { background:#111;border-radius:4px;color:#fff;border:none; }
/* Badge Style 8: 3D */
.ndp-badge-s8  { background:#222;border-radius:10px;color:#fff;border:none;box-shadow:3px 5px 0 rgba(0,0,0,.5); }
/* Badge Style 9: Colorful Play */
.ndp-badge-s9  { background:linear-gradient(135deg,#4CAF50,#2196F3);border-radius:10px;color:#fff;border:none; }
/* Badge Style 10: Retro */
.ndp-badge-s10 { background:#fffdf0;border:2px solid #b8860b;border-radius:6px;color:#5c4400; }
/* Badge Style 11: Neon */
.ndp-badge-s11 { background:#000;border:1px solid #c59b27;border-radius:10px;color:#c59b27;box-shadow:0 0 12px #c59b2780; }
/* Badge Style 12: Dark Minimal */
.ndp-badge-s12 { background:#1a1a1a;border-radius:12px;color:#ddd;border:none; }
/* Badge Style 13: Frosted */
.ndp-badge-s13 { background:rgba(0,0,0,.35);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:12px;color:#fff; }
/* Badge Style 14: Shadow Card */
.ndp-badge-s14 { background:#fff;border-radius:12px;color:#111;border:none;box-shadow:0 8px 24px rgba(0,0,0,.25); }
/* Badge Style 15: Coloured by Platform */
.ndp-badge-s15-play  { background:#01875f;border-radius:10px;color:#fff;border:none; }
.ndp-badge-s15-apple { background:#555;border-radius:10px;color:#fff;border:none; }

.ndp-bh-badge-icon  { flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.ndp-bh-badge-text  { text-align:left; }
.ndp-bh-badge-sub   { font-size:10px; opacity:.75; display:block; }
.ndp-bh-badge-store { font-size:14px; font-weight:700; display:block; line-height:1.2; }

/* ── 8. 25 ANIMATION KEYFRAMES ────────────────────────────────── */
@keyframes ndpFloat      { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-18px)} }
@keyframes ndpSway       { 0%,100%{transform:translateX(0)} 50%{transform:translateX(22px)} }
@keyframes ndpPulse      { 0%,100%{transform:scale(1)}       50%{transform:scale(1.09)} }
@keyframes ndpGlowAnim   { 0%,100%{filter:drop-shadow(0 0 6px rgba(197,155,39,.5))} 50%{filter:drop-shadow(0 0 22px rgba(197,155,39,1))} }
@keyframes ndpBounce     { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-28px)} 60%{transform:translateY(-14px)} }
@keyframes ndpSpinSlow   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes ndpHeartbeat  { 0%,100%{transform:scale(1)} 14%{transform:scale(1.15)} 28%{transform:scale(1)} 42%{transform:scale(1.15)} 70%{transform:scale(1)} }
@keyframes ndpRubber     { 0%{transform:scale3d(1,1,1)} 30%{transform:scale3d(1.25,.75,1)} 40%{transform:scale3d(.75,1.25,1)} 50%{transform:scale3d(1.15,.85,1)} 65%{transform:scale3d(.95,1.05,1)} 75%{transform:scale3d(1.05,.95,1)} 100%{transform:scale3d(1,1,1)} }
@keyframes ndpJello      { 0%,100%{transform:skewX(0) skewY(0)} 11%{transform:skewX(-12.5deg) skewY(-12.5deg)} 22%{transform:skewX(6.25deg) skewY(6.25deg)} 33%{transform:skewX(-3.1deg) skewY(-3.1deg)} 44%{transform:skewX(1.56deg) skewY(1.56deg)} 55%{transform:skewX(-.78deg) skewY(-.78deg)} 77%{transform:skewX(.2deg) skewY(.2deg)} }
@keyframes ndpSwing      { 20%{transform:rotate(15deg)} 40%{transform:rotate(-10deg)} 60%{transform:rotate(5deg)} 80%{transform:rotate(-5deg)} 100%{transform:rotate(0)} }
@keyframes ndpWobble     { 0%{transform:none} 15%{transform:translate3d(-22%,0,0) rotate3d(0,0,1,-5deg)} 30%{transform:translate3d(18%,0,0) rotate3d(0,0,1,3deg)} 45%{transform:translate3d(-13%,0,0) rotate3d(0,0,1,-3deg)} 60%{transform:translate3d(9%,0,0) rotate3d(0,0,1,2deg)} 75%{transform:translate3d(-4%,0,0)} 100%{transform:none} }
@keyframes ndpFlash      { 0%,50%,100%{opacity:1} 25%,75%{opacity:.2} }
@keyframes ndpTada       { 0%{transform:scale3d(1,1,1)} 10%,20%{transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)} 30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)} 100%{transform:scale3d(1,1,1)} }
@keyframes ndpZoomPulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
@keyframes ndpFlipX      { 0%{transform:perspective(400px) rotateY(0)} 50%{transform:perspective(400px) rotateY(180deg)} 100%{transform:perspective(400px) rotateY(360deg)} }
@keyframes ndpFlipY      { 0%{transform:perspective(400px) rotateX(0)} 50%{transform:perspective(400px) rotateX(180deg)} 100%{transform:perspective(400px) rotateX(360deg)} }
@keyframes ndpLevitate   { 0%,100%{transform:translateY(0) rotate(-1deg)} 25%{transform:translateY(-12px) rotate(1deg)} 50%{transform:translateY(-20px) rotate(0deg)} 75%{transform:translateY(-8px) rotate(-1deg)} }
@keyframes ndpShake      { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-7px)} 20%,40%,60%,80%{transform:translateX(7px)} }
@keyframes ndpDrift      { 0%{transform:translate(0,0) rotate(0)} 25%{transform:translate(10px,-10px) rotate(2deg)} 50%{transform:translate(-5px,-16px) rotate(-1deg)} 75%{transform:translate(-10px,-5px) rotate(1deg)} 100%{transform:translate(0,0) rotate(0)} }
@keyframes ndpColorShift { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }
@keyframes ndpNeonGlow   { 0%,100%{filter:drop-shadow(0 0 5px #c59b27) drop-shadow(0 0 10px #c59b27)} 50%{filter:drop-shadow(0 0 22px #fff) drop-shadow(0 0 44px #c59b27)} }
@keyframes ndpBreath     { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:.82} }
@keyframes ndpGlitch     { 0%,100%,20%{transform:none} 5%{transform:skew(-3deg) translateX(3px)} 10%{transform:skew(2deg) translateX(-3px)} 15%{transform:none} }
@keyframes ndpMorph      { 0%,100%{border-radius:50%} 50%{border-radius:20%} }
/* Section entry animations */
@keyframes ndpFadeIn     { from{opacity:0} to{opacity:1} }
@keyframes ndpFadeInUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes ndpFadeInDown { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:none} }
@keyframes ndpSlideInL   { from{opacity:0;transform:translateX(-50px)} to{opacity:1;transform:none} }
@keyframes ndpSlideInR   { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:none} }
@keyframes ndpZoomIn     { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes ndpBounceIn   { 0%{opacity:0;transform:scale(.3)} 50%{transform:scale(1.08)} 70%{transform:scale(.97)} 100%{opacity:1;transform:scale(1)} }
/* Social micro-interactions */
@keyframes ndpSocialPulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
@keyframes ndpSocialSpin   { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes ndpSocialShake  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-15deg)} 75%{transform:rotate(15deg)} }
@keyframes ndpSocialBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ── Animation utility classes ── */
.ndp-anim-none      { animation: none !important; }
.ndp-anim-float     { animation: ndpFloat     3s   ease-in-out infinite; }
.ndp-anim-sway      { animation: ndpSway      4s   ease-in-out infinite; }
.ndp-anim-pulse     { animation: ndpPulse     2s   ease-in-out infinite; }
.ndp-anim-glow      { animation: ndpGlowAnim  2s   ease-in-out infinite; }
.ndp-anim-bounce    { animation: ndpBounce    2s   ease            infinite; }
.ndp-anim-spin      { animation: ndpSpinSlow  8s   linear          infinite; }
.ndp-anim-heartbeat { animation: ndpHeartbeat 1.5s ease-in-out     infinite; }
.ndp-anim-rubber    { animation: ndpRubber    2s   ease            infinite; }
.ndp-anim-jello     { animation: ndpJello     2s   ease            infinite; }
.ndp-anim-swing     { animation: ndpSwing     2s   ease-in-out     infinite; transform-origin:top center; }
.ndp-anim-wobble    { animation: ndpWobble    2s   ease            infinite; }
.ndp-anim-flash     { animation: ndpFlash     2s   linear          infinite; }
.ndp-anim-tada      { animation: ndpTada      2s   ease            infinite; }
.ndp-anim-zoom      { animation: ndpZoomPulse 3s   ease-in-out     infinite; }
.ndp-anim-flip-x    { animation: ndpFlipX     4s   linear          infinite; }
.ndp-anim-flip-y    { animation: ndpFlipY     4s   linear          infinite; }
.ndp-anim-levitate  { animation: ndpLevitate  5s   ease-in-out     infinite; }
.ndp-anim-shake     { animation: ndpShake     2s   ease            infinite; }
.ndp-anim-drift     { animation: ndpDrift     6s   ease-in-out     infinite; }
.ndp-anim-colorshift{ animation: ndpColorShift 5s  linear          infinite; }
.ndp-anim-neon      { animation: ndpNeonGlow  2s   ease-in-out     infinite; }
.ndp-anim-breath    { animation: ndpBreath    3s   ease-in-out     infinite; }
.ndp-anim-glitch    { animation: ndpGlitch    3s              infinite; }
.ndp-anim-morph     { animation: ndpMorph     3s   ease-in-out     infinite; }

/* Speed modifiers */
.ndp-speed-slow   { animation-duration: calc(var(--anim-speed, 1s) * 2)   !important; }
.ndp-speed-normal { animation-duration: var(--anim-speed, 1s)             !important; }
.ndp-speed-fast   { animation-duration: calc(var(--anim-speed, 1s) * 0.5) !important; }

/* ── 9. SEASONAL EFFECTS ──────────────────────────────────────── */
.ndp-bh-seasonal-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 3;
    overflow: hidden;
}
/* Independence Day: floating stars */
.ndp-seasonal-particle {
    position: absolute; pointer-events: none;
    animation: ndpParticleFall linear infinite;
}
@keyframes ndpParticleFall { 0%{transform:translateY(-20px) rotate(0deg);opacity:1} 100%{transform:translateY(110vh) rotate(720deg);opacity:0} }
@keyframes ndpParticleRise { 0%{transform:translateY(110vh) scale(0.5);opacity:0} 50%{opacity:1} 100%{transform:translateY(-20px) scale(1.2);opacity:0} }
@keyframes ndpParticleFloat { 0%,100%{transform:translateY(0) translateX(0)} 33%{transform:translateY(-15px) translateX(10px)} 66%{transform:translateY(8px) translateX(-8px)} }
@keyframes ndpSnowFall { 0%{transform:translateY(-10px) translateX(0) rotate(0deg);opacity:1} 100%{transform:translateY(110vh) translateX(30px) rotate(360deg);opacity:.4} }
@keyframes ndpLanternRise { 0%{transform:translateY(100vh) rotate(-5deg);opacity:0} 20%{opacity:.8} 100%{transform:translateY(-10vh) rotate(5deg);opacity:0} }
@keyframes ndpSparkle { 0%,100%{opacity:0;transform:scale(0)} 50%{opacity:1;transform:scale(1)} }
@keyframes ndpSunRay  { 0%,100%{opacity:.3} 50%{opacity:.7} }

/* ── 10. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ndp-bh-inner { padding: 40px 24px; }
}
@media (max-width: 768px) {
    .ndp-bh-inner { padding: 32px 18px; }
}
@media (max-width: 480px) {
    .ndp-bh-inner { padding: 24px 14px; }
    .ndp-bh-badge { min-width: 130px; padding: 8px 14px; }
    .ndp-bh-badges { flex-direction: column; }
}

/* ── 11. ACCESSIBILITY ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ndp-anim-float,.ndp-anim-sway,.ndp-anim-pulse,.ndp-anim-glow,
    .ndp-anim-bounce,.ndp-anim-spin,.ndp-anim-heartbeat,.ndp-anim-rubber,
    .ndp-anim-jello,.ndp-anim-swing,.ndp-anim-wobble,.ndp-anim-flash,
    .ndp-anim-tada,.ndp-anim-zoom,.ndp-anim-flip-x,.ndp-anim-flip-y,
    .ndp-anim-levitate,.ndp-anim-shake,.ndp-anim-drift,.ndp-anim-colorshift,
    .ndp-anim-neon,.ndp-anim-breath,.ndp-anim-glitch,.ndp-anim-morph,
    .bh-social-anim-float,.bh-social-anim-pulse,.bh-social-anim-glow
    { animation: none !important; }
}