/*
silly little ink blot/burn effect :-)

by robin
*/
@import url("https://fonts.bunny.net/css?family=Special+Elite&display=swap");

html {
  scroll-behavior: smooth;
}

body {
  /* browsers with no scroll-driven animations 
  get a small chapter gap */
  --chapter-gap: 3rem;

  /* size of white gradient overlay on top and bottom of page */
  --edge-solid: 8dvh;
  --edge-fade: 12dvh;

  padding-top: calc(40vh - 0.5em);
  padding-bottom: calc(50vh - 0.5em);
  max-width: 36em;
  margin: auto;

  background: white;
  font-family: "Special Elite", system-ui;
  font-style: normal;

  /* the actual gradient */
  &::before {
	content: "";
	position: fixed;
	pointer-events: none;
	inset: 0;
	z-index: 3;

	background:
	  linear-gradient(
		to bottom,
		#fff 0%,
		#fff var(--edge-solid),
		transparent 100%
	  ),
	  linear-gradient(to top, #fff 0%, #fff var(--edge-solid), transparent 100%);
	background-repeat: no-repeat;
	background-size: 100% calc(var(--edge-solid) + var(--edge-fade));
	background-position: top, bottom;
  }

  /* global contrast overlay, necessary for ink effect */
  &::after {
	content: "";
	position: fixed;
	pointer-events: none;
	inset: 0;
	z-index: 1;
	backdrop-filter: contrast(100);
  }
}

/* blur amounts used when scroll-driven animations are supported */
h1          { --blur-amount: 12px; }
h2          { --blur-amount: 8px; }
h3          { --blur-amount: 6px; }
h4, summary { --blur-amount: 3px; }

h1,
h2,
h3,
h4 {
  --fade-line: 20dvh;
  --pin-top: calc(var(--fade-line) - 100%);
  position: relative;
}

p,
summary {
  font-size: 1.2rem;
  line-height: 1.3;
}

/* general layout */
header,
main,
aside,
section,
footer {
  margin: 1rem;
  padding: 1rem;
}

/* yes you can just use margin-top here. but what if the web you want
website was written in arabic huh? ever thought about that? */
details ~ details {
  margin-block-start: 4rem;
}

details p {
  margin-block-start: 0.25rem;
}

h2,
h3,
h4 {
  margin-block-start: var(--chapter-gap);
}

:is(main, aside, section, footer):has(> :is(h2, h3, h4):first-child) {
  margin-block-start: var(--chapter-gap);
}
:is(main, aside, section, footer) > :is(h2, h3, h4):first-child {
  margin-block-start: 0;
}

/* for some reason we have to explicitly define our custom
properties if we want to animate them in css gradients

dont ask me why */
@property --bloom {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

p,
#sessions li,
footer li,
summary {
  color: #fff;
  padding: 0.75rem;

  /* full ink by default as fallback for
  browsers without scroll-driven animations */
  --bloom: 1;

  /* ink colours */
  --blob: rgb(from var(--tint) r g b / calc(0.7 + var(--bloom) * 0.3));
  --edge: rgb(from var(--tint) r g b / 0);
  /* bloom animation variations */
  --rise-1: min(1, var(--bloom) * 2.4);
  --rise-2: min(1, max(0, var(--bloom) * 1.8 - 0.2));
  --rise-3: max(0, var(--bloom) * 1.4 - 0.3);
  --rise-4: max(0, var(--bloom) * 1.55 - 0.5);
  --rise-5: max(0, var(--bloom) * 1.85 - 0.85);
  /* position variations */
  --field-x: 20%;
  --field-y: 20%;
  /* actual ink blots */
  background-image:
	radial-gradient(
	  circle calc(var(--rise-1) * 2.2rem) at 8% 7%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 3rem) at 41% 4%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 1.8rem) at 73% 11%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 4.5rem) at 93% 6%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 6.5rem) at 18% 22%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 5rem) at 47% 18%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 9rem) at 68% 27%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 3.2rem) at 4% 36%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-4) * 8rem) at 33% 41%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 4rem) at 58% 38%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 7.5rem) at 86% 44%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 7rem) at 14% 55%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 11rem) at 49% 58%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 2.8rem) at 71% 52%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-5) * 6rem) at 96% 61%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 8rem) at 27% 69%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 1.6rem) at 54% 73%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 10rem) at 79% 71%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 6rem) at 9% 84%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 5.5rem) at 38% 88%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-4) * 5rem) at 63% 82%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 7rem) at 91% 91%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 1.4rem) at 16% 14%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-2) * 1.9rem) at 61% 33%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-1) * 2.1rem) at 84% 76%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 1.5rem) at 45% 95%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-5) * 18rem) at 12% 8%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-4) * 19rem) at 38% 12%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 18rem) at 64% 6%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-5) * 17rem) at 90% 14%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-4) * 18rem) at 0% 25%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 19rem) at 28% 35%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-5) * 18rem) at 55% 30%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-4) * 19rem) at 82% 40%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 18rem) at 100% 28%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-5) * 19rem) at 8% 62%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-4) * 18rem) at 42% 68%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 19rem) at 70% 58%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-5) * 18rem) at 95% 72%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-4) * 19rem) at 20% 90%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-3) * 18rem) at 50% 95%,
	  var(--blob) 0 50%,
	  var(--edge)
	),
	radial-gradient(
	  circle calc(var(--rise-5) * 19rem) at 78% 88%,
	  var(--blob) 0 50%,
	  var(--edge)
	);
  /* to keep some variations in the ink blooms, we oversize 
  the background and move it around  */
  background-size: 160% 160%;
  background-repeat: no-repeat;
  background-position: var(--field-x) var(--field-y);
}

/* apply different variations to our elements */
p:nth-of-type(4n + 2),
:is(#sessions, footer) li:nth-child(4n + 2) {
  --field-x: 80%;
  --field-y: 30%;
  --rise-1: min(1, var(--bloom) * 1.9);
  --rise-2: min(1, max(0, var(--bloom) * 2.1 - 0.15));
  --rise-3: max(0, var(--bloom) * 1.6 - 0.45);
  --rise-4: max(0, var(--bloom) * 1.3 - 0.25);
  --rise-5: max(0, var(--bloom) * 1.7 - 0.7);
}

p:nth-of-type(4n + 3),
:is(#sessions, footer) li:nth-child(4n + 3) {
  --field-x: 35%;
  --field-y: 75%;
  --rise-1: min(1, max(0, var(--bloom) * 1.6 - 0.1));
  --rise-2: min(1, var(--bloom) * 2.3);
  --rise-3: max(0, var(--bloom) * 1.9 - 0.55);
  --rise-4: max(0, var(--bloom) * 1.45 - 0.4);
  --rise-5: max(0, var(--bloom) * 2 - 0.95);
}

p:nth-of-type(4n + 4),
:is(#sessions, footer) li:nth-child(4n + 4) {
  --field-x: 95%;
  --field-y: 10%;
  --rise-1: min(1, max(0, var(--bloom) * 2 - 0.3));
  --rise-2: min(1, max(0, var(--bloom) * 1.5 - 0.05));
  --rise-3: max(0, var(--bloom) * 1.25 - 0.2);
  --rise-4: max(0, var(--bloom) * 1.8 - 0.65);
  --rise-5: max(0, var(--bloom) * 1.55 - 0.5);
}

/* put images above the contrast filter as it 
deep fries them entirely */
img {
  position: relative;
  z-index: 2;
}

/* gating our animation behind a @supports 
because firefox is... trying its best */
@supports (animation-timeline: view()) {
  body {
	--chapter-gap: 100dvh;
  }

  h1,
  h2,
  h3,
  h4,
  summary {
	view-timeline-name: --blur;
	animation-timeline: --blur;
	animation: blur 0.3s ease-in-out;
	filter: blur(1.5px);
  }

  p {
	view-timeline-name: --blur;
	animation-timeline: --blur;
  }

  h1,
  h2,
  h3,
  h4 {
	opacity: 0;
	animation-name: pin, blur;
	animation-timing-function: linear, ease-in-out;
	animation-fill-mode: both, both;
	animation-timeline: --blur, --blur;
  }

  /* let scroll timelines handle visibility now, since
  we are on a browser that has actual funding (RIP firefox) */
  p,
  #sessions li,
  footer li,
  summary {
	--bloom: 0;
  }

  /* p can't blur because it breaks our links */
  p {
	animation-name: fade, bloom;
	animation-duration: 0.3s, 1s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-fill-mode: both, both;
	animation-timeline: --blur, --blur;
  }

  summary {
	animation-name: blur, bloom;
	animation-duration: 0.3s, 1s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-fill-mode: both, both;
	animation-timeline: --blur, --blur;
  }

  #sessions li,
  footer li {
	view-timeline-name: --blur;
	animation-name: bloom;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	animation-timeline: --blur;
  }

  /* hacky fix for the deep fried images problem, which only
  works when scroll-driven animations are supported */
  img {
	z-index: auto;
	filter: contrast(0.01) !important;

	view-timeline-name: --blur;
	animation-name: fade;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	animation-timeline: --blur;
  }

  /* notice i didnt set any animations on our links. this
  is because they are blue and evil and break everything */
}

/* setting our colours */
#sessions li a,
footer li a          { color: #fff; }
a:link               { color: #009dff; }
header               { --tint: #142e83; }
header p:has(a:link) { --tint: #874414; }
main                 { --tint: #127f12; }
aside                { --tint: #881e41; }
section,
footer,
summary              { --tint: #1b6e7c; }
footer li            { --tint: #862682; }

/* sessions list styling */
#sessions li         { --tint: #533902;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#sessions ul,
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sessions li + li,
footer li + li {
  margin-block-start: 1em;
}

#sessions li img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 20em;
  margin-block-start: 1rem;
}

/* FAQ styling */
summary {
  list-style: none;
  position: relative;
  padding-inline-end: 2rem;

  font-weight: bold;
  cursor: pointer;
}

/* arrow icons */
summary::-webkit-details-marker {
  display: none;
}

summary::before,
summary::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  width: 0.45em;
  height: 0.45em;

  /* you can just use border-right and border-bottom like a normal person
  but i am committed to using writing-mode compatible styling now */
  border-inline-end: 0.12em solid currentColor;
  border-block-end: 0.12em solid currentColor;
  inset-inline-end: 0.75rem;

  pointer-events: none;
  transition: opacity 0.2s ease;
}

summary::before {
  transform: translate(0, -35%) rotate(45deg);
  opacity: 1;
}

summary::after {
  transform: translate(0, 10%) rotate(-135deg);
  opacity: 0;
}

details[open] > summary::before {
  opacity: 0;
}

details[open] > summary::after {
  opacity: 1;
}

/* disable animations for people with no motion (couldnt be me) */
@media (prefers-reduced-motion: reduce) {
  h1,
  h2,
  h3,
  h4,
  summary {
	animation-name: none;
	/* keep a slight blur cause it gives a cute little outline on our text */
	filter: blur(0.4px);
  }

  h1,
  h2,
  h3,
  h4 {
	opacity: 1;
  }

  p,
  summary,
  #sessions li,
  footer li {
	--bloom: 1;
	animation-name: none;
  }

  p {
	filter: none;
	opacity: 1;
  }

  img {
	animation-name: none;
	opacity: 1;
  }
}

/* keyframes */
@keyframes bloom {
  0%,
  30% {
	--bloom: 0;
  }
  50%,
  55% {
	--bloom: 1;
  }
  75%,
  100% {
	--bloom: 0;
  }
}

@keyframes pin {
  from {
	translate: 0 calc(var(--pin-top) - 100dvh);
  }
  to {
	translate: 0 calc(var(--pin-top) + 100%);
  }
}

@keyframes blur {
  0%,
  10% {
	filter: blur(var(--blur-amount));
	opacity: 0;
  }
  40%,
  60% {
	filter: blur(0px);
	opacity: 1;
  }
  90%,
  100% {
	filter: blur(var(--blur-amount));
	opacity: 0;
  }
}

@keyframes fade {
  0%,
  10% {
	opacity: 0;
  }
  40%,
  60% {
	opacity: 1;
  }
  90%,
  100% {
	opacity: 0;
  }
}