/* Liquid Glass visual layer. Layout and typography remain in style.css. */
:root{
 --bg:#f7faff;
 --ink:#202630;
 --muted:#4f5d6f;
 --subtle:#546477;
 --blue:#3a7099;
 --line:rgba(62,85,110,.14);
 --edge:rgba(77,128,167,.18);
 --glass:rgba(255,255,255,.065);
 --pill:rgba(170,216,250,.1);
 --shadow:0 16px 40px rgba(40,70,101,.055),0 3px 8px rgba(40,70,101,.04),0 1px 2px rgba(40,70,101,.045);
 --lg-fill:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,0) 40%,rgba(208,235,254,.025) 78%,rgba(255,255,255,.085));
 --lg-control-fill:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%,rgba(210,235,255,.025) 70%,rgba(255,255,255,.1));
 --lg-clear:rgba(255,255,255,.035);
 --lg-rim:inset 0 1px 1px rgba(255,255,255,1),inset 0 2px 3px rgba(255,255,255,.22),inset 1px 0 1px rgba(255,255,255,.66),inset 0 -1px 1px rgba(88,128,161,.2),inset -1px -2px 4px rgba(137,189,227,.09);
 --lg-rim-light:rgba(255,255,255,.96);
 --lg-rim-dim:rgba(72,109,141,.25);
 --lg-sheen:rgba(255,255,255,.48);
 --lg-refracted:rgba(144,199,240,.09);
 --lg-control-ink:#273547;
 --lg-heading:linear-gradient(150deg,#326f97,#4e86ad);
 --lg-button-fill:linear-gradient(145deg,rgba(170,222,255,.38),rgba(114,186,237,.23));
 --lg-button-ink:#173955;
 --lg-focus:#548fbb;
}
:root[data-theme=dark]{
 --bg:#0b1018;
 --ink:#f0f5fa;
 --muted:#b1becd;
 --subtle:#94a6b9;
 --blue:#a9d2f2;
 --line:rgba(176,198,223,.17);
 --edge:rgba(222,235,251,.25);
 --glass:rgba(18,27,40,.1);
 --pill:rgba(149,195,236,.07);
 --shadow:0 18px 44px rgba(0,4,11,.25),0 3px 10px rgba(0,4,11,.16),0 1px 2px rgba(0,4,11,.12);
 --lg-fill:linear-gradient(145deg,rgba(180,208,235,.065),rgba(39,52,71,0) 40%,rgba(96,145,183,.02) 78%,rgba(217,237,255,.035));
 --lg-control-fill:linear-gradient(155deg,rgba(215,237,255,.1),rgba(133,159,189,0) 38%,rgba(96,145,183,.015) 70%,rgba(217,237,255,.055));
 --lg-clear:rgba(15,24,38,.065);
 --lg-rim:inset 0 1px 1px rgba(237,246,255,.48),inset 0 2px 3px rgba(210,233,255,.065),inset 1px 0 1px rgba(191,215,243,.19),inset 0 -1px 1px rgba(0,4,11,.44),inset -1px -2px 4px rgba(142,198,242,.065);
 --lg-rim-light:rgba(239,248,255,.6);
 --lg-rim-dim:rgba(141,173,208,.1);
 --lg-sheen:rgba(215,235,255,.15);
 --lg-refracted:rgba(106,167,219,.085);
 --lg-control-ink:#eaf4ff;
 --lg-heading:linear-gradient(150deg,#d8eeff,#8fc0e4);
 --lg-button-fill:linear-gradient(145deg,rgba(87,155,209,.32),rgba(49,101,147,.22));
 --lg-button-ink:#f4faff;
 --lg-focus:#a6d5f7;
}

/* Quiet light fields give the translucent surfaces something to refract. */
body{
 background-color:var(--bg);
 background-image:radial-gradient(ellipse at 88% 8%,rgba(156,208,248,.25),transparent 46%),radial-gradient(ellipse at 4% 76%,rgba(177,222,252,.22),transparent 43%),linear-gradient(145deg,rgba(255,255,255,.86),transparent 60%);
 background-attachment:fixed;
}
html[data-theme=dark] body{
 background-image:radial-gradient(ellipse at 88% 8%,rgba(57,103,156,.23),transparent 46%),radial-gradient(ellipse at 4% 76%,rgba(32,83,132,.18),transparent 43%),linear-gradient(145deg,rgba(37,52,76,.12),transparent 60%);
}
.ambient-one{background:radial-gradient(ellipse at 48% 38%,rgba(245,251,255,.92),rgba(184,216,243,.7) 40%,transparent 72%);opacity:.62;filter:blur(52px)}
.ambient-two{background:radial-gradient(ellipse,rgba(207,233,251,.64),rgba(238,249,255,.36) 42%,transparent 72%);opacity:.55;filter:blur(56px)}
html[data-theme=dark] .ambient-one{background:radial-gradient(ellipse at 48% 38%,rgba(81,124,170,.24),rgba(30,54,84,.34) 40%,transparent 72%);opacity:.68}
html[data-theme=dark] .ambient-two{background:radial-gradient(ellipse,rgba(43,74,113,.32),rgba(18,35,57,.22) 42%,transparent 72%);opacity:.58}
.pointer-light{background:radial-gradient(circle,rgba(132,198,246,.36),rgba(168,216,250,.2) 26%,rgba(211,236,255,.07) 48%,transparent 69%)}
html[data-theme=dark] .pointer-light{background:radial-gradient(circle,rgba(102,164,224,.29),rgba(66,117,173,.17) 26%,rgba(47,84,133,.055) 48%,transparent 69%)}

/* Clear interiors; most of the material's light stays on the curved edges. */
html[data-theme] .glass{
 background:var(--lg-fill),var(--glass);
 border-color:var(--edge);
 box-shadow:var(--shadow),var(--lg-rim);
 backdrop-filter:blur(6px) saturate(155%) brightness(1.025);
 -webkit-backdrop-filter:blur(6px) saturate(155%) brightness(1.025);
 isolation:isolate;
}
html[data-theme] .glass:before,
html[data-theme] .glass:is(.is-tilting,.is-lit):before{
 inset:1px;
 border:0;
 background:radial-gradient(ellipse 72% 17% at var(--glint-x,22%) var(--glint-y,0%),var(--lg-sheen),transparent 70%),radial-gradient(ellipse 54% 10% at 85% 100%,var(--lg-refracted),transparent 75%);
 opacity:.54;
 box-shadow:inset 0 0 7px 1px var(--lg-refracted);
 transition:opacity .28s ease-out;
 z-index:-1;
}
html[data-theme] .glass:after{
 content:"";
 position:absolute;
 inset:0;
 border-radius:inherit;
 pointer-events:none;
 box-sizing:border-box;
 padding:1.25px;
 background:conic-gradient(from 135deg at var(--glint-x,50%) var(--glint-y,50%),var(--lg-rim-light),var(--lg-rim-dim) 24%,rgba(255,255,255,.05) 38%,var(--lg-rim-light) 53%,var(--lg-rim-dim) 78%,var(--lg-rim-light));
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;
 opacity:.86;
 z-index:-1;
}
html[data-theme] .glass.is-tilting{
 border-color:var(--edge);
 box-shadow:var(--shadow),0 9px 25px var(--lg-refracted),var(--lg-rim);
}
html[data-theme] .glass:is(.is-tilting,.is-lit):before{opacity:.76}
html[data-theme] .journey-card.current{background:radial-gradient(ellipse at 0% 0%,var(--lg-refracted),transparent 64%),var(--lg-fill),var(--glass)}
html[data-theme] .contact-surface{background:radial-gradient(ellipse at 10% 0%,var(--lg-refracted),transparent 68%),var(--lg-fill),var(--glass)}
html[data-theme] .languages-section{background:linear-gradient(135deg,var(--lg-refracted),transparent 75%);border-color:var(--line)}

/* Clear floating glass for the navigation, picker and globe controls. */
html[data-theme] :is(.nav.glass,.city-selector.glass,.orbit-label.glass,.study-chip.glass){
 background:var(--lg-control-fill),var(--lg-clear);
 box-shadow:0 14px 36px rgba(39,66,96,.09),var(--lg-rim);
 backdrop-filter:blur(5px) saturate(165%) contrast(1.02);
 -webkit-backdrop-filter:blur(5px) saturate(165%) contrast(1.02);
}
html[data-theme=dark] :is(.nav.glass,.city-selector.glass,.orbit-label.glass,.study-chip.glass){box-shadow:0 16px 42px rgba(0,4,11,.26),var(--lg-rim)}
html[data-theme] .nav.glass:before{opacity:.58}
/* A quiet twinkle distinguishes the game without overpowering the other links. */
.nav .brand,.nav-tools{flex-shrink:0}
.nav-links{min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{flex:0 0 auto;white-space:nowrap}
.nav-links .nav-game{display:inline-flex;align-items:center;gap:5px;color:var(--blue)}
.nav-game-sparkle{width:12px;height:12px;flex:0 0 auto;pointer-events:none;animation:nav-game-twinkle 4.8s ease-in-out infinite}
@keyframes nav-game-twinkle{
 0%,65%,100%{opacity:.45;transform:scale(.88)}
 76%{opacity:.95;transform:scale(1.08)}
 86%{opacity:.6;transform:scale(.95)}
}
@media(min-width:701px) and (max-width:1050px){
 html{scroll-padding-top:150px}
 .nav{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "links links";gap:5px 15px;padding:12px 20px 7px}
 .nav .brand{grid-area:brand}
 .nav-tools{grid-area:tools}
 .nav-links{grid-area:links;gap:8px;align-items:center}
 .nav-links a{display:inline-flex;align-items:center;min-height:40px;padding:6px 9px}
 .hero{padding-top:180px}
}
@media(prefers-reduced-motion:reduce){.nav-game-sparkle{animation:none;opacity:.65}}
html[data-theme] .language-menu.glass{
 background:var(--lg-control-fill),rgba(244,249,255,.38);
 border-color:var(--edge);
 box-shadow:0 24px 64px rgba(35,58,86,.16),var(--lg-rim);
 backdrop-filter:blur(22px) saturate(155%);
 -webkit-backdrop-filter:blur(22px) saturate(155%);
}
html[data-theme=dark] .language-menu.glass{background:var(--lg-control-fill),rgba(17,25,38,.48);box-shadow:0 24px 64px rgba(0,4,11,.4),var(--lg-rim)}
html[data-theme] :is(.language-trigger,.theme-toggle,.copy-email,.dialog-top button){
 background:var(--lg-control-fill),var(--pill);
 color:var(--lg-control-ink);
 border-color:var(--edge);
 box-shadow:0 3px 8px rgba(33,61,87,.04),var(--lg-rim);
 backdrop-filter:blur(5px) saturate(155%);
 -webkit-backdrop-filter:blur(5px) saturate(155%);
}
html[data-theme] :is(.language-trigger:hover,.language-picker.open .language-trigger,.theme-toggle:hover,.copy-email:hover){background:var(--lg-control-fill),var(--lg-refracted);box-shadow:0 4px 12px var(--lg-refracted),var(--lg-rim)}
html[data-theme] .language-option:is(:hover,:focus-visible){background:var(--pill)}
html[data-theme] .language-option[aria-checked=true]{background:var(--lg-control-fill),var(--pill);color:var(--blue);box-shadow:var(--lg-rim)}
html[data-theme] .city-selector .selected{background:var(--lg-control-fill),var(--pill);color:var(--ink);box-shadow:0 3px 9px rgba(32,58,82,.07),var(--lg-rim)}
html[data-theme] .city-selector button:not(.selected):hover{background:var(--lg-refracted)}

/* Tinted glass actions and small nested surfaces share the same edge light. */
html[data-theme] .primary{
 color:var(--lg-button-ink);
 background:var(--lg-button-fill);
 border-color:var(--edge);
 box-shadow:0 7px 18px rgba(70,128,170,.13),var(--lg-rim);
 backdrop-filter:blur(6px) saturate(160%);
 -webkit-backdrop-filter:blur(6px) saturate(160%);
}
html[data-theme] .primary:hover{box-shadow:0 10px 24px rgba(70,128,170,.19),var(--lg-rim)}
html[data-theme] .secondary.glass{background:var(--lg-control-fill),var(--lg-clear);box-shadow:0 4px 14px rgba(39,66,96,.045),var(--lg-rim)}
html[data-theme] :is(.date-pill,.interest-tags span,.icon-box,.orbit-label>span:first-child){background:var(--lg-control-fill),var(--pill);border-color:var(--edge);box-shadow:var(--lg-rim)}
html[data-theme] .journey-detour{background:var(--lg-control-fill),var(--pill);border-color:var(--line);box-shadow:inset 0 1px 1px var(--lg-rim-light)}
html[data-theme] .country-chip{background:var(--lg-control-fill),var(--glass);border-color:var(--edge);box-shadow:var(--lg-rim)}
html[data-theme] .country-chip.residence{background:var(--lg-control-fill),var(--pill)}
html[data-theme] .country-chip:hover{border-color:var(--blue)}
.hero h1 span,.section-heading h2 span,.language-card h3{background:var(--lg-heading);background-clip:text;-webkit-background-clip:text;color:transparent}
.journey-divider{background:linear-gradient(90deg,var(--line),transparent)}
#globe{filter:drop-shadow(0 18px 26px rgba(78,127,165,.09))}
html[data-theme=dark] #globe{filter:drop-shadow(0 18px 28px rgba(120,177,222,.055))}
.globe-stage:after{background:radial-gradient(ellipse,rgba(70,104,139,.15),transparent 70%)}
html[data-theme=dark] .globe-stage:after{background:radial-gradient(ellipse,rgba(132,186,230,.1),transparent 70%)}

/* Transient surfaces retain the same geometry and content. */
html[data-theme] dialog{background:var(--lg-fill),rgba(243,248,254,.54);border-color:var(--edge);box-shadow:0 35px 110px rgba(14,35,61,.24),var(--lg-rim);backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%)}
html[data-theme=dark] dialog{background:var(--lg-fill),rgba(13,22,35,.6);box-shadow:0 35px 110px rgba(0,4,11,.45),var(--lg-rim)}
dialog::backdrop{background:rgba(28,43,64,.14);backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%)}
html[data-theme=dark] dialog::backdrop{background:rgba(0,5,14,.3)}
.toast{background:rgba(36,58,81,.9);box-shadow:0 12px 32px rgba(19,40,61,.18),inset 0 1px 1px rgba(255,255,255,.24);backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%)}
html[data-theme=dark] .toast{background:rgba(44,64,88,.87)}
:where(a,button,select,canvas,summary):focus-visible{outline-color:var(--lg-focus)}
/* A tiny blue-fire cursor: irregular core, flame wisps and ember tail. */
html[data-theme] .cursor-playground .cursor-tip{
 width:10px;height:12px;left:-5px;top:-6px;
 border:0;
 border-radius:48% 52% 40% 60% / 65% 40% 60% 35%;
 background:radial-gradient(ellipse at 50% 62%,#eaffff 0%,#87edff 23%,#35c5ff 46%,rgba(41,122,255,.85) 70%,rgba(39,106,244,.12));
 box-shadow:0 0 3px rgba(44,185,255,.8),0 0 8px rgba(43,124,255,.35);
 backdrop-filter:none;-webkit-backdrop-filter:none;
 transform:rotate(var(--flame-angle,0deg));
 transition:transform .14s ease-out;
 animation:cursor-fire-body 1.15s ease-in-out infinite alternate;
}
html[data-theme] .cursor-playground .cursor-tip:before{
 content:"";position:absolute;width:6px;height:12px;left:2px;top:-5px;
 border-radius:70% 30% 65% 35% / 80% 45% 55% 30%;
 background:linear-gradient(180deg,rgba(37,113,255,0),rgba(54,158,255,.7) 30%,rgba(74,220,255,.88) 75%,rgba(190,252,255,.8));
 box-shadow:0 0 4px rgba(56,152,255,.3);
 transform-origin:50% 100%;
 animation:cursor-fire-wisp .8s ease-in-out infinite alternate;
}
html[data-theme] .cursor-playground .cursor-tip:after{
 content:"";position:absolute;width:4px;height:6px;left:3px;top:4px;bottom:auto;
 border-radius:60% 40% 45% 55% / 65% 45% 55% 35%;
 background:linear-gradient(180deg,#c2f9ff,#f4ffff 65%,#81e5ff);
 box-shadow:0 0 3px rgba(160,247,255,.9);
 animation:cursor-fire-core 1.35s ease-in-out infinite alternate;
}
html[data-theme] .cursor-playground.over-control .cursor-tip{transform:rotate(var(--flame-angle,0deg)) scale(1.14)}
html[data-theme] .cursor-playground.pressed .cursor-tip{transform:rotate(var(--flame-angle,0deg)) scale(.86)}
html[data-theme] .cursor-trail{border-radius:55% 45% 65% 35%;background:radial-gradient(ellipse,#9befff,#37b5ff 48%,rgba(42,111,246,.15));box-shadow:0 0 4px rgba(43,157,255,.24)}
html[data-theme] .cursor-spark{border-radius:65% 35% 55% 45%;background:#68d6ff;box-shadow:0 0 4px rgba(42,164,255,.6)}
html[data-theme] .cursor-shockwave{border-color:rgba(53,166,255,.65)}
html[data-theme] .cursor-playground.over-text .cursor-tip{
 width:2px;height:18px;left:-1px;top:-9px;border-radius:1px;
 background:var(--blue);box-shadow:none;transform:none;animation:none;
}
html[data-theme] .cursor-playground.over-text .cursor-tip:before,
html[data-theme] .cursor-playground.over-text .cursor-tip:after{
 width:8px;height:2px;left:-3px;border-radius:1px;background:var(--blue);box-shadow:none;transform:none;animation:none;
}
html[data-theme] .cursor-playground.over-text .cursor-tip:before{top:0}
html[data-theme] .cursor-playground.over-text .cursor-tip:after{top:auto;bottom:0}
@keyframes cursor-fire-body{
 from{border-radius:48% 52% 40% 60% / 65% 40% 60% 35%}
 to{border-radius:56% 44% 58% 42% / 48% 60% 40% 52%}
}
@keyframes cursor-fire-wisp{
 from{transform:rotate(-7deg) scale(.88,1);opacity:.78}
 to{transform:rotate(9deg) scale(1.03,.82);opacity:1}
}
@keyframes cursor-fire-core{from{opacity:.84;transform:scale(.94)}to{opacity:1;transform:scale(1.05)}}
html[data-theme] .cursor-playground:not(.visible) .cursor-tip,
html[data-theme] .cursor-playground:not(.visible) .cursor-tip:before,
html[data-theme] .cursor-playground:not(.visible) .cursor-tip:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 html[data-theme] .cursor-playground .cursor-tip,
 html[data-theme] .cursor-playground .cursor-tip:before,
 html[data-theme] .cursor-playground .cursor-tip:after{animation:none;transform:none}
}

/* Solid material fallbacks keep text readable without backdrop effects. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-theme] .glass{background:rgba(247,250,254,.96)!important}
 html[data-theme=dark] .glass{background:rgba(23,33,47,.96)!important}
}
@media(pointer:coarse){
 html[data-theme] .glass{backdrop-filter:blur(6px) saturate(145%);-webkit-backdrop-filter:blur(6px) saturate(145%)}
}
@media(prefers-reduced-transparency:reduce){
 html[data-theme] .glass,html[data-theme] dialog{background:#f5f8fc!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 html[data-theme=dark] .glass,html[data-theme=dark] dialog{background:#17212e!important}
 html[data-theme] .glass:before,html[data-theme] .glass:after{display:none}
}
@media(forced-colors:active){
 html[data-theme] .glass,html[data-theme] dialog,html[data-theme] .language-trigger{background:Canvas;border-color:CanvasText;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-theme] .primary{background:ButtonFace;color:ButtonText;box-shadow:none}
 .hero h1 span,.section-heading h2 span,.language-card h3{background:none;color:CanvasText}
 html[data-theme] .glass:before,html[data-theme] .glass:after{display:none}
}