/* Cinebrowser site — videovillage.com/screen school:
   #222 page, white-alpha text ladder, one accent (Cinebrowser amber),
   42px-light sentence-case headlines, three-beat rhythm, two spacing values. */

:root {
  --page: #222;
  --surface: #2e2f32;
  --surface-deep: #1a1a1a;
  --ink: #fff;
  --ink-75: hsla(0, 0%, 100%, .75);
  --ink-60: hsla(0, 0%, 100%, .6);
  --ink-50: hsla(0, 0%, 100%, .5);
  --hairline: hsla(0, 0%, 100%, .08);
  --accent: #f0b429;            /* the app's own amber */
  --accent-deep: #d99a12;
  --corset: 1280px;
  --gap: 2.25rem;               /* 36px — within a beat */
  --gap-large: 4.5rem;          /* 72px — between beats */
  --display: "Josefin Sans", sans-serif;
  --body: "Nunito Sans", sans-serif;
  --ease: cubic-bezier(.25, .46, .45, .94);
}

* { box-sizing: border-box; }
html { background: var(--page); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.5;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; -webkit-user-drag: none; }
a { color: var(--ink-60); text-decoration: none; transition: color 150ms var(--ease); }
a:hover { color: var(--ink); }
.muted { color: var(--ink-50); }
.small { font-size: .875rem; }
.dot { color: var(--ink-50); padding: 0 .375rem; }

/* ---------- top nav ---------- */
.topnav {
  max-width: var(--corset);
  margin: 0 auto;
  padding: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: .02em;
}
.wm-light { font-weight: 300; color: var(--ink-60); }
.topnav-links { display: flex; gap: 1.5rem; font-size: 1rem; }

/* ---------- sticky subnav ---------- */
.subnav { position: sticky; top: 0; z-index: 10; }
.subnav-inner {
  max-width: var(--corset);
  margin: 0 auto;
  padding: 1rem 2.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
}
.subnav-icon {
  width: 6.25rem; height: 6.25rem;
  transition: width 200ms ease-in-out, height 200ms ease-in-out;
}
.subnav-names { display: flex; flex-direction: column; gap: .125rem; }
.subnav-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1;
  transition: font-size 200ms ease-in-out;
}
.subnav-tag { font-size: 1.3125rem; font-weight: 300; line-height: 1.1; }
.subnav-spacer { flex: 1; }
.subnav.stuck {
  background: rgba(40, 40, 42, .85);
  -webkit-backdrop-filter: saturate(200%) blur(14px);
  backdrop-filter: saturate(200%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.subnav.stuck .subnav-icon { width: 3rem; height: 3rem; }
.subnav.stuck .subnav-name { font-size: 1.3125rem; }
.subnav.stuck .subnav-tag { display: none; }
.subnav.stuck .subnav-inner { padding: .625rem 2.25rem; }

/* ---------- buttons ---------- */
.button {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: .01em;
  color: #1c1503;
  background: linear-gradient(180deg, #f7c64a 0%, var(--accent) 45%, var(--accent-deep) 100%);
  background-size: 100% 200%;
  border-radius: .75rem;
  min-height: 3rem;
  padding: .875rem 1.5rem .75rem;   /* Josefin sits high — rebalance */
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.25), inset 0 -1px 0 rgba(0,0,0,.18);
  transition: background-position 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.button:hover {
  color: #1c1503;
  background-position: 0 35%;
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.3), inset 0 -1px 0 rgba(0,0,0,.2), 0 4px 16px rgba(240,180,41,.25);
}
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }
.button-large { font-size: 1.25rem; padding: 1rem 2.25rem .875rem; }

/* ---------- beats ---------- */
/* overflow-x: clip contains the screenshots' scale-in reveal without adding a
   scroll container (so it never breaks the sticky subnav, which lives outside
   main). The page body must never scroll horizontally. */
main { padding: 0 1rem; overflow-x: clip; }
.beat { margin: var(--gap) auto; max-width: var(--corset); }
.shot img {
  display: block;
  width: 100%;
  border-radius: .625rem;
  border: 1px solid var(--hairline);
}
.shot {
  margin: 0;
  position: relative;
  /* Clip the scale-in reveal so a momentarily-oversized image can't push the
     page into horizontal scroll; rounds the animation to the frame too. */
  overflow: hidden;
  border-radius: .625rem;
}
/* The hero keeps its ambient glow, which must bleed outward — don't clip it
   (it reveals on load, so its scale-in never overflows the page). */
.shot-hero { overflow: visible; }
.shot-hero::before {
  /* faint amber ambient so the dark window floats instead of melting */
  content: "";
  position: absolute;
  inset: 6% 4%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(240,180,41,.14), transparent 70%);
  filter: blur(60px);
  z-index: -1;
}
.credit { font-size: .875rem; font-style: italic; margin-top: .75rem; }

/* Two media side by side (wide app shot + tall UI detail crop) */
.media-pair {
  display: grid;
  grid-template-columns: 2.55fr 1fr;
  gap: .75rem;
  align-items: stretch;
}
.media-pair .shot img { height: 100%; object-fit: cover; object-position: left top; }
@media (max-width: 800px) {
  .media-pair { grid-template-columns: 1fr; }
  .media-pair .shot-detail { display: none; } /* the wide shot carries mobile */
}

.words { max-width: 46rem; margin: var(--gap-large) auto var(--gap); padding: 0 1rem; }
/* anchor jumps must clear the sticky subnav */
[id] { scroll-margin-top: 6rem; }
.words h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 2.625rem;
  line-height: 1.25;
  margin: 0 0 1rem;
}
.words h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.35;
  margin: .375rem 0;
}

/* ---------- bento ---------- */
.grid {
  max-width: var(--corset);
  margin: var(--gap) auto var(--gap-large);
  display: grid;
  gap: .75rem;
  text-align: left;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--surface);
  /* Distinctive silhouette — a squared "tab" corner top-left, generous
     radius elsewhere: reads as Cinebrowser's own card, not a rounded rectangle. */
  border-radius: .4rem 1.9rem 1.9rem 1.9rem;
  padding: 1.75rem 1.75rem 1.625rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink-60);
  border: 1px solid transparent;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease),
              background 260ms var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  background: #34353a;
  border-color: var(--hairline);
}
.card strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: .375rem;
}
/* A hairline amber tick at the tab corner — the one spark of accent per card. */
.card strong::before {
  content: "";
  display: inline-block;
  width: .5rem; height: .5rem;
  margin-right: .5rem;
  vertical-align: baseline;
  border-radius: 0 3px 3px 3px;
  background: var(--accent);
  opacity: .85;
}
/* lone last card in a 3-col grid centers itself (videovillage detail) */
.grid-3 .card:last-child:nth-child(3n + 1) { grid-column: 2; }

/* ---------- download band ---------- */
.download-band {
  max-width: var(--corset);
  margin: var(--gap-large) auto;
  background: var(--surface);
  border-radius: .6rem 2.5rem 2.5rem 2.5rem;
  padding: 4.5rem 2.25rem;
}
.band-icon { width: 8rem; height: 8rem; }
.band-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 2.625rem;
  margin: 1rem 0 2rem;
}
.band-buttons { margin-bottom: 1.25rem; }
.band-alt { font-size: 1.125rem; margin-bottom: 2rem; }
.band-alt a { border-bottom: 1px solid transparent; }
.band-alt a:hover { border-bottom-color: var(--ink-60); }
.download-band .small { line-height: 1.7; }

/* ---------- footnote asterisk ---------- */
.fn { color: var(--accent); font-weight: 400; }
.footnote {
  max-width: var(--corset);
  margin: calc(var(--gap-large) * -1 + 1rem) auto var(--gap-large);
  padding: 0 .25rem;
  text-align: center;
}

/* ============ animated feature widgets ============ */
.widget {
  max-width: var(--corset);
  margin: var(--gap) auto var(--gap-large);
}
.widget-cap { text-align: center; font-size: .875rem; font-style: italic; color: var(--ink-50); margin-top: .75rem; }

/* --- live LUT before/after wipe --- */
.lutwipe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: .625rem;
  overflow: hidden;
  border: 1px solid var(--hairline);
  cursor: ew-resize;
  user-select: none;
}
.lutwipe img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
.lutwipe .lw-log {
  /* the LOG (flat) layer sits on top, clipped to the left of the divider */
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}
.lutwipe .lw-divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px; margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(240,180,41,.5);
}
.lutwipe .lw-handle {
  position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
  display: grid; place-items: center;
  color: #1c1503; font-size: 15px; font-weight: 700;
}
.lutwipe .lw-tag {
  position: absolute; top: 14px;
  font: 600 11px/1 var(--body); letter-spacing: .08em;
  padding: 5px 9px; border-radius: 6px;
  background: rgba(0,0,0,.45); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lutwipe .lw-tag-l { left: 14px; }
.lutwipe .lw-tag-r { right: 14px; color: var(--accent); }

/* --- smart-search typing demo --- */
.searchdemo {
  width: 100%;
  background: var(--surface);
  border-radius: .4rem 1.9rem 1.9rem 1.9rem;
  border: 1px solid var(--hairline);
  padding: 1.5rem;
}
.sd-bar {
  display: flex; align-items: center; gap: .625rem;
  background: #1a1a1a; border: 1px solid var(--hairline);
  border-radius: 12px; padding: .75rem 1rem;
  font-size: 1.0625rem; color: var(--ink);
}
.sd-icon { color: var(--ink-50); font-size: 1.05rem; }
.sd-text { white-space: pre; }
.sd-caret { width: 2px; height: 1.15em; background: var(--accent); animation: sd-blink 1s step-end infinite; }
@keyframes sd-blink { 50% { opacity: 0; } }
.sd-results {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .625rem;
  margin-top: 1rem;
}
.sd-results figure {
  position: relative; margin: 0; border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 9;
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sd-results figure.on { opacity: 1; transform: none; }
.sd-results img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-pct {
  position: absolute; left: 8px; bottom: 8px;
  font: 700 12px/1 var(--body);
  color: #1c1503; background: var(--accent);
  padding: 3px 7px; border-radius: 6px;
}
@media (max-width: 620px) { .sd-results { grid-template-columns: repeat(2, 1fr); } .sd-bar { font-size: .95rem; } }

/* --- in/out timeline demo --- */
.iodemo {
  width: 100%;
  background: var(--surface);
  border-radius: .4rem 1.9rem 1.9rem 1.9rem;
  border: 1px solid var(--hairline);
  padding: 2rem 1.75rem;
}
.io-track {
  position: relative; height: 12px;
  background: #1a1a1a; border-radius: 6px;
  margin: 1.75rem 0 .75rem;
}
.io-range {
  position: absolute; top: 0; bottom: 0;
  left: var(--in, 20%); right: calc(100% - var(--out, 70%));
  background: rgba(240,180,41,.28);
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
}
.io-mark {
  position: absolute; top: -24px; transform: translateX(-50%);
  font: 700 11px/1 var(--body); color: var(--accent);
}
.io-in { left: var(--in, 20%); }
.io-out { left: var(--out, 70%); }
.io-play {
  position: absolute; top: -5px; width: 3px; height: 22px;
  background: #fff; border-radius: 2px; left: var(--play, 20%);
  box-shadow: 0 0 8px rgba(255,255,255,.5);
}
.io-caption { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.io-export {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.25rem;
  font: 600 .875rem var(--body); color: #1c1503;
  background: var(--accent); border-radius: 8px; padding: .5rem .9rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.io-export.on { opacity: 1; transform: none; }

/* ============ startup animation (first load) ============ */
/* The above-the-fold pieces make an entrance the moment the page opens,
   sequenced top→bottom, distinct from the on-scroll reveals below. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: translateY(20px) scale(.94); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.006); }
  100% { opacity: 1; transform: none; }
}
body.startup .topnav,
body.startup .subnav,
body.startup .beat.reveal:first-of-type,
body.startup .words.reveal:first-of-type {
  opacity: 0;
  animation: rise-in .8s cubic-bezier(.2,.7,.2,1) forwards;
}
body.startup .topnav { animation-delay: .05s; }
body.startup .subnav { animation-delay: .16s; }
body.startup .beat.reveal:first-of-type { animation-delay: .28s; animation-duration: 1s; }
body.startup .words.reveal:first-of-type { animation-delay: .5s; }
/* the hero screenshot's own scale-in still applies underneath */

/* Card entrance gains a gentle pop (scale) on top of the existing cascade. */
.grid.reveal.in .card { animation: pop-in .62s cubic-bezier(.2,.7,.2,1) both; }
.grid.reveal.in .card:nth-child(1) { animation-delay: 40ms; }
.grid.reveal.in .card:nth-child(2) { animation-delay: 100ms; }
.grid.reveal.in .card:nth-child(3) { animation-delay: 160ms; }
.grid.reveal.in .card:nth-child(4) { animation-delay: 220ms; }
.grid.reveal.in .card:nth-child(5) { animation-delay: 280ms; }
.grid.reveal.in .card:nth-child(6) { animation-delay: 340ms; }
.grid.reveal.in .card:nth-child(7) { animation-delay: 400ms; }
.grid.reveal.in .card:nth-child(8) { animation-delay: 460ms; }
.grid.reveal.in .card:nth-child(9) { animation-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
  body.startup .topnav, body.startup .subnav,
  body.startup .beat.reveal:first-of-type, body.startup .words.reveal:first-of-type,
  .grid.reveal.in .card { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sd-caret { animation: none; }
}

/* ---------- footer ---------- */
footer {
  max-width: var(--corset);
  margin: 0 auto;
  padding: 2.25rem 2.25rem 4.5rem;
}
.footer-links { margin: 0 0 .6rem; }
.footer-links a { border-bottom: 1px solid transparent; }
.footer-links a:hover { border-bottom-color: var(--ink-60); }

/* "Have a license key? Redeem it" under the download band */
.band-redeem { margin-top: 1rem; }
.band-redeem a { color: var(--accent); border-bottom: 1px solid transparent; }
.band-redeem a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 60%, #f7c64a);
  z-index: 50;
  will-change: transform;
}

/* ---------- reveals ---------- */
/* Section-level fade + rise. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms cubic-bezier(.165,.84,.44,1),
              transform 700ms cubic-bezier(.165,.84,.44,1);
}
.reveal.in { opacity: 1; transform: none; }

/* Words travel a touch further so headlines "arrive". */
.words.reveal { transform: translateY(34px); }

/* Screenshots settle in from slightly smaller + soft — the picture "focuses". */
.shot img {
  transition: transform 900ms cubic-bezier(.165,.84,.44,1),
              filter 900ms cubic-bezier(.165,.84,.44,1);
  transform: scale(1.04);
  filter: saturate(.85) brightness(.9);
}
.beat.reveal .shot img,
.media-pair .shot img { transform: scale(1.06); filter: saturate(.8) brightness(.88); }
.reveal.in .shot img { transform: none; filter: none; }

/* Cards rise in a staggered cascade once their grid enters view. */
.grid.reveal .card {
  opacity: 0;
  transform: translateY(22px) scale(.98);
  transition: opacity 620ms cubic-bezier(.165,.84,.44,1),
              transform 620ms cubic-bezier(.165,.84,.44,1);
}
.grid.reveal.in .card { opacity: 1; transform: none; }
.grid.reveal.in .card:nth-child(1) { transition-delay: 40ms; }
.grid.reveal.in .card:nth-child(2) { transition-delay: 100ms; }
.grid.reveal.in .card:nth-child(3) { transition-delay: 160ms; }
.grid.reveal.in .card:nth-child(4) { transition-delay: 220ms; }
.grid.reveal.in .card:nth-child(5) { transition-delay: 280ms; }
.grid.reveal.in .card:nth-child(6) { transition-delay: 340ms; }
.grid.reveal.in .card:nth-child(7) { transition-delay: 400ms; }
.grid.reveal.in .card:nth-child(8) { transition-delay: 460ms; }
.grid.reveal.in .card:nth-child(9) { transition-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .grid.reveal .card { opacity: 1; transform: none; transition: none; }
  .shot img { transform: none; filter: none; transition: none; }
  .scroll-progress { display: none; }
  .subnav-icon, .subnav-name, .button, .card { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 .card:last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 800px) {
  .words h1 { font-size: 1.75rem; }
  .words h2 { font-size: 1.3125rem; }
  .topnav { padding: 1.25rem 1rem; }
  .subnav-inner { padding: .75rem 1rem; }
  .subnav-icon { width: 4rem; height: 4rem; }
  .subnav-tag { display: none; }
  .band-name { font-size: 1.75rem; }
}
@media (max-width: 620px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .topnav-links { gap: 1rem; font-size: .9375rem; }
  .words { margin-top: 3rem; }
  .card { border-radius: 1.25rem; }
  .download-band { border-radius: 1.25rem; padding: 3rem 1.25rem; }
}