/* Super Warsztaty, the home page. Written by hand after the old site's Tailwind classes: sizes,
   colours and breakpoints follow Tailwind's scale (xs 480px, sm 640px, md 768px). Anything that
   waits for an animation is hidden only under `.js`, so without JS the whole page shows. */

:root {
  --blue-100: oklch(93.2% 0.032 255.585);
  --blue-300: oklch(80.9% 0.105 251.813);
  --blue-400: oklch(70.7% 0.165 254.624);
  --blue-950: oklch(28.2% 0.091 267.935);
  --teal-300: oklch(85.5% 0.138 181.071);
  --teal-500: oklch(70.4% 0.14 182.503);
  --orange-100: oklch(95.4% 0.038 75.164);
  --orange-200: oklch(90.1% 0.076 70.697);
  --yellow-100: oklch(97.3% 0.071 103.193);
  --yellow-200: oklch(94.5% 0.129 101.54);
  --indigo-300: oklch(78.5% 0.115 274.713);
  --slate-800: oklch(27.9% 0.041 260.031);
  --highlight: #6bffb3;
  --route: #50f1a3;
}

/* ---- reset (what Tailwind's preflight did) ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html {
  background: #111;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
a { color: inherit; text-decoration: inherit; }
h2, h3 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
html:not(.js) .js-only { display: none; }

/* ---- shared pieces ---- */
.sections {
  background: linear-gradient(#4071b5, #5250a8);
  overflow-x: clip;
  padding-bottom: 1.25rem;
}
.narrow { width: 100%; max-width: 42rem; margin-inline: auto; }
.faded { opacity: 0.8; }
.rounded { border-radius: 0.25rem; overflow: hidden; }
.spaced { margin-block: 1.25rem; }
.spaced-bottom { margin-bottom: 1.25rem; }
.hl { color: var(--highlight); }
.light-blue { color: var(--blue-300); }
.white { color: white; }
.rule {
  height: 0.25rem;
  width: 100%;
  max-width: 20rem;
  margin: 1rem auto;
  background: color-mix(in oklab, var(--indigo-300) 50%, transparent);
}
.rule.wider { margin-block: 0.5rem; }
@media (min-width: 480px) { .rule.wider { max-width: 28rem; } }
@media (min-width: 640px) { .rule.wide { max-width: 24rem; } }
.copy { max-width: 42rem; margin: 0.75rem 1.25rem; }
.copy.centered { max-width: 36rem; margin-inline: auto; }
.sub-title { text-align: center; font-size: 1.5rem; line-height: 2rem; margin-block: 1.25rem; }
.big-title { text-align: center; font-size: 2.25rem; line-height: 2.5rem; }
.copy.big-title { margin-block: 0.5rem; }
.big-title.padded { padding: 1.25rem; }
.big-button {
  display: block;
  max-width: 20rem;
  margin: 1.25rem auto 0;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  background: rgb(0 0 0 / 0.2);
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.big-button:hover { background: rgb(255 255 255 / 0.1); }

/* Text that fades in once it is in view (sw.js adds .shown), or comes in letter by letter. */
.js .reveal { opacity: 0; transition: opacity 1s; }
.js .reveal.shown { opacity: 1; }
.js .spell { opacity: 0; }
.spell .word { display: inline-block; white-space: nowrap; }
.spell .char { display: inline-block; }

/* A part that unfolds on a button press; without JS it is simply open. */
.unfold, .fold-button { display: grid; grid-template-rows: 1fr; }
.unfold > div, .fold-button > div { min-height: 0; overflow: hidden; }
.js .unfold { grid-template-rows: 0fr; transition: grid-template-rows 2s ease; }
.js .fold-button { transition: grid-template-rows 2s ease; text-align: center; }
.js .fold.open > .unfold { grid-template-rows: 1fr; }
.js .fold.open > .fold-button { grid-template-rows: 0fr; }

@keyframes bounce-in {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  0% { transform: scale3d(0, 0, 0); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  to { transform: scale3d(1, 1, 1); opacity: 1; }
}

/* ---- welcome: SW WEEKENDS, the logo, the motto ---- */
.welcome {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding-block: clamp(0.75rem, 3svh, 2rem);
}
.welcome-block {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 36rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  text-align: center;
}
.announcement {
  margin-bottom: clamp(1rem, 7svh, 5rem);
  white-space: nowrap;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.15;
}
.weekends-link {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding-inline: 0.5rem;
  border-radius: 0.25rem;
  outline: none;
  transition: transform 0.15s;
}
.weekends-link:hover { transform: scale(1.03); }
.weekends-link:focus-visible { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.8); }
.signup-line { display: block; }
.js .signup-line { opacity: 0; }
.weekends-link:hover .signup-line, .weekends-link:focus-visible .signup-line { opacity: 1 !important; }
.tagline {
  margin-top: 0.25rem;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.3;
  color: var(--blue-300);
}

/* A light sweeping over SW WEEKENDS and sparkles around it, while .lit is on. */
.weekends-link::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -0.15em;
  bottom: -0.15em;
  left: -55%;
  width: 58%;
  border-radius: 0.45rem;
  background: linear-gradient(105deg, transparent, rgb(168 85 247 / 55%), rgb(251 146 60 / 65%), transparent);
  filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  animation: sweep 7s linear infinite paused;
}
.sparkles { position: absolute; z-index: 1; inset: -0.35em -0.5em; pointer-events: none; }
.sparkle {
  position: absolute;
  top: var(--sparkle-y, 50%);
  left: var(--sparkle-x, 50%);
  width: var(--sparkle-size, 3px);
  height: var(--sparkle-size, 3px);
  border-radius: 1px;
  background: var(--sparkle-color, #fff4c7);
  opacity: 0;
  animation: sparkle 7s var(--sparkle-delay, 0ms) ease-in-out infinite paused;
}
.weekends-link.lit::before, .weekends-link.lit .sparkle { animation-play-state: running; }
@keyframes sweep {
  0% { left: -55%; opacity: 0; }
  1% { opacity: 0.8; }
  8% { left: 16%; opacity: 0.7; }
  14%, 100% { left: 70%; opacity: 0; }
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: rotate(45deg) scale(0.2); }
  4% { opacity: 0.75; }
  9% { opacity: 1; transform: rotate(45deg) scale(var(--sparkle-scale, 1.2)); }
  15% { opacity: 0.7; transform: rotate(45deg) scale(1); }
  20% { opacity: 0; transform: rotate(45deg) scale(0.4); }
}

/* The logo: both hexagons spin in from the sides, then the words slide in. */
.logo svg { position: relative; z-index: 10; width: 9rem; pointer-events: none; }
#l-hex, #per, #sztaty { fill: #d01e4c; }
#r-hex, #su, #war { fill: #feea53; }
#l-hex { transform-origin: 120px; opacity: 0; transform: translateX(-400px) rotate(-270deg); animation: fly-to-center 2s forwards; }
#r-hex { transform-origin: 320px; opacity: 0; transform: translateX(400px) rotate(270deg); animation: fly-to-center 2s forwards; }
#su, #war { transform-origin: center; transform: translateX(400px); }
#per, #sztaty { transform-origin: center; transform: translateX(-400px); }
#su, #war, #per, #sztaty { opacity: 0; animation: fly-to-center 1s 1.2s both; }
@keyframes fly-to-center {
  20% { opacity: 0; }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

.main-phrase { display: grid; grid-template-rows: 1fr; }
.main-phrase > p { min-height: 0; overflow: hidden; }
.js .main-phrase { animation: open-rows 1s 1.2s both; }
@keyframes open-rows { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
.main-phrase p {
  margin: 0.5rem 0 2rem;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.3;
  color: var(--blue-100);
}

@media (min-width: 768px) {
  .logo svg { width: 12rem; }
}
@media (max-height: 560px) {
  .welcome { padding-block: clamp(0.5rem, 2svh, 0.875rem); }
  .announcement { margin-bottom: clamp(0.5rem, 3svh, 1.5rem); font-size: clamp(1.5rem, 6svh, 2rem); }
  .tagline { margin-top: 0.2rem; font-size: clamp(0.8rem, 3svh, 1rem); }
  .logo svg { width: clamp(7rem, 28svh, 9rem); }
  .main-phrase p { margin-top: 0.25rem; font-size: clamp(0.8rem, 3svh, 1rem); }
}

/* ---- account: sign up, sign in, or the way to one's profile ---- */
.account-callout { display: flex; flex-direction: column; align-items: center; }
.js .account-callout { animation: callout-in 0.7s 2s both; }
@keyframes callout-in { from { opacity: 0; transform: translateY(1.5rem) scale(0.8); } }
.account-join, .account-profile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border-radius: 0.75rem;
  background: rgb(0 0 0 / 0.2);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.15s;
}
.account-join:hover, .account-profile:hover { background: rgb(255 255 255 / 0.2); }
.account-join:focus-visible, .account-profile:focus-visible, .account-login:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.account-note { font-size: 0.8rem; font-weight: 400; color: var(--blue-100); }
.account-login {
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: var(--blue-100);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--blue-100) 40%, transparent);
  text-underline-offset: 4px;
}
.account-login:hover { color: white; }
@media (max-height: 560px) {
  .account-join, .account-profile { padding-block: 0.25rem; font-size: clamp(0.9rem, 4svh, 1.25rem); }
  .account-login { margin-top: 0.25rem; padding-block: 0.1rem; font-size: clamp(0.7rem, 2.5svh, 0.8rem); }
}

/* ---- offer: directions, benefits, photos, video, more ---- */
.offer { display: flex; flex-direction: column; align-items: stretch; padding-block: 1.25rem; margin-bottom: 2.5rem; }

/* The directions scroll by on their own; the list is in twice, so moving by half loops. */
.scroller { container-type: inline-size; overflow: hidden; }
.scroller-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.scroller-track li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: max(9rem, 25cqi);
  height: 10.5rem;
  text-align: center;
}
.scroller-track img { height: 5.25rem; width: auto; margin-inline: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

.benefits-title { text-align: center; font-size: 1.5rem; line-height: 2rem; }
.benefits { width: fit-content; margin: 1rem auto 2.25rem; padding-inline: 1rem; list-style: disc inside; }
@media (min-width: 480px) {
  .benefits-title { font-size: 2.25rem; line-height: 2.5rem; }
  .benefits { font-size: 1.25rem; line-height: 1.75rem; }
}

/* A photo carousel: a row of photos that snaps; sw.js adds arrows, dots, autoplay and keys. */
.carousel { position: relative; width: 100%; aspect-ratio: 1; max-height: 50vh; }
.carousel-track {
  display: flex;
  gap: 1.25rem;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.carousel-nav {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
html:not(.js) .carousel-nav { display: none; }
.carousel-arrow, .carousel-dot { pointer-events: auto; visibility: hidden; }
.carousel.active .carousel-arrow, .carousel.active .carousel-dot { visibility: visible; animation: bounce-in 1s 0.5s both; }
.carousel.active .next { animation-delay: 0.8s; }
.carousel-arrow {
  position: absolute;
  margin-inline: 0.5rem;
  padding: 1.25rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  font-weight: bold;
  user-select: none;
  transition: all 0.2s;
}
.carousel-arrow.prev { left: 0; }
.carousel-arrow.next { right: 0; }
.carousel-arrow:hover { background: rgb(255 255 255 / 0.2); }
.carousel-arrow:active { transform: scale(2); background: color-mix(in oklab, var(--teal-300) 50%, transparent); }
.carousel-dots { display: flex; align-self: flex-end; position: relative; }
.carousel-dot {
  width: 1rem;
  height: 1rem;
  margin: 0.25rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.2);
  transition: background 0.5s;
}
.carousel-dot.current { background: var(--blue-300); }
@media (min-width: 640px) {
  .carousel { aspect-ratio: 5 / 3; max-height: 80vh; }
  .carousel-arrow { font-size: 2.25rem; }
}
@media (min-width: 768px) { .carousel-arrow { padding-inline: 1rem; } }

/* "wspólnie:" and the words that fly in. */
.together { margin-bottom: 1.25rem; text-align: center; font-size: 2.25rem; line-height: 2.5rem; }
.together-title { color: var(--orange-200); }
.shared-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.5rem 1.25rem;
  width: fit-content;
  margin: 0.75rem auto 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.shared-action {
  white-space: nowrap;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  color: var(--blue-950);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.js .shared-action { opacity: 0; }
.shared-action.end { justify-self: end; text-align: right; }
.shared-action.start { justify-self: start; text-align: left; }
.shared-action.nudge { margin-left: 0.5rem; }
.tint-orange-100 { background: color-mix(in oklab, var(--orange-100) 90%, transparent); }
.tint-orange-200 { background: color-mix(in oklab, var(--orange-200) 90%, transparent); }
.tint-yellow-100 { background: color-mix(in oklab, var(--yellow-100) 90%, transparent); }
.tint-yellow-200 { background: color-mix(in oklab, var(--yellow-200) 90%, transparent); }
@media (min-width: 640px) { .shared-actions { font-size: 1.5rem; line-height: 2rem; } }

/* The film: our own picture until clicked, then YouTube's player (sw.js). */
.video-title { text-align: center; margin-block: 0.5rem; font-size: 1.5rem; line-height: 2rem; }
.video {
  position: relative;
  display: block;
  max-width: 36rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.video img, .video iframe { width: 100%; height: 100%; object-fit: cover; }
.video .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.25rem;
  height: auto;
  transform: translate(-50%, -50%);
  filter: grayscale(0.4);
  transition: filter 0.2s;
}
.video:hover .video-play, .video:focus-visible .video-play { filter: none; }

/* The program, direction by direction. */
.themes { margin-inline: 1.25rem; }
.theme-icon { height: 3.5rem; width: auto; max-width: 6rem; margin: 1.25rem auto 0; opacity: 0.8; }
.theme-name { text-align: center; font-size: 1.5rem; line-height: 2rem; color: var(--orange-200); }
.theme-activities { max-width: 36rem; margin-inline: auto; }

/* ---- the place and contact ---- */
.place-title { margin: 1.25rem; text-align: center; font-size: 2.25rem; line-height: 2.5rem; color: rgb(255 255 255 / 0.6); }
.place-title span { color: white; }
.place-body { display: flex; flex-direction: column; align-items: center; margin-bottom: 2.5rem; }
.place .copy { max-width: 32rem; margin: 0.5rem 1rem; }
.kilometers { margin-bottom: 1.25rem; font-size: 1.5rem; line-height: 2rem; }
.js .kilometers { opacity: 0; }

.map {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin: 1.25rem 0 0.5rem;
  border-radius: 0.25rem;
  border-block: 4px solid var(--teal-500);
  background: white;
  filter: hue-rotate(10deg);
}
.map > img { width: 100%; }
.map-label { position: absolute; z-index: 10; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.map-label.city { top: 72%; left: 30%; background: rgb(21 37 51 / 0.8); }
.map-label.address { top: 12%; right: 33%; font-size: 0.875rem; line-height: 1.25rem; background: rgb(21 37 51 / 0.5); transition: all 0.3s; }
.js .address-line { display: none; }
.js .address-line.shown { display: block; }
.map-route {
  position: absolute;
  z-index: 10;
  top: 6%;
  left: 40%;
  height: 61%;
  width: auto;
  max-width: none;
  fill: none;
  stroke: var(--route);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-route 4s linear alternate infinite;
}
@keyframes draw-route { to { stroke-dashoffset: 0; } }
.map-marker { position: absolute; z-index: 50; top: -10%; right: 38%; width: 2.5rem; fill: white; }
.js .map-marker { opacity: 0; }
@media (min-width: 768px) {
  .map { max-width: 32rem; }
  .map-marker { top: -5%; }
}
.place-photo { width: 100%; max-width: 32rem; margin: 1rem; }

.phones { display: flex; justify-content: center; align-items: flex-end; max-width: 100%; }
.phone { display: flex; flex-direction: column; width: 12rem; text-align: center; }
.phone-icon { width: 3rem; margin: 0 auto 1rem; }
.reveal-button, .phone-who {
  align-self: center;
  width: 10rem;
  margin-block: 0.5rem;
  padding-block: 0.5rem;
  border-radius: 0.25rem;
}
.reveal-button { background: color-mix(in oklab, var(--slate-800) 40%, transparent); user-select: none; }
.reveal-button:hover { background: color-mix(in oklab, var(--blue-400) 80%, transparent); }
.phone-who { opacity: 0.5; }
.phone-number a:hover { text-decoration: underline; }
@media (min-width: 640px) { .phone { margin: 1.25rem; } }

/* ---- sign-up, the evening photo, links ---- */
.signup { scroll-margin-top: 1.5rem; text-align: center; }
.signup-title { margin: 1.25rem; font-size: 3rem; line-height: 1; }
.evening { max-width: 56rem; margin-inline: auto; }
.evening img { margin-top: 1.25rem; opacity: 0.8; }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  max-width: 28rem;
  margin: 1.25rem auto;
  padding-block: 3rem;
  border-radius: 1rem;
  background: rgb(0 0 0 / 0.2);
}
.social {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 8rem;
  height: 10rem;
  margin: 0.25rem;
  padding: 0.5rem;
  border-radius: 1rem;
  text-align: center;
  transition: all 0.15s;
}
.social img { width: 100%; }
.social span { margin-top: 0.5rem; }
.social.first { padding-top: 1.25rem; }
.social.first span { margin-top: 1rem; }
.social:hover { background: color-mix(in oklab, var(--blue-300) 10%, transparent); transform: scale(1.1); }
.socials-title { flex-basis: 100%; text-align: center; font-size: 2.25rem; line-height: 2.5rem; }
@media (min-width: 768px) {
  .socials { max-width: 42rem; }
  .social { margin: 0.5rem; }
}

/* ---- less motion when asked for ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #l-hex, #r-hex, #su, #war, #per, #sztaty { animation: none; opacity: 1; transform: none; }
  .js .main-phrase, .js .account-callout { animation: none; }
  .scroller { overflow-x: auto; }
  .scroller-track { animation: none; }
  .weekends-link::before, .sparkle { animation: none; }
  .map-route { animation: none; stroke-dashoffset: 0; }
  .js .unfold, .js .fold-button { transition: none; }
}