@font-face{font-family:'QEDonaldross';src:url('fonts/QEDonaldross.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'HelveticaBold';src:url('fonts/Helvetica-Bold.ttf') format('truetype');font-weight:bold;font-style:normal;font-display:swap}

:root{--bg:#ffffff;--text:#1a1a1a;--text-secondary:#555;--nav-bg:rgba(255,255,255,0.88);--nav-border:rgba(0,0,0,0.08);--folder-body:#c8c8c8;--folder-tab:#b0b0b0;--folder-front:#d8d8d8;--folder-hover-body:#00a832;--folder-hover-tab:#008a28;--folder-hover-front:#00c040;--folder-active-body:#00a832;--folder-active-tab:#008a28;--folder-active-front:#00c040;--project-bg:rgba(255,255,255,0.75);--toggle-bg:rgba(0,0,0,0.08);--toggle-hover:rgba(0,0,0,0.15);--link-color:#1a1a1a;--transition-speed:0.3s;--ascii-color-r:0;--ascii-color-g:180;--ascii-color-b:60;--overlay-bg:rgba(0,0,0,0.5);--dashboard-bg:rgba(220,255,230,0.95);--dashboard-text:#1a1a1a;--dashboard-border:rgba(0,140,40,0.15);--dashboard-header-bg:rgba(200,245,215,0.9);--popup-bg:#ffffff;--popup-text:#1a1a1a;--popup-shadow:rgba(0,0,0,0.15);--copy-btn-bg:rgba(0,0,0,0.06);--copy-btn-hover:rgba(0,0,0,0.12);--play-btn-color:#00a832;--highlight-color:#00a832;--cursor-color:#00a832;--marquee-color:#00a832;--bottom-bar-bg:rgba(255,255,255,0.88);--bottom-bar-border:rgba(0,0,0,0.08)}

body.dark-mode{--bg:#0a0a0a;--text:#e8e8e8;--text-secondary:#aaa;--nav-bg:rgba(10,10,10,0.88);--nav-border:rgba(255,255,255,0.08);--folder-body:#333;--folder-tab:#2a2a2a;--folder-front:#3d3d3d;--folder-hover-body:#cc2222;--folder-hover-tab:#aa1c1c;--folder-hover-front:#dd3333;--folder-active-body:#cc2222;--folder-active-tab:#aa1c1c;--folder-active-front:#dd3333;--project-bg:rgba(20,20,20,0.75);--toggle-bg:rgba(255,255,255,0.1);--toggle-hover:rgba(255,255,255,0.2);--link-color:#e8e8e8;--ascii-color-r:204;--ascii-color-g:34;--ascii-color-b:34;--overlay-bg:rgba(0,0,0,0.7);--dashboard-bg:rgba(50,15,15,0.95);--dashboard-text:#e8e8e8;--dashboard-border:rgba(200,40,40,0.2);--dashboard-header-bg:rgba(60,18,18,0.9);--popup-bg:#ffffff;--popup-text:#1a1a1a;--popup-shadow:rgba(0,0,0,0.4);--copy-btn-bg:rgba(0,0,0,0.06);--copy-btn-hover:rgba(0,0,0,0.12);--play-btn-color:#cc2222;--highlight-color:#cc2222;--cursor-color:#cc2222;--marquee-color:#cc2222;--bottom-bar-bg:rgba(10,10,10,0.88);--bottom-bar-border:rgba(255,255,255,0.08)}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}

body{font-family:'QEDonaldross',Georgia,serif;background-color:var(--bg);color:var(--text);line-height:1.7;transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease;overflow-x:hidden;cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M0,0 L0,16 L4,12 L8,18 L10,17 L6,11 L12,11 Z" fill="%2300a832" stroke="%23006620" stroke-width="0.5"/></svg>') 0 0, auto}
body.overlay-open{overflow:hidden}

/* ================================ */
/* CUSTOM CURSOR COLORS             */
/* ================================ */
body.dark-mode{
  cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M0,0 L0,16 L4,12 L8,18 L10,17 L6,11 L12,11 Z" fill="%23cc2222" stroke="%23881111" stroke-width="0.5"/></svg>') 0 0, auto;
}

a, button, [role="button"], .folder-icon, .video-play-btn,
.contact-link, .email-copy-btn, .dashboard-close, #dark-toggle,
.bottom-bar-right, .nav-logo{
  cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M6,0 L6,10 L8,8 L11,14 L13,13 L10,7 L13,7 Z" fill="%2300a832" stroke="%23006620" stroke-width="0.5"/></svg>') 6 0, pointer;
}

body.dark-mode a, body.dark-mode button, body.dark-mode [role="button"],
body.dark-mode .folder-icon, body.dark-mode .video-play-btn,
body.dark-mode .contact-link, body.dark-mode .email-copy-btn,
body.dark-mode .dashboard-close, body.dark-mode #dark-toggle,
body.dark-mode .bottom-bar-right, body.dark-mode .nav-logo{
  cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M6,0 L6,10 L8,8 L11,14 L13,13 L10,7 L13,7 Z" fill="%23cc2222" stroke="%23881111" stroke-width="0.5"/></svg>') 6 0, pointer;
}

/* ================================ */
/* ASCII BACKGROUND CANVAS          */
/* ================================ */
#ascii-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}

/* ================================ */
/* TOP NAVIGATION                   */
/* ================================ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px 24px;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--nav-border);transition:background var(--transition-speed) ease,border-color var(--transition-speed) ease}
.nav-links{display:flex;gap:48px}
.nav-link{font-family:'QEDonaldross',Georgia,serif;font-size:1.35rem;text-decoration:none;color:var(--text);position:relative;transition:color var(--transition-speed) ease;letter-spacing:0.5px}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--text);transition:width 0.3s ease}
.nav-link:hover::after{width:100%}

.nav-logo{position:absolute;left:24px;top:50%;transform:translateY(-50%);text-decoration:none;display:flex;align-items:center}
.nav-logo-img{width:36px;height:36px;border-radius:50%;object-fit:cover;transition:transform 0.2s ease}
.nav-logo-img:hover{transform:scale(1.08)}

#dark-toggle{position:absolute;right:24px;top:50%;transform:translateY(-50%);background:var(--toggle-bg);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--text);transition:background var(--transition-speed) ease,color var(--transition-speed) ease}
#dark-toggle:hover{background:var(--toggle-hover)}

.icon-sun{display:block}
.icon-moon{display:none}
body.dark-mode .icon-sun{display:none}
body.dark-mode .icon-moon{display:block}

/* ================================ */
/* BOTTOM BAR — 3-column grid       */
/* ================================ */
#bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:10px 24px;gap:0;background:var(--bottom-bar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--bottom-bar-border);transition:background var(--transition-speed) ease,border-color var(--transition-speed) ease}

.bottom-bar-left{font-family:'QEDonaldross',Georgia,serif;font-size:1.275rem;color:var(--text);letter-spacing:0.3px;white-space:nowrap;justify-self:start;position:relative;z-index:2}

.bottom-bar-center{
  overflow:hidden;
  position:relative;
  height:20px;
  width:100%;
  min-width:0;
  margin:0 20px;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);
}

.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 20s linear infinite;
  will-change:transform;
}

@keyframes marquee-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.marquee-text{
  font-family:Helvetica,Arial,sans-serif;
  font-size:0.85rem;
  font-weight:600;
  color:var(--marquee-color);
  white-space:nowrap;
  letter-spacing:1.5px;
  text-transform:uppercase;
  transition:color var(--transition-speed) ease;
  display:inline-block;
  padding-right:80px;
}

.bottom-bar-right{
  justify-self:end;
  flex-shrink:0;
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--text);
  transition:color var(--transition-speed) ease,transform 0.2s ease;
  position:relative;
  z-index:2;
  min-width:24px;
  min-height:24px;
}
.bottom-bar-right:hover{transform:scale(1.1)}

.bottom-bar-right svg{
  display:block;
  flex-shrink:0;
}

/* ================================ */
/* WELCOME TOAST POPUP — full overlay */
/* ================================ */
.welcome-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:opacity 0.5s ease,visibility 0.5s ease;pointer-events:none}
.welcome-overlay.show{opacity:1;visibility:visible;pointer-events:all}
.welcome-overlay.hide{opacity:0;visibility:hidden;pointer-events:none}

.welcome-toast{background:var(--popup-bg);color:var(--popup-text);font-family:Helvetica,Arial,sans-serif;font-size:1.4rem;padding:40px 60px;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,0.3);transform:scale(0.8);transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);text-align:center;line-height:1.7;letter-spacing:0.4px;border:1px solid var(--nav-border);max-width:600px;width:90vw}
.welcome-overlay.show .welcome-toast{transform:scale(1)}
.welcome-overlay.hide .welcome-toast{transform:scale(0.85)}

/* ================================ */
/* MAIN CONTENT                     */
/* ================================ */
main{position:relative;z-index:1}

/* ================================ */
/* SECTIONS                         */
/* ================================ */
section{min-height:auto;display:flex;align-items:flex-start;justify-content:center;padding:80px 24px 40px}
section#about{padding-top:110px}
section#contact{padding-bottom:80px}

.section-inner{width:100%;max-width:900px;padding-left:24px;padding-right:24px}

/* ================================ */
/* SECTION HEADINGS & DESCRIPTIONS  */
/* ================================ */
.section-heading{font-family:'QEDonaldross',Georgia,serif;font-size:2.8rem;font-weight:normal;margin-bottom:28px;letter-spacing:-0.5px}
.section-desc{font-family:Helvetica,Arial,sans-serif;font-size:1.05rem;color:var(--text-secondary);line-height:1.8;transition:color var(--transition-speed) ease;margin-bottom:44px}

/* ================================ */
/* HIGHLIGHTED TEXT                  */
/* ================================ */
.highlight{color:var(--highlight-color);font-weight:600;transition:color var(--transition-speed) ease}

/* ================================ */
/* WORK SECTION                     */
/* ================================ */
.folders{display:flex;gap:48px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}
.folder{display:flex;flex-direction:column;align-items:center}
.folder-icon{display:flex;flex-direction:column;align-items:center;outline:none;transition:transform 0.25s ease}
.folder-icon:hover{transform:scale(1.06) translateY(-3px)}
.folder-icon:focus-visible{outline:2px solid var(--text);outline-offset:8px;border-radius:4px}
.folder-svg{transition:all var(--transition-speed) ease}
.folder-tab{fill:var(--folder-tab);transition:fill var(--transition-speed) ease}
.folder-body{fill:var(--folder-body);transition:fill var(--transition-speed) ease}
.folder-front{fill:var(--folder-front);transition:fill var(--transition-speed) ease}
.folder-icon:hover .folder-tab{fill:var(--folder-hover-tab)}
.folder-icon:hover .folder-body{fill:var(--folder-hover-body)}
.folder-icon:hover .folder-front{fill:var(--folder-hover-front)}
.folder.active .folder-tab{fill:var(--folder-active-tab)}
.folder.active .folder-body{fill:var(--folder-active-body)}
.folder.active .folder-front{fill:var(--folder-active-front)}
.folder-label{font-family:'QEDonaldross',Georgia,serif;font-size:1.15rem;margin-top:10px;color:var(--text-secondary);transition:color var(--transition-speed) ease}

/* ================================ */
/* CONTACT SECTION                  */
/* ================================ */
.contact-icons{display:flex;gap:56px;flex-wrap:wrap}
.contact-link{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--link-color);transition:color var(--transition-speed) ease,transform 0.2s ease}
.contact-link:hover{transform:translateY(-3px)}
.contact-link span{font-family:'QEDonaldross',Georgia,serif;font-size:1.15rem;color:var(--text-secondary);transition:color var(--transition-speed) ease}
.contact-btn{background:none;border:none;padding:0;font:inherit}

/* ================================ */
/* EMAIL POPUP OVERLAY              */
/* ================================ */
.email-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--overlay-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}
.email-overlay.active{opacity:1;visibility:visible}
.email-popup{background:var(--popup-bg);border-radius:16px;padding:36px 48px;display:flex;align-items:center;gap:24px;box-shadow:0 20px 60px var(--popup-shadow);transform:scale(0.9);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);max-width:90vw}
.email-overlay.active .email-popup{transform:scale(1)}
.email-address{font-family:Helvetica,Arial,sans-serif;font-size:1.2rem;color:var(--popup-text);letter-spacing:0.3px;user-select:all;white-space:nowrap}
.email-copy-btn{display:flex;align-items:center;gap:6px;background:var(--copy-btn-bg);border:none;border-radius:8px;padding:8px 14px;color:var(--popup-text);transition:background 0.2s ease,transform 0.15s ease;flex-shrink:0}
.email-copy-btn:hover{background:var(--copy-btn-hover);transform:scale(1.05)}
.email-copy-btn:active{transform:scale(0.95)}
.copy-label{font-family:Helvetica,Arial,sans-serif;font-size:0.85rem;color:var(--popup-text)}
.email-copy-btn.copied .copy-label{color:#22a855}

/* ================================ */
/* VIDEO PLAYER OVERLAY             */
/* ================================ */
.video-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity 0.35s ease,visibility 0.35s ease}
.video-overlay.active{opacity:1;visibility:visible}
.video-overlay-content{max-width:80vw;max-height:80vh;border-radius:12px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.5);transform:scale(0.9);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.video-overlay.active .video-overlay-content{transform:scale(1)}
.video-overlay-content video{width:100%;height:auto;display:block;max-height:80vh;object-fit:contain}

/* ================================ */
/* FOLDER DASHBOARD OVERLAY         */
/* ================================ */
.dashboard-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:500;display:flex;align-items:center;justify-content:center;background:var(--overlay-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity 0.35s ease,visibility 0.35s ease}
.dashboard-overlay.active{opacity:1;visibility:visible}
.dashboard-panel{background:var(--dashboard-bg);color:var(--dashboard-text);border-radius:20px;width:92vw;max-width:960px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.2);transform:translateY(30px) scale(0.95);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s ease,background var(--transition-speed) ease}
.dashboard-overlay.active .dashboard-panel{transform:translateY(0) scale(1)}
.dashboard-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;border-bottom:1px solid var(--dashboard-border);flex-shrink:0;background:var(--dashboard-header-bg);transition:background var(--transition-speed) ease}
.dashboard-title{font-family:'QEDonaldross',Georgia,serif;font-size:1.6rem;font-weight:normal;letter-spacing:-0.3px}
.dashboard-close{background:none;border:none;color:var(--dashboard-text);padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background 0.2s ease,transform 0.15s ease}
.dashboard-close:hover{background:var(--toggle-bg);transform:scale(1.1)}
.dashboard-content{flex:1;overflow-y:auto;padding:32px;-webkit-overflow-scrolling:touch}
.dashboard-content::-webkit-scrollbar{width:6px}
.dashboard-content::-webkit-scrollbar-track{background:transparent}
.dashboard-content::-webkit-scrollbar-thumb{background:var(--dashboard-border);border-radius:3px}
.dashboard-section{display:none}
.dashboard-section.active{display:block}

.dashboard-content .project{display:flex;gap:32px;margin-bottom:32px;padding:24px;background:var(--project-bg);border-radius:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background var(--transition-speed) ease}
.dashboard-content .project-media{flex:0 0 40%;max-width:40%}
.dashboard-content .project-media img,.dashboard-content .project-media video{width:100%;height:auto;border-radius:8px;display:block}
.dashboard-content .project-desc{flex:1;display:flex;align-items:center}
.dashboard-content .project-desc p{font-family:Helvetica,Arial,sans-serif;font-size:1rem;color:var(--text-secondary);line-height:1.8}

/* ================================ */
/* CUSTOM VIDEO THUMBNAIL           */
/* ================================ */
.video-thumb{position:relative;border-radius:8px;overflow:hidden;width:100%}
.video-thumb video{width:100%;height:auto;display:block;border-radius:8px}
.video-play-btn{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2;transition:opacity 0.3s ease}
.video-play-btn svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3));transition:transform 0.2s ease}
.video-play-btn:hover svg{transform:scale(1.1)}
.play-triangle{fill:var(--play-btn-color);transition:fill var(--transition-speed) ease}

/* ================================ */
/* RESPONSIVE                       */
/* ================================ */
@media(max-width:768px){
  .nav-links{gap:28px}
  .nav-link{font-size:1.15rem}
  .nav-logo{left:16px}
  .nav-logo-img{width:30px;height:30px}
  section{padding:60px 20px 32px}
  section#about{padding-top:90px}
  section#contact{padding-bottom:70px}
  .section-heading{font-size:2.2rem}
  .section-desc{font-size:0.95rem}
  .section-inner{padding-left:16px;padding-right:16px}
  .folders{gap:32px}
  .folder-label{font-size:1.05rem}
  .contact-link span{font-size:1.05rem}

  #bottom-bar{padding:8px 16px}
  .bottom-bar-left{font-size:1.15rem}
  .bottom-bar-center{margin:0 14px}
  .marquee-text{font-size:0.75rem;padding-right:60px}

  .dashboard-panel{width:96vw;max-height:90vh;border-radius:14px}
  .dashboard-header{padding:20px 24px}
  .dashboard-content{padding:24px}
  .dashboard-content .project{flex-direction:column;gap:20px}
  .dashboard-content .project-media{flex:none;max-width:100%}
  .video-overlay-content{max-width:92vw;max-height:70vh}
  .email-popup{padding:28px 32px;flex-direction:column;gap:16px;text-align:center}
  .email-address{font-size:1.05rem;white-space:normal;word-break:break-all}

  .welcome-toast{font-size:1.2rem;padding:32px 44px}
}

@media(max-width:480px){
  #navbar{padding:12px 16px}
  .nav-links{gap:20px}
  .nav-link{font-size:1rem}
  #dark-toggle{right:12px;width:34px;height:34px}
  .nav-logo{left:12px}
  .nav-logo-img{width:28px;height:28px}
  section{padding:48px 16px 24px}
  section#about{padding-top:80px}
  section#contact{padding-bottom:64px}
  .section-heading{font-size:1.8rem;margin-bottom:20px}
  .section-desc{font-size:0.9rem;margin-bottom:28px}
  .section-inner{padding-left:12px;padding-right:12px}
  .folders{gap:24px}
  .folder-svg{width:60px;height:48px}
  .folder-label{font-size:0.95rem}
  .contact-icons{gap:36px}
  .contact-link span{font-size:0.95rem}

  #bottom-bar{padding:6px 12px}
  .bottom-bar-left{font-size:1.1rem}
  .bottom-bar-center{margin:0 10px}
  .marquee-text{font-size:0.7rem;letter-spacing:1px;padding-right:50px}
  .bottom-bar-right svg{width:20px;height:20px}

  .dashboard-panel{width:100vw;max-height:100vh;border-radius:0}
  .dashboard-header{padding:16px 20px}
  .dashboard-title{font-size:1.3rem}
  .dashboard-content{padding:20px}
  .dashboard-content .project{padding:16px;margin-bottom:20px}
  .video-play-btn svg{width:48px;height:48px}
  .video-overlay-content{max-width:96vw;max-height:60vh;border-radius:8px}
  .email-popup{padding:24px 20px;gap:14px;border-radius:12px}
  .email-address{font-size:0.95rem}

  .welcome-toast{font-size:1rem;padding:28px 28px;max-width:85vw}
}