@font-face { font-family: 'Coolvetica'; src: url('Coolvetica Rg.otf') format('opentype'); }

* { margin:0; padding:0; box-sizing:border-box; transition: all 0.4s ease; }

html, body { overflow-x:hidden; width:100%; min-height:100vh; }

body { 
  font-family:'Coolvetica', sans-serif; 
  background:#111; 
  color:#fff; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  line-height:1.5; 
  transition: background 0.4s, color 0.4s; 
}

body.light-mode { 
  background:#fff; 
  color:#000; 
}

/* Logo */
.logo-container { 
  position:relative; 
  width:100%; 
  text-align:center; 
  margin-top:5rem; 
  z-index:5; 
}

.logo-bg { 
  font-size:clamp(6rem,12vw,10rem); 
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%,-50%); 
  white-space:nowrap; 
  z-index:1; 
  opacity:0; 
  animation: fadeInLogo 1.5s forwards; 
  --target-opacity:0.18; 
}

body.light-mode .logo-bg { --target-opacity:0.05; }

@keyframes fadeInLogo { from { opacity:0; } to { opacity: var(--target-opacity); } }

/* Logo link on section pages */
.logo-container a.logo-main {
  text-decoration: none !important;  /* remove underline */
  color: inherit;                     /* match theme (white/black) */
  font-size: clamp(3rem, 8vw, 4rem);
  font-family: 'Coolvetica', sans-serif;
  position: relative;
  display: inline-block;
  z-index: 2;
}

body.dark-mode .logo-container a.logo-main { color: #fff; }
body.light-mode .logo-container a.logo-main { color: #000; }

.logo-container a.logo-main:hover { color: #ff6a00; }

/* Main logo text for index.html */
.logo-main { 
  font-size:clamp(3rem,8vw,4rem); 
  z-index:2; 
  position:relative; 
  cursor:pointer;
}

/* Master image */
.master-container { 
  position:relative; 
  width:90vw; 
  max-width:1100px; 
  aspect-ratio:16/9; 
  overflow:hidden; 
  margin:2rem 0; 
  border-radius:10px; 
  z-index:2; 
}

.master-container img { 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  border-radius:10px; 
  cursor:pointer; 
}

/* Stars background */
.star-bg { 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  pointer-events:none; 
  z-index:0; 
}

.star { 
  position:absolute; 
  background:#ff6a00; 
  border-radius:50%; 
  animation: twinkle 2s infinite alternate; 
}

@keyframes twinkle { from { opacity:0.3; } to { opacity:1; } }

/* Sections */
section { 
  width:90vw; 
  max-width:1100px; 
  text-align:left; 
  margin:1rem 0; 
  opacity:0; 
  transform:translateY(30px); 
  transition:opacity 0.6s ease, transform 0.6s ease; 
  position:relative; 
  z-index:3; 
  padding-top:1.5rem; 
}

section.visible { opacity:1; transform:translateY(0); }

section h2 { 
  font-size:clamp(1.8rem,5vw,2rem); 
  text-transform:uppercase; 
  letter-spacing:2px; 
  margin-bottom:1rem; 
}

/* Masonry (Pinterest-style) grid container */
.grid-container { 
  column-count: 4;
  column-gap: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}

@media (max-width: 1100px) {
  .grid-container { column-count: 3; }
}
@media (max-width: 800px) {
  .grid-container { column-count: 2; }
}
@media (max-width: 500px) {
  .grid-container { column-count: 1; }
}

.grid-container img { 
  width: 100%; 
  max-width: 100%;    /* Prevent upscaling beyond container */
  height: auto;       /* Maintain aspect ratio */
  margin-bottom: 1rem;
  border-radius: 10px; 
  object-fit: cover; 
  cursor: pointer; 
  transition: transform 0.3s, border 0.3s; 
  display: block;
  border: 2px solid transparent; /* Add default border for transition */
}

.grid-container img:hover { 
  transform: scale(1.05); 
  border: 2px solid #ff6a00; /* Restore orange outline on hover */
}

/* Section buttons */
.section-button { 
  background-color:transparent; 
  border:2px solid #ff6a00; 
  color:#ff6a00; 
  padding:0.75rem 2rem; 
  font-size:1rem; 
  text-transform:uppercase; 
  border-radius:25px; 
  cursor:pointer; 
  transition:0.3s; 
  display:inline-block; 
  margin:1rem auto 0 auto; /* center horizontally */
  text-decoration:none;
  text-align:center;
}

.section-button:hover { 
  background-color:#ff6a00; 
  color:#fff; 
  transform:scale(1.05); 
}

/* Back to top button */
.back-to-top { 
  position:fixed; 
  bottom:2rem; 
  right:2rem; 
  cursor:pointer; 
  width:120px; 
  height:45px; 
  background-color: rgba(0,0,0,0.25); 
  color:#fff; 
  border-radius:25px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-size:1.4rem; 
  transition:0.3s; 
  border:2px solid #fff; 
  z-index:1001; 
  opacity:0; 
}

body.light-mode .back-to-top { 
  background-color:#000; 
  border:none; 
}

.back-to-top:hover { 
  background-color:#ff6a00; 
  transform:scale(1.1); 
}

@media(max-width:600px){ 
  .back-to-top { width:80px; height:35px; font-size:1rem; bottom:1.5rem; right:1.5rem; } 
}

/* Footer */
.footer {
  width:100%;
  display:flex;
  flex-direction:column;
  padding:1rem 2rem;
  font-size:0.8rem;
  color:inherit;
  border-top:2px solid #ff6a00;
  position:relative;
  min-height:100px;
}

/* Bottom-left: "Re:" and toggle stacked */
.footer-left {
  display:flex; 
  flex-direction:column;
  align-items:flex-start;
  gap:0.5rem; 
  font-weight:bold; 
  font-size:1.4rem; 
  position:absolute; 
  bottom:1rem; 
  left:2rem;
}

#mode-toggle { 
  display:inline-block; 
  width:40px; 
  height:20px; 
  border-radius:25px; 
  background:#222; 
  position:relative; 
  cursor:pointer; 
  border:none; 
  transition: background 0.4s; 
}

body.light-mode #mode-toggle { background:#ccc; }

#mode-circle { 
  width:18px; 
  height:18px; 
  border-radius:50%; 
  background:#ff6a00; 
  position:absolute; 
  top:1px; 
  left:1px; 
  transition: left 0.3s ease, background 0.3s ease; 
}

body.light-mode #mode-circle { left:21px; background:#ff6a00; }

/* Footer social icons */
.footer-right { 
  display:flex; 
  justify-content:center; 
  gap:1rem; 
  margin-bottom:0.25rem; 
  flex-wrap:wrap;
}

.footer-right a img { 
  width:24px; 
  height:24px; 
  transition: all 0.3s ease; 
}

.footer-right a:hover img { 
  filter: none; 
  transform: scale(1.2); 
}

/* Footer bottom email and copyright */
.footer-bottom { 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:0.25rem; 
  margin-top:1rem; 
}

.footer-bottom a { 
  color: inherit; 
  text-decoration:none; 
  transition: color 0.4s ease; 
}

/* Top socials */
.top-socials { 
  position:absolute; 
  top:2rem; 
  right:2rem; 
  display:flex; 
  gap:1rem; 
  z-index:10; 
}

.top-socials a img { 
  width:24px; 
  height:24px; 
  transition: all 0.3s ease; 
}

.top-socials a:hover img { 
  filter: none; 
  transform: scale(1.2); 
}

/* Dark/light mode for social icons */
body.light-mode .footer-right a img,
body.light-mode .top-socials a img { filter:none; }

body.dark-mode .footer-right a img,
body.dark-mode .top-socials a img { filter:invert(100%); }

/* Lightbox */
.lightbox {
  display:none; 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.9); 
  z-index:1002;
  justify-content:center; 
  align-items:center;
}

.lightbox img { 
  max-width:90%; 
  max-height:90%; 
  border-radius:10px; 
}

.lightbox .close, .lightbox .prev, .lightbox .next {
  position:absolute; 
  color:#fff; 
  font-size:2rem; 
  cursor:pointer; 
  width:50px;
  height:50px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%; 
  background:rgba(255,106,0,0.5); /* orange with 50% opacity */
  user-select:none;
}

.lightbox .close { top:2%; right:2%; }
.lightbox .prev { top:50%; left:2%; transform:translateY(-50%);}
.lightbox .next { top:50%; right:2%; transform:translateY(-50%);}