/* style.css */

/* 1. Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Rajdhani:wght@300;400;500;600;700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Sixtyfour&display=swap');

* {
  box-sizing: border-box;
}

body {
    min-height: 100vh;
    background: linear-gradient(
        to bottom,
        #00338eff,
        #8b1fa2ff,
        #ff10b4ff
    );
    background-attachment: fixed;
    margin: 0;
    position: relative;
    overflow-x: hidden;
}

.website-body {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  margin: auto;
  align-items: center;
  gap: 40px;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding-top: 40px;
  padding-bottom: 260px; /* keeps content clear of the taller grid floor */
}

/* ============ PROFILE HEADER ============ */

.circular-frame {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #FF00C9;
  flex-shrink: 0;
}

.circular-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f39d46, #FF00C9 60%, #1feaf6);
  color: #121240;
  font-family: "Orbitron", sans-serif;
  font-weight: 900;
  font-size: 2em;
}

.profile-container {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
}

.name-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.button-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.nav-button-1,
.nav-button-2 {
  color: #ede74d;
  background-color: transparent;
  padding: 5px 15px;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-button-1 {
  border: 4px solid #f39d46;
  box-shadow: 0 0 10px rgba(243, 157, 70, 0.35), inset 0 0 8px rgba(243, 157, 70, 0.15);
}
.nav-button-2 {
  border: 4px solid #1feaf6;
  box-shadow: 0 0 10px rgba(31, 234, 246, 0.35), inset 0 0 8px rgba(31, 234, 246, 0.15);
}

.nav-button-1:hover { background-color: #f39d46; color: #121240; box-shadow: 0 0 20px #f39d46; }
.nav-button-2:hover { background-color: #1feaf6; color: #121240; box-shadow: 0 0 20px #1feaf6; }

/* ============ MAIN PANEL ============ */

.main-panel {
  width: 100%;
  background-color: #1a1d33;
  border: 4px solid #1feaf6;
  box-shadow: 0 0 25px rgba(31, 234, 246, 0.2);
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.panel-row {
  display: flex;
  gap: 25px;
  align-items: stretch;
}

.panel-row > * {
  flex: 1;
  min-width: 0;
}

/* ---- Bio box ---- */

.bio-box {
  background-color: #5c3ebd;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.bio-title {
  margin: 0 0 10px 0;
}

.bio-text {
  color: #89fd54;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1.4;
  margin: 0;
}

/* ---- Connect box ---- */

.work-box {
  background-color: #29325f;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.work-title {
  margin: 0;
}

.social-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: auto; /* pushes the icons to the bottom of .bio-box, however tall it is */
  padding-top: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.social-icon img {
  width: 22px;
  height: 22px;
  filter: brightness(0);
}

.social-icon:hover {
  transform: scale(1.1);
}

.icon-pink { background-color: #FF00C9; color: #121240; box-shadow: 0 0 12px rgba(255, 0, 201, 0.6); }
.icon-cyan { background-color: #1feaf6; color: #121240; box-shadow: 0 0 12px rgba(31, 234, 246, 0.6); }

/* ---- Work accordion ---- */

.work-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.work-item {
  background: repeating-linear-gradient(
    45deg,
    #1a1d33,
    #1a1d33 10px,
    #22264a 10px,
    #22264a 20px
  );
  border: 2px dashed #1feaf6;
}

.work-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  margin: 0;
  padding: 14px 16px;
  color: #1feaf6;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0.5px;
  text-align: left;
  cursor: pointer;
}

.work-caret {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.work-item.is-open .work-caret {
  transform: rotate(180deg);
}

.work-content {
  overflow: hidden;
  max-height: 0;
  padding: 0 16px;
  color: #d7d9ee;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 0.95em;
  line-height: 1.4;
  transition: max-height 0.3s ease, padding-bottom 0.3s ease;
}

.work-content p {
  margin: 0 0 10px 0;
}

.work-content p:last-child {
  margin-bottom: 0;
}

.work-item.is-open .work-content {
  max-height: 600px; /* comfortably larger than any expected entry */
  padding-bottom: 16px;
}

/* ---- Datapackets terminal ---- */

.datapackets-box {
  background-color: #0d0f1c;
  border: 2px solid #89fd54;
  padding: 20px;
}

.datapackets-title {
  margin: 0 0 10px 0;
}

.terminal {
  font-family: 'Courier Prime', monospace;
  font-size: 1em;
  color: #89fd54;
  line-height: 1.7;
}

.terminal p {
  margin: 0;
}

/* Browsers apply their own font-family/margin to <pre> by default, which
   overrides what it would otherwise inherit from .terminal — this pulls
   the ASCII art back in line with the rest of the log. */
.terminal pre {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: 1.1;
  margin: 10px 0;
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Standalone cursor line sitting directly in .datapackets-box, after the
   featured post — keeps the terminal font/color/animation without needing
   to be wrapped in another .terminal block. */
p.terminal.cursor {
  margin: 15px 0 10px 0;
}

/* ---- Featured post ---- */
/* Used on its own (e.g. a future standalone announcement) it gets the red
   accent card treatment below. Nested inside .datapackets-box (the merged
   "latest datapackets + latest update" block) it instead reads as the next
   entry in the terminal readout — see override beneath. */

.featured-post {
  background-color: #1a1d33;
  padding: 20px;
  border-left: 4px solid #ff3b3b;
}

.datapackets-box .featured-post {
  background-color: transparent;
  border-left: none;
  border-top: 2px dashed #89fd54;
  padding: 0 0 0 0;
  margin-top: 15px;
  position: relative;
}

.post-text {
  color: #d7d9ee;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 1.1em;
  line-height: 1.4;
  margin: 0;
}

.shoutout-link {
  color: #ede74d;
  font-weight: 700;
  text-decoration: underline;
}

.shoutout-link:hover {
  color: #89fd54;
}

/* ---- Footer ---- */

.site-footer {
  color: #6d72a8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9em;
  text-align: center;
}

/* ============ TOP NAV (gallery + other pages) ============ */

html {
  scroll-behavior: smooth;
}

.top-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  max-width: 100%;
  margin: 0;
  padding: 18px 40px;
  background: rgba(18, 18, 64, 0.85);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid #1feaf6;
}

.page-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  scroll-margin-top: 90px; /* keeps section headings clear of the sticky nav when jumping via anchor link */
}

.top-nav .brand {
  color: #e8eff5;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.3em;
  letter-spacing: 1px;
}

.top-nav .button-row {
  gap: 14px;
}

.top-nav .nav-button-1,
.top-nav .nav-button-2 {
  font-size: 0.95em;
  padding: 6px 14px;
}

.nav-current {
  background-color: #ede74d;
  color: #121240 !important;
  border-color: #ede74d !important;
}

/* ============ HERO (gallery homepage) ============ */

.hero-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-tagline {
  color: #89fd54;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 1.2em;
  letter-spacing: 1px;
  margin: 0;
}

/* ============ GALLERY GRID ============ */

/* Breaks the gallery section out of .website-body's 70%-width column so
   the grid can center itself across the full screen instead of being
   squeezed into the same narrow column as the bio/work panels. */
#gallery.page-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 60px;
}

.gallery-grid {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.art-card {
  background-color: #1a1d33;
  border: 3px solid #1feaf6;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.art-card:nth-child(3n+2) { border-color: #FF00C9; }
.art-card:nth-child(3n)   { border-color: #ede74d; }

.art-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(31, 234, 246, 0.25);
}

.art-thumb {
  aspect-ratio: 1 / 1;
  background: repeating-linear-gradient(
    45deg,
    #1a1d33,
    #1a1d33 10px,
    #22264a 10px,
    #22264a 20px
  );
  border-bottom: 3px solid inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d72a8;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.9em;
  text-align: center;
  padding: 10px;
}

.art-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.art-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.art-title {
  color: #e8eff5;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1em;
}

.art-tag {
  color: #89fd54;
  font-family: 'Sixtyfour', monospace;
  font-size: 0.65em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.gallery-empty {
  color: #6d72a8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1em;
  text-align: center;
  grid-column: 1 / -1;
  padding: 40px 0;
}

/* ============ COMMISSIONS PAGE ============ */

/* ---- Commissions panel ---- */
/* Same look as .featured-post but without the red accent border — on the
   commissions page this box wraps the whole page's content rather than
   flagging a single blog post. */
.comm-panel {
  background-color: #1a1d33;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ---- Commission sheet image ---- */
.comm-sheet-link {
  display: block;
  align-self: center;
  width: 100%;
  max-width: 500px;
}

.comm-sheet-img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid #1feaf6;
  box-shadow: 0 0 15px rgba(31, 234, 246, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comm-sheet-img:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(31, 234, 246, 0.55);
}

/* ---- Commission examples grid ---- */
.comm-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* ============ GRID FLOOR ============ */

/* ============ HORIZON (sun / skyline / palms) ============ */
/* Stacking order, back to front: (1) body's gradient, painted beneath
   everything with no z-index needed, (2) .horizon, (3) .grid-floor,
   (4) .website-body content. */

.horizon {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image: url('horizon.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  opacity: 0.85;
}

/* ============ GRID FLOOR ============ */

.grid-floor {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 46vh; /* taller than before so the grid reads as a proper floor */
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to top, rgba(74,0,74,0.7) 0%, transparent 85%);
  /* the fade-to-horizon mask lives on this static parent, not on the
     animated ::before below — masking a moving element recalculates
     every frame and is what caused the flicker */
  -webkit-mask-image: linear-gradient(to top, black 40%, transparent 88%);
  mask-image: linear-gradient(to top, black 40%, transparent 88%);
}

.grid-floor::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 300%; /* extra-wide so perspective foreshortening never exposes the edges */
  height: 220%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,0,201,0.75) 0 5px, transparent 5px 80px),
    repeating-linear-gradient(90deg, rgba(255,0,201,0.75) 0 5px, transparent 5px 80px);
  transform: perspective(500px) rotateX(65deg) translateZ(0) translateY(0);
  transform-origin: bottom;
  animation: grid-scroll 2s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes grid-scroll {
  from { transform: perspective(500px) rotateX(65deg) translateZ(0) translateY(0); }
  to   { transform: perspective(500px) rotateX(65deg) translateZ(0) translateY(80px); }
}

/* Text styling */
h1 {
    color: #e8eff5;
    text-align: center;
    font-size: 250%;
    padding-top: 25px;
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    background-image: linear-gradient(
        to bottom,
        #29325f 65%,
        #e8eff5
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px #e8eff5;
}

h2 {
    color: #00F3FF;
    text-align: center;
    font-size: 250%;
    font-family: "Rajdhani", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
    text-shadow: 2px 2px 0px #FF00C9,
                 0 0 10px #00F3FF,
                 0 0 24px rgba(0, 243, 255, 0.6);
    margin: 0;
}

h3 {
    color: #ede74d;
    text-align: left;
    font-size: 175%;
    font-family: "Rajdhani", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

h4 {
    color: #89fd54;
    text-align: left;
    font-size: 150%;
    font-family: "Rajdhani", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 800px) {
  .website-body {
    max-width: 90%;
  }

  .panel-row {
    flex-direction: column;
  }

  .profile-container {
    flex-direction: column;
    text-align: center;
  }

  #gallery.page-section {
    padding: 0 20px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  h1 {
    font-size: 180%;
  }

  h2 {
    font-size: 180%;
  }
}

@media (max-width: 500px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}