/* craft.css - Artistic enhancements layer
   Adds motion, texture, and visual surprise without altering base design */

/* === MARQUEE TICKER === */
.marquee{overflow:hidden;padding:0.65rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg);position:relative}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:4rem;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:ticker 30s linear infinite}
.marquee-track span{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;padding:0 1.5rem;display:flex;align-items:center;gap:1.5rem}
.marquee-track span::before{content:'';display:block;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:0.4;flex-shrink:0}
@keyframes ticker{to{transform:translateX(-50%)}}

/* === SPLIT IMAGE DESATURATION (desktop only) === */
@media(min-width:768px){
  .split-img img,.split-media img{filter:saturate(0.5) brightness(0.9)}
  .split:hover .split-img img,.split:hover .split-media img{filter:saturate(1) brightness(1)}
}

/* === CARD 3D HOVER (desktop only) === */
@media(min-width:768px){
  .card:hover{transform:translateY(-5px) perspective(800px) rotateX(1.5deg)}
  .img-card:hover{transform:translateY(-5px) perspective(800px) rotateX(1.5deg)}
}

/* === FOOTER TAGLINE === */
.footer-tagline{font-family:var(--serif);font-style:italic;font-size:0.88rem;color:var(--text-3);margin-top:0.35rem;letter-spacing:0.01em}

/* === FOCUS-VISIBLE (keyboard accessibility) === */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.skip-link:focus{outline:2px solid var(--text);outline-offset:2px}
.nav-cta:focus-visible{outline-offset:4px}
details summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

/* === RESULT HIGHLIGHTS === */
.result-highlight{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1rem}
.result-num{font-family:var(--serif);font-size:clamp(2rem,4vw,2.75rem);color:var(--accent-h);line-height:1}
.result-label{font-size:0.78rem;color:var(--text-3);margin-top:0.35rem;max-width:14ch}
.case-study-results{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:2rem;grid-column:1/-1}
.case-study-results .result-highlight{background:var(--surface)}

/* === BACK LINK === */
.back-link{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-3);margin-bottom:2rem;transition:color 0.2s}
.back-link:hover{color:var(--accent-h)}
.back-link::before{content:'\2190'}

/* === TECH STACK GRID === */
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2rem}
.tech-group{padding:1.25rem;background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius);transition:border-color 0.3s}
.tech-group:hover{border-color:var(--accent)}
.tech-group-label{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem}
.tech-tags{display:flex;flex-wrap:wrap;gap:0.4rem}
.tech-tag{font-family:var(--mono);font-size:0.7rem;padding:0.3rem 0.65rem;background:var(--accent-dim);color:var(--text-2);border-radius:99px;border:1px solid transparent;transition:border-color 0.2s,color 0.2s}
.tech-tag:hover{border-color:var(--accent);color:var(--accent-h)}
@media(min-width:768px){.tech-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:639px){.tech-grid{grid-template-columns:1fr}.tech-group{padding:1rem}}

/* === WORKSHOP AGENDA === */
.agenda{max-width:600px;margin:2rem auto 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.agenda-item{display:flex;align-items:center;gap:1rem;padding:0.85rem 1.25rem;border-bottom:1px solid var(--border);transition:background 0.2s}
.agenda-item:last-child{border-bottom:none}
.agenda-item:hover{background:var(--accent-dim)}
.agenda-time{font-family:var(--mono);font-size:0.72rem;color:var(--accent);min-width:5.5rem;flex-shrink:0}
.agenda-desc{font-size:0.92rem;color:var(--text);flex:1}
.agenda-tag{font-family:var(--mono);font-size:0.65rem;color:var(--text-3);padding:0.15rem 0.5rem;border:1px solid var(--border);border-radius:99px;flex-shrink:0}
.agenda-break{background:var(--surface)}
.agenda-break .agenda-desc{color:var(--text-3);font-style:italic}
@media(max-width:639px){
  .agenda-item{padding:0.75rem 1rem;gap:0.75rem}
  .agenda-time{min-width:4.5rem;font-size:0.68rem}
  .agenda-desc{font-size:0.88rem}
  .agenda-tag{display:none}
}

/* === CAUTIONARY CARD (full-width) === */
.cautionary-card{background:rgba(212,85,85,0.04)}
.cautionary-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:639px){.cautionary-inner{grid-template-columns:1fr;gap:1rem}}

/* === RATE COMPARISON === */
.rate-compare{max-width:640px;margin:0 auto;display:grid;gap:0.75rem}
.rate-row{display:grid;grid-template-columns:140px 1fr auto;gap:1rem;align-items:center}
.rate-provider{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-3);text-align:right}
.rate-bar{height:6px;background:var(--border);border-radius:3px;transition:width 0.8s var(--ease)}
.rate-row-highlight .rate-bar{background:linear-gradient(90deg,var(--accent),var(--accent-h));box-shadow:0 0 12px rgba(155,61,181,0.3)}
.rate-row-highlight .rate-provider{color:var(--accent-h);font-weight:500}
.rate-row-highlight .rate-value{color:var(--text);font-weight:500}
.rate-value{font-family:var(--mono);font-size:0.72rem;color:var(--text-3);white-space:nowrap}
@media(max-width:639px){
  .rate-row{grid-template-columns:100px 1fr auto;gap:0.5rem}
  .rate-provider{font-size:0.65rem}.rate-value{font-size:0.65rem}
}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .split-img img,.split-media img{filter:none}
}