/* film.css (films page + individual film page shared bits) */

/* ======================
   FILMS PAGE TOKENS
====================== */
:root{
  --film-thumb: 320px;
  --film-gap-x: 1.15rem;
  --film-gap-y: 2.25rem;
}

/* ======================
   FILM LIST
====================== */
ul.films{
  list-style:none;
  padding-left: 0;
  display: grid;
  gap: var(--film-gap-y);
}

/* Component root */
.film{
  /* collage defaults */
  --thumb-rot: 1.2deg;
  --thumb-x: 0px;
  --thumb-y: 2px;

  /* IMPORTANT: text stays even by default */
  --text-y: 0px;

  /* your highlight tilt defaults */
  --tilt-title: -1.4deg;
  --tilt-key-a:  1.1deg;
  --tilt-key-b: -0.8deg;

  padding: 0;
  border: 0;
  background: transparent;
}

/* ======================
   FILM ROW LAYOUT
====================== */
.film-row{
  display: grid;
  grid-template-columns: var(--film-thumb) minmax(0, 1fr);
  column-gap: var(--film-gap-x);
  align-items: start;
}

/* extra safety: both columns pin to top */
.film-line,
.film-thumb{
  align-self: start;
}

/* Alternate sides without extra classes */
.films > .film:nth-child(even) .film-row{
  grid-template-columns: minmax(0, 1fr) var(--film-thumb);
}

/* Place columns explicitly so order is stable */
.film-line{
  grid-column: 2;
  transform: translateY(var(--text-y));
}
.film-thumb{ grid-column: 1; }

.films > .film:nth-child(even) .film-line{ grid-column: 1; }
.films > .film:nth-child(even) .film-thumb{ grid-column: 2; }

/* ======================
   THUMB
====================== */
a.film-thumb{
  width: var(--film-thumb);
  max-width: var(--film-thumb);
  display: block;
  text-decoration: none;
  color: inherit;

  /* IMPORTANT: translate first, then rotate (predictable drift) */
  transform: translate(var(--thumb-x), var(--thumb-y)) rotate(var(--thumb-rot));
  transform-origin: 40% 30%;
  filter: saturate(0.98) contrast(1.02);

  /* neutralize global link underline rules */
  border-bottom: 0;
  padding-bottom: 0;
}

a.film-thumb img{
  display:block;
  width:100%;
  height:auto;
  border: none;
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* remove stamp everywhere */
.stamp-label{ display:none !important; }

/* hover */
a.film-thumb:hover{
  transform:
    translate(var(--thumb-x), calc(var(--thumb-y) - 4px))
    rotate(calc(var(--thumb-rot) * 0.6));
}
a.film-thumb:hover img{
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}

/* ======================
   COLLAGE VARIATION
   Thumb only, text stays even by default
====================== */
.films > .film:nth-child(6n+1){ --thumb-rot:  1.4deg; --thumb-x:  2px; --thumb-y: -1px; }
.films > .film:nth-child(6n+2){ --thumb-rot: -1.2deg; --thumb-x: -3px; --thumb-y:  1px; }
.films > .film:nth-child(6n+3){ --thumb-rot:  0.8deg; --thumb-x:  4px; --thumb-y:  0px; }
.films > .film:nth-child(6n+4){ --thumb-rot: -0.7deg; --thumb-x: -2px; --thumb-y: -1px; }
.films > .film:nth-child(6n+5){ --thumb-rot:  1.9deg; --thumb-x:  1px; --thumb-y:  1px; }
.films > .film:nth-child(6n){   --thumb-rot: -1.6deg; --thumb-x: -4px; --thumb-y:  0px; }

/* If you need to force a side for one film, keep it rare. */
.film--thumb-left .film-row{
  grid-template-columns: var(--film-thumb) minmax(0, 1fr);
}
.film--thumb-right .film-row{
  grid-template-columns: minmax(0, 1fr) var(--film-thumb);
}

/* intentional text drop */
.film--text-drop{ --text-y: 1.4rem; }

/* ======================
   FILM LINE (your sentence)
====================== */
.film-line{
  font-family:"IM Fell English", serif;
  font-size:1.45rem;
  letter-spacing:.04em;
  text-transform:lowercase;

  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-items:baseline;
}

/* ======================
   BUTTON RESET + HIGHLIGHT
====================== */
.reveal-title,
.reveal-keyword{
  all:unset;
  display:inline-block;
  font:inherit;
  color:inherit;
  line-height:inherit;
  cursor:pointer;

  border-bottom:1px dotted rgba(27,27,27,.35);
  padding-bottom:.06rem;

  position:relative;
  z-index:0;
  isolation:isolate;

  -webkit-tap-highlight-color:transparent;
}

.reveal-title:focus-visible,
.reveal-keyword:focus-visible{
  outline:2px dotted rgba(212,93,93,.6);
  outline-offset:6px;
  border-radius:6px;
}

/* role-based tilts */
.film .reveal-title{ --tilt: var(--tilt-title); }
.film .reveal-prefix .reveal-keyword{ --tilt: var(--tilt-key-a); }
.film .reveal-step .reveal-keyword{ --tilt: var(--tilt-key-b); }

/* hover ink */
.reveal-title:hover,
.reveal-keyword:hover{
  border-bottom:none;
  color:#fff;
}

.reveal-title::after,
.reveal-keyword::after{
  content:"";
  position:absolute;
  left:-0.14em;
  right:-0.06em;
  bottom:0.08em;
  height:0.82em;

  background: linear-gradient(to bottom, rgba(0,0,0,.93), rgba(0,0,0,1) 55%, rgba(0,0,0,.9));
  opacity:0;
  z-index:-1;

  transform: rotate(var(--tilt)) skewX(-6deg) scaleX(.55);
  transform-origin:left center;
  border-radius:2px 7px 3px 6px;
  filter:blur(.2px);

  transition: opacity 150ms ease, transform 360ms cubic-bezier(.15,.85,.2,1);
  pointer-events:none;
}

.reveal-title:hover::after,
.reveal-keyword:hover::after{
  opacity:1;
  transform: rotate(var(--tilt)) skewX(-6deg) scaleX(1);
}

/* ======================
   REVEAL TEXT
====================== */

/* revealed text should feel secondary (Nunito) */
.reveal-prefix,
.reveal-steps,
.reveal-step{
  font-family: "Nunito", sans-serif;
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: .92;
}

/* reveal motion */
.reveal-prefix,
.reveal-step{
  display:inline-block;
  opacity:0;
  transform:translateY(.06em);
  filter:blur(.35px);
  letter-spacing:.004em;

  transition:
    opacity 560ms cubic-bezier(.2,.9,.2,1),
    transform 720ms cubic-bezier(.2,.9,.2,1),
    filter 980ms cubic-bezier(.2,.9,.2,1),
    letter-spacing 720ms cubic-bezier(.2,.9,.2,1);
}

.reveal-prefix.is-visible,
.reveal-step.is-visible{
  opacity:1;
  transform:none;
  filter:none;
  letter-spacing:0;
}

/* keep revealed text flowing like one sentence */
.reveal-steps{ display: inline; }
.reveal-steps > span{ display: inline; white-space: normal; }
.reveal-prefix,
.reveal-steps > span{ margin-left: .25rem; }

.is-hidden{
  opacity:0 !important;
  pointer-events:none !important;
}

/* ======================
   MOBILE
====================== */
@media (max-width:700px){
  :root{ --film-thumb: 260px; }

  .film-row{
    grid-template-columns: 1fr;
    row-gap: .9rem;
  }

  .films > .film:nth-child(even) .film-row{
    grid-template-columns: 1fr;
  }

  .film-thumb{ grid-column: 1; }
  .film-line{ grid-column: 1; transform: none; }
}

/* Always honor hidden attribute */
[hidden]{ display:none !important; }