/* =========================================================
   HOME (Mavi Sayfa) — the diamond menu made of one portrait
   The four diamonds are pieces of a single portrait; together they form
   the face. The top piece shows the face, the others are the menu.
   ========================================================= */

.page-home {
  display: grid;
  place-items: center;
  padding: 24px 16px 84px; /* no header here; bottom space for corner brand and dock */
}

.diamond-stage {
  --s: min(700px, 92vw, calc(100svh - 130px));
  --tx: 0;
  --ty: 0;
  position: relative;
  width: var(--s);
  height: var(--s);
  perspective: 1400px;
}

.diamond-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty) * -7deg)) rotateY(calc(var(--tx) * 9deg));
}

/* Technical-drawing guide lines */
.diamond-drawing {
  position: absolute;
  inset: -9%;
  width: 118%;
  max-width: none;
  height: 118%;
  overflow: visible;
  pointer-events: none;
}

.diamond-drawing * {
  fill: none;
  stroke: rgba(225, 230, 255, 0.32);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.diamond-drawing .frame {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: draw-line 2.4s var(--ease-out) 0.2s forwards;
}

.diamond-drawing .late {
  opacity: 0;
  animation: fade-in 1.2s var(--ease-out) 1.6s forwards;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* Diamond pieces */
.diamond {
  position: absolute;
  width: 50%;
  height: 50%;
  display: block;
  /* Only the visible diamond reacts to the mouse (see .diamond-inner): the
     square box around it overlaps its neighbours at the corners */
  pointer-events: none;
  transition: transform 450ms var(--ease-out);
  animation: diamond-in 1.3s var(--ease-out) both;
  animation-delay: calc(250ms + var(--i) * 120ms);
}

.diamond[data-pos="top"] { left: 25%; top: 0; --i: 0; --fx: 0; --fy: -60px; }
.diamond[data-pos="left"] { left: 0; top: 25%; --i: 1; --fx: -60px; --fy: 0; }
.diamond[data-pos="right"] { left: 50%; top: 25%; --i: 2; --fx: 60px; --fy: 0; }
.diamond[data-pos="bottom"] { left: 25%; top: 50%; --i: 3; --fx: 0; --fy: 60px; }

@keyframes diamond-in {
  from {
    opacity: 0;
    transform: translate(var(--fx), var(--fy)) rotate(-8deg) scale(0.86);
  }
}

/* Static soft shadow and hover glow (rasterized once: cheap) */
.diamond::before,
.diamond::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* A square rotated 45° is a diamond; blur works because nothing clips it */
.diamond::before {
  inset: 19%;
  border-radius: 12%;
  background: rgba(8, 10, 40, 0.55);
  filter: blur(16px);
  transform: translateY(20px) rotate(45deg);
}

.diamond::after {
  inset: -4%;
  background: radial-gradient(closest-side, rgba(200, 170, 255, 0.7), transparent);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.diamond-inner {
  position: absolute;
  inset: 0;
  pointer-events: auto; /* the clip-path below is also the exact hover area */
  clip-path: polygon(50% 1.2%, 98.8% 50%, 50% 98.8%, 1.2% 50%);
  overflow: hidden;
  background: #1b2560;
}

.diamond-photo {
  position: absolute;
  inset: 0;
  background: url("/assets/img/portrait.webp") no-repeat;
  background-size: var(--s) var(--s);
  transition: transform 1.1s var(--ease-out);
}

.diamond[data-pos="top"] .diamond-photo { background-position: calc(var(--s) / -4) 0; }
.diamond[data-pos="left"] .diamond-photo { background-position: 0 calc(var(--s) / -4); }
.diamond[data-pos="right"] .diamond-photo { background-position: calc(var(--s) / -2) calc(var(--s) / -4); }
.diamond[data-pos="bottom"] .diamond-photo { background-position: calc(var(--s) / -4) calc(var(--s) / -2); }

.diamond-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(140deg, rgba(47, 107, 224, 0.86) 0%, rgba(122, 108, 240, 0.8) 50%, rgba(200, 115, 222, 0.82) 100%);
  transition: opacity 700ms var(--ease-out);
}

/* Shine sweep */
.diamond-inner::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.32) 50%, transparent 60%);
  transform: translateX(-70%);
  animation: diamond-shine 8s ease-in-out infinite;
  animation-delay: calc(2.2s + var(--i) * 0.25s);
  pointer-events: none;
}

@keyframes diamond-shine {
  0%, 80% { transform: translateX(-70%); }
  100% { transform: translateX(70%); }
}

.diamond-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-align: center;
  pointer-events: none;
  animation: label-in 900ms var(--ease-out) both;
  animation-delay: calc(900ms + var(--i) * 120ms);
}

@keyframes label-in {
  from { opacity: 0; transform: translateY(12px); }
}

.diamond-label svg {
  width: clamp(22px, 3.4vw, 34px);
  height: clamp(22px, 3.4vw, 34px);
  opacity: 0.92;
  transition: transform 700ms var(--ease-spring);
}

.diamond-label span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 3.6vw, 34px);
  letter-spacing: 0.3px;
  text-shadow: 0 2px 4px rgba(10, 12, 50, 0.55), 0 0 24px rgba(10, 12, 50, 0.45);
}

.diamond-label span::after {
  content: "";
  display: block;
  height: 1.5px;
  margin: 4px auto 0;
  width: 0;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transition: width 600ms var(--ease-out);
}

/* Hover: the tint lifts and the portrait piece comes alive */
a.diamond:hover,
a.diamond:focus-visible {
  z-index: 2;
  transform: translateZ(40px) scale(1.03);
  outline: none;
}

a.diamond:hover::after,
a.diamond:focus-visible::after {
  opacity: 1;
}

a.diamond:hover .diamond-tint,
a.diamond:focus-visible .diamond-tint {
  opacity: 0.08;
}

a.diamond:hover .diamond-photo,
a.diamond:focus-visible .diamond-photo {
  transform: scale(1.06);
}

a.diamond:hover .diamond-label svg {
  transform: translateY(-4px) rotate(-6deg);
}

a.diamond:hover .diamond-label span::after,
a.diamond:focus-visible .diamond-label span::after {
  width: 70%;
}

/* Clicked: the piece swells and dissolves into the cloud */
a.diamond.is-puffing {
  z-index: 3;
  animation: diamond-puff 420ms var(--ease-out) forwards;
  pointer-events: none;
}

@keyframes diamond-puff {
  from { transform: translateZ(40px) scale(1.03); opacity: 1; }
  to { transform: translateZ(60px) scale(1.22); opacity: 0; }
}

/* Top piece: the face — no tint, says "Merhaba!" on hover */
.diamond-hello {
  position: absolute;
  left: 72%;
  top: 14%;
  padding: 7px 14px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-m);
  opacity: 0;
  transform: translateY(8px) scale(0.8);
  transform-origin: 0 100%;
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-spring);
  pointer-events: none;
  z-index: 3;
}

.diamond[data-pos="top"]:hover .diamond-hello {
  opacity: 1;
  transform: none;
}

.diamond[data-pos="top"]:hover .diamond-photo {
  transform: scale(1.04);
}

@media (max-width: 600px) {
  .diamond-stage {
    --s: min(96vw, calc(100svh - 150px));
  }

  .diamond-label {
    gap: 4px;
  }
}