/* LAI Festival Modal — Frontend CSS v5 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700;900&display=swap');

#lai26-pre,#lai26-ov,#lai26-confetti,
#lai26-pre *,#lai26-ov * {
    box-sizing:border-box; margin:0; padding:0;
}

/* Preloader */
#lai26-pre {
    position:fixed; inset:0; z-index:2147483646;
    background:rgba(3,12,28,0.97);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:18px;
    opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
#lai26-pre.on  { opacity:1; pointer-events:all; }
#lai26-pre.off { opacity:0; pointer-events:none; }
.lai26-pre-logo { animation:lai26pulse 1.4s ease-in-out infinite; }
@keyframes lai26pulse {
    0%,100%{ transform:scale(1); opacity:1; }
    50%    { transform:scale(1.1); opacity:0.65; }
}
.lai26-spinner {
    width:44px; height:44px;
    border:3px solid rgba(245,197,24,0.15);
    border-top-color:#f5c518; border-radius:50%;
    animation:lai26spin 0.75s linear infinite;
}
@keyframes lai26spin { to{ transform:rotate(360deg); } }
.lai26-pre-txt {
    font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
    letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.35);
}

/* Overlay */
#lai26-ov {
    position:fixed; inset:0; z-index:2147483647;
    display:none; align-items:center; justify-content:center;
    padding:16px;
}
#lai26-ov.on { display:flex; }

/* Backdrop */
#lai26-bd {
    position:absolute; inset:0;
    background:rgba(0,8,24,0.78);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    animation:lai26bdin 0.4s ease forwards;
}
@keyframes lai26bdin { from{opacity:0} to{opacity:1} }

/* Modal card */
#lai26-card {
    position:relative; z-index:2; border-radius:20px; overflow:hidden;
    box-shadow:0 60px 140px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.07),inset 0 1px 0 rgba(255,255,255,0.1);
    animation:lai26cardin 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
    max-height:90vh; display:flex;
}
@keyframes lai26cardin {
    from{ opacity:0; transform:translateY(52px) scale(0.92); }
    to  { opacity:1; transform:translateY(0) scale(1); }
}

/* Horizontal */
#lai26-card.lh { flex-direction:column; width:min(680px,96vw); }
.lh #lai26-izone { width:100%; height:clamp(155px,30vw,235px); }
.lh #lai26-body  { padding:26px 30px 30px; }

/* Vertical */
#lai26-card.lv { flex-direction:row; width:min(800px,96vw); }
.lv #lai26-izone { width:44%; flex-shrink:0; min-height:430px; }
.lv #lai26-body  { flex:1; padding:28px 26px 26px; display:flex; flex-direction:column; justify-content:center; overflow-y:auto; }

/* Mobile */
#lai26-card.mob { flex-direction:column; width:min(420px,96vw); }
.mob #lai26-izone { width:100%; height:clamp(170px,55vw,260px); }
.mob #lai26-body  { padding:20px 20px 24px; }

/* Image zone */
#lai26-izone { position:relative; overflow:hidden; background:#001020; flex-shrink:0; }
#lai26-iblur {
    position:absolute; inset:-28px; background-size:cover; background-position:center;
    filter:blur(22px) brightness(0.48) saturate(1.7); transform:scale(1.12);
    opacity:0; transition:opacity 0.5s ease;
}
#lai26-iblur.on { opacity:1; }
#lai26-izone::before {
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,0.38) 100%);
}
#lai26-iphoto-wrap { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:10px; }
#lai26-iphoto {
    max-width:100%; max-height:100%; object-fit:contain; display:block;
    filter:drop-shadow(0 10px 26px rgba(0,0,0,0.55)); opacity:0; transition:opacity 0.45s ease;
}
#lai26-iphoto.on { opacity:1; }
#lai26-izone::after { content:''; position:absolute; z-index:4; pointer-events:none; }
.lh #lai26-izone::after,.mob #lai26-izone::after {
    bottom:0; left:0; right:0; height:52px;
    background:linear-gradient(to bottom,transparent,#060f1e);
}
.lv #lai26-izone::after {
    top:0; right:0; bottom:0; width:50px;
    background:linear-gradient(to right,transparent,#060f1e);
}

/* Body */
#lai26-body {
    background:linear-gradient(155deg,#060f1e 0%,#072416 100%);
    color:#fff; text-align:center; position:relative; overflow:hidden;
}
#lai26-body::before {
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
#lai26-binner { position:relative; z-index:1; }

.l-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(245,197,24,0.1); border:1px solid rgba(245,197,24,0.3);
    color:#f5c518; font-family:'Montserrat',sans-serif; font-weight:700;
    font-size:9px; letter-spacing:2.2px; text-transform:uppercase;
    padding:5px 12px 5px 9px; border-radius:100px; margin-bottom:10px; white-space:nowrap;
}
.l-badge svg { width:11px; height:11px; flex-shrink:0; }

.l-h1 { font-family:'Bebas Neue',sans-serif; line-height:0.93; letter-spacing:1px; color:#fff; margin-bottom:3px; }
.l-h1 .g { color:#f5c518; }
.lh .l-h1,.lv .l-h1 { font-size:clamp(30px,4vw,48px); white-space:nowrap; }
.mob .l-h1 { font-size:clamp(36px,10vw,50px); }

.l-tag {
    font-family:'Montserrat',sans-serif; font-weight:700;
    text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:12px;
}
.lh .l-tag,.lv .l-tag { font-size:clamp(9px,1.4vw,11px); letter-spacing:3.5px; white-space:nowrap; }
.mob .l-tag { font-size:10px; letter-spacing:3px; }

.l-div { width:36px; height:2px; background:linear-gradient(to right,#f5c518,#ff5533); border-radius:2px; margin:0 auto 12px; }

.l-dates {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09);
    border-radius:10px; padding:8px 16px; margin-bottom:16px;
    font-family:'Montserrat',sans-serif; font-size:12px; font-weight:600;
    color:rgba(255,255,255,0.7); white-space:nowrap;
}
.l-dates svg { width:13px; height:13px; flex-shrink:0; }
.l-dates strong { color:#fff; font-weight:700; }

.l-cta {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; background:linear-gradient(135deg,#ff5533 0%,#cc1a1a 100%);
    color:#fff; font-family:'Montserrat',sans-serif; font-weight:900;
    font-size:13px; letter-spacing:2px; text-transform:uppercase;
    padding:16px 20px; border-radius:12px; text-decoration:none; border:none; cursor:pointer;
    box-shadow:0 8px 28px rgba(204,26,26,0.5),inset 0 1px 0 rgba(255,255,255,0.18);
    transition:transform 0.18s ease,box-shadow 0.18s ease,filter 0.18s ease;
    position:relative; overflow:hidden; line-height:1.2; white-space:nowrap; margin-bottom:10px;
}
.l-cta::after {
    content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
    background:linear-gradient(to right,transparent,rgba(255,255,255,0.15),transparent);
    transform:skewX(-20deg); transition:left 0.55s ease;
}
.l-cta:hover::after { left:125%; }
.l-cta:hover { transform:translateY(-3px); text-decoration:none; color:#fff; filter:brightness(1.07);
    box-shadow:0 14px 40px rgba(204,26,26,0.6),inset 0 1px 0 rgba(255,255,255,0.18); }
.l-cta:active { transform:scale(0.97); }
.l-cta svg { width:16px; height:16px; flex-shrink:0; }

.l-note { font-family:'Montserrat',sans-serif; font-size:10px; color:rgba(255,255,255,0.28); }
.l-note a { color:rgba(255,255,255,0.42); text-decoration:underline; text-underline-offset:2px; }
.l-note a:hover { color:rgba(255,255,255,0.65); }

#lai26-close {
    position:absolute; top:12px; right:12px; z-index:20;
    width:34px; height:34px; border-radius:50%;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.1); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s ease,transform 0.3s ease;
}
#lai26-close:hover { background:rgba(204,26,26,0.75); transform:rotate(90deg); }
#lai26-close svg { width:13px; height:13px; display:block; }

#lai26-confetti { position:fixed; inset:0; pointer-events:none; z-index:2147483647; display:none; }