/* =========================================================
   Christian Bolorinos — Portfolio
   LAVA THEME (light)
   Loaded after style.css and glass.css on index-lava.html.
   Two brand gradients, everything else neutral:
     A  #5871f3 → #5345ba   (blue → indigo)
     B  #ffbe8d → #ff8a8c   (peach → coral)
   Colour lives in the lava-lamp background (lava.js) and the
   CTAs; surfaces, text and chrome are whites and greys.
   ========================================================= */
:root{
	/* Brand gradient stops */
	--a-1:#5345ba;
	--a-2:#5871f3;
	--b-1:#ff8a8c;
	--b-2:#ffbe8d;
	--grad-a:linear-gradient(135deg,var(--a-1),var(--a-2));
	--grad-b:linear-gradient(135deg,var(--b-1),var(--b-2));
	--grad-full:linear-gradient(120deg,var(--a-1),var(--a-2) 38%,var(--b-1) 66%,var(--b-2));

	/* Legacy tokens remapped. Anything in style.css that used the gold
	   gradient now draws gradient A; navy and gold text become greys. */
	--gold-1:#5871f3;
	--gold-2:#5345ba;
	--gold-deep:#5f5f6b;
	--navy-1:#2c2c36;
	--navy-2:#8b8b98;
	--navy-3:#1e1e26;
	--ink:#16161d;
	--text:#2a2a31;
	--text-soft:#4f4f59;
	--cream:#f5f5f7;
	--cream-2:#ededf1;
	--line:rgba(22,22,29,.09);
	--shadow-sm:0 6px 24px rgba(22,22,29,.07);
	--shadow-md:0 18px 50px rgba(22,22,29,.12);
	--shadow-lg:0 30px 80px rgba(22,22,29,.2);

	/* Neutral glass */
	--glass-shadow:0 18px 50px rgba(40,40,56,.12);
	--char-glass:linear-gradient(135deg,rgba(28,28,36,.84),rgba(52,52,64,.78));

	/* Gradient glass CTA recipe */
	--cta-sheen:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 52%);
	--cta-a:linear-gradient(120deg,rgba(88,113,243,.92),rgba(83,69,186,.9) 50%,rgba(88,113,243,.92));
	--cta-b:linear-gradient(120deg,rgba(255,190,141,.92),rgba(255,138,140,.9) 50%,rgba(255,190,141,.92));
	--cta-hi:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.22),inset 0 0 18px rgba(255,255,255,.2);
	--cta-blur:blur(16px) saturate(170%);

	/* Palette-dependent glows (r,g,b triplets) and lava blob colours.
	   Lava pairs are edge colour, then core colour. */
	--glow-a:88,113,243;
	--glow-b:255,160,130;
	--shade:45,38,120;
	--lava-a1:#5345ba;
	--lava-a2:#5871f3;
	--lava-b1:#ff8a8c;
	--lava-b2:#ffbe8d;
}

body{background:#f1f2f6}
::selection{background:rgba(var(--glow-a),.38);color:var(--ink)}
a:hover{color:var(--a-1)}

/* ---------- Backdrop: neutral base + morphing lava lamp ---------- */
.bg-gradient{background:linear-gradient(160deg,#f6f6f9,#eceef4 55%,#f3f2f6);animation:none}
.bg-gradient::after{display:none}
.bg-svg{display:none}
/* Sized to the large viewport so the phone address bar sliding in and out
   never resizes the backdrop mid-scroll; own compositor layer. */
.bg-canvas{bottom:auto;height:100vh;height:100lvh;transform:translateZ(0)}
/* lava.js adds .is-on after the page has loaded, so it fades in gently */
.lava{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease}
.lava.is-on{opacity:.45}
/* A white veil keeps body copy legible where it sits straight on the lava */
.bg-veil{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 45%,rgba(246,246,249,.4),rgba(246,246,249,0) 72%)}
.bg-grain{opacity:.045}

/* ---------- Glass rim: neutral ---------- */
.about__card::before,.tl__panel::before,.skills__item::before,.contact__card::before,.perso-banner::before,.cs-callout::before{
	background:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,.35) 35%,rgba(150,150,168,.16) 60%,rgba(255,255,255,.8));
}
.tl__panel,.skills__item{box-shadow:var(--glass-hi),0 calc(10px + 12px * var(--hv)) calc(30px + 26px * var(--hv)) rgba(40,40,56,calc(.08 + .07 * var(--hv)))}
.skills__item{border:1px solid color-mix(in srgb,rgba(255,255,255,.5),var(--a-2) calc(var(--hv) * 100%))}
.card{box-shadow:0 calc(10px + 24px * var(--hv)) calc(30px + 56px * var(--hv)) rgba(40,40,56,calc(.1 + .12 * var(--hv)))}
.card__go{color:var(--a-1)}

/* ---------- CTAs: gradient glass ----------
   Solid = gradient A, ghost = gradient B. Translucent fills over a
   backdrop blur, a white top sheen and inner highlights, and a gradient
   that slides half a turn on hover. */
.btn--solid,.btn--ghost{
	border:1px solid rgba(255,255,255,.6);
	background-size:100% 100%,220% 100%;
	background-position:0 0,0% 0;
	backdrop-filter:var(--cta-blur);-webkit-backdrop-filter:var(--cta-blur);
}
.btn--solid{
	color:#fff;text-shadow:0 1px 2px rgba(var(--shade),.3);
	background-image:var(--cta-sheen),var(--cta-a);
	box-shadow:var(--cta-hi),0 12px 30px rgba(var(--glow-a),.36);
}
.btn--ghost{
	color:var(--ink);
	background-image:var(--cta-sheen),var(--cta-b);
	box-shadow:var(--cta-hi),0 12px 30px rgba(var(--glow-b),.32);
}
.btn--solid:hover,.btn--ghost:hover{background-size:100% 100%,220% 100%;background-position:0 0,100% 0}
.btn--solid:hover{background-image:var(--cta-sheen),var(--cta-a)}
.btn--ghost:hover{background-image:var(--cta-sheen),var(--cta-b)}
.btn--solid:hover{color:#fff;box-shadow:var(--cta-hi),0 18px 40px rgba(var(--glow-a),.48)}
.btn--ghost:hover{color:var(--ink);background-color:transparent;box-shadow:var(--cta-hi),0 18px 40px rgba(var(--glow-b),.44)}

/* ---------- Navigation ---------- */
.nav.is-scrolled{box-shadow:0 10px 30px rgba(40,40,56,.08)}
.nav__menu a:hover{color:var(--ink)}
.nav__menu a::after{background:linear-gradient(90deg,var(--a-1),var(--a-2))}

/* ---------- Custom cursor (main.js tints it inline; the gradient sits on top) ---------- */
.cursor{background-image:var(--grad-a)}

/* ---------- Hero ---------- */
/* Glass lettering: a tinted translucent fill under a white top sheen,
   a bright rim from outer drop-shadows, a hairline highlight and a soft
   coloured shadow for thickness. Line 1 is tinted with gradient A,
   line 2 with the full sweep. */
.hero__content{max-width:1200px}
.hero__title{font-size:clamp(3.6rem,13vw,10.5rem);letter-spacing:-.025em;line-height:.94}
.hero__title .reveal-word{
	--tint:linear-gradient(120deg,color-mix(in srgb,var(--a-1) 82%,transparent),color-mix(in srgb,var(--a-2) 66%,transparent));
	background:
		linear-gradient(172deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.4) 30%,rgba(255,255,255,0) 52%,rgba(255,255,255,0) 80%,rgba(255,255,255,.3) 100%),
		var(--tint);
	-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
	/* No text-stroke: it traces every overlapping contour inside the glyphs
	   (the boxes that showed through the t and the i). The rim comes from
	   stacked outer drop-shadows instead, which only follow the outline. */
	filter:drop-shadow(0 -1px 0 rgba(255,255,255,.95)) drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(1px 0 0 rgba(255,255,255,.5)) drop-shadow(-1px 0 0 rgba(255,255,255,.5)) drop-shadow(0 16px 30px rgba(var(--shade),.16));
	padding:0 .04em;
}
.hero__title .hero__title--accent{
	--tint:linear-gradient(110deg,color-mix(in srgb,var(--a-1) 80%,transparent),color-mix(in srgb,var(--a-2) 76%,transparent) 34%,color-mix(in srgb,color-mix(in srgb,var(--b-1),var(--b-2) 55%) 86%,transparent) 64%,color-mix(in srgb,var(--b-2) 88%,transparent));
}
.hero__lede{margin-top:34px}
.nav__brand img{filter:drop-shadow(0 1px 6px rgba(255,255,255,.7))}
.hero__eyebrow{color:var(--text-soft)}
.hero__social a{box-shadow:var(--glass-hi),0 calc(12px * var(--hv)) calc(26px * var(--hv)) rgba(var(--glow-a),calc(.4 * var(--hv)))}
.hero__social a::before{background:var(--grad-full)}

/* ---------- Section titles, labels ---------- */
.section-title::after{background:linear-gradient(90deg,var(--a-1),var(--a-2))}

/* ---------- Divider bands: clear frosted glass ----------
   Same recipe as the panels: white frost over a heavy blur, a bright top
   rim and inner highlights, dark heading. The lava tints through softly. */
.divider--facts,.divider--hire{
	background:
		radial-gradient(90% 140% at 12% -20%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),
		linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.26) 60%,rgba(255,255,255,.4));
	background-size:100% 100%;animation:none;
	backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
	border-top:1px solid rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.5);
	box-shadow:var(--glass-hi),0 18px 50px rgba(40,40,56,.08);
}
/* Diagonal sheen that drifts slowly across the pane */
.divider--facts::before,.divider--hire::before{
	content:"";position:absolute;inset:-50% -20%;pointer-events:none;z-index:0;
	background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.35) 46%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.25) 54%,rgba(255,255,255,0) 62%);
	animation:paneSheen 18s ease-in-out infinite alternate;
}
@keyframes paneSheen{from{transform:translateX(-18%)}to{transform:translateX(18%)}}
.divider h2{color:var(--ink)}

/* ---------- Portfolio filter: active tab is a gradient CTA ---------- */
.filter__btn:hover{border-color:rgba(var(--glow-a),.55);color:var(--ink)}
.filter__btn.is-active{
	color:#fff;text-shadow:0 1px 2px rgba(var(--shade),.3);
	background:var(--cta-sheen),var(--cta-a);background-size:100% 100%,220% 100%;
	border-color:rgba(255,255,255,.6);
	box-shadow:var(--cta-hi),0 8px 22px rgba(var(--glow-a),.36);
}

/* ---------- Resume timeline ---------- */
.timeline::before{background:linear-gradient(to bottom,var(--a-1),var(--a-2));opacity:.8}
.tl::before{background:#fff;border-color:var(--a-2);box-shadow:0 0 0 4px rgba(var(--glow-a),.18)}
.tl__date{background:var(--char-glass)}

/* ---------- Footer ---------- */
.footer{background:rgba(22,22,29,.84)}

/* ---------- Floating controls: gradient glass ---------- */
.scroll-up{
	background:var(--cta-sheen),var(--cta-b);border:1px solid rgba(255,255,255,.6);
	box-shadow:var(--cta-hi),0 12px 30px rgba(var(--glow-b),.35);
}
.scroll-up svg{fill:var(--ink)}
.perso-fab{
	color:#fff;text-shadow:0 1px 2px rgba(var(--shade),.3);
	background:var(--cta-sheen),var(--cta-a);
	border:1px solid rgba(255,255,255,.6);
	backdrop-filter:var(--cta-blur);-webkit-backdrop-filter:var(--cta-blur);
	box-shadow:var(--cta-hi),0 calc(16px + 10px * var(--hv)) calc(40px + 24px * var(--hv)) rgba(var(--glow-a),calc(.32 + .12 * var(--hv)));
}
.perso-fab svg{fill:#fff}
#chat-bubble{
	background:var(--cta-sheen),var(--cta-a);
	border:1px solid rgba(255,255,255,.6);
	box-shadow:var(--cta-hi),0 12px 30px rgba(var(--glow-a),.45);
}

/* ---------- Relevance markers ---------- */
.card__pill,.tl__pill{background:var(--cta-sheen),var(--grad-a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(var(--glow-a),.4)}
.card.is-relevant{box-shadow:0 0 0 2px var(--a-2),var(--shadow-md)}
.tl.is-relevant .tl__panel{border-color:var(--a-2);box-shadow:0 0 0 2px rgba(var(--glow-a),.3),var(--shadow-sm)}
.tl.is-relevant::before{background:var(--a-2);border-color:var(--a-1);box-shadow:0 0 0 5px rgba(var(--glow-a),.24)}
.skills__item.is-relevant{border-color:var(--a-2);box-shadow:0 0 0 2px rgba(var(--glow-a),.28),var(--shadow-sm)}
.skills__item .skills__pill{color:var(--a-1)}

/* ---------- Resume AI filtering ---------- */
.resume-status{background:rgba(255,255,255,.6);border-color:var(--line);color:var(--text-soft)}
.resume.is-filtering .timeline::after{background:linear-gradient(100deg,transparent 30%,rgba(var(--glow-a),.14) 50%,transparent 70%);background-size:220% 100%}

/* ---------- Scroll progress ---------- */
.scroll-progress i{background:linear-gradient(90deg,var(--a-1),var(--a-2),var(--b-1),var(--b-2));box-shadow:0 0 12px rgba(var(--glow-a),.6)}

/* ---------- Preloader ---------- */
.preloader{background:#16161d}
.preloader__mark span{background:var(--grad-full);-webkit-background-clip:text;background-clip:text}
.preloader__bar i{background:var(--grad-full)}

/* ---------- Modals ---------- */
.modal-overlay{background:rgba(22,22,29,.34)}
.modal__head{background:var(--char-glass)}
.modal__body a,.msg.bot a{color:var(--a-1);text-decoration:underline;text-underline-offset:2px}
.cs-chip{color:var(--text-soft);border-color:var(--line)}
.cs-tldr{border-left-color:var(--a-2)}
.cs-callout{background:rgba(255,255,255,.5)}
.cs-num{background:var(--grad-a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-num small{-webkit-text-fill-color:var(--text-soft)}

/* ---------- Chat window ---------- */
#chat-header,.onboarding__head{background:var(--char-glass)}
.msg.user,.ob-msg.user{background:var(--cta-sheen),var(--grad-a);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#chat-send,.ob-other button{background:var(--cta-sheen),var(--grad-a);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
#chat-input:focus,.ob-other input:focus{border-color:var(--a-2)}

/* ---------- Onboarding ---------- */
.onboarding__overlay{background:rgba(22,22,29,.4)}
.onboarding__avatar{background:var(--cta-sheen),var(--grad-full);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(var(--glow-a),.5)}
.ob-opt:hover{border-color:var(--a-2)}
.ob-opt .k{background:var(--grad-a)}
.ob-opt--primary,.ob-opt--primary:hover{
	color:#fff;border-color:rgba(255,255,255,.6);
	background:var(--cta-sheen),var(--cta-a);background-size:100% 100%,220% 100%;
}
.ob-opt--primary:hover{background-position:0 0,100% 0;box-shadow:var(--cta-hi),0 8px 20px rgba(var(--glow-a),.42)}
.ob-opt--keep .k,.ob-opt--pass .k{background:#8b8b98}
.ob-msg-typing{color:#9a9aa5}
.onboarding__progress i{background:linear-gradient(90deg,var(--a-1),var(--a-2),var(--b-1),var(--b-2))}

/* ---------- Personalization banner ---------- */
.perso-banner{background:var(--glass-bg);border-left:4px solid var(--a-2)}
.perso-banner__icon{background:var(--cta-sheen),var(--grad-a)}
.perso-banner__text strong{color:var(--ink)}
.perso-banner__reset{color:var(--a-1)}

/* ---------- Mobile menu ---------- */
@media (max-width:760px){
	.nav__menu{background:rgba(245,245,247,.82)}
	/* the open-menu shadow was bleeding in from off-screen */
	.nav__menu:not(.is-open){box-shadow:none}
}

/* ---------- Reduced motion: the lava is frozen by lava.js; keep it quieter ---------- */
@media (prefers-reduced-motion:reduce){
	.lava.is-on{opacity:.38}
}

/* ---------- Liquid glass edges (liquid.js, desktop Chromium only) ----------
   liquid.js sets --lg (an SVG refraction filter sized to the element) and
   --lg-blur on each target, and adds .has-liquid to <html>. The rim then
   bends and mirrors what's behind it. Fills get a little clearer so the
   refraction reads through them. Other browsers never see these rules. */
.has-liquid .nav.is-scrolled,
.has-liquid .perso-fab,
.has-liquid #chat-bubble,
.has-liquid .scroll-up,
.has-liquid .btn--solid,
.has-liquid .btn--ghost,
.has-liquid .filter__btn,
.has-liquid .hero__social a,
.has-liquid .card__body{
	backdrop-filter:var(--lg,) var(--lg-blur,blur(8px));
	-webkit-backdrop-filter:var(--lg,) var(--lg-blur,blur(8px));
}
.has-liquid .nav.is-scrolled{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.14))}
.has-liquid{
	--cta-a:linear-gradient(120deg,color-mix(in srgb,var(--a-1) 74%,transparent),color-mix(in srgb,var(--a-2) 66%,transparent) 50%,color-mix(in srgb,var(--a-1) 74%,transparent));
	--cta-b:linear-gradient(120deg,color-mix(in srgb,var(--b-1) 76%,transparent),color-mix(in srgb,var(--b-2) 68%,transparent) 55%,color-mix(in srgb,var(--b-1) 76%,transparent));
}
.has-liquid .card__body{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.34))}

/* ---------- No frost on content panels ----------
   Panels, cards and bands are plain translucent white: no backdrop blur.
   The blur only kicked in after each section's reveal animation finished,
   so blocks appeared clear and then frosted over a second later. Nav,
   buttons, modals and the chat keep their glass. */
.about__card,.tl__panel,.skills__item,.contact__card,.perso-banner,.cs-callout,.cs-chip,.cs-tldr,
.card__body,.divider--facts,.divider--hire{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.card__body,.has-liquid .card__body{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.68))}

/* ---------- Phones: lighter glass ----------
   Every frosted surface re-blurs whatever moves behind it, every frame.
   Smaller blur radii keep the look and cost far less on a phone GPU. */
@media (max-width:760px),(pointer:coarse){
	:root{
		--glass-blur:blur(14px) saturate(160%);
		--cta-blur:blur(8px) saturate(150%);
	}
	.card__body{backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%)}
	.nav__menu{backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
	.modal,#chat-window,.onboarding__card{backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
	.divider--facts::before,.divider--hire::before{animation:none}
}