@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@600;700&display=swap");

/* ===== Base reset ===== */
*{ box-sizing: border-box; }
html, body{ height: 100%;
margin:0;
    padding: 0;
}

body{
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* ✅ ПАТЕРН: тайлиться і по X, і по Y */
  background-image: url("/images/leopard.png");
  background-repeat: repeat;           /* <-- головне */
  background-position: top left;       /* контрольований шов */
  background-size: 100% auto;  

  /*font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
}

.page{
  min-height: 100vh;
  height: auto;
  padding: 0;
  margin: 0;
  background: transparent;
  /*overflow: visible;*/
}

/* ===== Header (ABOUT ME) ===== */
.hero-title{
  max-width: 1200px;
  margin: 16px auto 2px auto;
  padding: 0 10px;
  text-align: center;
}

.title{
  margin: 0;
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: clamp(56px, 7vw, 120px);
  letter-spacing: 0.06em;
  color: #4b2a24;
  text-shadow:
    0 3px 0 rgba(255,255,255,.18),
    0 18px 40px rgba(0,0,0,.22);
}

.subtitle{
  margin: -7px 0 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(75, 42, 36, 0.90);
  background: rgba(255, 210, 225, 0.55);
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* ===== Canvas ===== */
.canvas{
  /*padding: clamp(67px, 2.5vw, 9px);*/
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.layout{
  max-width: 1200px;
  margin: -1px -46px;

  /* DESKTOP: grid як “каркас” */
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  /* дрібна сітка по висоті, щоб легше “насаджувати” */
  grid-auto-rows: 18px;

  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
  position: relative;
  z-index: 2;
  inset: 0;
  min-height: 0;
  min-width: 0;
  overflow: visible;
}

.layout > *{
    min-height: 0;
    min-width:0;
}

/* ===== Tiles ===== */
.tile{
  margin: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Підгонка через змінні */
.tile img{
  width: var(--w, 520px);
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  position: relative;

  transform:
  translate(var(--x, 0px), var(--y, 0px))
  rotate(var(--r, 0deg));
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
}

/* ===== Desktop zones (тільки “де стоїть”) ===== */
.tile--intro{
  grid-column: 1 / span 7;
  grid-row: 1 / span 10;
  z-index: 2;
}

.tile--face{
  grid-column: 8 / span 5;
  grid-row: 1 / span 12;
  z-index: 2;
  position: relative;
}

.tile--experience{
  grid-column: 1 / span 7;
  grid-row: 11 / span 7;
  z-index: 2;
}

.tile--booked{
  grid-column: 8 / span 5;
  grid-row: 13 / span 6;
  z-index: 5;
  position: relative;
}

.tile--numbers{
  grid-column: 1 / span 7;
  grid-row: 18 / span 6;
  z-index: 1;
}

.tile--brands{
  grid-column: 1 / span 12;
  grid-row: 24 / span 8;
  z-index: 8;
}

/* ===== Tuning (підкручуй як хочеш) ===== */
.tile--intro img{
  --w: 265px;
  --x: -34px;
  --y: 61px;
  --r: 2deg;
}

.tile--face img{
  --w: 411px;
  --x: -66px;
  --y: -14px;
}

.tile--experience img{
  --w: 265px;
  --x: 191px;
  --y: -113px;
  --r: -2deg;
}

.tile--booked img{
  --w: 194px;
  --x: 165px;
  --y: -6px;
  --r: -12deg;
}

.tile--numbers img{
  --w: 235px;
  --x: -135px;
  --y: -326px;
  --r: -5deg;
}

.tile--brands img{
  --w: 260px;
  --x: 702px;
  --y: -823px;
  --r: 3deg;
}

.about-arc {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.about-arc svg {
  width: 800px;
  max-width: 90%;
}

.about-arc text {
  font-family: 'Anton', sans-serif;
  font-size: 80px;
  letter-spacing: 8px;
  fill: #4a1f1f; /* темний коричневий як у референсі */
}

/* ===== MOBILE: stack into 1 column + scroll ===== */
@media (max-width: 900px){

  /* дозволяємо скрол */
  body{
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page{
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  .canvas{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* головне: з грида в колонку */
  .layout{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    max-width: 700px;
    width: 100%;
    margin: 0 auto !important;
    padding: 16px 12px;

    gap: 16px !important;

    /* прибираємо “каркасні” grid штуки */
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
  }

  /* прибираємо grid-позиції (щоб не тягнуло/не впливало) */
.tile--face{ order: 1; }
  .tile--intro{ order: 2; }
  .tile--experience{ order: 3; }
  .tile--booked{ order: 4; }
  .tile--numbers{ order: 5; }
  .tile--brands{
    grid-column: auto !important;
    grid-row: auto !important;
    order: 6;
  }

  .tile{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* прибираємо всі зсуви/нахили */
  .tile img{
    width: min(92vw, 520px) !important;
    transform: none !important;
  }
}