/* ══════════════════════════════════════════════════════════ ELAINA THEME — "The Ashen Witch's Journey" Inspired by Majo no Tabitabi (Wandering Witch) Palette: Midnight Navy × Silver × Soft Lavender × Gold ══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ TABLE OF CONTENTS ────────────────────────────────────────────────────────── Fonts + base reset ................ ln 7 Stars + canvas ......... ln 31 Navigation bar .................... ln 1294 Mobile nav ............. ln 1513 Hero / accents / fog .............. ln 1318 Scrollbar .............. ln 1406 Per-page entry animations ......... ln 1555 ────────────────────────────────────────────────────────── Homepage — recent strips .......... ln 2780 Blog cards ............. ln 2967 Blog listing (search + filter) .... ln 3025 Blog listing cards ..... ln 3142 Blog post page .................... ln 3224 Rendered Markdown ...... ln 3283 Code blocks + language badge ....... ln 3395 Share buttons .......... ln 3967 Buy Me a Coffee ................... ln 3623 Reading progress bar ... ln 3891 Skeleton loading .................. ln 3556 Certificates ........... ln 3800 ────────────────────────────────────────────────────────── Publications page ................. ln 4023 Projects page .......... ln 4051 Blog listing page (layout) ........ ln 4189 Blog post (layout) ..... ln 4284 Career page ....................... ln 4372 Career timeline ........ ln 5135 ────────────────────────────────────────────────────────── Blog post TOC sidebar ............. ln 4950 Series banner + nav .... ln 4970 Footnotes ......................... ln 5003 Figure captions ........ ln 5029 Blog post article + sidebar layout ln 5062 ────────────────────────────────────────────────────────── Keyframe animations ............... ln 4458 Intro loading screen ... ln 4795 Custom cursor + sparkle trail ...... ln 4840 Typewriter hero ........ ln 4719 Responsive media queries .......... ln 4702 Final responsive ....... ln 5309 ══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap'); @font-face { font-family: Inconsolata; src: url("../fonts/Inconsolata/Inconsolata-Regular.ttf"); font-display: swap; } @font-face { font-family: Raleway; src: url("../fonts/Noto_Sans/NotoSans-Regular.ttf"); font-display: swap; } /* ── Page base background on so z-index:-1 canvas stars are always above it regardless of body stacking context (body opacity < 1 creates stacking context that would bury z-index:-1 children behind body background). ── */ html { background-color: #000000; scroll-behavior: smooth; overflow-x: clip; } /* ── Fixed white stars layer ─────────────────────────────── */ @keyframes star-twinkle-a { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.45; } } @keyframes star-twinkle-b { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } body::before { content: ''; position: fixed; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; pointer-events: none; z-index: 0; animation: star-twinkle-a 7s ease-in-out infinite; box-shadow: 142px 38px 0 0 rgba(255,255,255,0.55), 287px 112px 0 0 rgba(255,255,255,0.4), 54px 201px 0 0 rgba(255,255,255,0.6), 421px 67px 0 0 rgba(255,255,255,0.35), 763px 19px 0 0 rgba(255,255,255,0.5), 935px 88px 0 0 rgba(255,255,255,0.45), 1102px 143px 0 0 rgba(255,255,255,0.3), 1318px 55px 0 0 rgba(255,255,255,0.55), 1570px 27px 0 0 rgba(255,255,255,0.4), 1742px 99px 0 0 rgba(255,255,255,0.5), 1856px 41px 0 0 rgba(255,255,255,0.35), 38px 318px 0 0 rgba(255,255,255,0.45), 196px 442px 0 0 rgba(255,255,255,0.5), 349px 377px 0 0 rgba(255,255,255,0.3), 512px 289px 0 0 rgba(255,255,255,0.55), 671px 405px 0 0 rgba(255,255,255,0.4), 808px 331px 0 0 rgba(255,255,255,0.6), 987px 472px 0 0 rgba(255,255,255,0.35), 1124px 398px 0 0 rgba(255,255,255,0.5), 1267px 311px 0 0 rgba(255,255,255,0.45), 1445px 467px 0 0 rgba(255,255,255,0.3), 1598px 382px 0 0 rgba(255,255,255,0.55), 1733px 299px 0 0 rgba(255,255,255,0.4), 1889px 411px 0 0 rgba(255,255,255,0.5), 73px 548px 0 0 rgba(255,255,255,0.45), 231px 601px 0 0 rgba(255,255,255,0.35), 388px 533px 0 0 rgba(255,255,255,0.6), 547px 689px 0 0 rgba(255,255,255,0.4), 703px 572px 0 0 rgba(255,255,255,0.5), 861px 644px 0 0 rgba(255,255,255,0.3), 1018px 511px 0 0 rgba(255,255,255,0.55), 1177px 667px 0 0 rgba(255,255,255,0.45), 1336px 594px 0 0 rgba(255,255,255,0.4), 1492px 723px 0 0 rgba(255,255,255,0.35), 1651px 558px 0 0 rgba(255,255,255,0.6), 1812px 681px 0 0 rgba(255,255,255,0.5), 97px 782px 0 0 rgba(255,255,255,0.4), 258px 834px 0 0 rgba(255,255,255,0.55), 414px 761px 0 0 rgba(255,255,255,0.3), 572px 895px 0 0 rgba(255,255,255,0.45), 729px 812px 0 0 rgba(255,255,255,0.5), 887px 748px 0 0 rgba(255,255,255,0.35), 1043px 883px 0 0 rgba(255,255,255,0.6), 1201px 799px 0 0 rgba(255,255,255,0.4), 1358px 856px 0 0 rgba(255,255,255,0.5), 1517px 771px 0 0 rgba(255,255,255,0.3), 1674px 912px 0 0 rgba(255,255,255,0.45), 1831px 824px 0 0 rgba(255,255,255,0.55), 119px 967px 0 0 rgba(255,255,255,0.4), 276px 1034px 0 0 rgba(255,255,255,0.35), 433px 988px 0 0 rgba(255,255,255,0.6), 591px 1051px 0 0 rgba(255,255,255,0.5), 748px 1008px 0 0 rgba(255,255,255,0.3), 906px 1072px 0 0 rgba(255,255,255,0.45), 1063px 1017px 0 0 rgba(255,255,255,0.55), 1221px 1064px 0 0 rgba(255,255,255,0.4), 1378px 993px 0 0 rgba(255,255,255,0.5), 1536px 1044px 0 0 rgba(255,255,255,0.35), 1693px 1009px 0 0 rgba(255,255,255,0.6), 1851px 1057px 0 0 rgba(255,255,255,0.45), 163px 155px 0 0 rgba(255,255,255,0.3), 477px 178px 0 0 rgba(255,255,255,0.5), 634px 131px 0 0 rgba(255,255,255,0.4), 891px 174px 0 0 rgba(255,255,255,0.55), 1048px 118px 0 0 rgba(255,255,255,0.35), 1205px 167px 0 0 rgba(255,255,255,0.6), 1462px 129px 0 0 rgba(255,255,255,0.45), 1619px 173px 0 0 rgba(255,255,255,0.3), 1776px 138px 0 0 rgba(255,255,255,0.5), 321px 244px 0 0 rgba(255,255,255,0.45), 578px 258px 0 0 rgba(255,255,255,0.35), 835px 231px 0 0 rgba(255,255,255,0.6), 1092px 265px 0 0 rgba(255,255,255,0.4), 1349px 238px 0 0 rgba(255,255,255,0.5), 1606px 252px 0 0 rgba(255,255,255,0.3), 1863px 228px 0 0 rgba(255,255,255,0.55), 22px 731px 0 0 rgba(255,255,255,0.4), 445px 808px 0 0 rgba(255,255,255,0.5), 668px 754px 0 0 rgba(255,255,255,0.3), 1155px 738px 0 0 rgba(255,255,255,0.45), 1412px 792px 0 0 rgba(255,255,255,0.55), 1786px 745px 0 0 rgba(255,255,255,0.35), 185px 916px 0 0 rgba(255,255,255,0.6), 499px 942px 0 0 rgba(255,255,255,0.4), 756px 927px 0 0 rgba(255,255,255,0.5), 1013px 951px 0 0 rgba(255,255,255,0.3), 1270px 934px 0 0 rgba(255,255,255,0.45), 1527px 958px 0 0 rgba(255,255,255,0.55), 1784px 939px 0 0 rgba(255,255,255,0.4), 66px 74px 0 0 rgba(255,255,255,0.5), 209px 28px 0 0 rgba(255,255,255,0.35), 374px 91px 0 0 rgba(255,255,255,0.6), 530px 47px 0 0 rgba(255,255,255,0.4), 694px 82px 0 0 rgba(255,255,255,0.5), 857px 34px 0 0 rgba(255,255,255,0.3), 1021px 79px 0 0 rgba(255,255,255,0.55), 1184px 43px 0 0 rgba(255,255,255,0.4), 1347px 88px 0 0 rgba(255,255,255,0.5), 1510px 61px 0 0 rgba(255,255,255,0.35), 1673px 95px 0 0 rgba(255,255,255,0.6), 1837px 52px 0 0 rgba(255,255,255,0.45), 31px 184px 0 0 rgba(255,255,255,0.3), 243px 219px 0 0 rgba(255,255,255,0.55), 456px 196px 0 0 rgba(255,255,255,0.4), 619px 207px 0 0 rgba(255,255,255,0.5), 782px 183px 0 0 rgba(255,255,255,0.35), 945px 214px 0 0 rgba(255,255,255,0.6), 1108px 199px 0 0 rgba(255,255,255,0.3), 1271px 221px 0 0 rgba(255,255,255,0.5), 1434px 187px 0 0 rgba(255,255,255,0.45), 1597px 216px 0 0 rgba(255,255,255,0.35), 1760px 192px 0 0 rgba(255,255,255,0.55), 112px 273px 0 0 rgba(255,255,255,0.4), 325px 296px 0 0 rgba(255,255,255,0.5), 588px 264px 0 0 rgba(255,255,255,0.3), 751px 289px 0 0 rgba(255,255,255,0.6), 914px 271px 0 0 rgba(255,255,255,0.45), 1077px 298px 0 0 rgba(255,255,255,0.35), 1240px 278px 0 0 rgba(255,255,255,0.55), 1403px 293px 0 0 rgba(255,255,255,0.4), 1566px 269px 0 0 rgba(255,255,255,0.5), 1729px 284px 0 0 rgba(255,255,255,0.3), 1892px 276px 0 0 rgba(255,255,255,0.45), 48px 422px 0 0 rgba(255,255,255,0.55), 261px 438px 0 0 rgba(255,255,255,0.3), 474px 414px 0 0 rgba(255,255,255,0.5), 637px 441px 0 0 rgba(255,255,255,0.4), 800px 418px 0 0 rgba(255,255,255,0.6), 963px 435px 0 0 rgba(255,255,255,0.35), 1126px 421px 0 0 rgba(255,255,255,0.5), 1289px 446px 0 0 rgba(255,255,255,0.3), 1452px 427px 0 0 rgba(255,255,255,0.55), 1615px 443px 0 0 rgba(255,255,255,0.45), 1778px 419px 0 0 rgba(255,255,255,0.4), 85px 619px 0 0 rgba(255,255,255,0.35), 298px 634px 0 0 rgba(255,255,255,0.6), 511px 608px 0 0 rgba(255,255,255,0.4), 724px 627px 0 0 rgba(255,255,255,0.5), 937px 613px 0 0 rgba(255,255,255,0.3), 1150px 631px 0 0 rgba(255,255,255,0.55), 1363px 616px 0 0 rgba(255,255,255,0.45), 1576px 629px 0 0 rgba(255,255,255,0.35), 1789px 611px 0 0 rgba(255,255,255,0.6), 122px 718px 0 0 rgba(255,255,255,0.4), 335px 741px 0 0 rgba(255,255,255,0.5), 548px 726px 0 0 rgba(255,255,255,0.3), 761px 743px 0 0 rgba(255,255,255,0.55), 974px 719px 0 0 rgba(255,255,255,0.45), 1187px 737px 0 0 rgba(255,255,255,0.35), 1400px 722px 0 0 rgba(255,255,255,0.6), 1613px 739px 0 0 rgba(255,255,255,0.4), 1826px 725px 0 0 rgba(255,255,255,0.5), 59px 863px 0 0 rgba(255,255,255,0.3), 272px 878px 0 0 rgba(255,255,255,0.55), 485px 864px 0 0 rgba(255,255,255,0.45), 698px 881px 0 0 rgba(255,255,255,0.35), 911px 867px 0 0 rgba(255,255,255,0.6), 1124px 882px 0 0 rgba(255,255,255,0.4), 1337px 869px 0 0 rgba(255,255,255,0.5), 1550px 876px 0 0 rgba(255,255,255,0.3), 1763px 862px 0 0 rgba(255,255,255,0.55), 96px 1083px 0 0 rgba(255,255,255,0.4), 309px 1097px 0 0 rgba(255,255,255,0.5), 522px 1082px 0 0 rgba(255,255,255,0.35), 735px 1094px 0 0 rgba(255,255,255,0.6), 948px 1079px 0 0 rgba(255,255,255,0.3), 1161px 1092px 0 0 rgba(255,255,255,0.5), 1374px 1086px 0 0 rgba(255,255,255,0.45), 1587px 1099px 0 0 rgba(255,255,255,0.35), 1800px 1083px 0 0 rgba(255,255,255,0.55), 170px 347px 0 0 rgba(255,255,255,0.4), 383px 362px 0 0 rgba(255,255,255,0.5), 596px 348px 0 0 rgba(255,255,255,0.3), 809px 364px 0 0 rgba(255,255,255,0.6), 1022px 351px 0 0 rgba(255,255,255,0.45), 1235px 366px 0 0 rgba(255,255,255,0.35), 1448px 353px 0 0 rgba(255,255,255,0.55), 1661px 368px 0 0 rgba(255,255,255,0.4), 1874px 355px 0 0 rgba(255,255,255,0.5), 207px 502px 0 0 rgba(255,255,255,0.3), 420px 517px 0 0 rgba(255,255,255,0.6), 633px 503px 0 0 rgba(255,255,255,0.45), 846px 518px 0 0 rgba(255,255,255,0.35), 1059px 504px 0 0 rgba(255,255,255,0.55), 1272px 519px 0 0 rgba(255,255,255,0.4), 1485px 506px 0 0 rgba(255,255,255,0.5), 1698px 521px 0 0 rgba(255,255,255,0.3), 1911px 508px 0 0 rgba(255,255,255,0.45), 17px 459px 0 0 rgba(255,255,255,0.5), 130px 523px 0 0 rgba(255,255,255,0.35), 244px 478px 0 0 rgba(255,255,255,0.6), 358px 541px 0 0 rgba(255,255,255,0.4), 472px 496px 0 0 rgba(255,255,255,0.5), 586px 558px 0 0 rgba(255,255,255,0.3), 700px 483px 0 0 rgba(255,255,255,0.55), 814px 546px 0 0 rgba(255,255,255,0.4), 928px 491px 0 0 rgba(255,255,255,0.5), 1042px 554px 0 0 rgba(255,255,255,0.35), 1156px 479px 0 0 rgba(255,255,255,0.6), 1270px 542px 0 0 rgba(255,255,255,0.3), 1384px 487px 0 0 rgba(255,255,255,0.55), 1498px 550px 0 0 rgba(255,255,255,0.45), 1612px 495px 0 0 rgba(255,255,255,0.4), 1726px 557px 0 0 rgba(255,255,255,0.5), 1840px 482px 0 0 rgba(255,255,255,0.3), 53px 672px 0 0 rgba(255,255,255,0.55), 167px 698px 0 0 rgba(255,255,255,0.4), 281px 661px 0 0 rgba(255,255,255,0.6), 395px 705px 0 0 rgba(255,255,255,0.3), 509px 676px 0 0 rgba(255,255,255,0.5), 623px 712px 0 0 rgba(255,255,255,0.45), 737px 668px 0 0 rgba(255,255,255,0.35), 851px 703px 0 0 rgba(255,255,255,0.55), 965px 673px 0 0 rgba(255,255,255,0.4), 1079px 709px 0 0 rgba(255,255,255,0.5), 1193px 679px 0 0 rgba(255,255,255,0.3), 1307px 715px 0 0 rgba(255,255,255,0.6), 1421px 685px 0 0 rgba(255,255,255,0.45), 1535px 711px 0 0 rgba(255,255,255,0.35), 1649px 681px 0 0 rgba(255,255,255,0.55), 1763px 717px 0 0 rgba(255,255,255,0.4), 1877px 688px 0 0 rgba(255,255,255,0.5), 29px 804px 0 0 rgba(255,255,255,0.3), 143px 841px 0 0 rgba(255,255,255,0.6), 257px 811px 0 0 rgba(255,255,255,0.45), 371px 847px 0 0 rgba(255,255,255,0.35), 485px 817px 0 0 rgba(255,255,255,0.55), 599px 853px 0 0 rgba(255,255,255,0.4), 713px 823px 0 0 rgba(255,255,255,0.5), 827px 859px 0 0 rgba(255,255,255,0.3), 941px 829px 0 0 rgba(255,255,255,0.6), 1055px 865px 0 0 rgba(255,255,255,0.45), 1169px 835px 0 0 rgba(255,255,255,0.35), 1283px 871px 0 0 rgba(255,255,255,0.55), 1397px 841px 0 0 rgba(255,255,255,0.4), 1511px 877px 0 0 rgba(255,255,255,0.5), 1625px 847px 0 0 rgba(255,255,255,0.3), 1739px 883px 0 0 rgba(255,255,255,0.6), 1853px 853px 0 0 rgba(255,255,255,0.45), 41px 975px 0 0 rgba(255,255,255,0.35), 155px 1011px 0 0 rgba(255,255,255,0.55), 269px 981px 0 0 rgba(255,255,255,0.4), 383px 1017px 0 0 rgba(255,255,255,0.5), 497px 987px 0 0 rgba(255,255,255,0.3), 611px 1023px 0 0 rgba(255,255,255,0.6), 725px 993px 0 0 rgba(255,255,255,0.45), 839px 1029px 0 0 rgba(255,255,255,0.35), 953px 999px 0 0 rgba(255,255,255,0.55), 1067px 1035px 0 0 rgba(255,255,255,0.4), 1181px 1005px 0 0 rgba(255,255,255,0.5), 1295px 1041px 0 0 rgba(255,255,255,0.3), 1409px 1011px 0 0 rgba(255,255,255,0.6), 1523px 1047px 0 0 rgba(255,255,255,0.45), 1637px 1017px 0 0 rgba(255,255,255,0.35), 1751px 1053px 0 0 rgba(255,255,255,0.55), 1865px 1023px 0 0 rgba(255,255,255,0.4), 77px 136px 0 0 rgba(255,255,255,0.5), 191px 102px 0 0 rgba(255,255,255,0.3), 305px 138px 0 0 rgba(255,255,255,0.6), 419px 108px 0 0 rgba(255,255,255,0.45), 533px 144px 0 0 rgba(255,255,255,0.35), 647px 114px 0 0 rgba(255,255,255,0.55), 761px 150px 0 0 rgba(255,255,255,0.4), 875px 120px 0 0 rgba(255,255,255,0.5), 989px 156px 0 0 rgba(255,255,255,0.3), 1103px 126px 0 0 rgba(255,255,255,0.6), 1217px 162px 0 0 rgba(255,255,255,0.45), 1331px 132px 0 0 rgba(255,255,255,0.35), 1445px 168px 0 0 rgba(255,255,255,0.55), 1559px 138px 0 0 rgba(255,255,255,0.4), 1673px 174px 0 0 rgba(255,255,255,0.5), 1787px 144px 0 0 rgba(255,255,255,0.3), 1901px 180px 0 0 rgba(255,255,255,0.6), 89px 57px 0 0 rgba(255,255,255,0.45), 453px 22px 0 0 rgba(255,255,255,0.55), 817px 58px 0 0 rgba(255,255,255,0.35), 1181px 23px 0 0 rgba(255,255,255,0.6), 1545px 59px 0 0 rgba(255,255,255,0.4), 1909px 24px 0 0 rgba(255,255,255,0.5), 271px 332px 0 0 rgba(255,255,255,0.3), 635px 368px 0 0 rgba(255,255,255,0.55), 999px 333px 0 0 rgba(255,255,255,0.45), 1363px 369px 0 0 rgba(255,255,255,0.35), 1727px 334px 0 0 rgba(255,255,255,0.6), 44px 16px 0 0 rgba(255,255,255,0.5), 188px 63px 0 0 rgba(255,255,255,0.35), 332px 11px 0 0 rgba(255,255,255,0.6), 476px 58px 0 0 rgba(255,255,255,0.4), 620px 13px 0 0 rgba(255,255,255,0.5), 764px 61px 0 0 rgba(255,255,255,0.3), 908px 16px 0 0 rgba(255,255,255,0.55), 1052px 64px 0 0 rgba(255,255,255,0.4), 1196px 18px 0 0 rgba(255,255,255,0.5), 1340px 66px 0 0 rgba(255,255,255,0.35), 1484px 21px 0 0 rgba(255,255,255,0.6), 1628px 69px 0 0 rgba(255,255,255,0.45), 1772px 24px 0 0 rgba(255,255,255,0.3), 1916px 72px 0 0 rgba(255,255,255,0.55), 106px 117px 0 0 rgba(255,255,255,0.4), 250px 164px 0 0 rgba(255,255,255,0.5), 394px 119px 0 0 rgba(255,255,255,0.3), 538px 167px 0 0 rgba(255,255,255,0.6), 682px 122px 0 0 rgba(255,255,255,0.45), 826px 169px 0 0 rgba(255,255,255,0.35), 970px 124px 0 0 rgba(255,255,255,0.55), 1114px 171px 0 0 rgba(255,255,255,0.4), 1258px 127px 0 0 rgba(255,255,255,0.5), 1402px 174px 0 0 rgba(255,255,255,0.3), 1546px 129px 0 0 rgba(255,255,255,0.6), 1690px 176px 0 0 rgba(255,255,255,0.45), 1834px 132px 0 0 rgba(255,255,255,0.35), 62px 237px 0 0 rgba(255,255,255,0.55), 206px 284px 0 0 rgba(255,255,255,0.4), 350px 239px 0 0 rgba(255,255,255,0.5), 494px 287px 0 0 rgba(255,255,255,0.3), 638px 242px 0 0 rgba(255,255,255,0.6), 782px 289px 0 0 rgba(255,255,255,0.45), 926px 244px 0 0 rgba(255,255,255,0.35), 1070px 291px 0 0 rgba(255,255,255,0.55), 1214px 247px 0 0 rgba(255,255,255,0.4), 1358px 294px 0 0 rgba(255,255,255,0.5), 1502px 249px 0 0 rgba(255,255,255,0.3), 1646px 296px 0 0 rgba(255,255,255,0.6), 1790px 252px 0 0 rgba(255,255,255,0.45), 1934px 299px 0 0 rgba(255,255,255,0.35), 118px 407px 0 0 rgba(255,255,255,0.55), 262px 454px 0 0 rgba(255,255,255,0.4), 406px 409px 0 0 rgba(255,255,255,0.5), 550px 457px 0 0 rgba(255,255,255,0.3), 694px 412px 0 0 rgba(255,255,255,0.6), 838px 459px 0 0 rgba(255,255,255,0.45), 982px 414px 0 0 rgba(255,255,255,0.35), 1126px 462px 0 0 rgba(255,255,255,0.55), 1270px 417px 0 0 rgba(255,255,255,0.4), 1414px 464px 0 0 rgba(255,255,255,0.5), 1558px 419px 0 0 rgba(255,255,255,0.3), 1702px 467px 0 0 rgba(255,255,255,0.6), 1846px 422px 0 0 rgba(255,255,255,0.45), 74px 577px 0 0 rgba(255,255,255,0.35), 218px 624px 0 0 rgba(255,255,255,0.55), 362px 579px 0 0 rgba(255,255,255,0.4), 506px 627px 0 0 rgba(255,255,255,0.5), 650px 582px 0 0 rgba(255,255,255,0.3), 794px 629px 0 0 rgba(255,255,255,0.6), 938px 584px 0 0 rgba(255,255,255,0.45), 1082px 632px 0 0 rgba(255,255,255,0.35), 1226px 587px 0 0 rgba(255,255,255,0.55), 1370px 634px 0 0 rgba(255,255,255,0.4), 1514px 589px 0 0 rgba(255,255,255,0.5), 1658px 637px 0 0 rgba(255,255,255,0.3), 1802px 592px 0 0 rgba(255,255,255,0.6), 1946px 639px 0 0 rgba(255,255,255,0.45), 30px 747px 0 0 rgba(255,255,255,0.35), 174px 794px 0 0 rgba(255,255,255,0.55), 318px 749px 0 0 rgba(255,255,255,0.4), 462px 797px 0 0 rgba(255,255,255,0.5), 606px 752px 0 0 rgba(255,255,255,0.3), 750px 799px 0 0 rgba(255,255,255,0.6), 894px 754px 0 0 rgba(255,255,255,0.45), 1038px 801px 0 0 rgba(255,255,255,0.35), 1182px 757px 0 0 rgba(255,255,255,0.55), 1326px 804px 0 0 rgba(255,255,255,0.4), 1470px 759px 0 0 rgba(255,255,255,0.5), 1614px 806px 0 0 rgba(255,255,255,0.3), 1758px 761px 0 0 rgba(255,255,255,0.6), 1902px 808px 0 0 rgba(255,255,255,0.45), 86px 917px 0 0 rgba(255,255,255,0.35), 230px 964px 0 0 rgba(255,255,255,0.55), 374px 919px 0 0 rgba(255,255,255,0.4), 518px 967px 0 0 rgba(255,255,255,0.5), 662px 922px 0 0 rgba(255,255,255,0.3), 806px 969px 0 0 rgba(255,255,255,0.6), 950px 924px 0 0 rgba(255,255,255,0.45), 1094px 972px 0 0 rgba(255,255,255,0.35), 1238px 927px 0 0 rgba(255,255,255,0.55), 1382px 974px 0 0 rgba(255,255,255,0.4), 1526px 929px 0 0 rgba(255,255,255,0.5), 1670px 977px 0 0 rgba(255,255,255,0.3), 1814px 932px 0 0 rgba(255,255,255,0.6), 1958px 979px 0 0 rgba(255,255,255,0.45), 142px 1087px 0 0 rgba(255,255,255,0.35), 286px 1068px 0 0 rgba(255,255,255,0.55), 430px 1089px 0 0 rgba(255,255,255,0.4), 574px 1071px 0 0 rgba(255,255,255,0.5), 718px 1093px 0 0 rgba(255,255,255,0.3), 862px 1076px 0 0 rgba(255,255,255,0.6), 1006px 1098px 0 0 rgba(255,255,255,0.45), 1150px 1081px 0 0 rgba(255,255,255,0.35), 1294px 1103px 0 0 rgba(255,255,255,0.55), 1438px 1086px 0 0 rgba(255,255,255,0.4), 1582px 1108px 0 0 rgba(255,255,255,0.5), 1726px 1091px 0 0 rgba(255,255,255,0.3), 1870px 1113px 0 0 rgba(255,255,255,0.6), 23px 49px 0 0 rgba(255,255,255,0.45), 167px 83px 0 0 rgba(255,255,255,0.3), 311px 37px 0 0 rgba(255,255,255,0.6), 455px 71px 0 0 rgba(255,255,255,0.4), 599px 25px 0 0 rgba(255,255,255,0.5), 743px 59px 0 0 rgba(255,255,255,0.35), 887px 13px 0 0 rgba(255,255,255,0.55), 1031px 47px 0 0 rgba(255,255,255,0.4), 1175px 81px 0 0 rgba(255,255,255,0.5), 1319px 35px 0 0 rgba(255,255,255,0.3), 1463px 69px 0 0 rgba(255,255,255,0.6), 1607px 23px 0 0 rgba(255,255,255,0.45), 1751px 57px 0 0 rgba(255,255,255,0.35), 1895px 91px 0 0 rgba(255,255,255,0.55), 79px 153px 0 0 rgba(255,255,255,0.4), 223px 187px 0 0 rgba(255,255,255,0.5), 367px 141px 0 0 rgba(255,255,255,0.3), 511px 175px 0 0 rgba(255,255,255,0.6), 655px 129px 0 0 rgba(255,255,255,0.45), 799px 163px 0 0 rgba(255,255,255,0.35), 943px 197px 0 0 rgba(255,255,255,0.55), 1087px 151px 0 0 rgba(255,255,255,0.4), 1231px 185px 0 0 rgba(255,255,255,0.5), 1375px 139px 0 0 rgba(255,255,255,0.3), 1519px 173px 0 0 rgba(255,255,255,0.6), 1663px 127px 0 0 rgba(255,255,255,0.45), 1807px 161px 0 0 rgba(255,255,255,0.35), 1951px 195px 0 0 rgba(255,255,255,0.55), 135px 317px 0 0 rgba(255,255,255,0.4), 279px 351px 0 0 rgba(255,255,255,0.5), 423px 305px 0 0 rgba(255,255,255,0.3), 567px 339px 0 0 rgba(255,255,255,0.6), 711px 293px 0 0 rgba(255,255,255,0.45), 855px 327px 0 0 rgba(255,255,255,0.35), 999px 361px 0 0 rgba(255,255,255,0.55), 1143px 315px 0 0 rgba(255,255,255,0.4), 1287px 349px 0 0 rgba(255,255,255,0.5), 1431px 303px 0 0 rgba(255,255,255,0.3), 1575px 337px 0 0 rgba(255,255,255,0.6), 1719px 291px 0 0 rgba(255,255,255,0.45), 1863px 325px 0 0 rgba(255,255,255,0.35), 191px 481px 0 0 rgba(255,255,255,0.55), 335px 515px 0 0 rgba(255,255,255,0.4), 479px 469px 0 0 rgba(255,255,255,0.5), 623px 503px 0 0 rgba(255,255,255,0.3), 767px 457px 0 0 rgba(255,255,255,0.6), 911px 491px 0 0 rgba(255,255,255,0.45), 1055px 445px 0 0 rgba(255,255,255,0.35), 1199px 479px 0 0 rgba(255,255,255,0.55), 1343px 433px 0 0 rgba(255,255,255,0.4), 1487px 467px 0 0 rgba(255,255,255,0.5), 1631px 421px 0 0 rgba(255,255,255,0.3), 1775px 455px 0 0 rgba(255,255,255,0.6), 1919px 409px 0 0 rgba(255,255,255,0.45), 47px 645px 0 0 rgba(255,255,255,0.35), 191px 679px 0 0 rgba(255,255,255,0.55), 335px 633px 0 0 rgba(255,255,255,0.4), 479px 667px 0 0 rgba(255,255,255,0.5), 623px 621px 0 0 rgba(255,255,255,0.3), 767px 655px 0 0 rgba(255,255,255,0.6), 911px 609px 0 0 rgba(255,255,255,0.45), 1055px 643px 0 0 rgba(255,255,255,0.35), 1199px 597px 0 0 rgba(255,255,255,0.55), 1343px 631px 0 0 rgba(255,255,255,0.4), 1487px 585px 0 0 rgba(255,255,255,0.5), 1631px 619px 0 0 rgba(255,255,255,0.3), 1775px 573px 0 0 rgba(255,255,255,0.6), 1919px 607px 0 0 rgba(255,255,255,0.45), 103px 809px 0 0 rgba(255,255,255,0.35), 247px 843px 0 0 rgba(255,255,255,0.55), 391px 797px 0 0 rgba(255,255,255,0.4), 535px 831px 0 0 rgba(255,255,255,0.5), 679px 785px 0 0 rgba(255,255,255,0.3), 823px 819px 0 0 rgba(255,255,255,0.6), 967px 773px 0 0 rgba(255,255,255,0.45), 1111px 807px 0 0 rgba(255,255,255,0.35), 1255px 761px 0 0 rgba(255,255,255,0.55), 1399px 795px 0 0 rgba(255,255,255,0.4), 1543px 749px 0 0 rgba(255,255,255,0.5), 1687px 783px 0 0 rgba(255,255,255,0.3), 1831px 737px 0 0 rgba(255,255,255,0.6), 1975px 771px 0 0 rgba(255,255,255,0.45), 159px 973px 0 0 rgba(255,255,255,0.35), 303px 1007px 0 0 rgba(255,255,255,0.55), 447px 961px 0 0 rgba(255,255,255,0.4), 591px 995px 0 0 rgba(255,255,255,0.5), 735px 949px 0 0 rgba(255,255,255,0.3), 879px 983px 0 0 rgba(255,255,255,0.6), 1023px 937px 0 0 rgba(255,255,255,0.45), 1167px 971px 0 0 rgba(255,255,255,0.35), 1311px 925px 0 0 rgba(255,255,255,0.55), 1455px 959px 0 0 rgba(255,255,255,0.4), 1599px 913px 0 0 rgba(255,255,255,0.5), 1743px 947px 0 0 rgba(255,255,255,0.3), 1887px 901px 0 0 rgba(255,255,255,0.6), 55px 32px 0 0 rgba(255,255,255,0.5), 199px 66px 0 0 rgba(255,255,255,0.3), 343px 20px 0 0 rgba(255,255,255,0.6), 487px 54px 0 0 rgba(255,255,255,0.4), 631px 8px 0 0 rgba(255,255,255,0.5), 775px 42px 0 0 rgba(255,255,255,0.35), 919px 76px 0 0 rgba(255,255,255,0.55), 1063px 30px 0 0 rgba(255,255,255,0.4), 1207px 64px 0 0 rgba(255,255,255,0.5), 1351px 18px 0 0 rgba(255,255,255,0.3), 1495px 52px 0 0 rgba(255,255,255,0.6), 1639px 6px 0 0 rgba(255,255,255,0.45), 1783px 40px 0 0 rgba(255,255,255,0.35), 1927px 74px 0 0 rgba(255,255,255,0.55), 111px 220px 0 0 rgba(255,255,255,0.4), 255px 254px 0 0 rgba(255,255,255,0.5), 399px 208px 0 0 rgba(255,255,255,0.3), 543px 242px 0 0 rgba(255,255,255,0.6), 687px 196px 0 0 rgba(255,255,255,0.45), 831px 230px 0 0 rgba(255,255,255,0.35), 975px 264px 0 0 rgba(255,255,255,0.55), 1119px 218px 0 0 rgba(255,255,255,0.4), 1263px 252px 0 0 rgba(255,255,255,0.5), 1407px 206px 0 0 rgba(255,255,255,0.3), 1551px 240px 0 0 rgba(255,255,255,0.6), 1695px 194px 0 0 rgba(255,255,255,0.45), 1839px 228px 0 0 rgba(255,255,255,0.35), 1983px 262px 0 0 rgba(255,255,255,0.55), 167px 384px 0 0 rgba(255,255,255,0.4), 311px 418px 0 0 rgba(255,255,255,0.5), 455px 372px 0 0 rgba(255,255,255,0.3), 599px 406px 0 0 rgba(255,255,255,0.6), 743px 360px 0 0 rgba(255,255,255,0.45), 887px 394px 0 0 rgba(255,255,255,0.35), 1031px 428px 0 0 rgba(255,255,255,0.55), 1175px 382px 0 0 rgba(255,255,255,0.4), 1319px 416px 0 0 rgba(255,255,255,0.5), 1463px 370px 0 0 rgba(255,255,255,0.3), 1607px 404px 0 0 rgba(255,255,255,0.6), 1751px 358px 0 0 rgba(255,255,255,0.45), 1895px 392px 0 0 rgba(255,255,255,0.35), 223px 548px 0 0 rgba(255,255,255,0.55), 367px 582px 0 0 rgba(255,255,255,0.4), 511px 536px 0 0 rgba(255,255,255,0.5), 655px 570px 0 0 rgba(255,255,255,0.3), 799px 524px 0 0 rgba(255,255,255,0.6), 943px 558px 0 0 rgba(255,255,255,0.45), 1087px 512px 0 0 rgba(255,255,255,0.35), 1231px 546px 0 0 rgba(255,255,255,0.55), 1375px 500px 0 0 rgba(255,255,255,0.4), 1519px 534px 0 0 rgba(255,255,255,0.5), 1663px 488px 0 0 rgba(255,255,255,0.3), 1807px 522px 0 0 rgba(255,255,255,0.6), 1951px 476px 0 0 rgba(255,255,255,0.45), 279px 712px 0 0 rgba(255,255,255,0.35), 423px 746px 0 0 rgba(255,255,255,0.55), 567px 700px 0 0 rgba(255,255,255,0.4), 711px 734px 0 0 rgba(255,255,255,0.5), 855px 688px 0 0 rgba(255,255,255,0.3), 999px 722px 0 0 rgba(255,255,255,0.6), 1143px 676px 0 0 rgba(255,255,255,0.45), 1287px 710px 0 0 rgba(255,255,255,0.35), 1431px 664px 0 0 rgba(255,255,255,0.55), 1575px 698px 0 0 rgba(255,255,255,0.4), 1719px 652px 0 0 rgba(255,255,255,0.5), 1863px 686px 0 0 rgba(255,255,255,0.3), 335px 876px 0 0 rgba(255,255,255,0.6), 479px 910px 0 0 rgba(255,255,255,0.45), 623px 864px 0 0 rgba(255,255,255,0.35), 767px 898px 0 0 rgba(255,255,255,0.55), 911px 852px 0 0 rgba(255,255,255,0.4), 1055px 886px 0 0 rgba(255,255,255,0.5), 1199px 840px 0 0 rgba(255,255,255,0.3), 1343px 874px 0 0 rgba(255,255,255,0.6), 1487px 828px 0 0 rgba(255,255,255,0.45), 1631px 862px 0 0 rgba(255,255,255,0.35), 1775px 816px 0 0 rgba(255,255,255,0.55), 1919px 850px 0 0 rgba(255,255,255,0.4), 391px 1040px 0 0 rgba(255,255,255,0.5), 535px 1074px 0 0 rgba(255,255,255,0.3), 679px 1028px 0 0 rgba(255,255,255,0.6), 823px 1062px 0 0 rgba(255,255,255,0.45), 967px 1016px 0 0 rgba(255,255,255,0.35), 1111px 1050px 0 0 rgba(255,255,255,0.55), 1255px 1004px 0 0 rgba(255,255,255,0.4), 1399px 1038px 0 0 rgba(255,255,255,0.5), 1543px 992px 0 0 rgba(255,255,255,0.3), 1687px 1026px 0 0 rgba(255,255,255,0.6), 1831px 980px 0 0 rgba(255,255,255,0.45), 1975px 1014px 0 0 rgba(255,255,255,0.35), 22px 110px 0 0 rgba(255,255,255,0.55), 78px 305px 0 0 rgba(255,255,255,0.4), 134px 500px 0 0 rgba(255,255,255,0.6), 190px 695px 0 0 rgba(255,255,255,0.35), 246px 890px 0 0 rgba(255,255,255,0.5), 302px 135px 0 0 rgba(255,255,255,0.45), 358px 330px 0 0 rgba(255,255,255,0.3), 414px 525px 0 0 rgba(255,255,255,0.55), 470px 720px 0 0 rgba(255,255,255,0.4), 526px 915px 0 0 rgba(255,255,255,0.6), 582px 160px 0 0 rgba(255,255,255,0.35), 638px 355px 0 0 rgba(255,255,255,0.5), 694px 550px 0 0 rgba(255,255,255,0.45), 750px 745px 0 0 rgba(255,255,255,0.3), 806px 940px 0 0 rgba(255,255,255,0.55), 862px 185px 0 0 rgba(255,255,255,0.4), 918px 380px 0 0 rgba(255,255,255,0.6), 974px 575px 0 0 rgba(255,255,255,0.35), 1030px 770px 0 0 rgba(255,255,255,0.5), 1086px 965px 0 0 rgba(255,255,255,0.45), 1142px 210px 0 0 rgba(255,255,255,0.3), 1198px 405px 0 0 rgba(255,255,255,0.55), 1254px 600px 0 0 rgba(255,255,255,0.4), 1310px 795px 0 0 rgba(255,255,255,0.6), 1366px 990px 0 0 rgba(255,255,255,0.35), 1422px 235px 0 0 rgba(255,255,255,0.5), 1478px 430px 0 0 rgba(255,255,255,0.45), 1534px 625px 0 0 rgba(255,255,255,0.3), 1590px 820px 0 0 rgba(255,255,255,0.55), 1646px 260px 0 0 rgba(255,255,255,0.4), 1702px 455px 0 0 rgba(255,255,255,0.6), 1758px 650px 0 0 rgba(255,255,255,0.35), 1814px 845px 0 0 rgba(255,255,255,0.5), 1870px 285px 0 0 rgba(255,255,255,0.45), 1926px 480px 0 0 rgba(255,255,255,0.3), 44px 1100px 0 0 rgba(255,255,255,0.55), 100px 1295px 0 0 rgba(255,255,255,0.4), 156px 1490px 0 0 rgba(255,255,255,0.6), 212px 1145px 0 0 rgba(255,255,255,0.35), 268px 1340px 0 0 rgba(255,255,255,0.5), 324px 1535px 0 0 rgba(255,255,255,0.45), 380px 1190px 0 0 rgba(255,255,255,0.3), 436px 1385px 0 0 rgba(255,255,255,0.55), 492px 1580px 0 0 rgba(255,255,255,0.4), 548px 1235px 0 0 rgba(255,255,255,0.6), 604px 1430px 0 0 rgba(255,255,255,0.35), 660px 1625px 0 0 rgba(255,255,255,0.5), 716px 1280px 0 0 rgba(255,255,255,0.45), 772px 1475px 0 0 rgba(255,255,255,0.3), 828px 1670px 0 0 rgba(255,255,255,0.55), 884px 1325px 0 0 rgba(255,255,255,0.4), 940px 1520px 0 0 rgba(255,255,255,0.6), 996px 1715px 0 0 rgba(255,255,255,0.35), 1052px 1370px 0 0 rgba(255,255,255,0.5), 1108px 1565px 0 0 rgba(255,255,255,0.45), 1164px 1760px 0 0 rgba(255,255,255,0.3), 1220px 1415px 0 0 rgba(255,255,255,0.55), 1276px 1610px 0 0 rgba(255,255,255,0.4), 1332px 1805px 0 0 rgba(255,255,255,0.6), 1388px 1460px 0 0 rgba(255,255,255,0.35), 1444px 1655px 0 0 rgba(255,255,255,0.5), 1500px 1850px 0 0 rgba(255,255,255,0.45), 1556px 1505px 0 0 rgba(255,255,255,0.3), 1612px 1700px 0 0 rgba(255,255,255,0.55), 1668px 1895px 0 0 rgba(255,255,255,0.4), 1724px 1550px 0 0 rgba(255,255,255,0.6), 1780px 1745px 0 0 rgba(255,255,255,0.35), 1836px 1940px 0 0 rgba(255,255,255,0.5), 1892px 1595px 0 0 rgba(255,255,255,0.45), 1948px 1790px 0 0 rgba(255,255,255,0.3), 33px 150px 0 0 rgba(255,255,255,0.5), 89px 345px 0 0 rgba(255,255,255,0.35), 145px 540px 0 0 rgba(255,255,255,0.6), 201px 735px 0 0 rgba(255,255,255,0.4), 257px 930px 0 0 rgba(255,255,255,0.55), 313px 1125px 0 0 rgba(255,255,255,0.3), 369px 1320px 0 0 rgba(255,255,255,0.5), 425px 1515px 0 0 rgba(255,255,255,0.45), 481px 1710px 0 0 rgba(255,255,255,0.35), 537px 175px 0 0 rgba(255,255,255,0.6), 593px 370px 0 0 rgba(255,255,255,0.4), 649px 565px 0 0 rgba(255,255,255,0.55), 705px 760px 0 0 rgba(255,255,255,0.3), 761px 955px 0 0 rgba(255,255,255,0.5), 817px 1150px 0 0 rgba(255,255,255,0.45), 873px 1345px 0 0 rgba(255,255,255,0.35), 929px 1540px 0 0 rgba(255,255,255,0.6), 985px 1735px 0 0 rgba(255,255,255,0.4), 1041px 200px 0 0 rgba(255,255,255,0.55), 1097px 395px 0 0 rgba(255,255,255,0.3), 1153px 590px 0 0 rgba(255,255,255,0.5), 1209px 785px 0 0 rgba(255,255,255,0.45), 1265px 980px 0 0 rgba(255,255,255,0.35), 1321px 1175px 0 0 rgba(255,255,255,0.6), 1377px 1370px 0 0 rgba(255,255,255,0.4), 1433px 1565px 0 0 rgba(255,255,255,0.55), 1489px 1760px 0 0 rgba(255,255,255,0.3), 1545px 225px 0 0 rgba(255,255,255,0.5), 1601px 420px 0 0 rgba(255,255,255,0.45), 1657px 615px 0 0 rgba(255,255,255,0.35), 1713px 810px 0 0 rgba(255,255,255,0.6), 1769px 1005px 0 0 rgba(255,255,255,0.4), 1825px 1200px 0 0 rgba(255,255,255,0.55), 1881px 1395px 0 0 rgba(255,255,255,0.3), 1937px 1590px 0 0 rgba(255,255,255,0.5), 66px 62px 0 0 rgba(255,255,255,0.45), 177px 275px 0 0 rgba(255,255,255,0.35), 288px 488px 0 0 rgba(255,255,255,0.6), 399px 701px 0 0 rgba(255,255,255,0.4), 510px 914px 0 0 rgba(255,255,255,0.55), 621px 127px 0 0 rgba(255,255,255,0.3), 732px 340px 0 0 rgba(255,255,255,0.5), 843px 553px 0 0 rgba(255,255,255,0.45), 954px 766px 0 0 rgba(255,255,255,0.35), 1065px 979px 0 0 rgba(255,255,255,0.6), 1176px 1192px 0 0 rgba(255,255,255,0.4), 1287px 1405px 0 0 rgba(255,255,255,0.55), 1398px 1618px 0 0 rgba(255,255,255,0.3), 1509px 1831px 0 0 rgba(255,255,255,0.5), 1620px 94px 0 0 rgba(255,255,255,0.45), 1731px 307px 0 0 rgba(255,255,255,0.35), 1842px 520px 0 0 rgba(255,255,255,0.6), 1953px 733px 0 0 rgba(255,255,255,0.4), 17px 88px 0 0 rgba(255,255,255,0.55), 61px 201px 0 0 rgba(255,255,255,0.4), 105px 314px 0 0 rgba(255,255,255,0.6), 149px 427px 0 0 rgba(255,255,255,0.35), 193px 540px 0 0 rgba(255,255,255,0.5), 237px 653px 0 0 rgba(255,255,255,0.45), 281px 766px 0 0 rgba(255,255,255,0.3), 325px 879px 0 0 rgba(255,255,255,0.55), 369px 992px 0 0 rgba(255,255,255,0.4), 413px 1105px 0 0 rgba(255,255,255,0.6), 457px 1218px 0 0 rgba(255,255,255,0.35), 501px 1331px 0 0 rgba(255,255,255,0.5), 545px 1444px 0 0 rgba(255,255,255,0.45), 589px 1557px 0 0 rgba(255,255,255,0.3), 633px 1670px 0 0 rgba(255,255,255,0.55), 677px 1783px 0 0 rgba(255,255,255,0.4), 721px 1896px 0 0 rgba(255,255,255,0.6), 765px 129px 0 0 rgba(255,255,255,0.35), 809px 242px 0 0 rgba(255,255,255,0.5), 853px 355px 0 0 rgba(255,255,255,0.45), 897px 468px 0 0 rgba(255,255,255,0.3), 941px 581px 0 0 rgba(255,255,255,0.55), 985px 694px 0 0 rgba(255,255,255,0.4), 1029px 807px 0 0 rgba(255,255,255,0.6), 1073px 920px 0 0 rgba(255,255,255,0.35), 1117px 1033px 0 0 rgba(255,255,255,0.5), 1161px 1146px 0 0 rgba(255,255,255,0.45), 1205px 1259px 0 0 rgba(255,255,255,0.3), 1249px 1372px 0 0 rgba(255,255,255,0.55), 1293px 1485px 0 0 rgba(255,255,255,0.4), 1337px 1598px 0 0 rgba(255,255,255,0.6), 1381px 1711px 0 0 rgba(255,255,255,0.35), 1425px 1824px 0 0 rgba(255,255,255,0.5), 1469px 167px 0 0 rgba(255,255,255,0.45), 1513px 280px 0 0 rgba(255,255,255,0.3), 1557px 393px 0 0 rgba(255,255,255,0.55), 1601px 506px 0 0 rgba(255,255,255,0.4), 1645px 619px 0 0 rgba(255,255,255,0.6), 1689px 732px 0 0 rgba(255,255,255,0.35), 1733px 845px 0 0 rgba(255,255,255,0.5), 1777px 958px 0 0 rgba(255,255,255,0.45), 1821px 1071px 0 0 rgba(255,255,255,0.3), 1865px 1184px 0 0 rgba(255,255,255,0.55), 1909px 1297px 0 0 rgba(255,255,255,0.4), 1953px 1410px 0 0 rgba(255,255,255,0.6), 38px 1523px 0 0 rgba(255,255,255,0.35), 82px 1636px 0 0 rgba(255,255,255,0.5), 126px 1749px 0 0 rgba(255,255,255,0.45), 170px 1862px 0 0 rgba(255,255,255,0.3), 214px 1975px 0 0 rgba(255,255,255,0.55), 258px 108px 0 0 rgba(255,255,255,0.4), 302px 221px 0 0 rgba(255,255,255,0.6), 346px 334px 0 0 rgba(255,255,255,0.35), 390px 447px 0 0 rgba(255,255,255,0.5), 434px 560px 0 0 rgba(255,255,255,0.45), 478px 673px 0 0 rgba(255,255,255,0.3), 522px 786px 0 0 rgba(255,255,255,0.55), 566px 899px 0 0 rgba(255,255,255,0.4), 610px 1012px 0 0 rgba(255,255,255,0.6), 654px 1125px 0 0 rgba(255,255,255,0.35), 698px 1238px 0 0 rgba(255,255,255,0.5), 742px 1351px 0 0 rgba(255,255,255,0.45), 786px 1464px 0 0 rgba(255,255,255,0.3), 830px 1577px 0 0 rgba(255,255,255,0.55), 874px 1690px 0 0 rgba(255,255,255,0.4), 918px 1803px 0 0 rgba(255,255,255,0.6), 962px 1916px 0 0 rgba(255,255,255,0.35), 1006px 149px 0 0 rgba(255,255,255,0.5), 1050px 262px 0 0 rgba(255,255,255,0.45), 1094px 375px 0 0 rgba(255,255,255,0.3), 1138px 488px 0 0 rgba(255,255,255,0.55), 1182px 601px 0 0 rgba(255,255,255,0.4), 1226px 714px 0 0 rgba(255,255,255,0.6), 1270px 827px 0 0 rgba(255,255,255,0.35), 1314px 940px 0 0 rgba(255,255,255,0.5), 1358px 1053px 0 0 rgba(255,255,255,0.45), 1402px 1166px 0 0 rgba(255,255,255,0.3), 1446px 1279px 0 0 rgba(255,255,255,0.55), 1490px 1392px 0 0 rgba(255,255,255,0.4), 1534px 1505px 0 0 rgba(255,255,255,0.6), 1578px 1618px 0 0 rgba(255,255,255,0.35), 1622px 1731px 0 0 rgba(255,255,255,0.5), 1666px 1844px 0 0 rgba(255,255,255,0.45), 1710px 1957px 0 0 rgba(255,255,255,0.3), 1754px 190px 0 0 rgba(255,255,255,0.55), 1798px 303px 0 0 rgba(255,255,255,0.4), 1842px 416px 0 0 rgba(255,255,255,0.6), 1886px 529px 0 0 rgba(255,255,255,0.35), 1930px 642px 0 0 rgba(255,255,255,0.5), 1974px 755px 0 0 rgba(255,255,255,0.45), 29px 868px 0 0 rgba(255,255,255,0.3), 73px 981px 0 0 rgba(255,255,255,0.55), 117px 1094px 0 0 rgba(255,255,255,0.4), 161px 1207px 0 0 rgba(255,255,255,0.6), 205px 1320px 0 0 rgba(255,255,255,0.35), 48px 77px 0 0 rgba(255,255,255,0.5), 96px 193px 0 0 rgba(255,255,255,0.35), 144px 309px 0 0 rgba(255,255,255,0.6), 192px 425px 0 0 rgba(255,255,255,0.4), 240px 541px 0 0 rgba(255,255,255,0.55), 288px 657px 0 0 rgba(255,255,255,0.3), 336px 773px 0 0 rgba(255,255,255,0.5), 384px 889px 0 0 rgba(255,255,255,0.45), 432px 1005px 0 0 rgba(255,255,255,0.35), 480px 1121px 0 0 rgba(255,255,255,0.6), 528px 1237px 0 0 rgba(255,255,255,0.4), 576px 1353px 0 0 rgba(255,255,255,0.55), 624px 1469px 0 0 rgba(255,255,255,0.3), 672px 1585px 0 0 rgba(255,255,255,0.5), 720px 1701px 0 0 rgba(255,255,255,0.45), 768px 1817px 0 0 rgba(255,255,255,0.35), 816px 1933px 0 0 rgba(255,255,255,0.6), 864px 109px 0 0 rgba(255,255,255,0.4), 912px 225px 0 0 rgba(255,255,255,0.55), 960px 341px 0 0 rgba(255,255,255,0.3), 1008px 457px 0 0 rgba(255,255,255,0.5), 1056px 573px 0 0 rgba(255,255,255,0.45), 1104px 689px 0 0 rgba(255,255,255,0.35), 1152px 805px 0 0 rgba(255,255,255,0.6), 1200px 921px 0 0 rgba(255,255,255,0.4), 1248px 1037px 0 0 rgba(255,255,255,0.55), 1296px 1153px 0 0 rgba(255,255,255,0.3), 1344px 1269px 0 0 rgba(255,255,255,0.5), 1392px 1385px 0 0 rgba(255,255,255,0.45), 1440px 1501px 0 0 rgba(255,255,255,0.35), 1488px 1617px 0 0 rgba(255,255,255,0.6), 1536px 1733px 0 0 rgba(255,255,255,0.4), 1584px 1849px 0 0 rgba(255,255,255,0.55), 1632px 1965px 0 0 rgba(255,255,255,0.3), 1680px 141px 0 0 rgba(255,255,255,0.5), 1728px 257px 0 0 rgba(255,255,255,0.45), 1776px 373px 0 0 rgba(255,255,255,0.35), 1824px 489px 0 0 rgba(255,255,255,0.6), 1872px 605px 0 0 rgba(255,255,255,0.4), 1920px 721px 0 0 rgba(255,255,255,0.55), 24px 837px 0 0 rgba(255,255,255,0.3), 72px 953px 0 0 rgba(255,255,255,0.5), 120px 1069px 0 0 rgba(255,255,255,0.45), 168px 1185px 0 0 rgba(255,255,255,0.35), 216px 1301px 0 0 rgba(255,255,255,0.6), 264px 1417px 0 0 rgba(255,255,255,0.4), 312px 1533px 0 0 rgba(255,255,255,0.55), 360px 1649px 0 0 rgba(255,255,255,0.3), 408px 1765px 0 0 rgba(255,255,255,0.5), 456px 1881px 0 0 rgba(255,255,255,0.45), 504px 1997px 0 0 rgba(255,255,255,0.35), 552px 53px 0 0 rgba(255,255,255,0.6), 600px 169px 0 0 rgba(255,255,255,0.4), 648px 285px 0 0 rgba(255,255,255,0.55), 696px 401px 0 0 rgba(255,255,255,0.3), 744px 517px 0 0 rgba(255,255,255,0.5), 792px 633px 0 0 rgba(255,255,255,0.45), 840px 749px 0 0 rgba(255,255,255,0.35), 888px 865px 0 0 rgba(255,255,255,0.6), 936px 981px 0 0 rgba(255,255,255,0.4), 984px 1097px 0 0 rgba(255,255,255,0.55), 1032px 1213px 0 0 rgba(255,255,255,0.3), 1080px 1329px 0 0 rgba(255,255,255,0.5), 1128px 1445px 0 0 rgba(255,255,255,0.45), 1176px 1561px 0 0 rgba(255,255,255,0.35), 1224px 1677px 0 0 rgba(255,255,255,0.6), 1272px 1793px 0 0 rgba(255,255,255,0.4), 1320px 1909px 0 0 rgba(255,255,255,0.55), 1368px 85px 0 0 rgba(255,255,255,0.3), 1416px 201px 0 0 rgba(255,255,255,0.5), 1464px 317px 0 0 rgba(255,255,255,0.45), 1512px 433px 0 0 rgba(255,255,255,0.35), 1560px 549px 0 0 rgba(255,255,255,0.6), 1608px 665px 0 0 rgba(255,255,255,0.4), 1656px 781px 0 0 rgba(255,255,255,0.55), 1704px 897px 0 0 rgba(255,255,255,0.3), 1752px 1013px 0 0 rgba(255,255,255,0.5), 1800px 1129px 0 0 rgba(255,255,255,0.45), 1848px 1245px 0 0 rgba(255,255,255,0.35), 1896px 1361px 0 0 rgba(255,255,255,0.6), 1944px 1477px 0 0 rgba(255,255,255,0.4), 36px 1593px 0 0 rgba(255,255,255,0.55), 84px 1709px 0 0 rgba(255,255,255,0.3), 132px 1825px 0 0 rgba(255,255,255,0.5), 180px 1941px 0 0 rgba(255,255,255,0.45), 228px 117px 0 0 rgba(255,255,255,0.35), 276px 233px 0 0 rgba(255,255,255,0.6), 324px 349px 0 0 rgba(255,255,255,0.4), 372px 465px 0 0 rgba(255,255,255,0.55), 420px 581px 0 0 rgba(255,255,255,0.3), 468px 697px 0 0 rgba(255,255,255,0.5), 516px 813px 0 0 rgba(255,255,255,0.45), 564px 929px 0 0 rgba(255,255,255,0.35), 612px 1045px 0 0 rgba(255,255,255,0.6), 660px 1161px 0 0 rgba(255,255,255,0.4), 708px 1277px 0 0 rgba(255,255,255,0.55), 756px 1393px 0 0 rgba(255,255,255,0.3), 11px 44px 0 0 rgba(255,255,255,0.5), 55px 160px 0 0 rgba(255,255,255,0.35), 99px 276px 0 0 rgba(255,255,255,0.6), 143px 392px 0 0 rgba(255,255,255,0.4), 187px 508px 0 0 rgba(255,255,255,0.55), 231px 624px 0 0 rgba(255,255,255,0.3), 275px 740px 0 0 rgba(255,255,255,0.5), 319px 856px 0 0 rgba(255,255,255,0.45), 363px 972px 0 0 rgba(255,255,255,0.35), 407px 1088px 0 0 rgba(255,255,255,0.6), 451px 1204px 0 0 rgba(255,255,255,0.4), 495px 1320px 0 0 rgba(255,255,255,0.55), 539px 1436px 0 0 rgba(255,255,255,0.3), 583px 1552px 0 0 rgba(255,255,255,0.5), 627px 1668px 0 0 rgba(255,255,255,0.45), 671px 1784px 0 0 rgba(255,255,255,0.35), 715px 1900px 0 0 rgba(255,255,255,0.6), 759px 66px 0 0 rgba(255,255,255,0.4), 803px 182px 0 0 rgba(255,255,255,0.55), 847px 298px 0 0 rgba(255,255,255,0.3), 891px 414px 0 0 rgba(255,255,255,0.5), 935px 530px 0 0 rgba(255,255,255,0.45), 979px 646px 0 0 rgba(255,255,255,0.35), 1023px 762px 0 0 rgba(255,255,255,0.6), 1067px 878px 0 0 rgba(255,255,255,0.4), 1111px 994px 0 0 rgba(255,255,255,0.55), 1155px 1110px 0 0 rgba(255,255,255,0.3), 1199px 1226px 0 0 rgba(255,255,255,0.5), 1243px 1342px 0 0 rgba(255,255,255,0.45), 1287px 1458px 0 0 rgba(255,255,255,0.35), 1331px 1574px 0 0 rgba(255,255,255,0.6), 1375px 1690px 0 0 rgba(255,255,255,0.4), 1419px 1806px 0 0 rgba(255,255,255,0.55), 1463px 1922px 0 0 rgba(255,255,255,0.3), 1507px 88px 0 0 rgba(255,255,255,0.5), 1551px 204px 0 0 rgba(255,255,255,0.45), 1595px 320px 0 0 rgba(255,255,255,0.35), 1639px 436px 0 0 rgba(255,255,255,0.6), 1683px 552px 0 0 rgba(255,255,255,0.4), 1727px 668px 0 0 rgba(255,255,255,0.55), 1771px 784px 0 0 rgba(255,255,255,0.3), 1815px 900px 0 0 rgba(255,255,255,0.5), 1859px 1016px 0 0 rgba(255,255,255,0.45), 1903px 1132px 0 0 rgba(255,255,255,0.35), 1947px 1248px 0 0 rgba(255,255,255,0.6), 33px 1364px 0 0 rgba(255,255,255,0.4), 77px 1480px 0 0 rgba(255,255,255,0.55), 121px 1596px 0 0 rgba(255,255,255,0.3), 165px 1712px 0 0 rgba(255,255,255,0.5), 209px 1828px 0 0 rgba(255,255,255,0.45), 253px 1944px 0 0 rgba(255,255,255,0.35), 297px 110px 0 0 rgba(255,255,255,0.6), 341px 226px 0 0 rgba(255,255,255,0.4), 385px 342px 0 0 rgba(255,255,255,0.55), 429px 458px 0 0 rgba(255,255,255,0.3), 473px 574px 0 0 rgba(255,255,255,0.5), 517px 690px 0 0 rgba(255,255,255,0.45), 561px 806px 0 0 rgba(255,255,255,0.35), 605px 922px 0 0 rgba(255,255,255,0.6), 649px 1038px 0 0 rgba(255,255,255,0.4), 693px 1154px 0 0 rgba(255,255,255,0.55), 737px 1270px 0 0 rgba(255,255,255,0.3), 781px 1386px 0 0 rgba(255,255,255,0.5), 825px 1502px 0 0 rgba(255,255,255,0.45), 869px 1618px 0 0 rgba(255,255,255,0.35), 913px 1734px 0 0 rgba(255,255,255,0.6), 957px 1850px 0 0 rgba(255,255,255,0.4), 1001px 1966px 0 0 rgba(255,255,255,0.55), 1045px 132px 0 0 rgba(255,255,255,0.3), 1089px 248px 0 0 rgba(255,255,255,0.5), 1133px 364px 0 0 rgba(255,255,255,0.45), 1177px 480px 0 0 rgba(255,255,255,0.35), 1221px 596px 0 0 rgba(255,255,255,0.6), 1265px 712px 0 0 rgba(255,255,255,0.4), 1309px 828px 0 0 rgba(255,255,255,0.55), 1353px 944px 0 0 rgba(255,255,255,0.3), 1397px 1060px 0 0 rgba(255,255,255,0.5), 1441px 1176px 0 0 rgba(255,255,255,0.45), 1485px 1292px 0 0 rgba(255,255,255,0.35), 1529px 1408px 0 0 rgba(255,255,255,0.6), 1573px 1524px 0 0 rgba(255,255,255,0.4), 1617px 1640px 0 0 rgba(255,255,255,0.55), 1661px 1756px 0 0 rgba(255,255,255,0.3), 1705px 1872px 0 0 rgba(255,255,255,0.5), 1749px 1988px 0 0 rgba(255,255,255,0.45), 1793px 154px 0 0 rgba(255,255,255,0.35), 1837px 270px 0 0 rgba(255,255,255,0.6), 1881px 386px 0 0 rgba(255,255,255,0.4), 1925px 502px 0 0 rgba(255,255,255,0.55), 1969px 618px 0 0 rgba(255,255,255,0.3), 22px 734px 0 0 rgba(255,255,255,0.5), 66px 850px 0 0 rgba(255,255,255,0.45), 110px 966px 0 0 rgba(255,255,255,0.35), 154px 1082px 0 0 rgba(255,255,255,0.6), 198px 1198px 0 0 rgba(255,255,255,0.4), 242px 1314px 0 0 rgba(255,255,255,0.55), 286px 1430px 0 0 rgba(255,255,255,0.3), 330px 1546px 0 0 rgba(255,255,255,0.5), 374px 1662px 0 0 rgba(255,255,255,0.45), 418px 1778px 0 0 rgba(255,255,255,0.35), 462px 1894px 0 0 rgba(255,255,255,0.6), 506px 176px 0 0 rgba(255,255,255,0.4), 550px 292px 0 0 rgba(255,255,255,0.55), 594px 408px 0 0 rgba(255,255,255,0.3), 638px 524px 0 0 rgba(255,255,255,0.5), 682px 640px 0 0 rgba(255,255,255,0.45), 726px 756px 0 0 rgba(255,255,255,0.35), 770px 872px 0 0 rgba(255,255,255,0.6), 814px 988px 0 0 rgba(255,255,255,0.4), 858px 1104px 0 0 rgba(255,255,255,0.55), 902px 1220px 0 0 rgba(255,255,255,0.3), 946px 1336px 0 0 rgba(255,255,255,0.5), 990px 1452px 0 0 rgba(255,255,255,0.45), 1034px 1568px 0 0 rgba(255,255,255,0.35), 1078px 1684px 0 0 rgba(255,255,255,0.6), 1122px 1800px 0 0 rgba(255,255,255,0.4), 1166px 1916px 0 0 rgba(255,255,255,0.55), 1210px 198px 0 0 rgba(255,255,255,0.3), 1254px 314px 0 0 rgba(255,255,255,0.5), 1298px 430px 0 0 rgba(255,255,255,0.45), 1342px 546px 0 0 rgba(255,255,255,0.35), 1386px 662px 0 0 rgba(255,255,255,0.6), 1430px 778px 0 0 rgba(255,255,255,0.4), 1474px 894px 0 0 rgba(255,255,255,0.55), 1518px 1010px 0 0 rgba(255,255,255,0.3), 1562px 1126px 0 0 rgba(255,255,255,0.5), 1606px 1242px 0 0 rgba(255,255,255,0.45), 1650px 1358px 0 0 rgba(255,255,255,0.35), 1694px 1474px 0 0 rgba(255,255,255,0.6), 1738px 1590px 0 0 rgba(255,255,255,0.4), 1782px 1706px 0 0 rgba(255,255,255,0.55), 1826px 1822px 0 0 rgba(255,255,255,0.3), 1870px 1938px 0 0 rgba(255,255,255,0.5), 1914px 220px 0 0 rgba(255,255,255,0.45), 1958px 336px 0 0 rgba(255,255,255,0.35), 44px 452px 0 0 rgba(255,255,255,0.6), 88px 568px 0 0 rgba(255,255,255,0.4), 132px 684px 0 0 rgba(255,255,255,0.55), 176px 800px 0 0 rgba(255,255,255,0.3), 220px 916px 0 0 rgba(255,255,255,0.5), 264px 1032px 0 0 rgba(255,255,255,0.45), 308px 1148px 0 0 rgba(255,255,255,0.35), 352px 1264px 0 0 rgba(255,255,255,0.6), 396px 1380px 0 0 rgba(255,255,255,0.4), 440px 1496px 0 0 rgba(255,255,255,0.55), 484px 1612px 0 0 rgba(255,255,255,0.3), 528px 1728px 0 0 rgba(255,255,255,0.5), 572px 1844px 0 0 rgba(255,255,255,0.45), 616px 1960px 0 0 rgba(255,255,255,0.35), 660px 242px 0 0 rgba(255,255,255,0.6), 704px 358px 0 0 rgba(255,255,255,0.4), 748px 474px 0 0 rgba(255,255,255,0.55), 792px 590px 0 0 rgba(255,255,255,0.3), 836px 706px 0 0 rgba(255,255,255,0.5), 880px 822px 0 0 rgba(255,255,255,0.45), 924px 938px 0 0 rgba(255,255,255,0.35), 968px 1054px 0 0 rgba(255,255,255,0.6), 1012px 1170px 0 0 rgba(255,255,255,0.4), 1056px 1286px 0 0 rgba(255,255,255,0.55), 1100px 1402px 0 0 rgba(255,255,255,0.3), 1144px 1518px 0 0 rgba(255,255,255,0.5), 1188px 1634px 0 0 rgba(255,255,255,0.45), 1232px 1750px 0 0 rgba(255,255,255,0.35), 1276px 1866px 0 0 rgba(255,255,255,0.6), 1320px 264px 0 0 rgba(255,255,255,0.4), 1364px 380px 0 0 rgba(255,255,255,0.55), 1408px 496px 0 0 rgba(255,255,255,0.3), 1452px 612px 0 0 rgba(255,255,255,0.5), 1496px 728px 0 0 rgba(255,255,255,0.45), 1540px 844px 0 0 rgba(255,255,255,0.35), 1584px 960px 0 0 rgba(255,255,255,0.6), 1628px 1076px 0 0 rgba(255,255,255,0.4), 1672px 1192px 0 0 rgba(255,255,255,0.55), 1716px 1308px 0 0 rgba(255,255,255,0.3), 1760px 1424px 0 0 rgba(255,255,255,0.5), 1804px 1540px 0 0 rgba(255,255,255,0.45), 1848px 1656px 0 0 rgba(255,255,255,0.35), 1892px 1772px 0 0 rgba(255,255,255,0.6), 1936px 1888px 0 0 rgba(255,255,255,0.4), 1980px 286px 0 0 rgba(255,255,255,0.55); } /* ── Second star layer — offset twinkle phase ────────────── */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; pointer-events: none; z-index: 0; animation: star-twinkle-b 11s ease-in-out infinite; box-shadow: 220px 85px 0 0 rgba(255,255,255,0.5), 480px 152px 0 0 rgba(255,255,255,0.35), 710px 44px 0 0 rgba(255,255,255,0.6), 940px 190px 0 0 rgba(255,255,255,0.4), 1160px 73px 0 0 rgba(255,255,255,0.55), 1390px 210px 0 0 rgba(255,255,255,0.3), 1620px 98px 0 0 rgba(255,255,255,0.5), 1850px 165px 0 0 rgba(255,255,255,0.45), 330px 340px 0 0 rgba(255,255,255,0.4), 560px 480px 0 0 rgba(255,255,255,0.6), 790px 390px 0 0 rgba(255,255,255,0.3), 1020px 520px 0 0 rgba(255,255,255,0.5), 1250px 420px 0 0 rgba(255,255,255,0.45), 1480px 510px 0 0 rgba(255,255,255,0.35), 1710px 360px 0 0 rgba(255,255,255,0.55), 110px 610px 0 0 rgba(255,255,255,0.4), 370px 700px 0 0 rgba(255,255,255,0.5), 630px 650px 0 0 rgba(255,255,255,0.3), 890px 720px 0 0 rgba(255,255,255,0.6), 1130px 670px 0 0 rgba(255,255,255,0.45), 1370px 740px 0 0 rgba(255,255,255,0.35), 1600px 690px 0 0 rgba(255,255,255,0.5), 1840px 730px 0 0 rgba(255,255,255,0.4), 55px 820px 0 0 rgba(255,255,255,0.55), 295px 870px 0 0 rgba(255,255,255,0.3), 535px 840px 0 0 rgba(255,255,255,0.5), 775px 900px 0 0 rgba(255,255,255,0.45), 1015px 860px 0 0 rgba(255,255,255,0.35), 1255px 910px 0 0 rgba(255,255,255,0.6), 1495px 880px 0 0 rgba(255,255,255,0.4), 1735px 920px 0 0 rgba(255,255,255,0.5), 170px 1010px 0 0 rgba(255,255,255,0.3), 410px 1050px 0 0 rgba(255,255,255,0.55), 650px 1020px 0 0 rgba(255,255,255,0.4), 900px 1060px 0 0 rgba(255,255,255,0.5), 1140px 1030px 0 0 rgba(255,255,255,0.35), 1380px 1065px 0 0 rgba(255,255,255,0.6), 1620px 1040px 0 0 rgba(255,255,255,0.45), 1860px 1055px 0 0 rgba(255,255,255,0.3); } /* ── Star canvas background ──────────────────────────────── */ #elaina-stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.9; } /* ── CSS Shooting Stars (compositor-thread, never stops) ── */ .meteor { position: fixed; pointer-events: none; z-index: 1; border-radius: 100px; opacity: 0; background: linear-gradient( to left, rgba(255, 255, 255, 1) 0%, rgba(210, 195, 255, 0.85) 40%, transparent 100% ); transform-origin: right center; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.75)); animation: meteor-fly linear infinite; will-change: transform, opacity; } @keyframes meteor-fly { 0% { transform: rotate(var(--rot)) translateX(0); opacity: 0; } 5% { opacity: 1; } 20% { transform: rotate(var(--rot)) translateX(var(--dist)); opacity: 0.9; } 25% { transform: rotate(var(--rot)) translateX(var(--dist)); opacity: 0; animation-timing-function: step-start; } 26% { transform: rotate(var(--rot)) translateX(0); opacity: 0; } 100% { transform: rotate(var(--rot)) translateX(0); opacity: 0; } } /* ── Floating sparkle particles ──────────────────────────── */ @keyframes sparkle-float { 0% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.6; } 100% { transform: translateY(-120px) translateX(30px) rotate(180deg); opacity: 0; } } @keyframes sparkle-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } .elaina-sparkle { position: fixed; pointer-events: none; z-index: 0; color: #d4b46a; font-size: 10px; animation: sparkle-float 6s ease-in-out infinite; } /* ── Magic glow on headings ──────────────────────────────── */ @keyframes elaina-glow { 0%, 100% { text-shadow: 0 0 10px rgba(196, 168, 232, 0.3); } 50% { text-shadow: 0 0 20px rgba(196, 168, 232, 0.6), 0 0 40px rgba(196, 168, 232, 0.2); } } /* ── Avatar frame — magic circle border ─────────────────── */ .elaina-avatar-frame { position: relative; display: inline-block; margin-left: auto; margin-right: 0; flex-shrink: 0; margin-top: 120px; transition: transform 0.12s ease-out; will-change: transform; } .elaina-avatar-frame::before, .elaina-avatar-frame::after { display: none; } @keyframes elaina-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Nav — structure + glass morphism on scroll ──────────── */ #nav { position: fixed; top: 0; width: 100%; z-index: 100; background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: background-color 0.45s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease, box-shadow 0.45s ease, border-bottom 0.45s ease, top 0.3s; } #nav.nav--scrolled { backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); background-color: rgba(0, 0, 0, 0.72); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.9); border-bottom: 1px solid rgba(196, 168, 232, 0.15); } /* ── Hero section enhancements ───────────────────────────── */ #home { background: radial-gradient(ellipse at 30% 50%, rgba(139, 108, 196, 0.08) 0%, transparent 70%); transform: translate(var(--hpx, 0px), calc(var(--hpy, 0px) + var(--hsy, 0px))); } /* ── Section divider glow lines ─────────────────────────── */ /* ── Card hover glow ─────────────────────────────────────── */ .recent-card:hover { box-shadow: 0 4px 24px rgba(196, 168, 232, 0.18), 0 0 0 1px rgba(196, 168, 232, 0.25) !important; } /* ── About image — Elaina portrait ──────────────────────── */ /* ── Heading font override ───────────────────────────────── */ h1, h2, h3, .heading-proj, .heading-two, .recent-title { font-family: Cinzel, 'Times New Roman', serif !important; letter-spacing: 0.02em; } h2 { animation: elaina-glow 4s ease-in-out infinite; } .nav-link, .nav-title { font-family: Cinzel, serif !important; letter-spacing: 0.05em; } h4 { font-family: Cinzel, serif !important; letter-spacing: 0.08em; } /* ── Gold accents for specific elements ─────────────────── */ .blog-date, .blog-post-date { color: #c4a8e8 !important; } /* ── Footer Elaina quote ─────────────────────────────────── */ .elaina-footer-quote { text-align: center; font-family: Cinzel, serif; font-style: italic; color: rgba(196, 168, 232, 0.55); font-size: 19px; margin: 36px 0 24px; letter-spacing: 0.12em; line-height: 1.9; padding: 0 10%; } /* ── Elaina avatar image styling ────────────────────────── */ @keyframes elaina-rise-fall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } .avatar-one { border-radius: 0; object-fit: contain; object-position: center 15%; border: none; filter: drop-shadow(0 0 18px rgba(196, 168, 232, 0.3)); animation: elaina-rise-fall 4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .avatar-one { animation: none; } } /* ── Scrollbar witch purple ──────────────────────────────── */ ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c4a8e8, #8b6cc4) !important; border: none !important; } /* ── Ambient fog layer ───────────────────────────────────── */ #elaina-fog { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .fog-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.042; will-change: transform; } @keyframes fog-drift-1 { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(7vw, -5vh) scale(1.07); } 66% { transform: translate(-4vw, 7vh) scale(0.95); } 100% { transform: translate(0, 0) scale(1); } } @keyframes fog-drift-2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9vw, 4vh) scale(1.1); } 100% { transform: translate(0, 0) scale(1); } } @keyframes fog-drift-3 { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(5vw, 8vh) scale(0.93); } 80% { transform: translate(-6vw, -4vh) scale(1.06); } 100% { transform: translate(0, 0) scale(1); } } @keyframes fog-drift-4 { 0% { transform: translate(0, 0) scale(1); } 60% { transform: translate(10vw, -8vh) scale(1.12);} 100% { transform: translate(0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .fog-blob { animation: none !important; } } /* ── Section heading ornaments ───────────────────────────── */ .recent-title::before, #certificates h3::before, #contact h3::before { content: '✦ '; color: rgba(196, 168, 232, 0.5); font-size: 0.65em; vertical-align: middle; margin-right: 2px; } /* ── AOS blur-clearing reveal ────────────────────────────── */ [data-aos] { transition-property: transform, opacity, filter !important; } [data-aos]:not(.aos-animate) { filter: blur(5px); } [data-aos].aos-animate { filter: blur(0) !important; } /* ── Mobile heading shimmer (replaces cursor / parallax) ─── */ @keyframes elaina-heading-shimmer { 0%, 100% { text-shadow: 0 0 0 rgba(196, 168, 232, 0); } 50% { text-shadow: 0 0 20px rgba(196, 168, 232, 0.3), 0 0 45px rgba(139, 108, 196, 0.12); } } @media (max-width: 768px) and (hover: none) { h3, .recent-title { animation: elaina-heading-shimmer 4.5s ease-in-out infinite; } } /* ── Mobile nav ─────────────────────────────────────────── */ @media only screen and (max-width: 850px) { .links { background: rgba(10, 8, 28, 0.97) !important; backdrop-filter: blur(20px); border-top: 1px solid rgba(196, 168, 232, 0.15); } } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { border: 4px solid #000000; background-color: #8b6cc4; border-radius: 0.5em; } ::-webkit-scrollbar-thumb:hover { background-color: #8b6cc4; } body { background-color: transparent; font-family: Raleway, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; opacity: 0; transition: opacity 0.55s ease; overflow-x: clip; } body.page-loaded { opacity: 1; } /* ── Per-page entry animations ───────────────────────────────────────────── Each page's primary content animates in on its own after the body fades in. animation-fill-mode: both holds the "from" state during the delay so elements never flash visible before their animation begins. ─────────────────────────────────────────────────────────────────────────── */ @keyframes pt-slide-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes pt-slide-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } /* Home — hero block (greeting + name + bio + CTA + avatar) glides up */ body:not([id]).page-loaded .side-by-side { animation: pt-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } /* Home — sections stagger in on page open / refresh */ body:not([id]).page-loaded #about { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } body:not([id]).page-loaded #recent-publications { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; } body:not([id]).page-loaded #recent-projects { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; } body:not([id]).page-loaded #recent-articles { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; } /* #recent-career, #certificates, #contact are below the fold — their entrances are handled by the scroll-triggered clipReveal system instead, so page-load animations are omitted here. */ /* Projects — hero + sections stagger in on page open / refresh */ body#top-projects.page-loaded .proj-hero__title { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } body#top-projects.page-loaded .proj-hero__sub { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; } body#top-projects.page-loaded .proj-hero__stats { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; } body#top-projects.page-loaded .proj-section { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; } /* Publications — staggered entry on page open / refresh */ body#top-publications.page-loaded .heading-proj { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } body#top-publications.page-loaded .page-subtitle { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } body#top-publications.page-loaded #paperList { animation: pt-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; } /* Career — hero + sections stagger in on page open / refresh */ body#top-career.page-loaded .proj-hero__title { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } body#top-career.page-loaded .proj-hero__sub { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; } body#top-career.page-loaded .career-section { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; } /* Blog — staggered entry on page open / refresh */ body#top-blog.page-loaded .heading-proj { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } body#top-blog.page-loaded .page-subtitle { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } body#top-blog.page-loaded .blog-search-wrapper { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; } body#top-blog.page-loaded #tagFilters { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; } body#top-blog.page-loaded #blogList { animation: pt-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both; } /* Blog post — post container appears instantly, no animation */ .copy-email { color: #c4a8e8; cursor: pointer; position: relative; } .copy-email-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #c4a8e8; color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 1; transition: opacity 0.4s; font-family: Inconsolata; } .navbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; margin-top: 20px; margin-left: 50px; margin-right: 50px; } .nav-brand { text-decoration: none; margin-left: 0; padding: 0; display: flex; align-items: center; gap: 8px; } .nav-avatar { border-radius: 50%; width: 42px; height: 42px; object-fit: cover; object-position: top center; border: 2px solid rgba(196, 168, 232, 0.5); box-shadow: 0 0 12px rgba(196, 168, 232, 0.3); } .page-subtitle { text-align: center; font-family: Raleway, sans-serif !important; font-size: 16px !important; font-weight: normal !important; letter-spacing: normal !important; color: #7a7694 !important; line-height: 1.65; max-width: 440px; margin: 0 auto 24px; } .text-link { color: #c4a8e8; text-decoration: none; } .links { display: flex; justify-content: flex-end; } .nav-link { color: #d8d4e8; text-decoration: none; margin-right: 10px; position: relative; font-size: 16px; font-family: Inconsolata; letter-spacing: 0.14em; text-transform: uppercase; } .nav-link:hover { cursor: pointer; color: #c4a8e8; } .nav-link.nav-active { color: #c4a8e8; } .nav-link.nav-active::before { width: 100%; } .nav-link:active { color: #c4a8e8; } .nav-link::before { content: ""; display: inline; width: 0%; height: 0.12em; position: absolute; top: 100%; background-color: #c4a8e8; transition: width 0.2s ease-out; } .nav-link:hover::before { width: 100%; } .nav-title { color: #d8d4e8; text-decoration: none; margin-top: 5px; margin-left: 10px; float: right; font-size: 25px; font-family: Inconsolata; } .nav-title-gap { display: inline-block; width: 4px; } .nav-title:hover { cursor: pointer; color: #c4a8e8; } .hamburger { display: none; color: #c4a8e8; border: 2px solid #c4a8e8; padding: 5px 8px; } .bar { display: block; width: 33px; height: 5px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #c4a8e8; } #home { display: flex; flex-direction: column; justify-content: center; margin: 100px 0 60px 20%; } .side-by-side { display:flex; align-items:center; padding-right: 0; } .company { color: #c4a8e8; text-decoration: none; } .company:hover { text-decoration: underline; } h4 { color: #c4a8e8; font-family: Inconsolata; font-size: 25px; margin-bottom: 0; } .my-name { color: #d8d4e8; font-size: 50px; margin-top: 8px; margin-bottom: 0; font-family: Raleway; letter-spacing: -0.5px; } .info { color: #9a96b8; font-size: 20px; font-family: Raleway; max-width: 700px; line-height: 1.75; } .cv { margin-top: 20px; color: #c4a8e8; border: 2px solid #c4a8e8; border-radius: 5px; padding: 10px 0; width: 200px; text-align: center; font-size: 20px; text-decoration: none; font-family: Inconsolata; transition: background-color 0.2s ease; } .cv:hover { background-color: #1e1b38; } .avatar-one { margin-left: auto; width: 31rem; margin-top: 0; margin-right: 0; object-position: center; } #about { display: flex; flex-direction: column; margin-left: 20%; margin-right: 20%; padding: 120px 0 150px 0; } .email { border-radius: 7px; width: auto; height: 40px; } .about-div { display: flex; } h1 { font-family: Inconsolata; } h2 { color: #c4a8e8; font-family: Inconsolata; font-size: 35px; } .info-div { max-width: 750px; } .about-info { color: #9a96b8; font-family: Raleway; font-size: 20px; line-height: 1.75; } .about-img { width: 300px; height: 300px; border-radius: 5px; object-fit: cover; object-position: center top; box-shadow: 1rem 1rem #1e1b38, -1rem -1rem #c4a8e8; } .skills { margin-top: 5%; margin-left: 10%; margin-right: 10%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; padding: 0 7px; } .back { background-color: #8b6cc4; border-radius: 5px; } ::marker { content: ""; } li { font-size: 18px; line-height: 1.6; } li::marker { --hue: 200; font-size: 1.5em; } .projects { display: flex; flex-direction: column; align-items: center; margin-top: 40px; margin-right: 100px; } .project-link { margin-top: 50px; color: #c4a8e8; border: 2px solid #c4a8e8; border-radius: 5px; padding: 20px 30px; text-align: center; font-size: 22px; text-decoration: none; font-family: Inconsolata; transition: background-color 0.2s ease; } .project-link:hover { background-color: #1e1b38; } #contact { display: flex; flex-direction: column; justify-content: center; margin-left: 20%; margin-right: 20%; padding-top: 40px; padding-bottom: 80px; } h3 { color: #c4a8e8; font-family: Inconsolata; font-size: 45px; margin: 0; letter-spacing: -0.5px; } .question { color: #7a7694; font-size: 27px; font-family: Raleway; } .card { box-shadow: 0 0 0.50px 1px #d9d9eb; border: 5px; border-color: #4f94d1; width: 250px; text-align: center; border-radius: 16px; overflow: hidden; margin: 5%; cursor: default; background: #12102a; } .card:hover { box-shadow: 0 0 10px 5px #c4a8e8; transition: transform 0.2s; transform: scale(1.1); cursor: default; opacity: 0.95; } .main-scroll-div { width: 78%; height: auto; display: flex; overflow: visible; align-items: center; justify-content: space-between; margin: 1px auto 0; } .proj-scroll-section .main-scroll-div { width: 60%; } .main-scroll-div::-webkit-scrollbar { display: none; } .cover { position: relative; width: 88%; height: auto; } .scroll-images { width: 100%; height: auto; display: flex; justify-content: left; align-items: center; overflow: auto; position: relative; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .scroll-images::-webkit-scrollbar { display: none; } .icon-arrow { color: #c4a8e8; background: rgba(139, 108, 196, 0.1); border: 1.5px solid rgba(196, 168, 232, 0.35); border-radius: 50%; width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; font-size: 16px; outline: none; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease; } .icon-arrow:hover { background: rgba(139, 108, 196, 0.28); border-color: #c4a8e8; transform: scale(1.12); color: #ffffff; } .arrow-bac { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 40px; background-color: #8b6cc4; padding: 7px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 200; } .arrow-bac.visible { opacity: 1; visibility: visible; } .tech-icons { margin-top: auto; padding-top: 12px; display: flex; align-items: center; } .tech-icons img { height: 40px; width: auto; } .arrow { padding: 5px; width: 35px; } .icons { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .icon { width: 30px; padding: 7px; align-items: center; } .icon:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } .img-bac { margin: 5px; width: 45px; height: 45px; background-color: #8b6cc4; border-radius: 50%; } footer { border-top: 1px solid #201d3a; padding-top: 20px; margin-top: 60px; } .github { display: flex; justify-content: center; align-items: center; } .github-link { text-decoration: none; margin-bottom: 20px; color: #7a7694; font-family: Raleway; font-size: 17px; } .github-link:hover { color: #8b6cc4; } .heading-proj { margin-top: 150px; text-align: center; font-size: 50px; font-family: Inconsolata; color: #bbbbbb; } .heading-two { text-align: center; font-size: 35px; color: #bbbbbb; font-family: Inconsolata; } .projects-div { display: flex; justify-content: center; align-items: center; margin: 100px 0 100px 0; } .project-img { width: 400px; height: 250px; border-radius: 5px; opacity: 0.8; box-shadow: 1rem 1rem #c4a8e8, -1rem -1rem #1e1b38; transition: transform 0.2s; cursor: default; } .project-img:hover { transform: scale(1.1); cursor: pointer; opacity: 0.95; cursor: default; } .proj-info-one { margin-left: 100px; } .proj-info-two { margin-right: 100px; } .proj-h-one { text-align: end; } .proj-p-one { width: 500px; color: #7a7694; text-align: end; font-family: Raleway; } .proj-p-two { width: 500px; color: #7a7694; font-family: Raleway; } .frame-div { display: flex; justify-content: end; } .frame-div-two { margin-bottom: 250px; } .div-proj-two { display: flex; justify-content: start; } .frameworks { color: #d8d4e8; font-family: Inconsolata; margin-left: 10px; } .frameworks-two { color: #d8d4e8; font-family: Inconsolata; margin-right: 10px; } .lang { width: 30px; } .stack-left { width: 40px; margin-right: auto; } .stack-right { width: 230px; margin-left: auto; } .small-links { display: flex; justify-content: end; } .small-links-two { display: flex; justify-content: start; } .small-github { width: 23px; padding: 3px; } .small-link { width: 20px; padding: 5px; } .small-link:hover, .small-github:hover { transition: transform 0.2s; transform: scale(1.1); opacity: 0.95; } .small-projects { display: flex; justify-content: center; align-items: stretch; margin: 10px; } .small { background: linear-gradient(135deg, #12102a 0%, #0e0c1e 100%); border: 1px solid rgba(196, 168, 232, 0.12); width: 250px; min-height: 280px; padding: 25px 20px; border-radius: 5px; margin: 20px 10px; transition: transform 250ms; display: flex; flex-direction: column; } .small:hover { transform: translateY(-20px); border-color: rgba(196, 168, 232, 0.35); box-shadow: 0 8px 30px rgba(196, 168, 232, 0.12); } .folder { width: 40px; } .proj-name { text-decoration: none; color: #e0dcf0; font-family: Inconsolata; font-size: 22px; font-weight: bold; margin: 20px 0 0 0; } .proj-name:hover { color: #c4a8e8; } .p-proj { color: #7a7694; font-family: Raleway; margin: 10px 0 20px 0; } .paper-div { display: grid; grid-template-columns: 1fr; justify-content: center; align-items: center; margin-bottom: 50px; margin-top: 40px; transition: opacity 0.18s ease; } .paper-div--fading { opacity: 0; } .paper { flex-direction: column; align-items: center; background: linear-gradient(135deg, #12102a 0%, #0e0c1e 100%); border: 1px solid rgba(196, 168, 232, 0.12); box-sizing: border-box; width: 80%; min-height: 80px; padding: 22px 26px; border-radius: 10px; margin-bottom: 18px; margin-left: auto; margin-right: auto; transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; } .paper:hover { border-color: rgba(196, 168, 232, 0.28); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); } .paper-name { text-decoration: none; color: #e0dcf0; font-family: Inconsolata; font-size: 19px; line-height: 1.45; } .paper-name:hover { color: #c4a8e8; } .paper-info { color: #9a96b8; font-size: 14px; font-family: Raleway, sans-serif; letter-spacing: 0.3px; line-height: 1.65; margin-top: 10px; padding-top: 10px; border-top: 1px solid #201d3a; } @media screen and (max-width: 1500px) { #about { margin-left: 10%; margin-right: 10%; padding: 40px 0 80px 0; } #home { margin-left: 10%; } .side-by-side { padding-right: 0; } #contact { margin-left: 10%; margin-right: 10%; padding: 180px 0 80px 0; } } @media screen and (max-width: 1400px) { #about { margin-left: 7%; margin-right: 7%; } #home { margin-left: 7%; } #contact { margin-left: 7%; margin-right: 7%; } } @media screen and (max-width: 1300px) { #about { margin-left: 5%; margin-right: 5%; padding: 100px 0; } #home { margin-left: 5%; } .side-by-side { padding-right: 0; } #contact { margin-left: 5%; margin-right: 5%; } } @media only screen and (max-width: 850px) { .links { position: fixed; left: -100%; top: 5rem; flex-direction: column; width: 100%; border-radius: 10px; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); background-color: #1a1732; } .links.active { left: 0; } .hamburger { display: block; cursor: pointer; } .hamburger.active .bar:nth-child(2) { opacity: 0; } .hamburger.active .bar:nth-child(1) { transform: translate(0, 10px) rotate(-45deg); } .hamburger.active .bar:nth-child(3) { transform: translate(0, -10px) rotate(45deg); } .nav-link { margin: 10px; } .navbar { margin-left: 35px; } .side-by-side { flex-direction: column; align-items: flex-start; padding-right: 0; } .avatar-one { width: 11rem; margin: 0 auto 0; align-self: center; } #home { display: flex; flex-direction: column; padding-left: 0; margin: 100px 5% 30px 5%; width: 90%; } h4 { color: #c4a8e8; font-family: Inconsolata; font-size: 20px; margin-bottom: 0; } h1 { font-size: 36px; } .info { font-size: 15px; max-width: 100%; } #about { margin-left: 5%; margin-right: 5%; padding: 30px 0 40px 0; } .about-div { display: flex; flex-direction: column; } .about-info { font-size: 15px; } h2 { font-size: 30px; margin: 3px; } .skills { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr; } .card { border: 5px; width: 100px; border-radius: 10px; margin: 10%; margin-right: 50%; } .about-img { width: 190px; height: 180px; border-radius: 5px; box-shadow: 1rem 1rem #1e1b38, -1rem -1rem #c4a8e8; } .projects { display: flex; flex-direction: column; align-items: center; margin-top: 40px; margin-left: 0; margin-right: 20px; } h3 { font-size: 30px; } .question { font-size: 20px; } #contact { display: flex; flex-direction: column; justify-content: center; margin-left: 5%; margin-right: 5%; padding-top: 100px; padding-bottom: 60px; } .heading-proj { font-size: 40px; margin-top: 120px; } .heading-two { font-size: 30px; margin: 60px 0 30px 0; } .projects-div { display: flex; justify-content: center; flex-direction: column; align-items: center; margin: 30px 0 30px 0; border: #c4a8e8 solid 2px; padding: 20px 0 20px 0; } .project-img { display: none; } .proj-info-one { width: 280px; margin-left: 0px; } .proj-info-two { width: 280px; margin-right: 0px; } .proj-h-one { text-align: center; } .proj-p-one { width: 280px; text-align: center; color: #7a7694; font-family: Raleway; } .proj-p-two { width: 280px; text-align: center; color: #7a7694; font-family: Raleway; } .frame-div { display: flex; justify-content: center; } .frame-div-two { display: flex; } .frameworks { margin: auto; justify-content: center; display: contents; } .frameworks-two { margin: auto; justify-content: center; display: contents; align-items: center; } .stack-left { align-items: center; margin: 5%; margin-left: 45%; } .stack-right { align-items: center; margin: 5%; } .small-github { width: 30px; padding: 3px; } .small-link { width: 26px; padding: 5px; } .small-links { display: flex; justify-content: center; } .small-links-two { display: flex; justify-content: center; } .small-projects { display: flex; justify-content: center; align-items: stretch; margin-bottom: 50px; } .small { background-color: #1e1b38; width: 220px; min-height: 255px; padding: 25px 20px; border-radius: 5px; margin: 10px; transition: transform 250ms; display: flex; flex-direction: column; } .small:hover { transform: translateY(-20px); } .folder { width: 30px; } .proj-name { color: #e0dcf0; font-family: Inconsolata; font-size: 18px; margin: 10px 0 0 0; } .p-proj { color: #7a7694; font-family: Raleway; margin: 10px 0 10px 0; font-size: 15px; } .tech-icons img { height: 32px; } } /* ── Recent Work Sections (Homepage) ─────────────────── */ .recent-section { display: flex; flex-direction: column; margin-left: 20%; margin-right: 20%; padding: 50px 0 10px 0; } .recent-header { display: flex; align-items: baseline; gap: 20px; margin-bottom: 28px; } .recent-title { margin: 0; font-size: 40px; } .view-all { color: #c4a8e8; font-family: Inconsolata; font-size: 20px; text-decoration: none; white-space: nowrap; margin-left: auto; flex-shrink: 0; transition: letter-spacing 0.2s ease, opacity 0.2s ease; } .view-all:hover { text-decoration: underline; letter-spacing: 0.5px; opacity: 0.85; } .recent-list { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; margin-top: -28px; } .recent-list .paper { width: 100%; margin-left: 0; margin-right: 0; } .recent-card { background-color: #12102a; border: 1px solid transparent; border-radius: 8px; box-sizing: border-box; padding: 16px 18px; text-decoration: none; display: block; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .recent-card:hover { border-color: #c4a8e8; box-shadow: 0 4px 20px rgba(196, 168, 232, 0.15); transform: translateY(-3px); } .recent-card-inner { display: flex; gap: 14px; align-items: stretch; } .recent-card-thumb { width: 160px; object-fit: cover; border-radius: 4px; flex-shrink: 0; opacity: 0.85; align-self: stretch; } .recent-card-body { flex: 1; min-width: 0; } .recent-card-title { color: #e0dcf0; font-family: Inconsolata; font-size: 20px; font-weight: bold; text-decoration: none; display: inline; margin: 0 0 4px 0; line-height: 1.35; } .recent-card-title:hover { color: #c4a8e8; } .recent-card-meta { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin: 5px 0 0 0; } .recent-card-meta .blog-date { display: block; width: 100%; margin-top: 0; } .recent-card-desc { color: #9a96b8; font-size: 14px; font-family: Raleway, sans-serif; letter-spacing: 0.3px; line-height: 1.65; margin: 0; border-top: 1px solid #201d3a; padding-top: 8px; margin-top: 10px; } .recent-card-links { display: flex; gap: 4px; margin-top: 10px; } @media screen and (max-width: 1500px) { .recent-section { margin-left: 10%; margin-right: 10%; } } @media screen and (max-width: 1400px) { .recent-section { margin-left: 7%; margin-right: 7%; } } @media screen and (max-width: 1300px) { .recent-section { margin-left: 5%; margin-right: 5%; } } @media only screen and (max-width: 850px) { .recent-section { margin-left: 5%; margin-right: 5%; padding: 30px 0 4px 0; } .recent-header { flex-wrap: wrap; gap: 6px 16px; margin-bottom: 18px; } .recent-title { font-size: 26px; } .view-all { font-size: 15px; margin-left: 0; } .recent-card-thumb { width: 72px; } .recent-card-title { font-size: 16px; } .recent-card-desc { font-size: 13px; } } /* ── Blog card thumbnail (homepage + blog list) ──────── */ .blog-thumb-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #18163a 0%, #12102a 100%); border: 1px solid #201d3a; border-radius: 4px; color: #1e1b38; font-size: 30px; flex-shrink: 0; align-self: stretch; } /* Blog list page (paper cards) inner flex layout */ .blog-list-inner { display: flex; gap: 14px; align-items: stretch; } .blog-list-thumb { width: 160px; object-fit: cover; border-radius: 4px; flex-shrink: 0; opacity: 0.85; align-self: stretch; } .blog-list-thumb-placeholder { width: 160px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #18163a 0%, #12102a 100%); border: 1px solid #201d3a; border-radius: 4px; color: #1e1b38; font-size: 30px; align-self: stretch; } .blog-list-body { flex: 1; min-width: 0; } @media only screen and (max-width: 850px) { .blog-list-thumb, .blog-list-thumb-placeholder { width: 72px; font-size: 16px; } } /* ── Blog search box ──────────────────────────────────── */ .blog-search-wrapper { display: flex; justify-content: center; padding: 28px 40px 0; } .blog-search-input { width: 100%; max-width: 520px; background: #12102a; border: 1.5px solid #201d3a; border-radius: 24px; color: #e0dcf0; font-family: Inconsolata; font-size: 15px; padding: 10px 20px 10px 42px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234a3660' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 16px center; -webkit-appearance: none; } .blog-search-input::placeholder { color: #3a3460; } .blog-search-input:focus { border-color: #c4a8e8; box-shadow: 0 0 0 3px rgba(196, 168, 232, 0.12); } /* ── Blog filter count + empty state ─────────────────── */ .blog-filter-count { text-align: center; font-family: Raleway, sans-serif; font-size: 15px; color: #9a96b8; margin: 8px 0 0; } .blog-no-results { text-align: center; padding: 60px 20px; color: #9a96b8; font-family: Raleway, sans-serif; font-size: 17px; display: none; } .blog-no-results.visible { display: block; } /* ── Blog tag filter bar ──────────────────────────────── */ .tag-filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 40px 28px; max-width: 860px; margin: 28px auto 0; } .tag-filter-btn { display: inline-block; background-color: transparent; color: #c4a8e8; font-family: Inconsolata; font-size: 13px; font-weight: bold; padding: 5px 14px; border-radius: 14px; border: 1.5px solid #1e1b38; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease; } .tag-filter-btn:hover { background-color: #171432; border-color: #c4a8e8; transform: translateY(-2px); } .tag-filter-btn--active { background-color: #1e1b38; border-color: #c4a8e8; color: #ddc8f8; } .blog-tag-pill--clickable { cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .blog-tag-pill--clickable:hover { background-color: #342c60; color: #e0d4f4; } .blog-tag-pill--active { background-color: #c4a8e8; color: #070614; outline: none; font-weight: bold; } .blog-post--hidden { display: none; } /* ── Blog listing ─────────────────────────────────────── */ .blog-date { display: block; width: 100%; color: #c4a8e8; font-family: Inconsolata; font-size: 14px; margin-top: 3px; } .blog-tag-pill { display: inline-block; background-color: #1e1b38; color: #c4a8e8; font-family: Inconsolata; font-size: 13px; font-weight: bold; padding: 3px 10px; border-radius: 12px; margin-right: 3px; margin-top: 3px; text-decoration: none; } .blog-reading-time { display: inline-block; color: #7a7694; font-family: Inconsolata; font-size: 13px; margin-left: 4px; margin-top: 3px; } #blogList .paper { border: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } #blogList .paper:hover { border-color: #c4a8e8; box-shadow: 0 4px 20px rgba(196, 168, 232, 0.15); transform: translateY(-4px); } #blogList .paper-info { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #paperList .paper { border: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } #paperList .paper:hover { border-color: #c4a8e8; box-shadow: 0 4px 20px rgba(196, 168, 232, 0.15); transform: translateY(-4px); } .paper-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; margin-bottom: 4px; } /* ── Blog post page ───────────────────────────────────── */ .blog-post-wrapper { max-width: 820px; margin: 120px auto 100px; padding: 0 40px; } .blog-back-link { color: #c4a8e8; font-family: Inconsolata; font-size: 20px; text-decoration: none; white-space: nowrap; display: inline-block; margin-bottom: 28px; transition: letter-spacing 0.2s ease, opacity 0.2s ease; } .blog-back-link:hover { text-decoration: underline; letter-spacing: 0.5px; opacity: 0.85; } .blog-back-link--bottom { display: inline-block; margin-top: 32px; margin-bottom: 28px; } .blog-post-title { color: #e0dcf0; font-family: Raleway, sans-serif; font-size: 38px; margin: 0 0 12px 0; line-height: 1.25; } .blog-post-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .blog-post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .blog-post-date { color: #c4a8e8; font-family: Inconsolata; font-size: 15px; } .blog-divider { border: none; border-top: 1px solid #201d3a; margin: 24px 0 36px 0; } /* ── Rendered Markdown ────────────────────────────────── */ .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 { color: #c4a8e8; font-family: Inconsolata; margin-top: 36px; margin-bottom: 8px; } .blog-content h1 { font-size: 32px; } .blog-content h2 { font-size: 26px; } .blog-content h3 { font-size: 22px; } .blog-content h4 { font-size: 18px; } .blog-content p { color: #9a96b8; font-size: 18px; line-height: 1.85; font-family: Raleway, sans-serif; margin: 14px 0; letter-spacing: 0.15px; } .blog-content a { color: #c4a8e8; text-decoration: none; } .blog-content a:hover { text-decoration: underline; } .blog-content strong { color: #e0dcf0; } .blog-content em { color: #9a96b8; } .blog-content code { background: #12102a; color: #c4a8e8; padding: 2px 7px; border-radius: 4px; font-family: Inconsolata; font-size: 15px; } .blog-content pre { background: #12102a; padding: 20px; border-radius: 8px; overflow-x: auto; margin: 20px 0; border: 1px solid #201d3a; border-left: 2px solid rgba(78, 205, 196, 0.35); position: relative; } .copy-code-btn { position: absolute; top: 10px; right: 10px; background: rgba(196, 168, 232, 0.1); color: #c4a8e8; border: 1px solid rgba(196, 168, 232, 0.25); border-radius: 5px; width: 32px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; flex-shrink: 0; } .blog-content pre:hover .copy-code-btn { opacity: 1; } .copy-code-btn:hover { background: rgba(196, 168, 232, 0.25); border-color: #c4a8e8; } .copy-code-btn.copied { color: #5cb85c; border-color: rgba(92, 184, 92, 0.5); background: rgba(92, 184, 92, 0.12); opacity: 1; } .blog-content pre code { background: transparent; padding: 0; color: #e0dcf0; font-size: 14px; border-radius: 0; } .blog-content pre code.hljs { background: transparent; padding: 0; } /* ── Code block language badge ───────────────────────── */ .code-lang-badge { position: absolute; top: 0; left: 0; background: rgba(196, 168, 232, 0.12); color: #c4a8e8; border-bottom: 1px solid rgba(196, 168, 232, 0.12); font-family: Inconsolata, monospace; font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 8px 0 4px 0; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; user-select: none; line-height: 1.5; } .blog-content pre.has-lang-badge { padding-top: 32px; background: #0c0a1e; } .blog-content blockquote { border-left: 3px solid #c4a8e8; margin: 20px 0; padding: 10px 20px; background-color: #12102a; border-radius: 0 8px 8px 0; } .blog-content blockquote p { margin: 0; } .blog-content ul, .blog-content ol { color: #7a7694; font-family: Raleway, sans-serif; font-size: 18px; line-height: 1.85; padding-left: 28px; margin: 12px 0; } .blog-content ul { list-style-type: disc; } .blog-content ol { list-style-type: decimal; } .blog-content ul li::marker, .blog-content ol li::marker { content: unset; color: #c4a8e8; } .blog-content ul li::marker { content: "• "; color: #c4a8e8; } .blog-content li { margin: 6px 0; font-size: 18px; } .blog-content hr { border: none; border-top: 1px solid #201d3a; margin: 40px 0; } .blog-content img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 8px; margin: 32px auto; } .blog-figure { width: fit-content; max-width: 100%; margin: 32px auto; text-align: center; } .blog-figure img { display: block; min-width: 0 !important; max-width: 100%; height: auto; margin: 0 auto 10px; } .blog-figure-img--custom { max-width: 100% !important; } .blog-figcaption { color: #9a96b8; font-family: Inconsolata; font-size: 14px; font-style: italic; margin-top: 6px; } .blog-img-error { display: none; } .blog-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: Raleway, sans-serif; color: #7a7694; font-size: 16px; } .blog-content th { background-color: #12102a; color: #c4a8e8; font-family: Inconsolata; padding: 10px 14px; border: 1px solid #201d3a; text-align: left; } .blog-content td { padding: 10px 14px; border: 1px solid #201d3a; } @media only screen and (max-width: 850px) { .blog-post-wrapper { margin: 100px 0 60px; padding: 0 20px; } .blog-post-title { font-size: 26px; } .blog-content p, .blog-content ul, .blog-content ol { font-size: 16px; } .blog-content h2 { font-size: 22px; } .blog-content h3 { font-size: 19px; } } /* ── Skeleton loading ─────────────────────────────────── */ @keyframes skeleton-shimmer { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } } .skeleton-item { background: linear-gradient(90deg, #1e0d2e 25%, #2e1845 50%, #1e0d2e 75%); background-size: 1600px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 5px; } .skeleton-paper { border: 1px solid rgba(196, 168, 232, 0.1); border-radius: 10px; padding: 22px 24px; margin-bottom: 16px; } .skeleton-paper .sk-title { height: 20px; width: 60%; margin-bottom: 12px; } .skeleton-paper .sk-meta { height: 13px; width: 35%; margin-bottom: 14px; } .skeleton-paper .sk-line { height: 13px; margin-bottom: 8px; } .skeleton-paper .sk-line:last-child { width: 75%; } .skeleton-recent-card { border: 1px solid rgba(196, 168, 232, 0.1); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; } .skeleton-recent-card .sk-title { height: 18px; width: 65%; margin-bottom: 10px; } .skeleton-recent-card .sk-meta { height: 12px; width: 30%; margin-bottom: 10px; } .skeleton-recent-card .sk-desc { height: 13px; width: 90%; } /* ── Buy Me a Coffee ─────────────────────────────────── */ #bmc-iframe { transform-origin: left bottom !important; } /* On the blog-post page the TOC sits on the left (220px wide + 80px gap). Override the widget's default left:18px to place the button in that gap. max(228px, calc(50vw - 472px)) keeps the button centred in the gap even when the 1400px max-width container is centred on wide viewports. */ body#top-post #bmc-wbtn { left: max(270px, calc(50vw - 462px)) !important; right: auto !important; } .hero-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; } .hero-cta-row .cv { margin-top: 0; } .cta-ghost { display: inline-block; color: rgba(196, 168, 232, 0.7); border: 1px solid rgba(196, 168, 232, 0.3); border-radius: 5px; padding: 10px 0; width: 200px; text-align: center; font-size: 20px; text-decoration: none; font-family: Inconsolata; letter-spacing: 0.02em; background-color: transparent; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .cta-ghost:hover { color: #c4a8e8; border-color: rgba(196, 168, 232, 0.65); background-color: rgba(196, 168, 232, 0.06); } .bmc-btn { display: inline-flex; align-items: center; gap: 9px; background-color: #FFDD00; color: #111111; border: 2px solid #FFDD00; border-radius: 5px; padding: 10px 22px; font-size: 20px; font-family: Inconsolata; font-weight: bold; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .bmc-btn:hover { background-color: #f5d000; box-shadow: 0 4px 18px rgba(255, 221, 0, 0.45); transform: translateY(-2px); } .bmc-post-section { margin-top: 64px; padding: 40px 36px; background-color: #100e20; border: 1px solid #201d3a; border-radius: 12px; text-align: center; } .bmc-post-section p { color: #9a96b8; font-size: 17px; font-family: Raleway, sans-serif; line-height: 1.7; margin: 0 0 24px 0; } .bmc-post-btn { display: inline-flex; align-items: center; gap: 10px; background-color: #FFDD00; color: #111111; border: 2px solid #FFDD00; border-radius: 8px; padding: 13px 30px; font-size: 21px; font-family: Inconsolata; font-weight: bold; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .bmc-post-btn:hover { background-color: #f5d000; box-shadow: 0 6px 24px rgba(255, 221, 0, 0.45); transform: translateY(-2px); } @media only screen and (max-width: 850px) { .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 12px; } .bmc-btn { font-size: 17px; padding: 9px 16px; } .bmc-post-section { padding: 28px 20px; } .bmc-post-btn { font-size: 18px; padding: 11px 22px; } } /* ── Reduced-motion accessibility ─────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { opacity: 1 !important; transition: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Skip-to-content link ─────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 8px; padding: 8px 16px; background: #c4a8e8; color: #fff; font-family: Raleway, sans-serif; font-size: 14px; font-weight: bold; border-radius: 4px; text-decoration: none; z-index: 9999; } .skip-link:focus { top: 8px; } /* ── Active nav page indicator ──────────────────────────── */ .nav-link[aria-current="page"] { color: #c4a8e8; border-bottom: 2px solid #c4a8e8; padding-bottom: 2px; } /* ── Certificates section ─────────────────────────────── */ #certificates { display: flex; flex-direction: column; margin-left: 20%; margin-right: 20%; padding: 120px 0 0 0; } #certificates > h3, #certificates > p.question { text-align: left; } #certificates .main-scroll-div { width: 100%; margin-top: 8px; } .child { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border: 1px solid rgba(196, 168, 232, 0.35); width: 250px; cursor: default; text-align: center; border-radius: 16px; margin-top: 5%; margin-bottom: 5%; margin-left: 1.5%; margin-right: 1.5%; display: list-item; list-style: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .child:hover { box-shadow: 0 12px 40px rgba(196, 168, 232, 0.38), 0 4px 12px rgba(196, 168, 232, 0.18); border-color: #c4a8e8; transform: translateY(-6px) scale(1.03); } .child-img { width: 250px; height: 200px; border-radius: 16px 16px 0 0; object-fit: cover; } .cert-link { display: block; color: #7a7694; font-size: 17px; font-family: Raleway, sans-serif; text-decoration: none; padding: 12px 8px; } .cert-link:hover { color: #8b6cc4; } @media screen and (max-width: 1500px) { #certificates { margin-left: 10%; margin-right: 10%; } .proj-scroll-section .main-scroll-div { width: 80%; } } @media screen and (max-width: 1400px) { #certificates { margin-left: 7%; margin-right: 7%; } .proj-scroll-section .main-scroll-div { width: 86%; } } @media screen and (max-width: 1300px) { #certificates { margin-left: 5%; margin-right: 5%; } .proj-scroll-section .main-scroll-div { width: 90%; } } @media only screen and (max-width: 850px) { #certificates { margin-left: 5%; margin-right: 5%; } .proj-scroll-section .main-scroll-div { width: 90%; } } /* ── Reading progress bar ─────────────────────────────── */ #read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #8b6cc4, #c4a8e8, #d4b46a, #c4a8e8); z-index: 9999; transition: width 0.08s linear; pointer-events: none; } /* ── Availability badge ───────────────────────────────── */ .availability-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.35); border-radius: 20px; padding: 5px 14px; margin-bottom: 14px; color: #34d399; font-family: Inconsolata; font-size: 14px; letter-spacing: 0.3px; width: fit-content; } .avail-dot { width: 8px; height: 8px; min-width: 8px; background: #34d399; border-radius: 50%; animation: avail-pulse 2.2s ease-in-out infinite; } @keyframes avail-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); transform: scale(1.15); } } /* ── Typewriter cursor ────────────────────────────────── */ .typewriter-cursor { display: inline-block; width: 2px; height: 0.85em; background: #c4a8e8; margin-left: 3px; vertical-align: middle; border-radius: 1px; animation: tw-blink 0.7s step-end infinite; } .typewriter-cursor--name { background: #d8d4e8; width: 3px; height: 1em; margin-left: 4px; border-radius: 2px; vertical-align: -0.1em; } @keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes tw-cursor-out { to { opacity: 0; } } /* ── Blog post share buttons ──────────────────────────── */ .post-share { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; } .post-share-label { color: #7a7694; font-family: Inconsolata; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: bold; margin-right: 2px; } .post-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 6px; font-family: Inconsolata; font-size: 13px; cursor: pointer; text-decoration: none; border: 1px solid rgba(196, 168, 232, 0.30); background: rgba(196, 168, 232, 0.06); color: #c4a8e8; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .post-share-btn:hover { background: rgba(196, 168, 232, 0.15); border-color: #c4a8e8; } .post-share-btn.copied { color: #5cb85c; border-color: rgba(92, 184, 92, 0.4); background: rgba(92, 184, 92, 0.08); } @media only screen and (max-width: 850px) { .availability-badge { font-size: 13px; padding: 4px 12px; } } /* ════════════════════════════════════════════════════════ SERIES PILL (blog listing cards) ════════════════════════════════════════════════════════ */ .blog-series-pill { display: inline-flex; align-items: center; gap: 5px; background-color: rgba(100, 80, 170, 0.22); color: #d4b8f0; border: 1px solid rgba(196, 168, 232, 0.30); font-family: Inconsolata; font-size: 12px; font-weight: bold; padding: 3px 9px; border-radius: 12px; margin-right: 3px; margin-top: 3px; white-space: nowrap; cursor: default; } .blog-series-pill i { font-size: 11px; opacity: 0.85; } /* ════════════════════════════════════════════════════════ SERIES BANNER (blog post page — top of article) ════════════════════════════════════════════════════════ */ .series-banner { margin: 24px 0 28px; border: 1px solid rgba(196, 168, 232, 0.25); border-radius: 12px; background: linear-gradient(135deg, rgba(100, 80, 170, 0.12) 0%, rgba(30, 15, 50, 0.30) 100%); overflow: hidden; } .series-banner-badge { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-bottom: 1px solid rgba(196, 168, 232, 0.18); font-family: Inconsolata; font-size: 13.5px; font-weight: bold; color: #d4b8f0; letter-spacing: 0.01em; } .series-banner-badge i { color: #c4a8e8; font-size: 14px; flex-shrink: 0; } .series-toc-details { border-top: 1px solid rgba(196, 168, 232, 0.18); } .series-toc-details > summary { list-style: none; } .series-toc-details > summary::-webkit-details-marker { display: none; } .series-toc-summary { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-family: Inconsolata; font-size: 13px; color: #9a96b8; cursor: pointer; user-select: none; transition: color 0.15s ease, background 0.15s ease; } .series-toc-summary:hover { color: #d4b8f0; background: rgba(196, 168, 232, 0.05); } .series-toc-summary i:first-child { font-size: 12px; color: #c4a8e8; } .series-toc-chevron { margin-left: auto; font-size: 11px; color: #9a96b8; transition: transform 0.22s ease, color 0.15s ease; } .series-toc-summary:hover .series-toc-chevron { color: #d4b8f0; } .series-toc-details[open] .series-toc-chevron { transform: rotate(180deg); } .series-toc { display: flex; flex-direction: column; } .series-toc-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 18px; text-decoration: none; color: #9aa0b8; font-family: Raleway, sans-serif; font-size: 14px; border-bottom: 1px solid rgba(196, 168, 232, 0.08); transition: background 0.15s ease, color 0.15s ease; line-height: 1.4; } .series-toc-item:last-child { border-bottom: none; } .series-toc-item:hover { background: rgba(196, 168, 232, 0.08); color: #c8cfe8; } .series-toc-item--active { color: #d4aaff; background: rgba(196, 168, 232, 0.10); pointer-events: none; cursor: default; } .series-toc-item--active .series-toc-num { background: #c4a8e8; color: #070614; } .series-toc-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(196, 168, 232, 0.18); color: #c4a8e8; font-family: Inconsolata; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .series-toc-title { flex: 1; } /* ════════════════════════════════════════════════════════ SERIES FOOTER NAV (blog post page — prev / next) ════════════════════════════════════════════════════════ */ .series-nav-footer { display: flex; gap: 16px; margin: 40px 0 32px; border-top: 1px solid rgba(196, 168, 232, 0.18); padding-top: 32px; } .series-nav-link { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 10px; border: 1px solid rgba(196, 168, 232, 0.22); background: rgba(100, 80, 170, 0.08); text-decoration: none; color: #e0dcf0; transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease; min-width: 0; } .series-nav-link:hover { background: rgba(196, 168, 232, 0.13); border-color: rgba(196, 168, 232, 0.5); transform: translateY(-2px); color: #d4aaff; } .series-nav-link--empty { border: 1px solid transparent; background: none; pointer-events: none; } .series-nav-link i { flex-shrink: 0; color: #c4a8e8; font-size: 14px; } .series-nav-prev { text-align: left; } .series-nav-next { text-align: right; justify-content: flex-end; } .series-nav-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .series-nav-hint { font-family: Inconsolata; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: #c4a8e8; font-weight: bold; } .series-nav-title { font-family: Raleway, sans-serif; font-size: 13.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media only screen and (max-width: 640px) { .series-nav-footer { flex-direction: column; } .series-nav-next { text-align: left; justify-content: flex-start; } .series-toc-title { font-size: 13px; } } /* ════════════════════════════════════════════════════════ BLOG PAGINATION ════════════════════════════════════════════════════════ */ .blog-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 36px 20px 56px; } .blog-pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(196, 168, 232, 0.22); background: transparent; color: #9aa0b8; font-family: Inconsolata; font-size: 14px; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease; user-select: none; } .blog-pg-btn:hover:not(.blog-pg-btn--disabled):not(.blog-pg-btn--active) { background: rgba(196, 168, 232, 0.10); border-color: rgba(196, 168, 232, 0.45); color: #c8cfe8; transform: translateY(-1px); } .blog-pg-btn--active { background: #c4a8e8; border-color: #c4a8e8; color: #070614; font-weight: bold; cursor: default; box-shadow: 0 2px 12px rgba(196, 168, 232, 0.35); } .blog-pg-btn--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .blog-pg-btn--arrow { padding: 0 14px; font-size: 13px; gap: 7px; color: #c4a8e8; border-color: rgba(196, 168, 232, 0.28); } .blog-pg-btn--arrow span { font-family: Inconsolata; } .blog-pg-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 38px; color: #3a3460; font-family: Inconsolata; font-size: 16px; user-select: none; } @media only screen and (max-width: 480px) { .blog-pg-btn--arrow span { display: none; } .blog-pg-btn--arrow { padding: 0 10px; } } /* ═══════════════════════════════════════════════════════════ PROJECTS PAGE — Redesign v3 (cinematic featured + grid datasets) ═══════════════════════════════════════════════════════════ */ /* ── Slim Hero ──────────────────────────────────────────── */ .proj-hero { padding: 110px 20px 52px; text-align: center; } .proj-hero__label { font-family: Inconsolata, monospace; font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: #c4a8e8; opacity: 0.65; margin: 0 0 16px; } .proj-hero__title { font-family: Cinzel, serif; font-size: clamp(48px, 7vw, 86px); color: #e0dcf0; margin: 0 0 16px; line-height: 1; } .proj-hero__sub { font-family: Raleway, sans-serif; font-size: 16px; color: #7a7694; max-width: 440px; margin: 0 auto 24px; line-height: 1.65; } .proj-hero__stats { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: Inconsolata, monospace; font-size: 13px; color: #7a7694; } .proj-hero__stats strong { color: #c4a8e8; } .proj-stat__sep { color: #2a2740; font-size: 18px; } /* ── Section chrome ─────────────────────────────────────── */ .proj-section { max-width: 1120px; margin: 0 auto 64px; padding: 0 32px; } .proj-section__header { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; } /* Scroll sections (Datasets, Other Notable) — header + carousel unified in one element so there's no gap between them. */ .proj-scroll-section { margin-bottom: 64px; } .proj-scroll-section__header { display: flex; align-items: center; gap: 18px; max-width: 1120px; margin: 0 auto 36px; padding: 0 32px; } .proj-section__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,168,232,0.7), transparent); } .proj-section__title { font-family: Cinzel, serif; font-size: 21px; color: #c4a8e8; letter-spacing: 4px; white-space: nowrap; margin: 0; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════ FEATURED PROJECTS — Alternating cinematic rows Inspired by the reference layout: each project is a full-width row. Even cards: image left, content right. Odd cards (.mp-card--alt): content left, image right. No card box — open, editorial feel. ═══════════════════════════════════════════════════════════ */ .mp-list { display: flex; flex-direction: column; gap: 44px; } .mp-card { display: flex; align-items: center; gap: 44px; } .mp-card--alt { flex-direction: row-reverse; } /* Image side */ .mp-card__img-wrap { flex: 0 0 44%; position: relative; border-radius: 14px; overflow: hidden; border: 1.5px solid rgba(196,168,232,0.2); box-shadow: 0 0 28px rgba(139,108,196,0.12); transition: border-color 0.4s, box-shadow 0.4s; max-height: 260px; } .mp-card:hover .mp-card__img-wrap { border-color: rgba(196,168,232,0.52); box-shadow: 0 0 44px rgba(139,108,196,0.26), 0 0 0 4px rgba(196,168,232,0.05); } .mp-card__img { width: 100%; height: 260px; object-fit: cover; opacity: 0.86; display: block; transition: opacity 0.4s, transform 0.65s; } .mp-card:hover .mp-card__img { opacity: 0.98; transform: scale(1.05); } /* Content side */ .mp-card__body { flex: 1; display: flex; flex-direction: column; gap: 14px; } .mp-card__title { font-family: Cinzel, serif; font-size: clamp(18px, 2vw, 26px); color: #c4a8e8; margin: 0; line-height: 1.25; transition: color 0.25s; } .mp-card:hover .mp-card__title { color: #dac8f5; } .mp-card__desc { font-family: Raleway, sans-serif; font-size: 13.5px; color: #7a7694; line-height: 1.72; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .mp-card__stack img { height: 28px; width: auto; } .mp-card__links { display: flex; gap: 8px; flex-wrap: wrap; } .mp-card__link { display: inline-flex; align-items: center; gap: 6px; font-family: Inconsolata, monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; padding: 7px 16px; border-radius: 6px; border: 1px solid rgba(196,168,232,0.28); color: #c4a8e8; text-decoration: none; background: rgba(196,168,232,0.06); transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s; } .mp-card__link:hover { background: rgba(196,168,232,0.15); border-color: rgba(196,168,232,0.6); color: #fff; transform: translateY(-2px); } .mp-card__link--ext { color: #d4b46a; border-color: rgba(212,180,106,0.3); background: rgba(212,180,106,0.05); } .mp-card__link--ext:hover { background: rgba(212,180,106,0.15); border-color: #d4b46a; color: #fff; } /* Responsive */ @media (max-width: 860px) { .mp-card, .mp-card--alt { flex-direction: column; gap: 20px; } .mp-card__img-wrap { flex: none; width: 100%; max-height: 220px; } .mp-card__img { height: 220px; } .mp-list { gap: 36px; } } /* ═══════════════════════════════════════════════════════════ DATASETS — Horizontal scroll shelf Tiles scroll left/right — zero vertical growth regardless of how many datasets exist. Scales to 20+ with no layout changes. Uses the same .main-scroll-div / .scroll-images pattern as "Other Notable Projects". ═══════════════════════════════════════════════════════════ */ .ds-scroll { display: flex; align-items: stretch; margin: 10px; } .ds-tile { flex-shrink: 0; width: 210px; display: flex; flex-direction: column; background: #0f0d20; border: 1px solid rgba(196,168,232,0.1); border-radius: 14px; overflow: hidden; text-decoration: none; margin: 10px 8px; transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s; } .ds-tile:hover { transform: translateY(-7px); border-color: rgba(196,168,232,0.32); box-shadow: 0 14px 40px rgba(139,108,196,0.22); } .ds-tile__thumb { position: relative; height: 130px; overflow: hidden; flex-shrink: 0; } .ds-tile__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; display: block; transition: opacity 0.32s, transform 0.55s; } .ds-tile:hover .ds-tile__thumb img { opacity: 0.92; transform: scale(1.07); } .ds-tile__thumb::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 44px; background: linear-gradient(to top, #0f0d20, transparent); pointer-events: none; } .ds-tile__badge { position: absolute; top: 9px; right: 9px; background: rgba(7,6,20,0.82); border: 1px solid rgba(196,168,232,0.38); color: #c4a8e8; font-family: Inconsolata, monospace; font-size: 7.5px; letter-spacing: 2px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; backdrop-filter: blur(6px); } .ds-tile__body { padding: 13px 15px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .ds-tile__title { font-family: Cinzel, serif; font-size: 13px; color: #e0dcf0; margin: 0; line-height: 1.3; } .ds-tile__title a { color: inherit; text-decoration: none; transition: color 0.2s; } .ds-tile__title a:hover { color: #c4a8e8; text-decoration: none; } .ds-tile__desc { font-family: Raleway, sans-serif; font-size: 11.5px; color: #5a566e; line-height: 1.58; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ds-tile__hf { display: inline-flex; align-items: center; gap: 5px; font-family: Inconsolata, monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #c4a8e8; opacity: 0.42; margin-top: 2px; } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 800px) { .ds-tile { width: 190px; } } @media (max-width: 600px) { .proj-section { padding: 0 18px; margin-bottom: 48px; } .proj-scroll-section__header { padding: 0 18px; } .ds-tile { width: 170px; } .ds-tile__thumb { height: 110px; } } @media (max-width: 480px) { .proj-hero { padding: 100px 16px 40px; } .mp-card__title { font-size: 16px; } .ds-tile { width: 155px; } } /* ══════════════════════════════════════════════════════════ 🎬 CINEMATIC INTRO LOADING SCREEN ══════════════════════════════════════════════════════════ */ #elaina-intro { position: fixed; inset: 0; z-index: 99999; background: #000000; display: flex; align-items: center; justify-content: center; pointer-events: all; clip-path: circle(150% at 50% 50%); transition: clip-path 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease 0.7s; } #elaina-intro.elaina-intro--fade { clip-path: circle(0% at 50% 50%); opacity: 0; pointer-events: none; } .elaina-intro-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; animation: intro-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes intro-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .elaina-intro-arc { width: 64px; height: 64px; border: 1.5px solid transparent; border-top-color: #c4a8e8; border-right-color: rgba(196, 168, 232, 0.25); border-radius: 50%; animation: elaina-spin 1s linear infinite; box-shadow: 0 0 14px rgba(196, 168, 232, 0.18); } .elaina-intro-content { text-align: center; animation: intro-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } .elaina-intro-jp { font-family: Cinzel, serif; font-size: clamp(18px, 4vw, 28px); letter-spacing: 0.3em; color: #c4a8e8; margin: 0 0 6px; text-shadow: 0 0 24px rgba(196, 168, 232, 0.5); } .elaina-intro-en { font-family: Raleway, sans-serif; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(196, 168, 232, 0.45); margin: 0; } @media (prefers-reduced-motion: reduce) { .elaina-intro-arc { animation: none; } .elaina-intro-inner, .elaina-intro-content { animation: none; } } /* ══════════════════════════════════════════════════════════ ✨ CUSTOM CURSOR ══════════════════════════════════════════════════════════ */ .elaina-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; background: radial-gradient(circle, #c4a8e8 0%, rgba(196, 168, 232, 0.5) 60%, transparent 100%); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: transform 0.08s ease, opacity 0.3s ease; box-shadow: 0 0 10px 2px rgba(196, 168, 232, 0.5); will-change: transform; } .elaina-cursor--hidden { opacity: 0; } #elaina-cursor-trail { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99997; width: 100%; height: 100%; } /* Restore system pointer cursor on interactive elements */ a, button, [role="button"], .tag-filter-btn, .nav-link, .copy-email, .blog-tag-pill--clickable, .icon-arrow, .arrow-bac, .cv, .paper-name, .proj-name, .mp-card__link, .blog-back-link, .series-nav-link, .post-share-btn { cursor: pointer; } @media (hover: none) { .elaina-cursor, #elaina-cursor-trail { display: none; } } /* ══════════════════════════════════════════════════════════ 📖 BLOG READING EXPERIENCE ══════════════════════════════════════════════════════════ */ /* Drop cap on first paragraph */ .blog-content > p:first-of-type::first-letter { font-family: Cinzel, serif; font-size: 4.2em; font-weight: 700; line-height: 0.78; float: left; margin: 0 10px -4px 0; color: #c4a8e8; text-shadow: 0 0 18px rgba(196, 168, 232, 0.4); padding-top: 6px; } /* Floating ToC sidebar layout */ .blog-post-layout { display: flex; align-items: flex-start; gap: 0; max-width: 1400px; margin: 0 auto; position: relative; } .blog-post-layout .blog-post-wrapper { flex: 1; min-width: 0; } .blog-toc-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 110px; max-height: calc(100vh - 140px); overflow-y: auto; padding: 20px 24px 20px 0; border-right: 1px solid rgba(196, 168, 232, 0.12); margin-right: 80px; scrollbar-width: none; } .blog-toc-sidebar::-webkit-scrollbar { display: none; } .blog-toc-sidebar:hover { scrollbar-width: thin; scrollbar-color: rgba(196, 168, 232, 0.3) transparent; } .blog-toc-sidebar:hover::-webkit-scrollbar { display: block; width: 4px; } .blog-toc-sidebar:hover::-webkit-scrollbar-track { background: transparent; } .blog-toc-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(196, 168, 232, 0.3); border-radius: 2px; } .blog-toc-title { font-family: Cinzel, serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(196, 168, 232, 0.5); margin: 0 0 14px; padding: 0; } .blog-toc-item { display: block; font-family: Raleway, sans-serif; font-size: 13px; line-height: 1.45; color: rgba(216, 212, 232, 0.5); text-decoration: none; padding: 5px 10px 5px 0; border-right: 2px solid transparent; margin-bottom: 2px; transition: color 0.2s, border-color 0.2s; } .blog-toc-item--sub { padding-right: 20px; font-size: 12px; } .blog-toc-item:hover { color: #c4a8e8; border-right-color: rgba(196, 168, 232, 0.4); } .blog-toc-item--active { color: #c4a8e8 !important; border-right-color: #c4a8e8 !important; } /* Hide ToC on narrow viewports */ @media (max-width: 1180px) { .blog-toc-sidebar { display: none; } .blog-post-layout { display: block; } } /* Code block palette override — match the site theme */ .blog-content .hljs { background: #0c0a1e !important; border: 1px solid rgba(196, 168, 232, 0.1); } /* ══════════════════════════════════════════════════════════ NAV ACTIVE ✦ INDICATOR ══════════════════════════════════════════════════════════ */ @keyframes nav-indicator-pulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(196, 168, 232, 0.6)); } 50% { filter: drop-shadow(0 0 8px rgba(196, 168, 232, 1)); } } .nav-link.nav-active::after { content: ' ✦'; font-size: 0.52em; vertical-align: super; color: #c4a8e8; margin-left: 1px; display: inline-block; animation: nav-indicator-pulse 2.2s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ CLIP-PATH CURTAIN REVEAL ══════════════════════════════════════════════════════════ */ .clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: clip-path; } .clip-reveal--in { clip-path: inset(0 0 0% 0); } /* ══════════════════════════════════════════════════════════ SKILL ICONS STAGGERED ENTRANCE ══════════════════════════════════════════════════════════ */ .skills li { opacity: 0; transform: scale(0.6) translateY(12px); transition: opacity 0.38s ease calc(var(--si, 0) * 60ms), transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--si, 0) * 60ms); } .skills--staged li { opacity: 1; transform: scale(1) translateY(0); } /* ══════════════════════════════════════════════════════════ SCROLL-ENTRANCE ANIMATIONS Replaces AOS — pure CSS + IntersectionObserver in index.js ══════════════════════════════════════════════════════════ */ .reveal-section { opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-section.revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-section { opacity: 1; transform: none; transition: none; } } /* ══════════════════════════════════════════════════════════ KATEX — dark-theme overrides ══════════════════════════════════════════════════════════ */ .math-display { overflow-x: auto; overflow-y: hidden; margin: 1.75em 0; padding: 0.25em 0; text-align: center; } .math-display .katex-display { margin: 0; } .blog-content .katex { color: #dde1ee; font-size: 1.08em; } .math-fallback { color: rgba(196, 168, 232, 0.6); font-size: 0.9em; background: rgba(196, 168, 232, 0.05); border: 1px solid rgba(196, 168, 232, 0.12); border-radius: 6px; padding: 12px 16px; overflow-x: auto; white-space: pre-wrap; } /* ══════════════════════════════════════════════════════════ FOOTNOTES ══════════════════════════════════════════════════════════ */ .footnote-ref { color: #c4a8e8; text-decoration: none; font-size: 0.75em; font-family: Cinzel, serif; vertical-align: super; line-height: 0; margin-left: 1px; } .footnote-ref:hover { text-decoration: underline; } .footnotes { margin-top: 52px; } .footnotes-rule { border: none; border-top: 1px solid rgba(196, 168, 232, 0.14); margin-bottom: 24px; } .footnotes-list { list-style: none; padding: 0; margin: 0; counter-reset: fn-counter; } .footnote-item { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: rgba(189, 194, 211, 0.72); margin-bottom: 10px; line-height: 1.6; counter-increment: fn-counter; } .footnote-item::before { content: counter(fn-counter) '.'; font-family: Cinzel, serif; font-size: 11px; color: rgba(196, 168, 232, 0.5); min-width: 18px; flex-shrink: 0; } .footnote-text { flex: 1; } .footnote-back { color: rgba(196, 168, 232, 0.55); font-size: 15px; text-decoration: none; flex-shrink: 0; line-height: 1; transition: color 0.2s ease; } .footnote-back:hover { color: #c4a8e8; } /* ══════════════════════════════════════════════════════════ CAREER PAGE — Timeline layout ══════════════════════════════════════════════════════════ */ .career-hero { padding-bottom: 10px; } .career-page-body { max-width: 880px; margin: 0 auto; padding: 0 5% 60px 5%; } .career-section { margin-top: 52px; } /* ── Timeline container ──────────────────────────────────── */ .career-timeline { display: flex; flex-direction: column; gap: 0; padding-left: 32px; border-left: 2px solid rgba(196, 168, 232, 0.18); margin-top: 32px; } /* ── Single entry ────────────────────────────────────────── */ .career-entry { position: relative; padding: 0 0 40px 36px; } .career-entry:last-child { padding-bottom: 0; } /* Dot on the timeline line */ .career-entry::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #c4a8e8; border: 2px solid #1a1530; box-shadow: 0 0 0 3px rgba(196, 168, 232, 0.18); flex-shrink: 0; } /* ── Period label ────────────────────────────────────────── */ .career-entry__period { font-family: Cinzel, serif; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: #d4b46a; margin-bottom: 8px; } /* ── Content block ───────────────────────────────────────── */ .career-entry__content { background: #12102a; border: 1px solid rgba(196, 168, 232, 0.1); border-radius: 10px; padding: 20px 24px; transition: border-color 0.25s, box-shadow 0.25s; } .career-entry__content:hover { border-color: rgba(196, 168, 232, 0.32); box-shadow: 0 6px 28px rgba(139, 108, 196, 0.12); } /* ── Header row (title + location) ──────────────────────── */ .career-entry__header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 4px; } .career-entry__title { font-family: Cinzel, serif; font-size: 17px; color: #e0dcf0; margin: 0; font-weight: 600; line-height: 1.3; flex: 1; min-width: 0; } .career-entry__title a { color: inherit; text-decoration: none; transition: color 0.2s; } .career-entry__title a:hover { color: #c4a8e8; } .career-entry__location { font-family: Inconsolata, monospace; font-size: 12px; color: rgba(196, 168, 232, 0.5); white-space: nowrap; flex-shrink: 0; } .career-entry__location i { margin-right: 3px; font-size: 11px; } /* ── Organization ────────────────────────────────────────── */ .career-entry__org { font-family: Inconsolata, monospace; font-size: 13px; color: #c4a8e8; margin-bottom: 10px; letter-spacing: 0.3px; } /* ── Description ─────────────────────────────────────────── */ .career-entry__desc { font-family: Raleway, sans-serif; font-size: 13.5px; color: #9a96b8; line-height: 1.7; margin: 0 0 12px 0; border-top: 1px solid rgba(196, 168, 232, 0.08); padding-top: 10px; } /* ── Tags ────────────────────────────────────────────────── */ .career-entry__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } /* ── Homepage recent card icon ───────────────────────────── */ .career-recent-card .recent-card-inner { align-items: flex-start; } .career-recent-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(196, 168, 232, 0.07); border: 1px solid rgba(196, 168, 232, 0.18); flex-shrink: 0; color: #c4a8e8; font-size: 20px; margin-top: 2px; transition: background 0.25s, border-color 0.25s; } .career-recent-card:hover .career-recent-icon { background: rgba(196, 168, 232, 0.14); border-color: rgba(196, 168, 232, 0.38); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 860px) { .career-page-body { padding: 0 5% 40px 5%; } .career-timeline { padding-left: 18px; } .career-entry { padding-left: 24px; } .career-entry__title { font-size: 15px; } } @media (max-width: 560px) { .career-entry__header { flex-direction: column; gap: 4px; } .career-entry__content { padding: 16px 16px; } } /* ══════════════════════════════════════════════════════════════════════ FEATURE ADDITIONS ══════════════════════════════════════════════════════════════════════ */ /* ── 10. Richer hero entrance — per-element stagger ─────────────────── */ @keyframes hero-child-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-img-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } body.page-loaded .hero-stagger-1 { animation: hero-child-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; } body.page-loaded .hero-stagger-2 { animation: hero-child-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both; } body.page-loaded .hero-stagger-3 { animation: hero-child-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; } body.page-loaded .hero-stagger-4 { animation: hero-child-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.63s both; } body.page-loaded .hero-stagger-5 { animation: hero-child-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.77s both; } body.page-loaded .hero-stagger-img { animation: hero-img-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both; } @media (prefers-reduced-motion: reduce) { .hero-stagger-1, .hero-stagger-2, .hero-stagger-3, .hero-stagger-4, .hero-stagger-5, .hero-stagger-img { animation: none !important; } } /* ── 20. Hero stats strip ────────────────────────────────────────────── */ .hero-stats-row { display: flex; justify-content: center; padding: 20px 0 4px; } .hero-stats-strip { display: flex; align-items: center; justify-content: center; gap: 0; width: 80%; max-width: 560px; background: linear-gradient(135deg, rgba(196, 168, 232, 0.05) 0%, rgba(14, 12, 30, 0.6) 100%); border: 1px solid rgba(196, 168, 232, 0.15); border-radius: 14px; padding: 22px 0; backdrop-filter: blur(6px); min-height: 24px; transition: border-color 0.35s ease, box-shadow 0.35s ease; } .hero-stats-strip:hover { border-color: rgba(196, 168, 232, 0.45); box-shadow: 0 0 18px rgba(196, 168, 232, 0.18), 0 0 6px rgba(232, 184, 75, 0.1) inset; } /* ── 21. Publications page stats banner ──────────────────────────────── */ .pub-stats-strip { display: flex; align-items: center; justify-content: center; gap: 0; width: 80%; max-width: 560px; margin: 28px auto 10px; background: linear-gradient(135deg, rgba(196, 168, 232, 0.05) 0%, rgba(14, 12, 30, 0.6) 100%); border: 1px solid rgba(196, 168, 232, 0.15); border-radius: 14px; padding: 22px 0; backdrop-filter: blur(6px); min-height: 24px; transition: border-color 0.35s ease, box-shadow 0.35s ease; } .pub-stats-strip:hover { border-color: rgba(196, 168, 232, 0.45); box-shadow: 0 0 18px rgba(196, 168, 232, 0.18), 0 0 6px rgba(232, 184, 75, 0.1) inset; } .pub-stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex: 1; padding: 0 24px; } .pub-stat-sep { width: 1px; height: 52px; background: linear-gradient(to bottom, transparent, rgba(196, 168, 232, 0.25), transparent); flex-shrink: 0; } .pub-stat-icon { font-size: 13px; color: rgba(196, 168, 232, 0.38); } .pub-stat-num { font-family: Cinzel, 'Times New Roman', serif; font-size: 28px; font-weight: 700; color: #e8b84b; letter-spacing: 0.04em; line-height: 1; text-align: center; } .pub-stat-label { font-family: Raleway, sans-serif; font-size: 9.5px; font-weight: 600; color: #7a76a0; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } /* page-load animation */ body#top-publications.page-loaded #pub-stats { animation: pt-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both; } /* ── 8. Ornamental section dividers ─────────────────────────────────── */ .section-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 44px auto 36px; max-width: 480px; padding: 0 32px; } .section-ornament::before, .section-ornament::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(196, 168, 232, 0.3)); } .section-ornament::after { background: linear-gradient(to left, transparent, rgba(196, 168, 232, 0.3)); } .section-ornament-glyph { font-size: 11px; color: rgba(196, 168, 232, 0.45); letter-spacing: 7px; font-family: serif; user-select: none; flex-shrink: 0; } /* ── 9. Scroll-position dot indicators ──────────────────────────────── */ .section-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 500; } @media (max-width: 1100px) { .section-dots { display: none; } } .section-dot { background: none; border: none; padding: 5px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; line-height: 1; } .section-dot-pip { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(196, 168, 232, 0.1); border: 1px solid rgba(196, 168, 232, 0.22); transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .section-dot:hover .section-dot-pip { background: rgba(139, 108, 196, 0.6); border-color: rgba(196, 168, 232, 0.75); transform: scale(1.5); box-shadow: 0 0 8px rgba(196, 168, 232, 0.4); } @keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 168, 232, 0.55); transform: scale(1.7); } 50% { box-shadow: 0 0 0 5px rgba(196, 168, 232, 0); transform: scale(1.85); } } .section-dot--active .section-dot-pip { background: rgba(196, 168, 232, 0.9); border-color: rgba(196, 168, 232, 0.9); animation: dot-pulse 2.2s ease-in-out infinite; } .section-dot-tooltip { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); font-family: Raleway, sans-serif; font-size: 11px; color: #c4a8e8; background: #0d0c1e; border: 1px solid #2a2545; border-radius: 4px; padding: 3px 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; letter-spacing: 0.03em; } .section-dot:hover .section-dot-tooltip, .section-dot:focus-visible .section-dot-tooltip { opacity: 1; } /* ── 2. BibTeX modal ─────────────────────────────────────────────────── */ .bibtex-modal-overlay { position: fixed; inset: 0; background: rgba(7, 6, 20, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .bibtex-modal-overlay[hidden] { display: none; } .bibtex-modal-overlay.bibtex-modal--open { opacity: 1; pointer-events: auto; } .bibtex-modal-box { background: #0f0e1f; border: 1px solid #3a3460; border-radius: 12px; padding: 26px 26px 22px; width: 100%; max-width: 620px; position: relative; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(196, 168, 232, 0.06); transform: translateY(12px); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .bibtex-modal--open .bibtex-modal-box { transform: translateY(0); } .bibtex-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: #6a6690; font-size: 17px; cursor: pointer; line-height: 1; padding: 5px 7px; border-radius: 4px; transition: color 0.15s ease, background-color 0.15s ease; } .bibtex-modal-close:hover { color: #c4a8e8; background-color: rgba(196, 168, 232, 0.07); } .bibtex-modal-title { font-family: Cinzel, 'Times New Roman', serif; font-size: 13px; color: #c4a8e8; letter-spacing: 0.05em; margin: 0 0 14px; padding-right: 28px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bibtex-modal-textarea { width: 100%; min-height: 200px; max-height: 360px; background: #07061a; border: 1px solid #2a2545; border-radius: 8px; color: #bdc2d3; font-family: Inconsolata, 'Courier New', monospace; font-size: 13px; line-height: 1.7; padding: 14px 16px; resize: vertical; outline: none; box-sizing: border-box; tab-size: 2; transition: border-color 0.15s ease; } .bibtex-modal-textarea:focus { border-color: #c4a8e8; } .bibtex-modal-actions { margin-top: 12px; display: flex; justify-content: flex-end; } .bibtex-modal-copy { background: transparent; border: 1px solid #c4a8e8; border-radius: 6px; color: #c4a8e8; font-family: Cinzel, serif; font-size: 13px; letter-spacing: 0.04em; padding: 8px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .bibtex-modal-copy:hover { background-color: rgba(196, 168, 232, 0.07); } .bibtex-modal-copy.copied { color: #80d4a0; border-color: #80d4a0; } @media (max-width: 600px) { .bibtex-modal-box { padding: 20px 18px 18px; } .bibtex-modal-textarea { min-height: 150px; font-size: 12px; } } /* ── 3. Paper footer (abstract toggle + cite button row) ─────────────── */ .paper-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(58, 52, 96, 0.5); } /* Abstract toggle button */ .paper-abstract-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid #2a2545; border-radius: 6px; color: #7a76a0; font-family: Raleway, sans-serif; font-size: 13px; letter-spacing: 0.03em; padding: 6px 14px; cursor: pointer; user-select: none; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .paper-abstract-btn:hover, .paper-abstract-btn--open { border-color: #c4a8e8; color: #c4a8e8; background-color: rgba(196, 168, 232, 0.05); } .paper-abstract-chevron { display: inline-block; font-size: 18px; transition: transform 0.2s ease; } .paper-abstract-btn--open .paper-abstract-chevron { transform: rotate(180deg); } /* Abstract body (hidden by default, shown via JS) */ .paper-abstract-body { font-family: Raleway, sans-serif; font-size: 14px; line-height: 1.78; color: #9a96b8; margin: 10px 0 0; padding: 14px 18px; background: rgba(7, 6, 26, 0.6); border-left: 2px solid #3a3460; border-radius: 0 6px 6px 0; } /* ── 17. Citation count badge ────────────────────────────────────────── */ .pub-citation-badge { display: inline-flex; align-items: center; gap: 5px; font-family: Inconsolata, monospace; font-size: 12px; color: #d4b46a; background: rgba(212, 180, 106, 0.07); border: 1px solid rgba(212, 180, 106, 0.2); border-radius: 20px; padding: 2px 9px; letter-spacing: 0.02em; } /* ── BibTeX Cite button ──────────────────────────────────────────────── */ .paper-cite-btn { background: transparent; border: 1px solid #2a2545; border-radius: 6px; color: #7a76a0; font-family: Raleway, sans-serif; font-size: 13px; letter-spacing: 0.03em; padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .paper-cite-btn:hover { border-color: #c4a8e8; color: #c4a8e8; background-color: rgba(196, 168, 232, 0.05); } /* ── 4. Prev / Next blog post navigation ─────────────────────────────── */ .post-nav-section-label { display: flex; align-items: center; gap: 8px; font-family: Raleway, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6a6690; margin: 36px 0 10px; } .post-nav { display: flex; gap: 12px; margin: 36px 0 0; } .post-nav-section-label + .post-nav { margin-top: 0; } .post-nav-link { flex: 1; background: #0f0e1f; border: 1px solid #2a2545; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease; min-width: 0; } .post-nav-link:hover { border-color: #5a4a9a; background-color: #13112a; } .post-nav-link--empty { opacity: 0; pointer-events: none; } .post-nav-prev { align-items: flex-start; } .post-nav-next { align-items: flex-end; text-align: right; } .post-nav-hint { display: flex; align-items: center; gap: 6px; font-family: Raleway, sans-serif; font-size: 11px; color: #6a6690; letter-spacing: 0.06em; text-transform: uppercase; } .post-nav-next .post-nav-hint { flex-direction: row-reverse; } .post-nav-title { font-family: Raleway, sans-serif; font-size: 14px; color: #d8d4e8; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-nav-link:hover .post-nav-title { color: #c4a8e8; } @media (max-width: 600px) { .post-nav { flex-direction: column; } .post-nav-next { align-items: flex-start; text-align: left; } .post-nav-next .post-nav-hint { flex-direction: row; } .post-nav-link--empty { display: none; } }