/* 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 stay plain black, no blue wash (the user's call: the navy and cyan
     glow made the page turn blue between the sections that paint their own black) */
  --pw-night-field: linear-gradient(transparent, transparent);
}
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 cobalt grid texture of the
   cubes scene, which does not invert. Its veils are taken off so the dots read pure white; the
   floor's shader (consistency.js) darkens the field by the veil's amount instead, so the blue
   and the headline's contrast stay as they were */
#philosophy:has(#cubes-nav .indexes__item:nth-child(3).active) #overlay-wrap .overlay:first-child { background-color: transparent; }
/* the template's dark bands across the middle of the floor (#grid-bg), same reason */
#philosophy #grid-bg .grid-bg__overlay { display: none; }
#philosophy:has(#cubes-nav .indexes__item:nth-child(3).active) #overlay-wrap .overlay:nth-child(2),
#philosophy:has(#cubes-nav .indexes__item:nth-child(3).active) #overlay-wrap .overlay:nth-child(3) { background-image: none; }

/* the logo (tools/make_logo.py: a textured gem and "Studio" in a cobalt gradient) keeps its own
   colours; the template paints every inline icon path in the text colour */
.svg-wrapper svg[data-logo=studio] path[fill="#141414"] { fill: #141414; }
.svg-wrapper svg[data-logo=studio] path[fill^="url"] { fill: url(#studio-ink); }
/* inverted theme: a faint edge so the near-black gem still reads on the dark page */
html[data-theme=dark] svg[data-logo=studio] path[fill="#141414"] { stroke: rgb(255 255 255 / .22); stroke-width: 1.5; }
/* the footer repeats the logo over the page with mix-blend-mode: difference (made for a flat
   black wordmark); with the logo's own colours that turned the cobalt yellow, so it blends normally */
.contact .logo-wrap, .logo-wrap:has(svg[data-logo=studio]) { mix-blend-mode: normal !important; }
/* "Our Vision", Expression: the template's soft gradient bands round the old room render (four
   overlapping linear gradients) made the box a shade lighter than the black around it, with
   octagonal rings; the golden ratio drawing (golden.js) sits on the section's own black instead.
   The render's canvas is hidden too (the drawing replaced it) */
#philosophy .video-inner .inner-img,
#philosophy .video-inner .video-gradients { visibility: hidden !important; }
/* the contact section's black wipe (two bars scaling in over the footer at the end of the page) is
   off: the footer stays on the paper, with the logo in its own colours */
#contact .contact-bg .bg-line { display: none !important; }
/* hero: the line under the nav bar, thicker and darker (the user's call; the hero's diagonal is
   left as the template drew it). The header blends with "difference", so the line is drawn light:
   it comes out dark on the paper and light on the inverted night */
.header-container::before {
  height: .125rem !important;
  background-color: rgb(242 240 240 / .5) !important;
}
/* hero diagonal: as the template drew it above the nav bar's line, dark below it. The dark copy is
   this ::after, masked to start at the nav line (--pw-nav-y, set by hero-tagline.js). The layer
   blends with "difference", so dark comes from drawing it light */
.hero-grid-line:nth-child(3)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--angle, 180deg), transparent calc(50% - .05rem),
    rgb(242 240 240 / .5) calc(50% - .05rem), rgb(242 240 240 / .5) calc(50% + .05rem), transparent calc(50% + .05rem));
  -webkit-mask-image: linear-gradient(transparent var(--pw-nav-y, 0px), #000 var(--pw-nav-y, 0px));
  mask-image: linear-gradient(transparent var(--pw-nav-y, 0px), #000 var(--pw-nav-y, 0px));
  pointer-events: none;
}
/* "Our Vision" descriptions (Expression, Consistency): a touch larger (the user's call; was the p1 18px) */
#philosophy .content-description.p1 { font-size: 1.25rem; line-height: 1.28; }
@media (max-width: 1023px) { #philosophy .content-description.p1 { font-size: 1.0625rem; } }
/* phones: the hero diagonal comes out of the screen's middle line as "Meaning Made Visible" rises and
   is the edge that reveals it (angle and strength from hero-tagline.js); hidden before that */
@media (max-width: 1023px) {
  #hero .hero-grid-line:nth-child(3) {
    background-image: linear-gradient(var(--pw-ang, 180deg), transparent calc(50% - .03125rem), var(--c-base-line-dark-bg) calc(50% - .03125rem), var(--c-base-line-dark-bg) calc(50% + .03125rem), transparent calc(50% + .03125rem)) !important;
    opacity: var(--pw-lo, 0);
  }
  #hero .hero-grid-line:nth-child(3)::after {
    background-image: linear-gradient(var(--pw-ang, 180deg), transparent calc(50% - .05rem),
      rgb(242 240 240 / .5) calc(50% - .05rem), rgb(242 240 240 / .5) calc(50% + .05rem), transparent calc(50% + .05rem));
  }  /* the words' mask turns with the same angle as the line */
  #hero .tagline-wrap.is-masked {
    -webkit-mask-image: linear-gradient(var(--pw-ang, 180deg), #000 50%, transparent 50%);
    mask-image: linear-gradient(var(--pw-ang, 180deg), #000 50%, transparent 50%);
  }
}
/* phones: iOS Safari ignores background-attachment: fixed, so Works' own copy of the blue field was
   stretched over the whole section and met the page's field (fixed, behind) with a hard seam at
   "WE DO". There the section is transparent and the page's field shows through, one continuous blue
   (#main-page is .dark across Works) */
@media (max-width: 1023px) {
  #works.works { background: transparent !important; }
}