/* Cinematic hero (ol-kf-launch 2026-10-18, Troy: "it needs background or hero image and some sort of cinematic effect").
   Markup: marketing/oregonliving/cine.py. Shared pattern with dev.klamathliving.com/game/ (cw-campaign). */
.cine{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0b1410;
  min-height:max(560px,calc(100svh - var(--cine-top,0px)));display:flex;align-items:flex-end}
.cine-media,.cine-shade{position:absolute;inset:0;z-index:-1}
.cine-media picture,.cine-media img,.cine-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cine-video{opacity:0;transition:opacity 1.4s ease}
.cine-playing .cine-video{opacity:1}
.cine-kb .cine-poster{animation:cine-kb 26s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes cine-kb{from{transform:scale(1)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
/* No overlay (Troy 10/18: "a dark filter across the entire screen ... takes away from the game"): full-brightness video; the text carries its own shadow. */
.cine-shade{background:none}
/* A tight blurred backdrop hugging each text block, never wider than the text (George 10/18, option 2). */
.hug{display:inline;background:rgba(8,18,22,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:max(.26em,6px) max(.38em,7px);border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cine-copy{position:relative;width:100%;padding-top:96px;padding-bottom:84px}
.cine-copy>*{max-width:46rem}
.cine-eyebrow{margin:0 0 .7em;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#fff;text-shadow:0 0 2px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.65),0 0 22px rgba(0,0,0,.35)}
.cine h1{margin:0 0 .35em;color:#fff;font-size:clamp(2.2rem,6.4vw,4.4rem);line-height:1.18;text-shadow:0 0 2px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.65),0 0 22px rgba(0,0,0,.35)}
.cine-line{margin:0 0 1.3em;font-size:clamp(1.08rem,2.2vw,1.35rem);line-height:1.45;color:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.65),0 0 22px rgba(0,0,0,.35)}
.cine-btns{display:flex;flex-wrap:wrap;gap:12px}
.cine-btns a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:10px;font-weight:700;font-size:1.05rem;text-decoration:none;border:2px solid #fff;color:#fff;background:rgba(5,12,9,.5)}
.cine-btns a.cine-eb{background:#f1c27d;border-color:#f1c27d;color:#1d2a24}
.cine-btns a:focus-visible,.cine-cue:focus-visible{outline:3px solid #f1c27d;outline-offset:3px}
.cine-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:#fff;text-decoration:none;background:rgba(5,12,9,.35)}
.cine-cue svg{animation:cine-bob 2.4s ease-in-out infinite}
@keyframes cine-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.cine-copy>*{opacity:0;transform:translateY(18px);animation:cine-up .9s cubic-bezier(.2,.7,.2,1) forwards}
.cine-copy>:nth-child(2){animation-delay:.15s}.cine-copy>:nth-child(3){animation-delay:.3s}.cine-copy>:nth-child(4){animation-delay:.45s}
@keyframes cine-up{to{opacity:1;transform:none}}
@media (max-width:767px){.cine-copy{padding-top:72px;padding-bottom:76px}.cine-btns a{width:100%}}
@media (prefers-reduced-motion:reduce){.cine-copy>*{opacity:1;transform:none;animation:none}.cine-cue svg,.cine-kb .cine-poster{animation:none}.cine-video{display:none}}
/* Short scannable blocks below the fold (/game/) */
.cine-blocks{display:grid;gap:28px;margin:8px 0 28px}
.cine-block{display:grid;gap:14px;align-items:center}
@media(min-width:760px){.cine-block{grid-template-columns:1fr 1fr;gap:28px}.cine-block:nth-child(even) figure{order:2}}
.cine-block figure{margin:0}.cine-block img{display:block;width:100%;height:auto;border-radius:12px}
.cine-block h2{margin:0 0 .3em}.cine-block p{margin:0 0 .5em}
.cine-block figcaption{color:var(--muted);font-size:.9rem;margin-top:6px}
/* Game-landing look (Troy: "it needs to appeal to people who play games online"). Pixel font for the TITLE only. */
@font-face{font-family:"Press Start 2P";src:url(/assets/fonts/press-start-2p-latin.woff2) format("woff2");font-display:swap}
.cine-pixel{font-family:"Press Start 2P",ui-monospace,monospace;text-transform:uppercase;font-weight:400;
  font-size:clamp(1.45rem,5vw,3.5rem);line-height:1.3;letter-spacing:.02em;text-shadow:4px 4px 0 #0b1410,0 0 2px rgba(0,0,0,.8),0 0 22px rgba(0,0,0,.35)}
.cine-btns a.cine-play,.cwg a.cine-play{background:#8bdc5c;border-color:#8bdc5c;color:#0d2108;font-size:1.12rem;letter-spacing:.02em;
  box-shadow:0 0 0 0 rgba(139,220,92,.55),0 6px 0 #4f8f2f;transition:transform .15s,box-shadow .2s}
.cine-btns a.cine-play:hover,.cwg a.cine-play:hover{transform:translateY(-2px);box-shadow:0 0 26px 6px rgba(139,220,92,.55),0 8px 0 #4f8f2f}
.cine-btns a.cine-play::before,.cwg a.cine-play::before{content:"\25B6";margin-right:10px;font-size:.85em}
@media (prefers-reduced-motion:no-preference){.cine-btns a.cine-play{animation:cine-pulse 2.8s ease-out infinite 1.6s}}
@keyframes cine-pulse{0%{box-shadow:0 0 0 0 rgba(139,220,92,.55),0 6px 0 #4f8f2f}70%{box-shadow:0 0 0 14px rgba(139,220,92,0),0 6px 0 #4f8f2f}100%{box-shadow:0 0 0 0 rgba(139,220,92,0),0 6px 0 #4f8f2f}}
.cine-trailer{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:10px;font:inherit;font-weight:700;font-size:1.05rem;border:2px solid #fff;color:#fff;background:rgba(5,12,9,.35);cursor:pointer}
.cine-dialog{border:0;padding:0;background:#000;max-width:min(96vw,1200px);width:100%}
.cine-dialog::backdrop{background:rgba(0,0,0,.82)}.cine-dialog video{display:block;width:100%;height:auto}
.cine-close{display:block;margin-left:auto;min-height:44px;padding:0 16px;background:#000;color:#fff;border:0;font:inherit;font-weight:700;cursor:pointer}
.cine-biz{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;color:#eef1ec;font-weight:700}
.cine-biz:hover{color:#fff}
/* Feature cards */
.cwf{display:grid;gap:16px;grid-template-columns:1fr;margin:8px 0 8px;padding:0;list-style:none}
@media(min-width:640px){.cwf{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.cwf{grid-template-columns:1fr 1fr 1fr}}
.cwf li{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.cwf img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.cwf .cwf-b{padding:14px 16px 16px}.cwf h3{display:flex;align-items:center;gap:10px;margin:0 0 .3em;font-size:1.12rem}
.cwf .cine-ico{flex:0 0 auto;color:var(--accent)}.cwf p{margin:0;color:var(--muted)}
/* Store-page gallery */
.cwgal{display:grid;gap:12px;grid-template-columns:1fr;margin:8px 0 6px}
@media(min-width:760px){.cwgal{grid-template-columns:1fr 1fr 1fr}.cwgal figure:first-child{grid-column:span 2;grid-row:span 2}.cwgal figure{aspect-ratio:16/9}.cwgal figure:first-child{aspect-ratio:auto}}
.cwgal figure{margin:0;overflow:hidden;border-radius:12px;position:relative;background:#0b1410}
.cwgal img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.cwgal figure:hover img{transform:scale(1.06)}}
.cwgal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;color:#fff;font-size:.92rem;text-shadow:0 0 2px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.65),0 0 22px rgba(0,0,0,.35)}
.cwsafe{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0 0}
/* Home-page mini game band */
.cwg{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0b1410;margin:0}
.cwg-bg{position:absolute;inset:0;z-index:-1}.cwg-bg img{width:100%;height:100%;object-fit:cover}
.cwg-bg::after{content:none}
.cwg p,.cwg .cine-eyebrow{text-shadow:0 0 2px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.65),0 0 22px rgba(0,0,0,.35)}.cwg .cine-pixel{text-shadow:3px 3px 0 #0b1410,0 0 2px rgba(0,0,0,.8),0 0 22px rgba(0,0,0,.35)}
.cwg .wrap{padding-top:56px;padding-bottom:56px}.cwg .wrap>*{max-width:40rem}
.cwg .cine-pixel{font-size:clamp(1.15rem,3.6vw,2.4rem);margin:.2em 0 .5em;color:#fff}
.cwg p{color:#fff;font-weight:500}.cwg .cine-eyebrow{color:#fff}
.cwg a.cwg-more{color:#fff}
@media (prefers-reduced-motion:reduce){.cine-btns a.cine-play,.cwg a.cine-play{animation:none;transition:none}}
.cwp .cwf-b{padding:16px}.cwp a.cwp-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700}