/* ═══════════════════════════════════════════════════════════════
   VIHANVI INFRATECH — LIQUID GLASS

   The glass material is ported from the Clipo build (Clipo-main/
   index.css, .glass-card and .navbar__btn). It is not a frosted
   fill: the fill is a bare 12% of --c-glass, and the entire read of
   the material comes from a stack of ten offset shadows — four
   light insets that catch the top-left and bottom-right edges, four
   dark insets that seat the face, and two outer casts for weight.
   The --glass-reflex-light / --glass-reflex-dark multipliers scale
   the two families against each other, so the same rule works over
   a bright wall or a dark one.

   Values below are Clipo's light-theme set, since this hero is a
   near-white room.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Jost', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-content);
}

:root {
  --panel-w: 520px;

  /* The two panes that sit on the hero photograph — the service menu and
     the logo plate — share one backdrop, kept here so they can't drift
     apart. Softer than .glass's 8px would leave the room, but well short
     of frosting it out. */
  --pane-backdrop: blur(5px) saturate(180%) brightness(1.05);

  /* ── Clipo glass tokens ── */
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  --c-content: #000;
  --c-bg: #f5f5f7;
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
  --saturation: 150%;

  /* Clipo's easing */
  --ease: cubic-bezier(1, 0, 0.4, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* The full card stack — four light edges, four dark seats,
     two outer casts. */
  --glass-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);

  /* The control stack — the same, minus the three dark seats, so
     buttons sit lighter than panels. This is Clipo's .navbar__btn. */
  --glass-shadow-btn:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

/* ── GLASS PRIMITIVE ── */
.glass {
  position: relative;
  color: var(--c-content);
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  border: none;
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: var(--glass-shadow);
  transition:
    transform 200ms,
    background-color 400ms var(--ease),
    box-shadow 400ms var(--ease),
    color 400ms var(--ease);
  will-change: transform;
}

/* Controls carry the lighter stack */
.glass-control {
  box-shadow: var(--glass-shadow-btn);
}

/* Clipo's only hover on the material: the fill doubles. */
.glass-control:hover {
  background-color: color-mix(in srgb, var(--c-glass) 25%, transparent);
}

/* ── THE HERO ── */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── LOGO, TOP LEFT ──
   The bare mark on the wall. No tile, no plate — nothing but the
   transparent artwork. */
/* The mark sits on its own glass plate — same material and same backdrop
   as the service panel, so the two read as one system. */
.site-logo {
  position: fixed;
  top: clamp(24px, 3vw, 38px);
  left: clamp(24px, 3.4vw, 52px);
  z-index: 50;
  display: block;
  padding: clamp(12px, 1.3vw, 18px) clamp(18px, 2vw, 26px);
  border-radius: 28px;
  backdrop-filter: var(--pane-backdrop);
  -webkit-backdrop-filter: var(--pane-backdrop);
  transition:
    transform 200ms,
    background-color 400ms var(--ease);
}

.site-logo:hover {
  transform: scale(1.05);
  background-color: color-mix(in srgb, var(--c-glass) 25%, transparent);
}

.site-logo img {
  display: block;
  height: clamp(72px, 7.6vw, 100px);
  width: auto;
}

/* ── THE TWO PILLS ── */
.hero-actions {
  position: fixed;
  bottom: clamp(14px, 2vh, 26px);
  left: clamp(24px, 3.4vw, 52px);
  z-index: 50;
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 17px 32px;
  font-family: inherit;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: 99em;
  text-decoration: none;
  cursor: pointer;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn:hover {
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary svg {
  transition: transform 400ms var(--ease-out);
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

/* ── SERVICE MENU, RIGHT ──
   One slab holding five rows. At rest the rows are hairlines; a single
   bubble of glass slides to whichever row you're on, and can be dragged
   between them — the same gesture as the section pill on the service
   pages, stood on end. */
.service-panel {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: var(--panel-w);
  padding: 14px;
  border-radius: 32px 0 0 32px;
  will-change: auto;
  /* Keeps the bubble's negative z-index behind the rows rather than
     behind the panel itself */
  isolation: isolate;
  touch-action: none;

  backdrop-filter: var(--pane-backdrop);
  -webkit-backdrop-filter: var(--pane-backdrop);
}

/* The panel is a surface, not a control — it holds still */
.service-panel:hover {
  transform: translateY(-50%);
}

.service-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 21px 18px;
  background-color: transparent;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: var(--c-content);
  box-shadow: none;
  transition:
    background-color 400ms var(--ease),
    box-shadow 400ms var(--ease),
    transform 200ms;
}

/* The row the bubble is under is the only draggable thing here, so it is
   the only one that advertises a grab */
.service-item.is-active {
  cursor: grab;
}

.service-panel.is-dragging .service-item {
  cursor: grabbing;
}

/* Dragging across labels would otherwise select their text */
.service-panel.is-dragging {
  user-select: none;
  -webkit-user-select: none;
}

.service-item:focus-visible {
  outline: 2px solid var(--c-content);
  outline-offset: -4px;
}

/* The glass that slides between the rows */
.service-bubble {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  z-index: -1;
  border-radius: 24px;
  background-color: color-mix(in srgb, var(--c-glass) 22%, transparent);
  box-shadow: var(--glass-shadow-btn);
  pointer-events: none;
  will-change: transform, height;
  transition:
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    height 380ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 400ms var(--ease);
}

/* The transform tracks the finger with no easing — anything here would
   lag the drag. Height still glides, because it is previewing the row
   the bubble will land on rather than following the pointer. */
.service-panel.is-dragging .service-bubble {
  transition: height 220ms cubic-bezier(0.16, 1, 0.3, 1);
  background-color: color-mix(in srgb, var(--c-glass) 34%, transparent);
}

/* Hairline between rows */
.service-item::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: color-mix(in srgb, var(--c-dark) 13%, transparent);
  transition: opacity 300ms var(--ease);
}

.service-item:last-child::before {
  opacity: 0;
}

/* The hairlines either side of the bubble get out of its way */
.service-item.is-active::before,
.service-item.is-active+.service-item::before,
.service-item.is-near::before,
.service-item.is-near+.service-item::before {
  opacity: 0;
}

.service-item:active {
  transform: scale(0.99);
}

/* Service marks — flattened to pure ink so no source artwork brings
   its own colour into the panel */
.item-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 400ms var(--ease-out);
}

.item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) opacity(0.88);
}

.item-label {
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: var(--c-content);
  transition: transform 400ms var(--ease-out);
}

.item-arrow {
  flex-shrink: 0;
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--c-content) 38%, transparent);
  transition: transform 400ms var(--ease-out), color 300ms var(--ease);
}

.item-arrow svg {
  width: 100%;
  height: 100%;
}

/* The row's contents lean into the bubble. Keyed off the class the script
   sets rather than :hover, so a dragged bubble carries them with it —
   is-near is the row it would land on if you let go now. */
.service-item.is-active .item-label,
.service-item.is-near .item-label {
  transform: translateX(5px);
}

.service-item.is-active .item-icon,
.service-item.is-near .item-icon {
  transform: translateX(3px) scale(1.06);
}

.service-item.is-active .item-arrow,
.service-item.is-near .item-arrow {
  color: var(--c-content);
  transform: rotate(45deg) scale(1.08);
}

/* ── SMALLER SCREENS ── */
@media (max-width: 1100px) {
  :root {
    --panel-w: 400px;
  }

  .item-label {
    font-size: 1.05rem;
  }
}

@media (max-width: 820px) {
  :root {
    --panel-w: min(320px, 82vw);
  }

  .service-panel {
    padding: 10px;
    border-radius: 24px 0 0 24px;
  }

  .service-item {
    padding: 15px 13px;
    gap: 11px;
    border-radius: 18px;
  }

  .service-item::before {
    left: 13px;
    right: 13px;
  }

  .item-label {
    font-size: 0.95rem;
  }

  .item-icon {
    width: 28px;
    height: 28px;
  }

  .item-arrow {
    width: 25px;
    height: 25px;
  }

  .site-logo img {
    height: 60px;
  }

  .hero-actions {
    gap: 10px;
  }

  .btn {
    padding: 13px 20px;
    font-size: 0.63rem;
    letter-spacing: 0.09em;
  }

  /* The bubble's inset was drawn against the panel's 14px padding. The
     padding comes down here and the bubble has to come with it, or it
     sits 4px inside the row it is meant to be highlighting. */
  .service-bubble {
    left: 10px;
    right: 10px;
  }
}

/* Long labels on a narrow phone */
@media (max-width: 380px) {
  .item-label {
    font-size: 0.9rem;
  }
}

/* Users who ask for less motion get the glass without the travel */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}