/* PRINCYPL blue with grain, from princypl.com's gradients (pale cyan glow, mid blue,
   deep navy). Dark parts of the page show the full blue field, light parts a soft
   cyan and blue glow on the paper, and a film grain sits over the whole site. The
   fields are fixed to the viewport, so they run on continuously as you scroll.

   "invert color" (html[data-theme=dark], set by the template's button) turns the
   page into its negative: the paper parts become a navy-to-black night field with
   the same cyan glow, and the dark parts (Works, Services, Studio) become paper
   with the pale cyan glow. The swap cross-fades with the template's own colour
   transition: --pw-inv runs 0 -> 1 over the same .5s, and every colour stop of
   each field is weighted by it (light theme fields x (1 - inv), inverted x inv),
   so in the light theme the fields are exactly as before. */

@property --pw-inv {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  /* film grain: fractal noise as a tiled svg, grey with full alpha so blending can lift and darken */
  --pw-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.4' intercept='-.7'/><feFuncG type='linear' slope='2.4' intercept='-.7'/><feFuncB type='linear' slope='2.4' intercept='-.7'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* The fields live on body, where --pw-inv animates, so they pick up its value each frame
   (a var() is resolved on the element that declares it, then inherited as is) */
body {
  --pw-inv: 0;
  --pw-k: calc(1 - var(--pw-inv));
  transition: --pw-inv var(--transition);

  /* light theme: dark parts */
  --pw-blue-field:
    radial-gradient(70% 60% at 100% 0%, rgb(52 131 199 / calc(.55 * var(--pw-k))) 0%, rgb(21 87 188 / calc(.25 * var(--pw-k))) 45%, rgb(12 22 125 / 0) 75%),
    radial-gradient(120% 100% at 0% 100%,
      rgb(154 220 229 / var(--pw-k)) 0%, rgb(108 197 225 / var(--pw-k)) 8%, rgb(52 131 199 / var(--pw-k)) 22%,
      rgb(21 87 188 / var(--pw-k)) 36%, rgb(12 22 125 / var(--pw-k)) 56%, rgb(10 15 69 / var(--pw-k)) 78%, rgb(9 11 42 / var(--pw-k)) 100%);
  /* light theme: paper parts (a glow over the paper colour underneath) */
  --pw-paper-field:
    radial-gradient(60% 70% at 0% 100%, rgb(154 220 229 / calc(.55 * var(--pw-k))) 0%, rgb(108 197 225 / calc(.28 * var(--pw-k))) 35%, rgb(240 240 240 / 0) 70%),
    radial-gradient(55% 55% at 100% 0%, rgb(52 131 199 / calc(.18 * var(--pw-k))) 0%, rgb(240 240 240 / 0) 70%);
  /* inverted: the paper glow again, now on the dark parts, which turn light */
  --pw-paper-field-inv:
    radial-gradient(60% 70% at 0% 100%, rgb(154 220 229 / calc(.55 * var(--pw-inv))) 0%, rgb(108 197 225 / calc(.28 * var(--pw-inv))) 35%, rgb(240 240 240 / 0) 70%),
    radial-gradient(55% 55% at 100% 0%, rgb(52 131 199 / calc(.18 * var(--pw-inv))) 0%, rgb(240 240 240 / 0) 70%);
  /* inverted: the paper parts, now near black: a navy wash rising from the lower left
     with the cyan glow in it, and a faint blue glow in the top right corner */
  --pw-night-field:
    radial-gradient(60% 70% at 0% 100%, rgb(108 197 225 / calc(.30 * var(--pw-inv))) 0%, rgb(52 131 199 / calc(.22 * var(--pw-inv))) 22%, rgb(21 87 188 / calc(.14 * var(--pw-inv))) 40%, rgb(12 22 125 / calc(.07 * var(--pw-inv))) 56%, rgb(9 11 42 / 0) 75%),
    radial-gradient(55% 55% at 100% 0%, rgb(52 131 199 / calc(.15 * var(--pw-inv))) 0%, rgb(12 22 125 / calc(.06 * var(--pw-inv))) 40%, rgb(9 11 42 / 0) 70%),
    linear-gradient(20deg, rgb(9 11 42 / calc(.6 * var(--pw-inv))) 0%, rgb(9 11 42 / 0) 70%);
}
html[data-theme=dark] body { --pw-inv: 1; }

/* colour fields behind the page content: ::after on the paper parts, ::before on the dark
   parts (the template sets #main-page.dark while a dark section is on screen) */
#main-page { isolation: isolate; }
#main-page::before,
#main-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity .6s ease;
}
#main-page::before { background: var(--pw-paper-field-inv), var(--pw-blue-field); opacity: 0; }
#main-page::after { background: var(--pw-night-field), var(--pw-paper-field); opacity: 1; }
#main-page.dark::before { opacity: 1; }
#main-page.dark::after { opacity: 0; }

/* dark panels that paint their own background: same field, pinned to the viewport
   (the panel colour underneath only shows in the inverted theme, where it is the paper) */
#works.works {
  background: var(--pw-paper-field-inv), var(--pw-blue-field), var(--c-dark-primary) !important;
  background-attachment: fixed !important;
}

/* grain over everything (under the intro and the project view) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  background: var(--pw-grain);
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: .35;
}

/* note: the "Our Vision" scene's .overlay panels are left alone. The template only gives them
   a colour during its wipe moments; forcing one hid the golden ratio drawing as you scrolled in */

/* "Our Vision", golden ratio part ("Expression"): the template keeps this text light and dims
   the scene under it with fixed near-black veils, in both themes (it was made for a room video).
   Written with the theme variables instead, which are the same colours in the light theme, so
   in the inverted theme the veils lighten and the text turns dark, like the golden drawing */
#philosophy .content-1 { color: var(--c-light-primary); }
#philosophy #overlay-wrap .overlay:first-child { background-color: var(--c-dark-primary); }
#philosophy #overlay-wrap .overlay:nth-child(2) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--c-dark-primary) 0%, transparent), color-mix(in srgb, var(--c-dark-primary) 30.2%, transparent));
}
#philosophy #overlay-wrap .overlay:nth-child(3) {
  background-image: linear-gradient(0deg, color-mix(in srgb, var(--c-dark-primary) 0%, transparent), color-mix(in srgb, var(--c-dark-primary) 30.2%, transparent));
}
/* ...except while "Consistency" (index 02) is up: its floor is the fixed navy grid texture of the
   cubes scene, which does not invert, so its light text keeps the template's dark veils */
#philosophy:has(#cubes-nav .indexes__item:nth-child(3).active) #overlay-wrap .overlay:first-child { background-color: #0f0f0f; }
#philosophy:has(#cubes-nav .indexes__item:nth-child(3).active) #overlay-wrap .overlay:nth-child(2) {
  background-image: linear-gradient(180deg, #0f0f0f00, #0f0f0f4d);
}
#philosophy:has(#cubes-nav .indexes__item:nth-child(3).active) #overlay-wrap .overlay:nth-child(3) {
  background-image: linear-gradient(0deg, #0f0f0f00, #0f0f0f4d);
}