*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── THEMES ── */
    [data-theme="dark"] {
      --bg:            transparent;
      --bg-hero:       linear-gradient(135deg, #080f14 0%, #091f33 50%, #0c2031 100%);
      --nav-bg:        rgba(15,22,40,0.88);
      --card-bg:       rgba(255,255,255,0.04);
      --card-hover:    rgba(255,255,255,0.09);
      --border:        rgba(255,255,255,0.08);
      --border-hover:  rgba(91,142,240,0.45);
      --text-primary:  #e8edf8;
      --text-muted:    #7a8db0;
      --accent:        #5b8ef0;
      --accent2:       #f5e642;
      --tag-bg:        rgba(91,142,240,0.12);
      --tag-color:     #8ab4f8;
      --tag-active-bg: #5b8ef0;
      --tag-active:    #fff;
      --overlay:       rgba(10,16,36,0.82);
      --grid-line:     rgba(255,255,255,0.02);
      --toggle-bg:     rgba(255,255,255,0.08);
      --lightbox-bg:   rgba(5,10,25,0.96);
      --img-bg:        rgba(255,255,255,0.05);
      --img-border:    rgba(255,255,255,0.07);
    }

  /*  [data-theme="light"] {
      --bg:            #f0f4fc;
      --bg-hero:       linear-gradient(160deg, #dce6f8 0%, #e8eef8 60%, #f0f4fc 100%);
      --nav-bg:        rgba(240,244,252,0.9);
      --card-bg:       rgba(255,255,255,0.72);
      --card-hover:    rgba(255,255,255,0.95);
      --border:        rgba(26,39,68,0.1);
      --border-hover:  rgba(42,93,212,0.4);
      --text-primary:  #1a2744;
      --text-muted:    #4a5e88;
      --accent:        #2a5dd4;
      --accent2:       #c4960a;
      --tag-bg:        rgba(42,93,212,0.09);
      --tag-color:     #2a5dd4;
      --tag-active-bg: #2a5dd4;
      --tag-active:    #fff;
      --overlay:       rgba(15,26,53,0.75);
      --grid-line:     rgba(26,39,68,0.04);
      --toggle-bg:     rgba(26,39,68,0.08);
      --lightbox-bg:   rgba(240,244,252,0.97);
      --img-bg:        rgba(255,255,255,0.6);
      --img-border:    rgba(26,39,68,0.1);
    }
      
*/
  * {
       
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html {
  scroll-behavior: smooth;
}

body {
  background:  #091f33;
  overflow-x: hidden;
}

/* GLOBAL AIR-STYLE CINEMATIC BACKGROUND */

main {
  position: relative;
  overflow: hidden;
  background:
   
#05101b;

  
   
}

/* grid texture overlay */

main::before {
  content: '';

  position: fixed;
  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(59,130,246,0.18),
      transparent 40%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(6,182,212,0.15),
      transparent 40%
    ),

    linear-gradient(
      rgba(255,255,255,0.02) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 1px,
      transparent 1px
    );

  background-size:
    auto,
    auto,
    72px 72px,
    72px 72px;

  pointer-events: none;

  z-index: 0;
}


/* cinematic blue glow */

main::after {
  content: '';
  position: fixed;

  top: -20%;
  left: 50%;
  transform: translateX(-50%);

  width: 1200px;
  height: 900px;

  background: rgba(59,130,246,0.10);

  filter: blur(140px);

  pointer-events: none;
  z-index: 0;
}

/* every section above background */

main section {
  position: relative;
  z-index: 1;
}
    

    body {
      font-family: 'Sora', sans-serif;
      background: var(--bg);
      color: var(--text-primary);
      min-height: 100vh;
      transition: background 0.35s ease, color 0.35s ease;
      overflow-x: hidden;
    }

   /* ── Reset & Tokens ─────────────────────────────────────────────── */

:root{
  --n900:#050e1a; --n800:#091525; --n700:#0d1f35;
  --n600:#132840; --n500:#1a334f;
  --blue:#2d82c9;  --blue-l:#5ba8e8; --teal:#ffffffcc;
  --w:  #fff;      --w70:rgba(255,255,255,.70);
  --w30:rgba(255,255,255,.30); --w12:rgba(255,255,255,.12);
  --w08:rgba(255,255,255,.08); --w05:rgba(255,255,255,.05);
  --fd:'Sora',sans-serif; --fb:'sora',sans-serif;
}


/* Noise grain overlay */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:180px;opacity:.55;
}

/* ── Section ──────────────────────────────────────────────────── */
.gallery-section{position:relative;z-index:1;padding:90px 60px 110px;max-width:1380px;margin:0 auto}

/* Header */
.gallery-header{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px;
  opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.gallery-header.vis{opacity:1;transform:none}
.header-left{flex:1}
.eyebrow{font-size: 0.99rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9aaac8;
    margin-bottom: 1rem;
    opacity: 0.7;}

.gallery-title{font-family:var(--fd);font-size:clamp(36px,5vw,60px);font-weight:800;line-height:1.0;
  letter-spacing:-.02em}
.header-right{max-width:360px;flex-shrink:0}
.gallery-desc{font-size:14px;line-height:1.8;color:var(--w70);font-weight:300}

/* Filter bar */
.filter-bar{display:flex;gap:6px;margin-bottom:40px;flex-wrap:wrap;
  opacity:0;transform:translateY(18px);transition:opacity .6s ease .1s,transform .6s ease .1s}
.filter-bar.vis{opacity:1;transform:none}
.fb-btn{padding:8px 20px;border-radius:40px;border:1px solid var(--w30);background:transparent;
  color:var(--w70);font-family:var(--fb);font-size:12.5px;cursor:pointer;transition:all .22s ease;letter-spacing:.04em}
.fb-btn:hover{border-color:var(--blue-l);color:var(--w)}
.fb-btn.active{background:var(--blue);border-color:var(--blue);color:var(--w);font-weight:500}

/* ── Grid ────────────────────────────────────────────────────── */
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;
  opacity:0;transition:opacity .5s ease .25s}
.gallery-grid.vis{opacity:1}
.cell-1{grid-column:1/7;grid-row:1;aspect-ratio:16/9}
.cell-2{grid-column:7/10;grid-row:1;aspect-ratio:4/3}
.cell-3{grid-column:10/13;grid-row:1;aspect-ratio:4/3}
.cell-4{grid-column:1/4;grid-row:2;aspect-ratio:4/3}
.cell-5{grid-column:4/8;grid-row:2;aspect-ratio:4/3}
.cell-6{grid-column:8/13;grid-row:2;aspect-ratio:4/3}

/* Card */
.gallery-card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;
  background:var(--n700);
  opacity:0;transform:translateY(22px);
  transition:opacity .55s ease,transform .55s ease,box-shadow .3s ease}
.gallery-card.rev{opacity:1;transform:none}
.cell-1.rev{transition-delay:0s}
.cell-2.rev{transition-delay:.08s}
.cell-3.rev{transition-delay:.16s}
.cell-4.rev{transition-delay:.22s}
.cell-5.rev{transition-delay:.30s}
.cell-6.rev{transition-delay:.38s}
.gallery-card:hover{box-shadow:0 20px 50px rgba(0,0,0,.6)}

.gallery-card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,1,.36,1),filter .4s ease;
  filter:brightness(.85) saturate(.9)}
.gallery-card:hover img{transform:scale(1.07);filter:brightness(.65) saturate(1.15)}

/* Card overlay */
.card-ov{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(5,14,26,.92) 100%);
  opacity:0;transition:opacity .35s ease;
  display:flex;align-items:flex-end;padding:18px 20px}
.gallery-card:hover .card-ov{opacity:1}
.card-label{font-family:var(--fd);font-size:13px;font-weight:600;color:var(--w);
  transform:translateY(8px);transition:transform .3s ease .05s}
.gallery-card:hover .card-label{transform:none}

/* Photo count badge */
.photo-badge{
  position:absolute;bottom:14px;right:14px;
  display:flex;align-items:center;gap:5px;
  background:rgba(9,21,37,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--w12);
  border-radius:30px;
  padding:4px 10px 4px 8px;
  font-size:11px;color:var(--w70);
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease .05s,transform .3s ease .05s}
.gallery-card:hover .photo-badge{opacity:1;transform:none}
.photo-badge svg{width:11px;height:11px;stroke:var(--teal);fill:none;stroke-width:2}

/* Tag */
.card-tag{position:absolute;top:14px;left:14px;
  background:rgba(45,130,201,.82);backdrop-filter:blur(8px);
  color:var(--w);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 11px;border-radius:4px}

/* Expand icon */
.expand-ico{position:absolute;top:12px;right:12px;width:30px;height:30px;
  background:var(--w08);backdrop-filter:blur(8px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s}
.expand-ico svg{width:13px;stroke:var(--w);fill:none;stroke-width:2}
.gallery-card:hover .expand-ico{opacity:1;transform:scale(1)}

/* Footer row */
.gallery-footer{display:flex;align-items:center;justify-content:space-between;
  margin-top:40px;padding-top:32px;border-top:1px solid var(--w08);
  opacity:0;transform:translateY(14px);transition:opacity .6s ease .45s,transform .6s ease .45s}
.gallery-footer.vis{opacity:1;transform:none}
.count-lbl{font-size:13px;color:var(--w70);font-weight:300}
.count-lbl span{color:var(--w);font-weight:500}
.view-all{display:inline-flex;align-items:center;gap:9px;padding:12px 26px;
  border:1.5px solid var(--blue);border-radius:6px;color:var(--blue-l);
  font-family:var(--fb);font-size:13px;font-weight:500;letter-spacing:.04em;
  background:transparent;cursor:pointer;text-decoration:none;
  transition:background .22s,color .22s,transform .2s}
.view-all svg{width:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .22s}
.view-all:hover{background:var(--blue);color:var(--w);transform:translateY(-2px)}
.view-all:hover svg{transform:translateX(4px)}

/* ══════════════════════════════════════════════
   CINEMATIC GLASSMORPHISM LIGHTBOX
══════════════════════════════════════════════ */
.lightbox{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  background:rgba(4,10,20,.80);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
}
.lightbox.open{opacity:1;pointer-events:all}

/* Glass card */
.lb-glass{
  position:relative;
  width:100%;max-width:1020px;
  background:rgba(10,20,38,.72);
  backdrop-filter:blur(48px) saturate(1.5) brightness(1.08);
  -webkit-backdrop-filter:blur(48px) saturate(1.5) brightness(1.08);
  border:1px solid var(--w12);
  border-radius:20px;
  box-shadow:
    0 60px 120px rgba(0,0,0,.75),
    0  0   0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.13);
  overflow:hidden;
  transform:scale(.93) translateY(20px);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.lightbox.open .lb-glass{transform:scale(1) translateY(0)}

/* Ambient glow behind glass */
.lb-glass::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 50% at 50% -10%,
    rgba(45,130,201,.18) 0%, transparent 70%);
}

/* ── LB Header ──────────────────────────────── */
.lb-header{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 14px;
  border-bottom:1px solid var(--w08);
  background:rgba(255,255,255,.03);
}
.lb-title-wrap{display:flex;align-items:center;gap:12px}
.lb-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 8px var(--teal);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.lb-card-title{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--w);letter-spacing:.01em}
.lb-header-right{display:flex;align-items:center;gap:14px}
.lb-counter-pill{
  background:var(--w08);border:1px solid var(--w12);border-radius:20px;
  padding:4px 12px;font-size:11px;font-weight:500;color:var(--w70);letter-spacing:.06em}
.lb-close-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--w30);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s}
.lb-close-btn:hover{border-color:var(--w);background:var(--w08)}
.lb-close-btn svg{width:14px;stroke:var(--w);fill:none;stroke-width:2}

/* ── LB Stage ──────────────────────────────── */
.lb-stage{position:relative;z-index:1;background:#000}

/* Cinematic letterbox bars */
.lb-bar{
  position:absolute;left:0;right:0;height:48px;z-index:4;pointer-events:none;
  background:rgba(4,10,20,.92);
}
.lb-bar.top{top:0}
.lb-bar.bottom{bottom:0}

/* Image wrapper */
.lb-img-wrap{
  position:relative;aspect-ratio:2.39/1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.lb-main-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .35s ease,transform .35s ease;
}
.lb-main-img.fade-out{opacity:0;transform:scale(1.02)}

/* Vignette */
.lb-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 90% 80% at 50% 50%,
    transparent 55%,rgba(4,10,20,.55) 100%);
}

/* Cinematic grain */
.lb-grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.18'/%3E%3C/svg%3E");
  background-size:180px;
  animation:grainShift 0.15s steps(1) infinite;
}
@keyframes grainShift{
  0%  {background-position:  0   0}
  25% {background-position: 40px -20px}
  50% {background-position:-20px  40px}
  75% {background-position: 30px  30px}
}

/* Card nav arrows — navigates between CARDS */
.lb-card-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:44px;height:44px;border-radius:50%;
  background:rgba(9,21,37,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--w12);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s,transform .2s;
}
.lb-card-nav:hover{border-color:var(--blue);background:rgba(45,130,201,.25);transform:translateY(-50%) scale(1.1)}
.lb-card-nav svg{width:18px;stroke:var(--w);fill:none;stroke-width:2}
.lb-prev-card{left:14px}
.lb-next-card{right:14px}

/* ── LB Thumbs ─────────────────────────────── */
.lb-thumbs-wrap{
  position:relative;z-index:2;
  padding:14px 24px;
  background:rgba(255,255,255,.025);
  border-top:1px solid var(--w08);
  display:flex;align-items:center;gap:10px;
}
.lb-thumb{
  flex:1;aspect-ratio:16/9;border-radius:7px;overflow:hidden;cursor:pointer;
  position:relative;
  border:1.5px solid transparent;
  transition:border-color .25s,transform .2s;
  background:var(--n700);
}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.75) saturate(.8);transition:filter .25s}
.lb-thumb.active{border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,184,195,.2)}
.lb-thumb.active img{filter:brightness(1) saturate(1)}
.lb-thumb:not(.active):hover{border-color:var(--blue-l);transform:scale(1.03)}
.lb-thumb:not(.active):hover img{filter:brightness(.9)}
/* Thumb number */
.lb-thumb::after{
  content:attr(data-num);
  position:absolute;bottom:4px;right:5px;
  font-size:9px;font-weight:600;color:rgba(255,255,255,.7);
  font-family:var(--fd);letter-spacing:.04em;
}

/* ── LB Caption ─────────────────────────────── */
.lb-footer{
  position:relative;z-index:2;
  padding:12px 24px 18px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.lb-caption-text{
  font-family:var(--fb);font-size:13px;font-weight:300;
  color:var(--w70);letter-spacing:.02em;
  display:flex;align-items:center;gap:8px;
}
.lb-caption-text::before{
  content:'';width:20px;height:1px;background:var(--teal);flex-shrink:0;
}
.lb-nav-hint{font-size:10.5px;color:rgba(255,255,255,.28);letter-spacing:.08em;
  text-transform:uppercase;flex-shrink:0}

/* ── Responsive ─────────────────────────────── */
@media(max-width:900px){
  .gallery-section{padding:60px 22px 70px}
  .gallery-header{flex-direction:column;align-items:flex-start}
  .header-right{max-width:100%}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:8px}
  .cell-1,.cell-2,.cell-3,.cell-4,.cell-5,.cell-6{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .cell-1{grid-column:1/3;aspect-ratio:16/9}
  .lightbox{padding:14px}
  .lb-bar{height:24px}
  .lb-prev-card{left:6px}
  .lb-next-card{right:6px}
}