Local Board

.esn-org {
background: #fff;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
color: #1a1a1a;
}

.esn-lb {
padding: 16px 24px;
max-width: 1448px;
margin: 0 auto;
box-sizing: border-box;
}

.esn-lb-head {
max-width: 1400px;
margin: 0 auto 12px;
padding: 0 8px;
}

.esn-lb-title {
margin: 0;
font-size: 34px;
font-weight: 800;
color: #22a7e0;
}

/* ================= PANEL ================= */

.esn-lb-panel {
position: relative;
width: 100%;
max-width: 100%;
min-width: 340px;
margin: 0 auto;
border-radius: 22px;
overflow: hidden;
padding: 24px 0 20px;
}

.esn-org-duo {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 20px;
max-width: 1448px;
margin: 0 auto;
padding: 16px 24px;
box-sizing: border-box;
}

.esn-org-duo .esn-lb {
flex: 1 1 0;
max-width: none;
margin: 0;
padding: 0;
min-width: 280px;
}

.esn-org-duo .esn-lb-panel {
margin: 0;
}

/* ================= COLORS ================= */

.esn-lb[data-tier="board"] .esn-lb-panel {
background:
radial-gradient(900px 500px at 50% 0%, rgba(70,74,200,0.20), transparent 60%),
linear-gradient(180deg, #0b0c1d, #05060f);
}

.esn-lb[data-tier="coordinators"] .esn-lb-panel {
background:
radial-gradient(900px 500px at 50% 0%, rgba(0,174,239,0.20), transparent 60%),
linear-gradient(180deg, #05141a, #030a0f);
}

.esn-lb[data-tier="chair"] .esn-lb-panel {
background:
radial-gradient(900px 500px at 50% 0%, rgba(122,193,67,0.18), transparent 60%),
linear-gradient(180deg, #0a1406, #050a03);
}

.esn-lb[data-tier="auditor"] .esn-lb-panel {
background:
radial-gradient(900px 500px at 50% 0%, rgba(244,123,32,0.20), transparent 60%),
linear-gradient(180deg, #170a02, #0c0501);
}

.esn-lb[data-tier="board"] {
--tier-a: #2e6df6;
--tier-b: #12b5e0;
--glow: rgba(70,74,200,0.85);
--soft: rgba(70,74,200,0.32);
}

.esn-lb[data-tier="coordinators"] {
--tier-a: #00aeef;
--tier-b: #1de1c5;
--glow: rgba(0,174,239,0.85);
--soft: rgba(0,174,239,0.30);
}

.esn-lb[data-tier="chair"] {
--tier-a: #7ac143;
--tier-b: #1de1c5;
--glow: rgba(122,193,67,0.85);
--soft: rgba(122,193,67,0.30);
}

.esn-lb[data-tier="auditor"] {
--tier-a: #f47b20;
--tier-b: #ffcf5c;
--glow: rgba(244,123,32,0.9);
--soft: rgba(244,123,32,0.32);
}

/* ================= PANEL TITLE ================= */

.esn-lb-panel-title {
text-align: center;
margin: 0 0 26px;
padding: 0 24px;
}

.esn-lb-panel-title h3 {
margin: 0;
font-size: 22px;
font-weight: 800;
color: #fff;
}

.esn-lb-panel-title p {
margin: 6px 0 0;
font-size: 13.5px;
font-style: italic;
color: rgba(255,255,255,0.7);
}

/* ================= CAROUSEL / ROW ================= */
/* Desktop default: horizontal row, wraps and centers. */

.esn-lb-carousel {
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
}

.esn-lb-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 10px;
padding: 4px 24px 8px;
}

/* Coordinators row: horizontal scroll strip on desktop (still
horizontal — just scrollable since there are 8 cards). Mobile
override below turns this into a vertical stack too. */

.esn-lb-row--scroll {
flex-wrap: nowrap;
justify-content: flex-start;
padding-right: 64px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}

.esn-lb-row--scroll::-webkit-scrollbar {
display: none;
}

.esn-lb-row--scroll .esn-lb-card {
flex: none;
}

/* ================= CARD ================= */

.esn-lb-card {
position: relative;
flex: none;
width: 260px !important;
height: 380px !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}

.esn-lb-frame {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}

/* ================= ENVELOPE ================= */

.esn-lb-envelope {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
height: 60% !important;
z-index: 1;
border-radius: 14px;
background: linear-gradient(165deg, var(--soft), rgba(8,8,10,0.94) 70%);
box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
overflow: hidden;
opacity: 1;
transition: opacity 0.4s ease 0.3s;
}

.esn-lb-card.is-open .esn-lb-envelope {
opacity: 0;
}

/* ================= FLAP ================= */

.esn-lb-flap {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 48% !important;
z-index: 10;
clip-path: polygon(0 0, 100% 0, 50% 64%);
background: linear-gradient(160deg, var(--glow) 0%, rgba(8,8,10,0.97) 80%);
transform-origin: top center;
-webkit-transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform 0.9s cubic-bezier(0.22,0.75,0.24,1);
-webkit-transition: -webkit-transform 0.9s cubic-bezier(0.22,0.75,0.24,1);
will-change: transform;
perspective: 1400px;
-webkit-perspective: 1400px;
}

.esn-lb-card.is-open .esn-lb-flap {
transform: rotateX(-172deg);
-webkit-transform: rotateX(-172deg);
}

/* ================= LABEL ================= */

.esn-lb-label {
position: absolute;
left: 0;
right: 0;
bottom: 16px;
z-index: 5;
text-align: center;
padding: 0 12px;
opacity: 1;
transition: opacity 0.3s ease;
}

.esn-lb-card.is-open .esn-lb-label {
opacity: 0;
pointer-events: none;
}

.esn-lb-label-name {
font-size: 18px;
font-weight: 800;
color: #fff;
}

.esn-lb-label-role {
margin-top: 4px;
font-size: 12.5px;
opacity: 0.82;
color: #edf1ff;
}

/* ================= PHOTO POPUP ================= */

.esn-lb-photo-wrap {
position: absolute !important;
left: 3% !important;
right: 3% !important;
top: 2% !important;
width: 94% !important;
height: 96% !important;
z-index: 8;
opacity: 0;
transform: translate3d(0,46%,0) scale(0.7);
-webkit-transform: translate3d(0,46%,0) scale(0.7);
transition:
transform 1.05s cubic-bezier(0.19,0.86,0.24,1),
opacity 0.6s ease;
-webkit-transition:
-webkit-transform 1.05s cubic-bezier(0.19,0.86,0.24,1),
opacity 0.6s ease;
pointer-events: none;
filter: drop-shadow(0 12px 22px rgba(0,0,0,0.5));
overflow: visible !important;
border-radius: 14px;
}

.esn-lb-card.is-open .esn-lb-photo-wrap {
opacity: 1;
transform: translate3d(0,0,0) scale(1);
-webkit-transform: translate3d(0,0,0) scale(1);
pointer-events: auto;
}

/* ================= PHOTO CONTAINER ================= */
/* No 3D flip anymore — the "back" is a fading overlay drawn on
top of the same photo face instead of a separate small box. */

.esn-lb-photo-inner {
position: relative !important;
width: 100% !important;
height: 100% !important;
}

/* ================= PHOTO FACE ================= */

.esn-lb-photo-front {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 14px;
overflow: hidden;
z-index: 2;
background:
repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 46px),
linear-gradient(160deg, var(--tier-a), var(--tier-b) 130%);
box-shadow: 0 0 0 2px var(--glow);
}

.esn-lb-photo-front img {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}

.esn-lb-photo-front::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 44%;
background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0));
pointer-events: none;
}

/* ================= INFO OVERLAY (replaces the flipped back box) ================= */
/* Fades in over the whole photo instead of rotating to a small
separate card face. Toggled by the .is-flipped class. */

.esn-lb-info-overlay {
position: absolute !important;
inset: 0 !important;
z-index: 6;
border-radius: 14px;
background: linear-gradient(195deg, rgba(6,7,14,0.55), rgba(6,7,14,0.96) 55%);
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px 18px;
transition: opacity 0.45s ease;
}

.esn-lb-card.is-flipped .esn-lb-info-overlay {
opacity: 1;
pointer-events: auto;
}

/* ================= CARD TEXT ================= */

.esn-lb-photo-frontMeta {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
z-index: 4;
display: flex;
align-items: flex-end;
justify-content: space-between;
}

.esn-lb-caption-name {
font-size: 17px;
font-weight: 700;
color: #fff;
}

.esn-lb-caption-role {
font-size: 14px;
color: rgba(255,255,255,0.8);
margin-top: 2px;
}

.esn-lb-badge {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 700;
color: rgba(255,255,255,0.6);
white-space: nowrap;
}

.esn-lb-badge-mark {
font-size: 15px;
}

/* ================= INFO TEXT ================= */

.esn-lb-backTitle {
font-size: 20px;
font-weight: 800;
margin: 0 0 4px;
color: #fff;
}

.esn-lb-backRole {
font-size: 12px;
letter-spacing: 0.4px;
text-transform: uppercase;
opacity: 0.8;
margin: 0 0 10px;
color: #edf1ff;
}

.esn-lb-backText {
font-size: 13.5px;
line-height: 1.55;
color: #fff;
opacity: 0.95;
}

.esn-lb-backHint {
margin-top: 14px;
font-size: 11px;
opacity: 0.55;
color: #edf1ff;
}

/* ================= SPARKLES ================= */

.esn-lb-sparkle-host {
position: absolute;
inset: -10%;
z-index: 30;
pointer-events: none;
}

.esn-sparkle {
position: absolute;
left: 50%;
top: 50%;
font-size: 17px;
opacity: 0;
transform: translate(-50%, -50%) scale(0.3);
animation: esnBurst 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

@keyframes esnBurst {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.35);
}
16% {
opacity: 1;
transform:
translate(calc(-50% + (var(--dx, 0px) * 0.32)), calc(-50% + (var(--dy, 0px) * 0.32)))
scale(1.2);
}
100% {
opacity: 0;
transform:
translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
scale(0.6);
}
}

/* ================= CONNECTOR ================= */

.esn-org-connector {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: #fff;
}

.esn-org-line {
width: 2px;
height: 6px;
background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.25), rgba(0,0,0,0.02));
}

.esn-org-arrow {
color: rgba(0,0,0,0.35);
font-size: 12px;
}

/* ================= MOBILE: ONE COLUMN, CARDS STACKED ================= */
/* Both the wrapping row and the horizontal-scroll row become a
single vertical column of cards on small screens. */

@media (max-width: 700px) {

.esn-lb-card {
width: 220px !important;
height: 330px !important;
}

.esn-lb-row,
.esn-lb-row--scroll {
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
overflow-x: visible;
overflow-y: visible;
padding: 4px 12px 8px;
}

.esn-lb-row .esn-lb-card,
.esn-lb-row--scroll .esn-lb-card {
width: 220px !important;
height: 330px !important;
flex: none;
}

.esn-lb-title {
font-size: 26px;
}
}

/* ================= REDUCED MOTION ================= */

@media (prefers-reduced-motion: reduce) {
.esn-lb-flap,
.esn-lb-photo-wrap,
.esn-lb-info-overlay {
transition: none !important;
}
}
</style>
</head>
<body>

<section class="esn-lb" data-tier="board" aria-label="Local Board of ESN Alba Iulia">

<div class="esn-lb-panel">
<div class="esn-lb-panel-title">
<h3>Meet The Local Board Of ESN Alba Iulia</h3>
<p>The current legends behind the section</p>
</div>

<article class="esn-lb-card" data-icons="⭐ 👑 ✨" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Maxim</div>
<div class="esn-lb-label-role">President</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/4_2.png" alt="Maxim" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Maxim</div>
<div class="esn-lb-caption-role">President</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Maxim</div>
<div class="esn-lb-backRole">President</div>
<div class="esn-lb-backText">The public face of the section, responsible for overall strategy, representation, partnerships, and the direction of the board.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="🤝 ⭐ 💫" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Evelina</div>
<div class="esn-lb-label-role">Vice-President</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/2_5.png" alt="Evelina" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Evelina</div>
<div class="esn-lb-caption-role">Vice-President</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Evelina</div>
<div class="esn-lb-backRole">Vice-President</div>
<div class="esn-lb-backText">Supports the president, helps coordinate the board internally, and keeps projects moving across the whole section.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="📋 🖋️ 📎" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Bianca</div>
<div class="esn-lb-label-role">Secretary General</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/3_2.png" alt="Bianca" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Bianca</div>
<div class="esn-lb-caption-role">Secretary General</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Bianca</div>
<div class="esn-lb-backRole">Secretary General</div>
<div class="esn-lb-backText">Keeps the structure organized through documentation, meeting records, staying on top of every detail, and administrative clarity.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="💙 🤗 ✨" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Steli</div>
<div class="esn-lb-label-role">ESN Alba Iulia Mascot</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/1_5.png" alt="Steli" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Steli</div>
<div class="esn-lb-caption-role">ESN Alba Iulia Mascot</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Steli</div>
<div class="esn-lb-backRole">Mascot</div>
<div class="esn-lb-backText">The guy who gets stolen.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

</div>
</div>
</div>
</section>

<section class="esn-lb" data-tier="coordinators" aria-label="Local Coordinators of ESN Alba Iulia">

<div class="esn-lb-panel">
<div class="esn-lb-panel-title">
<h3>Meet The Local Coordinators Of ESN Alba Iulia</h3>
<p>The team running the section day to day</p>
</div>

<div class="esn-lb-carousel">
<div class="esn-lb-row esn-lb-row--scroll">
<article class="esn-lb-card" data-icons="💰 💵 📄" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Viorel</div>
<div class="esn-lb-label-role">Project Grants Manager</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/4_4.png" alt="Viorel" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Viorel</div>
<div class="esn-lb-caption-role">Project Grants Manager</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Viorel</div>
<div class="esn-lb-backRole">Project Grants Manager</div>
<div class="esn-lb-backText">Finds and manages funding opportunities, turning grant applications into real resources for section projects.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="🎈 🎉 🎊" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Giulia</div>
<div class="esn-lb-label-role">Event Manager</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/1_7.png" alt="Giulia" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Giulia</div>
<div class="esn-lb-caption-role">Event Manager</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Giulia</div>
<div class="esn-lb-backRole">Event Manager</div>
<div class="esn-lb-backText">The person who turns ideas into unforgettable events and strangers into friends, making every gathering a place where memories and connections are created.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="📢 🗣️ 💬" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Costea</div>
<div class="esn-lb-label-role">Communication Manager</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/8_2.png" alt="Costea" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Costea</div>
<div class="esn-lb-caption-role">Communication Manager</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Costea</div>
<div class="esn-lb-backRole">Communication Manager</div>
<div class="esn-lb-backText">Shapes the voice of the section through visuals, promotion, and storytelling that keeps everyone in the loop.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="💻 ⌨️ 🔤" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Safiya</div>
<div class="esn-lb-label-role">IT Coordinator</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/2_7.png" alt="Safiya" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Safiya</div>
<div class="esn-lb-caption-role">IT Coordinator</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Safiya</div>
<div class="esn-lb-backRole">IT Coordinator</div>
<div class="esn-lb-backText">The person behind every working link, login, and system update. The magic in every click runs through this person. Meet the mind behind it.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="🤝 🌱 ❤️" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Sergiu</div>
<div class="esn-lb-label-role">HR Coordinator</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/7_2.png" alt="Sergiu" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Sergiu</div>
<div class="esn-lb-caption-role">HR Coordinator</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Sergiu</div>
<div class="esn-lb-backRole">HR Coordinator</div>
<div class="esn-lb-backText">Supports members, strengthens the team environment, and helps volunteers grow through care and structure.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="📚 🎓 ✏️" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Andreea</div>
<div class="esn-lb-label-role">Education Coordinator</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/6_2.png" alt="Andreea" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Andreea</div>
<div class="esn-lb-caption-role">Education Coordinator</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Andreea</div>
<div class="esn-lb-backRole">Education Coordinator</div>
<div class="esn-lb-backText">Develops learning opportunities and projects that help students explore ideas, skills, and experiences beyond the classroom.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="🧭 🤝 🌟" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Eleni</div>
<div class="esn-lb-label-role">Buddy Coordinator</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/3_4.png" alt="Eleni" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Eleni</div>
<div class="esn-lb-caption-role">Buddy Coordinator</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Eleni</div>
<div class="esn-lb-backRole">Buddy Coordinator</div>
<div class="esn-lb-backText">Helps incoming students feel welcome by building connections, guiding buddies, and making integration warmer and easier.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="📱 💬 ❤️" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Natalia</div>
<div class="esn-lb-label-role">Social Media Coordinator</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/5_2.png" alt="Natalia" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Natalia</div>
<div class="esn-lb-caption-role">Social Media Coordinator</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Natalia</div>
<div class="esn-lb-backRole">Social Media Coordinator</div>
<div class="esn-lb-backText">Runs the section's online presence, keeping content fresh and the community engaged across platforms.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

</div>
</div>
</div>
</section>

<section class="esn-lb" data-tier="chair" aria-label="Chairing Team of ESN Alba Iulia">

<div class="esn-lb-panel">
<div class="esn-lb-panel-title">
<h3>Meet The Chairing Team Of ESN Alba Iulia</h3>
<p>Keeping meetings and sessions on track</p>
</div>

<article class="esn-lb-card" data-icons="🎙️ ⏱️ 📋" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Dorin</div>
<div class="esn-lb-label-role">Main Chair</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/2_4.png" alt="Dorin" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Dorin</div>
<div class="esn-lb-caption-role">Main Chair</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Dorin</div>
<div class="esn-lb-backRole">Main Chair</div>
<div class="esn-lb-backText">The one who organizes the most important event for the section, the Local Assembly. He might look intimidating but he is a caring guy :)</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

<article class="esn-lb-card" data-icons="🎙️ 📝 🤝" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Catalina</div>
<div class="esn-lb-label-role">Vice Chair</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/1_4.png" alt="Catalina" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Catalina</div>
<div class="esn-lb-caption-role">Vice Chair</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Catalina</div>
<div class="esn-lb-backRole">Vice Chair</div>
<div class="esn-lb-backText">Steps in to support the chair, keeping discussions balanced and sessions running smoothly.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

</div>
</div>
</div>
</section>

<section class="esn-lb" data-tier="auditor" aria-label="Main Auditor of ESN Alba Iulia">

<div class="esn-lb-panel">
<div class="esn-lb-panel-title">
<h3>Meet The Main Auditor Of ESN Alba Iulia</h3>
<p>Overseeing accountability across the whole section</p>
</div>

<article class="esn-lb-card" data-icons="🔍 💰 📊" data-open="false" data-flipped="false">
<div class="esn-lb-frame">
<div class="esn-lb-envelope"></div>
<div class="esn-lb-flap"></div>
<div class="esn-lb-sparkle-host"></div>
<div class="esn-lb-label">
<div class="esn-lb-label-name">Alexandru</div>
<div class="esn-lb-label-role">Main Auditor</div>
</div>
<div class="esn-lb-photo-wrap">
<div class="esn-lb-photo-inner">
<div class="esn-lb-photo-front">
<img src="https://alba-iulia.esn.ro/sites/alba-iulia.esn.ro/files/2026-08/the-main-auditor-website-photo-3.png" alt="Alexandru" loading="lazy">
<div class="esn-lb-photo-frontMeta">
<div>
<div class="esn-lb-caption-name">Alexandru</div>
<div class="esn-lb-caption-role">Main Auditor</div>
</div>
<div class="esn-lb-badge"><span class="esn-lb-badge-mark">✳</span>ESN</div>
</div>
</div>
<div class="esn-lb-info-overlay">
<div class="esn-lb-backTitle">Alexandru</div>
<div class="esn-lb-backRole">Main Auditor</div>
<div class="esn-lb-backText">Reviews the section's finances and processes, making sure everything stays transparent and accountable.</div>
<div class="esn-lb-backHint">Click to see photo again</div>
</div>
</div>
</div>
</div>
</article>

</div>
</div>
</div>
</section>

</div>

function openCard(card) {

if (!card) return;
if (card.classList.contains("is-open")) return;

card.classList.add("is-open");
card.classList.remove("is-flipped");
card.setAttribute("aria-expanded", "true");
}

function closeCard(card) {

if (!card) return;

card.classList.remove("is-flipped");
card.classList.remove("is-open");
card.setAttribute("aria-expanded", "false");

var host = card.querySelector(".esn-lb-sparkle-host");

if (host) {
host.innerHTML = "";
}
}

function toggleFlip(card) {

if (!card) return;

if (!card.classList.contains("is-open")) {
openCard(card);
}

var willReveal = !card.classList.contains("is-flipped");

card.classList.toggle("is-flipped");
card.classList.add("has-interacted");

if (willReveal) {
spawnSparkles(card);
}
}

document.querySelectorAll(".esn-lb-card").forEach(function (card) {

card.style.webkitTapHighlightColor = "transparent";
card.style.touchAction = "manipulation";
card.setAttribute("role", "button");
card.setAttribute("tabindex", "0");
card.setAttribute("aria-expanded", "false");

card.addEventListener("click", function () {
toggleFlip(card);
});

card.addEventListener("keydown", function (event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
toggleFlip(card);
}
});

});

function spawnSparkles(card) {

var host =
card.querySelector(".esn-lb-sparkle-host");

if (!host) {
return;
}

if (host.dataset.clearTimer) {
window.clearTimeout(Number(host.dataset.clearTimer));
}

host.innerHTML = "";

var icons =
(card.getAttribute("data-icons") || "\u2728")
.trim()
.split(/\s+/);

var count = 12;

for (var i = 0; i < count; i++) {

var span =
document.createElement("span");

span.className = "esn-sparkle";

span.textContent =
icons[i % icons.length];

var angle =
(i / count) * Math.PI * 2
+ (Math.random() * 0.5 - 0.25);

var distance = 55 + Math.random() * 55;

var dx = Math.cos(angle) * distance;
var dy = Math.sin(angle) * distance;

span.style.setProperty("--dx", dx.toFixed(1) + "px");
span.style.setProperty("--dy", dy.toFixed(1) + "px");

span.style.animationDelay =
(Math.random() * 0.15).toFixed(2) + "s";

host.appendChild(span);
}

var clearId = window.setTimeout(function () {

host.innerHTML = "";
delete host.dataset.clearTimer;

}, 2000);

host.dataset.clearTimer = String(clearId);
}

var lastY = window.scrollY;
var direction = "down";

window.addEventListener(
"scroll",
function () {

var y = window.scrollY;

if (y > lastY + 1) {
direction = "down";
}
else if (y < lastY - 1) {
direction = "up";
}

lastY = y;

},
{ passive: true }
);

function closeSection(section) {

section.classList.remove("is-section-open");

var cards =
section.querySelectorAll(".esn-lb-card");

cards.forEach(function (card) {

closeCard(card);

});
}

if ("IntersectionObserver" in window) {

// Watch every card individually so each one pops the moment
// it scrolls into view — this no longer depends on how tall
// its section is (long sections like Coordinators used to
// need a lot of scrolling before 35% of the whole section
// was visible, which delayed the pop-up).
var cardObserver =
new IntersectionObserver(
function (entries) {

entries.forEach(function (entry) {

if (!entry.isIntersecting) {
return;
}

var card = entry.target;
var section = card.closest(".esn-lb");

if (section) {
section.classList.add("is-section-open");
}

openCard(card);
cardObserver.unobserve(card);

});

},
{
threshold: 0.25,
rootMargin: "0px 0px -10% 0px"
}
);

document
.querySelectorAll(".esn-lb-card")
.forEach(function (card) {

cardObserver.observe(card);

});

// Separately watch whole sections just to auto-close them
// again when the user scrolls back up past them.
var sectionObserver =
new IntersectionObserver(
function (entries) {

entries.forEach(function (entry) {

if (!entry.isIntersecting && direction === "up") {
closeSection(entry.target);
}

});

},
{
threshold: 0
}
);

document
.querySelectorAll(".esn-lb")
.forEach(function (section) {

sectionObserver.observe(section);

});

}
else {

document
.querySelectorAll(".esn-lb-card")
.forEach(function (card) {

openCard(card);

});

}

})();
</script>