/* FORGE Studio · heat details
   Details that run through every page, layered over the existing site. One idea: gold heat arrives, then settles.
   1. main headings are revealed by a pass of gold heat, and the same pass crosses them on hover
   2. major buttons carry a gold highlight that travels round their edge, with a flash on click
   Nothing here changes layout, type or colour at rest. */

/* ---------- Headings and heat ---------- */
/* reveal: the line starts as dark metal, a warm edge crosses it, and it settles to its own colour */
.fx-heatline, .fx-heatpass { --p: -25%; --fx-base: var(--bone); color: transparent; -webkit-background-clip: text; background-clip: text; }
.fx-heatline.fx-gold, .fx-heatpass.fx-gold { --fx-base: var(--gold); }
.fx-heatline {
  background-image: linear-gradient(100deg,
    var(--fx-base) 0, var(--fx-base) calc(var(--p) - 16%),
    #FFE7A6 calc(var(--p) - 5%), #FFC247 var(--p), #FF8A00 calc(var(--p) + 6%),
    rgba(244, 239, 230, .1) calc(var(--p) + 17%), rgba(244, 239, 230, .1) 100%);
}
/* hover: the same band of heat crosses a heading that is already lit */
.fx-heatpass {
  background-image: linear-gradient(100deg,
    var(--fx-base) 0, var(--fx-base) calc(var(--p) - 15%),
    #FFE7A6 calc(var(--p) - 6%), #FFC247 var(--p), #FF8A00 calc(var(--p) + 6%),
    var(--fx-base) calc(var(--p) + 15%), var(--fx-base) 100%);
}
.fx-heatline .gold, .fx-heatline.fx-gold .gold, .fx-heatpass.fx-gold .gold { color: transparent; }

/* ---------- Major buttons ---------- */
@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fx-edge { position: relative; }
.fx-edge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--fx-a), transparent 0 58%, #FFC247 76%, #FFF4D6 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-edge:hover::after, .fx-edge:focus-visible::after { opacity: 1; animation: fx-orbit 2.6s linear infinite; }
.fx-edge.fx-flash { animation: fx-flash .6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fx-orbit { to { --fx-a: 360deg; } }
@keyframes fx-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 231, 166, .85); filter: brightness(1.45); }
  100% { box-shadow: 0 0 0 18px rgba(255, 231, 166, 0); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-edge:hover::after { animation: none; }
  .fx-edge.fx-flash { animation: none; }
}

/* ---------- Small details, all in the same language: gold heat arrives, then settles ---------- */

/* section numbers and resume dates catch light as they arrive */
.fx-ignite { animation: fx-ignite 1.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fx-ignite {
  0% { color: var(--gold); text-shadow: 0 0 0 rgba(255, 160, 40, 0); }
  22% { color: #FFF4D6; text-shadow: 0 0 16px rgba(255, 170, 50, .95), 0 0 34px rgba(255, 138, 0, .45); }
  100% { color: var(--gold); text-shadow: 0 0 0 rgba(255, 160, 40, 0); }
}

/* a counter flares at the moment it lands on its number */
.fx-flare { animation: fx-flare 1.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fx-flare {
  0% { text-shadow: 0 0 0 rgba(255, 180, 70, 0); }
  20% { text-shadow: 0 0 26px rgba(255, 190, 90, .7), 0 0 60px rgba(255, 138, 0, .35); }
  100% { text-shadow: 0 0 0 rgba(255, 180, 70, 0); }
}

/* text links: the underline draws in as a line of heat */
@media (hover: hover) and (pointer: fine) {
  .link-u::after { transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1), opacity .8s cubic-bezier(0.22, 1, 0.36, 1); }
  .link-u:hover::after { height: 1.5px; background: linear-gradient(90deg, #FFE7A6, #FFC247 40%, #FF8A00); }

  /* tags and chips warm at the edge */
  .tags li, .chips li, .chip span { transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1), color .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1), background-color .3s; }
  .tags li:hover, .chips li:hover, .chip:hover input:not(:checked) + span { border-color: rgba(255, 194, 71, .6); color: var(--bone); box-shadow: 0 0 16px rgba(255, 150, 40, .16), inset 0 0 10px rgba(255, 150, 40, .07); }
}

/* divider lines draw themselves, led by a gold tip (drawn in the border itself, so no extra elements) */
.fx-ruled {
  --fx-w: 0%; --fx-tip: 1;
  border-image: linear-gradient(90deg,
    var(--line) 0, var(--line) calc(var(--fx-w) - 110px),
    color-mix(in srgb, #FFC247 calc(var(--fx-tip) * 100%), var(--line)) calc(var(--fx-w) - 22px),
    color-mix(in srgb, #FFF4D6 calc(var(--fx-tip) * 100%), var(--line)) var(--fx-w),
    transparent var(--fx-w)) 1;
}
/* a glint runs once round the edge of an image as it appears */
.fx-ring {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--fx-a), transparent 0 64%, #FFC247 80%, #FFF4D6 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fx-orbit 2.4s cubic-bezier(0.65, 0, 0.35, 1) 1 both, fx-ring 2.4s linear 1 both;
}
@keyframes fx-ring { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fx-ignite, .fx-flare { animation: none; }
  .fx-ring { display: none; }
}

/* hidden strike: the mark in the corner takes the blow */
.fx-struck { animation: fx-struck .7s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: 50% 60%; }
@keyframes fx-struck {
  0% { transform: scale(1); filter: brightness(1); }
  12% { transform: scale(.86) rotate(-4deg); filter: brightness(2.4) drop-shadow(0 0 14px rgba(255, 190, 90, .9)); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ---------- Award seals, struck into the page ---------- */
.fx-seal {
  position: absolute; z-index: 3; top: 16px; right: 16px; width: clamp(88px, 9vw, 124px); aspect-ratio: 1; pointer-events: none;
  rotate: -9deg; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6));
}
.cs-hero-visual > .fx-seal { top: -22px; right: -18px; width: clamp(96px, 10vw, 138px); }
@media (max-width: 720px) { .cs-hero-visual > .fx-seal { right: 10px; } }
.fx-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-seal .seal-disc { fill: #14120F; stroke: #FFC247; stroke-width: 2.5; }
.fx-seal .seal-ring { fill: none; stroke: rgba(255, 194, 71, .45); stroke-width: 1; }
.fx-seal .seal-lip { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.5; }
.fx-seal .seal-text { fill: #FFC247; font-family: var(--f); font-size: 14.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.fx-seal .seal-big { fill: var(--bone); font-family: var(--f); font-size: 58px; font-weight: 700; letter-spacing: -0.04em; text-anchor: middle; }
.fx-seal .seal-big tspan { font-size: 26px; fill: #FFC247; letter-spacing: 0; }
.fx-seal .seal-year { fill: #FFC247; font-family: var(--f); font-size: 15px; font-weight: 600; letter-spacing: .18em; text-anchor: middle; }
/* the blow: a flash on the metal and one ring of light leaving it */
.fx-seal.is-struck svg { animation: fx-seal-flash .7s cubic-bezier(0.22, 1, 0.36, 1); }
.fx-seal.is-struck::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #FFE7A6; animation: fx-seal-ring .8s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fx-seal-flash { 0% { filter: brightness(2.6); } 100% { filter: brightness(1); } }
@keyframes fx-seal-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- The scrollbar is a small ingot that cools as the page goes down ---------- */
html { --fx-heat: 1; }
html::-webkit-scrollbar { width: 11px; }
html::-webkit-scrollbar-track { background: #0A0908; }
html::-webkit-scrollbar-thumb {
  border-radius: 6px; border: 3px solid #0A0908;
  background: linear-gradient(180deg,
    color-mix(in srgb, #FFE7A6 calc(var(--fx-heat) * 100%), #5E5A54),
    color-mix(in srgb, #FFC247 calc(var(--fx-heat) * 100%), #4A4743) 45%,
    color-mix(in srgb, #FF8A00 calc(var(--fx-heat) * 100%), #36332F));
}
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: #FFC247 #0A0908; } }

@media (prefers-reduced-motion: reduce) {
  .fx-seal.is-struck svg, .fx-seal.is-struck::after { animation: none; }
}

/* ---------- One detail for each project page ---------- */

/* Joey: numbered findings, stamped onto each audit screenshot */
.fx-finding {
  position: absolute; z-index: 3; top: 12px; left: 12px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; rotate: -8deg; pointer-events: none;
  background: #14120F; border: 2px solid var(--gold); box-shadow: inset 0 0 0 3px #14120F, inset 0 0 0 4px rgba(255, 194, 71, .4), 0 6px 14px rgba(0, 0, 0, .55);
  color: var(--bone); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.fx-finding.is-struck { animation: fx-seal-flash .7s cubic-bezier(0.22, 1, 0.36, 1); }
.fx-finding.is-struck::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #FFE7A6; animation: fx-seal-ring .8s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Vijayism: the ON AIR lamp */
.fx-onair {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 8px 14px 8px 12px; border-radius: 8px;
  border: 1px solid var(--line-2); background: #100F0D; color: var(--steel-2);
  font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; width: fit-content;
  transition: color .3s, border-color .3s, box-shadow .6s, text-shadow .6s;
}
.fx-onair i { width: 9px; height: 9px; border-radius: 50%; background: var(--steel-2); transition: background-color .3s, box-shadow .6s; }
.fx-onair.is-on {
  color: #FFB25C; border-color: rgba(255, 138, 0, .55); text-shadow: 0 0 14px rgba(255, 138, 0, .75);
  box-shadow: 0 0 26px rgba(255, 110, 0, .22), inset 0 0 18px rgba(255, 110, 0, .12);
  animation: fx-onair-on 1.5s steps(1, end) both, fx-onair-hum 3.4s ease-in-out 1.5s infinite;
}
.fx-onair.is-on i { background: #FF8A00; box-shadow: 0 0 12px #FF8A00, 0 0 26px rgba(255, 110, 0, .7); }
@keyframes fx-onair-on { 0% { opacity: .25; } 8% { opacity: 1; } 14% { opacity: .3; } 22% { opacity: 1; } 30% { opacity: .5; } 38% { opacity: 1; } 100% { opacity: 1; } }
@keyframes fx-onair-hum { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.16); } }

/* Seylune: a slim browser window round the home page screenshot */
.fx-browser { position: relative; display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; background: #161513; border-bottom: 1px solid var(--line); }
.fx-dots { display: flex; gap: 6px; }
.fx-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--steel-2); }
.fx-url { flex: 1; max-width: 340px; height: 22px; padding: 0 12px; border-radius: 999px; background: #0A0908; border: 1px solid var(--line); display: flex; align-items: center; font-size: 11px; letter-spacing: .04em; color: var(--dim); overflow: hidden; white-space: nowrap; }
.fx-url b { font-weight: 500; }
.fx-url b::after { content: ''; display: inline-block; width: 1px; height: 11px; margin-left: 2px; background: var(--gold); vertical-align: -1px; animation: fx-caret 1s steps(1) infinite; }
.fx-load { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #FF8A00, #FFC247 60%, #FFF4D6); transform-origin: left; transform: scaleX(0); }
@keyframes fx-caret { 50% { opacity: 0; } }

/* Avengers: the number that sank the first layout */
.fx-count { display: inline-block; font-variant-numeric: tabular-nums; }

/* Rolex: day and date, the way the watch shows them */
.fx-daydate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.fx-dd-cap { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.fx-dd-day, .fx-dd-date {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px; overflow: hidden;
  background: #F4EFE6; color: #14120F; font-weight: 700; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 194, 71, .7), 0 0 0 4px #14120F, 0 0 0 5px rgba(255, 194, 71, .35);
}
.fx-dd-day { padding: 0 16px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; border-radius: 17px 17px 6px 6px; }
.fx-dd-date { width: 42px; font-size: 19px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-left: 6px; }
.fx-dd-date b { display: block; font-weight: 700; }
.fx-daydate.is-set .fx-dd-date { animation: fx-seal-flash .6s cubic-bezier(0.22, 1, 0.36, 1); }

/* FORGE identity: the mark drawn on its construction grid */
.fx-construct { margin-top: 12px; max-width: 420px; }
.fx-construct svg { display: block; width: 100%; height: auto; overflow: hidden; }
.fx-grid line { stroke: rgba(255, 194, 71, .38); stroke-width: 5; fill: none; }
.fx-trace { fill: none; stroke: #FFE7A6; stroke-width: 16; stroke-linejoin: round; filter: drop-shadow(0 0 22px rgba(255, 150, 40, .8)); }
.fx-construct-cap { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

@media (prefers-reduced-motion: reduce) {
  .fx-onair.is-on, .fx-url b::after, .fx-finding.is-struck, .fx-finding.is-struck::after { animation: none; }
}

/* Avengers: the cast, cut from 27 to 12 */
.fx-cut { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.fx-cut-n { font-size: clamp(56px, 6vw, 96px); font-weight: 600; letter-spacing: -0.05em; line-height: .9; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 1.2em; }
.fx-cut-cap { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--mute); }
.fx-cut-cap b { color: var(--bone); font-weight: 500; font-size: 16px; }

/* ---------- Chapter words: each section's name behind it, as a faint outline ---------- */
.fx-chapters { position: absolute; top: 0; left: 0; right: 0; height: 0; overflow-x: clip; overflow-y: visible; z-index: -1; pointer-events: none; }
.fx-chapter {
  position: absolute; right: -2vw; white-space: nowrap; user-select: none; will-change: transform;
  font-size: clamp(120px, 21vw, 400px); font-weight: 700; letter-spacing: -0.05em; line-height: .8;
}
.fx-chapter span { display: block; color: transparent; }
.fx-ch-base { -webkit-text-stroke: 1px rgba(244, 239, 230, .075); }
/* the same word in hot gold, shown only inside a band that travels along it */
.fx-ch-hot {
  --p: -25%;
  position: absolute; inset: 0; -webkit-text-stroke: 1.5px rgba(255, 194, 71, .6);
  -webkit-mask-image: linear-gradient(100deg, transparent calc(var(--p) - 16%), #000 calc(var(--p) - 3%), #000 calc(var(--p) + 3%), transparent calc(var(--p) + 16%));
  mask-image: linear-gradient(100deg, transparent calc(var(--p) - 16%), #000 calc(var(--p) - 3%), #000 calc(var(--p) + 3%), transparent calc(var(--p) + 16%));
  filter: drop-shadow(0 0 14px rgba(255, 150, 40, .35));
}
@media (max-width: 820px) { .fx-ch-base { -webkit-text-stroke-color: rgba(244, 239, 230, .055); } }
@media (prefers-reduced-motion: reduce) { .fx-ch-hot { display: none; } }