/* ═══════════════════════════════════════════════════════════════════════════
   YONATAN FURMAN LAPIN — PORTFOLIO STYLES
   ─────────────────────────────────────────────────────────────────────────
   This file is split into TWO clear sections:

     1️⃣  DESKTOP STYLES (default, applies to wide screens)
     2️⃣  MOBILE STYLES  (inside `@media (max-width: 768px) { ... }`)

   To change the DESKTOP design  → edit rules in section 1
   To change the MOBILE design   → edit rules INSIDE the @media block
   ═══════════════════════════════════════════════════════════════════════════ */

/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  1️⃣  DESKTOP STYLES — apply at every viewport (mobile @media overrides) ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

:root {
  --ink: rgb(74,63,107);
  --ink-deep: rgb(53,40,90);
  --cream: rgb(242,229,210);
  --section-pill-fill:
    radial-gradient(620px 117px at 89% 60%, rgba(255,214,232,0.5) 0%, rgba(255,214,232,0) 50%),
    radial-gradient(483px 137px at 30% 69%, rgba(194,255,224,0.4) 0%, rgba(194,255,224,0) 50%),
    radial-gradient(414px 156px at 59% 78%, rgba(240,196,232,0.7) 0%, rgba(240,196,232,0) 50%),
    radial-gradient(552px 156px at 79% 24%, rgba(194,212,255,0.6) 0%, rgba(194,212,255,0) 50%),
    radial-gradient(552px 137px at 21% 33%, rgba(210,199,255,0.8) 0%, rgba(210,199,255,0) 50%),
    linear-gradient(123deg, #EDE8FF 0%, #F5F2FF 100%);
  --section-pill-shadow: 0 2px 11.4px rgba(123,118,154,0.10);
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
.page-wrap {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
body {
  background: #ffffff;
  font-family: "Playfair Display", serif;
  color: var(--ink);
  position: relative;
}
.scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  transform-origin: top left;
  overflow: hidden;
  transform: scale(calc(100vw / 1920px));
}
.page-wrap {
  height: calc(100vw * 6420 / 1920);
}

.page {
  position: relative;
  width: 1920px;
  height: 6420px;
  overflow: hidden;
  background: #ffffff;
}

/* ───────── HERO ───────── */
.hero {
  position: absolute;
  left: 0; top: -132.56px;
  width: 1920px; height: 1662.22px;
  overflow: hidden;
}
.hero img {
  position: absolute;
  left: 0; top: 10.24px;
  width: 1920px; height: 1546.66px;
  object-fit: cover;
  object-position: center;
  /* Extra-smooth feather — 19-stop ease-out curve, identical to mobile. */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    rgba(0,0,0,0.99) 8%,
    rgba(0,0,0,0.97) 14%,
    rgba(0,0,0,0.94) 20%,
    rgba(0,0,0,0.89) 26%,
    rgba(0,0,0,0.83) 32%,
    rgba(0,0,0,0.76) 38%,
    rgba(0,0,0,0.68) 44%,
    rgba(0,0,0,0.59) 50%,
    rgba(0,0,0,0.50) 56%,
    rgba(0,0,0,0.40) 62%,
    rgba(0,0,0,0.30) 68%,
    rgba(0,0,0,0.21) 74%,
    rgba(0,0,0,0.13) 80%,
    rgba(0,0,0,0.07) 86%,
    rgba(0,0,0,0.03) 92%,
    rgba(0,0,0,0.01) 96%,
    rgba(0,0,0,0)    100%);
          mask-image: linear-gradient(180deg,
    #000 0%,
    rgba(0,0,0,0.99) 8%,
    rgba(0,0,0,0.97) 14%,
    rgba(0,0,0,0.94) 20%,
    rgba(0,0,0,0.89) 26%,
    rgba(0,0,0,0.83) 32%,
    rgba(0,0,0,0.76) 38%,
    rgba(0,0,0,0.68) 44%,
    rgba(0,0,0,0.59) 50%,
    rgba(0,0,0,0.50) 56%,
    rgba(0,0,0,0.40) 62%,
    rgba(0,0,0,0.30) 68%,
    rgba(0,0,0,0.21) 74%,
    rgba(0,0,0,0.13) 80%,
    rgba(0,0,0,0.07) 86%,
    rgba(0,0,0,0.03) 92%,
    rgba(0,0,0,0.01) 96%,
    rgba(0,0,0,0)    100%);
}
/* Dark gradient overlay removed — image stays bright on both desktop and mobile */

.nav {
  position: fixed;
  left: 0; right: 0; top: 0;
  /* Responsive height — scales smoothly with viewport */
  height: clamp(60px, 6vw, 115px);
  background: rgba(74,63,107,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-inner {
  display: flex;
  flex-direction: row;
  gap: clamp(30px, 4.3vw, 83px);
  align-items: center;
}
.nav a {
  font-family: "Playfair Display", serif;
  font-size: clamp(18px, 2.5vw, 47.6049px);
  line-height: 100%;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
  position: relative;
}
.nav a:hover { opacity: 0.78; transform: translateY(-1px); }
/* Vertical separator line between each nav item (except after the last). */
.nav a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(0px - clamp(30px, 4.3vw, 83px) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: clamp(20px, 2.5vw, 50px);
  background: rgba(255, 255, 255, 0.55);
}

.hero-title {
  position: absolute;
  left: calc(50% - 675.99px/2 + 0.89px);
  top: 299.57px;
  width: 675.99px;
  text-align: center;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 14.39px;
  align-items: center;
}
.hero-title .script {
  font-family: "Herr Von Muellerhoff", "The Nautigal", cursive;
  font-size: 86.2px;
  line-height: 100%;
  color: #fff;
  text-shadow: 0 2px 18px rgba(74,63,107,0.45);
}
.hero-title .name {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 64.35px;
  line-height: 100%;
  color: #fff;
  text-shadow: 0 2px 24px rgba(74,63,107,0.55);
  letter-spacing: 0.5px;
}

.cv-btn {
  position: absolute;
  left: calc(50% - 500.02px/2 + 0.89px); top: 511.41px;
  width: 500.02px; height: 104.32px;
  border-radius: 33.57px;
  border: none;
  cursor: pointer;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
  transition: transform .2s ease, filter .2s ease;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: 62.23px;
  line-height: 100%;
  color: var(--ink);
  padding: 0;
}
.cv-btn::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1490px; height: 954px;
  transform: translate(-50%, -50%);
  background: url(./assets/cv-btn-bg.svg) center/contain no-repeat;
  pointer-events: none;
  z-index: -1;
}
.cv-btn:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.04); }
.cv-btn:active { transform: translateY(0) scale(1); }

/* ───────── PROJECTS ───────── */
.projects-bg {
  position: absolute;
  left: -412.44px; top: 1148.56px;
  width: 1019.33px; height: 245.44px;
  border-radius: 49.78px;
  background: #ffffff;
  box-shadow: 0 3.56px 20.27px rgba(123,118,154,0.1);
}
.projects-title {
  position: absolute;
  left: -412.44px; top: 1148.56px;
  width: 1019.33px; height: 245.44px;
  padding: 78.22px 60.44px 78.22px 472.88px;
  border-radius: 49.78px;
  background: var(--section-pill-fill);
  box-shadow: 0 3.56px 20.27px rgba(123,118,154,0.1);
  text-align: center;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 126.215px;
  line-height: 89px;
  color: var(--ink);
}

.asset-1-2345265 {
  position: absolute;
  left: 698.89px; top: 1187.99px;
  width: 173.63px; height: 173.63px;
  background: url(./assets/asset-1-2345265.svg) center/contain no-repeat;
  z-index: 2;
}
.vector-1 {
  position: absolute;
  left: 1245.01px; top: 1232.39px;
  width: 320.24px; height: 81.98px;
  background: url(./assets/vector-1.svg) center/contain no-repeat;
  z-index: 2;
}
.frog {
  position: absolute;
  left: 1644.78px; top: 1219.39px;
  width: 178.39px; height: 174.5px;
  background: url(./assets/frog.svg) center/contain no-repeat;
  z-index: 2;
}
.layer-1 {
  position: absolute;
  left: 146px; top: 1471.34px;
  width: 321.16px; height: 311.75px;
  background: url(./assets/smile-face.webp) center/contain no-repeat;
  transform-origin: center center;
  z-index: 2;
}
.rabbit-logo {
  position: absolute;
  left: 589.83px; top: 1583.7px;
  width: 322.13px; height: 87.03px;
  background: url(./assets/rabbit.svg) center/contain no-repeat;
  z-index: 2;
}
.asset-2-12 {
  position: absolute;
  left: 1034.62px; top: 1505.79px;
  width: 242.85px; height: 242.85px;
  background: url(./assets/asset-2-12.svg) center/contain no-repeat;
  z-index: 2;
}
.sunlaser {
  position: absolute;
  left: 1400.14px; top: 1571.64px;
  width: 373.86px; height: 111.15px;
  background: url(./assets/sunlaser.svg) center/contain no-repeat;
  z-index: 2;
}
.feet {
  position: absolute;
  left: 575.33px; top: 1702.69px;
  width: 259.83px; height: 343.27px;
  background: url(./assets/feet.webp) center/contain no-repeat;
  transform: rotate(-50deg);
  transform-origin: center center;
  z-index: 2;
}
.vector-2 {
  position: absolute;
  left: 93.47px; top: 1830.56px;
  width: 325.59px; height: 171.7px;
  background: url(./assets/vector-c63fb5e9.svg) center/contain no-repeat;
  z-index: 2;
}
.gaming-land-img {
  position: absolute;
  left: 1514.48px; top: 1827.8px;
  width: 347.71px; height: 177.22px;
  background: url(./assets/gaming-land.webp) center/contain no-repeat;
  z-index: 2;
}
.the-season {
  position: absolute;
  left: 1069.78px; top: 1830.56px;
  width: 325.59px; height: 171.7px;
  background: url(./assets/the-season.webp) center/contain no-repeat;
  z-index: 2;
}
.sloth-drink {
  position: absolute;
  left: 987.95px; top: 1152.49px;
  width: 158.18px; height: 248.95px;
  background: url(./assets/sloth-drink.webp) center/contain no-repeat;
  transform-origin: center center;
  z-index: 2;
}

/* ───────── DECORATIVE CLOUDS ───────── */
.cloud {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cloud-9    { left: -237.56px;  top: 1640.47px; width: 448.05px; height: 201.62px; background-image: url(./assets/cloud-0008.webp); }
.cloud-10   { left: 1596.28px;  top: 1405.35px; width: 500.73px; height: 200.88px; background-image: url(./assets/cloud-0009.webp); }
.cloud-1    { left: 1039.11px;  top: 2182.77px; width: 675px;    height: 270px;    background-image: url(./assets/cloud-0001.webp); }
.cloud-0    { left: -145.34px;  top: 2894.91px; width: 591.33px; height: 356.33px; background-image: url(./assets/cloud-0000.webp); }
.cloud-2    { left: 1440.26px;  top: 3251.25px; width: 576.11px; height: 346.59px; background-image: url(./assets/cloud-0002.webp); }
.cloud-6    { left: -67.67px;   top: 4019.05px; width: 496.57px; height: 297.94px; background-image: url(./assets/cloud-0006.webp); }
.cloud-4    { left: 1479.99px;  top: 4122.15px; width: 474.37px; height: 351.03px; background-image: url(./assets/cloud-0004.webp); }
.cloud-3    { left: 34.95px;    top: 4903.43px; width: 734.68px; height: 461.74px; background-image: url(./assets/cloud-0003.webp); }
.cloud-5    { left: 1320.73px;  top: 6014.2px;  width: 854.15px; height: 293.86px; background-image: url(./assets/cloud-0005.webp); transform: rotate(-15.03deg); transform-origin: center center; }

/* Hands holding holographic tools */
.hands-tools {
  position: absolute;
  left: -25px; top: 2279.33px;
  width: 470.99px; height: 470.99px;
  background: url(./assets/hands-tools.webp) center/contain no-repeat;
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}

/* Hidden assets (not in current grid) */
.asset-3-1, .logo-2, .logo-moodiary, .signature-mark { display: none; }

/* Hover lift for project brand logos */
.the-season, .sunlaser, .rabbit-logo, .frog, .hands-tools, .logo-2,
.signature-mark, .logo-moodiary, .asset-2-12,
.gaming-land-img, .asset-1-2345265, .vector-1, .vector-2, .asset-3-1,
.feet, .layer-1, .sloth-drink {
  transition: transform .35s cubic-bezier(.2,.7,.2,1.2), filter .35s ease;
  cursor: pointer;
  pointer-events: auto !important;
}
.the-season:hover, .sunlaser:hover, .rabbit-logo:hover, .frog:hover,
.hands-tools:hover, .logo-2:hover, .signature-mark:hover,
.logo-moodiary:hover, .asset-2-12:hover,
.gaming-land-img:hover, .asset-1-2345265:hover, .vector-1:hover, .vector-2:hover,
.asset-3-1:hover, .layer-1:hover, .sloth-drink:hover {
  transform: translateY(-6px) scale(1.06) rotate(-1.5deg);
  filter: drop-shadow(0 18px 24px rgba(74,63,107,0.25));
}
.feet:hover {
  transform: translateY(-6px) scale(1.06) rotate(-51.5deg);
  filter: drop-shadow(0 18px 24px rgba(74,63,107,0.25));
}

/* ───────── PERSONALITY TRAITS ───────── */
.personality {
  position: absolute;
  left: 0; right: 0; top: 2387.07px;
  height: 1200px;
}
.personality-title {
  position: absolute;
  right: 0; top: 0;
  width: 1107.89px;
  height: 245.44px;
  padding: 78.22px 60.44px;
  border-radius: 49.78px 0 0 49.78px;
  background: var(--section-pill-fill);
  box-shadow: 0 3.56px 20.27px rgba(123,118,154,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 126.215px;
  color: var(--ink);
  line-height: 89px;
  text-align: center;
}
.personality-glow {
  position: absolute;
  left: 426.12px; top: 35.78px;
  width: 488.38px; height: 772.75px;
  border-radius: 50%;
  background: #ffffff;
  filter: blur(40px);
  pointer-events: none;
}
.personality-portrait {
  position: absolute;
  left: 426.12px;
  top: 35.78px;
  width: 488.38px;
  height: 772.75px;
  background: url(./assets/personality-portrait.webp) center/contain no-repeat;
  filter: drop-shadow(0 30px 60px rgba(74,63,107,0.22));
  z-index: 2;
}
.traits {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 760px;
  pointer-events: none;
}
.trait {
  position: absolute;
  pointer-events: auto;
  z-index: 3;
  border-radius: 30.99px;
  /* Gradient border via background-clip (more reliable than mask-composite) */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #B5A1F2 0%, #FFCCE1 29%, #CCF1FF 67%, #E0D7FF 100%) border-box;
  border: 6px solid transparent;
  box-shadow: 0 4.13px 14.05px rgba(0,0,0,0.25);
  padding: 20.66px 28.93px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 38.8504px;
  line-height: 47px;
  color: #CEABD5;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: default;
  width: 409.55px;
  height: 94.9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trait::before { display: none; }
.trait:hover {
  /* Keep the gradient border at the same size — only a small lift, no scale */
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(74,63,107,0.22);
}
/* 2x4 grid */
.t-self      { left: 972.14px;  top: 297.78px; }
.t-open      { left: 972.14px;  top: 420.04px; }
.t-smiling   { left: 972.14px;  top: 542.3px;  }
.t-creative  { left: 972.14px;  top: 664.56px; }
.t-friendly  { left: 1409.05px; top: 297.78px; }
.t-health    { left: 1409.05px; top: 420.04px; }
.t-team      { left: 1409.05px; top: 542.3px;  }
.t-fast      { left: 1409.05px; top: 664.56px; }
.t-organized { display: none; }

/* ───────── HOBBIES ───────── */
.hobbies-bg {
  position: absolute;
  left: calc(50% - 2254px/2); top: 3548.66px;
  width: 2254px; height: 515px;
  border-radius: 35.34px;
  background: var(--section-pill-fill);
  box-shadow: 0 2.52px 14.39px rgba(123,118,154,0.1);
  z-index: 0;
}
.hobbies-pill {
  position: absolute;
  z-index: 5;
  left: calc(50% - 578.88px/2 + 0px); top: 3360.52px;
  width: 578.88px; height: 237.25px;
  padding: 75.63px 60.44px;
  border-radius: 48.13px;
  background: var(--section-pill-fill);
  box-shadow: 0 3.44px 19.59px rgba(123,118,154,0.1);
  text-align: center;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 122.027px;
  color: var(--ink);
  line-height: 89px;
}
.hobbies {
  position: absolute;
  left: 0; top: 0;
  width: 1080px;
  height: 0;
}
.hobbies-row { display: contents; }
.hobby {
  position: absolute;
  width: 340.73px;
  height: 341.55px;
  border-radius: 10.32px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(74,63,107,0.18);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.h-design   { left: 68.18px;   top: 3647.77px; }
.h-japan    { left: 428.91px;  top: 3647.77px; }
.h-tennis   { left: 789.64px;  top: 3647.77px; }
.h-self     { left: 1150.37px; top: 3647.77px; }
.h-learning { left: 1511.1px;  top: 3647.77px; }
.hobby:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 26px 60px rgba(74,63,107,0.28); }
.hobby img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hobby-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 0 26px;
  text-align: center;
  font-family: "Herr Von Muellerhoff", "The Nautigal", cursive;
  font-size: 63.62px;
  color: #fff;
  line-height: 1;
  text-shadow:
    0 0 16.98px rgba(74,63,107,0.5),
    0 4px 20px rgba(74,63,107,0.4);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%);
}

/* ───────── SKILLS ───────── */
.skills-title {
  position: absolute;
  left: -412.44px; top: 4366.78px;
  width: 867.33px; height: 245.44px;
  padding: 78.22px 60.44px 78.22px 472.88px;
  border-radius: 49.78px;
  background: var(--section-pill-fill);
  box-shadow: 0 3.56px 20.27px rgba(123,118,154,0.1);
  text-align: center;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 126.215px;
  color: var(--ink);
  line-height: 89px;
}
.skills {
  position: absolute;
  left: 729.07px; top: 4427.93px;
  width: 876.42px; height: 366.4px;
}
.skills-laptop {
  position: absolute;
  left: 520.5px; top: 4298.51px;
  width: 1298.09px; height: 895.13px;
  background: url(./assets/skills-laptop.png) center/contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
.skills-grid {
  position: absolute;
  left: 0; top: 0;
  width: 876.42px;
  display: grid;
  grid-template-columns: repeat(5, 161.99px);
  grid-template-rows: repeat(2, 161.99px);
  column-gap: 16.62px;
  row-gap: 42.42px;
  z-index: 2;
}
.skill-tile {
  width: 161.99px; height: 161.99px;
  border-radius: 30.29px;
  box-shadow: 0 0 54.69px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", "Helvetica", sans-serif;
  font-weight: 800;
  font-size: 86px;
  line-height: 1;
  transition: transform .25s ease;
  cursor: default;
  user-select: none;
}
.skill-tile:hover { transform: translateY(-3px) scale(1.04); }
.sk-pr { background: rgb(0,0,91);  color: rgb(151,153,254); }
.sk-ae { background: rgb(0,0,91);  color: rgb(151,152,254); }
.sk-ps { background: rgb(0,30,54); color: rgb(48,168,254);  }
.sk-ai { background: rgb(51,0,0);  color: rgb(254,154,0);   }
.sk-id { background: rgb(73,2,31); color: rgb(254,51,102);  }
.sk-w  { background: #fff;         color: #1f1f1f; display: grid; place-items: center; }

.sk-w img { width: 90%; height: auto; display: block; }
.sk-extra-1 { background: #c2ff80; color: #08400a; font-size: 46px; padding: 0; overflow: hidden; }
.sk-extra-1 img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.sk-extra-2 { background: #f0ede6; color: #222; font-size: 30px; padding: 0; overflow: hidden; }
.sk-extra-2 img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.sk-extra-3 { background: #000; padding: 0; overflow: hidden; }
.sk-extra-3 img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.sk-extra-4 { background: #f0ede6; color: #222; padding: 0; overflow: hidden; }
.sk-extra-4 img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }


/* ───────── END BANNER + LIPS ───────── */
.end-banner {
  position: absolute;
  left: calc(50% - 2569px/2 + 0.5px); top: 5429.48px;
  width: 2569px; height: 345px;
  border-radius: 47.95px;
  background: url(./assets/end-banner-bg.svg) center/cover no-repeat, #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.end-banner span {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 121.575px;
  color: var(--ink);
  line-height: 100%;
}
.lips-left {
  position: absolute;
  left: 10.07px; top: 5678.68px;
  width: 497.78px; height: 280.89px;
  background: url(./assets/lips-left.webp) center/contain no-repeat;
  transform: rotate(8.7deg);
  transform-origin: 0 0;
  pointer-events: auto;
}
.lips-left.kissing { animation: kiss-left 0.7s ease-in-out; }
.lips-right {
  position: absolute;
  left: 1433.46px; top: 5238.48px;
  width: 388.05px; height: 283.27px;
  background: url(./assets/lips-right.webp) center/contain no-repeat;
  transform: rotate(-4.89deg);
  transform-origin: 0 0;
  pointer-events: auto;
}
.lips-right.kissing { animation: kiss-right 0.7s ease-in-out; }
@keyframes kiss-left {
  0%, 100% { transform: rotate(8.7deg) scale(1); }
  35%      { transform: rotate(8.7deg) scale(1.22) translate(8px, -6px); }
  55%      { transform: rotate(8.7deg) scale(0.9) translate(2px, 0px); }
  75%      { transform: rotate(8.7deg) scale(1.1) translate(5px, -3px); }
}
@keyframes kiss-right {
  0%, 100% { transform: rotate(-4.89deg) scale(1); }
  35%      { transform: rotate(-4.89deg) scale(1.22) translate(-8px, -6px); }
  55%      { transform: rotate(-4.89deg) scale(0.9) translate(-2px, 0px); }
  75%      { transform: rotate(-4.89deg) scale(1.1) translate(-5px, -3px); }
}

/* ───────── SOCIALS ───────── */
.socials {
  position: absolute;
  left: 524.44px; top: 5866.27px;
  width: 871px;
  display: flex;
  flex-direction: row;
  gap: 89px;
  justify-content: flex-start;
}
.social {
  width: 391.11px; height: 384px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease;
  text-decoration: none;
  overflow: hidden;
}
.social img { width: 100%; height: 100%; object-fit: contain; display: block; }
.social:hover {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 20px 36px rgba(74,63,107,0.25));
}

.credit {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: rgba(74,63,107,0.55);
  font-size: 18px;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  2️⃣  MOBILE STYLES — only apply when viewport ≤ 768px                   ║
   ║      All rules in this block override the desktop rules above.          ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {
  /* ────────────────────────────────────────────────────────────────
     MOBILE LAYOUT — matches Figma frame "Frame 512817129" (node 196:39)
     Design size: 1080 × 11800 (Figma frame is 11709, +padding).
     Each major section is its own viewport-height block.
     ──────────────────────────────────────────────────────────────── */
  .scaler {
    width: 1080px;
    transform: scale(calc(100vw / 1080px));
  }
  .page-wrap {
    height: calc(100vw * 11709.4 / 1080);
    overflow: visible;
  }
  .page    { width: 1080px; height: 11709.4px; overflow: visible; }
  .scaler  { overflow: visible; }
  /* Prevent horizontal scroll/sticking on mobile (overflow-x: hidden restored).
     Clouds that extend past the viewport WILL be clipped — that's intentional. */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Disable the iOS long-press "Save Image / Share" menu — doesn't block normal taps. */
  img, picture {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none;
  }

  /* ═══════════════ HERO SUB-FRAME (0 → 2125) — full sky/rainbow scene ═══════════════ */
  .hero    {
    left: 0; top: 0; width: 1080px; height: 2125px;
    /* Subtle white tint to soften the image */
    background-color: rgba(255, 255, 255, 0.12);
    /* Allow the hero image to extend past the container so its feather completes naturally */
    overflow: visible;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 2;
  }
  .hero img {
    /* Figma: X -455.53, Y -380.16, W 1987.05, H 2968.94, rotation 0 */
    left: -455.53px;
    top: -380.16px;
    width: 1987.05px;
    height: 2968.94px;
    /* Extra-smooth feather — long ease-out curve with many tiny opacity steps.
       The transition to white starts gently and tapers slower at the end. */
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%,
      #000 15%,
      rgba(0,0,0,0.99) 22%,
      rgba(0,0,0,0.97) 28%,
      rgba(0,0,0,0.94) 33%,
      rgba(0,0,0,0.89) 38%,
      rgba(0,0,0,0.83) 43%,
      rgba(0,0,0,0.76) 48%,
      rgba(0,0,0,0.68) 53%,
      rgba(0,0,0,0.59) 58%,
      rgba(0,0,0,0.50) 63%,
      rgba(0,0,0,0.40) 68%,
      rgba(0,0,0,0.30) 73%,
      rgba(0,0,0,0.21) 78%,
      rgba(0,0,0,0.13) 83%,
      rgba(0,0,0,0.07) 88%,
      rgba(0,0,0,0.03) 93%,
      rgba(0,0,0,0.01) 97%,
      rgba(0,0,0,0)    100%);
            mask-image: linear-gradient(180deg,
      #000 0%,
      #000 15%,
      rgba(0,0,0,0.99) 22%,
      rgba(0,0,0,0.97) 28%,
      rgba(0,0,0,0.94) 33%,
      rgba(0,0,0,0.89) 38%,
      rgba(0,0,0,0.83) 43%,
      rgba(0,0,0,0.76) 48%,
      rgba(0,0,0,0.68) 53%,
      rgba(0,0,0,0.59) 58%,
      rgba(0,0,0,0.50) 63%,
      rgba(0,0,0,0.40) 68%,
      rgba(0,0,0,0.30) 73%,
      rgba(0,0,0,0.21) 78%,
      rgba(0,0,0,0.13) 83%,
      rgba(0,0,0,0.07) 88%,
      rgba(0,0,0,0.03) 93%,
      rgba(0,0,0,0.01) 97%,
      rgba(0,0,0,0)    100%);
  }
  /* Nav — fits 4 items in narrow viewport */
  .nav         {
    height: clamp(56px, 13vw, 90px) !important;
    width: 100vw !important;
    left: 0 !important; right: auto !important;
    justify-content: center !important;
  }
  .nav-inner   {
    gap: clamp(14px, 5vw, 48px) !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .nav a       {
    font-size: clamp(11px, 4vw, 22px) !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
    position: relative;
  }
  /* Vertical separator line between each nav item (except after the last).
     The line's height and the spacing scale with the viewport via clamp(). */
  .nav a:not(:last-child)::after {
    content: "";
    position: absolute;
    /* Center the line in the gap between this item and the next */
    right: calc(0px - clamp(14px, 5vw, 48px) / 2);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: clamp(14px, 4.5vw, 28px);
    background: rgba(255, 255, 255, 0.55);
  }

  /* Hero title — Graphic Designer (script) + Yonatan Furman Lapin */
  .hero-title {
    left: calc(50% - 1166.228px/2 + 10.08px);
    top: 584px;
    width: 1166.228px;
    gap: 0;
  }
  .hero-title .script {
    font-size: 148.716px;
    line-height: 1;
  }
  .hero-title .name {
    font-size: 90.629px;
    line-height: 1;
    margin-top: 8px;
  }
  /* CV button — large pastel-gradient pill across the rainbow ring */
  .cv-btn {
    left: calc(50% - 862.644px/2 + 10.08px);
    top: 939.82px;
    width: 862.644px; height: 179.976px;
    padding: 0;
    border-radius: 57.923px;
    font-size: 107.366px;
    font-weight: 800;
    overflow: hidden;
    background: var(--section-pill-fill);
    box-shadow: 0 0 80px rgba(0,0,0,0.18);
    color: #4a3f6b;
  }
  .cv-btn::before { display: none; }

  /* ═══════════════ PROJECTS (2300 → 4500) ═══════════════ */
  .projects-bg {
    left: calc(50% - 722.31px/2); top: 2325.25px;
    width: 722.31px; height: 330.08px;
    border-radius: 66.843px;
  }
  .projects-title {
    left: calc(50% - 722.31px/2); top: 2325.25px;
    width: 722.31px; height: 330.08px;
    padding: 105.038px 45.656px;
    border-radius: 66.843px;
    font-size: 169.484px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* Project logos — 2-column × 6-row grid, matching the user's reference image.
     Column centers: left=270, right=810. Each item centered in its cell. */
  /* Row 1 — RABBIT (left) + Sloth (right) */
  /* Figma: X 132.11, Y 2808.15, W 332.54, H 89.84 */
  .rabbit-logo     { left: 132.11px; top: 2808.15px; width: 332.54px; height: 89.84px; }
  /* Sloth-drink — Figma: X 682.89, Y 2724.58, W 163.29, H 257, no rotation */
  .sloth-drink     { display: block; left: 682.89px; top: 2724.58px; width: 163.29px; height: 257px; }
  /* Row 2 — Dina (left) + The Season (right) */
  /* Figma: X 139.52, Y 2981.57, W 317.73, H 317.73 */
  .asset-2-12      { left: 139.52px; top: 2981.57px; width: 317.73px; height: 317.73px; }
  /* Figma: X 599.24, Y 3063.75, W 336.12, H 177.25, no rotation */
  .the-season      {
    left: 599.24px; top: 3063.75px; width: 336.12px; height: 177.25px;
    transform: none;
    background-image: url(./assets/the-season-mobile.webp);
  }
  /* Row 3 — Ariel Medical + Smile face / Yossie */
  /* Figma: X 133.09, Y 3388.76, W 330.59, H 84.63 */
  .vector-1        { display: block; left: 133.09px; top: 3388.76px; width: 330.59px; height: 84.63px; }
  /* Figma: X 598.77, Y 3312.47, W 331.54, H 321.83 (Left, Top) */
  .layer-1         { left: 598.77px; top: 3312.47px; width: 331.54px; height: 321.83px; }
  /* Row 4 — Frog + SUN LASER */
  /* Figma: X 171.12, Y 3594.57, W 254.52, H 248.97 */
  .frog            { left: 171.12px; top: 3594.57px; width: 254.52px; height: 248.97px; }
  /* Figma: X 571.57, Y 3675.44, W 385.95, H 114.74 */
  .sunlaser        { left: 571.57px; top: 3675.44px; width: 385.95px; height: 114.74px; }
  /* Row 5 — Moodiary (left) + Feet (right) */
  /* Figma: X 136.95, Y 3978.4, W 322.86, H 123.59 */
  .vector-2        { left: 136.95px; top: 3978.4px; width: 322.86px; height: 123.59px; }
  /* Feet — moved +60 right (X 605) and +60 down (Y 3841.59) from Figma base */
  .feet            {
    left: 605px; top: 3841.59px;
    width: 268.23px; height: 354.37px;
    transform: rotate(-43.98deg);
    transform-origin: center center;
  }
  /* Row 6 — Fierce poster X (left) + Gaming Land (right) */
  /* Figma: X 191.74, Y 4230.93, W 213.3, H 213.3 */
  .asset-1-2345265 { left: 191.74px; top: 4230.93px; width: 213.3px; height: 213.3px; }
  /* Figma: X 585.07, Y 4246.11, W 358.95, H 182.95 */
  .gaming-land-img { left: 585.07px; top: 4246.11px; width: 358.95px; height: 182.95px; }

  /* ═══════════════ PERSONALITY (4800 → 6900) ═══════════════ */
  .personality        { top: 4809.63px; height: 2100px; }
  /* Figma: X -87.56 (Center), Y 4809.63 (Top) → matches .personality top: relative top = 0 */
  .personality-title  {
    left: -87.56px;
    top: 0;
    width: 1240px; height: 556.08px;
    padding: 105.04px 181px;
    border-radius: 66.84px;
    font-size: 169.484px;
    line-height: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    flex-direction: column;
    white-space: normal;
    gap: 0;
  }
  /* Portrait — Figma: X 8.94 (Left), Y 5772.54 (Top), W 689.49, H 1090.97, no rotation.
     z-index: 10 → portrait sits ABOVE the trait pills (which are at z-index 3).
     Uses PNG (full quality) on mobile per user request. */
  .personality-portrait {
    left: 8.94px;
    top: 962.91px;
    width: 689.49px;
    height: 1090.97px;
    transform: none;
    transform-origin: center center;
    z-index: 10;
    background-image: url(./assets/personality-portrait.png) !important;
  }
  /* Hide the blurred white glow behind the portrait */
  .personality-glow { display: none; }
  /* Hands holding holographic tools — flipped horizontally to match Figma orientation */
  .hands-tools {
    display: block;
    left: 368.52px; top: 5023.55px;
    width: 803.47px; height: 803.47px;
    transform: scaleX(-1);
    transform-origin: center center;
    background-image: url(./assets/hands-tools-mobile-v3.png);
  }
  /* Trait pills — vertical column on the right side, 8 stacked */
  .trait {
    width: 409.55px;
    height: 94.902px;
    padding: 20.665px 28.931px;
    font-size: 38.85px;
    line-height: 1;
    border-radius: 23.4px;
    border: 7.948px solid #b5a1f2;
    background: #ffffff;
  }
  /* Trait pills container — positioned at Figma X 627.55, Y 5873.08 (page) */
  .traits {
    position: absolute;
    left: 627.55px; top: 1063.45px;
    width: 409.55px;
    height: auto;
  }
  /* Each pill at its exact Figma Y, converted to .traits-relative top:
     visual_top = figma_Y - 5873.08. Spacing 118.61 (= 94.9 height + 23.71 gap).
     All pills share the same z-index (no "behind portrait" layering on mobile). */
  .t-self      { left: 0; top: 0;        z-index: 3; }
  .t-friendly  { left: 0; top: 118.61px; z-index: 3; }
  .t-open      { left: 0; top: 237.22px; z-index: 3; }
  .t-health    { left: 0; top: 355.83px; z-index: 3; }
  .t-smiling   { left: 0; top: 474.44px; z-index: 3; padding: 20.665px 28.931px; }
  .t-team      { left: 0; top: 593.05px; z-index: 3; }
  .t-creative  { left: 0; top: 711.66px; z-index: 3; }
  .t-fast      { left: 0; top: 830.27px; z-index: 3; }
  .t-organized { display: none !important; }

  /* ═══════════════ HOBBIES (7100 → 9100) ═══════════════ */
  .hobbies-pill {
    left: calc(50% - 727.31px/2); top: 7134.82px;
    width: 727.31px; height: 330.08px;
    padding: 105.038px 45.656px;
    border-radius: 66.843px;
    font-size: 169.484px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;  /* above clouds */
  }
  /* Decorative gradient pill behind the 5 hobby tiles — extended by 25px
     padding on top and bottom (50px total extra height, top shifted up 25). */
  .hobbies-bg {
    left: -207.75px; top: 7440px;
    width: 1495px; height: 1668px;
    border-radius: 35.34px;
  }
  /* 5 hobby tiles in 2-2-1 arrangement (top to bottom) */
  .hobby {
    width: 480.301px; height: 481.455px;
    border-radius: 14.553px;
  }
  /* Row 1 (top 7527.11) — Self improvement, Design */
  .h-self     { left: 47.29px;  top: 7527.11px; }
  .h-design   { left: 552.41px; top: 7527.11px; }
  /* Row 2 (top 8033.38) — Learning, Tennis */
  .h-learning { left: 47.29px;  top: 8033.38px; border-radius: 31px; }
  .h-tennis   { left: 552.41px; top: 8033.38px; }
  /* Row 3 (top 8539.66) — Japanese culture, centered */
  .h-japan    { left: 299.85px; top: 8539.66px; }
  .hobby-label { font-size: 89.679px !important; padding: 30px 0 50px; }

  /* ═══════════════ SKILLS (9300 → 10500) ═══════════════ */
  .skills-title {
    left: calc(50% - 518.31px/2 - 4.52px); top: 9308.13px;
    width: 518.31px; height: 330.08px;
    padding: 105.038px 45.656px;
    border-radius: 66.843px;
    font-size: 169.484px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Laptop visible again in mobile too */
  .skills-laptop {
    left: calc(50% - 1279.761px/2 + 2px);
    top: 9580.19px;
    width: 1279.761px; height: 900.456px;
    display: block;
  }
  .skills {
    left: calc(50% - 800px/2);
    top: 9739px;
    width: 800px; height: 480px;
  }
  .skills-grid {
    grid-template-columns: repeat(5, 147.769px);
    grid-template-rows: repeat(2, 147.769px);
    column-gap: 15.16px;
    row-gap: 38.7px;
  }
  .skill-tile {
    width: 147.769px; height: 147.769px;
    border-radius: 27.636px;
    font-size: 72px;
    box-shadow: 0 0 24.943px rgba(0,0,0,0.15);
  }

  /* ═══════════════ END BANNER + LIPS + SOCIALS (10500 → 11700) ═══════════════ */
  .end-banner {
    left: calc(50% - 1446px/2);
    top: 10709.7px;
    width: 1446px; height: 445px;
    border-radius: 26.971px;
  }
  .end-banner span {
    font-size: 113.17px;
    max-width: 900px;
    text-align: center;
    line-height: 1.15;
    white-space: normal;
  }
  .lips-left {
    left: -39.75px; top: 11055.2px;
    width: 369.397px; height: 207.786px;
    transform: rotate(8.7deg);
  }
  .lips-right {
    left: 689.22px; top: 10533.4px;
    width: 375.86px; height: 289.703px;
    transform: rotate(-4.89deg);
  }
  .socials {
    left: 158.43px; top: 11324.15px;
    width: 763px;
    gap: 141.322px;
    justify-content: flex-start;
  }
  .social { width: 310.908px; height: 305.255px; }

  /* All decorative clouds hidden by default on mobile — re-enable individually.
     z-index: 0 → at the very bottom, behind hobby tiles, hands-tools, traits, etc. */
  .cloud { display: none; z-index: 0; }

  /* Clouds positioned per Figma — re-enabled individually */
  .cloud-1 {
    /* Figma: X 251.33, Y 3477, W 398.39, H 137.06, rotation -3.11° */
    display: block;
    left: 251.33px; top: 3477px;
    width: 398.39px; height: 137.06px;
    transform: rotate(-3.11deg);
    transform-origin: center center;
  }
  .cloud-2 {
    /* cloud-mobile-1 — Figma: X -145.05, Y 2024.75, W 793.84, H 357.23 */
    display: block;
    left: -145.05px; top: 2024.75px;
    width: 793.84px; height: 357.23px;
    transform: none;
    background-image: url(./assets/cloud-mobile-1.webp) !important;
  }
  .cloud-3 {
    /* Figma: X 523.15, Y 4470.19, W 720.95, H 289.23 */
    display: block;
    left: 523.15px; top: 4470.19px;
    width: 720.95px; height: 289.23px;
    transform: none;
  }
  .cloud-4 {
    /* cloud-mobile-2 — Figma: X -79.91, Y 5405.71, W 557.69, H 223.08 */
    display: block;
    left: -79.91px; top: 5405.71px;
    width: 557.69px; height: 223.08px;
    transform: none;
    background-image: url(./assets/cloud-mobile-2.webp) !important;
  }
  .cloud-5 {
    /* Figma: X 275, Y 6754.17, W 805, H 322 */
    display: block;
    left: 275px; top: 6754.17px;
    width: 805px; height: 322px;
    transform: none;
  }
  .cloud-6 {
    /* Figma: X -90.88, Y 7359.86, W 378.32, H 226.99 */
    display: block;
    left: -90.88px; top: 7359.86px;
    width: 378.32px; height: 226.99px;
    transform: none;
  }
  .cloud-0 {
    /* cloud-mobile-3 — moved up 150px from Figma Y 8904.61 → 8754.61 */
    display: block;
    left: 516.19px; top: 8754.61px;
    width: 592.06px; height: 356.77px;
    transform: none;
    background-image: url(./assets/cloud-mobile-3.webp) !important;
  }
  .cloud-9 {
    /* Figma: X -313.15, Y 9321.87, W 601.1, H 377.78 */
    display: block;
    left: -313.15px; top: 9321.87px;
    width: 601.1px; height: 377.78px;
    transform: none;
  }

  /* ═══════════════ DISABLE ALL HOVER EFFECTS ON MOBILE ═══════════════
     Touch devices don't have real hover — keeping the transforms/filters
     causes elements to "stick" in their hovered state after a tap. */
  .nav a:hover,
  .cv-btn:hover,
  .cv-btn:active,
  .the-season:hover, .sunlaser:hover, .rabbit-logo:hover, .frog:hover,
  .hands-tools:hover, .logo-2:hover, .signature-mark:hover,
  .logo-moodiary:hover, .asset-2-12:hover,
  .gaming-land-img:hover, .asset-1-2345265:hover, .vector-1:hover, .vector-2:hover,
  .asset-3-1:hover, .layer-1:hover, .sloth-drink:hover,
  .feet:hover,
  .skill-tile:hover,
  .trait:hover,
  .hobby:hover,
  .social:hover {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* Restore the base box-shadow on .hobby and .trait (so they keep their look) */
  .hobby:hover  { box-shadow: 0 18px 40px rgba(74,63,107,0.18) !important; }
  .trait:hover  { box-shadow: 0 4.13px 14.05px rgba(0,0,0,0.25) !important; }

  /* Re-apply the original transforms on hover so the elements stay in place */
  .feet:hover        { transform: rotate(-43.98deg) !important; }
  .the-season:hover  { transform: none !important; }
  .hands-tools:hover { transform: scaleX(-1) !important; }
}