/* ════════════════════════════════════════════════════
   ARIYAN — Shared Animation Layer
   Glass · Bento · 3D Tilt · Scroll Reveal · Quote Tree
   ════════════════════════════════════════════════════ */

/* ── Custom cursor ── */
*, *::before, *::after { cursor: none !important; }
.custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, width 0.25s ease, height 0.25s ease,
              background 0.25s ease, opacity 0.25s ease;
  mix-blend-mode: difference;
}
.custom-cursor.expanded {
  width: 38px; height: 38px;
  background: rgba(201,168,76,0.18);
  border: 1px solid var(--gold);
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}

/* ── Glassmorphism ── */
.glass {
  background: rgba(11,11,18,0.55) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(201,168,76,0.08);
}
.glass-subtle {
  background: rgba(17,17,24,0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(201,168,76,0.08);
}

/* ── Scroll Reveal ── */
.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.sr.sr-left  { transform: translateX(-32px); }
.sr.sr-right { transform: translateX(32px); }
.sr.sr-scale { transform: scale(0.94); }
.sr.visible  { opacity: 1 !important; transform: none !important; }
.sr.sr-d1 { transition-delay: 0.08s; }
.sr.sr-d2 { transition-delay: 0.16s; }
.sr.sr-d3 { transition-delay: 0.24s; }
.sr.sr-d4 { transition-delay: 0.32s; }
.sr.sr-d5 { transition-delay: 0.40s; }
.sr.sr-d6 { transition-delay: 0.48s; }

/* ── 3D Tilt Card ── */
.tilt-wrap {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.5s ease;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.7),
              0 0 0 1px rgba(201,168,76,0.2),
              inset 0 1px 0 rgba(201,168,76,0.1);
}
.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(201,168,76,0.08) 0%,
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.tilt-card:hover .tilt-shine { opacity: 1; }

/* ── BENTO GRID ── */
.bento {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 3rem 0;
}
.bento-2 { grid-template-columns: repeat(2, 1fr); }
.bento-3 { grid-template-columns: repeat(3, 1fr); }
.bento-4 { grid-template-columns: repeat(4, 1fr); }
.bento-auto { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bento-auto-lg { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 640px) {
  .bento-3, .bento-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .bento-2, .bento-3, .bento-4 { grid-template-columns: 1fr; }
}

.bento-cell {
  background: var(--panel);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: background 0.25s ease;
  opacity: 0;
  transform: scale(0.95) translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1),
              transform 0.5s cubic-bezier(0.22,1,0.36,1),
              background 0.2s ease;
}
.bento-cell.visible {
  opacity: 1;
  transform: none;
}
/* stagger via nth-child */
.bento-cell:nth-child(1)  { transition-delay: 0ms }
.bento-cell:nth-child(2)  { transition-delay: 60ms }
.bento-cell:nth-child(3)  { transition-delay: 120ms }
.bento-cell:nth-child(4)  { transition-delay: 180ms }
.bento-cell:nth-child(5)  { transition-delay: 240ms }
.bento-cell:nth-child(6)  { transition-delay: 300ms }
.bento-cell:nth-child(7)  { transition-delay: 360ms }
.bento-cell:nth-child(8)  { transition-delay: 420ms }
.bento-cell:nth-child(9)  { transition-delay: 480ms }

.bento-cell:hover { background: #16161f; }

/* bento cell that spans */
.bento-span-2 { grid-column: span 2; }
.bento-tall   { grid-row: span 2; }

/* Stat bento variant */
.bento-stat .bento-cell {
  text-align: center;
  padding: 2rem 1.5rem;
  cursor: default;
}
.bento-stat .bento-cell::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2), transparent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.bento-stat .bento-cell:hover::after { transform: scaleX(1); }

.b-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.b-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.57rem;
  letter-spacing: 0.2em;
  color: var(--ash);
  text-transform: uppercase;
  display: block;
}

/* ── QUOTE TREE ── */
.quote-tree {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem 2rem;
  position: relative;
}
.quote-tree-inner {
  position: relative;
  padding-left: 2.5rem;
}
.qt-trunk {
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold-dim), transparent);
  height: 0;
  transition: height 1.2s cubic-bezier(0.22,1,0.36,1);
}
.qt-trunk.visible { height: 100%; }

.qt-item {
  position: relative;
  margin-bottom: 3.5rem;
  padding-left: 1rem;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.qt-item.visible { opacity: 1; transform: none; }
.qt-item:nth-child(1) { transition-delay: 0.2s; }
.qt-item:nth-child(2) { transition-delay: 0.5s; }
.qt-item:nth-child(3) { transition-delay: 0.8s; }
.qt-item:nth-child(4) { transition-delay: 1.1s; }

.qt-item::before {
  content: '';
  position: absolute;
  left: -2.5rem;
  top: 0.7rem;
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}
.qt-item::after {
  content: '';
  position: absolute;
  left: -2.55rem;
  top: calc(0.7rem - 3px);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201,168,76,0.4);
}

.qt-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
  color: var(--white);
  line-height: 1.7;
  margin-bottom: 0.7rem;
}
.qt-attr {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: var(--gold-dim);
  text-transform: uppercase;
}
.qt-source {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(144,144,160,0.6);
  margin-left: 0.5rem;
}

/* ── Hero shimmer ── */
@keyframes shimmer-drift {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}
.hero-shimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,168,76,0.04) 50%,
    transparent 100%
  );
  animation: shimmer-drift 7s ease-in-out infinite;
}

/* ── Blockquote glass enhancement ── */
blockquote {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(17,17,24,0.65) !important;
  border-left: 3px solid var(--gold) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(201,168,76,0.06);
}

/* ── Highlight box glass ── */
.highlight-box, .gold-box {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ── Masthead parallax layer ── */
.parallax-title {
  will-change: transform;
  display: inline-block;
}

/* ── Timeline scroll ── */
.timeline-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.timeline-item.visible {
  opacity: 1;
  transform: none;
}
.timeline-item:nth-child(1) { transition-delay: 0ms }
.timeline-item:nth-child(2) { transition-delay: 80ms }
.timeline-item:nth-child(3) { transition-delay: 160ms }
.timeline-item:nth-child(4) { transition-delay: 240ms }
.timeline-item:nth-child(5) { transition-delay: 320ms }
.timeline-item:nth-child(6) { transition-delay: 400ms }
.timeline-item:nth-child(7) { transition-delay: 480ms }

/* ── Chapter entrance ── */
.chapter { position: relative; }
.chapter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.08), transparent);
}

/* ── Volume card bento variant ── */
.volumes-grid .volume-card {
  transition: background 0.25s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s ease !important;
}

/* ── Project card glass ── */
.project-card {
  transition: border-color 0.25s ease, box-shadow 0.4s ease, transform 0.4s ease !important;
}
.project-card:hover {
  border-color: rgba(201,168,76,0.3) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,168,76,0.06) !important;
  transform: translateY(-3px);
}

/* ── Scroll progress bar ── */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  width: 0%;
  z-index: 99997;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(201,168,76,0.4);
}

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sr, .bento-cell, .timeline-item, .qt-item, .qt-trunk {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-shimmer::after { animation: none !important; }
  .tilt-card { transform: none !important; }
  *, *::before, *::after { cursor: auto !important; }
  .custom-cursor, .cursor-ring { display: none; }
}