/*
 * The pictures on the release cards (ReleaseNoticeVisuals.tsx). They sit on the
 * release half, which is dark in both themes, so they draw in their own colours
 * rather than the surface tokens, like the panel around them.
 */

/* ── The card pictures ─────────────────────────────────────────────────── */

.rn-vis {
  position: absolute;
  inset: 0;
  color: #f5f5f7;
  font-family: var(--font-system);
  overflow: hidden;
}

.rn-vis-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(1 0 0 / 0.55);
}

@keyframes rn-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes rn-pop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rn-rise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rn-typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes rn-ring {
  0% {
    box-shadow: 0 0 0 0 oklch(0.72 0.19 150 / 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px oklch(0.72 0.19 150 / 0);
  }
}
@keyframes rn-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes rn-sticker {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-50deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.12) rotate(12deg);
  }
  to {
    opacity: 1;
    transform: rotate(8deg);
  }
}

/* Tours: a trail climbing to the summit at dusk, and the kinds of tour along the foot. */
.rn-vis-tours {
  background: linear-gradient(180deg, #24304f 0%, #3c4a6b 46%, #c9876a 100%);
}

.rn-vis-tours-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rn-vis-tours-sun {
  fill: #fde68a;
  filter: drop-shadow(0 0 6px oklch(0.92 0.12 90 / 0.7));
}

.rn-vis-tours-far {
  fill: #56668a;
  opacity: 0.75;
}

.rn-vis-tours-mountain {
  fill: #23344a;
}

.rn-vis-tours-snow {
  fill: #e8f0f8;
}

.rn-vis-tours-meadow {
  fill: #14202d;
}

.rn-vis-tours-trail {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 2px oklch(0.85 0.16 80 / 0.6));
  animation: rn-draw 1.3s ease-in-out 0.3s both;
}

.rn-vis-tours-walker {
  fill: #ffffff;
  filter: drop-shadow(0 0 3px #ffffff);
  opacity: 0;
  animation: rn-show 0.2s linear 1.6s both;
}

@keyframes rn-show {
  to {
    opacity: 1;
  }
}

.rn-vis-tours-flag {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: rn-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}

.rn-vis-tours-flag line {
  stroke: #f5f5f7;
  stroke-width: 1.2;
}

.rn-vis-tours-flag path {
  fill: #ef4444;
}

.rn-vis-tours-climb {
  position: absolute;
  top: 8px;
  inset-inline-start: 9px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.14);
  border: 1px solid oklch(1 0 0 / 0.18);
  backdrop-filter: blur(6px);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rn-vis-tours-kinds {
  position: absolute;
  inset-inline: 0;
  bottom: 7px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.rn-vis-tours-kind {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.12);
  border: 1px solid oklch(1 0 0 / 0.2);
  backdrop-filter: blur(6px);
  animation: rn-rise 0.3s ease both;
}

/* TREK Studio: an open book, a polaroid taped in, a title, a stamp and a sticker. */
.rn-vis-studio {
  background:
    radial-gradient(120% 90% at 50% 115%, oklch(0.62 0.14 45 / 0.38) 0%, transparent 60%),
    linear-gradient(165deg, #23201c 0%, #171513 100%);
}

.rn-vis-book {
  position: absolute;
  inset: 13px 20px 13px;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  transform: perspective(520px) rotateX(16deg);
  box-shadow:
    0 16px 22px -10px oklch(0 0 0 / 0.75),
    0 0 0 1px oklch(1 0 0 / 0.08);
}

.rn-vis-page {
  position: relative;
  flex: 1;
  min-width: 0;
}
.rn-vis-page-start {
  background: #ede2c9;
}

.rn-vis-page-end {
  background: #f6eedc;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 9px 0;
}

.rn-vis-gutter {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 16px;
  margin-inline-start: -8px;
  background: linear-gradient(90deg, transparent, oklch(0 0 0 / 0.2), transparent);
}

.rn-vis-polaroid {
  position: absolute;
  top: 11px;
  inset-inline-start: 10px;
  width: 58%;
  padding: 3px 3px 9px;
  background: #ffffff;
  transform: rotate(-6deg);
  box-shadow: 0 3px 6px oklch(0 0 0 / 0.25);
}

.rn-vis-polaroid svg {
  display: block;
  width: 100%;
  height: auto;
}
.rn-vis-sky {
  fill: #fcd5b0;
}
.rn-vis-sun {
  fill: #fb923c;
}
.rn-vis-peak-far {
  fill: #7c8aa0;
}
.rn-vis-peak-near {
  fill: #334155;
}

.rn-vis-tape {
  position: absolute;
  top: 7px;
  inset-inline-start: 30%;
  width: 24px;
  height: 7px;
  transform: rotate(-24deg);
  background: repeating-linear-gradient(45deg, #f43f5e 0 3px, #fecdd3 3px 6px);
  opacity: 0.88;
}

.rn-vis-book-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: #1f3d2b;
  white-space: nowrap;
}

.rn-vis-book-line {
  height: 3px;
  width: 88%;
  border-radius: 2px;
  background: oklch(0.4 0.03 60 / 0.3);
}
.rn-vis-book-line-short {
  width: 58%;
}

.rn-vis-stamp {
  position: absolute;
  bottom: 9px;
  inset-inline-end: 9px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px dashed #b45309;
  color: #b45309;
  transform: rotate(-14deg);
  opacity: 0.85;
}

.rn-vis-sticker {
  position: absolute;
  bottom: 7px;
  inset-inline-start: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #facc15;
  color: #fff8db;
  box-shadow:
    0 0 0 2px #ffffff,
    0 4px 10px oklch(0 0 0 / 0.4);
  animation: rn-sticker 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}

.rn-vis-sticker svg {
  fill: currentColor;
}

/* The assistant: a day in Porto proposed stop by stop, and the button that applies it. */
.rn-vis-assist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  background:
    radial-gradient(110% 80% at 0% 0%, oklch(0.55 0.2 290 / 0.36) 0%, transparent 62%),
    linear-gradient(165deg, #1d1b29 0%, #141320 100%);
}

.rn-vis-assist-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rn-vis-assist-avatar {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa 0%, #3b82f6 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px oklch(0.55 0.2 290 / 0.6);
}

.rn-vis-assist-typing {
  display: flex;
  gap: 3px;
  padding: 5px 7px;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.1);
}

.rn-vis-assist-typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f5f5f7;
  animation: rn-typing 1.2s ease-in-out infinite;
}

.rn-vis-assist-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.rn-vis-assist-typing i:nth-child(3) {
  animation-delay: 0.3s;
}

.rn-vis-assist-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 8px;
  border-radius: 9px;
  background: oklch(1 0 0 / 0.08);
  border: 1px solid oklch(1 0 0 / 0.14);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12);
}

.rn-vis-assist-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 9.5px;
  line-height: 1.35;
  animation: rn-rise 0.34s ease both;
}

.rn-vis-assist-time {
  flex: none;
  width: 27px;
  color: oklch(1 0 0 / 0.5);
  font-variant-numeric: tabular-nums;
}
.rn-vis-assist-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.rn-vis-assist-dot-sight {
  background: #f59e0b;
}
.rn-vis-assist-dot-culture {
  background: #a78bfa;
}
.rn-vis-assist-dot-view {
  background: #34d399;
}
.rn-vis-assist-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rn-vis-assist-apply {
  position: absolute;
  top: 8px;
  inset-inline-end: 9px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  animation:
    rn-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s both,
    rn-ring 2.2s ease-out 2s infinite;
}

/* Help on every screen: the help button, and hello in TREK's languages drifting past it. */
.rn-vis-help {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background:
    radial-gradient(70% 120% at 10% 50%, oklch(0.6 0.16 250 / 0.34) 0%, transparent 70%),
    linear-gradient(165deg, #1a1f2b 0%, #12151d 100%);
}

.rn-vis-help-q {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f5f5f7;
  color: #101013;
  font-size: 24px;
  font-weight: 800;
  box-shadow:
    0 0 0 5px oklch(1 0 0 / 0.08),
    0 6px 16px oklch(0 0 0 / 0.5);
}

.rn-vis-help-count {
  position: absolute;
  top: 12px;
  inset-inline-start: 42px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #3b82f6;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #12151d;
}

/* The rows slide the same way in every language: they are a picture, not text. */
.rn-vis-help-langs {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.rn-vis-hello-row {
  display: flex;
  width: max-content;
  animation: rn-marquee 34s linear infinite;
}
.rn-vis-hello-row-reverse {
  animation-direction: reverse;
  animation-duration: 40s;
}

.rn-vis-hello {
  flex: none;
  margin-inline-end: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.09);
  border: 1px solid oklch(1 0 0 / 0.13);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .rn-vis-tours-trail,
  .rn-vis-tours-flag,
  .rn-vis-tours-kind,
  .rn-vis-sticker,
  .rn-vis-assist-typing i,
  .rn-vis-assist-row,
  .rn-vis-assist-apply,
  .rn-vis-hello-row {
    animation: none;
  }
  .rn-vis-tours-trail {
    stroke-dashoffset: 0;
  }
  .rn-vis-tours-walker {
    display: none;
  }
  .rn-vis-sticker {
    transform: rotate(8deg);
  }
}

[data-reduce-motion='true'] .rn-vis-tours-trail,
[data-reduce-motion='true'] .rn-vis-tours-flag,
[data-reduce-motion='true'] .rn-vis-tours-kind,
[data-reduce-motion='true'] .rn-vis-sticker,
[data-reduce-motion='true'] .rn-vis-assist-typing i,
[data-reduce-motion='true'] .rn-vis-assist-row,
[data-reduce-motion='true'] .rn-vis-assist-apply,
[data-reduce-motion='true'] .rn-vis-hello-row {
  animation: none;
}

[data-reduce-motion='true'] .rn-vis-tours-trail {
  stroke-dashoffset: 0;
}

[data-reduce-motion='true'] .rn-vis-tours-walker {
  display: none;
}

[data-reduce-motion='true'] .rn-vis-sticker {
  transform: rotate(8deg);
}