/* Occasion skins. A page with an occasion (App\Services\Designs::OCCASIONS) loads this file and gets body[data-occasion].
   Each occasion has its own typeface and two ornaments (masks painted in the theme's accent and gold, so every colour
   theme works); each template places the ornaments differently (a corner, a band, a pattern), so the ten templates of
   an occasion are ten different designs. Decoration only: it never takes a tap and sits under the letter and controls.
   Colours only from themes.css. */

body[data-occasion="anniversary"] { --occ-m1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M32 4c2 15 7 22 28 28-21 6-26 13-28 28C30 45 25 38 4 32 25 26 30 19 32 4z%22/%3E%3C/svg%3E"); --occ-m2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M32 6l20 26-20 26L12 32z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22/%3E%3C/svg%3E"); --occ-head: 'Playfair Display', Georgia, serif; }
body[data-occasion="wedding"] { --occ-m1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Ccircle cx=%2224%22 cy=%2236%22 r=%2217%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22/%3E%3Ccircle cx=%2240%22 cy=%2236%22 r=%2217%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22/%3E%3Cpath d=%22M32 4l6 8-6 6-6-6z%22/%3E%3C/svg%3E"); --occ-m2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M10 54C10 26 28 10 54 10c0 28-16 44-44 44zM10 54L40 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); --occ-head: 'Great Vibes', cursive; }
body[data-occasion="partner"] { --occ-m1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M32 56S6 40 6 22c0-9 6-15 14-15 5 0 9 3 12 8 3-5 7-8 12-8 8 0 14 6 14 15 0 18-26 34-26 34z%22/%3E%3C/svg%3E"); --occ-m2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M32 56S6 40 6 22c0-9 6-15 14-15 5 0 9 3 12 8 3-5 7-8 12-8 8 0 14 6 14 15 0 18-26 34-26 34z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22/%3E%3C/svg%3E"); --occ-head: 'Caveat', cursive; --occ-body: 'Caveat', cursive; }
body[data-occasion="birthday"] { --occ-m1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Ccircle cx=%2212%22 cy=%2214%22 r=%226%22/%3E%3Crect x=%2240%22 y=%228%22 width=%2214%22 height=%226%22 rx=%222%22 transform=%22rotate%2830 47 11%29%22/%3E%3Cpath d=%22M14 44l10 4-6 9z%22/%3E%3Ccircle cx=%2250%22 cy=%2246%22 r=%225%22/%3E%3Crect x=%2230%22 y=%2230%22 width=%2212%22 height=%225%22 rx=%222%22 transform=%22rotate%28-25 36 32%29%22/%3E%3C/svg%3E"); --occ-m2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M32 6c12 0 20 9 20 20 0 12-9 22-20 24C21 48 12 38 12 26 12 15 20 6 32 6z%22/%3E%3Cpath d=%22M32 50l-4 8h8z%22/%3E%3C/svg%3E"); --occ-head: 'Fredoka', system-ui, sans-serif; --occ-body: 'Fredoka', system-ui, sans-serif; }
body[data-occasion="invitation"] { --occ-m1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M32 4c4 10 10 14 20 16-10 2-16 6-20 16-4-10-10-14-20-16 10-2 16-6 20-16z%22/%3E%3Ccircle cx=%2232%22 cy=%2246%22 r=%224%22/%3E%3Cpath d=%22M32 52v8%22 stroke=%22%23000%22 stroke-width=%223%22 fill=%22none%22/%3E%3C/svg%3E"); --occ-m2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Crect x=%226%22 y=%2214%22 width=%2252%22 height=%2236%22 rx=%224%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22/%3E%3Cpath d=%22M8 18l24 18 24-18%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); --occ-head: 'Cormorant Garamond', Georgia, serif; }

body[data-occasion] .show::before,
body[data-occasion] .show::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  -webkit-mask-repeat: var(--r, no-repeat); mask-repeat: var(--r, no-repeat);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: var(--s, 100% 100%); mask-size: var(--s, 100% 100%);
  inset: var(--i, 0 auto auto 0); width: var(--w, 120px); height: var(--h, 120px); opacity: var(--o, .4);
}
body[data-occasion] .show::before { background: var(--gold); -webkit-mask-image: var(--occ-m1); mask-image: var(--occ-m1); --i: var(--i1); --w: var(--w1); --h: var(--h1); --s: var(--s1); --r: var(--r1); --o: var(--o1); }
body[data-occasion] .show::after { background: var(--accent); -webkit-mask-image: var(--occ-m2); mask-image: var(--occ-m2); --i: var(--i2); --w: var(--w2); --h: var(--h2); --s: var(--s2); --r: var(--r2); --o: var(--o2); }

/* the headings and, for the playful occasions, the letter, in the occasion's typeface */
body[data-occasion] .letter-head h2, body[data-occasion] .mem-title, body[data-occasion] .tl-hero h2,
body[data-occasion] .side-cover h2, body[data-occasion] .sheet-head h2 { font-family: var(--occ-head); font-style: normal; font-weight: 400; }
body[data-occasion="anniversary"] .letter-head h2, body[data-occasion="anniversary"] .mem-title, body[data-occasion="anniversary"] .tl-hero h2,
body[data-occasion="anniversary"] .side-cover h2, body[data-occasion="anniversary"] .sheet-head h2 { font-style: italic; }
body[data-occasion="wedding"] .letter-head h2, body[data-occasion="wedding"] .mem-title, body[data-occasion="wedding"] .tl-hero h2,
body[data-occasion="wedding"] .side-cover h2, body[data-occasion="wedding"] .sheet-head h2 { font-size: 1.25em; letter-spacing: .01em; }
body[data-occasion="invitation"] .letter-head h2, body[data-occasion="invitation"] .mem-title, body[data-occasion="invitation"] .tl-hero h2,
body[data-occasion="invitation"] .side-cover h2, body[data-occasion="invitation"] .sheet-head h2 { font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .78em; line-height: 1.3; }
body[data-occasion="partner"] .letter-text, body[data-occasion="partner"] .tl-text, body[data-occasion="partner"] .side-text,
body[data-occasion="partner"] .sky-card-text, body[data-occasion="partner"] .sheet-body { font-family: var(--occ-body); font-style: normal; font-size: 1.28em; }
body[data-occasion="birthday"] .letter-text, body[data-occasion="birthday"] .tl-text, body[data-occasion="birthday"] .side-text,
body[data-occasion="birthday"] .sky-card-text, body[data-occasion="birthday"] .sheet-body { font-family: var(--occ-body); font-style: normal; font-size: 1.05em; }

/* where each template wears the ornaments: --i inset, --w/--h box, --s mask size, --r repeat, --o opacity; 1 = first, 2 = second */
body[data-occasion][data-layout="classic"] { --i1: 14px 14px auto auto; --w1: 150px; --h1: 150px; --o1: .4; --i2: auto auto 14px 14px; --w2: 90px; --h2: 90px; --o2: .4; }
body[data-occasion][data-layout="cinematic"] { --i1: 0 0 auto 0; --w1: auto; --h1: 34px; --s1: 34px 34px; --r1: repeat-x; --o1: .5; --i2: auto 0 0 0; --w2: auto; --h2: 34px; --s2: 34px 34px; --r2: repeat-x; --o2: .5; }
body[data-occasion][data-layout="polaroid"] { --i1: 0; --w1: auto; --h1: auto; --s1: 76px 76px; --r1: repeat; --o1: .14; --i2: 14px auto auto 14px; --w2: 90px; --h2: 90px; --o2: .45; }
body[data-occasion][data-layout="envelope"] { --i1: 14px auto auto 14px; --w1: 110px; --h1: 110px; --o1: .45; --i2: auto 14px 14px auto; --w2: 110px; --h2: 110px; --o2: .45; }
body[data-occasion][data-layout="scratch"] { --i1: 0; --w1: auto; --h1: auto; --s1: 120px 120px; --r1: repeat; --o1: .12; --i2: 16px auto auto calc(50% - 40px); --w2: 80px; --h2: 80px; --o2: .5; }
body[data-occasion][data-layout="storybook"] { --i1: 0 auto 0 0; --w1: 34px; --h1: auto; --s1: 34px 34px; --r1: repeat-y; --o1: .5; --i2: 0 0 0 auto; --w2: 34px; --h2: auto; --s2: 34px 34px; --r2: repeat-y; --o2: .5; }
body[data-occasion][data-layout="memory"] { --i1: auto 0 0 0; --w1: auto; --h1: 40px; --s1: 40px 40px; --r1: repeat-x; --o1: .5; --i2: 14px auto auto 14px; --w2: 70px; --h2: 70px; --o2: .45; }
body[data-occasion][data-layout="timeline"] { --i1: 0 0 0 auto; --w1: 36px; --h1: auto; --s1: 36px 36px; --r1: repeat-y; --o1: .5; --i2: auto auto 14px 14px; --w2: 80px; --h2: 80px; --o2: .4; }
body[data-occasion][data-layout="gift"] { --i1: 12px auto auto calc(50% - 60px); --w1: 120px; --h1: 120px; --o1: .45; --i2: auto 0 0 0; --w2: auto; --h2: 30px; --s2: 30px 30px; --r2: repeat-x; --o2: .5; }
body[data-occasion][data-layout="stars"] { --i1: 0; --w1: auto; --h1: auto; --s1: 90px 90px; --r1: repeat; --o1: .14; --i2: auto 14px 14px auto; --w2: 140px; --h2: 140px; --o2: .4; }
body[data-occasion][data-layout="halloween"] { --i1: 0; --w1: auto; --h1: auto; --s1: 90px 90px; --r1: repeat; --o1: .12; --i2: auto 14px 14px auto; --w2: 120px; --h2: 120px; --o2: .35; }
body[data-occasion][data-layout="christmas"] { --i1: 0; --w1: auto; --h1: auto; --s1: 90px 90px; --r1: repeat; --o1: .12; --i2: auto 14px 14px auto; --w2: 120px; --h2: 120px; --o2: .35; }
body[data-occasion][data-layout="valentine"] { --i1: 12px auto auto 12px; --w1: 110px; --h1: 110px; --o1: .4; --i2: auto 12px 12px auto; --w2: 110px; --h2: 110px; --o2: .4; }