/* ===== Shared site behaviour styles: burger, language switch, page transition, CV modal ===== */

/* Page transition overlay */
.pageTransition { position:fixed; inset:0; background:#F8F8F8; z-index:9999; opacity:0; pointer-events:none; transition:opacity .45s cubic-bezier(.22,1,.36,1); }
.pageTransition.enter { opacity:1; animation:pageFadeIn .5s cubic-bezier(.22,1,.36,1) forwards; }
.pageTransition.leave { opacity:1; pointer-events:auto; }
@keyframes pageFadeIn { from { opacity:1; } to { opacity:0; } }
body.noTransitionFlash { visibility:hidden; }

/* Language switcher (desktop, inline in header) */
.langSwitch { position:relative; display:flex; align-items:center; background:rgba(37,37,37,0.06); border-radius:999px; padding:4px; gap:2px; cursor:pointer; border:none; font-family:inherit; height:46px; box-sizing:border-box; }
.langSwitch .langThumb { position:absolute; top:4px; left:4px; bottom:4px; width:42px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.14); border-radius:999px; transition:transform .3s cubic-bezier(.22,1,.36,1); z-index:0; }
.langSwitch[data-lang="en"] .langThumb { transform:translateX(44px); }
.langSwitch .langOption { position:relative; z-index:1; width:42px; height:100%; display:flex; align-items:center; justify-content:center; padding-top:2px; font-size:16px; font-weight:500; color:#878787; transition:color .3s ease; user-select:none; }
.langSwitch[data-lang="ru"] .langOption[data-lang-opt="ru"] { color:#252525; }
.langSwitch[data-lang="en"] .langOption[data-lang-opt="en"] { color:#252525; }

/* CV button in English mode: soft neutral pill, no icon */
html[lang="en"] .cvBtn { background:#EAEAEA; color:#252525; }
html[lang="en"] .cvBtn:hover { background:#DEDEDE; }
html[lang="en"] .cvBtn svg { display:none; }
html[lang="en"] .cvBtn span { transform:translateY(2px); }

/* Linkedin nav item: EN only for now, RU link isn't ready yet */
.nav a[data-en="Linkedin"], .mobileNav a[data-en="Linkedin"] { display:none; }
html[lang="en"] .nav a[data-en="Linkedin"] { display:inline-block; }
html[lang="en"] .mobileNav a[data-en="Linkedin"] { display:inline; }

/* Burger button (hidden by default, shown at medium widths) */
.burgerBtn { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; z-index:210; position:relative; }
.burgerBtn span { display:block; width:22px; height:2px; background:#252525; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.burgerBtn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burgerBtn.open span:nth-child(2) { opacity:0; }
.burgerBtn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile slide-down menu panel */
.mobileMenu { display:none; }

/* CV / PDF preview modal */
.cvModalOverlay { position:fixed; inset:0; background:rgba(20,20,20,0.55); z-index:1000; display:none; align-items:center; justify-content:center; padding:40px 24px; backdrop-filter:blur(4px); }
.cvModalOverlay.open { display:flex; }
.cvModalBox { position:relative; width:min(900px, 100%); height:min(90vh, 1100px); background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.35); display:flex; flex-direction:column; }
.cvModalBox iframe { flex:1; width:100%; border:none; }
.cvModalClose { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; background:rgba(37,37,37,0.85); color:#fff; border:none; cursor:pointer; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; z-index:2; transition:background .2s ease; }
.cvModalClose:hover { background:#252525; }

/* Intro loader (index page only) */
.introLoader { position:fixed; inset:0; background:#fff; z-index:10000; display:flex; align-items:center; justify-content:center; padding:24px; transition:opacity .6s ease, visibility .6s ease; }
.introLoader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.introLoader .introText { font-family:'Geometria', -apple-system, sans-serif; font-weight:500; font-size:clamp(24px, 4vw, 48px); color:#252525; text-align:center; }
.introLoader .introCursor { display:inline-block; width:0.06em; margin-left:2px; background:#252525; animation:introBlink .8s step-end infinite; }
@keyframes introBlink { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }

@media (max-width: 1180px) {
  .nav, .name, .headerBtns { display:none !important; }
  .burgerBtn { display:flex; }

  .mobileMenu {
    display:flex;
    position:fixed;
    top:0; right:0;
    width:min(360px, 86vw);
    height:100vh;
    background:#F8F8F8;
    box-shadow:-10px 0 40px rgba(0,0,0,0.12);
    z-index:200;
    flex-direction:column;
    padding:104px 28px 32px;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.22,1,.36,1);
    box-sizing:border-box;
  }
  .mobileMenu.open { transform:translateX(0); }

  .mobileMenuBackdrop { display:none; position:fixed; inset:0; background:rgba(20,20,20,0.35); z-index:190; opacity:0; transition:opacity .35s ease; }
  .mobileMenuBackdrop.open { display:block; opacity:1; }

  .mobileNav { display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center; }
  .mobileNav a { font-weight:500; font-size:22px; color:#252525; text-decoration:none; }

  .mobileBtns { display:flex; flex-direction:column; gap:12px; margin-top:40px; }
  .mobileBtns .btn { justify-content:center; }

  .mobileMenuFooter { margin-top:auto; display:flex; justify-content:center; padding-top:24px; }
}