{"id":11070,"date":"2026-09-10T17:57:09","date_gmt":"2026-09-10T15:57:09","guid":{"rendered":"https:\/\/www.yuliyapivnyak.it\/en\/?page_id=11070"},"modified":"2026-09-10T18:05:08","modified_gmt":"2026-09-10T16:05:08","slug":"about-me","status":"publish","type":"page","link":"https:\/\/www.yuliyapivnyak.it\/en\/about-me\/","title":{"rendered":"About Me"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11070\" class=\"elementor elementor-11070\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a0208d e-con-full e-flex e-con e-parent\" data-id=\"6a0208d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-39ffd3e5 e-con-full e-flex e-con e-parent\" data-id=\"39ffd3e5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a10100a elementor-widget elementor-widget-html\" data-id=\"a10100a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\nYU.DESIGN \u2014 HUMAN CAPTCHA\nV4 \/ ROBUST SCROLL ENGINE\nELEMENTOR HTML WIDGET\n========================================================= -->\n\n<section class=\"yu-human-proof\" data-yhp>\n\n  <div class=\"yhp-track\">\n\n    <div class=\"yhp-stage\">\n\n      <!-- BACKGROUND -->\n      <div class=\"yhp-v-pattern\"><\/div>\n      <div class=\"yhp-design-solid\"><\/div>\n      <div class=\"yhp-giant-number\">01<\/div>\n\n      <!-- META -->\n      <div class=\"yhp-meta yhp-meta-left\"><\/div>\n\n      <div class=\"yhp-meta yhp-meta-center\">\n        [IDENTIFICATION IN PROGRESS]\n      <\/div>\n\n      <div class=\"yhp-meta yhp-meta-right\">\n        ANALYSIS \/ DESIGN \/ CREATION\n      <\/div>\n\n\n      <!-- ==================================================\n      01 \/ INTRO\n      =================================================== -->\n\n      <div class=\"yhp-intro\">\n\n        <div class=\"yhp-kicker\"><\/div>\n\n        <h2>\n          IDENTIFY<br>\n          THE SUBJECT.\n        <\/h2>\n\n        <p><\/p>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      02 \/ CAPTCHA\n      =================================================== -->\n\n      <div class=\"yhp-plexi yhp-captcha\">\n\n        <i class=\"yhp-screw yhp-screw-tl\"><\/i>\n        <i class=\"yhp-screw yhp-screw-tr\"><\/i>\n        <i class=\"yhp-screw yhp-screw-bl\"><\/i>\n        <i class=\"yhp-screw yhp-screw-br\"><\/i>\n\n        <div class=\"yhp-glare\"><\/div>\n\n        <div class=\"yhp-captcha-head\">\n          <span>IDENTIFICATION \/ IN PROGRESS<\/span>\n          <span>STEP 01<\/span>\n        <\/div>\n\n        <div class=\"yhp-question\">\n          SELECT AN IMAGE OF WEB DESIGNER\n          <strong>YULIYA PIVNYAK.<\/strong>\n        <\/div>\n\n\n        <div class=\"yhp-grid\">\n\n          <div class=\"yhp-tile yhp-photo-tile\">\n            <div class=\"yhp-img yhp-img-grey\"><\/div>\n            <div class=\"yhp-check\">\u2713<\/div>\n            <span class=\"yhp-photo-label\">\n              01 \/ PRESENTABLE\n            <\/span>\n          <\/div>\n\n          <div class=\"yhp-tile yhp-blue-tile\">\n            <span class=\"yhp-symbol\">UX<\/span>\n            <span class=\"yhp-photo-label\">\n              02 \/ METHOD\n            <\/span>\n          <\/div>\n\n          <div class=\"yhp-tile yhp-photo-tile\">\n            <div class=\"yhp-img yhp-img-car\"><\/div>\n            <div class=\"yhp-check\">?<\/div>\n            <span class=\"yhp-photo-label\">\n              02 \/ DEBATABLE\n            <\/span>\n          <\/div>\n\n          <div class=\"yhp-tile yhp-orange-tile\">\n            <span class=\"yhp-symbol\">YU.<\/span>\n            <span class=\"yhp-photo-label\">\n              04 \/ DESIGN\n            <\/span>\n          <\/div>\n\n          <div class=\"yhp-tile yhp-photo-tile\">\n            <div class=\"yhp-img yhp-img-dino\"><\/div>\n            <div class=\"yhp-check\">!<\/div>\n            <span class=\"yhp-photo-label\">\n              03 \/ UNCLASSIFIABLE\n            <\/span>\n          <\/div>\n\n          <div class=\"yhp-tile yhp-light-tile\">\n            <div class=\"yhp-stack\">\n              WEB<br>UX<br>WP\n            <\/div>\n            <span class=\"yhp-photo-label\">\n              06 \/ SYSTEM\n            <\/span>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"yhp-captcha-footer\">\n\n          <span>\n            3 ITEMS SELECTED\n          <\/span>\n\n          <span class=\"yhp-verify\">\n            VERIFY \u2197\n          <\/span>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      ANALYSIS\n      =================================================== -->\n\n      <div class=\"yhp-analysis yhp-analysis-a\">\n        <small>PROOF \/ 01<\/small>\n        <strong>ANALYSIS 32%<\/strong>\n      <\/div>\n\n      <div class=\"yhp-analysis yhp-analysis-b\">\n        [!]<br>\n        INCONSISTENCY<br>\n        DETECTED\n      <\/div>\n\n\n      <!-- ==================================================\n      03 \/ ESCAPED PHOTOS\n      =================================================== -->\n\n      <div class=\"yhp-floating-photo yhp-float-grey\">\n        <div class=\"yhp-float-copy\">\n          <span><\/span>\n          <strong>PRESENTABLE<\/strong>\n        <\/div>\n      <\/div>\n\n      <div class=\"yhp-floating-photo yhp-float-car\">\n        <div class=\"yhp-float-copy\">\n          <span><\/span>\n          <strong>DEBATABLE<\/strong>\n        <\/div>\n      <\/div>\n\n      <div class=\"yhp-floating-photo yhp-float-dino\">\n        <div class=\"yhp-float-copy\">\n          <span><\/span>\n          <strong>UNCLASSIFIABLE<\/strong>\n        <\/div>\n      <\/div>\n\n\n      <!-- ==================================================\n      CHAOS\n      =================================================== -->\n\n      <div class=\"yhp-chaos-copy\">\n\n        <strong>\n          WAIT.\n        <\/strong>\n\n        <em>\n          ONE LABEL<br>\n          ISN\u2019T ENOUGH.\n        <\/em>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      04 \/ FAILURE\n      =================================================== -->\n\n      <div class=\"yhp-failure\">\n\n        <div class=\"yhp-failure-meta\"><\/div>\n\n        <h3>\n          VERIFICATION\n          <span>FAILED.<\/span>\n        <\/h3>\n\n        <div class=\"yhp-failure-stroke\"><\/div>\n\n        <p>\n          TOO HUMAN<br>\n          TO BE STANDARDISED.\n        <\/p>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      05 \/ ABOUT\n      =================================================== -->\n\n      <div class=\"yhp-final\">\n\n        <div class=\"yhp-final-v-pattern\"><\/div>\n        <div class=\"yhp-final-design\"><\/div>\n\n        <div class=\"yhp-final-meta\"><\/div>\n\n\n        <div class=\"yhp-final-inner\">\n\n          <div class=\"yhp-final-copy\">\n\n            <div class=\"yhp-final-kicker\"><\/div>\n\n            <h3>\n              I\u2019M YULIYA<br>\n              <span>PIVNYAK.<\/span>\n            <\/h3>\n\n            <div class=\"yhp-about-actions\">\n              WEB DESIGNER.\n            <\/div>\n\n            <div class=\"yhp-bio\">\n              <p>\n                I analyse, design and bring order.<br>\n                Then I turn it all into something that works<br>\n                and has a personality of its own.\n              <\/p>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"yhp-final-collage\">\n\n            <div class=\"yhp-final-photo yhp-final-photo-grey\"><\/div>\n\n            <div class=\"yhp-final-photo yhp-final-photo-car\"><\/div>\n\n            <div class=\"yhp-final-photo yhp-final-photo-dino\"><\/div>\n\n\n            <div class=\"yhp-mini-plexi\"><\/div>\n\n\n            <div class=\"yhp-orange-note\"><\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"yhp-final-footer\"><\/div>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      06 \/ DESIGN \u2014 FINAL JOKE\n      =================================================== -->\n\n      <div class=\"yhp-design-joke\">\n\n        <div class=\"yhp-joke-v-pattern\"><\/div>\n\n        <div class=\"yhp-joke-design\" aria-hidden=\"true\">\n          DESIGN\n        <\/div>\n\n        <div class=\"yhp-joke-plexi yhp-plexi\">\n\n          <i class=\"yhp-screw yhp-screw-tl\"><\/i>\n          <i class=\"yhp-screw yhp-screw-tr\"><\/i>\n          <i class=\"yhp-screw yhp-screw-bl\"><\/i>\n          <i class=\"yhp-screw yhp-screw-br\"><\/i>\n\n          <div class=\"yhp-joke-kicker\"><\/div>\n\n          <h3>\n            OH, RIGHT.<br>\n            A WEBSITE IS ALSO DESIGN.\n          <\/h3>\n\n          <p>\n            Because working well is essential.<br>\n            <strong>But without personality, where\u2019s the fun?<\/strong>\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      PROGRESS\n      =================================================== -->\n\n      <div class=\"yhp-scroll\">\n\n        <b><\/b>\n\n        <strong>\n          SCROLL\n        <\/strong>\n\n        <i><\/i>\n\n        <em>\n          01 \/ 06\n        <\/em>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Khand:wght@400;500;600;700&display=swap');\n\n\n\/* =========================================================\nROOT\n========================================================= *\/\n\n.yu-human-proof{\n\n  --bg:#F4F1EA;\n  --blue:#4058CF;\n  --orange:#EA6B3A;\n  --black:#090909;\n\n  \/*\n  SPAZIO HEADER STICKY\n  *\/\n\n  --header-space:145px;\n\n  position:relative;\n\n  width:100%;\n\n  margin-top:40px;\n\n  overflow:visible !important;\n\n  color:var(--black);\n\n  background:var(--bg);\n}\n\n\n.yu-human-proof *,\n.yu-human-proof *::before,\n.yu-human-proof *::after{\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\nTRACK\n========================================================= *\/\n\n.yu-human-proof .yhp-track{\n\n  position:relative;\n\n  height:720vh;\n}\n\n\n\/* =========================================================\nSTAGE\n========================================================= *\/\n\n.yu-human-proof .yhp-stage{\n\n  position:sticky;\n\n  top:var(--header-space);\n\n  width:100%;\n\n  height:\n    calc(100svh - var(--header-space));\n\n  min-height:600px;\n\n  overflow:hidden;\n\n  isolation:isolate;\n\n  background:var(--bg);\n}\n\n\n\/* =========================================================\nMICRO V\n========================================================= *\/\n\n.yu-human-proof .yhp-v-pattern,\n.yu-human-proof .yhp-final-v-pattern{\n\n  position:absolute;\n\n  inset:0;\n\n  z-index:-20;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Vector-72.svg\");\n\n  background-repeat:repeat;\n\n  \/* MOLTO PICCOLA *\/\n\n  background-size:3px auto;\n\n  \/* QUASI INVISIBILE *\/\n\n  opacity:.052;\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\nSOLID DESIGN\n========================================================= *\/\n\n.yu-human-proof .yhp-design-solid{\n\n  position:absolute;\n\n  z-index:-10;\n\n  left:-7vw;\n\n  top:50%;\n\n  width:114vw;\n\n  height:91%;\n\n  transform:\n    translateY(-50%);\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Group-1-e1777719547898.png\");\n\n  background-repeat:no-repeat;\n\n  background-size:contain;\n\n  background-position:center;\n\n  opacity:1;\n\n  pointer-events:none;\n\n  will-change:\n    transform,\n    opacity;\n}\n\n\n\/* =========================================================\nGIANT NUMBER\n========================================================= *\/\n\n.yu-human-proof .yhp-giant-number{\n\n  position:absolute;\n\n  z-index:-4;\n\n  left:3%;\n\n  top:52%;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:58vh;\n\n  line-height:.55;\n\n  font-weight:700;\n\n  letter-spacing:-.09em;\n\n  color:var(--blue);\n\n  opacity:0;\n\n  transform:\n    translateY(-50%);\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\nMETA\n========================================================= *\/\n\n.yu-human-proof .yhp-meta{\n\n  position:absolute;\n\n  z-index:120;\n\n  top:18px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:10px;\n\n  font-weight:900;\n\n  letter-spacing:.04em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-meta-left{\n  left:3.5%;\n}\n\n\n.yu-human-proof .yhp-meta-center{\n\n  left:50%;\n\n  transform:\n    translateX(-50%);\n}\n\n\n.yu-human-proof .yhp-meta-right{\n  right:3.5%;\n}\n\n\n\/* =========================================================\nINTRO\n========================================================= *\/\n\n.yu-human-proof .yhp-intro{\n\n  position:absolute;\n\n  z-index:36;\n\n  left:4.2%;\n\n  top:51%;\n\n  width:40%;\n\n  transform:\n    translateY(-50%);\n\n  will-change:\n    opacity,\n    transform;\n}\n\n\n.yu-human-proof .yhp-kicker{\n\n  margin-bottom:12px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:13px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-kicker span{\n  color:var(--blue);\n}\n\n\n.yu-human-proof .yhp-intro h2{\n\n  margin:0;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(105px,8.6vw,164px);\n\n  line-height:.72;\n\n  font-weight:700;\n\n  letter-spacing:-.06em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-intro p{\n\n  margin:\n    clamp(30px,3vw,47px)\n    0 0;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:\n    clamp(18px,1.15vw,23px);\n\n  line-height:1.18;\n\n  font-weight:500;\n\n  letter-spacing:-.025em;\n}\n\n\n\/* =========================================================\nPLEXI\n========================================================= *\/\n\n.yu-human-proof .yhp-plexi{\n\n  background:\n\n    linear-gradient(\n      135deg,\n      rgba(255,255,255,.10),\n      rgba(154,171,255,.04) 45%,\n      rgba(64,88,207,.075)\n    );\n\n  border:\n    1px solid\n    rgba(255,255,255,.63);\n\n  border-radius:20px;\n\n  box-shadow:\n\n    inset 0 0 0 1px\n    rgba(64,88,207,.12),\n\n    0 20px 45px\n    rgba(15,24,72,.10);\n\n  backdrop-filter:\n    blur(7px)\n    saturate(108%);\n\n  -webkit-backdrop-filter:\n    blur(7px)\n    saturate(108%);\n}\n\n\n\/* =========================================================\nCAPTCHA\n========================================================= *\/\n\n.yu-human-proof .yhp-captcha{\n\n  position:absolute;\n\n  z-index:42;\n\n  left:72%;\n\n  top:51%;\n\n  width:\n    min(720px,47vw);\n\n  padding:22px;\n\n  transform:\n    translate(-50%,-50%);\n\n  will-change:\n    opacity,\n    transform,\n    left,\n    top;\n}\n\n\n\/* =========================================================\nGLARE\n========================================================= *\/\n\n.yu-human-proof .yhp-glare{\n\n  position:absolute;\n\n  inset:0;\n\n  border-radius:20px;\n\n  background:\n\n    linear-gradient(\n      112deg,\n      rgba(255,255,255,.17),\n      transparent 43%,\n      rgba(64,88,207,.03)\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\nSCREWS\n========================================================= *\/\n\n.yu-human-proof .yhp-screw{\n\n  position:absolute;\n\n  z-index:20;\n\n  width:16px;\n\n  height:16px;\n\n  border-radius:50%;\n\n  background:\n\n    radial-gradient(\n      circle at 34% 30%,\n      #fff 0 6%,\n      #b8bfc5 20%,\n      #51575c 51%,\n      #d5d8da 71%,\n      #33393d 100%\n    );\n\n  box-shadow:\n    0 1px 3px\n    rgba(0,0,0,.34);\n}\n\n\n.yu-human-proof .yhp-screw::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:50%;\n\n  top:50%;\n\n  width:8px;\n\n  height:1px;\n\n  background:#202529;\n\n  transform:\n    translate(-50%,-50%)\n    rotate(45deg);\n}\n\n\n.yu-human-proof .yhp-screw-tl{\n  top:10px;\n  left:10px;\n}\n\n.yu-human-proof .yhp-screw-tr{\n  top:10px;\n  right:10px;\n}\n\n.yu-human-proof .yhp-screw-bl{\n  bottom:10px;\n  left:10px;\n}\n\n.yu-human-proof .yhp-screw-br{\n  bottom:10px;\n  right:10px;\n}\n\n\n\/* =========================================================\nCAPTCHA HEAD\n========================================================= *\/\n\n.yu-human-proof .yhp-captcha-head{\n\n  position:relative;\n\n  z-index:3;\n\n  display:flex;\n\n  justify-content:space-between;\n\n  padding:\n    3px 14px 14px;\n\n  border-bottom:\n    1px solid rgba(9,9,9,.28);\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:10px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n\/* =========================================================\nQUESTION\n========================================================= *\/\n\n.yu-human-proof .yhp-question{\n\n  position:relative;\n\n  z-index:3;\n\n  padding:\n    18px 14px 20px;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(30px,2.15vw,42px);\n\n  line-height:.88;\n\n  font-weight:600;\n\n  letter-spacing:-.045em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-question strong{\n\n  color:var(--blue);\n\n  font-weight:700;\n}\n\n\n\/* =========================================================\nGRID\n========================================================= *\/\n\n.yu-human-proof .yhp-grid{\n\n  position:relative;\n\n  z-index:3;\n\n  display:grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n  gap:8px;\n}\n\n\n\/* =========================================================\nTILES\n========================================================= *\/\n\n.yu-human-proof .yhp-tile{\n\n  position:relative;\n\n  aspect-ratio:1;\n\n  overflow:hidden;\n\n  border-radius:10px;\n\n  will-change:\n    transform,\n    opacity;\n}\n\n\n\/* =========================================================\nIMAGES\n========================================================= *\/\n\n.yu-human-proof .yhp-img{\n\n  position:absolute;\n\n  inset:0;\n\n  background-size:cover;\n\n  filter:\n    grayscale(1)\n    contrast(1.08);\n}\n\n\n.yu-human-proof .yhp-img-grey{\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/maglia-griggia.webp\");\n\n  background-position:center 22%;\n}\n\n\n.yu-human-proof .yhp-img-car{\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/macchina-rossa.webp\");\n\n  background-position:center;\n}\n\n\n.yu-human-proof .yhp-img-dino{\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/dinosauro.webp\");\n\n  background-position:center 27%;\n}\n\n\n\/* =========================================================\nTYPE TILES\n========================================================= *\/\n\n.yu-human-proof .yhp-blue-tile,\n.yu-human-proof .yhp-orange-tile,\n.yu-human-proof .yhp-light-tile{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n}\n\n\n.yu-human-proof .yhp-blue-tile{\n\n  color:#fff;\n\n  background:var(--blue);\n}\n\n\n.yu-human-proof .yhp-orange-tile{\n  background:var(--orange);\n}\n\n\n.yu-human-proof .yhp-light-tile{\n\n  background:\n    rgba(255,255,255,.53);\n}\n\n\n.yu-human-proof .yhp-symbol{\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(72px,5.2vw,104px);\n\n  line-height:.65;\n\n  font-weight:700;\n\n  letter-spacing:-.065em;\n}\n\n\n.yu-human-proof .yhp-stack{\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(39px,3.3vw,65px);\n\n  line-height:.59;\n\n  font-weight:700;\n\n  text-align:center;\n}\n\n\n\/* =========================================================\nLABEL\n========================================================= *\/\n\n.yu-human-proof .yhp-photo-label{\n\n  position:absolute;\n\n  z-index:8;\n\n  left:9px;\n\n  bottom:8px;\n\n  color:#fff;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:7px;\n\n  font-weight:900;\n\n  text-shadow:\n    0 1px 5px rgba(0,0,0,.72);\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-blue-tile .yhp-photo-label{\n\n  color:#fff;\n\n  text-shadow:none;\n}\n\n\n.yu-human-proof .yhp-orange-tile .yhp-photo-label,\n.yu-human-proof .yhp-light-tile .yhp-photo-label{\n\n  color:var(--black);\n\n  text-shadow:none;\n}\n\n\n\/* =========================================================\nCHECK\n========================================================= *\/\n\n.yu-human-proof .yhp-check{\n\n  position:absolute;\n\n  z-index:9;\n\n  right:8px;\n\n  top:8px;\n\n  width:27px;\n\n  height:27px;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  border-radius:50%;\n\n  color:#fff;\n\n  background:var(--blue);\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:13px;\n\n  font-weight:900;\n\n  opacity:0;\n\n  transform:scale(.3);\n}\n\n\n\/* =========================================================\nCAPTCHA FOOTER\n========================================================= *\/\n\n.yu-human-proof .yhp-captcha-footer{\n\n  position:relative;\n\n  z-index:3;\n\n  display:flex;\n\n  justify-content:space-between;\n\n  align-items:center;\n\n  padding:\n    16px 14px 3px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-verify{\n\n  padding:\n    9px 14px;\n\n  border-radius:10px;\n\n  background:var(--blue);\n\n  color:#fff;\n}\n\n\n\/* =========================================================\nANALYSIS\n========================================================= *\/\n\n.yu-human-proof .yhp-analysis{\n\n  position:absolute;\n\n  z-index:57;\n\n  padding:\n    10px 13px;\n\n  border-radius:10px;\n\n  border:\n    1px solid rgba(255,255,255,.6);\n\n  background:\n    rgba(244,241,234,.55);\n\n  backdrop-filter:\n    blur(8px);\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:8px;\n\n  font-weight:800;\n\n  text-transform:uppercase;\n\n  opacity:0;\n}\n\n\n.yu-human-proof .yhp-analysis small{\n\n  display:block;\n\n  font-size:7px;\n\n  opacity:.55;\n}\n\n\n.yu-human-proof .yhp-analysis strong{\n\n  display:block;\n\n  margin-top:4px;\n\n  font-size:12px;\n}\n\n\n.yu-human-proof .yhp-analysis-a{\n\n  left:5%;\n\n  top:16%;\n}\n\n\n.yu-human-proof .yhp-analysis-b{\n\n  right:5%;\n\n  bottom:13%;\n\n  color:#fff;\n\n  background:var(--orange);\n}\n\n\n\/* =========================================================\nFLOATING PHOTOS\n========================================================= *\/\n\n.yu-human-proof .yhp-floating-photo{\n\n  position:absolute;\n\n  z-index:50;\n\n  overflow:hidden;\n\n  border-radius:20px;\n\n  background-size:cover;\n\n  box-shadow:\n    0 18px 45px rgba(13,25,76,.14);\n\n  opacity:0;\n\n  filter:\n    grayscale(1)\n    contrast(1.08);\n\n  will-change:\n    opacity,\n    transform,\n    filter;\n}\n\n\n.yu-human-proof .yhp-floating-photo::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n\n    linear-gradient(\n      180deg,\n      transparent 52%,\n      rgba(0,0,0,.47)\n    );\n}\n\n\n.yu-human-proof .yhp-float-copy{\n\n  position:absolute;\n\n  z-index:3;\n\n  left:18px;\n\n  right:18px;\n\n  bottom:16px;\n\n  color:#fff;\n}\n\n\n.yu-human-proof .yhp-float-copy span{\n\n  display:block;\n\n  margin-bottom:7px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:11px;\n\n  line-height:1;\n\n  font-weight:800;\n\n  letter-spacing:.015em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-float-copy strong{\n\n  display:block;\n\n  max-width:92%;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:clamp(34px,2.45vw,48px);\n\n  line-height:.80;\n\n  font-weight:700;\n\n  letter-spacing:-.025em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-float-grey{\n\n  left:5%;\n\n  top:10%;\n\n  width:24vw;\n\n  max-width:410px;\n\n  aspect-ratio:.84;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/maglia-griggia.webp\");\n\n  background-position:center 20%;\n}\n\n\n.yu-human-proof .yhp-float-car{\n\n  left:31%;\n\n  bottom:3%;\n\n  width:47vw;\n\n  max-width:790px;\n\n  aspect-ratio:1.56;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/macchina-rossa.webp\");\n\n  background-position:center;\n}\n\n\n.yu-human-proof .yhp-float-dino{\n\n  right:-1%;\n\n  top:4%;\n\n  width:38vw;\n\n  max-width:660px;\n\n  aspect-ratio:.80;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/dinosauro.webp\");\n\n  background-position:center 24%;\n}\n\n\n\/* =========================================================\nCHAOS\n========================================================= *\/\n\n.yu-human-proof .yhp-chaos-copy{\n\n  position:absolute;\n\n  z-index:66;\n\n  left:5%;\n\n  bottom:12%;\n\n  opacity:0;\n\n  pointer-events:none;\n}\n\n\n.yu-human-proof .yhp-chaos-copy > span{\n\n  display:block;\n\n  margin-bottom:10px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:9px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-chaos-copy strong{\n\n  display:block;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(80px,7vw,135px);\n\n  line-height:.65;\n\n  font-weight:700;\n\n  letter-spacing:-.05em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-chaos-copy em{\n\n  display:block;\n\n  margin-left:12vw;\n\n  color:var(--blue);\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(52px,4.8vw,92px);\n\n  line-height:.70;\n\n  font-style:normal;\n\n  font-weight:700;\n\n  text-transform:uppercase;\n}\n\n\n\/* =========================================================\nFAILURE\n========================================================= *\/\n\n.yu-human-proof .yhp-failure{\n\n  position:absolute;\n\n  z-index:75;\n\n  inset:0;\n\n  display:flex;\n\n  flex-direction:column;\n\n  justify-content:center;\n\n  padding:\n    clamp(35px,5vw,95px);\n\n  opacity:0;\n\n  pointer-events:none;\n}\n\n\n.yu-human-proof .yhp-failure-meta{\n\n  margin-bottom:13px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:10px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-failure h3{\n\n  margin:0;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(128px,13.8vw,265px);\n\n  line-height:.63;\n\n  font-weight:700;\n\n  letter-spacing:-.065em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-failure h3 span{\n\n  display:block;\n\n  margin-left:10%;\n\n  color:var(--blue);\n}\n\n\n.yu-human-proof .yhp-failure-stroke{\n\n  position:absolute;\n\n  z-index:-1;\n\n  left:27%;\n\n  top:57%;\n\n  width:51%;\n\n  height:18px;\n\n  background:var(--orange);\n\n  border-radius:\n    65% 35% 70% 30%;\n\n  transform:\n    rotate(-1.5deg);\n}\n\n\n.yu-human-proof .yhp-failure p{\n\n  align-self:flex-end;\n\n  margin:\n    28px 4% 0 0;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(32px,3.2vw,62px);\n\n  line-height:.78;\n\n  font-weight:600;\n\n  text-align:right;\n\n  text-transform:uppercase;\n}\n\n\n\/* =========================================================\nFINAL\n========================================================= *\/\n\n.yu-human-proof .yhp-final{\n\n  position:absolute;\n\n  z-index:90;\n\n  inset:0;\n\n  overflow:hidden;\n\n  padding:\n    clamp(28px,4vw,70px);\n\n  background:var(--bg);\n\n  opacity:0;\n\n  pointer-events:none;\n}\n\n\n.yu-human-proof .yhp-final-v-pattern{\n  opacity:.045;\n}\n\n\n.yu-human-proof .yhp-final-design{\n\n  position:absolute;\n\n  z-index:-10;\n\n  right:-8vw;\n\n  bottom:-3vh;\n\n  width:73vw;\n\n  height:80%;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Group-1-e1777719547898.png\");\n\n  background-repeat:no-repeat;\n\n  background-size:contain;\n\n  background-position:right bottom;\n\n  opacity:.16;\n}\n\n\n.yu-human-proof .yhp-final-meta{\n\n  display:flex;\n\n  justify-content:space-between;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:9px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-final-inner{\n\n  position:absolute;\n\n  left:\n    clamp(28px,5vw,90px);\n\n  right:\n    clamp(28px,5vw,90px);\n\n  top:50%;\n\n  display:grid;\n\n  grid-template-columns:\n    1.17fr .83fr;\n\n  gap:\n    clamp(40px,6vw,105px);\n\n  align-items:center;\n\n  transform:\n    translateY(-50%);\n}\n\n\n.yu-human-proof .yhp-final-kicker{\n\n  margin-bottom:12px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:11px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-final-copy h3{\n\n  margin:0;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:\n    clamp(92px,7.6vw,148px);\n\n  line-height:.68;\n\n  font-weight:700;\n\n  letter-spacing:-.06em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-final-copy h3 span{\n  color:var(--blue);\n}\n\n\n.yu-human-proof .yhp-about-actions{\n\n  margin-top:20px;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:clamp(42px,3.45vw,66px);\n\n  line-height:.76;\n\n  font-weight:600;\n\n  letter-spacing:-.035em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-about-actions span{\n  color:var(--blue);\n}\n\n\n.yu-human-proof .yhp-bio{\n\n  width:min(600px,94%);\n\n  margin-top:\n    28px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:\n    clamp(15px,1vw,19px);\n\n  line-height:1.32;\n}\n\n\n.yu-human-proof .yhp-bio strong{\n\n  display:block;\n\n  margin-bottom:14px;\n\n  font-size:\n    clamp(19px,1.25vw,24px);\n\n  line-height:1.08;\n\n  font-weight:800;\n}\n\n\n.yu-human-proof .yhp-bio p{\n  margin:0 0 10px;\n}\n\n\n\n.yu-human-proof .yhp-bio .yhp-bio-aside{\n  margin-top:18px;\n  font-family:\"Khand\",sans-serif;\n  font-size:16px;\n  line-height:1;\n  font-weight:600;\n  letter-spacing:.02em;\n  text-transform:uppercase;\n}\n\n\/* =========================================================\nFINAL COLLAGE\n========================================================= *\/\n\n.yu-human-proof .yhp-final-collage{\n\n  position:relative;\n\n  width:100%;\n\n  aspect-ratio:.86;\n}\n\n\n.yu-human-proof .yhp-final-photo{\n\n  position:absolute;\n\n  width:72%;\n\n  height:72%;\n\n  border-radius:20px;\n\n  background-size:cover;\n\n  box-shadow:\n    0 18px 42px rgba(12,24,76,.11);\n\n  filter:\n    grayscale(1)\n    contrast(1.14);\n}\n\n\n.yu-human-proof .yhp-final-photo-grey{\n\n  left:0;\n\n  top:0;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/maglia-griggia.webp\");\n\n  background-position:center 19%;\n\n  transform:\n    rotate(-6deg);\n}\n\n\n.yu-human-proof .yhp-final-photo-car{\n\n  right:0;\n\n  top:14%;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/macchina-rossa.webp\");\n\n  background-position:center;\n\n  transform:\n    rotate(6deg);\n}\n\n\n.yu-human-proof .yhp-final-photo-dino{\n\n  z-index:4;\n\n  left:14%;\n\n  bottom:0;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/dinosauro.webp\");\n\n  background-position:center 24%;\n\n  transform:\n    rotate(-1deg);\n\n  filter:\n    grayscale(1)\n    contrast(1.40);\n}\n\n\n\/* =========================================================\nMINI PLEXY\n========================================================= *\/\n\n.yu-human-proof .yhp-mini-plexi{\n\n  position:absolute;\n\n  z-index:12;\n\n  right:-1%;\n\n  top:4%;\n\n  width:185px;\n\n  padding:\n    21px 18px 18px;\n\n  border-radius:14px;\n\n  border:\n    1px solid rgba(255,255,255,.72);\n\n  background:\n\n    linear-gradient(\n      135deg,\n      rgba(255,255,255,.12),\n      rgba(64,88,207,.14)\n    );\n\n  box-shadow:\n    0 15px 35px rgba(21,32,87,.13);\n\n  backdrop-filter:\n    blur(9px);\n\n  transform:\n    rotate(4deg);\n}\n\n\n.yu-human-proof .yhp-mini-plexi small{\n\n  display:block;\n\n  margin-bottom:7px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  opacity:.55;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-mini-plexi strong{\n\n  display:block;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:30px;\n\n  line-height:.75;\n\n  font-weight:700;\n\n  text-transform:uppercase;\n}\n\n\n\/* MINI SCREWS *\/\n\n.yu-human-proof .yhp-mini-screw{\n\n  position:absolute;\n\n  width:10px;\n\n  height:10px;\n\n  border-radius:50%;\n\n  background:\n\n    radial-gradient(\n      circle at 35% 30%,\n      #fff,\n      #70777d 55%,\n      #242a2e 100%\n    );\n}\n\n\n.yu-human-proof .yhp-mini-tl{\n  left:7px;\n  top:7px;\n}\n\n.yu-human-proof .yhp-mini-tr{\n  right:7px;\n  top:7px;\n}\n\n.yu-human-proof .yhp-mini-bl{\n  left:7px;\n  bottom:7px;\n}\n\n.yu-human-proof .yhp-mini-br{\n  right:7px;\n  bottom:7px;\n}\n\n\n\/* =========================================================\nORANGE NOTE\n========================================================= *\/\n\n.yu-human-proof .yhp-orange-note{\n\n  position:absolute;\n\n  z-index:13;\n\n  left:-4%;\n\n  bottom:7%;\n\n  min-width:160px;\n\n  padding:\n    15px 18px;\n\n  border-radius:10px;\n\n  background:var(--orange);\n\n  transform:\n    rotate(-4deg);\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:10px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-orange-note small{\n\n  display:block;\n\n  margin-bottom:6px;\n\n  font-size:7px;\n\n  opacity:.58;\n}\n\n\n\/* =========================================================\nFINAL FOOTER\n========================================================= *\/\n\n.yu-human-proof .yhp-final-footer{\n\n  position:absolute;\n\n  left:\n    clamp(28px,5vw,90px);\n\n  right:\n    clamp(28px,5vw,90px);\n\n  bottom:\n    clamp(20px,3vw,38px);\n\n  display:grid;\n\n  grid-template-columns:\n    auto 1fr auto 1fr auto;\n\n  gap:12px;\n\n  align-items:center;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-final-footer i{\n\n  height:1px;\n\n  background:\n    rgba(9,9,9,.28);\n}\n\n\n\n\/* =========================================================\nFINAL JOKE \/ DESIGN\n========================================================= *\/\n\n.yu-human-proof .yhp-design-joke{\n\n  position:absolute;\n\n  z-index:105;\n\n  inset:0;\n\n  overflow:hidden;\n\n  background:var(--bg);\n\n  opacity:0;\n\n  pointer-events:none;\n\n  will-change:\n    opacity,\n    transform;\n}\n\n\n.yu-human-proof .yhp-joke-v-pattern{\n\n  position:absolute;\n\n  inset:0;\n\n  z-index:-20;\n\n  background-image:\n    url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Vector-72.svg\");\n\n  background-repeat:repeat;\n\n  background-size:3px auto;\n\n  opacity:.052;\n\n  pointer-events:none;\n}\n\n\n.yu-human-proof .yhp-joke-design{\n\n  position:absolute;\n\n  z-index:-8;\n\n  left:50%;\n\n  top:50%;\n\n  width:112%;\n\n  transform:\n    translate(-50%,-50%);\n\n  color:var(--blue);\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:clamp(250px,29vw,560px);\n\n  line-height:.60;\n\n  font-weight:700;\n\n  letter-spacing:-.075em;\n\n  text-align:center;\n\n  text-transform:uppercase;\n\n  white-space:nowrap;\n}\n\n\n.yu-human-proof .yhp-joke-plexi{\n\n  position:absolute;\n\n  z-index:10;\n\n  left:50%;\n\n  top:51%;\n\n  width:min(760px,50vw);\n\n  padding:34px 38px;\n\n  transform:\n    translate(-50%,-50%)\n    rotate(-.6deg);\n}\n\n\n.yu-human-proof .yhp-joke-kicker{\n\n  margin-bottom:10px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:9px;\n\n  line-height:1;\n\n  font-weight:800;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-joke-plexi h3{\n\n  margin:0;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:clamp(58px,4.6vw,88px);\n\n  line-height:.70;\n\n  font-weight:700;\n\n  letter-spacing:-.04em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-joke-plexi p{\n\n  margin:24px 0 0;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:18px;\n\n  line-height:1.42;\n\n  font-weight:500;\n}\n\n\n\/* =========================================================\nPROGRESS\n========================================================= *\/\n\n.yu-human-proof .yhp-scroll{\n\n  position:absolute;\n\n  z-index:130;\n\n  left:3.5%;\n\n  bottom:20px;\n\n  display:grid;\n\n  grid-template-columns:\n    8px auto 80px auto;\n\n  gap:9px;\n\n  align-items:center;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n}\n\n\n.yu-human-proof .yhp-scroll b{\n\n  width:8px;\n\n  height:8px;\n\n  border-radius:50%;\n\n  background:var(--orange);\n}\n\n\n.yu-human-proof .yhp-scroll i{\n\n  width:80px;\n\n  height:1px;\n\n  background:\n    rgba(9,9,9,.35);\n\n  transform-origin:left center;\n\n  transform:scaleX(.05);\n}\n\n\n.yu-human-proof .yhp-scroll em{\n\n  color:var(--blue);\n\n  font-style:normal;\n}\n\n\n\/* =========================================================\nTABLET\n========================================================= *\/\n\n@media(max-width:1024px){\n\n  .yu-human-proof{\n\n    --header-space:115px;\n  }\n\n}\n\n\n\/* =========================================================\nMOBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n  .yu-human-proof{\n\n    --header-space:84px;\n\n    margin-top:24px;\n  }\n\n\n  .yu-human-proof .yhp-track{\n    height:640vh;\n  }\n\n\n  .yu-human-proof .yhp-v-pattern,\n  .yu-human-proof .yhp-final-v-pattern{\n\n    background-size:3px auto;\n\n    opacity:.045;\n  }\n\n\n  .yu-human-proof .yhp-design-solid{\n\n    left:-42vw;\n\n    width:190vw;\n\n    height:68%;\n  }\n\n\n  .yu-human-proof .yhp-meta{\n\n    top:11px;\n\n    font-size:6px;\n  }\n\n\n  .yu-human-proof .yhp-meta-left{\n    left:16px;\n  }\n\n\n  .yu-human-proof .yhp-meta-center{\n    display:none;\n  }\n\n\n  .yu-human-proof .yhp-meta-right{\n    right:16px;\n  }\n\n\n  .yu-human-proof .yhp-intro{\n\n    left:17px;\n\n    top:20%;\n\n    width:\n      calc(100% - 34px);\n\n    transform:none;\n  }\n\n\n  .yu-human-proof .yhp-intro h2{\n\n    font-size:\n      clamp(68px,20vw,102px);\n  }\n\n\n  .yu-human-proof .yhp-intro p{\n\n    margin-top:17px;\n\n    font-size:14px;\n  }\n\n\n  .yu-human-proof .yhp-captcha{\n\n    left:50%;\n\n    top:68%;\n\n    width:91vw;\n\n    padding:12px;\n\n    border-radius:14px;\n  }\n\n\n  .yu-human-proof .yhp-question{\n\n    padding:\n      12px 11px;\n\n    font-size:21px;\n  }\n\n\n  .yu-human-proof .yhp-captcha-head{\n\n    padding:\n      2px 11px 8px;\n\n    font-size:6px;\n  }\n\n\n  .yu-human-proof .yhp-grid{\n    gap:5px;\n  }\n\n\n  .yu-human-proof .yhp-tile{\n    border-radius:7px;\n  }\n\n\n  .yu-human-proof .yhp-photo-label{\n\n    left:5px;\n\n    bottom:5px;\n\n    font-size:4px;\n  }\n\n\n  .yu-human-proof .yhp-check{\n\n    width:19px;\n\n    height:19px;\n\n    right:4px;\n\n    top:4px;\n\n    font-size:9px;\n  }\n\n\n  .yu-human-proof .yhp-captcha-footer{\n\n    padding:\n      9px 9px 0;\n\n    font-size:5px;\n  }\n\n\n  .yu-human-proof .yhp-verify{\n\n    padding:\n      6px 9px;\n\n    border-radius:7px;\n  }\n\n\n  .yu-human-proof .yhp-float-copy{\n\n    left:14px;\n\n    right:14px;\n\n    bottom:13px;\n  }\n\n\n  .yu-human-proof .yhp-float-copy span{\n\n    margin-bottom:5px;\n\n    font-size:8px;\n  }\n\n\n  .yu-human-proof .yhp-float-copy strong{\n\n    max-width:96%;\n\n    font-size:clamp(27px,8.8vw,40px);\n  }\n\n\n  .yu-human-proof .yhp-float-grey{\n    width:53vw;\n  }\n\n\n  .yu-human-proof .yhp-float-car{\n\n    left:8%;\n\n    width:84vw;\n  }\n\n\n  .yu-human-proof .yhp-float-dino{\n    width:68vw;\n  }\n\n\n  .yu-human-proof .yhp-chaos-copy{\n\n    left:17px;\n\n    bottom:11%;\n  }\n\n\n  .yu-human-proof .yhp-chaos-copy strong{\n\n    font-size:\n      clamp(65px,20vw,95px);\n  }\n\n\n  .yu-human-proof .yhp-chaos-copy em{\n\n    margin-left:12vw;\n\n    font-size:\n      clamp(42px,13vw,66px);\n  }\n\n\n  .yu-human-proof .yhp-failure{\n\n    padding:\n      22px 17px;\n  }\n\n\n  .yu-human-proof .yhp-failure h3{\n\n    font-size:\n      clamp(78px,23vw,120px);\n  }\n\n\n  .yu-human-proof .yhp-failure p{\n\n    font-size:\n      clamp(25px,8vw,40px);\n  }\n\n\n  .yu-human-proof .yhp-final{\n\n    padding:\n      18px 17px;\n  }\n\n\n  .yu-human-proof .yhp-final-inner{\n\n    left:17px;\n\n    right:17px;\n\n    top:46%;\n\n    display:block;\n  }\n\n\n  .yu-human-proof .yhp-final-copy h3{\n\n    font-size:\n      clamp(58px,17vw,87px);\n  }\n\n\n  .yu-human-proof .yhp-bio{\n\n    width:74%;\n\n    margin-top:18px;\n\n    font-size:10px;\n  }\n\n\n  .yu-human-proof .yhp-bio strong{\n    font-size:13px;\n  }\n\n\n  .yu-human-proof .yhp-final-collage{\n\n    position:absolute;\n\n    right:-12vw;\n\n    bottom:-5vh;\n\n    width:47vw;\n  }\n\n\n  .yu-human-proof .yhp-final-photo{\n    border-radius:10px;\n  }\n\n\n  .yu-human-proof .yhp-mini-plexi{\n\n    width:100px;\n\n    padding:\n      14px 10px 10px;\n\n    border-radius:8px;\n  }\n\n\n  .yu-human-proof .yhp-mini-plexi strong{\n    font-size:17px;\n  }\n\n\n  .yu-human-proof .yhp-orange-note{\n\n    min-width:90px;\n\n    padding:\n      8px 9px;\n\n    font-size:5px;\n  }\n\n\n  .yu-human-proof .yhp-final-footer{\n\n    left:17px;\n\n    right:17px;\n\n    gap:5px;\n\n    font-size:3px;\n  }\n\n\n  .yu-human-proof .yhp-about-actions{\n\n    margin-top:12px;\n\n    font-size:clamp(31px,9.5vw,44px);\n  }\n\n\n  .yu-human-proof .yhp-joke-design{\n\n    width:190%;\n\n    font-size:clamp(210px,78vw,340px);\n  }\n\n\n  .yu-human-proof .yhp-joke-plexi{\n\n    left:16px;\n\n    right:16px;\n\n    top:50%;\n\n    width:auto;\n\n    padding:24px 22px;\n\n    transform:\n      translateY(-50%)\n      rotate(-.6deg);\n  }\n\n\n  .yu-human-proof .yhp-joke-plexi h3{\n\n    font-size:clamp(46px,13.8vw,64px);\n  }\n\n\n  .yu-human-proof .yhp-joke-plexi p{\n\n    margin-top:18px;\n\n    font-size:18px;\n  }\n\n}\n\n\n\/* =========================================================\nYU.DESIGN \u2014 MODIFICHE CONFERMATE\nJS originale invariato.\n========================================================= *\/\n\n\/* ---------- pulizia mini-label inutili ---------- *\/\n.yu-human-proof .yhp-meta-left,\n.yu-human-proof .yhp-kicker,\n.yu-human-proof .yhp-analysis,\n.yu-human-proof .yhp-failure-meta,\n.yu-human-proof .yhp-final-meta,\n.yu-human-proof .yhp-final-kicker,\n.yu-human-proof .yhp-final-footer,\n.yu-human-proof .yhp-mini-plexi,\n.yu-human-proof .yhp-orange-note,\n.yu-human-proof .yhp-joke-kicker{\n  display:none !important;\n}\n\n\/* ---------- body ---------- *\/\n.yu-human-proof .yhp-bio,\n.yu-human-proof .yhp-joke-plexi p{\n  font-size:18px;\n  line-height:1.48;\n  letter-spacing:0;\n}\n\n\/* =========================================================\n01 \/ APERTURA\n========================================================= *\/\n\n.yu-human-proof .yhp-intro p{\n  display:none;\n}\n\n.yu-human-proof .yhp-intro h2{\n  letter-spacing:-.045em;\n}\n\n\/* =========================================================\n03 \/ TRE FOTO APERTE\n========================================================= *\/\n\n\/* titoli bianchi leggermente pi\u00f9 piccoli *\/\n.yu-human-proof .yhp-float-copy strong{\n  font-size:clamp(24px,1.8vw,34px);\n  line-height:.86;\n  letter-spacing:-.02em;\n}\n\n.yu-human-proof .yhp-float-copy span{\n  font-size:9px;\n}\n\n\/* testo del dinosauro sopra la foto *\/\n.yu-human-proof .yhp-float-dino .yhp-float-copy{\n  top:18px;\n  bottom:auto;\n}\n\n.yu-human-proof .yhp-float-dino::after{\n  background:\n    linear-gradient(\n      180deg,\n      rgba(0,0,0,.50) 0%,\n      rgba(0,0,0,.16) 33%,\n      transparent 60%\n    );\n}\n\n\/* scritta nera + blu pi\u00f9 alta, foto lasciate intatte su desktop *\/\n.yu-human-proof .yhp-chaos-copy{\n  bottom:22%;\n}\n\n.yu-human-proof .yhp-chaos-copy strong{\n  font-size:clamp(74px,6.3vw,120px);\n  line-height:.68;\n  letter-spacing:-.045em;\n}\n\n.yu-human-proof .yhp-chaos-copy em{\n  margin-left:10vw;\n  font-size:clamp(46px,4.1vw,78px);\n  line-height:.72;\n  letter-spacing:-.028em;\n}\n\n\/* =========================================================\n05 \/ IDENTIT\u00c0\n========================================================= *\/\n\n\/* asse unico pi\u00f9 a sinistra *\/\n.yu-human-proof .yhp-final-inner{\n  left:clamp(18px,4vw,72px);\n}\n\n\/* una sola scritta blu: PIVNYAK *\/\n.yu-human-proof .yhp-final-copy h3 span{\n  color:var(--blue);\n}\n\n.yu-human-proof .yhp-about-actions,\n.yu-human-proof .yhp-about-actions span{\n  color:var(--black) !important;\n}\n\n.yu-human-proof .yhp-final-copy h3{\n  line-height:.73;\n  letter-spacing:-.045em;\n}\n\n.yu-human-proof .yhp-about-actions{\n  margin-top:22px;\n  font-size:clamp(28px,2vw,38px);\n  line-height:1;\n}\n\n.yu-human-proof .yhp-bio{\n  width:min(610px,95%);\n  margin-top:24px;\n}\n\n.yu-human-proof .yhp-bio strong{\n  display:inline;\n  margin:0;\n  font-size:inherit;\n  line-height:inherit;\n  font-weight:750;\n}\n\n\/* =========================================================\n06 \/ FINALE GLASS\n========================================================= *\/\n\n.yu-human-proof .yhp-design-joke{\n  overflow:hidden;\n}\n\n\/* DESIGN gigante davvero a pieno schermo *\/\n.yu-human-proof .yhp-joke-design{\n  left:50%;\n  top:50%;\n  width:132vw;\n  transform:translate(-50%,-50%);\n  font-size:clamp(330px,34vw,650px);\n  line-height:.60;\n  text-align:center;\n  white-space:nowrap;\n}\n\n.yu-human-proof .yhp-joke-plexi{\n  width:min(820px,62vw);\n  padding:42px 46px 40px;\n}\n\n.yu-human-proof .yhp-joke-plexi h3{\n  line-height:.80;\n  letter-spacing:-.035em;\n}\n\n.yu-human-proof .yhp-joke-plexi p{\n  margin-top:24px;\n}\n\n\/* =========================================================\nTABLET\n========================================================= *\/\n\n@media (min-width:768px) and (max-width:1024px){\n\n  .yu-human-proof{\n    --header-space:115px;\n  }\n\n  \/* prima schermata: DESIGN di sfondo pi\u00f9 contenuto *\/\n  .yu-human-proof .yhp-design-solid{\n    left:-8vw;\n    width:116vw;\n    height:70%;\n  }\n\n  .yu-human-proof .yhp-intro{\n    left:4%;\n    top:48%;\n    width:43%;\n  }\n\n  .yu-human-proof .yhp-intro h2{\n    font-size:clamp(72px,9vw,102px);\n    line-height:.80;\n  }\n\n  .yu-human-proof .yhp-captcha{\n    width:53vw;\n  }\n\n  \/* 03\/06: titoli bianchi pi\u00f9 piccoli *\/\n  .yu-human-proof .yhp-float-copy strong{\n    font-size:clamp(18px,2.3vw,25px);\n    line-height:.88;\n  }\n\n  .yu-human-proof .yhp-float-copy span{\n    font-size:7px;\n  }\n\n  \/* cifre di fondo pi\u00f9 ordinate *\/\n  .yu-human-proof .yhp-giant-number{\n    left:2%;\n    top:52%;\n    font-size:42vh;\n    letter-spacing:-.05em;\n  }\n\n  .yu-human-proof .yhp-chaos-copy{\n    left:4%;\n    bottom:23%;\n  }\n\n  .yu-human-proof .yhp-chaos-copy strong{\n    font-size:clamp(54px,6.7vw,76px);\n  }\n\n  .yu-human-proof .yhp-chaos-copy em{\n    margin-left:14vw;\n    font-size:clamp(34px,4.6vw,50px);\n  }\n\n  \/* 05\/06: composizione foto tablet *\/\n  .yu-human-proof .yhp-final-inner{\n    left:22px;\n    right:24px;\n    grid-template-columns:1.05fr .95fr;\n    gap:34px;\n  }\n\n  .yu-human-proof .yhp-final-copy h3{\n    font-size:clamp(64px,8vw,90px);\n    line-height:.78;\n  }\n\n  .yu-human-proof .yhp-about-actions{\n    font-size:27px;\n  }\n\n  .yu-human-proof .yhp-bio{\n    max-width:410px;\n    font-size:16px;\n  }\n\n  .yu-human-proof .yhp-final-collage{\n    width:95%;\n    max-width:430px;\n  }\n\n  .yu-human-proof .yhp-final-photo{\n    width:70%;\n    height:70%;\n  }\n\n  .yu-human-proof .yhp-final-photo-grey{\n    left:-1%;\n    top:1%;\n  }\n\n  .yu-human-proof .yhp-final-photo-car{\n    right:-1%;\n    top:14%;\n  }\n\n  .yu-human-proof .yhp-final-photo-dino{\n    left:14%;\n    bottom:0;\n  }\n\n  \/* 06\/06 full-screen *\/\n  .yu-human-proof .yhp-joke-design{\n    width:150vw;\n    font-size:clamp(300px,42vw,500px);\n  }\n\n  .yu-human-proof .yhp-joke-plexi{\n    width:min(720px,78vw);\n    padding:36px 38px 34px;\n  }\n\n  .yu-human-proof .yhp-joke-plexi p{\n    font-size:16px;\n  }\n}\n\n\/* =========================================================\nMOBILE\n========================================================= *\/\n\n@media (max-width:767px){\n\n  .yu-human-proof{\n    --header-space:84px;\n    margin-top:24px;\n  }\n\n  \/* prima schermata: titolo nero pi\u00f9 in alto *\/\n  .yu-human-proof .yhp-intro{\n    left:17px;\n    right:17px;\n    top:8%;\n    width:auto;\n    transform:none;\n  }\n\n  .yu-human-proof .yhp-intro h2{\n    max-width:345px;\n    font-size:clamp(50px,13.4vw,67px);\n    line-height:.84;\n    letter-spacing:-.025em;\n  }\n\n  .yu-human-proof .yhp-captcha{\n    left:50%;\n    top:69%;\n    width:91vw;\n    padding:12px;\n  }\n\n  .yu-human-proof .yhp-question{\n    padding:11px 10px 12px;\n    font-size:20px;\n    line-height:.97;\n  }\n\n  .yu-human-proof .yhp-captcha-head{\n    padding:2px 10px 8px;\n    font-size:6px;\n  }\n\n  \/* 03\/06: teniamo leggibili foto 01 + 03 + testo nero\/blu *\/\n  .yu-human-proof .yhp-float-grey{\n    left:14px;\n    top:8%;\n    width:54vw;\n  }\n\n  .yu-human-proof .yhp-float-dino{\n    left:22%;\n    right:auto;\n    top:26%;\n    width:76vw;\n    aspect-ratio:.90;\n  }\n\n  .yu-human-proof .yhp-float-car{\n    left:14px;\n    bottom:4%;\n    width:84vw;\n  }\n\n  .yu-human-proof .yhp-float-copy{\n    left:10px;\n    right:10px;\n    bottom:10px;\n  }\n\n  .yu-human-proof .yhp-float-copy span{\n    font-size:7px;\n  }\n\n  .yu-human-proof .yhp-float-copy strong{\n    font-size:clamp(17px,5.2vw,23px);\n    line-height:.90;\n  }\n\n  .yu-human-proof .yhp-float-dino .yhp-float-copy{\n    top:12px;\n    bottom:auto;\n  }\n\n  .yu-human-proof .yhp-chaos-copy{\n    left:17px;\n    right:17px;\n    bottom:21%;\n    width:auto;\n  }\n\n  .yu-human-proof .yhp-chaos-copy strong{\n    font-size:clamp(48px,12.8vw,64px);\n    line-height:.74;\n  }\n\n  .yu-human-proof .yhp-chaos-copy em{\n    margin-left:27%;\n    font-size:clamp(30px,8.5vw,40px);\n    line-height:.79;\n  }\n\n  \/* su mobile le cifre giganti sporcano *\/\n  .yu-human-proof .yhp-giant-number{\n    display:none !important;\n  }\n\n  \/* 05\/06: asse sinistro pulito + collage separato *\/\n  .yu-human-proof .yhp-final{\n    padding:17px;\n  }\n\n  .yu-human-proof .yhp-final-inner{\n    left:17px;\n    right:17px;\n    top:10%;\n    display:block;\n    transform:none;\n  }\n\n  .yu-human-proof .yhp-final-copy h3{\n    max-width:350px;\n    font-size:clamp(53px,13.8vw,72px);\n    line-height:.82;\n    letter-spacing:-.025em;\n  }\n\n  .yu-human-proof .yhp-about-actions{\n    margin-top:15px;\n    font-size:22px;\n  }\n\n  .yu-human-proof .yhp-bio{\n    width:100%;\n    max-width:345px;\n    margin-top:17px;\n    font-size:16px;\n    line-height:1.48;\n  }\n\n  .yu-human-proof .yhp-final-collage{\n    position:absolute;\n    right:-3%;\n    bottom:-3%;\n    width:62%;\n    aspect-ratio:.90;\n  }\n\n  .yu-human-proof .yhp-final-photo{\n    width:72%;\n    height:72%;\n    border-radius:11px;\n  }\n\n  \/* 06\/06: glass pi\u00f9 ordinato, body 16px *\/\n  .yu-human-proof .yhp-joke-design{\n    width:215vw;\n    font-size:clamp(230px,84vw,345px);\n  }\n\n  .yu-human-proof .yhp-joke-plexi{\n    left:17px;\n    right:17px;\n    top:50%;\n    width:auto;\n    padding:28px 23px 26px;\n    transform:translateY(-50%) rotate(-.35deg);\n  }\n\n  .yu-human-proof .yhp-joke-plexi h3{\n    font-size:clamp(45px,12.5vw,61px);\n    line-height:.83;\n  }\n\n  .yu-human-proof .yhp-joke-plexi p{\n    margin-top:19px;\n    font-size:16px;\n    line-height:1.5;\n  }\n\n  \/* blur leggermente alleggerito *\/\n  .yu-human-proof .yhp-plexi{\n    backdrop-filter:blur(5px) saturate(104%);\n    -webkit-backdrop-filter:blur(5px) saturate(104%);\n  }\n}\n\n\n\/* =========================================================\nPATCH MIRATA V2 \u2014 SOLO MODIFICHE RICHIESTE\n========================================================= *\/\n\n\/* BLOCCO 03: niente micro-label sopra i tre titoli *\/\n.yu-human-proof .yhp-float-copy span{\n  display:none !important;\n}\n\n\/* i tre titoli usano la stessa tipografia dei vecchi titoli bianchi *\/\n.yu-human-proof .yhp-float-copy strong{\n  font-size:clamp(24px,1.8vw,34px);\n  line-height:.88;\n}\n\n\/* dinosauro: testo pi\u00f9 in basso rispetto alla versione precedente *\/\n.yu-human-proof .yhp-float-dino .yhp-float-copy{\n  top:46px !important;\n  bottom:auto !important;\n}\n\n\/* ULTIMA SCHERMATA:\n   non testo digitato, ma la vera immagine DESIGN usata nel progetto *\/\n.yu-human-proof .yhp-joke-design{\n  color:transparent !important;\n  font-size:0 !important;\n  text-indent:-9999px;\n  width:132vw !important;\n  height:92% !important;\n  background-image:url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Group-1-e1777719547898.png\");\n  background-repeat:no-repeat;\n  background-size:contain;\n  background-position:center;\n}\n\n\/* TABLET *\/\n@media (min-width:768px) and (max-width:1024px){\n\n  .yu-human-proof .yhp-float-copy strong{\n    font-size:clamp(18px,2.3vw,25px);\n  }\n\n  .yu-human-proof .yhp-float-dino .yhp-float-copy{\n    top:42px !important;\n  }\n\n  .yu-human-proof .yhp-joke-design{\n    width:150vw !important;\n    height:94% !important;\n  }\n}\n\n\/* MOBILE *\/\n@media (max-width:767px){\n\n  \/* 03: titolo dinosauro pi\u00f9 gi\u00f9, ma dentro il viewport *\/\n  .yu-human-proof .yhp-float-dino .yhp-float-copy{\n    top:48px !important;\n  }\n\n  .yu-human-proof .yhp-float-copy strong{\n    font-size:clamp(17px,5.2vw,23px);\n  }\n\n  \/* 05\/06: collage SOTTO il testo, non affiancato *\/\n  .yu-human-proof .yhp-final-inner{\n    top:8% !important;\n    display:block !important;\n  }\n\n  .yu-human-proof .yhp-final-collage{\n    position:relative !important;\n    right:auto !important;\n    bottom:auto !important;\n    width:78% !important;\n    margin:28px 0 0 auto !important;\n    aspect-ratio:.90;\n  }\n\n  .yu-human-proof .yhp-final-photo{\n    width:72% !important;\n    height:72% !important;\n  }\n\n  \/* immagine DESIGN gigante anche su mobile *\/\n  .yu-human-proof .yhp-joke-design{\n    width:215vw !important;\n    height:96% !important;\n  }\n}\n\n\n\/* =========================================================\nPATCH V3 \u2014 SOLO LE 3 MODIFICHE RICHIESTE\n========================================================= *\/\n\n\/* 1) FOTO DINOSAURO: leggermente pi\u00f9 piccola.\n   Titolo bianco spostato sul lato, a met\u00e0 altezza,\n   cos\u00ec resta nel viewport e non copre il volto. *\/\n.yu-human-proof .yhp-float-dino{\n  width:min(39vw,720px) !important;\n  aspect-ratio:.92 !important;\n}\n\n.yu-human-proof .yhp-float-dino .yhp-float-copy{\n  top:50% !important;\n  left:18px !important;\n  right:auto !important;\n  bottom:auto !important;\n  width:auto !important;\n  max-width:70% !important;\n  transform:translateY(-50%) !important;\n}\n\n.yu-human-proof .yhp-float-dino .yhp-float-copy strong{\n  display:block;\n}\n\n\/* 2) PENULTIMO BLOCCO DESKTOP:\n   \"SONO YULIYA PIVNYAK\" pi\u00f9 grande e pi\u00f9 editoriale,\n   senza cambiare il resto della composizione. *\/\n@media (min-width:1025px){\n  .yu-human-proof .yhp-final-copy h3{\n    font-size:clamp(112px,8.8vw,168px) !important;\n    line-height:.70 !important;\n    letter-spacing:-.055em !important;\n    max-width:760px;\n  }\n\n  .yu-human-proof .yhp-final-copy h3 span{\n    display:inline-block;\n    transform:translateX(18px);\n  }\n}\n\n\/* 3) TABLET:\n   nella scena con le tre foto eliminate completamente\n   le cifre blu giganti di sfondo. *\/\n@media (min-width:768px) and (max-width:1024px){\n  .yu-human-proof .yhp-giant-number{\n    display:none !important;\n  }\n\n  .yu-human-proof .yhp-float-dino{\n    width:39vw !important;\n    right:0 !important;\n  }\n\n  .yu-human-proof .yhp-float-dino .yhp-float-copy{\n    top:54% !important;\n    left:14px !important;\n    max-width:72% !important;\n  }\n}\n\n\/* MOBILE:\n   dinosauro pi\u00f9 contenuto e titolo sempre visibile,\n   senza toccare il resto della composizione mobile. *\/\n@media (max-width:767px){\n  .yu-human-proof .yhp-float-dino{\n    width:70vw !important;\n    left:27% !important;\n    aspect-ratio:.94 !important;\n  }\n\n  .yu-human-proof .yhp-float-dino .yhp-float-copy{\n    top:56% !important;\n    left:12px !important;\n    max-width:74% !important;\n  }\n}\n\n\n\/* =========================================================\nPATCH V4 \u2014 REGIA 03\/06 DEFINITIVA\nSolo collage tre foto + frase di transizione.\n========================================================= *\/\n\n\/* micro-label tecnico eliminato anche per sicurezza *\/\n.yu-human-proof .yhp-chaos-copy > span{display:none !important;}\n\n\/* Le tre etichette diventano un unico sistema visivo *\/\n.yu-human-proof .yhp-float-copy{\n  top:auto !important;\n  left:16px !important;\n  right:16px !important;\n  bottom:15px !important;\n  transform:none !important;\n  max-width:none !important;\n}\n.yu-human-proof .yhp-float-copy strong{\n  font-size:clamp(21px,1.55vw,29px) !important;\n  line-height:.92 !important;\n  letter-spacing:-.015em !important;\n  max-width:100% !important;\n}\n\n\/* Dino: torna una tessera del collage, non una quarta schermata *\/\n.yu-human-proof .yhp-float-dino{\n  width:min(31vw,535px) !important;\n  max-width:535px !important;\n  aspect-ratio:.84 !important;\n  right:2.5% !important;\n  top:8% !important;\n  background-position:center 24% !important;\n}\n.yu-human-proof .yhp-float-dino::after{\n  background:linear-gradient(180deg,transparent 54%,rgba(0,0,0,.48)) !important;\n}\n.yu-human-proof .yhp-float-dino .yhp-float-copy{\n  top:auto !important;\n  bottom:15px !important;\n  left:16px !important;\n  right:16px !important;\n  width:auto !important;\n  max-width:none !important;\n  transform:none !important;\n}\n\n\/* Frase conclusiva del collage: pi\u00f9 pulita, senza micro-label *\/\n.yu-human-proof .yhp-chaos-copy{\n  z-index:80 !important;\n}\n\n\/* TABLET \u2014 niente cifre blu, collage pi\u00f9 equilibrato *\/\n@media (min-width:768px) and (max-width:1024px){\n  .yu-human-proof .yhp-giant-number{display:none !important;}\n  .yu-human-proof .yhp-float-grey{\n    left:5% !important; top:11% !important; width:31vw !important;\n  }\n  .yu-human-proof .yhp-float-dino{\n    left:auto !important; right:3% !important; top:10% !important;\n    width:40vw !important; max-width:none !important;\n  }\n  .yu-human-proof .yhp-float-car{\n    left:25% !important; bottom:5% !important; width:52vw !important;\n  }\n  .yu-human-proof .yhp-float-copy strong{\n    font-size:clamp(18px,2.55vw,25px) !important;\n  }\n  .yu-human-proof .yhp-chaos-copy{\n    left:5% !important; bottom:22% !important; width:55% !important;\n  }\n  .yu-human-proof .yhp-chaos-copy strong{\n    font-size:clamp(58px,8vw,78px) !important;\n  }\n  .yu-human-proof .yhp-chaos-copy em{\n    margin-left:10% !important;\n    font-size:clamp(34px,5.2vw,50px) !important;\n  }\n}\n\n\/* MOBILE \u2014 prima il collage, poi la frase: niente testo sulla foto rossa *\/\n@media (max-width:767px){\n  .yu-human-proof .yhp-giant-number{display:none !important;}\n  .yu-human-proof .yhp-float-grey{\n    left:5% !important; top:7% !important; width:53vw !important;\n  }\n  .yu-human-proof .yhp-float-dino{\n    left:20% !important; right:auto !important; top:22% !important;\n    width:74vw !important; max-width:none !important; aspect-ratio:.88 !important;\n  }\n  .yu-human-proof .yhp-float-car{\n    left:5% !important; bottom:18% !important; width:82vw !important;\n  }\n  .yu-human-proof .yhp-float-copy{\n    left:11px !important; right:11px !important; bottom:11px !important;\n  }\n  .yu-human-proof .yhp-float-copy strong{\n    font-size:clamp(17px,5vw,21px) !important;\n    line-height:.94 !important;\n  }\n  .yu-human-proof .yhp-chaos-copy{\n    left:18px !important; right:18px !important; bottom:2.5% !important;\n    width:auto !important;\n  }\n  .yu-human-proof .yhp-chaos-copy strong{\n    font-size:clamp(43px,12vw,55px) !important;\n    line-height:.78 !important;\n  }\n  .yu-human-proof .yhp-chaos-copy em{\n    margin:3px 0 0 21% !important;\n    font-size:clamp(27px,7.8vw,35px) !important;\n    line-height:.82 !important;\n  }\n}\n\n\n\/* =========================================================\nPATCH V5 \u2014 SOLO 2 MODIFICHE\n1) \"NON ENTRA IN UNA SOLA CASELLA.\" arancione\n2) cifre giganti nascoste su tablet\n========================================================= *\/\n\n.yu-human-proof .yhp-chaos-copy em{\n  color:var(--orange) !important;\n}\n\n@media (min-width:768px) and (max-width:1024px){\n  .yu-human-proof .yhp-giant-number{\n    display:none !important;\n  }\n}\n\n\n\/* =========================================================\nPATCH V6 \u2014 TIMING FOTO + GERARCHIA 05 + MICRO V\n========================================================= *\/\n\n\/* Pi\u00f9 spazio fisico allo scroll, senza cambiare le scene *\/\n.yu-human-proof .yhp-track{\n  height:780vh;\n}\n\n\/* Pattern micro-V nel blocco 05:\n   \u00e8 gi\u00e0 lo stesso Vector-72 usato nel linguaggio visuale,\n   ma qui diventa un po' pi\u00f9 percepibile senza dominare. *\/\n.yu-human-proof .yhp-final-v-pattern{\n  background-image:url(\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Vector-72.svg\") !important;\n  background-repeat:repeat !important;\n  background-size:3px auto !important;\n  opacity:.075 !important;\n}\n\n\/* Nuova gerarchia del 05 *\/\n.yu-human-proof .yhp-final-copy h3{\n  max-width:900px;\n}\n\n.yu-human-proof .yhp-final-copy h3 span{\n  color:var(--blue) !important;\n}\n\n.yu-human-proof .yhp-about-actions{\n  max-width:760px;\n  margin-top:26px;\n  font-size:clamp(28px,2.15vw,42px) !important;\n  line-height:.98 !important;\n}\n\n.yu-human-proof .yhp-bio{\n  margin-top:30px !important;\n}\n\n.yu-human-proof .yhp-bio p{\n  margin:0;\n}\n\n\/* Tablet: conserva il respiro extra *\/\n@media (min-width:768px) and (max-width:1024px){\n  .yu-human-proof .yhp-track{\n    height:760vh;\n  }\n\n  .yu-human-proof .yhp-final-v-pattern{\n    opacity:.07 !important;\n  }\n\n  .yu-human-proof .yhp-final-copy h3{\n    font-size:clamp(60px,7.4vw,84px) !important;\n    line-height:.79 !important;\n  }\n\n  .yu-human-proof .yhp-about-actions{\n    margin-top:20px;\n    font-size:clamp(22px,2.8vw,30px) !important;\n  }\n}\n\n\/* Mobile: pattern presente ma pi\u00f9 leggero; gerarchia leggibile *\/\n@media (max-width:767px){\n  .yu-human-proof .yhp-track{\n    height:700vh;\n  }\n\n  .yu-human-proof .yhp-final-v-pattern{\n    opacity:.06 !important;\n    background-size:3px auto !important;\n  }\n\n  .yu-human-proof .yhp-final-copy h3{\n    max-width:355px !important;\n    font-size:clamp(49px,12.8vw,66px) !important;\n    line-height:.83 !important;\n  }\n\n  .yu-human-proof .yhp-about-actions{\n    max-width:330px;\n    margin-top:16px;\n    font-size:clamp(21px,5.8vw,27px) !important;\n    line-height:1 !important;\n  }\n\n  .yu-human-proof .yhp-bio{\n    margin-top:18px !important;\n  }\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\n  \/* =======================================================\n  ROBUST ELEMENTOR INITIALIZER\n\n  Non dipende da window scroll.\n  Misura continuamente la posizione reale del blocco.\n  ======================================================= *\/\n\n\n  function clamp(v,min,max){\n\n    return Math.min(\n      Math.max(v,min),\n      max\n    );\n  }\n\n\n  function lerp(a,b,t){\n\n    return a + (b-a)*t;\n  }\n\n\n  function range(v,a,b){\n\n    if(b === a){\n      return 0;\n    }\n\n\n    return clamp(\n      (v-a)\/(b-a),\n      0,\n      1\n    );\n  }\n\n\n  function ease(t){\n\n    t = clamp(t,0,1);\n\n\n    return t < .5\n\n      ? 4*t*t*t\n\n      : 1 -\n        Math.pow(-2*t+2,3)\/2;\n  }\n\n\n\n  function init(root){\n\n    if(root.__yhpController){\n\n      root.__yhpController.destroy();\n    }\n\n\n    const q =\n      selector =>\n        root.querySelector(selector);\n\n\n    const qa =\n      selector =>\n        Array.from(\n          root.querySelectorAll(selector)\n        );\n\n\n    const track       = q(\".yhp-track\");\n    const stage       = q(\".yhp-stage\");\n    const intro       = q(\".yhp-intro\");\n    const captcha     = q(\".yhp-captcha\");\n    const design      = q(\".yhp-design-solid\");\n    const number      = q(\".yhp-giant-number\");\n\n    const checks      = qa(\".yhp-check\");\n    const images      = qa(\".yhp-img\");\n    const tiles       = qa(\".yhp-tile\");\n\n    const analysisA   = q(\".yhp-analysis-a\");\n    const analysisB   = q(\".yhp-analysis-b\");\n\n    const grey        = q(\".yhp-float-grey\");\n    const car         = q(\".yhp-float-car\");\n    const dino        = q(\".yhp-float-dino\");\n\n    const chaos       = q(\".yhp-chaos-copy\");\n    const failure     = q(\".yhp-failure\");\n    const finalScreen = q(\".yhp-final\");\n    const designJoke  = q(\".yhp-design-joke\");\n\n    const progressUI  = q(\".yhp-scroll\");\n    const progressBar = q(\".yhp-scroll i\");\n    const progressNum = q(\".yhp-scroll em\");\n\n\n    if(\n      !track ||\n      !stage ||\n      !intro ||\n      !captcha\n    ){\n      return;\n    }\n\n\n    let destroyed = false;\n\n    let previousProgress = -1;\n\n\n    \/* =====================================================\n    FIX ELEMENTOR ANCESTOR OVERFLOW\n\n    Sticky smette di funzionare se un genitore Elementor\n    crea un overflow hidden\/auto.\n    ===================================================== *\/\n\n    let ancestor =\n      root.parentElement;\n\n\n    let depth = 0;\n\n\n    while(\n      ancestor &&\n      ancestor !== document.body &&\n      depth < 6\n    ){\n\n      const style =\n        getComputedStyle(ancestor);\n\n\n      if(\n        style.overflowY === \"hidden\" ||\n        style.overflowY === \"clip\" ||\n        style.overflowY === \"auto\"\n      ){\n\n        ancestor.style.overflowY =\n          \"visible\";\n      }\n\n\n      depth++;\n\n      ancestor =\n        ancestor.parentElement;\n    }\n\n\n\n    \/* =====================================================\n    PROGRESS\n    ===================================================== *\/\n\n    function getProgress(){\n\n      const rect =\n        track.getBoundingClientRect();\n\n\n      const stageHeight =\n        stage.getBoundingClientRect().height;\n\n\n      const total =\n        Math.max(\n          1,\n          track.offsetHeight -\n          stageHeight\n        );\n\n\n      const css =\n        getComputedStyle(root);\n\n\n      const stickyTop =\n        parseFloat(\n          css.getPropertyValue(\n            \"--header-space\"\n          )\n        ) || 0;\n\n\n      return clamp(\n        (stickyTop - rect.top) \/ total,\n        0,\n        1\n      );\n\n    }\n\n\n\n    \/* =====================================================\n    RENDER\n    ===================================================== *\/\n\n    function render(p){\n\n\n      const mobile =\n        window.innerWidth <= 767;\n\n\n      \/* progress *\/\n\n      progressBar.style.transform =\n        `scaleX(${Math.max(.05,p)})`;\n\n\n      progressNum.textContent =\n\n        p < .18 ? \"01 \/ 06\" :\n\n        p < .37 ? \"02 \/ 06\" :\n\n        p < .68 ? \"03 \/ 06\" :\n\n        p < .82 ? \"04 \/ 06\" :\n\n        p < .95 ? \"05 \/ 06\" :\n\n        \"06 \/ 06\";\n\n\n\n      \/* ===================================================\n      BACKGROUND\n      =================================================== *\/\n\n      design.style.transform =\n        `translateY(\n          calc(\n            -50% +\n            ${lerp(0,-34,p)}px\n          )\n        )\n        scale(${lerp(1,1.035,p)})`;\n\n\n\n      \/* ===================================================\n      ACT 1 \u2014 INTRO\n      =================================================== *\/\n\n      const introOut =\n        ease(\n          range(\n            p,\n            .025,\n            .145\n          )\n        );\n\n\n      intro.style.opacity =\n        1-introOut;\n\n\n      intro.style.transform =\n\n        mobile\n\n          ? `translateY(${\n              -22*introOut\n            }px)`\n\n          : `translateY(-50%)\n             translateX(${\n               -55*introOut\n             }px)`;\n\n\n\n      \/* ===================================================\n      ACT 2 \u2014 CAPTCHA CENTER\n      =================================================== *\/\n\n      const centre =\n        ease(\n          range(\n            p,\n            .055,\n            .21\n          )\n        );\n\n\n      captcha.style.left =\n\n        mobile\n\n          ? \"50%\"\n\n          : `${lerp(\n              72,\n              50,\n              centre\n            )}%`;\n\n\n      captcha.style.top =\n\n        mobile\n\n          ? `${lerp(\n              68,\n              50,\n              centre\n            )}%`\n\n          : \"51%\";\n\n\n\n      \/* checks *\/\n\n      const starts =\n        [.16,.205,.25];\n\n\n      checks.forEach(\n        function(el,index){\n\n          const t =\n            ease(\n              range(\n                p,\n                starts[index],\n                starts[index]+.055\n              )\n            );\n\n\n          el.style.opacity =\n            t;\n\n\n          el.style.transform =\n            `scale(${lerp(.3,1,t)})\n             rotate(${lerp(-25,0,t)}deg)`;\n\n        }\n      );\n\n\n      \/* colour *\/\n\n      const colour =\n        ease(\n          range(\n            p,\n            .19,\n            .315\n          )\n        );\n\n\n      images.forEach(\n        function(img){\n\n          img.style.filter =\n            `grayscale(${lerp(1,.05,colour)})\n             contrast(1.08)`;\n\n        }\n      );\n\n\n\n      \/* analysis *\/\n\n      const analyse =\n        ease(\n          range(\n            p,\n            .27,\n            .34\n          )\n        );\n\n\n      const analyseOut =\n        ease(\n          range(\n            p,\n            .39,\n            .455\n          )\n        );\n\n\n      analysisA.style.opacity =\n        analyse *\n        (1-analyseOut);\n\n\n      analysisA.style.transform =\n        `translateY(${lerp(16,0,analyse)}px)`;\n\n\n\n      \/* ===================================================\n      GRID BREAK\n      =================================================== *\/\n\n      const breaking =\n        ease(\n          range(\n            p,\n            .33,\n            .455\n          )\n        );\n\n\n      const configs = [\n\n        [-27,-16,-5,1.05],\n\n        [14,-25,4,.95],\n\n        [36,-4,7,1.07],\n\n        [-16,22,4,.96],\n\n        [24,20,-8,1.12],\n\n        [0,29,5,.94]\n\n      ];\n\n\n      tiles.forEach(\n        function(tile,index){\n\n          const c =\n            configs[index];\n\n\n          tile.style.transform =\n            `translate3d(\n              ${c[0]*breaking}px,\n              ${c[1]*breaking}px,\n              0\n            )\n            rotate(${c[2]*breaking}deg)\n            scale(${lerp(\n              1,\n              c[3],\n              breaking\n            )})`;\n\n        }\n      );\n\n\n      analysisB.style.opacity =\n        ease(\n          range(\n            p,\n            .38,\n            .45\n          )\n        )\n        *\n        (\n          1 -\n          ease(\n            range(\n              p,\n              .51,\n              .58\n            )\n          )\n        );\n\n\n\n      \/* CAPTCHA OUT *\/\n\n      const cardOut =\n        ease(\n          range(\n            p,\n            .435,\n            .535\n          )\n        );\n\n\n      captcha.style.opacity =\n        1-cardOut;\n\n\n      captcha.style.transform =\n        `translate(-50%,-50%)\n         rotate(${-5*cardOut}deg)\n         scale(${lerp(1,.77,cardOut)})`;\n\n\n\n      \/* ===================================================\n      ACT 3 \u2014 PHOTO 01\n      =================================================== *\/\n\n      const greyIn =\n        ease(\n          range(\n            p,\n            .445,\n            .515\n          )\n        );\n\n\n      \/* PHOTO 02 *\/\n\n      const carIn =\n        ease(\n          range(\n            p,\n            .49,\n            .555\n          )\n        );\n\n\n      \/* PHOTO 03 *\/\n\n      const dinoIn =\n        ease(\n          range(\n            p,\n            .535,\n            .60\n          )\n        );\n\n\n      const photoOut =\n        ease(\n          range(\n            p,\n            .745,\n            .79\n          )\n        );\n\n\n      \/* Number *\/\n\n      const numberIn =\n        ease(\n          range(\n            p,\n            .445,\n            .50\n          )\n        );\n\n\n      number.style.opacity =\n        numberIn *\n        (1-photoOut);\n\n\n      number.textContent =\n\n        p < .50 ? \"01\" :\n\n        p < .55 ? \"02\" :\n\n        \"03\";\n\n\n      number.style.transform =\n        `translateY(-50%)\n         translateX(${lerp(\n           -80,\n           0,\n           numberIn\n         )}px)`;\n\n\n\n      \/* GREY *\/\n\n      grey.style.opacity =\n        greyIn *\n        (1-photoOut);\n\n\n      grey.style.transform =\n        `translate3d(\n          ${lerp(-160,0,greyIn)}px,\n          ${lerp(90,0,greyIn)}px,\n          0\n        )\n        rotate(${lerp(-18,-4,greyIn)}deg)\n        scale(${lerp(.62,1.045,greyIn)})`;\n\n\n\n      \/* CAR *\/\n\n      car.style.opacity =\n        carIn *\n        (1-photoOut);\n\n\n      car.style.transform =\n        `translate3d(\n          ${lerp(0,-4,carIn)}vw,\n          ${lerp(170,0,carIn)}px,\n          0\n        )\n        rotate(${lerp(9,-3,carIn)}deg)\n        scale(${lerp(.62,1.04,carIn)})`;\n\n\n\n      \/* DINO *\/\n\n      dino.style.opacity =\n        dinoIn *\n        (1-photoOut);\n\n\n      dino.style.transform =\n        `translate3d(\n          ${lerp(190,-12,dinoIn)}px,\n          ${lerp(-110,0,dinoIn)}px,\n          0\n        )\n        rotate(${lerp(15,2,dinoIn)}deg)\n        scale(${lerp(.58,1.035,dinoIn)})`;\n\n\n\n      grey.style.filter =\n        `grayscale(1) contrast(1.08)`;\n\n      car.style.filter =\n        `grayscale(1) contrast(1.08)`;\n\n      dino.style.filter =\n        `grayscale(1) contrast(1.08)`;\n\n\n\n      \/* ===================================================\n      CHAOS COPY\n      =================================================== *\/\n\n      const chaosIn =\n        ease(\n          range(\n            p,\n            .69,\n            .725\n          )\n        );\n\n\n      const chaosOut =\n        ease(\n          range(\n            p,\n            .755,\n            .79\n          )\n        );\n\n\n      chaos.style.opacity =\n        chaosIn *\n        (1-chaosOut);\n\n\n      chaos.style.transform =\n        `translateY(${lerp(\n          45,\n          0,\n          chaosIn\n        )}px)`;\n\n\n\n      \/* ===================================================\n      ACT 4 \u2014 FAILURE\n      =================================================== *\/\n\n      const failureIn =\n        ease(\n          range(\n            p,\n            .785,\n            .83\n          )\n        );\n\n\n      const failureOut =\n        ease(\n          range(\n            p,\n            .865,\n            .905\n          )\n        );\n\n\n      failure.style.opacity =\n        failureIn *\n        (1-failureOut);\n\n\n      failure.style.transform =\n        `translateY(${lerp(\n          55,\n          0,\n          failureIn\n        )}px)`;\n\n\n\n      \/* background disappears *\/\n\n      const clean =\n        ease(\n          range(\n            p,\n            .77,\n            .83\n          )\n        );\n\n\n      design.style.opacity =\n        1 - clean*.84;\n\n\n\n      \/* ===================================================\n      ACT 5 \u2014 ABOUT\n      =================================================== *\/\n\n      const finalIn =\n        ease(\n          range(\n            p,\n            .885,\n            .925\n          )\n        );\n\n\n      const finalOut =\n        ease(\n          range(\n            p,\n            .93,\n            .965\n          )\n        );\n\n\n      const finalOpacity =\n        finalIn *\n        (1-finalOut);\n\n\n      finalScreen.style.opacity =\n        finalOpacity;\n\n\n      finalScreen.style.transform =\n        `translateY(${lerp(\n          40,\n          0,\n          finalIn\n        )}px)\n        scale(${lerp(\n          .975,\n          1,\n          finalIn\n        )})`;\n\n\n      const jokeIn =\n        ease(\n          range(\n            p,\n            .955,\n            .995\n          )\n        );\n\n\n      designJoke.style.opacity =\n        jokeIn;\n\n\n      designJoke.style.transform =\n        `translateY(${lerp(\n          26,\n          0,\n          jokeIn\n        )}px)\n        scale(${lerp(\n          .985,\n          1,\n          jokeIn\n        )})`;\n\n\n      progressUI.style.opacity =\n        1-jokeIn;\n\n    }\n\n\n\n    \/* =====================================================\n    RAF LOOP\n\n    Questo \u00e8 il fix principale.\n    Non aspettiamo alcun evento scroll.\n    ===================================================== *\/\n\n    function loop(){\n\n      if(destroyed){\n        return;\n      }\n\n\n      const p =\n        getProgress();\n\n\n      \/*\n      Renderizziamo solo se cambia davvero.\n      *\/\n\n      if(\n        Math.abs(\n          p-previousProgress\n        ) > .00015\n      ){\n\n        previousProgress =\n          p;\n\n\n        render(p);\n      }\n\n\n      requestAnimationFrame(loop);\n\n    }\n\n\n\n    function destroy(){\n\n      destroyed = true;\n    }\n\n\n    root.__yhpController = {\n      destroy:destroy\n    };\n\n\n    render(\n      getProgress()\n    );\n\n\n    requestAnimationFrame(loop);\n\n  }\n\n\n\n  \/* =======================================================\n  INITIALIZE ALL INSTANCES\n  ======================================================= *\/\n\n  function boot(){\n\n    document\n      .querySelectorAll(\"[data-yhp]\")\n      .forEach(init);\n\n  }\n\n\n  boot();\n\n\n\n  \/* =======================================================\n  ELEMENTOR EDITOR RELOAD SUPPORT\n  ======================================================= *\/\n\n  if(\n    window.elementorFrontend &&\n    window.elementorFrontend.hooks\n  ){\n\n    try{\n\n      window.elementorFrontend.hooks.addAction(\n        \"frontend\/element_ready\/html.default\",\n        function(){\n\n          setTimeout(\n            boot,\n            60\n          );\n\n        }\n      );\n\n    }catch(e){}\n\n  }\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>01 [IDENTIFICATION IN PROGRESS] ANALYSIS \/ DESIGN \/ CREATION IDENTIFY THE SUBJECT. IDENTIFICATION \/ IN PROGRESS STEP 01 SELECT AN IMAGE OF WEB DESIGNER YULIYA PIVNYAK. \u2713 01 \/ PRESENTABLE UX 02 \/ METHOD ? 02 \/ DEBATABLE YU. 04 \/ DESIGN ! 03 \/ UNCLASSIFIABLE WEBUXWP 06 \/ SYSTEM 3 ITEMS SELECTED VERIFY \u2197 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11070","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages\/11070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/comments?post=11070"}],"version-history":[{"count":0,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages\/11070\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/media?parent=11070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}