/* The original twenty photographs and verses, presented as a film. */
/* Occasional emulsion stains and worn gate edges, not image displacement. */
.sws-film-wear { position: absolute; inset: 0; pointer-events: none; }
.sws-film-wear::before,.sws-film-wear::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.sws-film-wear::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20460%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22wear%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeTurbulence%20baseFrequency%3D%22.14%22%20numOctaves%3D%223%22%20seed%3D%228%22%20result%3D%22noise%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22noise%22%20scale%3D%227%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.45%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23wear)%22%20opacity%3D%22.86%22%3E%3Cg%20fill%3D%22%23171a12%22%3E%3Cpath%20d%3D%22M102%20103c-5-6-14-4-16%201-6%202-6%2011-1%2013%200%206%209%209%2014%204%207%201%2012-6%207-11%201-4-1-6-4-7z%22%2F%3E%3Cpath%20d%3D%22M602%20302c-8-1-15%204-13%2010-4%207%206%2011%2013%207%209%202%2013-7%206-11%200-3-2-5-6-6z%22%2F%3E%3Cpath%20d%3D%22M419%2069c-3-5-10-2-9%202-5%204-1%2011%204%208%205%202%2010-4%205-10z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23ece0b8%22%20opacity%3D%22.82%22%20d%3D%22M249%20322c-5-3-11%200-9%204-5%203-4%208%201%209%205%204%2011%202%2011-3%205-4%202-9-3-10z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  animation: sws-film-stains 4.9s steps(1,end) infinite;
}
.sws-film-wear::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20460%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22wear%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeTurbulence%20baseFrequency%3D%22.14%22%20numOctaves%3D%223%22%20seed%3D%228%22%20result%3D%22noise%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22noise%22%20scale%3D%227%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.45%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23wear)%22%3E%3Cpath%20fill%3D%22%230b1513%22%20stroke%3D%22%23b28049%22%20stroke-opacity%3D%22.25%22%20stroke-width%3D%225%22%20d%3D%22M-6-6H32C26%206%2034%2014%2024%2019L28%2027%2018%2032C24%2043%2011%2045%2016%2057L10%2065%2014%2072C6%2085%2014%2095%207%20105L10%20130C4%20143%2012%20155%206%20164L9%20207C19%20215%2012%20222%2020%20230L18%20240%2030%20249%2027%20258C43%20269%2029%20275%2036%20285L26%20294%2029%20307C17%20315%2023%20323%2013%20335L15%20346C4%20362%2011%20378%206%20390L9%20423%206%20466H-6Z%22%2F%3E%3Cpath%20fill%3D%22%230b1513%22%20opacity%3D%22.8%22%20d%3D%22M0%200h163l-13%204-18-1-11%205-16-2-19%205-13-3-16%207-12-4-18%209L0%2018z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  animation: sws-film-worn-edge 9.7s steps(1,end) infinite;
}
@keyframes sws-film-stains {
  0%,13%,44%,79%,100% { opacity: 0; }
  7% { opacity: .95; transform: translate(0,0); }
  37% { opacity: .8; transform: translate(15%,-8%) scaleX(-1); }
  73% { opacity: .9; transform: translate(-7%,10%); }
}
@keyframes sws-film-worn-edge {
  0%,21%,70%,100% { opacity: 0; }
  16% { opacity: .96; transform: scaleX(1); }
  18% { opacity: .85; transform: translateX(-4px); }
  64% { opacity: .95; transform: scaleX(-1); }
  67% { opacity: .8; transform: translateX(3px) scaleX(-1); }
}
.sws-poem-cinema.is-paused .sws-film-wear { visibility: hidden; }
.sws-poem-cinema.is-paused .sws-film-wear::before,
.sws-poem-cinema.is-paused .sws-film-wear::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sws-film-wear { display: none; }
  .sws-film-wear::before,.sws-film-wear::after { animation: none; }
}
.sws-poem-cinema .sws-film-light {
  position: absolute;
  inset: 20px 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}
.sws-film-light::before,
.sws-film-light::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 34% 85% at -5% 42%,rgba(255,202,123,.8),rgba(231,151,59,.32) 44%,transparent 76%);
  animation: sws-film-light-leak 18s ease-in-out infinite;
}
.sws-film-light::after {
  transform: scaleX(-1);
  animation-delay: 9s;
}
@keyframes sws-film-light-leak {
  0%,6%,24%,100% { opacity: 0; }
  13% { opacity: .65; }
}
.sws-poem-cinema.is-paused .sws-film-light::before,
.sws-poem-cinema.is-paused .sws-film-light::after { animation-play-state: paused; }
.sws-poem-cinema.is-paused .sws-film-light { visibility: hidden; }
@media (max-width: 680px) {
  .sws-poem-cinema .sws-film-light { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .sws-poem-cinema .sws-film-light { display: none; }
  .sws-film-light::before,.sws-film-light::after { animation: none; }
}
/* Worn film texture, confined to the photograph beneath its caption. */
.sws-poem-cinema .sws-film-patina {
  position: absolute;
  inset: 20px 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}
.sws-film-patina::before,
.sws-film-patina::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.sws-film-patina::before {
  inset: -12px;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23g)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  /* Static grain: the photograph must not appear to shake. */
}
.sws-film-patina::after {
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg,transparent,rgba(255,248,219,.98) 12%,rgba(255,248,219,.8) 88%,transparent) 19% 0 / 2px 100% no-repeat,
    linear-gradient(180deg,transparent 12%,rgba(14,17,12,.85) 25%,rgba(14,17,12,.7) 68%,transparent 78%) 73% 0 / 2px 100% no-repeat,
    linear-gradient(180deg,transparent 32%,rgba(255,248,219,.8) 40%,rgba(255,248,219,.65) 70%,transparent 80%) 47% 0 / 1px 100% no-repeat;
  mask-image: linear-gradient(180deg,#000 0 18%,transparent 18.3% 19%,#000 19.3% 54%,transparent 54.3% 55%,#000 55.3% 81%,transparent 81.2% 81.8%,#000 82%);
  animation: sws-film-scratches 3.8s steps(1,end) infinite;
}
@keyframes sws-film-grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-5px,3px); }
  40% { transform: translate(4px,-4px); }
  60% { transform: translate(-3px,-6px); }
  80% { transform: translate(6px,2px); }
}
@keyframes sws-film-scratches {
  0%,9%,26%,41%,59%,75%,93%,100% { opacity: 0; }
  3% { opacity: .95; transform: translateX(0); }
  20% { opacity: .85; transform: translateX(17%); }
  36% { opacity: .75; transform: translateX(-9%); }
  52% { opacity: .95; transform: translateX(8%); }
  69% { opacity: .8; transform: translateX(-16%); }
  86% { opacity: .9; transform: translateX(23%); }
}
.sws-film-debris { position: absolute; inset: 0; pointer-events: none; }
.sws-film-debris::before,
.sws-film-debris::after { content: ''; position: absolute; inset: -18%; opacity: 0; }
.sws-film-debris::before {
  background: radial-gradient(ellipse at 14% 23%,rgba(9,13,10,.9) 0 2px,transparent 3px),
    radial-gradient(ellipse at 62% 61%,rgba(9,13,10,.8) 0 2.4px,transparent 3.2px),
    radial-gradient(ellipse at 38% 74%,rgba(255,246,212,.9) 0 1.5px,transparent 2.3px),
    radial-gradient(ellipse at 78% 32%,rgba(9,13,10,.9) 0 1.7px,transparent 2.5px),
    radial-gradient(ellipse at 44% 39%,rgba(9,13,10,.75) 0 1px,transparent 1.8px),
    radial-gradient(ellipse at 88% 82%,rgba(255,246,212,.8) 0 1.5px,transparent 2px);
  animation: sws-film-dust 2.7s steps(1,end) infinite;
}
.sws-film-debris::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='650' height='390' viewBox='0 0 650 390'%3E%3Cg fill='none' stroke='%23111712' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M120 105q-9 3-5 10t-3 12'/%3E%3Cpath d='M490 260q8-6 11 0t10 3'/%3E%3C/g%3E%3Cpath d='M335 70q-7 4-3 9t-4 7' fill='none' stroke='%23fff2cd' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 650px 390px repeat;
  animation: sws-film-fibres 4.7s steps(1,end) infinite;
}
@keyframes sws-film-dust {
  0%,14%,38%,65%,90%,100% { opacity: 0; }
  5% { opacity: .95; transform: translate(0,0); }
  30% { opacity: .8; transform: translate(7%,-9%); }
  55% { opacity: .95; transform: translate(-11%,5%); }
  82% { opacity: .85; transform: translate(5%,12%); }
}
@keyframes sws-film-fibres {
  0%,23%,53%,83%,100% { opacity: 0; }
  17% { opacity: .9; transform: translate(0,0); }
  47% { opacity: .8; transform: translate(15%,-7%); }
  77% { opacity: .95; transform: translate(-9%,13%); }
}
.sws-poem-cinema.is-paused .sws-film-debris::before,
.sws-poem-cinema.is-paused .sws-film-debris::after { animation-play-state: paused; }
.sws-poem-cinema.is-paused .sws-film-debris { visibility: hidden; }
.sws-poem-cinema.is-paused .sws-film-patina::before,
.sws-poem-cinema.is-paused .sws-film-patina::after { animation-play-state: paused; }
.sws-poem-cinema.is-paused .sws-film-patina::after { visibility: hidden; }
@media (max-width: 680px) {
  .sws-poem-cinema .sws-film-patina { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .sws-poem-cinema .sws-film-patina { display: none; }
  .sws-film-patina::before,.sws-film-patina::after { animation: none; }
  .sws-film-debris::before,.sws-film-debris::after { animation: none; }
}
.sws-journey-poem .sws-poem-cinema {
  height: 460px;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 20px 55px rgba(18,43,53,.12);
}
.sws-poem-cinema .sws-poem-visual { height: 100%; }
.sws-poem-cinema .sws-poem-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg,rgba(233,229,209,.68) 0 9px,transparent 9px 26px),
    repeating-linear-gradient(90deg,rgba(233,229,209,.68) 0 9px,transparent 9px 26px);
  background-size: calc(100% + 52px) 7px;
  background-position: 0 6px,0 calc(100% - 6px);
  background-repeat: repeat-x;
  animation: sws-film-transport 3.5s linear infinite;
}
@keyframes sws-film-transport {
  to { background-position: -52px 6px,-52px calc(100% - 6px); }
}
.sws-poem-cinema.is-paused .sws-poem-visual::before { animation-play-state: paused; }
.sws-poem-cinema .sws-poem-visual img {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.1s ease;
  animation: sws-film-drift calc(var(--poem-duration, 4500ms) + 1100ms) linear both;
  animation-play-state: paused;
}
.sws-poem-cinema .sws-poem-visual img.is-current {
  opacity: 1;
  animation-play-state: running;
}
.sws-poem-cinema.is-paused .sws-poem-visual img { animation-play-state: paused; }
@keyframes sws-film-drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.045); }
}
.sws-poem-cinema .sws-poem-visual::after {
  background: linear-gradient(90deg,transparent 62%,rgba(16,42,52,.65)),linear-gradient(0deg,rgba(7,23,30,.66),transparent 40%);
  box-shadow: inset 0 20px 0 rgba(6,19,24,.88), inset 0 -20px 0 rgba(6,19,24,.88), inset 0 0 85px rgba(6,19,24,.2);
  pointer-events: none;
}
.sws-poem-cinema .sws-poem-reading { padding: 26px 34px 24px; }
.sws-poem-cinema .sws-poem-counter { min-height: 42px; }
.sws-poem-playback {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(237,189,93,.42);
  border-radius: 50%;
  background: transparent;
  color: #edbd5d;
  font: 20px Georgia,serif;
  cursor: pointer;
}
.sws-poem-cinema .sws-poem-verses { display: grid; align-items: center; padding: 22px 0; }
.sws-poem-cinema .sws-poem-verse {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity .8s ease, transform .8s ease, visibility .8s ease;
  pointer-events: none;
}
.sws-poem-cinema .sws-poem-verse.is-active { pointer-events: auto; }
.sws-poem-cinema .sws-poem-verse p { font-size: clamp(18px,1.5vw,25px); }
.sws-poem-cinema .sws-poem-verse p.is-leading { font-size: clamp(21px,1.8vw,29px); }
.sws-poem-cinema .sws-poem-tick { height: 24px; border-radius: 0; background: transparent; position: relative; }
.sws-poem-cinema .sws-poem-tick::after { content: ''; position: absolute; inset: 11px 0 10px; background: rgba(255,255,255,.2); }
.sws-poem-cinema .sws-poem-tick.is-active::after { background: #edbd5d; }
.sws-poem-reel {
  position: relative;
  display: flex;
  gap: 9px;
  max-width: 100%;
  overflow-x: auto;
  padding: 17px 18px;
  border-top: 1px solid rgba(237,189,93,.32);
  border-radius: 0 0 22px 22px;
  background: #0b2029;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  box-shadow: 0 22px 45px rgba(18,43,53,.12);
}
.sws-poem-reel::-webkit-scrollbar { display: none; }
.sws-poem-frame {
  position: relative;
  flex: 0 0 108px;
  height: 65px;
  padding: 5px 0;
  border: 0;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 5px,transparent 5px 12px) top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 5px,transparent 5px 12px) bottom / 100% 3px no-repeat;
  cursor: pointer;
  opacity: .57;
  transition: opacity .35s ease;
}
.sws-poem-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.sws-poem-frame span { position: absolute; right: 5px; bottom: 8px; padding: 2px 4px; color: #fff; background: rgba(6,19,24,.72); font-size: 10px; font-weight: 700; }
.sws-poem-frame.is-active { opacity: 1; outline: 1px solid #edbd5d; outline-offset: 3px; }
.sws-poem-frame:hover { opacity: 1; }
.sws-journey-poem button:focus-visible { outline: 2px solid #edbd5d; outline-offset: 3px; }
@media (max-width: 1000px) {
  .sws-journey-poem .sws-poem-cinema { height: auto; }
  .sws-poem-cinema .sws-poem-visual { height: 320px; }
  .sws-poem-cinema .sws-poem-reading { min-height: 0; }
  .sws-poem-cinema .sws-poem-verses { min-height: 0; }
}
@media (max-width: 680px) {
  .sws-journey-poem .sws-poem-cinema { border-radius: 18px 18px 0 0; }
  .sws-poem-cinema .sws-poem-visual { height: 225px; }
  .sws-poem-cinema .sws-poem-reading { padding: 18px 22px 20px; }
  .sws-poem-cinema .sws-poem-visual figcaption { left: 22px; right: 22px; bottom: 22px; font-size: 10px; line-height: 1.5; }
  .sws-poem-cinema .sws-poem-verse p { font-size: 18px; }
  .sws-poem-cinema .sws-poem-verse p.is-leading { font-size: 21px; }
  .sws-poem-cinema .sws-poem-controls { gap: 10px; }
  .sws-poem-reel { padding: 14px; border-radius: 0 0 18px 18px; }
  .sws-poem-frame { flex-basis: 88px; height: 57px; }
}
@media (prefers-reduced-motion: reduce) {
  .sws-poem-cinema .sws-poem-visual::before { animation: none; }
  .sws-poem-cinema .sws-poem-visual img { animation: none !important; transform: none; transition: none; }
  .sws-poem-cinema .sws-poem-verse { transition: none; }
  .sws-poem-reel { scroll-behavior: auto; }
}