/* style.css
   Base site styling (shared across pages).
   Film-list component styles live in /css/film.css.
*/

:root{
  /* Pastel cyberpunk palette */
  --bg: #EFEAF6;          /* lavender milk */
  --text: #1A1620;        /* violet-black ink */

  --accent: #C86B9E;      /* dusty neon magenta */
  --accent2: #4F8F9A;     /* muted cyber teal */

  --neon: #7DF9FF;        /* acid cyan — use sparingly */

  --paper: rgba(255,255,255,0.55);
  --paper2: rgba(255,255,255,0.28);

  --dash: rgba(79,143,154,0.35);
  --divider: rgba(26,22,32,0.08);
}

/* ======================
   GLOBAL RESET
====================== */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ text-size-adjust: 100%; }

body{
  font-family: Georgia, serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  padding: 2rem;
  max-width: 70ch;
  margin: 0 auto;
}

@media (min-width: 900px){
  body{ max-width: 82ch; }
}

/* A little nicer selection, still ink-forward */
::selection{
  background: rgba(26,22,32,0.16);
}

/* ======================
   LINKS (site-wide)
====================== */
a{
  color: var(--accent2);
  text-decoration: none;
  border-bottom: 1px dotted rgba(79,143,154,0.55);
  padding-bottom: .05rem;
}
a:hover{ border-bottom-style: solid; }

/* ======================
   HEADER (shared)
====================== */
header{
  position: relative;     /* allows overlap behavior */
  margin-bottom: 3rem;
}

header h1{ margin-bottom: 0.35rem; }

.site-title{
  font-family: 'Special Elite', serif;
  font-size: 2.65rem;
  letter-spacing: 0.09em;
  line-height: 1.05;
  color: var(--accent2);
  text-decoration: none;
  opacity: 0.96;
  display: inline-block;

  position: relative;
  z-index: 1;             /* sits under tagline */
}

.site-title:hover{
  border-bottom-style: solid;
}

/* ======================
   TAGLINE (shared)
   "Accidental" overlap into title start
====================== */
.tagline{
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--dash);
  border-radius: 10px;
  background: var(--paper2);
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 58ch;
  opacity: 0.9;

  position: relative;
  z-index: 2;

  /* overlap + collision */
  top: .65rem;            /* lowers tagline */
  left: .9rem;            /* nudges into title */
  margin-bottom: -0.8rem; /* creates actual overlap */

  transform: rotate(-1.2deg) translateX(4px);
  transform-origin: top right;
}

/* ======================
   MAIN (shared)
====================== */
main{ margin-top: 1.5rem; }

/* Shared page title (used on films page, etc.)
   If a page wants a different tone, override per-page in its own CSS file. */
.page-title{
  font-family: "IM Fell English", serif;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--accent2);
  margin-bottom: 1rem;
  text-transform: lowercase;
}

/* ======================
   HOMEPAGE CARDS (homepage only)
====================== */
.cards{
  display: grid;
  grid-template-columns: 18ch 18ch;
  justify-content: start;
  gap: 1.2rem 1rem;
  align-items: start;
  margin-left: -1.5rem;
}

.cards section{
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  width: fit-content;
  max-width: 20ch;
  line-height: 1.45;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* BASE crooked placement — intentional chaos */
.cards section:nth-child(1){ transform: translate(-6px, 4px) rotate(-1.6deg); }
.cards section:nth-child(2){ transform: translate(5px, -2px) rotate(1.2deg); }
.cards section:nth-child(3){ transform: translate(-4px, 10px) rotate(-0.8deg); }
.cards section:nth-child(4){ transform: translate(6px, 2px) rotate(1.6deg); }
.cards section:nth-child(5){ transform: translate(-2px, 10px) rotate(-1.1deg); }
.cards section:nth-child(6){ transform: translate(4px, 6px) rotate(0.9deg); }
.cards section:nth-child(7){ transform: translate(-5px, 8px) rotate(-1.4deg); }

/* gentle stagger */
.cards section:nth-child(odd){ margin-top: 0.6rem; }
.cards section:nth-child(even){ margin-top: 0; }
.cards .currently{ margin-top: -0.4rem; }

/* hover */
.cards section:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  transform: translate(0, -4px) rotate(0deg);
}

/* ======================
   CARD TITLES (homepage)
====================== */
section h2{
  font-family: 'IM Fell English', serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--accent2);
  text-align: center;
}

/* clickable cards */
.card-link{
  display: block;
  /* let global a styles handle the underline */
  border-bottom: 0;
}
.card-link:hover{
  border-bottom: 0;
}

/* ======================
   CURRENTLY CARD
====================== */
.currently{
  background: rgba(255,255,255,0.25);
  border: 1px dashed rgba(51,107,117,0.35);
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  padding: 0.9rem 1.05rem;
  max-width: 28ch;
}

.currently h2{
  font-family: 'Nunito', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
  color: var(--text);
}

.currently li{
  margin-bottom: 0.35rem;
  opacity: 0.85;
}

.currently li::before{
  content: "— ";
  opacity: 0.45;
}

/* scroll container */
.currently-scroll{
  max-height: 7.5rem;
  overflow-y: auto;
  padding-right: 0.4rem;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.currently-scroll::-webkit-scrollbar{ width: 6px; }
.currently-scroll::-webkit-scrollbar-track{ background: transparent; }
.currently-scroll::-webkit-scrollbar-thumb{
  background: rgba(51,107,117,0.45);
  border-radius: 10px;
}
.currently-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(51,107,117,0.65);
}
.currently-scroll{ scrollbar-width: thin; scrollbar-color: rgba(51,107,117,0.45) transparent; }

/* ======================
   ROBOT IMAGE (homepage)
====================== */
.robot{
  display: block;
  width: min(320px, 80vw);
  height: auto;
  margin: 3.5rem auto 0;
  opacity: 0.92;
  pointer-events: none;
  position: relative;
  z-index: 1;

  /* tiny grit */
  filter: contrast(1.02) saturate(0.98);
}

/* ======================
   FOOTER (overlap version)
====================== */
footer{
  position: relative;
  z-index: 3;
  margin-top: -4rem;
  padding-top: 6rem;
  padding-bottom: 2rem;
  background: linear-gradient(to bottom, rgba(238,237,233,0) 0%, var(--bg) 60%);
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.75;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* ======================
   MOBILE
====================== */
@media (max-width: 700px){
  body{ padding: 1rem; }

  .cards{
    grid-template-columns: 1fr;
    margin-left: 0;
  }
  .cards section{
    translate: 0 0 !important;
    margin-top: 0 !important;
  }

  .site-title{ font-size: 2.1rem; }

  /* tagline collision scales down */
  .tagline{
    max-width: 70vw;
    left: .55rem;
    top: .55rem;
    margin-bottom: -0.6rem;
  }
}

/* Make sure HTML [hidden] always wins site-wide */
[hidden]{ display:none !important; }