/* ==========================================================================
   Dizainer.Ge — index.css
   --------------------------------------------------------------------------
   სარჩევი
     01. ცვლადები და თემები
     02. ბაზა (reset, ტიპოგრაფია, გამოჩენის ანიმაცია)
     03. საერთო კომპონენტები (wrap, eyebrow, ღილაკი)
     04. ჩატვირთვა და გვერდის გადასვლის ფარდა
     05. კურსორი და სქროლის ხაზი
     06. ნავიგაცია
     07. მთავარი ეკრანი (hero) და 3D საძინებელი
     08. მოძრავი ტექსტი (marquee)
     09. ჩვენს შესახებ
     10. სერვისები
     11. ნამუშევრები
     12. გუნდი
     13. კონტაქტი
     14. ფუტერი
     15. ანიმაციის შემცირება
   ========================================================================== */


/* ==========================================================================
   01. ცვლადები და თემები
   ========================================================================== */
:root {
  --bg:   #0b0a09;
  --bg2:  #141210;
  --fg:   #efe8dc;
  --mut:  #8d857a;
  --gold: #c9a96a;
  --line: rgba(239, 232, 220, .13);

  --ease:  cubic-bezier(.77, 0, .18, 1);
  --serif: 'Noto Serif Georgian', Georgia, serif;
  --sans:  'Noto Sans Georgian', system-ui, sans-serif;

  box-sizing: border-box;
  padding-top:    env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="light"] {
  --bg:   #f4efe6;
  --bg2:  #e9e2d5;
  --fg:   #1a1714;
  --mut:  #756c61;
  --gold: #9a7634;
  --line: rgba(26, 23, 20, .15);
}

:root[data-theme="dark"] {
  --bg:   #0b0a09;
  --bg2:  #141210;
  --fg:   #efe8dc;
  --mut:  #8d857a;
  --gold: #c9a96a;
  --line: rgba(239, 232, 220, .13);
}


/* ==========================================================================
   02. ბაზა
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

body {
  background: var(--bg);
  color: var(--fg);
  font: 300 16px/1.7 var(--sans);
  overflow-x: hidden;
  transition: background .6s, color .6s;
}

/* ტელეფონის ზედა სისტემური ზოლის ფონი */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg);
  z-index: 60;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.15;
}

h2 {
  font-size: clamp(26px, min(5vw, 7vh), 64px);
  margin-bottom: clamp(12px, 3vh, 28px);
}

h2 em {
  font-style: normal;
  color: var(--gold);
}

/* სქროლზე გამოჩენის ანიმაცია (კლასს .in JS ამატებს) */
.rv {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.rv.in {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   03. საერთო კომპონენტები
   ========================================================================== */

/* --- შიგთავსის კონტეინერი --- */
.wrap {
  max-width: 1240px;
  margin: auto;
  padding: 0 clamp(20px, 5vw, 60px);
}

/* --- სექციები --- */
section {
  position: relative;
  padding: clamp(70px, 9vh, 110px) 0 clamp(26px, 5vh, 56px);
}

section > .wrap {
  width: 100%;
}

#about,
#services,
#team,
#contact {
  display: flex;
  align-items: center;
}

#about,
#services,
#team {
  min-height: 100svh;
}

/* --- პატარა სათაური სექციის თავზე --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(12px, 2.4vh, 22px);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--gold);
}

/* --- ღილაკი --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  margin-top: clamp(16px, 3.5vh, 30px);
  padding: 15px 34px;
  border: 1px solid var(--gold);
  border-radius: 60px;
  background: none;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .2em;
  cursor: pointer;
  transition: color .5s;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  border-radius: 50% / 100%;
  transform: translateY(101%);
  transition: transform .6s var(--ease);
}

.btn:hover {
  color: var(--bg);
}

.btn:hover::before {
  transform: none;
}

.btn:disabled {
  opacity: .6;
  cursor: wait;
}


/* ==========================================================================
   04. ჩატვირთვა და გვერდის გადასვლის ფარდა
   ========================================================================== */

/* --- პირველი ჩატვირთვის ეკრანი --- */
#ld {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  clip-path: inset(0);
  transition: clip-path 1.3s var(--ease);
}

#ld.off {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

#ld b {
  font: 300 clamp(60px, 14vw, 170px)/1 var(--serif);
  color: var(--gold);
}

#ld small {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: .5em;
  color: var(--mut);
}

#ld i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
}

/* --- ფარდა მენიუზე გადასვლისას (ოქროსფერი ფანჯარა ბრენდით) --- */
#cv {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--gold);
  pointer-events: none;
  transform: translateY(100%);
  transition: transform .8s var(--ease);
}

#cv.on  { transform: none; }
#cv.out { transform: translateY(-100%); }

#cv b {
  padding: 0 20px;
  font: 300 clamp(40px, 11vw, 150px)/1 var(--serif);
  letter-spacing: .06em;
  text-align: center;
  color: #0b0a09;
}

#cv b span {
  color: #f4efe6;
}


/* ==========================================================================
   05. კურსორი და სქროლის ხაზი
   ========================================================================== */
#cd,
#cr {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  border-radius: 50%;
  mix-blend-mode: difference;
  pointer-events: none;
}

#cd {
  width: 7px;
  height: 7px;
  margin: -3.5px;
  background: #fff;
}

#cr {
  width: 44px;
  height: 44px;
  margin: -22px;
  border: 1px solid #fff;
  transition: width .35s, height .35s, margin .35s, background .35s;
}

#cr.h {
  width: 86px;
  height: 86px;
  margin: -43px;
  background: #fff;
}

/* სენსორულ ეკრანზე საკუთარი კურსორი არ გვჭირდება */
@media (hover: none) {
  #cd,
  #cr {
    display: none;
  }
}

/* გვერდის გადახვევის პროგრესი */
#sp {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  width: 0;
  height: 2px;
  background: var(--gold);
}


/* ==========================================================================
   06. ნავიგაცია
   ========================================================================== */
nav {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 55;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(20px, 5vw, 60px);
  color: #fff;
  mix-blend-mode: difference;
}

.logo {
  font: 300 22px var(--serif);
  letter-spacing: .08em;
}

.logo span {
  color: #c9a96a;
}

nav ul {
  display: flex;
  gap: 34px;
  list-style: none;
  font-size: 13px;
  letter-spacing: .12em;
}

nav li a {
  position: relative;
  padding: 4px 0;
}

nav li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}

nav li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* თემის გადამრთველი */
#th {
  width: 34px;
  height: 34px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 820px) {
  nav ul {
    display: none;
  }
}


/* ==========================================================================
   07. მთავარი ეკრანი (hero) და 3D საძინებელი
   ========================================================================== */
#hero {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 100svh;
  padding: 84px 0 56px;
  background:
    radial-gradient(600px circle at var(--mx, 70%) var(--my, 40%),
      color-mix(in srgb, var(--gold) 22%, transparent),
      transparent 60%),
    var(--bg);
}

#hero .wrap {
  max-width: 1560px;
}

/* ნაწილაკების ტილო */
#hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* მზის ამოსვლის ბზინვა */
.rise {
  position: absolute;
  right: 6%;
  top: 18%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  filter: blur(6px);
  opacity: .8;
  animation: sun 14s ease-in-out infinite alternate;
}

@keyframes sun {
  from { transform: translateY(160px); opacity: .15; }
  to   { transform: translateY(-30px); opacity: .85; }
}

/* --- ტექსტის სვეტი და 3D სვეტი --- */
.hg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(70px, 14vw, 240px);
  align-items: center;
}

h1 {
  font-size: clamp(30px, min(5vw, 9vh), 80px);
  letter-spacing: -.01em;
}

/* ასო-ასო ამოსვლა (ასოებს JS ჭრის .c-ებად) */
h1 .c {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) rotate(8deg);
  animation: up 1.1s var(--ease) forwards;
  animation-delay: calc(1.4s + var(--i) * 45ms);
}

@keyframes up {
  to { opacity: 1; transform: none; }
}

.ln {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
}

.sub {
  max-width: 440px;
  margin-top: clamp(12px, 3vh, 26px);
  color: var(--mut);
}

.scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  font-size: 11px;
  letter-spacing: .4em;
  color: var(--mut);
}

.scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 50px;
  margin: 12px auto 0;
  background: linear-gradient(var(--gold), transparent);
  animation: dr 2s infinite;
}

@keyframes dr {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- 3D საძინებელი ---------------------------------------------------------
   JS (box / fb ფუნქციები) ქმნის კედლებს და ავეჯს.
   კლასები:
     .shell — ოთახის კედლები (მსუბუქი კონტური)
     .f     — ავეჯი
     .soft  — ქსოვილი, ბალიშები, საბანი, ფანჯარა
     .glow  — სანათები (ანათებს)
   -------------------------------------------------------------------------- */
.stage {
  display: grid;
  place-items: center;
  height: min(46vh, 460px);
  perspective: 1100px;
}

.room {
  position: relative;
  width: 240px;
  height: 240px;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(-22deg + var(--ry, 0deg)))
    rotateY(calc(35deg + var(--rx, 0deg)));
  transition: transform .15s linear;
  animation: fl 7s ease-in-out infinite;
}

@keyframes fl {
  50% { margin-top: -24px; }
}

/* ყველა ზედაპირი */
.room div {
  position: absolute;
  border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}

/* ყუთის შემფუთი — თვითონ უხილავია */
.room > div {
  border: 0;
  background: none;
}

.room .shell div {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 4%, transparent);
}

.room .f div {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.room .soft div {
  background: color-mix(in srgb, var(--gold) 30%, transparent);
}

.room .glow div {
  background: color-mix(in srgb, var(--gold) 60%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 70%, transparent);
}

/* --- hero: პლანშეტი და ტელეფონი --- */
@media (max-width: 900px) {
  .hg {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  h1 {
    font-size: clamp(30px, 8.4vw, 52px);
  }

  .sub {
    font-size: 14px;
  }

  .stage {
    height: 24vh;
  }

  .room {
    scale: .6;
  }
}

/* --- hero: კომპიუტერი --- */
@media (min-width: 901px) {
  .stage {
    justify-self: end;
    width: min(100%, 380px);
  }
}

/* --- hero: დაბალი ეკრანი --- */
@media (max-height: 620px) {
  .sub,
  .scroll {
    display: none;
  }
}


/* ==========================================================================
   08. მოძრავი ტექსტი (marquee)
   ========================================================================== */
.mq {
  overflow: hidden;
  padding: 26px 0;
  border-block: 1px solid var(--line);
  white-space: nowrap;
}

.mq div {
  display: inline-block;
  font: 300 clamp(28px, 4.5vw, 60px) var(--serif);
  color: transparent;
  -webkit-text-stroke: 1px var(--mut);
  animation: mq 30s linear infinite;
}

.mq span {
  margin: 0 30px;
  color: var(--gold);
  -webkit-text-stroke: 0;
}

@keyframes mq {
  to { transform: translateX(-50%); }
}


/* ==========================================================================
   09. ჩვენს შესახებ
   ========================================================================== */
.ab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 100px);
  align-items: center;
}

.arch {
  position: relative;
  overflow: hidden;
  height: min(60vh, 520px);
  max-width: 400px;
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 999px 999px 0 0;
  background:
    url(https://dizainer.ge/images/18.png) center / cover no-repeat,
    var(--bg2);
}

/* სტატისტიკა */
.st {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 40px);
  margin-top: clamp(14px, 3vh, 30px);
}

.st b {
  display: block;
  font: 300 clamp(30px, min(5vw, 6vh), 56px) var(--serif);
  color: var(--gold);
}

.st small {
  color: var(--mut);
  letter-spacing: .1em;
}

@media (max-width: 860px) {
  .ab {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ab p {
    font-size: 14px;
  }

  .arch {
    height: 22vh;
    max-width: 200px;
  }

  .st small {
    font-size: 12px;
  }
}


/* ==========================================================================
   10. სერვისები
   ========================================================================== */
.sv {
  display: flex;
  gap: 10px;
  height: min(56vh, 520px);
}

.sv > div {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--bg2);
  cursor: pointer;
  transition: flex 1s var(--ease);
}

/* ფონის ფოტო (--g ცვლადს HTML-ში აყენებს თითო ბლოკი) */
.sv > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g);
  opacity: .5;
  transform: scale(1.2);
  transition: transform 1.4s var(--ease), opacity .8s;
}

.sv > div.a,
.sv > div:hover {
  flex: 3.2;
}

.sv > div.a::before,
.sv > div:hover::before {
  opacity: .95;
  transform: scale(1);
}

.sv em {
  position: relative;
  margin-bottom: auto;
  font: normal 12px var(--sans);
  letter-spacing: .3em;
  color: #c9a96a;
}

.sv h3 {
  position: relative;
  font-size: clamp(22px, 2.6vw, 34px);
  color: #efe8dc;
}

.sv p {
  position: relative;
  max-height: 0;
  opacity: 0;
  color: #efe8dc;
  transition: all .9s var(--ease);
}

.sv > div.a p,
.sv > div:hover p {
  max-height: 120px;
  margin-top: 12px;
  opacity: 1;
}

@media (max-width: 820px) {
  .sv {
    flex-direction: column;
    height: 52vh;
  }

  .sv > div {
    min-height: 0;
    padding: 14px 20px;
  }

  .sv > div.a,
  .sv > div:hover {
    flex: 3;
  }

  .sv p {
    font-size: 14px;
  }
}


/* ==========================================================================
   11. ნამუშევრები
   ========================================================================== */

/* --- ფილტრის ღილაკები --- */
.fl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}

.fl button {
  padding: 10px 24px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: none;
  color: var(--mut);
  font: 13px var(--sans);
  cursor: pointer;
  transition: .4s;
}

.fl button.on,
.fl button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* --- ბადე და ბარათები --- */
.pg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}

.pc {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  transition: opacity .6s, transform .5s var(--ease);
  will-change: transform;
}

.pc.hide {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
}

/* ფოტო */
.pc i {
  position: absolute;
  inset: 0;
  background: var(--g);
  transition: transform 1.2s var(--ease);
}

.pc:hover i {
  transform: scale(1.15) rotate(2deg);
}

/* კურსორის შუქი */
.pc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--px, 50%) var(--py, 50%),
    rgba(255, 255, 255, .18),
    transparent 60%);
  opacity: 0;
  transition: opacity .4s;
}

.pc:hover::after {
  opacity: 1;
}

/* წარწერა */
.pc div {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 1;
  color: #efe8dc;
  transform: translateZ(40px);
}

.pc small {
  font-size: 11px;
  letter-spacing: .25em;
  color: #c9a96a;
}

.pc h3 {
  font-size: 22px;
  color: #efe8dc;
}


/* ==========================================================================
   12. გუნდი
   ========================================================================== */
.tm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(10px, 2vw, 20px);
}

.tm > div {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 5vh, 44px) clamp(14px, 2vw, 30px);
  border: 1px solid var(--line);
  transition: border-color .5s;
}

/* ჰოვერზე ქვემოდან ამოსული ოქროსფერი შუქი */
.tm > div::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background: linear-gradient(transparent, color-mix(in srgb, var(--gold) 20%, transparent));
  transition: height .7s var(--ease);
}

.tm > div:hover {
  border-color: var(--gold);
}

.tm > div:hover::before {
  height: 100%;
}

/* ფოტო წრეში */
.av {
  position: relative;
  display: block;
  width: clamp(80px, 14vh, 120px);
  height: clamp(80px, 14vh, 120px);
  margin-bottom: 14px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--bg2);
  object-fit: cover;
}

.tm h3 {
  position: relative;
  font-size: 24px;
}

.tm small {
  position: relative;
  color: var(--mut);
}


/* ==========================================================================
   13. კონტაქტი
   ========================================================================== */
#contact {
  min-height: calc(100svh - 64px);
  background: var(--bg2);
}

.ct {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 100px);
}

/* --- საკონტაქტო ინფორმაცია --- */
.ci a,
.ci p {
  display: block;
  margin-bottom: 4px;
  font: 300 clamp(17px, min(2.6vw, 3.4vh), 28px) var(--serif);
  transition: color .4s;
}

.ci a:hover {
  color: var(--gold);
}

.ci small {
  display: block;
  margin: clamp(12px, 2.6vh, 26px) 0 6px;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
}

/* --- ფორმა --- */
.fg {
  position: relative;
  margin-bottom: clamp(14px, 3vh, 28px);
}

.fg input,
.fg textarea {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: 0;
  background: none;
  color: var(--fg);
  font: 300 17px var(--sans);
  resize: none;
}

.fg label {
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--mut);
  pointer-events: none;
  transition: .4s var(--ease);
}

/* ლეიბლი ზემოთ ადის ფოკუსზე ან ტექსტის შეყვანისას */
.fg input:focus + label,
.fg input:not(:placeholder-shown) + label,
.fg textarea:focus + label,
.fg textarea:not(:placeholder-shown) + label {
  top: -14px;
  font-size: 12px;
  color: var(--gold);
}

/* ოქროსფერი ხაზი ფოკუსზე */
.fg::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
}

.fg:focus-within::after {
  transform: scaleX(1);
}

/* შეტყობინება გაგზავნის შემდეგ */
.fs {
  min-height: 1.6em;
  margin: -8px 0 0;
  font-size: 15px;
  color: var(--gold);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .5s, transform .5s var(--ease);
}

.fs.show {
  opacity: 1;
  transform: none;
}

.fs.err {
  color: #d46a5e;
}

@media (max-width: 860px) {
  .ct {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ct .btn {
    margin-top: 0;
  }
}


/* ==========================================================================
   14. ფუტერი
   ========================================================================== */
footer {
  padding: 36px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--mut);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}


/* ==========================================================================
   15. ანიმაციის შემცირება (ვისაც სისტემაში ჩართული აქვს)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01s !important;
    transition-duration: .01s !important;
  }
}