/* COMPONENTS.CSS — visual components. No hardcoded values. */

/* ticker */
.ticker { overflow:hidden; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:var(--ticker-pad) 0; background:var(--bg2) }
.ticker-belt { display:flex; width:max-content; animation:belt var(--ticker-spd) linear infinite }
.ticker-belt:hover { animation-play-state:paused }
.ticker-item { font-family:var(--f-ui); font-size:var(--sz-ticker); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ticker-c); white-space:nowrap; padding:0 var(--ticker-gap) }
.ticker-item em { font-style:normal; color:var(--rule) }
@keyframes belt { to { transform:translateX(-50%) } }

/* product cards */
.card { display:flex; flex-direction:column; background:var(--bg3); border:1px solid var(--card-border); height:100%; position:relative; overflow:hidden }
.card-gold { background:var(--card-gold-bg); border-color:var(--card-gold-border) }
.card-blue { background:var(--bg4); border-color:var(--card-blue-border) }
.card-gold::before,.card-blue::before { content:''; position:absolute; top:14px; left:14px;  width:14px; height:14px; border:solid var(--rule); border-width:1px 0 0 1px; z-index:1 }
.card-gold::after, .card-blue::after  { content:''; position:absolute; top:14px; right:14px; width:14px; height:14px; border:solid var(--rule); border-width:1px 1px 0 0; z-index:1 }
.corner-bl { position:absolute; bottom:14px; left:14px;  width:14px; height:14px; border:solid var(--rule); border-width:0 0 1px 1px; pointer-events:none; z-index:1 }
.corner-br { position:absolute; bottom:14px; right:14px; width:14px; height:14px; border:solid var(--rule); border-width:0 1px 1px 0; pointer-events:none; z-index:1 }
.card-img { width:100%; height:var(--img-h); object-fit:cover; object-position:top; display:block; border-bottom:1px solid var(--rule); flex-shrink:0 }
.card-img-none { width:100%; height:var(--img-h); background:var(--bg4); border-bottom:1px solid var(--card-border); flex-shrink:0; position:relative; overflow:hidden }
.card-img-none::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, transparent 40%, rgba(200,164,78,.03) 60%, transparent 80%) }
.card-in { padding:26px 22px 30px; display:flex; flex-direction:column; flex:1 }
.card-tier  { font-family:var(--f-ui); font-size:var(--sz-xs); letter-spacing:var(--ls-nav); text-transform:uppercase; color:var(--card-tier); margin-bottom:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.card-badge { display:inline-block; margin-bottom:14px; padding:4px 10px; border:1px solid var(--rule); color:var(--accent); font-family:var(--f-ui); font-size:var(--sz-xs); font-weight:600; letter-spacing:var(--ls-nav); text-transform:uppercase }
.card-name  { font-family:var(--f-head); font-size:var(--sz-card); font-weight:700; color:var(--ink); letter-spacing:var(--ls-head); line-height:1; display:block; margin-bottom:8px }
.card-ph    { font-family:var(--f-mono); font-size:var(--sz-xs); letter-spacing:var(--ls-mono); color:var(--ink4); display:block; margin-bottom:18px }
.card-desc  { font-family:var(--f-body); font-size:var(--sz-sm); font-weight:300; font-style:italic; color:var(--ink3); line-height:1.6; margin-bottom:20px }

/* feature rows */
.feats { flex:1; display:flex; flex-direction:column; margin-bottom:18px; border-top:1px solid var(--feat-sep) }
.feat  { font-family:var(--f-mono); font-size:var(--sz-feat); letter-spacing:var(--ls-feat); text-transform:uppercase; padding:9px 0 9px 24px; position:relative; border-bottom:1px solid var(--feat-sep); line-height:1.3 }
.feat:last-child { border-bottom:none }
.feat-y { color:var(--data) }
.feat-y::before { content:''; position:absolute; left:2px; top:15px; width:10px; height:6px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg) }
.feat-n { color:var(--feat-off) }
.feat-n::before { content:'\2014'; position:absolute; left:1px; top:9px; font-size:13px; color:var(--feat-off) }
.feat-hi { color:var(--accent); background:var(--accent-wash); border-bottom-color:var(--rule) }
.feat-hi::before { content:''; position:absolute; left:2px; top:15px; width:10px; height:6px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg) }

/* aether custom grid */
.ae-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; flex:1; margin-bottom:16px }
.ae-col  { display:flex; flex-direction:column }
.ae-cat  { font-family:var(--f-ui); font-size:var(--sz-xs); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--accent); margin:12px 0 6px }
.ae-cat:first-child { margin-top:0 }
.ae-item { font-family:var(--f-mono); font-size:var(--sz-xs); letter-spacing:var(--ls-mono); color:var(--ink3); padding-left:12px; position:relative; line-height:1.5; margin-bottom:3px }
.ae-item::before { content:'\00b7'; position:absolute; left:0; color:var(--rule) }
.ae-tagline { font-family:var(--f-body); font-size:var(--sz-sm); font-style:italic; color:var(--rule); margin-bottom:16px }

/* card footer */
.card-foot { margin-top:auto }
.card-price { font-family:var(--f-mono); font-size:var(--sz-price); color:var(--data); letter-spacing:.08em; margin-bottom:3px }
.card-pnote { font-family:var(--f-ui); font-size:var(--sz-xs); letter-spacing:var(--ls-pnote); text-transform:uppercase; color:var(--rule); margin-bottom:4px }
.card-daily { font-family:var(--f-mono); font-size:var(--sz-xs); letter-spacing:var(--ls-mono); color:var(--accent-dim); margin-bottom:14px }
.card-ship  { font-family:var(--f-ui); font-size:var(--sz-xs); letter-spacing:var(--ls-nav); text-transform:uppercase; color:var(--ink4); margin-bottom:16px }
.card-btns  { display:flex; flex-direction:column; gap:9px }

/* service cards */
.svc-card { display:flex; flex-direction:column; gap:14px; background:var(--bg3); border:1px solid var(--rule); padding:28px 24px 32px }
.svc-card-b { background:var(--card-gold-bg); border-color:var(--card-gold-border) }
.svc-h3 { font-family:var(--f-head); font-size:var(--sz-svc); font-weight:400; color:var(--ink); line-height:1.2; letter-spacing:var(--ls-head) }
.svc-feats { display:flex; flex-direction:column; flex:1; border-top:1px solid var(--feat-sep) }
.svc-feat { font-family:var(--f-mono); font-size:var(--sz-feat); letter-spacing:var(--ls-feat); text-transform:uppercase; color:var(--data); padding:9px 0 9px 22px; position:relative; border-bottom:1px solid var(--feat-sep); line-height:1.3 }
.svc-feat:last-child { border-bottom:none }
.svc-feat::before { content:''; position:absolute; left:1px; top:13px; width:10px; height:6px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg) }
.svc-feat-no { color:var(--feat-off); text-decoration:line-through }
.svc-feat-no::before { content:'\2014'; border:none; transform:none; color:var(--feat-off); top:9px; left:0; font-size:13px }

/* stages */
.stage { background:var(--bg3); border:1px solid var(--card-border); padding:28px 18px }
.stage-n  { font-family:var(--f-mono); font-size:var(--sz-xs); letter-spacing:var(--ls-wide); color:var(--accent); margin-bottom:14px; display:block }
.stage-nm { font-family:var(--f-ui); font-size:var(--sz-xs); letter-spacing:var(--ls-nav); text-transform:uppercase; color:var(--card-tier); margin-bottom:10px }

/* pillars */
.pillar { padding:var(--pillar-pad); border:1px solid var(--card-border) }
.pillar-glyph { font-family:var(--f-mono); font-size:var(--sz-xs); letter-spacing:var(--ls-wide); color:var(--accent); margin-bottom:14px }
.pillar-title { font-family:var(--f-pillar); font-size:var(--sz-pillar); font-weight:400; letter-spacing:var(--ls-head); color:var(--ink); margin-bottom:12px; line-height:1.3 }

/* founder */
.founder-quote { font-family:var(--f-quote); font-size:var(--sz-quote); font-weight:400; color:var(--ink); line-height:1.45; letter-spacing:var(--ls-head); position:relative; padding:0 20px; border-left:2px solid var(--accent); text-align:left }
.founder-who { margin-top:20px; text-align:left; padding-left:20px }
.founder-name { font-family:var(--f-ui); font-size:var(--sz-nav); font-weight:600; letter-spacing:var(--ls-nav); text-transform:uppercase; color:var(--ink); display:block; margin-bottom:4px }

/* contact fields */
.cfield { width:100%; background:var(--bg3); border:1px solid var(--card-border); color:var(--ink); font-family:var(--f-body); font-size:var(--sz-sm); padding:14px 18px; outline:none; transition:border-color .18s }
.cfield:focus { border-color:var(--rule) }
.cfield::placeholder { color:var(--ink4); font-style:italic }
textarea.cfield { resize:vertical }

/* reveal animation */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease }
.reveal.visible { opacity:1; transform:translateY(0) }

/* ── Cursor Glow Effect (#5) ── */
.card::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .4s; transform-origin:left; z-index:2 }
.card:hover::before { transform:scaleX(1) }
.card::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(200,164,78,.05),transparent 60%); pointer-events:none; opacity:0; transition:opacity .3s; z-index:1 }
.card:hover::after { opacity:1 }