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

Goal:

* Stable alignment (text starts level with image)
* Collage feel (rotation/offset) without breaking layout math
* Mobile: image ABOVE text (always)
  */

/* ======================
FILMS PAGE SPACING OVERRIDE
Overrides shared spacing from style.css
====================== */

.films-page header{
margin-bottom: 0.4rem;
}

.films-page main{
margin-top: 0;
}

.films-page .page-title{
margin-top: -0.6rem;
margin-bottom: 1rem;
}

/* ======================
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);
}

/* ======================
FILM ITEM (vars only)
====================== */
.film{
--thumb-rot: 1.2deg;
--thumb-x: 0px;

/* optional per-film nudge (rare) */
--text-y: 0px;

--tilt-title: -1.4deg;
--tilt-key-a:  1.1deg;
--tilt-key-b: -0.8deg;

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

/* ======================
LAYOUT (flex, predictable)
====================== */
.film-row{
display: flex;
gap: var(--film-gap-x);
align-items: flex-start;
}

/* default: thumb left, text right */
.film-thumb{ flex: 0 0 var(--film-thumb); }
.film-line{ flex: 1 1 auto; }

/* alternate sides: even items get thumb right */
.films > .film:nth-child(even) .film-row{
flex-direction: row-reverse;
}

/* optional forced sides */
.film--thumb-left .film-row{ flex-direction: row; }
.film--thumb-right .film-row{ flex-direction: row-reverse; }

/* text nudge lives here */
.film-line{
margin-top: var(--text-y);
transform: none !important;
}

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

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);

transform: translateX(var(--thumb-x)) rotate(var(--thumb-rot));
transform-origin: 50% 0%;
filter: saturate(0.98) contrast(1.02);
}

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

/* collage variation */
.films > .film:nth-child(6n+1){ --thumb-rot:  1.4deg; --thumb-x:  2px; }
.films > .film:nth-child(6n+2){ --thumb-rot: -1.2deg; --thumb-x: -3px; }
.films > .film:nth-child(6n+3){ --thumb-rot:  0.8deg; --thumb-x:  4px; }
.films > .film:nth-child(6n+4){ --thumb-rot: -0.7deg; --thumb-x: -2px; }
.films > .film:nth-child(6n+5){ --thumb-rot:  1.9deg; --thumb-x:  1px; }
.films > .film:nth-child(6n){   --thumb-rot: -1.6deg; --thumb-x: -4px; }

/* ======================
FILM LINE
====================== */
.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
====================== */
.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 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
====================== */
.reveal-prefix,
.reveal-steps,
.reveal-step{
font-family: "Nunito", sans-serif;
font-size: .95rem;
letter-spacing: 0;
text-transform: none;
opacity: .92;
}

.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;
}

.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{
flex-direction: column;
gap: .9rem;
}

.films > .film:nth-child(even) .film-row{ flex-direction: column; }

a.film-thumb{ width: 100%; max-width: var(--film-thumb); }

.film-thumb{ order: 0; }
.film-line{ order: 1; margin-top: 0; }
}

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