/* ============================================================
   PREMIUM SKIN — Printcept India
   Override layer: shadows, transitions, borders, typography only.
   Load AFTER the page's base styles so it wins the cascade.
   No layout, grid, padding, or font-family rules in this file.
   ============================================================ */

/* ---------- 0. Foundation tokens ---------- */
:root{
  /* Deliberate, "expensive" ease-out — fast start, long soft landing */
  --ease-luxe: cubic-bezier(.22,.61,.36,1);
  /* Gentle overshoot for lift-offs (cards rising on hover) */
  --ease-spring: cubic-bezier(.34,1.4,.64,1);

  /* Multi-layered ambient shadows: each layer doubles distance, halves opacity */
  --shadow-rest:
    0 1px 1px  rgba(16,33,49,.03),
    0 2px 4px  rgba(16,33,49,.03),
    0 6px 14px rgba(16,33,49,.045);
  --shadow-float:
    0 1px 2px   rgba(16,33,49,.05),
    0 6px 12px  rgba(16,33,49,.05),
    0 16px 32px rgba(16,33,49,.07),
    0 32px 64px rgba(16,33,49,.06);
}

/* ---------- 1. Premium ambient shadows — cards float ---------- */
.pcard, .deal, .tcard, .feat-row{
  box-shadow: var(--shadow-rest), 0 0 0 1px rgba(20,40,60,.02); /* hairline "edge" layer */
  border-color: rgba(226,232,240,.75); /* soften the 1px border so shadow does the work */
}
.pcard{
  will-change: transform; /* promote to its own compositor layer for buttery hover */
  transition:
    transform  .5s var(--ease-spring),
    box-shadow .5s var(--ease-luxe),
    border-color .5s var(--ease-luxe);
}
.pcard:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-float);
  border-color: rgba(0,160,227,.28); /* whisper of brand blue at the edge */
}

/* ---------- 2. Luxury micro-interactions — buttons ---------- */
.btn{
  transition:
    background .35s var(--ease-luxe),
    transform  .35s var(--ease-luxe),
    box-shadow .35s var(--ease-luxe);
  box-shadow: 0 1px 2px rgba(0,119,182,.22),
              inset 0 1px 0 rgba(255,255,255,.16); /* top bevel highlight */
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,119,182,.26),
              0 12px 26px rgba(0,119,182,.16),
              inset 0 1px 0 rgba(255,255,255,.2);
}
.btn:active{
  transform: translateY(0) scale(.985);
  transition-duration: .12s; /* press responds instantly */
  box-shadow: 0 1px 2px rgba(0,119,182,.3);
}

/* Respect users who disable motion */
@media (prefers-reduced-motion: reduce){
  .btn, .pcard{ transition: none; will-change: auto }
  .pcard:hover, .btn:hover{ transform: none }
}

/* ---------- 3. Glassmorphism + 1px inner borders — dark elements ---------- */
/* Frosted sticky header — @supports keeps it safe on old browsers */
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))){
  header{
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    border-bottom-color: rgba(226,232,240,.65);
  }
}

/* 1px inner light-catch on dark surfaces (inset shadows never shift layout) */
.topbar{ box-shadow: inset 0 -1px 0 rgba(255,255,255,.07) }
footer { box-shadow: inset 0  1px 0 rgba(255,255,255,.06) }
.fsocial a{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07),
              inset 0 1px 0 rgba(255,255,255,.10); /* subtle top rim light */
  transition: background .3s var(--ease-luxe), box-shadow .3s var(--ease-luxe);
}
.fsocial a:hover{
  background:#24384a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14),
              inset 0 1px 0 rgba(255,255,255,.16);
}

/* Mega-menu dropdown gets the float treatment too */
.ddrop{ box-shadow: var(--shadow-float), 0 0 0 1px rgba(20,40,60,.03) }

/* ---------- 4. Typography micro-adjustments — editorial headings ---------- */
.hero h1{
  letter-spacing: -.025em; line-height: 1.08;  /* tight = editorial */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sec-h{
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sec-sub  { line-height: 1.75 }                 /* airy supporting copy */
.pname    { letter-spacing: -.01em }
.feat-row h3{ letter-spacing: -.015em }
.hero-eyebrow{ letter-spacing: .14em }          /* small caps breathe wider */
footer h4 { letter-spacing: .09em }
