/**
 * CloviBuild Engagement Layer v2.0 — Supporting Styles
 * Token-driven (CSS custom properties from tokens.css)
 * ZERO hard-coded hex colors
 */

/* ======================================
   1. SCROLL REVEAL TRANSITIONS
   ====================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.scroll-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ======================================
   2. 3D TILT EFFECT (inline JS handles transform)
   ====================================== */
.tilt-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Dark theme tilt shadow */
[data-theme="dark"] .tilt-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ======================================
   3. CORNER-FOLD HOVER EFFECT
   ====================================== */
.corner-fold {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.corner-fold::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent rgba(0, 0, 0, 0.15) transparent transparent;
  transition: border-width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.corner-fold:hover::after {
  border-width: 0 32px 32px 0;
}

/* Dark theme corner-fold */
[data-theme="dark"] .corner-fold::after {
  border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
}

.corner-fold:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .corner-fold:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ======================================
   4. ANIMATED COUNTER
   ====================================== */
.counter {
  font-weight: 700;
  font-size: 2rem;
  color: var(--brand);
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 2ch; /* Prevent layout shift during counting */
}

/* ======================================
   5. PREFERS-REDUCED-MOTION OVERRIDE
   ====================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .tilt-card,
  .corner-fold,
  .counter {
    transition: none !important;
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Greta-bar reveal variants (directional + staggered) ── */
.reveal[data-anim="left"]{transform:translateX(-32px)}
.reveal[data-anim="right"]{transform:translateX(32px)}
.reveal[data-anim="scale"]{transform:scale(.94)}
.reveal[data-anim="fade"]{transform:none}
.reveal.scroll-reveal-in{opacity:1!important;transform:none!important}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}
.reveal[data-delay="6"]{transition-delay:.48s}
/* auto-stagger children of a .reveal-group */
.reveal-group>*{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.reveal-group.scroll-reveal-in>*{opacity:1;transform:none}
.reveal-group.scroll-reveal-in>*:nth-child(2){transition-delay:.07s}
.reveal-group.scroll-reveal-in>*:nth-child(3){transition-delay:.14s}
.reveal-group.scroll-reveal-in>*:nth-child(4){transition-delay:.21s}
.reveal-group.scroll-reveal-in>*:nth-child(5){transition-delay:.28s}
.reveal-group.scroll-reveal-in>*:nth-child(6){transition-delay:.35s}
/* gradient-shimmer marquee for tech-stack strips */
.tech-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tech-marquee .track{display:flex;gap:14px;width:max-content;animation:tk-scroll 32s linear infinite}
.tech-marquee:hover .track{animation-play-state:paused}
@keyframes tk-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.tech-marquee .track{animation:none}.reveal-group>*{opacity:1;transform:none}}

/* ── Interactive content components: tabs · accordion · callout ── */
/* TABS */
.tabs{margin-top:20px}
.tab-btns{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tab-btns button{font:inherit;font-weight:600;font-size:14px;color:var(--ink-2);background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;transition:.15s;margin-bottom:-1px}
.tab-btns button:hover{color:var(--brand)}
.tab-btns button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.tab-pane{display:none;animation:tabfade .35s ease}
.tab-pane[data-active="true"]{display:block}
@keyframes tabfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ACCORDION (harmonica) */
.accordion{display:grid;gap:12px;margin-top:20px}
.acc-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.acc-head{width:100%;text-align:left;font:inherit;font-weight:700;font-size:1.02rem;color:var(--ink);background:none;border:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.acc-head .acc-ic{flex:none;width:22px;height:22px;border-radius:6px;background:var(--bg-3);color:var(--brand);display:grid;place-items:center;font-size:16px;font-weight:800;transition:.2s}
.acc-item[data-open="true"] .acc-ic{transform:rotate(45deg);background:var(--brand);color:#fff}
.acc-body{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.acc-body-inner{padding:0 22px 20px;color:var(--ink-2);font-size:14.5px}
/* CALLOUT */
.callout{position:relative;background:var(--bg-3);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;padding:18px 20px 18px 22px;margin:22px 0;display:flex;gap:14px;align-items:flex-start}
.callout.gold{border-left-color:var(--gold)}
.callout .co-ic{flex:none;width:26px;height:26px;border-radius:7px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.callout.gold .co-ic{background:var(--gold);color:#241a06}
.callout b{color:var(--ink);display:block;margin-bottom:3px;font-size:14.5px}
.callout p{color:var(--ink-2);font-size:14px;margin:0}