/* ============================================================
   UNFOLDING VALUES — V7 ELEVATION LAYER (shared, sitewide)
   Loads AFTER uv.css. Adds top-1% components used across
   homepage, about, service, and case-study templates.
   ============================================================ */

/* ---------- SCROLL-NARRATIVE REVEAL (shared) ---------- */
:root{--uvr-noop:0;}
.uvr{opacity:0;transform:translateY(22px);animation:uvrIn .85s cubic-bezier(.2,.7,.3,1) .12s both;}
@keyframes uvrIn{to{opacity:1;transform:none;}}
.uvr.in{opacity:1;transform:none;animation:none;}
.uvr-1{transition-delay:.05s}.uvr-2{transition-delay:.14s}.uvr-3{transition-delay:.23s}.uvr-4{transition-delay:.32s}.uvr-5{transition-delay:.41s}.uvr-6{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){ .uvr{opacity:1;transform:none;animation:none;} }

/* ---------- MAGNETIC CTA (JS-assisted) ---------- */
.mag{will-change:transform;transition:transform .25s cubic-bezier(.2,.7,.3,1);}

/* ---------- STANDARDS MARQUEE ---------- */
.uv-marquee{ position:relative; overflow:hidden; border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); background:#fff;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.uv-marquee .track{ display:flex; gap:42px; width:max-content; padding:18px 0; animation:uvscroll 38s linear infinite; }
.uv-marquee:hover .track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .uv-marquee .track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; gap:24px; } }
@keyframes uvscroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.uv-marquee .mi{ font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--ink-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:42px; }
.uv-marquee .mi::after{ content:"•"; color:var(--gold); }

/* ---------- SITUATIONS WE HANDLE ---------- */
.sit-grid{ display:grid; grid-template-columns:1fr; gap:1px; margin-top:var(--sp-6); background:var(--gray-200); border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; }
@media (min-width:640px){ .sit-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .sit-grid{ grid-template-columns:repeat(3,1fr); } }
.sit{ background:#fff; padding:24px 24px; transition:background var(--t-base); position:relative; }
.sit:hover{ background:var(--cream); }
.sit .q{ font-family:var(--font-display); font-style:italic; font-size:18px; color:var(--navy); line-height:1.4; }
.sit .a{ font-size:14px; color:var(--gray-700); line-height:1.55; margin-top:10px; }
.sit .a strong{ color:var(--ink); font-weight:600; }

/* ---------- ENGAGEMENT TIMELINE (horizontal, draws on scroll) ---------- */
.etl{ position:relative; margin-top:var(--sp-6); }
.etl-line{ position:absolute; left:0; right:0; top:21px; height:2px; background:var(--gray-200); }
.etl-line::after{ content:""; position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg,var(--navy),var(--gold)); animation:etlDraw 1.6s cubic-bezier(.3,.7,.2,1) .3s forwards; }
@keyframes etlDraw{to{width:100%;}}
@media (prefers-reduced-motion:reduce){ .etl-line::after{width:100%;animation:none;} }
.etl.in .etl-line::after{ width:100%; }
.etl-steps{ position:relative; display:grid; grid-template-columns:1fr; gap:26px; }
@media (min-width:760px){ .etl-steps{ grid-template-columns:repeat(4,1fr); gap:20px; } }
.etl-step .dot{ width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;color:var(--navy);font-size:16px;
  position:relative;z-index:1;transition:border-color .5s ease,background .5s ease,color .5s ease; }
.etl.in .etl-step .dot{ border-color:var(--gold); }
.etl-step .wk{ font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-dark);margin:16px 0 6px; }
.etl-step h4{ font-size:16px; color:var(--ink); margin-bottom:6px; }
.etl-step p{ font-size:13.5px; color:var(--gray-700); line-height:1.55; }
.section-dark .etl-line{ background:rgba(255,255,255,.15); }
.section-dark .etl-step .dot{ background:var(--ink); border-color:rgba(255,255,255,.25); color:#fff; }
.section-dark .etl-step h4{ color:#fff; } .section-dark .etl-step p{ color:rgba(255,255,255,.78); }
.section-dark .etl-step .wk{ color:var(--gold-light); }

/* ---------- CONTEXT TESTIMONIAL ---------- */
.tq-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:var(--sp-6); }
@media (min-width:820px){ .tq-grid{ grid-template-columns:repeat(2,1fr); } }
.tq{ background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:30px 30px; position:relative; }
.tq::before{ content:"\201C"; position:absolute; top:6px; left:20px; font-family:Georgia,serif; font-size:64px; color:var(--gold); opacity:.5; line-height:1; }
.tq p{ font-size:17px; line-height:1.6; color:var(--ink-soft); font-style:italic; position:relative; padding-top:14px; }
.tq .src{ margin-top:18px; font-size:13px; font-weight:700; color:var(--ink); font-style:normal; }
.tq .src span{ display:block; font-weight:400; color:var(--gray-500); margin-top:3px; }
.tq-note{ font-size:12.5px; color:var(--gray-500); margin-top:16px; }

/* ---------- EXCHANGE TAGS ---------- */
.exch{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }
.exch .lbl{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--gray-500); }
.exch .tag{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--navy); padding:7px 16px; border:1px solid var(--gray-200); border-radius:100px; background:#fff; }
.section-dark .exch .lbl{ color:rgba(255,255,255,.6); }
.section-dark .exch .tag{ color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }

/* ---------- "SHOW THE WORK" DATA-ART ---------- */
.artframe{ background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:26px 28px; box-shadow:var(--shadow-md); }
.artframe .cap{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--gray-500); margin-bottom:16px; }
.artframe svg{ width:100%; height:auto; display:block; }
.spark-line{ stroke:url(#uvline); stroke-width:2.5; fill:none; stroke-dasharray:1; stroke-dashoffset:1; }
.in .spark-line{ animation:drawLine 2s cubic-bezier(.3,.7,.2,1) .2s forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ .spark-line{ stroke-dashoffset:0; } }

/* ---------- SECTION INTRO RULE ---------- */
.sec-rule{ display:flex; align-items:center; gap:14px; }
.sec-rule::after{ content:""; flex:1; height:1px; background:var(--gray-200); }
.section-dark .sec-rule::after{ background:rgba(255,255,255,.16); }


/* ---------- HERO PHOENIX CLIMB-OUT VISUAL ---------- */
.phx-apex{ display:flex; align-items:center; gap:14px; padding:4px 0 16px; border-bottom:1px solid var(--gray-100); margin-bottom:14px; }
.phx-mark{ width:46px; height:auto; display:block; filter:drop-shadow(0 6px 16px rgba(184,149,79,.45)); }
@media (prefers-reduced-motion:no-preference){ .phx-mark{ animation:floatY 5.5s ease-in-out infinite; } }
.phx-state{ font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--ink); line-height:1; }
.phx-spark{ width:100%; height:52px; display:block; margin:2px 0 16px; }
.hp-card .spark-line{ stroke:url(#uvline); stroke-width:2.5; fill:none; stroke-dasharray:1; stroke-dashoffset:1; }
.hp-card.in-view .spark-line{ animation:drawLine 1.8s cubic-bezier(.3,.7,.2,1) .3s forwards; }
@media (prefers-reduced-motion:reduce){ .hp-card .spark-line{ stroke-dashoffset:0; } }


/* ---------- HERO: PHOENIX FROM THE ASHES (cinematic) ---------- */
.phoenix-scene{ position:relative; width:min(460px,100%); aspect-ratio:1/1.06; border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 26%, #20335A 0%, #14253F 42%, #0A1326 100%);
  box-shadow:0 30px 70px rgba(8,15,30,.45), inset 0 0 0 1px rgba(201,169,106,.18); }
.ps-glow{ position:absolute; left:50%; top:30%; width:62%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(201,169,106,.40), rgba(201,169,106,.06) 55%, transparent 70%);
  filter:blur(2px); animation:psGlow 5s ease-in-out infinite; }
@keyframes psGlow{ 0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(1);} 50%{opacity:.95; transform:translate(-50%,-50%) scale(1.14);} }
.ps-rays{ position:absolute; left:50%; top:30%; width:130%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, transparent 0 8deg, rgba(201,169,106,.05) 8deg 10deg, transparent 10deg 20deg, rgba(201,169,106,.04) 20deg 22deg, transparent 22deg 40deg);
  mix-blend-mode:screen; animation:psSpin 60s linear infinite; opacity:.6; }
@keyframes psSpin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }
.ps-bird{ position:absolute; left:50%; top:31%; width:48%; height:auto; transform:translate(-50%,-50%); z-index:3;
  filter:drop-shadow(0 0 26px rgba(201,169,106,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.35));
  animation:psBird 6s ease-in-out infinite; }
@keyframes psBird{ 0%,100%{ transform:translate(-50%,-50%) translateY(0) scale(1);} 50%{ transform:translate(-50%,-50%) translateY(-16px) scale(1.03);} }
.ps-embers{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.ps-embers i{ position:absolute; bottom:16%; width:var(--sz,5px); height:var(--sz,5px); border-radius:50%;
  background:radial-gradient(circle, #F4D08A 0%, #C9A96A 55%, rgba(184,149,79,0) 100%);
  box-shadow:0 0 8px rgba(201,169,106,.8); opacity:0; animation:psEmber var(--dur,5.5s) ease-in infinite; }
@keyframes psEmber{ 0%{ transform:translate(0,0) scale(.6); opacity:0; } 12%{opacity:1;} 70%{opacity:.9;} 100%{ transform:translate(var(--x,0), -300px) scale(.2); opacity:0; } }
.ps-ash{ position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg, transparent, rgba(184,149,79,.12) 55%, rgba(120,70,30,.10) 80%, transparent); }
.ps-ash::after{ content:""; position:absolute; left:14%; right:14%; bottom:15%; height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent, #E0B564, #C9A96A, transparent); filter:blur(1.5px); opacity:.8; animation:psGlow 4s ease-in-out infinite; }
.ps-cap{ position:absolute; left:0; right:0; bottom:18px; text-align:center; padding:0 26px; z-index:4;
  font-family:var(--font-display); font-style:italic; font-size:14px; color:rgba(250,248,243,.82); }
@media (prefers-reduced-motion:reduce){
  .ps-glow,.ps-rays,.ps-bird,.ps-embers i,.ps-ash::after{ animation:none !important; }
  .ps-embers i{ opacity:.7; }
}


/* ---------- HERO BACKGROUND MOTION (subtle gold embers) ---------- */
.hp-hero{ position:relative; }
.hp-hero-grid{ z-index:0; }
.hero-fx{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hp-hero .container{ position:relative; z-index:1; }