/* ════════════════════════════════════════════════════════════════════
   cRyPtO sMaRt — PREMIUM.CSS
   A thin refinement layer loaded LAST. Touches nothing structural —
   only harmonizes motion, typography rhythm, micro-feedback and
   whitespace so the site reads "expensive" through restraint.
   Safe to remove: deleting this file reverts to prior styling.
   No new fonts, no images, no libraries — zero added page weight
   beyond this one small stylesheet. SEO-neutral (purely visual).
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   1. MOTION DISCIPLINE
   One consistent "authored" easing everywhere. We calm the
   bouncy overshoot curves (cubic-bezier with values >1, which
   read as playful/cheap) down to the brand's smooth curve.
   ────────────────────────────────────────────────────── */
:root{
  --ease-premium: cubic-bezier(.22,.61,.36,1);
  --ease-soft:    cubic-bezier(.4,0,.2,1);
}

/* Tame the overshoot in Crypi + mobile drawer to smooth glides */
.cp-launch,
.cp-panel,
.cp-row.cp-anim{
  transition-timing-function: var(--ease-premium) !important;
}
.nav-mobile-panel{
  transition-timing-function: var(--ease-premium) !important;
}

/* Cards & buttons: unify hover/tap feel across the whole site */
.card,
.card-hover,
.btn{
  transition:
    transform   var(--t-base),
    box-shadow  var(--t-base),
    background  var(--t-base),
    border-color var(--t-base),
    color       var(--t-base) !important;
}

/* ──────────────────────────────────────────────────────
   2. MICRO-FEEDBACK (subtle, consistent, never jumpy)
   A 2px lift + deepening shadow on hover. Premium = small.
   ────────────────────────────────────────────────────── */
@media (hover:hover){
  .card-hover:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .btn-primary:hover,
  .btn-secondary:hover{
    transform: translateY(-1px);
  }
}
/* Honest press state — gives a tactile "click" without bounce */
.btn:active{
  transform: translateY(0) scale(.985);
  transition-duration: 90ms;
}
.card-hover:active{
  transform: translateY(-1px);
  transition-duration: 90ms;
}

/* Keyboard users get the same clarity as mouse users (a11y + polish) */
.btn:focus-visible,
.card-hover:focus-visible,
.nav-link:focus-visible,
.form-input:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-2);
}

/* ──────────────────────────────────────────────────────
   3. TYPOGRAPHY REFINEMENT
   Calmer measure + rhythm = editorial, expensive feel.
   ────────────────────────────────────────────────────── */
/* Comfortable reading measure for body copy inside content shells */
.shell-read p,
.card-text,
.section-intro p{
  line-height: 1.62;
}
.section-intro p{
  max-width: 60ch;        /* stops long intro lines sprawling */
  margin-left: auto;
  margin-right: auto;
}
/* Slightly airier paragraphs in long-form article/lesson bodies */
.prose p,
.article-body p,
.lesson-body p{
  line-height: 1.7;
  max-width: 68ch;
}
/* Tighten large display headings a touch more for a refined set */
h1, .h1{ letter-spacing: -.028em; }
h2, .h2{ letter-spacing: -.018em; }
/* Render-quality niceties (free, widely supported) */
body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ──────────────────────────────────────────────────────
   4. IMAGE TREATMENT — make mismatched photos feel like a SET
   A whisper-faint, uniform tonal overlay on card media unifies
   AI-generated thumbnails so the grid looks art-directed.
   Kept extremely subtle so it never looks "filtered".
   ────────────────────────────────────────────────────── */
.card-media{
  position: relative;
  overflow: hidden;
}
.card-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg,
              rgba(10,12,16,0) 55%,
              rgba(10,12,16,.10) 100%);
  pointer-events:none;
  opacity:.9;
  transition: opacity var(--t-base);
}
.card-hover:hover .card-media::after{ opacity:.5; }
/* Smooth, slow zoom (no snap) on the existing zoom hovers */
.img-hover-zoom img{
  transition: transform 600ms var(--ease-premium) !important;
}
@media (hover:hover){
  .card-hover:hover .img-hover-zoom img{ transform: scale(1.04); }
}

/* ──────────────────────────────────────────────────────
   5. WHITESPACE & RHYTHM
   Let sections breathe a little more on large screens.
   Uses existing spacing scale, desktop-only so mobile stays tight.
   ────────────────────────────────────────────────────── */
@media (min-width: 1024px){
  .section{ padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  .section-intro{ margin-bottom: var(--sp-7); }
}

/* ──────────────────────────────────────────────────────
   6. GRACEFUL FIRST PAINT
   Content fades up as it's ready instead of popping. Only when
   JS reveal is active; if JS fails, everything stays visible.
   ────────────────────────────────────────────────────── */
.js-reveal-ready [data-reveal]{ will-change: opacity, transform; }

/* ──────────────────────────────────────────────────────
   7. RESPECT REDUCED MOTION — accessibility + battery
   If the user asks the OS for less motion, we honor it fully.
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-stagger] > *{
    opacity:1 !important; transform:none !important;
  }
}