/* Home page motion styles. Everything is readable without JavaScript;
   home.js adds the "motion" class and animates from there. */
.home section { border-bottom: 0; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 1. Opening */
.opening { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; }
.halo { position: absolute; width: 90vmax; height: 90vmax; left: 50%; top: 38%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(214,187,133,.16) 0%, rgba(184,149,90,.06) 30%, rgba(21,18,15,0) 62%); pointer-events: none; }
.emblem { position: absolute; right: max(4vw, 24px); top: 50%; width: min(34vw, 380px); transform: translateY(-50%); opacity: .9; }
.emblem .draw { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.emblem .draw.thin { stroke-width: .7; stroke: rgba(214,187,133,.55); }
.emblem-text { font: 400 42px var(--serif); fill: var(--gold-2); letter-spacing: 6px; }
.opening-copy { position: relative; z-index: 2; width: 100%; }
.headline { font: 300 clamp(46px, 8.4vw, 112px)/1 var(--serif); max-width: 12ch; margin: 0 0 30px; }
.headline .line { display: block; overflow: hidden; padding-bottom: .08em; }
.headline .line > span { display: inline-block; }
.headline em { font-weight: 300; color: var(--gold-2); }
.scroll-cue { display: inline-flex; align-items: center; gap: 14px; margin-top: 46px; color: var(--ivory-2); text-decoration: none; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ivory); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { to { top: 110%; } }

/* 2. Portfolio */
.portfolio { padding: 110px 0 120px; overflow: hidden; }
.portfolio-head h2, .contact-sec h2 { font: 300 clamp(36px, 5.4vw, 68px)/1.05 var(--serif); margin: 0 0 50px; }
.portfolio-head h2 em, .contact-sec h2 em { color: var(--gold-2); }
.track-wrap { padding-left: max(24px, calc((100vw - 1080px) / 2 + 24px)); }
.track { display: flex; gap: 24px; width: max-content; padding-right: 24px; }
.panel { position: relative; width: min(78vw, 420px); min-height: 440px; padding: 38px 34px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(214,187,133,.07), rgba(21,18,15,0) 55%), var(--ink-2); display: flex; flex-direction: column; overflow: hidden; }
.panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 0%, rgba(214,187,133,.18), transparent 45%); opacity: 0; transition: opacity .5s; }
.panel:hover::before { opacity: 1; }
.panel .num { font: 300 76px/1 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(214,187,133,.5); margin-bottom: auto; }
.panel .kind { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-top: 60px; }
.panel h3 { font: 400 30px/1.15 var(--serif); margin: 12px 0 14px; }
.panel p { margin: 0; color: var(--ivory-2); font-size: 15.5px; }

/* 3. Approach */
.approach-pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 80px 0; }
.approach .eyebrow { width: 100%; }
.words { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 24px; width: 100%; }
.word { padding: 26px 0; border-top: 1px solid var(--line); }
.word .big { font: 300 clamp(64px, 13vw, 168px)/.95 var(--serif); display: inline-block; }
.word .small { font: italic 300 clamp(24px, 3.4vw, 44px)/1 var(--serif); color: var(--gold-2); margin-left: 18px; }
.word p { color: var(--ivory-2); max-width: 46ch; margin: 14px 0 0; }
.progress { display: none; }

/* 4. Contact */
.contact-sec { padding: 120px 0 100px; }

/* Motion layout (only when JavaScript runs and motion is allowed) */
.motion .words { height: 62vh; }
.motion .word { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); border-top: 0; padding: 0; }
.motion .progress { display: block; position: absolute; left: 50%; bottom: 40px; width: 160px; height: 1px; margin-left: -80px; background: var(--line); }
.motion .progress i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--gold); }

@media (max-width: 760px) {
  .emblem { top: 120px; right: 50%; transform: translateX(50%); width: 150px; opacity: .55; }
  .opening { align-items: flex-end; padding-top: 300px; }
  .panel { min-height: 380px; padding: 30px 26px; }
  .panel .num { font-size: 60px; }
  .word .small { display: block; margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation: none; } }

/* ---------- Alive layer: floating symbols, light, hover ---------- */
.dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.glyphs { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.glyphs .g { position: absolute; display: block; opacity: .32; }
.g.diamond { width: 22px; height: 22px; border: 1px solid var(--gold); transform: rotate(45deg); }
.g.diamond.sm { width: 12px; height: 12px; }
.g.ring { width: 46px; height: 46px; border: 1px solid rgba(214,187,133,.6); border-radius: 50%; }
.g.ring.sm { width: 22px; height: 22px; }
.g.plus { width: 18px; height: 18px; }
.g.plus::before, .g.plus::after { content: ''; position: absolute; background: var(--gold-2); }
.g.plus::before { left: 50%; top: 0; width: 1px; height: 100%; }
.g.plus::after { top: 50%; left: 0; height: 1px; width: 100%; }
.g.plus.sm { width: 10px; height: 10px; }
.g.line { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
main, footer, header.top { position: relative; z-index: 2; }
header.top { z-index: 10; }
.spot { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(214,187,133,.13), rgba(214,187,133,.04) 40%, transparent 70%); opacity: 0; transition: opacity .6s; will-change: transform; }
.has-pointer .spot { opacity: 1; }

/* Gold shimmer on key words */
.shimmer { background: linear-gradient(100deg, var(--gold) 0%, var(--gold-2) 30%, #fff6dc 45%, var(--gold-2) 60%, var(--gold) 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 5.5s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }

/* Panels: tilt, cursor light, tracing border, glowing number */
.panel { transform-style: preserve-3d; transition: transform .25s ease-out, border-color .4s, box-shadow .5s; --mx: 50%; --my: 0%; }
.panel .glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(246,231,196,.16), transparent 45%); }
.panel::after { content: ''; position: absolute; inset: -1px; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--gold-2) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: trace 4s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes trace { to { --ang: 360deg; } }
.panel:hover, .panel.lit { border-color: rgba(214,187,133,.55); box-shadow: 0 30px 80px -30px rgba(214,187,133,.28); }
.panel:hover .glare, .panel.lit .glare, .panel:hover::after, .panel.lit::after { opacity: 1; }
.panel .num { transition: color .5s, -webkit-text-stroke-color .5s, text-shadow .5s; }
.panel:hover .num, .panel.lit .num { color: rgba(214,187,133,.18); -webkit-text-stroke-color: var(--gold-2); text-shadow: 0 0 28px rgba(214,187,133,.45); }
.panel h3 { transition: color .4s; }
.panel:hover h3, .panel.lit h3 { color: #fff4dd; }

/* Approach words light up when they are on stage */
.word .big { background: linear-gradient(100deg, var(--ivory) 0%, var(--ivory) 40%, var(--gold-2) 50%, var(--ivory) 60%, var(--ivory) 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; background-position: 100% 0; transition: background-position 1.6s ease; }
.word.on .big { background-position: 0% 0; }

/* Contact cards and links */
.contact .card { padding: 18px 20px; border: 1px solid transparent; transition: border-color .4s, background .4s, transform .4s; }
.contact .card:hover { border-color: var(--line); background: rgba(214,187,133,.05); transform: translateY(-3px); }
.contact a { transition: color .3s, border-color .3s, text-shadow .3s; }
.contact a:hover { color: var(--gold-2); border-color: var(--gold-2); text-shadow: 0 0 18px rgba(214,187,133,.45); }
nav a { position: relative; }
nav a::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%; background: var(--gold-2); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
nav a:hover::after { transform: scaleX(1); }
.mark .mono { transition: box-shadow .4s, background .4s; }
.mark:hover .mono { box-shadow: 0 0 22px rgba(214,187,133,.45); background: rgba(214,187,133,.08); }
.magnet { transition: transform .25s ease-out; will-change: transform; }
.emblem .draw { filter: drop-shadow(0 0 6px rgba(214,187,133,.35)); }
.emblem-text { animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(246,231,196,.55)); } }

@media (prefers-reduced-motion: reduce) {
  .shimmer, .panel::after, .emblem-text { animation: none; }
  .dust { display: none; }
}

/* Panel links */
.panel-cta { position: relative; z-index: 3; align-self: flex-start; margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid rgba(214,187,133,.55); color: var(--gold-2); text-decoration: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; transition: background .35s, color .35s, box-shadow .35s, border-color .35s; }
.panel-cta span { transition: transform .35s; }
.panel-cta:hover { background: var(--gold-2); color: var(--ink); border-color: var(--gold-2); box-shadow: 0 0 26px rgba(214,187,133,.45); }
.panel-cta:hover span { transform: translateX(4px); }
.panel.lit .panel-cta { border-color: var(--gold-2); }