/* OXXYZ Media, the Wix site (oxxyz.com, 2025) rebuilt as plain HTML, CSS and JS.
   Shared styles for all four pages: fonts, the layout unit, type, buttons, header, menu, footer, motion.

   How sizes work (the same idea Wix Studio uses):
   every number in this site is a pixel value measured on the live Wix site at a reference width,
   1440 px for desktop and 375 px for phones. It is multiplied by --u, which is the screen width
   divided by that reference width, so the whole page scales with the window (up to 1920 px wide). */

@font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../assets/fonts/madefor-display-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../assets/fonts/madefor-display-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Wix Madefor Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../assets/fonts/madefor-text-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Wix Madefor Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../assets/fonts/madefor-text-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Wix Madefor Text"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(../assets/fonts/madefor-text-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Wix Madefor Text"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(../assets/fonts/madefor-text-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The layout numbers below must not pass from a box to the boxes inside it, so they are registered as non-inheriting. */
@property --x { syntax: '*'; inherits: false; }
@property --y { syntax: '*'; inherits: false; }
@property --w { syntax: '*'; inherits: false; }
@property --h { syntax: '*'; inherits: false; }
@property --mx { syntax: '*'; inherits: false; }
@property --my { syntax: '*'; inherits: false; }
@property --mw { syntax: '*'; inherits: false; }
@property --mh { syntax: '*'; inherits: false; }
@property --t { syntax: '*'; inherits: false; }
@property --mt { syntax: '*'; inherits: false; }
@property --fs { syntax: '*'; inherits: false; }
@property --lh { syntax: '*'; inherits: false; }
@property --ls { syntax: '*'; inherits: false; }
@property --mfs { syntax: '*'; inherits: false; }
@property --mlh { syntax: '*'; inherits: false; }
@property --mls { syntax: '*'; inherits: false; }
@property --r { syntax: '*'; inherits: false; }
@property --mr { syntax: '*'; inherits: false; }
@property --sh { syntax: '*'; inherits: false; }
@property --msh { syntax: '*'; inherits: false; }
@property --bfs { syntax: '*'; inherits: false; }
@property --mbfs { syntax: '*'; inherits: false; }
@property --ed { syntax: '*'; inherits: false; }
@property --ed2 { syntax: '*'; inherits: false; }
@property --edl { syntax: '*'; inherits: false; }
@property --es { syntax: '*'; inherits: false; }
@property --etx { syntax: '*'; inherits: false; }
@property --ety { syntax: '*'; inherits: false; }
@property --ld { syntax: '*'; inherits: false; }
@property --bx { syntax: '*'; inherits: false; }
@property --by { syntax: '*'; inherits: false; }
@property --rot { syntax: '*'; inherits: false; }
@property --left { syntax: '*'; inherits: false; }
@property --mleft { syntax: '*'; inherits: false; }
@property --s { syntax: '*'; inherits: false; }
@property --r0 { syntax: '*'; inherits: false; }
@property --r1 { syntax: '*'; inherits: false; }
@property --an { syntax: '*'; inherits: false; }
@property --fpx { syntax: '*'; inherits: false; }
@property --lpx { syntax: '*'; inherits: false; }
@property --o { syntax: '*'; inherits: false; }
@property --c { syntax: '*'; inherits: false; }

:root {
  --sbw: 0px;                                   /* scrollbar width, set by site.js */
  --W: calc(min(100vw, 1920px) - var(--sbw));   /* Wix's "scaling factor" */
  --u: calc(var(--W) / 1440);
  --blue: #007cff; --sky: #00adf4; --royal: #1a6aff; --pink: #f20ca3; --red: #ff0033;
  --orange: #ff6a00; --gold: #ffc600; --amber: #fbab01; --green: #00ac03; --grey: #f0f0f0; --line: #c2c2c2;
  --helv: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --display: "Wix Madefor Display", var(--helv);
  --text: "Wix Madefor Text", var(--helv);
}
@media (max-width: 750px) { :root { --u: calc(var(--W) / 375); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #000; color: #fff; font-family: var(--text); font-size: 16px; line-height: 1.6;
  overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video, canvas, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
button, input, textarea { font: inherit; color: inherit; }
.skip { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%); background: #fff; color: #000;
  padding: 8px 16px; border-radius: 8px; z-index: 1000; font: 14px var(--text); }
.skip:focus { transform: translate(-50%, 0); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
main { position: relative; }
.sec { position: relative; width: 100%; height: calc(var(--sh) * var(--u)); overflow-x: clip; }
.sec > .in { position: relative; width: 100%; max-width: 1920px; height: 100%; margin: 0 auto; }
/* .a: absolutely placed box. --x --y --w --h are desktop pixels (1440 wide); --mx --my --mw --mh are phone pixels (375 wide). */
.a { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
/* .stk: a sticky card. Cards share one grid cell and are placed with margins, like Wix does. */
.stack { display: grid; grid-template: 1fr / 1fr; position: relative; height: 100%; }
.stack > * { grid-area: 1 / 1; align-self: start; justify-self: start; }
.stk { position: sticky; top: var(--t, 0); margin-left: calc(var(--x, 0) * var(--u)); margin-top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
@media (max-width: 750px) {
  .sec { height: calc(var(--msh, var(--sh)) * var(--u)); }
  .a { left: calc(var(--mx, 0) * var(--u)); top: calc(var(--my, 0) * var(--u)); width: calc(var(--mw) * var(--u)); height: calc(var(--mh) * var(--u)); }
  .stk { top: var(--mt, var(--t, 0)); margin-left: calc(var(--mx, 0) * var(--u)); margin-top: calc(var(--my, 0) * var(--u));
    width: calc(var(--mw) * var(--u)); height: calc(var(--mh) * var(--u)); }
  .dt { display: none !important; }
}
@media (min-width: 751px) { .mo { display: none !important; } }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover { object-fit: cover; }
.contain { object-fit: contain; }

/* ---------- type ---------- */
/* --fs and --lh are pixels at the reference width; --mfs and --mlh are the phone values. */
.t { font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--lh) * var(--u)); letter-spacing: var(--ls, normal); }
@media (max-width: 750px) { .t { font-size: calc(var(--mfs, var(--fs)) * var(--u)); line-height: calc(var(--mlh, var(--lh)) * var(--u)); letter-spacing: var(--mls, var(--ls, normal)); } }
.t p + p { margin-top: 0; }
.px { font-size: var(--fpx); line-height: var(--lpx); }  /* sizes that Wix keeps fixed in pixels */
.hv { font-family: var(--helv); font-weight: 400; }
.hvb { font-family: var(--helv); font-weight: 700; }
/* Wix shows some titles in a synthetic bold of the regular face: narrower than a real bold */
.hvfb { font-family: var(--helv); font-weight: 400; -webkit-text-stroke: .031em currentColor; }
.mt { font-family: var(--text); font-weight: 400; }
.mtx { font-family: var(--text); font-weight: 800; }
.md { font-family: var(--display); font-weight: 700; }
.mdx { font-family: var(--display); font-weight: 800; }
.c { text-align: center; } .l { text-align: left; } .r { text-align: right; }
.up { text-transform: uppercase; }
.white { color: #fff; } .black { color: #000; }

/* ---------- buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 300px; border: 2px solid transparent;
  color: #fff; font-family: var(--text); font-size: calc(var(--bfs, 18) * var(--u)); line-height: 1.2; white-space: nowrap;
  transition: filter .2s ease, transform .2s ease; }
@media (max-width: 750px) { .btn { font-size: calc(var(--mbfs, var(--bfs, 18)) * var(--u)); } }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn svg { width: 25px; height: 25px; flex: none; fill: currentColor; }
.btn .ic { width: calc(var(--ic, 25) * 1px); height: calc(var(--ic, 25) * 1px); }
.shadow { box-shadow: 1px 1px 4px rgba(0, 0, 0, .6); }
.b-blue { background: linear-gradient(90deg, var(--blue), var(--sky)); border-color: var(--blue); }
.b-ghost { background: transparent; border-color: var(--blue); }
.b-pink { background: linear-gradient(90deg, var(--pink), var(--red)); border-color: var(--pink); }
.b-orange { background: linear-gradient(45deg, var(--orange), var(--gold)); border-color: var(--gold); }
.b-line { background: transparent; border-color: #fff; border-radius: 100px; }
.b-royal { background: var(--royal); border-color: var(--blue); border-radius: 50px; }
.b-white { background: #fff; border: 1px solid #fff; color: #000; border-radius: 50px; }
.b-sky { background: var(--blue); border-color: #fff; border-radius: 50px; }
.b-clear { background: transparent; border-color: #fff; border-radius: 50px; }
.btn.lead { justify-content: flex-start; gap: 6.5px; padding-left: 12px; }
.btn.lead svg { width: 35px; height: 35px; }
/* Wix keeps a button's height, icon and padding in pixels at every width; only its width (and for most buttons the
   label) follows the window. Labels marked .fl stay in pixels too, and on phones so do the round-icon buttons' labels. */
.a.bh { height: calc(var(--h) * 1px); }
.btn.fl { font-size: calc(var(--bfs) * 1px); }
@media (max-width: 750px) {
  .a.bh { height: calc(var(--mh, var(--h)) * 1px); }
  .btn.fl, .btn.lead { font-size: calc(var(--mbfs, var(--bfs)) * 1px); }
}

/* ---------- header (desktop pill on the home hero, fixed pill on the other pages, phone bar everywhere) ---------- */
.pill { background: #fff; border-radius: calc(39.84 * var(--u)); box-shadow: 0 0 calc(17.08 * var(--u)) rgba(0, 0, 0, .56); }
.pill .logo { position: absolute; }
.pill .logo img { width: 100%; height: 100%; object-fit: cover; }
/* the menu's text follows the window, as on Wix, while its padding and gaps stay in pixels */
.menu { position: absolute; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 6px;
  background: #f0f0f0; border-radius: 9000px; padding: 10px; margin: 0; list-style: none; }
.menu li { display: flex; }
.menu a { display: flex; align-items: center; padding: 5px 15px; border-radius: 50px; color: #000;
  font: 400 calc(18 * var(--u))/calc(25.2 * var(--u)) var(--text); white-space: nowrap; }
/* on the other pages Wix keeps the menu box 592 px wide and centred, as tall as its rows: one row on narrower
   screens, two from about 1,300 px */
.ipanel .menu { left: calc(50% - 296px); width: 592px; top: 50%; height: auto; transform: translateY(-50%); padding: 10px; }
.pill .menu { top: 50%; height: auto; transform: translateY(-50%); }
.menu a[aria-current="page"] { background: #fff; border: 2px solid var(--royal); border-radius: 90px; }
.menu a:hover { color: var(--royal); }
.talk { position: absolute; }
.talk .btn { width: 100%; height: 100%; font-size: calc(16.17 * var(--u)); padding: 0 20px; border-radius: 30px; }
.pill .talk { top: calc(50% - 25px); }
/* on the narrower inner-page button the label wraps onto two lines below about 1,115 px, as on Wix */
.ipanel .talk.bh { height: auto; }
.ipanel .talk .btn { height: auto; min-height: 50px; padding: 10px 20px; white-space: normal; }
.mbar { position: relative; z-index: 51; height: 70px; }
.mbar .pill { position: absolute; left: 12px; right: 12px; top: 11px; height: 48px; border-radius: 30px; }
.mbar .logo { left: 50%; top: 5px; width: 153px; height: 39px; transform: translateX(-50%); }
.burger { position: absolute; right: 18px; top: 9px; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.burger svg { width: 30px; height: 30px; fill: #000; }

/* tablets (751-1000 px): Wix swaps the menu for a menu button there too */
.burger.tab { display: none; }
@media (min-width: 751px) and (max-width: 1000px) {
  .pill .menu, .ipanel .menu { display: none; }
  .burger.tab { display: block; top: 50%; transform: translateY(-50%); }
  .pill .burger.tab { right: calc(232 * var(--u)); }
  .ipanel .burger.tab { right: calc(196 * var(--u)); }
}

/* the menu. Wix has two. On phones the whole screen fades to white (half a second, easing in), with
   the links centred and a cross at the top right. On tablets a white panel covers the left 40 % of
   the darkened page, with bold links and the current page in a blue outline. Sizes as on the live site. */
.overlay { position: fixed; inset: 0; z-index: 1000; overflow: hidden; opacity: 0; visibility: hidden; }
.overlay.open { opacity: 1; visibility: visible; }
.overlay .panel { position: absolute; top: 0; left: 0; background: #fff; color: #000; }
.overlay .close { position: absolute; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.overlay .close svg { display: block; width: 20px; height: 20px; fill: #000; }
.overlay ul { position: absolute; list-style: none; margin: 0; padding: 0; }
.overlay li a { display: block; }
body.menu-open { overflow: hidden; }
@media (max-width: 750px) {
  .overlay { transition: opacity .5s cubic-bezier(.55, .055, .675, .19), visibility 0s linear .5s; }
  .overlay.open { transition: opacity .5s cubic-bezier(.55, .055, .675, .19); }
  .overlay .panel { right: 0; bottom: 0; }
  .overlay .close { top: 40px; right: 40px; }
  .overlay .close .x-t { display: none; }
  .overlay ul { top: 100px; left: 26.92%; right: 26.92%; text-align: center; }
  .overlay li a { padding: 10px 0; font: 400 16px/25.6px var(--text); color: var(--royal); }
  .overlay li a[aria-current="page"] { color: #000; }
}
@media (min-width: 751px) {
  .overlay { background: rgba(0, 0, 0, .6); }
  .overlay .panel { width: 40%; height: 780px; }
  .overlay .close { top: 35px; left: calc(50% - 10px); }
  .overlay .close .x-m { display: none; }
  .overlay ul { top: 110px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .overlay li a { padding: 5px 15px; font: 700 1.897vw/1 var(--display); color: #000; border-radius: 90px; }
  .overlay li a[aria-current="page"] { border: 2px solid var(--royal); color: var(--royal); }
}

/* ---------- footer (the same on every page) ---------- */
/* Wix sizes the footer from its content, in rows: the padding, the big title and the short text scale with
   the window (the title stops growing at 95 px), while the 60 px gaps (20 px on phones), the 16 px link
   columns and the copyright lines keep their pixel sizes. So it is laid out the same way here. */
.foot { position: relative; background: #000; color: #fff; padding: calc(45 * var(--u)); }
.foot h2 { color: #fff; }
.foot-title { font-size: min(calc(79.6838 * var(--u)), 95px); line-height: 1.2; }
.foot-row { display: grid; grid-template-columns: calc(516 * var(--u)) repeat(3, calc(258 * var(--u))); column-gap: calc(20 * var(--u));
  align-items: start; margin-top: 60px; }
.foot-about, .foot-end { display: grid; }
.foot-about > *, .foot-end > * { grid-area: 1 / 1; }
.foot-txt { margin-top: calc(51.95 * var(--u)); width: calc(323.7 * var(--u) - 14.3px); }
.foot .col p, .foot .col a { font: 400 16px/25.6px var(--text); }
.foot .col .col-h { font-weight: 700; }
.foot .col .links { margin-top: 20px; }
.foot .col.small .links, .foot .col.small .links a { font-size: 14px; }
.foot .col a:hover { text-decoration: underline; }
.foot-end { margin-top: 60px; min-height: 60.19px; }
.foot .rule { height: 1px; background: #fff; }
.foot .legal { margin-top: 20px; font: 400 14px/19.6px var(--text); text-align: center; }
@media (max-width: 750px) {
  .foot { padding: calc(28.8467 * var(--u)); }
  .foot-title { font-size: calc(32.6087 * var(--u)); line-height: calc(39.1304 * var(--u)); }
  .foot-row { grid-template-columns: 100%; row-gap: 20px; margin-top: 20px; }
  .foot-about { min-height: 112.36px; }
  .foot-txt { margin-top: calc(40.42 * var(--u)); width: 100%; font-size: 14px; line-height: 22.4px; }
  .foot .col:nth-child(2) { min-height: 148px; }
  .foot .col:not(.small) .links a { text-decoration: underline; }
  .foot .col .links { margin-top: 14px; }
  .foot .foot-co { font-size: 20px; line-height: 28px; }
  .foot-end { margin-top: 20px; min-height: 0; }
}

/* ---------- the contact section and its form (home page and contact page) ---------- */
.contact { background: linear-gradient(45deg, #007cff, #00adf4); }
/* Wix keeps the form card 710 px tall at every width (its fields are in pixels) and centres it in the section; the
   heading, text and buttons beside it are centred as one block (572 units plus the 60 px buttons). The contact
   page's section never gets shorter than the card. On phones the section is 1267.3 units plus 60 px. */
@media (min-width: 751px) {
  .contact { --S: calc(var(--sh) * var(--u)); }
  .contact.page { --S: max(calc(911 * var(--u)), 709.656px); height: var(--S); }
  .contact .cl { top: calc((var(--S) - 572 * var(--u) - 60px) / 2 + var(--dy) * var(--u)); }
  .contact .card { top: calc(var(--S) / 2 - 355px); height: 710px; }
}
@media (max-width: 750px) {
  .contact { height: calc(1267.3 * var(--u) + 60px); }
  .contact .card { top: calc(859.6 * var(--u) - 294.85px); height: 710px; }
}
.cform { height: 100%; background: #dfe5eb; border: 3px solid var(--royal); border-radius: 20px; padding: 24px; color: #000;
  display: flex; flex-direction: column; gap: 24px; font-family: var(--text); }
.cform h3 { font: 700 29px/43.5px var(--display); text-align: center; margin: 0; }
.cform label { display: flex; flex-direction: column; gap: 8px; font: 400 14px/19.6px var(--text); }
.cform .lt b { font-weight: 400; margin-left: .25em; }
.cform input, .cform textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .6); border-radius: 10px; background: #fff;
  font: 400 16px/24px var(--text); color: #000; padding: 8px 12px; height: 41px; outline: none; }
.cform textarea { height: 92px; resize: none; padding: 8px 12px; }
.cform input::placeholder, .cform textarea::placeholder { color: rgba(0, 0, 0, .6); }
.cform input:focus, .cform textarea:focus { box-shadow: 0 0 0 2px var(--royal); }
.cform .phone { display: flex; align-items: center; background: #fff; border-radius: 10px; border-bottom: 1px solid rgba(0, 0, 0, .6); }
.cform .phone input { border: 0; height: 40px; padding-left: 4px; box-shadow: none; }
.cform .phone:focus-within { box-shadow: 0 0 0 2px var(--royal); }
.flag { display: flex; align-items: center; gap: 1px; padding: 0 2px 0 12px; flex: none; }
.flag i { width: 22px; height: 14px; border-radius: 2px; background: linear-gradient(#ff9933 0 33.3%, #fff 0 66.6%, #138808 0);
  position: relative; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15); }
.flag i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; border: .8px solid #000080; }
.flag svg { width: 16px; height: 16px; fill: #000; }
.cform .note { font: italic 400 14px/21px var(--text); color: #6e6e6e; margin-top: -16px; }
.send-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.send-row button { height: 45px; border-radius: 100px; font: 400 16px/19.2px var(--text); cursor: pointer; }
.send { width: 220px; background: var(--royal); border: 2px solid var(--royal); color: #fff; }
.wa { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; background: transparent; border: 2px solid #128c7e; color: #075e54; }
.wa svg { width: 20px; height: 20px; fill: currentColor; }
.send:hover { filter: brightness(1.1); }
.wa:hover { background: rgba(18, 140, 126, .08); }
.sent { font: 400 13px/1.4 var(--text); color: #1d3b5c; margin-top: -12px; }
@media (max-width: 750px) {
  .send { width: auto; flex: 1; }
  .wa { padding: 0 12px; }
}

/* ---------- media ---------- */
.round { border-radius: calc(var(--r, 0) * var(--u)); overflow: hidden; }
@media (max-width: 750px) { .round { border-radius: calc(var(--mr, var(--r, 0)) * var(--u)); } }
canvas.alpha { width: 100%; height: 100%; }
.media-missing { display: none !important; }

/* ---------- entrance animations (play once when the element comes into view) ---------- */
@keyframes e-fade { from { opacity: 0; } }
@keyframes e-grow { from { transform: translate(var(--etx, 0), var(--ety, 0)) scale(var(--es, .8)); } }
@keyframes e-drop { from { scale: var(--es, 1.2); } }
@keyframes e-float { 0% { opacity: 0; transform: translate(var(--etx, 0), var(--ety, 60px)); } }
@keyframes e-expand { from { transform: scale(var(--es, .8)); } }
@keyframes e-blur { from { filter: blur(var(--eb, 6px)); } }
@keyframes e-spin { from { scale: var(--es, .6); rotate: -360deg; } }
@keyframes e-shape { from { clip-path: circle(0%); } to { clip-path: circle(75%); } }
@keyframes e-bounce {
  0% { transform: translate3d(-50px, 0, 0); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
  30% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  45% { transform: translate3d(-12px, 0, 0); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
  60% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  75% { transform: translate3d(-4px, 0, 0); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
  100% { transform: translate3d(0, 0, 0); } }
[data-e] { animation-play-state: paused !important; }
[data-e].seen { animation-play-state: running !important; }
.e-fade { animation: e-fade var(--ed, 1200ms) var(--edl, 0ms) cubic-bezier(.445, .05, .55, .95) both; }
.e-fadegrow { animation: e-fade var(--ed, 1200ms) var(--edl, 0ms) cubic-bezier(.23, 1, .32, 1) both, e-grow var(--ed2, 1500ms) var(--edl, 0ms) cubic-bezier(.23, 1, .32, 1) both; }
.e-fadedrop { animation: e-fade 1600ms var(--edl, 0ms) cubic-bezier(.25, .46, .45, .94) both, e-drop 2000ms var(--edl, 0ms) cubic-bezier(.23, 1, .32, 1) both; }
.e-float { animation: e-float var(--ed, 1200ms) var(--edl, 0ms) cubic-bezier(.445, .05, .55, .95) both; }
.e-fadeexpand { animation: e-fade var(--ed, 1200ms) var(--edl, 0ms) linear both, e-expand var(--ed, 1200ms) var(--edl, 0ms) cubic-bezier(.645, .045, .355, 1) both; }
.e-fadeblur { animation: e-fade var(--ed, 1400ms) var(--edl, 0ms) cubic-bezier(.47, 0, .745, .715) both, e-blur var(--ed2, 2000ms) var(--edl, 0ms) linear both; }
.e-bounce { animation: e-fade 810ms var(--edl, 1000ms) cubic-bezier(.25, .46, .45, .94) both, e-bounce 1500ms var(--edl, 1000ms) linear both; }
.e-spin { animation: e-fade 720ms var(--edl, 1100ms) cubic-bezier(.55, .055, .675, .19) both, e-spin 1200ms var(--edl, 1100ms) cubic-bezier(.645, .045, .355, 1) both; }
.e-shape { animation: e-fade 1600ms 0ms cubic-bezier(.25, .46, .45, .94) both, e-shape 2000ms 0ms cubic-bezier(.645, .045, .355, 1) both; }

/* ---------- loops (decorations that keep moving) ---------- */
@keyframes l-pulse { 27% { transform: scale(.84); } 45% { transform: scale(1); } 72% { transform: scale(.81); } 100% { transform: scale(1); } }
@keyframes l-breathe { 0% { translate: 0 0; animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  25% { translate: var(--bx, 0) var(--by, 25px); animation-timing-function: cubic-bezier(.645, .045, .355, 1); }
  75% { translate: calc(var(--bx, 0) * -1) calc(var(--by, 25px) * -1); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
  100% { translate: 0 0; } }
@keyframes l-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes l-bounce { 0%, 20%, 53%, 100% { translate: 0 0; } 40%, 43% { translate: 0 -12px; } 70% { translate: 0 -6px; } 90% { translate: 0 -2px; } }
@keyframes l-rubber { 0%, 100% { scale: 1 1; } 15% { scale: 1.12 .9; } 22% { scale: .92 1.08; } 30% { scale: 1.05 .96; } 38% { scale: .98 1.02; } 45% { scale: 1 1; } }
.l-pulse { animation: l-pulse var(--ld, 4000ms) linear infinite; }
.l-breathe { animation: l-breathe var(--ld, 5000ms) linear infinite; }
.l-spin { animation: l-spin var(--ld, 50000ms) linear infinite; }
.l-bounce { animation: l-bounce 2200ms linear infinite; }
.l-rubber { animation: l-rubber 3000ms linear infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-e], .l-pulse, .l-breathe, .l-spin, .l-bounce, .l-rubber { animation: none !important; }
  .sd { animation: none !important; }   /* scroll-driven effects */
}