/* ========================================================================== 
   V13 — SUNARROW visual identity
   Light: warm baked-milk editorial space.
   Dark: deep-green cosmic space with a solar trajectory.
   ========================================================================== */

@property --snake-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root,
html[data-theme="light"] {
  --bg: #f3e7d3;
  --bg-deep: #e4d0b2;
  --surface: #fff8ea;
  --surface-2: #efe0c9;
  --surface-3: #d8ddca;
  --cream: #173328;
  --cream-soft: #2d493c;
  --beige: #74604b;
  --brown: #896445;
  --brown-dark: #5d432f;
  --green: #5f7d68;
  --green-bright: #2f6948;
  --orange: #d56d24;
  --orange-soft: #a94b18;
  --line: rgba(23, 51, 40, .14);
  --line-strong: rgba(23, 51, 40, .27);
  --muted: rgba(23, 51, 40, .75);
  --muted-2: rgba(23, 51, 40, .60);
  --panel: rgba(255, 248, 234, .88);
  --panel-soft: rgba(239, 224, 201, .78);
  --header-bg: rgba(246, 235, 217, .92);
  --nav-bg: rgba(249, 239, 223, .99);
  --dark-panel: #173c2a;
  --dark-panel-2: #24543a;
  --on-dark: #fff5df;
  --on-dark-muted: rgba(255, 245, 223, .76);
  --cosmic-image: url("assets/visuals/sunarrow-light.svg");
  --cosmic-opacity: .90;
  --cosmic-blend: multiply;
  --cinematic-panel: rgba(255, 248, 234, .78);
  --cinematic-panel-strong: rgba(255, 248, 234, .94);
  --cinematic-shadow: 0 34px 100px rgba(71, 55, 38, .15), 0 12px 32px rgba(79, 100, 77, .08);
  --glow-orange: rgba(213, 109, 36, .33);
  --glow-green: rgba(47, 105, 72, .23);
  --glow-ivory: rgba(255, 248, 229, .78);
  --frame-highlight: rgba(255, 255, 255, .62);
  --veil: rgba(244, 231, 210, .60);
  --sun-core: #efb653;
  --sun-hot: #ffe0a0;
  --arrow-glow: #e27a2f;
}

html[data-theme="dark"] {
  --bg: #06150e;
  --bg-deep: #020b07;
  --surface: #0d2619;
  --surface-2: #123321;
  --surface-3: #1a432c;
  --cream: #fff4dd;
  --cream-soft: #e8dcc6;
  --beige: #d7bd95;
  --brown: #aa7651;
  --brown-dark: #70482f;
  --green: #77a281;
  --green-bright: #a7cf96;
  --orange: #f18435;
  --orange-soft: #ffc078;
  --line: rgba(255, 244, 221, .15);
  --line-strong: rgba(255, 244, 221, .29);
  --muted: rgba(255, 244, 221, .76);
  --muted-2: rgba(255, 244, 221, .58);
  --panel: rgba(10, 31, 20, .84);
  --panel-soft: rgba(16, 48, 31, .77);
  --header-bg: rgba(4, 17, 10, .87);
  --nav-bg: rgba(3, 13, 8, .99);
  --dark-panel: #071c12;
  --dark-panel-2: #0f3321;
  --on-dark: #fff6e4;
  --on-dark-muted: rgba(255, 246, 228, .76);
  --cosmic-image: url("assets/visuals/sunarrow-dark.svg");
  --cosmic-opacity: .98;
  --cosmic-blend: screen;
  --cinematic-panel: rgba(5, 21, 13, .73);
  --cinematic-panel-strong: rgba(5, 20, 12, .92);
  --cinematic-shadow: 0 44px 132px rgba(0, 0, 0, .56), 0 0 72px rgba(241, 132, 53, .09);
  --glow-orange: rgba(241, 132, 53, .50);
  --glow-green: rgba(119, 162, 129, .30);
  --glow-ivory: rgba(255, 244, 221, .34);
  --frame-highlight: rgba(255, 244, 221, .22);
  --veil: rgba(2, 11, 7, .55);
  --sun-core: #f5ad48;
  --sun-hot: #ffe5a7;
  --arrow-glow: #ff9142;
}

html { background: var(--bg); }
body {
  color: var(--cream);
  background:
    radial-gradient(circle at 83% 3%, color-mix(in srgb, var(--sun-core) 16%, transparent), transparent 33rem),
    radial-gradient(circle at 7% 42%, color-mix(in srgb, var(--green) 13%, transparent), transparent 42rem),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg-deep) 65%, var(--bg)));
}

/* Scenery: large solar body and a trajectory, not a generic dotted background. */
.cosmic-image {
  inset: -5%;
  background-image: var(--cosmic-image);
  background-position: 55% top;
  background-size: cover;
  opacity: var(--cosmic-opacity);
  transform: scale(1.045);
  will-change: auto;
}
.cosmic-image::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--veil) 94%, transparent) 0%, color-mix(in srgb, var(--veil) 58%, transparent) 27%, transparent 58%, color-mix(in srgb, var(--veil) 20%, transparent) 100%),
    linear-gradient(180deg, transparent 0 68%, var(--bg) 100%);
}
html[data-theme="dark"] .cosmic-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 11, 7, .50) 0%, rgba(2, 11, 7, .18) 18%, transparent 39%),
    linear-gradient(90deg, rgba(2, 11, 7, .72) 0%, rgba(2, 11, 7, .42) 43%, transparent 76%, rgba(2, 11, 7, .06) 100%);
  pointer-events: none;
}
.page-grid { opacity: .055; background-size: 112px 112px; }
.page-noise { opacity: .015; }
.cosmic-aurora { opacity: .15; filter: blur(68px); }
.cosmic-beam { opacity: .23; }
.cosmic-horizon { opacity: .42; }

/* Animated SUN + ARROW emblem in the atmosphere. */
.sunarrow-sky-mark {
  position: absolute;
  right: -180px;
  top: -190px;
  width: 760px;
  height: 760px;
  opacity: .48;
  transform: rotate(-11deg);
  filter: drop-shadow(0 0 32px var(--glow-orange));
  pointer-events: none;
}
.sky-sun,
.sky-orbit,
.sky-arrow { position: absolute; display: block; }
.sky-sun {
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffbe6 0 9%, var(--sun-hot) 22%, var(--sun-core) 54%, color-mix(in srgb, var(--orange) 82%, #8c3510) 100%);
  box-shadow:
    0 0 0 26px color-mix(in srgb, var(--sun-core) 8%, transparent),
    0 0 0 72px color-mix(in srgb, var(--sun-core) 5%, transparent),
    0 0 120px color-mix(in srgb, var(--sun-core) 52%, transparent);
  animation: sunBreath 5.8s ease-in-out infinite;
}
.sky-orbit {
  inset: 118px 40px;
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
  border-inline-color: color-mix(in srgb, var(--green) 20%, transparent);
  border-radius: 50%;
  transform: rotate(-17deg);
  box-shadow: 0 0 36px color-mix(in srgb, var(--orange) 12%, transparent);
}
.sky-arrow {
  left: 50%;
  top: 50%;
  width: 295px;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green-bright) 62%, transparent) 30%, var(--arrow-glow));
  box-shadow: 0 0 14px var(--glow-orange);
  animation: sunarrowOrbit 15s linear infinite;
}
.sky-arrow::before,
.sky-arrow::after { content: ""; position: absolute; right: -2px; }
.sky-arrow::before {
  top: -7px;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--sun-hot);
  border-right: 2px solid var(--sun-hot);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 7px var(--arrow-glow));
}
.sky-arrow::after {
  top: -3px;
  width: 74px;
  height: 8px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sun-hot) 30%, transparent));
  filter: blur(5px);
}
html[data-theme="dark"] .sunarrow-sky-mark { opacity: .28; }

/* Header and emblem. */
.brand { min-width: 238px; gap: 13px; }
.brand-mark {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid color-mix(in srgb, var(--sun-hot) 65%, var(--line));
  border-radius: 50%;
  clip-path: none;
  color: transparent !important;
  font-size: 0 !important;
  background:
    radial-gradient(circle at 50% 50%, #fff8dc 0 11%, var(--sun-hot) 12% 25%, var(--sun-core) 26% 43%, transparent 44%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--orange) 54%, transparent) 0 2deg, transparent 2deg 24deg),
    color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--orange) 7%, transparent),
    0 0 25px color-mix(in srgb, var(--orange) 28%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--sun-hot) 14%, transparent);
  overflow: visible;
}
.brand-mark::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 25px;
  width: 35px;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--green-bright) 30%, transparent), var(--orange-soft));
  box-shadow: 0 0 8px var(--glow-orange);
  transform: rotate(-38deg);
  transform-origin: left center;
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 6px;
  width: 12px;
  height: 12px;
  inset: auto 3px auto auto;
  border: 2px solid var(--orange-soft);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0;
  clip-path: none;
  background: none;
  transform: rotate(7deg);
  filter: drop-shadow(0 0 5px var(--glow-orange));
}
.brand-copy { gap: 4px; }
.brand-copy strong {
  color: var(--cream);
  font-size: 15px;
  letter-spacing: .17em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--orange) 12%, transparent);
}
.brand-copy small {
  display: block !important;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .16em;
}
.site-header::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 26%, transparent), color-mix(in srgb, var(--orange) 64%, transparent), color-mix(in srgb, var(--green) 24%, transparent), transparent);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--header-bg) 94%, transparent);
  box-shadow: 0 15px 55px color-mix(in srgb, var(--brown-dark) 11%, transparent);
}
html[data-theme="dark"] .site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(2, 11, 7, .90), rgba(2, 11, 7, .46), transparent);
}
html[data-theme="dark"] .site-header.is-scrolled { background: rgba(3, 14, 8, .95); }
.main-nav a::after { background: linear-gradient(90deg, var(--green-bright), var(--sun-core), var(--orange)); }
html[data-theme="dark"] .main-nav a { color: var(--cream) !important; opacity: .78; }
html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.active { color: var(--sun-hot) !important; opacity: 1; }
.language-switch { background: color-mix(in srgb, var(--panel-soft) 88%, transparent); }
.language-switch button.active { color: #10231a; background: var(--sun-hot); box-shadow: 0 5px 18px color-mix(in srgb, var(--brown) 12%, transparent); }
html[data-theme="dark"] .language-switch { background: rgba(13, 43, 27, .82); }
html[data-theme="dark"] .language-switch button { color: var(--muted); }
html[data-theme="dark"] .language-switch button.active { color: #10231a !important; background: var(--sun-hot) !important; }
.header-icon { background: color-mix(in srgb, var(--panel) 76%, transparent); }
html[data-theme="dark"] .header-icon { color: var(--cream); }

/* Hero. */
.hero::before {
  left: -12vw;
  width: 74vw;
  background: radial-gradient(ellipse at 42% 44%, color-mix(in srgb, var(--bg) 94%, transparent) 0 28%, color-mix(in srgb, var(--bg) 61%, transparent) 55%, transparent 78%);
}
.hero-copy::before {
  content: "SUN / ARROW";
  position: absolute;
  left: -54px;
  top: 4%;
  color: color-mix(in srgb, var(--orange) 56%, transparent);
  font: 800 9px/1 var(--display);
  letter-spacing: .25em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero h1 { max-width: 860px; }
.hero h1 em {
  background: linear-gradient(108deg, #954117 0%, var(--orange) 28%, #e89a46 53%, #b44b18 78%, var(--green-bright) 132%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero h1 #hero-title-before {
  color: var(--cream) !important;
}
html[data-theme="dark"] .hero h1 em {
  background: linear-gradient(108deg, #ffd49a 0%, #ff8b38 30%, #ffe0a1 53%, #f47e2c 78%, #a8cf96 132%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero h1::after {
  background: linear-gradient(90deg, var(--orange), var(--sun-hot), var(--green-bright), transparent);
  box-shadow: 0 0 0 22px color-mix(in srgb, var(--sun-core) 4%, transparent), 0 0 68px var(--glow-orange);
}
.availability-line {
  color: var(--cream-soft);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  border-color: color-mix(in srgb, var(--orange) 31%, var(--line));
}
html[data-theme="dark"] .availability-line { color: var(--cream-soft); background: rgba(5, 31, 20, .77); }
.button-primary {
  color: #10231a !important;
  border-color: var(--sun-core);
  background: linear-gradient(115deg, var(--orange), var(--sun-core) 55%, var(--sun-hot));
  box-shadow: 0 16px 42px color-mix(in srgb, var(--orange) 29%, transparent), inset 0 1px 0 rgba(255,255,255,.34);
}
.button-primary:hover { background: linear-gradient(115deg, var(--sun-core), var(--sun-hot)); }
.button-secondary {
  color: var(--cream);
  background: color-mix(in srgb, var(--panel) 67%, transparent);
  backdrop-filter: blur(16px);
}
html[data-theme="dark"] .button-secondary {
  color: var(--cream) !important;
  background: rgba(16, 48, 31, .78);
  border-color: rgba(255, 244, 221, .25);
}
html[data-theme="dark"] .button-secondary:hover { background: rgba(25, 66, 44, .90); border-color: var(--sun-hot); }
.hero-codes span {
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  border-color: color-mix(in srgb, var(--orange) 19%, var(--line));
}
html[data-theme="dark"] .hero-codes span { color: var(--cream-soft); background: rgba(16, 48, 31, .68); }

/* Product/AI scene. */
.hero-machine::before {
  background:
    linear-gradient(142deg, color-mix(in srgb, var(--frame-highlight) 42%, transparent), transparent 31%),
    radial-gradient(circle at var(--spot-x, 58%) var(--spot-y, 42%), color-mix(in srgb, var(--sun-core) 18%, transparent), transparent 27%),
    url("assets/decor/orbit-theatre.svg") center/118% auto no-repeat,
    linear-gradient(150deg, rgba(10, 42, 27, .96), rgba(5, 22, 14, .93));
  border-color: color-mix(in srgb, var(--sun-hot) 30%, transparent);
  box-shadow:
    0 58px 148px rgba(2, 14, 8, .45),
    0 0 0 1px color-mix(in srgb, var(--sun-hot) 5%, transparent) inset,
    0 0 98px color-mix(in srgb, var(--orange) 9%, transparent) inset;
}
.machine-axis-x {
  border-top-color: color-mix(in srgb, var(--orange) 45%, transparent);
  box-shadow: 0 0 12px var(--glow-orange);
}
.machine-axis-x::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--sun-hot);
  border-right: 1px solid var(--sun-hot);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 5px var(--orange));
}
.machine-axis-y { opacity: .23; }
.ai-core {
  background: radial-gradient(circle at 34% 30%, #fff7db, var(--sun-hot) 44%, var(--sun-core) 82%);
  color: #153022;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sun-core) 8%, transparent), 0 0 64px var(--glow-orange), 0 0 108px var(--glow-green);
}
.signal-card { border-color: color-mix(in srgb, var(--sun-hot) 27%, transparent); }
.snake-border {
  background: conic-gradient(from var(--snake-angle), transparent 0deg 226deg, color-mix(in srgb, var(--green-bright) 20%, transparent) 244deg, var(--sun-hot) 264deg, var(--orange) 283deg, color-mix(in srgb, var(--green-bright) 44%, transparent) 308deg, transparent 334deg 360deg);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sun-hot) 70%, transparent)) drop-shadow(0 0 22px var(--glow-orange));
}

/* Editorial sections. */
.band-section {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 82%, transparent) 10% 90%, transparent),
    color-mix(in srgb, var(--surface-2) 68%, transparent);
}
html[data-theme="dark"] .band-section {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 76%, transparent) 10% 90%, transparent),
    color-mix(in srgb, var(--surface-2) 54%, transparent);
}
.section-id i { background: linear-gradient(90deg, var(--orange), var(--sun-core), var(--green-bright), transparent); }
.profile-cards,
.capability-card,
.trajectory-card,
.criteria-panel,
.trust-logo,
.trust-reference-note,
.resume-download {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border-color: color-mix(in srgb, var(--brown) 16%, var(--line));
  box-shadow: 0 22px 64px color-mix(in srgb, var(--brown-dark) 10%, transparent), inset 0 1px 0 var(--frame-highlight);
}
.capability-card:hover,
.trust-logo:hover {
  border-color: color-mix(in srgb, var(--orange) 42%, var(--line));
  box-shadow: 0 26px 72px color-mix(in srgb, var(--orange) 12%, transparent), inset 0 1px 0 var(--frame-highlight);
}
.formula-panel {
  background: linear-gradient(105deg, color-mix(in srgb, var(--brown) 14%, var(--panel)), color-mix(in srgb, var(--green) 12%, var(--panel)));
}
.values-panel {
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--sun-core) 18%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--brown) 12%, var(--panel)), color-mix(in srgb, var(--green) 14%, var(--panel)));
}

/* Project showcase stays cinematic in both themes. */
.project-console {
  background:
    radial-gradient(circle at 86% 6%, rgba(241, 151, 63, .14), transparent 29%),
    linear-gradient(145deg, rgba(11, 49, 31, .98), rgba(4, 22, 14, .99));
  border-color: rgba(255, 224, 173, .25);
  box-shadow: 0 46px 128px rgba(3, 19, 11, .38), 0 0 70px rgba(231, 121, 42, .08) inset;
}
.project-tab.active { background: linear-gradient(125deg, rgba(241, 139, 54, .17), rgba(114, 160, 119, .08)); }
.project-progress i { background: linear-gradient(90deg, var(--green-bright), var(--sun-core), var(--orange)); box-shadow: 0 0 18px var(--glow-orange); }
.fallback-core { box-shadow: 0 0 0 16px rgba(241, 139, 54, .04), 0 0 70px rgba(241, 139, 54, .22); }

/* Trust, contact and CV. */
.logo-belt { gap: 14px; }
.trust-logo-visual,
.trust-wordmark { background: color-mix(in srgb, var(--surface) 92%, transparent); }
html[data-theme="dark"] .trust-logo-visual,
html[data-theme="dark"] .trust-wordmark { background: color-mix(in srgb, var(--surface-2) 82%, transparent); }
.contact-panel {
  background:
    linear-gradient(90deg, var(--cinematic-panel-strong) 0 59%, color-mix(in srgb, var(--cinematic-panel) 36%, transparent) 100%),
    var(--cosmic-image) center 64% / cover no-repeat;
}
.contact-beacon {
  background: linear-gradient(180deg, transparent, var(--sun-hot) 48%, var(--orange) 74%, transparent);
  box-shadow: 0 0 32px var(--glow-orange), 0 0 112px var(--glow-orange);
}
.contact-beacon::after { border-color: color-mix(in srgb, var(--sun-hot) 43%, transparent); }
.contact-channels { background: color-mix(in srgb, var(--panel) 80%, transparent); }
.contact-channel:hover { background: color-mix(in srgb, var(--sun-core) 9%, transparent); }
.site-footer strong { letter-spacing: .15em; }

@keyframes sunBreath {
  0%, 100% { transform: scale(.97); filter: saturate(.92); }
  50% { transform: scale(1.04); filter: saturate(1.08); }
}
@keyframes sunarrowOrbit {
  from { transform: rotate(18deg); }
  to { transform: rotate(378deg); }
}

@media (max-width: 1180px) {
  .sunarrow-sky-mark { right: -265px; top: -210px; opacity: .40; }
  .brand { min-width: 218px; }
  .hero-copy::before { display: none; }
}

@media (max-width: 1024px) {
  .cosmic-image { background-position: 64% top; }
  .sunarrow-sky-mark { right: -330px; top: -230px; opacity: .32; }
  .brand { min-width: 0; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { font-size: 9px; }
}

@media (max-width: 820px) {
  .cosmic-image { background-size: auto 1120px; background-position: 63% top; }
  .sunarrow-sky-mark { width: 560px; height: 560px; right: -310px; top: -165px; opacity: .24; }
  .sky-sun { width: 86px; height: 86px; }
  .sky-arrow { width: 220px; }
  .brand-mark { width: 43px; height: 43px; flex-basis: 43px; }
  .brand-mark::before { width: 31px; top: 23px; }
  .contact-panel { background: linear-gradient(180deg, var(--cinematic-panel-strong), color-mix(in srgb, var(--cinematic-panel) 88%, transparent)); }
}

@media (max-width: 640px) {
  .cosmic-image { inset: 0 -48%; background-size: auto 920px; background-position: 60% top; }
  .sunarrow-sky-mark { width: 430px; height: 430px; right: -280px; top: -80px; opacity: .19; }
  .sky-orbit { inset: 78px 24px; }
  .sky-sun { width: 68px; height: 68px; }
  .sky-arrow { width: 170px; }
  .brand-copy small { display: none !important; }
  .brand-copy strong { letter-spacing: .12em; }
  .hero-codes span { background: color-mix(in srgb, var(--panel) 76%, transparent); }
}

@media (max-width: 390px) {
  .brand-copy { display: grid; }
  .brand-copy strong { max-width: 112px; font-size: 11px; overflow: visible; }
  .brand-mark { width: 39px; height: 39px; flex-basis: 39px; }
  .brand-mark::before { left: 7px; top: 20px; width: 28px; }
  .brand-mark::after { right: 3px; top: 5px; width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sky-sun,
  .sky-arrow { animation: none !important; }
}