/* =========================================================================
   Lusine Tamazyan — Illustrator portfolio
   Faithful static recreation of "Lusine Portfolio.dc.html".
   Base tokens, keyframes and reusable patterns live here; the exact
   per-element look is carried by inline styles in index.html / script.js
   (ported verbatim from the design). Hover states declared in the prototype
   as `style-hover="…"` are re-applied at runtime via [data-hover] (script.js).
   ========================================================================= */

html { scroll-behavior: smooth; }

/* mini-game "+1 / -1" score popups */
@keyframes cg-pop {
  from { transform: translate(-50%, -40%) scale(.8); opacity: 1; }
  to   { transform: translate(-50%, -175%) scale(1.15); opacity: 0; }
}
.cg-pop { animation: cg-pop .75s ease-out forwards; }

/* Print layout: strip the game, its CTAs, the nav rail, and controls. */
@media print {
  a[href="#game"], #game, .side-rail, .no-print { display: none !important; }
  * { animation: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { scroll-behavior: auto; }
  .project-card { break-inside: avoid; }
}
@page { margin: 12mm; }

body {
  margin: 0;
  background-color: #FBF6E9;
  background-image:
    linear-gradient(rgba(134,184,220,.25) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(134,184,220,.25) 1.5px, transparent 1.5px);
  background-size: 27px 27px;
  font-family: 'Baloo 2', sans-serif;
  color: #3E3226;
}

a {
  color: #E8622C;
  text-decoration: underline wavy rgba(232,98,44,.5) 2px;
  text-underline-offset: 4px;
}
a:hover {
  color: #1F8A7D;
  text-decoration-color: rgba(31,138,125,.5);
}

::selection { background: #FFD98A; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-7px) rotate(var(--r, 0deg)); }
}

/* Gentle entrance so the page feels alive, not so much it distracts. */
@keyframes popIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

img { max-width: 100%; }

/* -------------------------------------------------------------------------
   Image frame — the real-artwork counterpart to the prototype's <image-slot>.
   Shows a tidy dashed placeholder until a real image is wired in, then the
   image fills the frame (object-fit: cover). Used for project covers and the
   detail-overlay gallery.
   ------------------------------------------------------------------------- */
.frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(127,127,127,.06);
}
.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame .frame-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 14px;
  box-sizing: border-box;
  color: #B8823A;
  user-select: none;
}
.frame .frame-empty svg { opacity: .5; }
.frame .frame-empty .frame-cap {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  max-width: 90%;
}
.frame .frame-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed currentColor;
  color: #B8823A;
  opacity: .4;
  border-radius: inherit;
}
.frame.is-filled .frame-ring,
.frame.is-filled .frame-empty { display: none; }

/* -------------------------------------------------------------------------
   Project detail overlay
   ------------------------------------------------------------------------- */
#overlay { display: none; }
#overlay.open { display: block; }
body.no-scroll { overflow: hidden; }

.gal-cell:focus-visible { outline: 3px solid #F07330; outline-offset: 3px; border-radius: 12px; }

/* -------------------------------------------------------------------------
   Lightbox — full-size artwork viewer opened from a gallery thumbnail.
   ------------------------------------------------------------------------- */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 72px;
  background: rgba(43, 34, 24, .88);
  animation: popIn .2s ease both;
}
#lightbox.open { display: flex; }
#lightbox .lb-stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#lightbox .lb-img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 3px solid #FBF6E9;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  background: #FBF6E9;
}
#lightbox .lb-cap {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 600;
  color: #FBF6E9;
  letter-spacing: .5px;
}
#lightbox .lb-close,
#lightbox .lb-nav {
  position: absolute;
  appearance: none;
  cursor: pointer;
  color: #3E3226;
  background: #FBF6E9;
  border: 2px solid #3E3226;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
  font-family: 'Baloo 2', sans-serif;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .15s, background .15s;
}
#lightbox .lb-close {
  top: 20px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 700;
  padding-bottom: 4px;
}
#lightbox .lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 16px 8px 16px 8px;
  font-size: 34px;
  font-weight: 800;
  padding-bottom: 4px;
}
#lightbox .lb-prev { left: 20px; }
#lightbox .lb-next { right: 20px; }
#lightbox .lb-close:hover { transform: rotate(-6deg) scale(1.08); background: #FFE9A8; }
#lightbox .lb-prev:hover { transform: translateY(-50%) rotate(-4deg) scale(1.08); background: #FFE9A8; }
#lightbox .lb-next:hover { transform: translateY(-50%) rotate(4deg) scale(1.08); background: #FFE9A8; }
#lightbox .lb-close:focus-visible,
#lightbox .lb-nav:focus-visible { outline: 3px solid #F07330; outline-offset: 2px; }

@media (max-width: 620px) {
  #lightbox { padding: 20px 12px; }
  #lightbox .lb-nav { width: 42px; height: 42px; font-size: 26px; }
  #lightbox .lb-prev { left: 8px; }
  #lightbox .lb-next { right: 8px; }
  #lightbox .lb-img { max-height: calc(100vh - 150px); }
}

/* -------------------------------------------------------------------------
   Responsive fallbacks — the desktop composition (≥1000px) is left exactly
   as the prototype specifies; below that we relax the fixed widths so the
   page stays usable on tablets and phones.
   ------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  nav.side-rail { display: none !important; }
  main.page {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  section#about { grid-template-columns: 1fr !important; }
  section#skills .skills-grid { grid-template-columns: 1fr !important; }
  #projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  main.page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section#about > *,
  section#skills .skills-grid > * {
    min-width: 0;
  }
  section#about > div:first-of-type > div:first-child {
    flex-wrap: wrap;
    justify-content: center;
  }
  section#about > div:first-of-type > div:first-child img {
    height: 130px !important;
  }
  section#skills > div:first-of-type {
    flex-wrap: wrap;
  }
  section#skills .skills-grid > div:first-child {
    box-sizing: border-box;
    max-width: 100%;
    padding: 24px 22px !important;
  }
  section#skills .skills-grid > div:first-child > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section#education > div {
    box-sizing: border-box;
    max-width: 100% !important;
    padding: 22px 24px 24px !important;
  }
  section#education [style*="display:flex"] > div {
    min-width: 0;
  }
  #end > p,
  #end > div[style*="display:flex"] {
    max-width: 100%;
  }
  #projects-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .project-card {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
  }
  .project-card > div[style*="justify-content:space-between"] {
    flex-wrap: wrap;
  }
  .project-card > div[style*="justify-content:space-between"] > div:last-child {
    white-space: normal !important;
  }
  .overlay-gallery { grid-template-columns: 1fr 1fr !important; }
  h1 span, h2 span { font-size: 0.86em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}