/* ============================================================
   IB-S Hero — 2-Column: Text left + Video right  v1.1.0
   ============================================================ */

/* ---- Reset & container ---- */
.ibs-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: cover;
    background-position: center 30%;
    background-attachment: fixed;
    overflow: hidden;
    padding: 0;
    margin: 0;
    font-family: inherit;
}

/* ---- Overlays ---- */
.ibs-hero__ov { position:absolute; inset:0; pointer-events:none; z-index:1; }
.ibs-hero__ov--base { background: rgba(6,22,14,0.65); }
.ibs-hero__ov--grad {
    background:
        linear-gradient(135deg, rgba(12,45,28,0.50) 0%, transparent 55%),
        linear-gradient(0deg, rgba(6,22,14,0.92) 0%, transparent 50%);
}

/* ---- SVG network ---- */
.ibs-hero__svg {
    position:absolute; inset:0; width:100%; height:100%;
    z-index:2; pointer-events:none;
}
.ibs-edge { fill:none; stroke:#6fe8a2; stroke-width:0.8; stroke-linecap:round; animation:ibsEdgeDraw 1.8s ease both; }
@keyframes ibsEdgeDraw {
    from { stroke-dasharray:300; stroke-dashoffset:300; opacity:0; }
    to   { stroke-dasharray:300; stroke-dashoffset:0;   opacity:1; }
}
.ibs-node { fill:#52d68a; animation:ibsNodePulse 3.5s ease-in-out infinite both; }
.ibs-node--lg { fill:#a8f5cf; filter:drop-shadow(0 0 6px rgba(100,240,160,0.8)); animation:ibsNodePulseLg 4s ease-in-out infinite both; }
@keyframes ibsNodePulse   { 0%,100%{opacity:.55;r:2.2} 50%{opacity:.95;r:3.2} }
@keyframes ibsNodePulseLg { 0%,100%{opacity:.65;r:5.5} 50%{opacity:1;r:7.5} }
.ibs-particle { fill:#c8fde6; opacity:.85; filter:drop-shadow(0 0 3px rgba(180,255,220,.9)); animation:ibsParticleFade .6s ease both; }
@keyframes ibsParticleFade { from{opacity:0} to{opacity:.85} }

/* ---- Inner 2-column layout ---- */
.ibs-hero__inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    width: 100%;
    max-width: 1380px;
    margin: auto;
    padding: 6rem 5vw 5rem;
    flex: 1;
}

/* ---- Text column (left) ---- */
.ibs-hero__text {
    flex: 0 0 auto;
    width: 52%;
    animation: ibsContentUp 1.2s cubic-bezier(.16,1,.3,1) .3s both;
}
@keyframes ibsContentUp {
    from { opacity:0; transform:translateY(32px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Institution label */
.ibs-hero__institution {
    color: rgba(200,253,230,.80);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
    line-height: 1.5;
}

/* Research area pills */
.ibs-hero__pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; animation:ibsContentUp 1.2s cubic-bezier(.16,1,.3,1) .5s both; }
.ibs-hero__pill {
    background: rgba(100,230,155,.14);
    border: 1px solid rgba(100,230,155,.35);
    color: #a8f5cf;
    font-size: .72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    padding: .28rem .75rem; border-radius:100px;
    backdrop-filter: blur(4px);
    transition: background .25s, border-color .25s;
}
.ibs-hero__pill:hover { background:rgba(100,230,155,.28); border-color:rgba(100,230,155,.7); }

/* Main headline */
.ibs-hero__headline {
    color: #ffffff !important;
    font-size: clamp(2rem,4.2vw,3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 1.1rem;
    text-shadow: 0 2px 24px rgba(0,0,0,.4);
    animation: ibsContentUp 1.2s cubic-bezier(.16,1,.3,1) .6s both;
}

/* Subline */
.ibs-hero__subline {
    color: rgba(220,250,235,.82) !important;
    font-size: clamp(.95rem,1.4vw,1.15rem);
    line-height: 1.6;
    margin: 0 0 2rem;
    animation: ibsContentUp 1.2s cubic-bezier(.16,1,.3,1) .75s both;
}

/* CTA buttons */
.ibs-hero__ctas { display:flex; flex-wrap:wrap; gap:1rem; animation:ibsContentUp 1.2s cubic-bezier(.16,1,.3,1) .9s both; }
.ibs-hero__btn {
    display:inline-flex; align-items:center;
    padding:.8rem 1.8rem; border-radius:4px;
    font-size:.88rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    text-decoration:none; transition:all .25s ease; cursor:pointer;
}
.ibs-hero__btn--primary { background:#3dba72; color:#fff; border:2px solid #3dba72; box-shadow:0 4px 20px rgba(61,186,114,.35); }
.ibs-hero__btn--primary:hover { background:#2ea660; border-color:#2ea660; box-shadow:0 6px 28px rgba(61,186,114,.55); transform:translateY(-2px); color:#fff; }
.ibs-hero__btn--ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.45); }
.ibs-hero__btn--ghost:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.8); transform:translateY(-2px); color:#fff; }

/* ---- Video column (right) ---- */
.ibs-hero__video-wrap {
    flex: 0 0 auto;
    width: 44%;
    animation: ibsVideoIn 1.4s cubic-bezier(.16,1,.3,1) .8s both;
}
@keyframes ibsVideoIn {
    from { opacity:0; transform:translateX(40px) scale(.97); }
    to   { opacity:1; transform:translateX(0) scale(1); }
}

/* Video frame container */
.ibs-hero__video-frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(100,230,155,.25),
        0 8px 48px rgba(0,0,0,.55),
        0 0 60px rgba(61,186,114,.12);
    background: #000;
    aspect-ratio: 16/9;
}

/* Actual video element */
.ibs-hero__video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Animated corner accents */
.ibs-vc {
    position: absolute;
    width: 20px; height: 20px;
    border-color: rgba(100,230,155,.75);
    border-style: solid;
    border-radius: 2px;
    animation: ibsCornerPulse 3s ease-in-out infinite;
}
.ibs-vc--tl { top:0;    left:0;  border-width:2px 0 0 2px; animation-delay:0s; }
.ibs-vc--tr { top:0;    right:0; border-width:2px 2px 0 0; animation-delay:.75s; }
.ibs-vc--bl { bottom:0; left:0;  border-width:0 0 2px 2px; animation-delay:1.5s; }
.ibs-vc--br { bottom:0; right:0; border-width:0 2px 2px 0; animation-delay:2.25s; }
@keyframes ibsCornerPulse {
    0%,100% { opacity:.55; width:20px; height:20px; }
    50%      { opacity:1;   width:28px; height:28px; }
}

/* Video caption */
.ibs-hero__video-caption {
    color: rgba(180,240,210,.55);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    margin: .75rem 0 0;
}

/* ---- Stats bar ---- */
.ibs-hero__stats {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    background: rgba(6,22,14,.75);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(100,230,155,.18);
    animation: ibsStatsIn 1s ease 1.2s both;
}
@keyframes ibsStatsIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.ibs-hero__stat {
    flex:1; max-width:200px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:1.25rem 1rem;
    border-right: 1px solid rgba(100,230,155,.12);
}
.ibs-hero__stat:last-child { border-right:none; }
.ibs-hero__stat-n { font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; color:#6fe8a2; line-height:1; margin-bottom:.2rem; }
.ibs-hero__stat-l { font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(200,253,230,.65); }

/* ---- Force full-width breakout from Divi container ---- */
.et_pb_section:has(.ibs-hero) { padding:0!important; margin:0!important; width:100%!important; max-width:100%!important; }
.et_pb_row:has(.ibs-hero) { padding:0!important; margin:0 auto!important; max-width:100%!important; width:100%!important; }
.et_pb_column:has(.ibs-hero), .et_pb_code:has(.ibs-hero) { padding:0!important; margin:0!important; width:100%!important; }

/* ---- Responsive ---- */
@media (max-width:1100px) {
    .ibs-hero__text  { width:55%; }
    .ibs-hero__video-wrap { width:42%; }
    .ibs-hero__inner { gap:2rem; }
}
@media (max-width:860px) {
    .ibs-hero { background-attachment:scroll; min-height:auto; }
    .ibs-hero__inner { flex-direction:column; padding:5rem 5vw 2rem; gap:2.5rem; }
    .ibs-hero__text  { width:100%; }
    .ibs-hero__video-wrap { width:100%; max-width:560px; margin:0 auto; }
}
@media (max-width:640px) {
    .ibs-hero__stats { flex-wrap:wrap; }
    .ibs-hero__stat  { max-width:50%; min-width:50%; border-bottom:1px solid rgba(100,230,155,.12); }
    .ibs-hero__pill  { font-size:.65rem; }
    .ibs-hero__btn   { padding:.7rem 1.4rem; font-size:.82rem; }
}