/* Twenty-five reasons as end credits: the cards. Black, like the Frozen credits; the art and the type sit on it.
   Shared by the standalone page (index.html) and the film (film/), so both always look the same. */
.rc { --ink: #f4f0f7; --night: linear-gradient(to bottom, #050817 0%, #0e1638 55%, #243570 100%); color: var(--ink); font-family: 'Boska', Georgia, serif; }
.rc { position: fixed; inset: 0; overflow: hidden; background: #000; contain: strict; }
.rc__night { position: absolute; inset: 0; background: var(--night); opacity: 0; }
.rc__arts, .rc__texts { position: absolute; inset: 0; }
.rc__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* one card's art: the art itself, a copy for the bright leading edge, a copy for the slow sheen */
.rc__art { position: absolute; inset: 0; visibility: hidden; transform-origin: 50% 50%; will-change: transform, opacity; }
.rc__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rc__art .glow, .rc__art .sheen { mix-blend-mode: screen; }
.rc__art .glow { filter: brightness(1.8) saturate(1.15); }
.rc__art .sheen { filter: brightness(1.6) saturate(1.2); opacity: 0; }
.rc__art img { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* the words: number, label, reason */
.rc__t { position: absolute; transform: translate(-50%, -50%); text-align: center; visibility: hidden; will-change: opacity, filter; }
.rc__no { display: block; font-weight: 500; font-size: 1.5vw; letter-spacing: .22em; margin-right: -.22em; color: var(--tint); opacity: .85; margin-bottom: .45vw;
  text-shadow: 0 0 1.2vw color-mix(in srgb, var(--tint) 45%, transparent); }
.rc__label { display: block; font-weight: 500; font-size: 1.5vw; letter-spacing: .22em; margin-right: -.22em; text-transform: uppercase; color: var(--tint);
  margin-bottom: .9vw; text-shadow: 0 0 1.2vw color-mix(in srgb, var(--tint) 45%, transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.rc__line { display: block; font-weight: 340; font-size: 2.32vw; line-height: 1.24; letter-spacing: -.004em; text-wrap: balance;
  text-shadow: 0 0 1.6vw rgba(220, 220, 255, .22), 0 0 .3vw rgba(0, 0, 0, .6); }
.rc__w { display: inline-block; white-space: nowrap; }
.rc__l { display: inline-block; opacity: 0; }

/* the 25th reason rolls up larger, like the credits do */
.rc__t--roll .rc__no { font-size: 1.9vw; margin-bottom: .55vw; }
.rc__t--roll .rc__label { font-size: 1.9vw; margin-bottom: 1.1vw; }
.rc__t--roll .rc__line { font-size: 3vw; line-height: 1.2; }

/* the title, on the plain screen, the way Our Wishes opens */
.rc__title { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 16px 6vh; pointer-events: none; }
.rc__title h1 { margin: 0; font-weight: 300; font-size: clamp(3rem, 15vw, 8rem); line-height: .95; letter-spacing: -0.03em; opacity: 0; will-change: transform, opacity, filter; }