/* ---------- fancy courier new alternative ---------- */

@font-face {
  font-family: "Courier Prime";
  src: url("assets/fonts/CourierPrime-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("assets/fonts/CourierPrime-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* betty bossi look-a-like font */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* body setup */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  color: #111;
  background-color: #fffdf5;
}


a {
  color: #111;
}

a:focus {
  outline: 3px solid #111;
  outline-offset: 2px;
}



/* ---------- CURRENTLY DISABLED crowdfunding floating link ---------- */
/* CURRENTLY UNUSED script at end of index.html checks if crowdfunding secion is on screen and then hides the floating link */

.crowdfunding-nav {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  z-index: 10;
  /* soft fade for the JS toggle (.is-hidden, see index.html) */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.crowdfunding-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  /* part of unused script */
}

.crowdfunding-nav-link {
  display: inline-block;
  padding: 0.45em 0.7em;
  font-size: 1.1rem;
}


/* ---------- sections ---------- */

.story-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 6rem 1.5rem 4rem; /* distance from screen edges -> changes below for small phones */
}

.section-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  margin: 0;
}

.section-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-content {
  position: relative;
  z-index: 2; 
  width: 100%;
  max-width: 45rem;
  margin: 0 auto;
  padding: 1em;
}

/* ---------- betty-cutouts zw sections -> placement relativ zu section-übergang  ---------- */

.betty {
  position: relative;
  height: 0;
  z-index: 1;           
}

.betty img {
  position: absolute;
  left: 2rem;           
  width: auto;
  height: 30rem;
  max-width: calc(100% - 3rem); /* space for rotation + offest */
  object-fit: contain;
  object-position: left top;
  top: -7rem;            
  transition: transform 0.25s ease; 
}

.betty--right img {
  left: auto;
  right: 1rem;
}

/* rotiert beim drüberfahren CUTE */
.betty img:hover {
  transform: rotate(2deg);
}

.betty img.tilt-right:hover {
  transform: rotate(3deg);
}

.betty img.tilt-left:hover {
  transform: rotate(-3deg);
}

/* ---------------------------------------------- */
/* ---------- MAIN TEXT BOXES / cutouts --------- */
/* ---------------------------------------------- */


/* 1 cutout row pro row */
.cutout-row {
  margin-bottom: 1.75rem;   /* zw boxen */
  text-align: center;
}

/* wenn mehr abstand zw boxen nötig */
.cutout-row--extra-gap {
  margin-bottom: 3.5rem;
}

/* wenn mehrere cutouts nebeneinander (dildos) */
.cutout-row--multi {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* MAIN TEXT HOLDER ELEMENT */
.cutout {
  display: inline-block;
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0.5em;
  padding: 0.5em 0.55em;
  text-align: left;

  /* paper background -> gets rotated below */
  background-color: #f9f8f6;
  background-image: url("assets/images/paper.jpg");
  background-repeat: no-repeat;
  background-size: auto;

  color: #111;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 400;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 9 5 4;

  /* ios safari hyphenate */
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 4;
}


/* never break links */
a,
.cutout--link {
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

/* randomly moved across paper background for some randomness. */
.cutout-row.paper-1 .cutout { background-position: 0% 10%; }
.cutout-row.paper-2 .cutout { background-position: 55% 25%; }
.cutout-row.paper-3 .cutout { background-position: 20% 70%; }
.cutout-row.paper-4 .cutout { background-position: 85% 100%; }
.cutout-row.paper-5 .cutout { background-position: 0% 0%; }
.cutout-row.paper-6 .cutout { background-position: 30% 100%; }
.cutout-row.paper-7 .cutout { background-position: 90% 12%; }
.cutout-row.paper-8 .cutout { background-position: 95% 85%; }


/* ---------- link boxen (betty bossi style) ------- */

.cutout--link,
.crowdfunding-nav-link {
  font-family: "Fraunces", "Courier Prime", serif;
  background-color: #e01212;
  background-image: none; 
  color: #fff;
  font-weight: 700;
  font-size:1.3em;
  text-decoration: underline;
}

.cutout--link:hover,
.crowdfunding-nav-link:hover {
  background-color: #bc1b10;
}

.cutout--link {
  padding: 0.7em;
  text-align: center;
  /* look & hover come from the shared link style above */
}


/* ---------- titel boxen ------- */
.cutout--heading {
  font-weight: 700;
  font-size: 1.35rem;
  text-align: center;
}

.cutout--title {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

/* ---------- subtitel boxen ------- */

.cutout--label {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ---------- handcrafted style ------- */

/* assign by hand */
.tilt-left {
  transform: rotate(-1deg);
}

.tilt-right {
  transform: rotate(1deg);
}

.tilt-left-strong {
  transform: rotate(-2deg);
}

.tilt-right-strong {
  transform: rotate(2deg);
}

.tilt-left-stronger {
  transform: rotate(-3deg);
}

.tilt-right-stronger {
  transform: rotate(3deg);
}


/* ---------- hover-herzen----------
   1. assign class "heart-pop" to .cutout element
   2. + DIESE SPAN HIER HINZUFÜGEN (im <a>-tag -> vgl index.html)

      <span class="hearts" aria-hidden="true"> <span>&lt;3</span><span>&lt;3</span><span>&lt;3</span><span>&lt;3</span><span>&lt;3</span></span>
*/

.heart-pop {
  position: relative; 
  z-index: 3;
}

.heart-pop .hearts {
  position: absolute;
  inset: 0;
  z-index: 2;           
  pointer-events: none; /*  damit man ~durchs herz hindurch~ klicken kann <33333 */
}

.heart-pop .hearts span {
  position: absolute;
  padding: 0.05em 0.2em;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  background-color: #f9f8f6;
  background-image: url("assets/images/paper.jpg");
  background-repeat: no-repeat;
  opacity: 0;
  transform: rotate(var(--rot)) scale(0.3);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.heart-pop:hover .hearts span,
.heart-pop:focus .hearts span {
  opacity: 1;
  transform: rotate(var(--rot)) scale(1);
}

/* herzen placement (random af sry) */
.heart-pop .hearts span:nth-child(1) { --rot: -14deg; top: -3rem;   left: -2rem;  transition-delay: 0.05s; }
.heart-pop .hearts span:nth-child(2) { --rot: 10deg;  top: -2.4rem;     right: 0rem;   transition-delay: 0.10s; }
.heart-pop .hearts span:nth-child(3) { --rot: -6deg;  top: 35%;       right: -3rem; transition-delay: 0.15s; }
.heart-pop .hearts span:nth-child(4) { --rot: 12deg;  bottom: -3rem;  right: 20%;     transition-delay: 0.20s; }
.heart-pop .hearts span:nth-child(5) { --rot: -10deg; bottom: -1.9rem; left: -3rem;  transition-delay: 0.25s; }


/* ---------- footer ---------- */

.site-footer {
  padding: 1.5rem 1rem 5.5rem;
  background: #fff;
  text-align: center;
  font-size: 0.9rem;
}

.site-footer p {
  margin: 0 0 0.5rem;
}

/* logo friedhof */
.funder-logos {
  max-width: 50rem; 
  margin: 0.5rem auto 2rem;
}

.funder-logos img {
  display: inline-block;
  vertical-align: middle;
  height: 2.75rem;
  margin: 0.4rem;
}

.funder-logos img.logo-big {
  height: 4.25rem;
}


/* ----- SCREEN SIZE ADJUSTMENTS ----- */

/* tinyy phones  */
@media (max-width: 390px) {
  .story-section {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .section-content {
    padding: 0;
  }

  .cutout {
    margin-right: 0.25em;
    margin-left: 0.25em;
  }

  .funder-logos img {
    height: 2.25rem;
  }

  .funder-logos img.logo-big {
    height: 3.5rem;
  }
}


/* ---------- desktop ---------- */

@media (min-width: 768px) {

  .site-footer {
    padding-bottom: 1.5rem;
  }

  .story-section {
    padding: 8rem 2rem 6rem;
  }


  /* floating link */

  .crowdfunding-nav {
  left: 10rem;
  }

  /* center content */
  .section-content {
    max-width: 34rem;
  }

  .cutout--title {
    font-size: 2.2rem;
  }

  /* betty auf desktop in voller grösse */
  .betty img {
    height: 34rem;
    top: -14rem;
  }


  /* desktop-only verschieben von boxen für *HANDMADE STYLE* */
  .nudge-left {
    margin-left: -6%;
    max-width: 90%;
  }

  .nudge-left-strong {
    margin-left: -12%;
    max-width: 80%;
  }

  .nudge-right {
    margin-left: 6%;
    max-width: 80%;
  }

  .nudge-right-strong {
    margin-left: 12%;
    max-width: 75%;
  }

  /* ---- MEHRERE CUTOUT PRO ZEILE (DESKTOP ONLY) ---- */
  .cutout-row--multi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    column-gap: 2rem;
    row-gap: 0.5rem;
  }

  .cutout-row--multi .cutout:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* von hand box als einzig in linie */
  .cutout-row--multi .cutout--wide {
    grid-column: 1 / -1;
  }

  /* hand-crafting the style */
  .cutout-row--multi .cutout:nth-child(odd) {
    position: relative;
    top: -0.5rem;
  }

  .cutout-row--multi .cutout:nth-child(even) {
    position: relative;
    top: 0.5rem;
  }

  .cutout-row--multi .cutout.cutout--wide,
  .cutout-row--multi .cutout:last-child:nth-child(odd) {
    top: 0;
  }



}


/* white transition between backgrounds */

.story-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #fffdf5, rgba(255, 253, 245, 0) 0.5rem),
    linear-gradient(to top, #fffdf5, rgba(255, 253, 245, 0) 0.5rem);
}