/* The tone of the page, by season. Each block restyles surfaces, edges, atmosphere, corner shape and the weight of the headings,
   not only the accent colour. Ordinary Time is the default in theme.css. */
html[data-tone="ordinary"] { --atmos: radial-gradient(ellipse 90% 50% at 50% 115%, rgba(56, 96, 48, .20), transparent 70%); }

html[data-tone="advent"] {
  --void: #100E17; --crypt: #181522; --deep: #0C0A12; --rule: #2A2540; --line: #6A6485;
  --bone: #ECE6F0; --bone-dim: #B0A9C0; --soft: #CCC5D8; --muted: #8E87A3;
  --gold: #C9AE6B; --gold-hi: #E0C98A; --hour-line: #3F3860; --hour-now: #241D38;
  --atmos: radial-gradient(ellipse 80% 55% at 50% 120%, rgba(110, 70, 150, .34), transparent 70%), radial-gradient(ellipse 50% 30% at 85% 0%, rgba(110, 70, 150, .12), transparent 70%);
  --r: 10px; --hls: .03em;
}
html[data-tone="gaudete"] {
  --void: #17101A; --crypt: #221621; --deep: #120B14; --rule: #3A2438; --line: #85647E;
  --bone: #F5E8ED; --bone-dim: #C9ABB8; --soft: #DEC7D2; --muted: #A98595;
  --gold: #DDB278; --gold-hi: #F0CB98; --hour-line: #5A3A55; --hour-now: #35192F;
  --atmos: radial-gradient(ellipse 90% 60% at 50% 115%, rgba(194, 122, 140, .30), transparent 70%), radial-gradient(ellipse 60% 40% at 10% 100%, rgba(255, 190, 150, .10), transparent 70%);
  --r: 16px; --rb: 22px; --hw: 500;
}
html[data-tone="christmas"] {
  --g: var(--glow, 1);
  --void: color-mix(in srgb, #221907 calc(var(--g) * 100%), #12100E);
  --crypt: color-mix(in srgb, #36270C calc(var(--g) * 100%), #1A1713);
  --deep: color-mix(in srgb, #160E04 calc(var(--g) * 100%), #0D0B09);
  --rule: color-mix(in srgb, #5E4720 calc(var(--g) * 100%), #2A251E);
  --line: color-mix(in srgb, #AC9054 calc(var(--g) * 100%), #6F6756);
  --bone: color-mix(in srgb, #FCF2D8 calc(var(--g) * 100%), #EFE6D4);
  --bone-dim: color-mix(in srgb, #D0C19A calc(var(--g) * 100%), #B3A892);
  --soft: color-mix(in srgb, #E5D8B6 calc(var(--g) * 100%), #CFC5AF);
  --muted: color-mix(in srgb, #AB9D75 calc(var(--g) * 100%), #9A9079);
  --gold: color-mix(in srgb, #E8C56C calc(var(--g) * 100%), #D4AF5A);
  --gold-hi: color-mix(in srgb, #F7DE92 calc(var(--g) * 100%), #E8C87A);
  --on-gold: color-mix(in srgb, #1B1405 calc(var(--g) * 100%), #1A1208);
  --hour-line: color-mix(in srgb, #7C602A calc(var(--g) * 100%), #4A4336);
  --hour-now: color-mix(in srgb, #52400F calc(var(--g) * 100%), #2A2214);
  --atmos: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(240, 200, 100, calc(var(--g) * .50)), transparent 70%), radial-gradient(ellipse 90% 50% at 50% 120%, rgba(240, 200, 100, calc(var(--g) * .30)), transparent 70%);
  --r: 14px; --rb: 10px; --hw: 600; --hls: .01em;
}
html[data-tone="lent"] {
  --void: #121110; --crypt: #1A1918; --deep: #0D0C0C; --rule: #2B2926; --line: #66615A;
  --bone: #D8D2C6; --bone-dim: #A39D91; --soft: #BDB7AB; --muted: #86817A;
  --gold: #A89C80; --gold-hi: #C4B898; --on-gold: #14110D; --hour-line: #3A3733; --hour-now: #22201D;
  --atmos: none; --r: 2px; --rb: 2px; --hw: 400; --hls: .04em;
}
html[data-tone="lent"] .seasonbar { height: 2px; box-shadow: none; }
html[data-tone="lent"] .card, html[data-tone="lent"] .o-card, html[data-tone="lent"] .o-aev { border-top-width: 1px; }
html[data-tone="laetare"] {
  --void: #171214; --crypt: #211A1C; --deep: #100B0D; --rule: #382B2F; --line: #7E666C;
  --bone: #F0E3E4; --bone-dim: #C0AAAF; --soft: #D6C3C6; --muted: #9F858B;
  --gold: #CFA67C; --gold-hi: #E5C29E; --hour-line: #4F3A40; --hour-now: #33201F;
  --atmos: radial-gradient(ellipse 90% 45% at 50% 115%, rgba(194, 122, 140, .18), transparent 70%);
  --r: 8px; --rb: 6px; --hw: 500;
}
html[data-tone="passion"] {
  --void: #0A0707; --crypt: #120C0C; --deep: #060404; --rule: #2A1816; --line: #5E403B;
  --bone: #D9CBC4; --bone-dim: #9C8A84; --soft: #B5A49D; --muted: #7D6C66;
  --gold: #9C7A45; --gold-hi: #BC9760; --on-gold: #0E0806; --hour-line: #3A201D; --hour-now: #2A1210;
  --atmos: radial-gradient(ellipse 100% 40% at 50% 120%, rgba(154, 34, 24, .30), transparent 70%);
  --r: 0px; --rb: 0px; --hw: 400; --hls: .06em;
}
html[data-tone="passion"] .seasonbar { height: 2px; }
html[data-tone="passion"] .card, html[data-tone="passion"] .o-card, html[data-tone="passion"] .o-aev { border-top-width: 1px; }
html[data-tone="easterday"] {
  color-scheme: light;
  --void: #FAF4E4; --crypt: #FFFCF3; --deep: #F1E9D2; --rule: #E2D6B4; --line: #A8996F;
  --bone: #2B2418; --bone-dim: #5E5238; --soft: #46391F; --muted: #7D6F4C;
  --gold: #9A7420; --gold-hi: #B58A2A; --on-gold: #FFFBEF; --hour-line: #D6C690; --hour-now: #FFF0BE;
  --season-text: color-mix(in srgb, var(--s-fill, #b8923a) 72%, #000);
  --atmos: radial-gradient(ellipse 80% 45% at 50% -5%, rgba(255, 224, 140, .55), transparent 70%), radial-gradient(ellipse 90% 40% at 50% 120%, rgba(255, 214, 120, .35), transparent 70%);
  --r: 14px; --rb: 8px; --hw: 500;
}
/* Easter after the Sunday: the page is still lit, and the light falls slowly from the octave to Pentecost (--glow, from the calendar) */
html[data-tone="easter"] {
  --g: var(--glow, 1);
  --void: color-mix(in srgb, #261C0A calc(var(--g) * 100%), #12100E);
  --crypt: color-mix(in srgb, #3A2A0E calc(var(--g) * 100%), #1A1713);
  --deep: color-mix(in srgb, #190F05 calc(var(--g) * 100%), #0D0B09);
  --rule: color-mix(in srgb, #6E5620 calc(var(--g) * 100%), #2A251E);
  --line: color-mix(in srgb, #BC9E58 calc(var(--g) * 100%), #6F6756);
  --bone: color-mix(in srgb, #FFF6DC calc(var(--g) * 100%), #EFE6D4);
  --bone-dim: color-mix(in srgb, #DCCB9C calc(var(--g) * 100%), #B3A892);
  --soft: color-mix(in srgb, #EFE3BC calc(var(--g) * 100%), #CFC5AF);
  --muted: color-mix(in srgb, #B8A878 calc(var(--g) * 100%), #9A9079);
  --gold: color-mix(in srgb, #F0CA68 calc(var(--g) * 100%), #D4AF5A);
  --gold-hi: color-mix(in srgb, #FFE398 calc(var(--g) * 100%), #E8C87A);
  --on-gold: color-mix(in srgb, #1B1405 calc(var(--g) * 100%), #1A1208);
  --hour-line: color-mix(in srgb, #8A6C2C calc(var(--g) * 100%), #4A4336);
  --hour-now: color-mix(in srgb, #5E4516 calc(var(--g) * 100%), #2A2214);
  --atmos: radial-gradient(ellipse 80% 45% at 50% -5%, rgba(255, 220, 120, calc(var(--g) * .55)), transparent 70%), radial-gradient(ellipse 90% 50% at 50% 120%, rgba(255, 200, 90, calc(var(--g) * .62)), transparent 70%);
  --r: 12px; --rb: 8px; --hw: 500;
}
html[data-tone="pentecost"] {
  --void: #140C0A; --crypt: #1F1311; --deep: #0C0706; --rule: #3A2019; --line: #85503F;
  --bone: #FBEBE0; --bone-dim: #D2AF9D; --soft: #E6CAB9; --muted: #AB867A;
  --gold: #EAA95E; --gold-hi: #F8C686; --hour-line: #5A2E22; --hour-now: #3C1A10;
  --atmos: radial-gradient(ellipse 80% 55% at 50% 120%, rgba(255, 110, 40, .30), transparent 70%), radial-gradient(ellipse 40% 30% at 15% 0%, rgba(255, 110, 40, .10), transparent 70%);
  --r: 8px; --rb: 6px; --hw: 600;
}
html[data-tone="martyr"] {
  --void: #130B0B; --crypt: #1D1111; --deep: #0B0606; --rule: #381C1B; --line: #7E4A46;
  --bone: #F0DFDA; --bone-dim: #BEA29C; --soft: #D8C0BA; --muted: #9D7F79;
  --gold: #C9A05A; --gold-hi: #E0BB7C; --hour-line: #532A27; --hour-now: #34140F;
  --atmos: radial-gradient(ellipse 90% 45% at 50% 120%, rgba(163, 16, 28, .26), transparent 70%);
  --r: 4px; --rb: 3px; --hw: 500; --hls: .02em;
}
html[data-tone="marian"] {
  --void: #0E1220; --crypt: #151A2C; --deep: #0A0D18; --rule: #252C48; --line: #5F6A96;
  --bone: #EAEEF8; --bone-dim: #A9B2CC; --soft: #C5CCE0; --muted: #848DAB;
  --gold: #D8C27A; --gold-hi: #EBD99A; --hour-line: #38426A; --hour-now: #1F2745;
  --atmos: radial-gradient(ellipse 80% 55% at 50% 118%, rgba(110, 140, 230, .26), transparent 70%), radial-gradient(ellipse 50% 30% at 80% 0%, rgba(200, 215, 255, .08), transparent 70%);
  --r: 18px; --rb: 22px; --hw: 500;
}
html[data-tone="souls"] {
  --void: #0B0B0D; --crypt: #121214; --deep: #070708; --rule: #22222A; --line: #55556A;
  --bone: #CFCFD6; --bone-dim: #8F8F9C; --soft: #AAAAB6; --muted: #727280;
  --gold: #9A9AB0; --gold-hi: #BDBDD0; --on-gold: #0B0B0D; --hour-line: #30303C; --hour-now: #1C1C26;
  --atmos: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(150, 150, 190, .08), transparent 70%);
  --r: 2px; --rb: 2px; --hw: 400; --hls: .05em;
}
html[data-tone="souls"] .seasonbar, html[data-tone="lent"] .seasonbar { opacity: .8; }

/* a light page needs a few darker details */
html[data-tone="easterday"] .card, html[data-tone="easterday"] .o-card, html[data-tone="easterday"] .o-aev { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 30px rgba(120, 90, 20, .10); }
html[data-tone="easterday"] .btn.ghost, html[data-tone="easterday"] .o-btn.ghost { color: var(--gold); }
html[data-tone="easterday"] .seasonpick > button, html[data-tone="easterday"] .seasonpick .sp-panel { box-shadow: 0 8px 26px rgba(120, 90, 20, .18); }

/* festal: a solemnity in Ordinary Time that is not Our Lady's or a martyr's. Regal gold, like Christmas. */
html[data-tone="festal"] {
  --void: #130F0B; --crypt: #20180F; --deep: #0D0A07; --rule: #3C2E1A; --line: #8A744A;
  --bone: #FBEFD6; --bone-dim: #CFBE98; --soft: #E4D5B4; --muted: #AA9A74;
  --gold: #E6BE62; --gold-hi: #F6D98C; --on-gold: #1B1405; --hour-line: #5A4522; --hour-now: #3C2C10;
  --atmos: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(240, 190, 90, .12), transparent 70%), radial-gradient(ellipse 90% 50% at 50% 120%, rgba(200, 150, 60, .22), transparent 70%);
  --r: 12px; --rb: 8px; --hw: 600;
}

/* ---- overlay: a memorial or feast lying over the season. The tone above is untouched; the bloom, a thread of colour and the feast name change. ---- */
.ovl { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.6s ease; }
.ovl i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); will-change: transform; }
html[data-ov] .ovl { opacity: 1; }
html[data-ovl="1"] .ovl { opacity: .55; }
.wrap { position: relative; z-index: 1; }
html[data-ov="martyr"] { --ov: #b3131f; --ov-text: #e0786d; }
html[data-ov="marian"] { --ov: #6f8fe0; --ov-text: #a9bdf2; }
html[data-ov="feast"]  { --ov: #d4a83c; --ov-text: #ebc873; }
/* blood in water: dark red clouds that rise slowly from below, uncurling, never settling */
html[data-ov="martyr"] .ovl i:nth-child(1) { left: -10%; bottom: -30%; width: 70vw; height: 70vh; background: radial-gradient(closest-side, rgba(150, 10, 20, .75), rgba(110, 6, 14, .35) 55%, transparent); animation: ovRise1 46s ease-in-out infinite alternate; }
html[data-ov="martyr"] .ovl i:nth-child(2) { right: -15%; bottom: -35%; width: 60vw; height: 80vh; background: radial-gradient(closest-side, rgba(190, 20, 30, .55), rgba(120, 8, 16, .25) 55%, transparent); animation: ovRise2 61s ease-in-out infinite alternate; }
html[data-ov="martyr"] .ovl i:nth-child(3) { left: 30%; bottom: -45%; width: 30vw; height: 90vh; border-radius: 40% 60% 50% 50%; background: linear-gradient(0deg, rgba(120, 6, 14, .6), transparent 80%); filter: blur(70px); animation: ovRise3 38s ease-in-out infinite alternate; }
@keyframes ovRise1 { from { transform: translate(0, 4vh) scale(1); } to { transform: translate(14vw, -16vh) scale(1.25); } }
@keyframes ovRise2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-12vw, -22vh) scale(.9); } }
@keyframes ovRise3 { from { transform: translate(-6vw, 6vh) scaleY(.8); } to { transform: translate(8vw, -18vh) scaleY(1.2); } }
/* Our Lady: a pale blue mist coming down from above, like light through a veil */
html[data-ov="marian"] .ovl i:nth-child(1) { left: 5%; top: -35%; width: 80vw; height: 60vh; background: radial-gradient(closest-side, rgba(140, 170, 255, .38), rgba(120, 150, 240, .14) 60%, transparent); animation: ovMist1 52s ease-in-out infinite alternate; }
html[data-ov="marian"] .ovl i:nth-child(2) { right: -10%; top: -20%; width: 50vw; height: 50vh; background: radial-gradient(closest-side, rgba(210, 225, 255, .30), transparent); animation: ovMist2 44s ease-in-out infinite alternate; }
html[data-ov="marian"] .ovl i:nth-child(3) { left: 20%; top: 50%; width: 60vw; height: 40vh; background: radial-gradient(closest-side, rgba(150, 175, 245, .18), transparent); animation: ovMist1 70s ease-in-out infinite alternate-reverse; }
@keyframes ovMist1 { from { transform: translate(-6vw, 0) scale(1); } to { transform: translate(8vw, 8vh) scale(1.15); } }
@keyframes ovMist2 { from { transform: translate(4vw, -2vh) scale(1.1); } to { transform: translate(-8vw, 10vh) scale(.9); } }
/* a feast: warm gold light rising and falling, slow as a candle in a draught */
html[data-ov="feast"] .ovl i:nth-child(1) { left: 20%; top: -30%; width: 70vw; height: 60vh; background: radial-gradient(closest-side, rgba(235, 190, 80, .40), rgba(220, 170, 60, .14) 60%, transparent); animation: ovGlow 9s ease-in-out infinite alternate; }
html[data-ov="feast"] .ovl i:nth-child(2) { left: -10%; bottom: -30%; width: 55vw; height: 60vh; background: radial-gradient(closest-side, rgba(235, 190, 80, .30), transparent); animation: ovGlow 13s ease-in-out infinite alternate-reverse; }
html[data-ov="feast"] .ovl i:nth-child(3) { right: -10%; bottom: -25%; width: 50vw; height: 55vh; background: radial-gradient(closest-side, rgba(255, 210, 120, .24), transparent); animation: ovGlow 11s ease-in-out infinite alternate; }
@keyframes ovGlow { from { opacity: .55; transform: scale(.95); } to { opacity: 1; transform: scale(1.08); } }
html[data-tone="easterday"] .ovl i { mix-blend-mode: multiply; }
html[data-tone="easterday"][data-ov="feast"] .ovl i { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .ovl i { animation: none !important; } }

/* the thread: the top rule carries the overlay's colour at its right-hand end; from a feast up, so do the candle dishes and the feast name */
html[data-ov] .seasonbar { background: linear-gradient(90deg, var(--season) 0%, var(--season) 55%, var(--ov) 100%); box-shadow: 0 0 10px color-mix(in srgb, var(--ov) 55%, transparent); }
html[data-ovl="2"] { --dish: var(--ov); }

html[data-ovl="2"] .chip i { background: var(--ov-text); box-shadow: 0 0 8px var(--ov); }
html[data-ov] #feast { color: var(--ov-text) !important; }

/* Ash Wednesday: everything drained to grey. The ash itself is drawn by fx.js. */
html[data-tone="ash"] {
  --void: #0C0C0C; --crypt: #151515; --deep: #080808; --rule: #262626; --line: #5C5C5C;
  --bone: #C8C8C6; --bone-dim: #8E8E8C; --soft: #A8A8A6; --muted: #727270;
  --gold: #9A9A98; --gold-hi: #B8B8B6; --on-gold: #0C0C0C; --hour-line: #333; --hour-now: #1E1E1E;
  --season: #7A7A78; --season-text: #B0B0AE; --on-season: #101010; --cb: #4A4A48; --cc: #6A6A68;
  --atmos: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(160, 160, 160, .07), transparent 70%);
  --r: 2px; --rb: 2px; --hw: 400; --hls: .05em;
}
html[data-tone="ash"] .card, html[data-tone="ash"] .o-card, html[data-tone="ash"] .o-aev { border-top-width: 1px; }
html[data-tone="ash"] .seasonbar { height: 2px; box-shadow: none; }
html[data-tone="ash"] .vot .flame, html[data-tone="ash"] .vot .halo { filter: grayscale(1); }

/* things that move (fx.js): one canvas behind the cards, one in front of them */
.fxb, .fxf { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.fxb { z-index: 0; }
.fxf { z-index: 6; }

/* the light of the room (common.js): the edges of the page come up as the day's prayer adds up. --lit runs 0 to 1 and eases over a few seconds. */
@property --lit { syntax: '<number>'; inherits: true; initial-value: 0; }
html { transition: --lit 5s ease; }
.hearth { position: fixed; inset: 0; z-index: 12; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 56%, color-mix(in srgb, var(--gold-hi) calc(var(--lit) * 12%), transparent) 86%, color-mix(in srgb, var(--gold-hi) calc(var(--lit) * 26%), transparent) 100%);
  box-shadow: inset 0 0 calc(30px + var(--lit) * 120px) calc(var(--lit) * 8px) color-mix(in srgb, var(--gold) calc(var(--lit) * 40%), transparent); }
html[data-tone="easterday"] .hearth { mix-blend-mode: normal; opacity: .55; }
@media print { .hearth, .fxb, .fxf { display: none; } }

/* on a day with something moving, the cards let a little of it show through from behind */
html[data-fx] .card { background: color-mix(in srgb, var(--crypt) 86%, transparent); }
html[data-fx] .card.dark { background: color-mix(in srgb, var(--deep) 86%, transparent); }