/* ==========================================================================
   ANI'S TERMINAL — home.css
   Home page sections: hero, work & creation grid, transmission box,
   about-me overlay. Home page only.
   ========================================================================== */

html,
body {
  height: 100%;
}

#home {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

/* content eases in as the curtains open */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}

body.home-in .reveal {
  opacity: 1;
  transform: none;
}

body.home-in .reveal:nth-of-type(2) {
  transition-delay: .12s;
}

/* ==========================================================================
   HERO
   ========================================================================== */
main.hero {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 80px);
  padding: 48px clamp(20px, 8vw, 96px);
}

.hero-text {
  flex: 1;
  min-width: 0;
}

/* ---- the photo, framed like a terminal image viewer ---- */
.hero-photo {
  flex-shrink: 0;
  width: min(320px, 30vw);
  /* keep it off the hard right edge on wide windows */
  margin-right: clamp(0px, 8vw, 150px);
  border: 2px solid var(--ink);
  background: #fff8ef;
  box-shadow: 8px 8px 0 rgba(20, 18, 16, .85);
  transform: rotate(2deg);
  transition: transform .3s ease, box-shadow .3s ease;
}

.hero-photo:hover {
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 12px 12px 0 rgba(20, 18, 16, .85);
}

.hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-bottom: 2px solid var(--ink);
  filter: saturate(.92) sepia(.06); /* warms the shot toward the cream palette */
}

.hero-photo figcaption {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

h1 {
  font-size: clamp(38px, 8vw, 84px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  max-width: 14ch;
}

h1 .cursor {
  background: var(--ink);
  width: .5em;
  height: .95em;
}

.sub {
  margin-top: 22px;
  font-size: clamp(14px, 2vw, 17px);
  color: var(--ink-soft);
  max-width: 52ch;
  line-height: 1.7;
}

/* the statement that hands the page over to the works section */
.work-tease {
  display: inline-block;
  width: fit-content;
  margin-top: 46px;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 5px;
  transition: color .2s ease, transform .25s ease;
}

.work-tease::before {
  content: '> ';
  color: var(--accent);
}

.work-tease:hover {
  color: var(--accent);
  transform: translateX(8px);
}

.work-tease .arrow {
  display: inline-block;
  animation: bob 1.6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ==========================================================================
   WORK & CREATION
   ========================================================================== */
section.works {
  padding: 72px clamp(20px, 8vw, 96px) 110px;
  border-top: 2px dashed rgba(20, 18, 16, .35);
}

section.works h2,
section.transmit h2 {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: .18em;
  margin: 14px 0 30px;
}

/* the stage holds the DNA backdrop with the folder stack nested in its fork;
   it centers itself in the window while the section title stays left */
.works-stage {
  position: relative;
  margin: 44px auto 0;
  width: min(96vw, 1250px);
}

.works-stage .dna {
  display: none; /* shown on wide screens only */
}

.work-card {
  position: relative;
  display: block;
  width: 100%;
  border: 2px solid var(--ink);
  background: #f2dfc6; /* a touch more shade than the cream */
  box-shadow: 6px 6px 0 rgba(20, 18, 16, .85);
  padding: 26px 28px 24px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* narrow screens: a plain stack (the DNA backdrop is hidden) */
.work-card + .work-card {
  margin-top: 20px;
}

/* wide screens: the folder stack nests inside the fork of the strands */
@media (min-width: 821px) {
  /* trim the artwork's transparent top/bottom padding so the title sits
     close and the next section starts right where the helix ends */
  .works-stage {
    aspect-ratio: 1 / 1;
    margin-top: max(-84px, -6.5vw);
    margin-bottom: max(-225px, -17.3vw);
  }

  section.works {
    padding-bottom: 28px;
  }

  section.works h2 {
    margin-top: 26px; /* the title rides a little lower */
  }

  .works-stage .dna {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transform: translateX(-4%); /* strands sit a touch left so the boxes clear them */
  }

  .work-card {
    position: absolute;
    width: 28%;
  }

  .work-card + .work-card {
    margin-top: 0;
  }

  /* an orderly cascade: even 10% steps down, alternating symmetrically
     around the centre (36%) with the swing tightening as the fork narrows,
     funnelling into the throat of the helix */
  .work-card:nth-of-type(1) { top: 14%; left: 26%; }
  .work-card:nth-of-type(2) { top: 21%; left: 46%; }
  .work-card:nth-of-type(3) { top: 28%; left: 25%; }
  .work-card:nth-of-type(4) { top: 35%; left: 43%; }
  .work-card:nth-of-type(5) { top: 45%; left: 36%; }
}

.work-card .idx {
  display: block;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.work-card h3 {
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 800;
  letter-spacing: .1em;
}

.work-card .open {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-soft);
}

.work-card:hover,
.work-card:focus-visible {
  background: var(--hover, #bfe3ff);
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 rgba(20, 18, 16, .85);
  outline: none;
  z-index: 5; /* the hovered card rises above its neighbours */
}

/* each box turns its own colour */
.work-card.c-blue   { --hover: #b8e2ff; }
.work-card.c-green  { --hover: #c4f0c9; }
.work-card.c-pink   { --hover: #ffd3e0; }
.work-card.c-yellow { --hover: #fff0ae; }
.work-card.c-purple { --hover: #e2d4ff; }

/* ==========================================================================
   SEND YOUR TRANSMISSION
   ========================================================================== */
section.transmit {
  padding: 72px clamp(20px, 8vw, 96px) 110px;
  border-top: 2px dashed rgba(20, 18, 16, .35);
}

.transmit-box {
  max-width: 680px;
  border: 2px solid var(--ink);
  background: #fff8ef;
  box-shadow: 6px 6px 0 rgba(20, 18, 16, .85);
}

.transmit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.transmit-head .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cream);
  opacity: .5;
}

.transmit-head .dot:first-child {
  background: var(--accent);
  opacity: 1;
}

.transmit-head span.title {
  margin-left: 8px;
}

.transmit-body {
  display: flex;
  align-items: stretch;
}

#msgBox {
  flex: 1;
  min-height: 140px;
  padding: 16px 18px;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

#msgBox::placeholder {
  color: rgba(74, 66, 58, .55);
}

#sendBtn {
  width: 68px;
  border: none;
  border-left: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font-size: 26px;
  cursor: pointer;
  transition: background .2s ease;
  font-family: inherit;
}

#sendBtn:hover {
  background: var(--accent);
}

#sendBtn:active {
  transform: translateX(2px);
}

.transmit-note {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

/* ==========================================================================
   ABOUT ME OVERLAY
   ========================================================================== */
.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(10, 10, 10, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.about-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.about-box {
  width: min(680px, 100%);
  background: #eed4ae; /* the big box, a little darker */
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(20, 18, 16, .85);
  transform: translateY(20px) scale(.97);
  transition: transform .3s ease;
}

.about-overlay.show .about-box {
  transform: none;
}

.about-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--cream);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
}

.about-close:hover {
  color: var(--accent);
}

.about-body {
  padding: 32px 34px 40px;
}

.about-body h3 {
  font-size: clamp(24px, 4.5vw, 36px);
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 18px;
}

.about-body .cursor {
  background: var(--ink);
  width: .5em;
  height: .9em;
}

.about-body p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* ==========================================================================
   SMALL SCREENS
   ========================================================================== */
@media (max-width: 820px) {
  main.hero {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .hero-photo {
    width: min(320px, 82vw);
    align-self: center;
    margin-right: 0;
  }
}

@media (max-width: 560px) {
  .transmit-body {
    flex-direction: column;
  }

  #sendBtn {
    width: 100%;
    height: 52px;
    border-left: none;
    border-top: 2px solid var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}