/* ============================================================
   for Landing Page — CSS
   ============================================================ */
:root {
  --clico-magenta: #c314a5;
  --clico-purple: #7b1fa2;
  --clico-royal-purple: #5e35b1;
  --clico-electric-indigo: #3f51b5;
  --clico-deep-blue: #1a237e;
  --clico-gradient: linear-gradient(135deg, var(--clico-magenta) 0%, var(--clico-purple) 40%, var(--clico-electric-indigo) 100%);

  --bg: #f6f4fa;
  --panel: #ffffff;
  --ink: #1a202c;
  --muted: #4a5568;
  --line: rgba(123, 31, 162, 0.12);
  --accent: var(--clico-purple);
  --accent-soft: rgba(123, 31, 162, 0.07);
  --shadow: 0 18px 40px rgba(123, 31, 162, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: radial-gradient(circle at 50% 0%, rgba(195, 20, 165, .1), transparent 42%), var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  min-height: 100vh;
}

/* Site logo (top left) */
.site-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 6px;
  box-shadow: var(--shadow);
  z-index: 50;
}

.landing-contact-button, .action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 8px; color: #fff; background: var(--clico-purple); font: 700 .75rem 'Inter', sans-serif; text-decoration: none; cursor: pointer; }
.landing-contact-button { position: fixed; top: 1.25rem; left: 50%; z-index: 50; transform: translateX(-50%); }
.home-button { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 50; }
.contact-modal { position: fixed; top: 50%; left: 50%; width: min(92vw, 30rem); max-width: 30rem; max-height: 90vh; margin: 0; transform: translate(-50%, -50%); overflow: auto; border: 1px solid var(--line); border-radius: 14px; padding: 2rem; color: var(--ink); background: var(--panel); box-shadow: 0 30px 80px rgba(26,35,126,.28); text-align: center; }
.contact-modal::backdrop { background: rgba(26,35,126,.4); backdrop-filter: blur(5px); }
.contact-modal h2 { margin: 0 0 .5rem; }
.contact-modal p { color: var(--muted); }
.contact-modal form { display: grid; gap: .85rem; margin-top: 1.25rem; }
.contact-modal form { text-align: left; }
.contact-modal label { display: grid; gap: .35rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
.contact-modal input, .contact-modal textarea { width: 100%; padding: .7rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; }
.modal-close { position: absolute; top: .7rem; right: .8rem; border: 0; color: var(--muted); background: transparent; font-size: 1.6rem; cursor: pointer; }
.form-status { min-height: 1.25rem; margin: 0; font-size: .85rem; }
.clico-portfolio-success-message { margin-top: 1.25rem; padding: 1rem; border: 1px solid rgba(123,31,162,.18); border-radius: 8px; color: var(--ink); background: var(--accent-soft); text-align: center; }
.clico-portfolio-success-message h3 { margin-bottom: .35rem; }
.clico-portfolio-success-message p { margin: 0; color: var(--muted); }

/* Fullscreen menu viewport */
.menu-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* This is the piece that slides up/down */
.menu-scroller {
  position: absolute;
  inset: 0;
  transition: transform .55s cubic-bezier(.25, .8, .3, 1);
  will-change: transform;
}

.menu {
  list-style: none;
  padding: 0 0 0 22vw;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px; /* comfortable spacing between items when scrolling */
}
.menu li { list-style: none; }

.menu-item {
  display: block;
  width: max-content;
  font-family: 'Inter', sans-serif;
  font-size: clamp(38px, 5.5vw, 90px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: rgba(123, 31, 162, 0.55); /* dimmed for non-selected */
  text-decoration: none;
  text-shadow: 0 0 14px rgba(123, 31, 162, 0.12);
  cursor: pointer;
  transition:
    transform .4s cubic-bezier(.25,.8,.3,1),
    color .35s ease,
    opacity .35s ease,
    text-shadow .35s ease;
}
.menu-item:hover { color: var(--accent); }

/* The item currently aligned with the arrow */
.menu-item.selected {
  transform: translateX(50px);
  color: transparent;
  background: var(--clico-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 22px rgba(195, 20, 165, 0.25);
}

/* Fixed arrow — always at the vertical center of the viewport */
.cursor {
  position: fixed;
  top: 50%;
  left: calc(22vw - 46px);
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 30px;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(123, 31, 162, 0.4));
  z-index: 10;
}

@media (max-width: 600px) {
  .site-logo { width: 52px; height: 52px; top: 14px; left: 14px; }
  .menu { padding-left: 22vw; gap: 18px; }
  .menu-item { font-size: 11vw; letter-spacing: -1.5px; }
  .menu-item.selected { transform: translateX(24px); }
  .cursor { left: calc(22vw - 34px); font-size: 22px; }
}
/* Back button — top-left, next to the site logo */
.back-btn {
  position: fixed;
  top: 32px;
  left: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  color: var(--clico-purple);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease, color .2s ease;
  z-index: 45;
}
.back-btn:hover {
  transform: translateX(-3px);
  background: var(--accent-soft);
  color: var(--clico-magenta);
}
@media (max-width: 600px) {
  .back-btn { top: 22px; left: 78px; padding: 8px 12px; font-size: .7rem; }
}