/* Styles for the /shortcuts.html landing page. Uses the site's CSS variables
   (set in style.css) so it inherits the marquee palette and adapts to dark mode.
   The phone demo is pure CSS so it ships without a recorded video. */

.sc-hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem);
}

.sc-eyebrow {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.2rem 0.65rem;
  background: var(--bs-primary);
  border: 2px solid var(--bs-border-color);
  border-radius: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
}

.sc-title {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}

/* Inline SVG arrow in the hero headline — yellow fill + clean black outline.
   (Replaces a `→` glyph with `-webkit-text-stroke`, which left ragged artifacts.) */
.sc-arrow {
  display: inline-block;
  width: 0.92em;
  height: 0.62em;
  margin: 0 0.14em;
  vertical-align: -0.04em;
  fill: var(--bs-primary);
  stroke: var(--bs-border-color);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.sc-lede {
  font-size: 1.1rem;
  color: var(--bs-secondary-color);
  max-width: 32rem;
  margin: 0 0 1.5rem;
}

.sc-install-glyph {
  margin-right: 0.45rem;
  font-size: 1.15em;
  vertical-align: -0.04em;
}

.sc-req {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

/* QR for desktop visitors — scan to open the install link on a phone. The shortcut
   is iOS-only, so this is hidden on small screens (mobile just taps the button). */
.sc-qr {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}
.sc-qr-img {
  display: block;
  width: 92px;
  height: 92px;
  background: #fff;
  border: 3px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 6px;
}
.sc-qr-note {
  max-width: 12rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}
@media (max-width: 575.98px) {
  .sc-qr {
    display: none;
  }
}

/* ---- Reveal on load ---- */
@keyframes scUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sc-reveal {
  animation: scUp 0.6s both;
}

.sc-reveal-2 {
  animation-delay: 0.15s;
}

/* ---- Animated phone demo (4 staged screens, ~12s loop) ---- */
.phone-demo {
  display: flex;
  justify-content: center;
}

.phone-frame {
  position: relative;
  width: 244px;
  height: 504px;
  border: 3px solid var(--bs-border-color);
  border-radius: 38px;
  background: #14181c; /* Letterboxd-dark backdrop shows behind the sheets */
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--bs-border-color);
  color: #fff;
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 18px;
  border-radius: 10px;
  background: #000;
  z-index: 6;
}

.phone-screen {
  position: absolute;
  inset: 0;
  padding: 40px 16px 18px;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.scr-lb {
  padding: 0;
  animation: scA 12s infinite;
}
.scr-actions {
  justify-content: flex-end;
  padding: 0;
  animation: scB 12s infinite;
}
.scr-share {
  justify-content: flex-end;
  padding: 0;
  animation: scC 12s infinite;
}
.scr-kino {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  animation: scD 12s infinite;
}

@keyframes scA {
  0%,
  22% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
  }
}
@keyframes scB {
  0%,
  24% {
    opacity: 0;
  }
  29%,
  47% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
  }
}
@keyframes scC {
  0%,
  49% {
    opacity: 0;
  }
  54%,
  72% {
    opacity: 1;
  }
  77%,
  100% {
    opacity: 0;
  }
}
@keyframes scD {
  0%,
  74% {
    opacity: 0;
  }
  79%,
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 1. Letterboxd film page — backdrop with back/⋯ nav, then title + credit */
.lb-backdrop {
  position: relative;
  height: 215px;
  padding: 34px 14px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: linear-gradient(150deg, #7a5a48 0%, #3a4654 45%, #14181c 100%);
}
.lb-backdrop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, #14181c);
}
.lb-nav {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.lb-opts {
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}
.lb-body {
  position: relative;
  z-index: 2;
  margin-top: -12px;
  padding: 0 16px;
}
.lb-title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}
.lb-credit {
  color: #8a99a8;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  margin-top: 0.5rem;
}
.lb-director {
  font-weight: 700;
  font-size: 0.85rem;
}
.lb-rating {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.lb-stars {
  color: #00e054;
}
.lb-star-dim {
  color: #36424d;
}
.lb-score {
  color: #9aabbb;
  font-size: 0.78rem;
  letter-spacing: 0;
  margin-left: 0.35rem;
}

/* 2. Letterboxd action sheet (tap Share) */
.lb-sheet-head {
  text-align: center;
  padding-bottom: 10px;
}
.lb-sheet-title {
  font-weight: 800;
  font-size: 1.05rem;
}
.lb-sheet-year {
  color: #8a99a8;
  font-size: 0.8rem;
}
.lb-sheet {
  background: #2c3440;
  border-radius: 14px;
  margin: 0 8px;
  overflow: hidden;
}
.lb-acts {
  display: flex;
}
.lb-act {
  flex: 1;
  text-align: center;
  padding: 0.7rem 0.2rem;
  color: #cdd9e3;
  font-size: 0.62rem;
}
.lb-act-ico {
  display: block;
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.ico-log {
  color: #00e054;
}
.ico-like {
  color: #ff8000;
}
.ico-watch {
  color: #9aabbb;
}
.lb-rated {
  text-align: center;
  padding: 0.55rem;
  font-size: 0.8rem;
  color: #cdd9e3;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lb-rated-stars {
  color: #00e054;
  letter-spacing: 1px;
}
.lb-row {
  padding: 0.6rem;
  text-align: center;
  font-size: 0.85rem;
  color: #cdd9e3;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lb-row-share {
  position: relative;
  color: #fff;
  font-weight: 700;
}
.lb-done {
  background: #2c3440;
  color: #cdd9e3;
  text-align: center;
  font-weight: 700;
  padding: 0.7rem;
  border-radius: 14px;
  margin: 8px 8px 10px;
}

/* 3. iOS share sheet (dark) — header, apps row, action circles */
.ios-sheet {
  background: #1c1c1e;
  border-radius: 14px;
  margin: 0 7px 8px;
  padding: 12px;
}
.ios-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ios-poster {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7a5a48, #2a3340);
}
.ios-head-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.ios-head-txt b {
  font-size: 0.85rem;
}
.ios-head-txt i {
  font-style: normal;
  color: #8e8e93;
  font-size: 0.72rem;
}
.ios-x {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3a3a3c;
  color: #aeaeb2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.ios-apps {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ios-app {
  flex: 1;
  text-align: center;
  font-size: 0.52rem;
  color: #dcdce0;
}
.ios-app-ic {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  margin: 0 auto 0.25rem;
}
.ic-airdrop {
  background: linear-gradient(135deg, #3a7bd5, #1e5fbf);
}
.ic-msg {
  background: linear-gradient(135deg, #5be158, #2ec24e);
}
.ic-mail {
  background: linear-gradient(135deg, #3aa0ff, #1e7bff);
}
.ic-notes {
  background: linear-gradient(135deg, #fef08a, #fcd34d);
}
.ios-acts {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.7rem;
}
.ios-actn {
  position: relative;
  flex: 1;
  text-align: center;
  font-size: 0.52rem;
  color: #dcdce0;
}
.ios-actn-c {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin: 0 auto 0.25rem;
  background: #3a3a3c;
  font-size: 1.1rem;
}
.ios-actn-kino .ios-actn-c {
  box-shadow: 0 0 0 2px var(--bs-primary);
}

/* 4. KinoCalendar showtimes */
.scr-kino {
  padding: 40px 16px 18px;
}
.kino-top {
  font-weight: 800;
  color: var(--bs-primary);
  margin-bottom: 0.75rem;
}
.kino-title {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.kino-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.92rem;
}
.kino-row b {
  color: #000;
  background: var(--bs-primary);
  border: 1.5px solid var(--bs-border-color);
  border-radius: 0.3rem;
  padding: 0 0.35rem;
}

/* tap indicators — pulse; visibility is gated by the parent screen's opacity */
.tap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  animation: tapPulse 1.3s ease-out infinite;
}
.tap-kino {
  border-color: var(--bs-primary);
}
@keyframes tapPulse {
  0% {
    transform: scale(0.45);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-reveal,
  .phone-screen,
  .tap {
    animation: none !important;
  }
  .scr-lb,
  .scr-actions,
  .scr-share {
    opacity: 0;
  }
  .scr-kino {
    opacity: 1;
  }
}

/* ---- Sections ---- */
.sc-h2 {
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 1.5rem;
}

.sc-steps,
.sc-using,
.sc-faq {
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  border-top: 3px solid var(--bs-border-color);
}

.sc-step {
  height: 100%;
  padding: 1.5rem;
  border: 3px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg);
}
.sc-step h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0.75rem 0 0.4rem;
}
.sc-step p {
  margin: 0;
  color: var(--bs-secondary-color);
}
.sc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-weight: 800;
  color: #000;
  background: var(--bs-primary);
  border: 3px solid var(--bs-border-color);
  border-radius: 999px;
}

.sc-using-list {
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 40rem;
  padding-left: 1.2rem;
}

.sc-faq .accordion {
  max-width: 44rem;
}