/* Behaviour styles for assets/site.js and the hover states of the page */

/* "Available for new projects" blinks: one second on, one second off */
@keyframes site-blink { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
.framer-kxwzfi { animation: site-blink 2s linear infinite; }

/* Project cards: yellow frame, slight zoom and the "Open website" button fades in */
a.framer-MNDWa > :first-child,
a.framer-qZJOY > :first-child { transition: transform .3s cubic-bezier(.2,.9,.25,1), box-shadow .3s; }
a.framer-MNDWa:hover > :first-child,
a.framer-qZJOY:hover > :first-child {
  /* !important: the page carries these as inline styles */
  --border-color: rgb(255, 221, 53) !important;
  --border-top-width: 10px !important; --border-right-width: 10px !important;
  --border-bottom-width: 10px !important; --border-left-width: 10px !important;
  box-shadow: 0 3px 0 4px #000 !important;
  transform: scale(1.05) !important;
}
a.framer-MNDWa [data-framer-name="Button"],
a.framer-qZJOY [data-framer-name="Button"] { transition: opacity .25s; }
a.framer-MNDWa:hover [data-framer-name="Button"],
a.framer-qZJOY:hover [data-framer-name="Button"] { opacity: 1 !important; box-shadow: 0 3px 0 4px #000 !important; }

/* The button sits in the middle of the picture / video (the export placed it ~20px low) */
a.framer-MNDWa [data-framer-name="Button"],
a.framer-qZJOY [data-framer-name="Button"] { top: 50% !important; }

/* Instagram icon */
a.framer-cHQo6 svg { transition: fill .2s; }
a.framer-cHQo6:hover svg { fill: rgb(253, 208, 0) !important; }

@media (prefers-reduced-motion: reduce) { .framer-kxwzfi { animation: none; } }

/* No text selection highlight and no tap highlight flash */
html, html * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
::selection { background: transparent; }

/* Custom cursor: a 64px red ring with four ticks and a centre dot (built by assets/site.js).
   The outer box follows the pointer; on press / tap it becomes a bullet hole.
   With a mouse the system cursor is hidden everywhere from the start (not only after the first move). */
@media (hover: hover) and (pointer: fine) {
  html, html *, html *::before, html *::after { cursor: none !important; }
}
.site-cursor {
  position: fixed; top: 0; left: 0; z-index: 2147483647; width: 64px; height: 64px;
  pointer-events: none; opacity: 0; transition: opacity .15s; will-change: transform;
}
.site-cursor.is-on { opacity: 1; }
.site-cursor.is-touch { transition: opacity .35s; }
.site-cursor__body {
  position: absolute; inset: 0; border-radius: 120px; box-shadow: inset 0 0 0 4px #fc0001;
}
.site-cursor.is-down .site-cursor__body { opacity: 0; transition: none; }
/* on press (and tap) the crosshair turns into a bullet hole */
.site-cursor__bullet {
  position: absolute; left: -18px; top: -18px; width: 100px; height: 100px; max-width: none;
  opacity: 0;
}
.site-cursor.is-down .site-cursor__bullet { opacity: 1; }
.site-hole {
  position: absolute; z-index: 40; width: 100px; height: 100px; max-width: none;
  pointer-events: none; opacity: 1; transition: opacity 2s linear; -webkit-user-drag: none;
}
.site-hole.is-fading { opacity: 0; }
.site-cursor__tick { position: absolute; background: #fc0001; }
.site-cursor__dot { position: absolute; left: 27px; top: 27px; width: 10px; height: 10px; border-radius: 30px; background: #fc0001; }

/* The particle video in the About section sits above everything (assets/site.js draws its frames on a canvas where black is transparent, so only the specks
   show over the photos and the red panel, in every browser) */
.framer-r2jh4 .framer-p0hayn-container { z-index: 20; pointer-events: none; mix-blend-mode: normal; }
.site-particles { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; }

/* Project popups */
.site-popup {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(51, 51, 51, .8); cursor: zoom-out; animation: site-popup-in .2s ease;
}
.site-popup__box {
  width: min(95vw, calc((100vh - 32px) * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #000; cursor: default;
}
.site-popup__box iframe { display: block; width: 100%; height: 100%; border: 0; }
@keyframes site-popup-in { from { opacity: 0; } to { opacity: 1; } }

/* No clipping of text. The export wraps most text blocks in boxes with overflow:hidden that are exactly as tall as the
   line boxes, so the tops and tails of the big letters (and shadows) were cut off ("Starring", "From Ukraine",
   "Booking", the list of skills, card captions, the footer line, the Instagram icon). The page wrapper still clips
   anything that slides in from the side, so there is no horizontal scrolling; the hero and slide boxes that hold the
   background video keep their clip (clipping the hero made its background blink: it is blended and animated). */
.framer-156mtfd, .framer-1l9rjfz, .framer-oa7l6m, .framer-mnnjv7,
.framer-2yxvmi, .framer-1xmtz37, .framer-1tvwjua, .framer-9fjp8g,
.framer-6hbnui, a.framer-cHQo6 { overflow: visible !important; }

/* Stacking, bottom to top: page content, bullet holes (40), the menu bar (50), popups (100), the crosshair cursor. */
.framer-nps7m0 { z-index: 50 !important; }

/* "From Ukraine" (hero): the box keeps its clip, but gets room below the line so the tail of the "g" is not cut */
.framer-17pvh7o { padding-bottom: 24px !important; margin-bottom: -24px; }

/* Menu bar: while scrolling down it shrinks to a black strip as tall as the page padding (--menu-strip); its content
   fades out. --menu-full is the normal height (both set by assets/site.js). */
.framer-nps7m0 {
  height: var(--menu-full, 80px) !important; background: #000;
  transition: height .4s cubic-bezier(.2, .9, .25, 1);
}
.framer-nps7m0 * { transition: opacity .25s ease; }
.framer-nps7m0.is-collapsed { height: var(--menu-strip, 16px) !important; }
.framer-nps7m0.is-collapsed:not(:hover) * { opacity: 0 !important; pointer-events: none; }
.framer-nps7m0.is-collapsed:hover { height: var(--menu-full, 80px) !important; }
@media (prefers-reduced-motion: reduce) { .framer-nps7m0, .framer-nps7m0 * { transition: none; } }

/* While the bar is a thin strip, the page below it keeps the rounded corners it has in the default state: the strip
   gets inverted corners (16px, like the panels): a black square with a quarter circle cut out, attached under the strip
   where the panels start (one side padding in from the left and right edge). */
.framer-nps7m0::before, .framer-nps7m0::after {
  content: ""; position: absolute; top: 100%; width: 16px; height: 16px; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.framer-nps7m0::before { left: var(--menu-strip, 16px); background: radial-gradient(circle at 100% 100%, transparent 15.5px, #000 16px); }
.framer-nps7m0::after { right: var(--menu-strip, 16px); background: radial-gradient(circle at 0 100%, transparent 15.5px, #000 16px); }
.framer-nps7m0.is-collapsed:not(:hover)::before, .framer-nps7m0.is-collapsed:not(:hover)::after { opacity: 1; }