/* === CRITICAL CSS (ABOVE THE FOLD) === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;min-height:100vh;overflow-y:scroll;font:system-ui,sans-serif;font-size:16px;line-height:1.5;color:#222;position:relative;background:#c6e0f6}
body{min-height:100vh;display:flex;flex-direction:column;font-family:system-ui,sans-serif;font-size:16px;line-height:1.5;color:#222;overflow-y:auto;background:none;padding-bottom:30rem;-webkit-overflow-scrolling:touch;position:relative;z-index:0}
body,div,section,nav,aside,article,header,footer,main{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}
body::-webkit-scrollbar,div::-webkit-scrollbar,section::-webkit-scrollbar,nav::-webkit-scrollbar,aside::-webkit-scrollbar,article::-webkit-scrollbar,header::-webkit-scrollbar,footer::-webkit-scrollbar,main::-webkit-scrollbar{display:none}
a{color:#fffdfa;text-decoration:none}
a:hover{color:#0dccfb}
header,.text-block h2,footer,.nav-wrapper,#navbar {position:relative;z-index:1}
header{width:100%;aspect-ratio:2560/408;min-height:60px;max-height:408px;display:flex;justify-content:center;align-items:center;background:linear-gradient(to right,#d2fbff,white 50%,#d2fbff);overflow:visible}
header img{max-width:100%;display:block;-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent)}
.nav-wrapper{position:relative}
#navbar{background:#152d3f;display:flex;justify-content:center;gap:.5rem;width:60%;max-width:1200px;margin:0 auto;padding:.2rem 0;box-shadow:0 1px 3px rgba(2,15,30,.15);border-radius:12px;-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 90%,transparent);mask-image:linear-gradient(to right,transparent,black 15%,black 90%,transparent);z-index:10}
#navbar a{flex:1;max-width:80px;min-width:60px;display:inline-flex;align-items:center;justify-content:center;height:25px;border-radius:9px;color:#f2f2f2;font-weight:600;font-size:.9rem;white-space:nowrap;cursor:pointer;transition:all .2s ease}
#navbar a:hover{background:rgba(9,55,73,.75);color:#fff;transform:scale(1.02);box-shadow:0 0 4px 3px rgba(248,194,118,.3)}
#navbar a.active{background:rgb(255,174,56);color:black;box-shadow:0 0 10px 4px rgba(255,174,56,.8)}
#bg-video{position:fixed;top:0;left:0;width:100%;height:100vh;object-fit:cover;z-index:-2;pointer-events:none;filter:brightness(.5) blur(13px)}
#bg-gradient{position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(to bottom,rgb(2,35,61),rgba(1,60,73,.34) 75%,transparent)}
.snow{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;bottom:16px;}
.snowflake{position:absolute;top:5rem;color:white;font-size:.2rem;opacity:.7;left:var(--left);animation:fall var(--animation-duration) linear infinite;animation-delay:var(--delay)}
@keyframes fall{from{transform:translateY(0) translateX(var(--drift))}to{transform:translateY(100vh) translateX(var(--drift))}}
.text-block{width:100%;max-width:900px;margin:0 auto;padding:0 1rem;padding-top:.5rem;font-size:.9rem}
.text-block h1{font-size:3rem;color:#132537;padding-top:1rem;text-align:center}
.text-block h2{font-size:1.5rem;color:#132537;text-align:left;margin:.1rem 0;z-index:0}
.glass{background:linear-gradient(135deg,rgba(100,140,180,.3),rgba(255,255,255,.1));border-radius:8px;box-shadow:inset 0 0 15px rgba(173,216,230,.6),inset 0 4px 10px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.2);backdrop-filter:blur(8px);padding:.7rem 1.4rem;color:#f4faff;margin-bottom:.5rem;position:relative}
.glass::before{content:"";position:absolute;inset:0;background:url('bg-pattern.svg') repeat;mix-blend-mode:overlay;z-index:1;pointer-events:none}
footer{position:fixed;bottom:0;width:100%;height:16px;background:#0e1b27;color:rgba(255,255,255,.646);padding:.4rem 1rem .5rem;font-size:.6rem;display:flex;justify-content:center;align-items:center;box-shadow:0 -2px 10px rgba(0,11,31,1);z-index:1000;-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}

/* === NON-CRITICAL (BELOW THE FOLD) === */
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:#0e1b27;border:2px solid transparent;border-radius:5px;background-clip:content-box;box-shadow:0 0 8px rgba(1,54,66,.6)}
html::-webkit-scrollbar-thumb:hover{box-shadow:0 0 12px rgba(255,166,0,.3)}
.menu-toggle{display:none}
.hamburger{display:none;position:fixed;top:15px;left:15px;width:60px;height:60px;background:#152d3f;color:#f2f2f2;font-size:1.6rem;font-weight:600;border-radius:50%;align-items:center;justify-content:center;cursor:pointer;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.4);backdrop-filter:blur(6px);transition:all .3s ease}
.hamburger::after{position:absolute;color:#ffae38;font-size:1.8rem;opacity:0;transition:opacity .2s}
@media (max-width:768px){
  .hamburger{display:flex}
  #navbar{position:fixed;top:0;left:-300px;width:260px;height:100vh;background:#152d3f;opacity: 0.97;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:90px;padding-bottom:120px;gap:0.8rem;transition:left .35s ease;z-index:99;box-shadow:8px 0 15px rgba(0,0,0,.3);border-radius:0;-webkit-mask-image:none;mask-image:none}
  #navbar a{width:85%;max-width:240px;height:50px;font-size:1.4rem;border-radius:12px}
  .menu-toggle:checked ~ #navbar{left:0}
  .menu-toggle:checked ~ .hamburger{background:rgb(255,174,56);color:black}
  .menu-toggle:checked ~ .hamburger::after{opacity:1}
  .menu-toggle:checked ~ .hamburger > *{opacity:0}
}
@media (min-width:769px){.hamburger{display:none}}
.spin-glow{display:inline-block;animation:spin-glow 2s ease-in-out infinite}
@keyframes spin-glow{0%{transform:rotate(0deg);text-shadow:0 0 5px rgba(205,120,0,.5)}50%{transform:rotate(180deg);text-shadow:0 0 10px rgba(205,120,0,.8)}100%{transform:rotate(360deg);text-shadow:0 0 5px rgba(205,120,0,.5)}}
.p{text-align:justify;line-height:1.5;font-size:1.1rem;padding:10px 0;text-shadow:2px 2px 5px rgba(0,0,0,.3)}
iframe {display:block; margin: 0 auto; margin-top: 0.5rem; border-radius:8px;box-shadow:0 4px 10px rgba(33, 64, 81, 0.435)}
.author{font-size:.6rem;color:rgba(254,249,209,.7);text-align:right;padding-bottom:.5rem}
.source{font-size:.9rem;color:#ebe6e6;margin-top:1rem;text-align:center}
.gall{width:100%;max-width:1200px;margin:0 auto .5rem;padding:0 1rem;padding-top:.5rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:15px;margin:.5rem auto;max-width:1200px;padding:0 15px}
.gallery-item{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 10px rgba(11,28,37,.6)}
.gallery-item img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.gallery-item img:hover{transform:scale(1.1);box-shadow:0 6px 15px rgba(24,19,1,.1)}
.zoomed{display:none;position:fixed;inset:0;background:radial-gradient(circle at center,rgba(8,72,102,.95) 0%,rgba(8,72,102,.5) 50%,transparent 100%),linear-gradient(to bottom,rgba(8,72,102,.9),rgba(8,72,102,.4));z-index:999;justify-content:center;align-items:center;pointer-events:none;backdrop-filter:blur(3px)}
.zoomed img{max-width:90%;max-height:90%;object-fit:contain;border:3px solid rgba(168,239,255,.3);border-radius:12px;box-shadow:0 0 30px rgba(168,239,255,.4)}
.zoomed:target{display:flex}
.next{position:absolute;top:50%;right:2.5rem;font-size:4rem;color:rgb(255,196,3);cursor:pointer;z-index:1001;transform:translateY(-50%);pointer-events:auto}
.next:hover{color:#ff9900}
.global-close{position:fixed;top:20px;right:50px;font-size:5rem;color:white;cursor:pointer;z-index:9999;display:none;text-decoration:none;pointer-events:auto}
.zoomed:target ~ .global-close{display:block}
.global-close:hover{color:#ff9900}