/* ============================================================
   Liquid glass — the page's panel material
   ============================================================
   Loaded LAST on purpose: every rule here is meant to win over the flat
   background/border it replaces in style.css, and file order does that
   without a specificity arms race.

   What separates this from plain glassmorphism (a blur plus a flat 1px
   border) is that a panel is LIT rather than tinted:

   - the backdrop is not only blurred but SATURATED and lifted in brightness,
     so the LiquidEther field behind comes through as colour instead of grey
     mush. This is the biggest single tell of the material;
   - the rim is a conic ring — bright where the light lands, nearly out on the
     opposite side — instead of one uniform hairline. Edge luminance is what
     reads as THICKNESS, and a uniform border kills it;
   - a specular sheen sits on top in plus-lighter and DRIFTS a few percent
     with the pointer (js/liquid-glass.js) rather than following it;
   - the drop shadow is a stack (wide ambient + tight contact) so the panel
     floats off the page instead of being drawn onto it;
   - a trace of grain stops the large flat areas from banding.

   Three shapes, one material:

     .liquid-glass                 the base panel (cards, table, fact list)
     .liquid-glass--btn            pills: tighter shadow, no grain, no lens
     .liquid-glass--bar            full-width strips: one edge, no ring

   Apply by adding the class in the markup. Nested pieces (icon chips, tags,
   project previews) pick the material up automatically from their panel, so
   they need no class of their own.

   Deliberately NOT applied: the hero ProfileCard (css/profile-card.css owns
   its own material), and the nav wheel / audio HUD in css/option-wheel.css,
   which are 3D-lit components rather than flat panels.

   Degrades cleanly: a solid-ish panel where backdrop-filter is missing, an
   opaque one under prefers-reduced-transparency, and a static highlight under
   prefers-reduced-motion. */


/* ============================================================
   1. Base panel
   ============================================================ */

.liquid-glass {
  /* Tint kept as raw components so every layer below can dial its own alpha
     off one colour. Swapping these three numbers re-tints the whole panel —
     which is exactly how the amber buttons further down are built. */
  --lg-tint: 255 255 255;
  --lg-radius: 26px;
  /* Resting position of the specular highlight: above-left, matching where
     the rest of the page is lit from. js/liquid-glass.js nudges these by a
     few percent as the pointer moves and eases them back here on leave — a
     drift, not a follow. Change these and change the constants at the top of
     that file to match, or the highlight will settle somewhere else than it
     starts. */
  --lg-sheen-x: 18%;
  --lg-sheen-y: -6%;

  position: relative;
  /* Contains the plus-lighter sheen so it brightens this panel and nothing
     underneath it. */
  isolation: isolate;
  border: 0;
  border-radius: var(--lg-radius);
  /* Apple's panels are squircles, not rounded rectangles — continuous
     curvature instead of an arc spliced onto straight edges. Chrome 139+;
     ignored elsewhere, where the plain radius stands. */
  corner-shape: squircle;

  /* The body of the glass. Not a flat fill: denser at the top where light
     enters, nearly clear through the middle, picking up again at the bottom
     lip where the panel rests. */
  background-color: rgb(var(--lg-tint) / 0.045);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E"),
    linear-gradient(177deg,
      rgb(var(--lg-tint) / 0.11) 0%,
      rgb(var(--lg-tint) / 0.03) 30%,
      rgb(var(--lg-tint) / 0) 58%,
      rgb(var(--lg-tint) / 0.055) 100%);
  background-size: 140px 140px, auto;

  /* saturate() is doing the heavy lifting here, not blur(). */
  -webkit-backdrop-filter: blur(20px) saturate(210%) brightness(1.14) contrast(1.04);
          backdrop-filter: blur(20px) saturate(210%) brightness(1.14) contrast(1.04);

  box-shadow:
    /* ambient — wide, soft, well offset: the panel is above the page */
    0 34px 70px -30px rgba(0, 0, 0, 0.9),
    /* contact — tight and close, so it doesn't look pasted on */
    0 10px 22px -14px rgba(0, 0, 0, 0.65),
    /* top lip catching the light, bottom lip catching the bounce */
    inset 0 1px 0 0 rgb(var(--lg-tint) / 0.42),
    inset 0 -1px 0 0 rgb(var(--lg-tint) / 0.09),
    /* the glass has depth: light falls off inward from the top edge, and the
       base pools slightly darker */
    inset 0 20px 36px -28px rgb(var(--lg-tint) / 0.34),
    inset 0 -28px 46px -36px rgba(0, 0, 0, 0.55);

  transition:
    transform 0.6s var(--ease),
    box-shadow 0.6s var(--ease),
    background-color 0.6s var(--ease);
}

/* Rim light. A conic sweep masked to a hairline: brightest along the top lip,
   a second crest along the bottom (the bounce), dimmer down the sides, and
   never fully out — an edge that disappears takes the thickness with it.
   This is the layer to reach for first if the material ever looks flat. */
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  corner-shape: inherit;
  padding: 1.5px;
  background: conic-gradient(from 340deg at 50% 50%,
    rgb(var(--lg-tint) / 0.80)   0deg,
    rgb(var(--lg-tint) / 0.30)  62deg,
    rgb(var(--lg-tint) / 0.15) 120deg,
    rgb(var(--lg-tint) / 0.48) 188deg,
    rgb(var(--lg-tint) / 0.19) 248deg,
    rgb(var(--lg-tint) / 0.32) 308deg,
    rgb(var(--lg-tint) / 0.80) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Specular sheen. plus-lighter (not normal alpha) is what makes it behave
   like light landing on the surface rather than white paint laid over it.
   Alphas are kept low on purpose: any higher and it stops being a reflection
   and becomes a second lamp switched on inside the box. */
.liquid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 0;
  border-radius: inherit;
  corner-shape: inherit;
  background:
    /* the drifting highlight */
    radial-gradient(58% 40% at var(--lg-sheen-x) var(--lg-sheen-y),
      rgb(var(--lg-tint) / 0.15) 0%,
      rgb(var(--lg-tint) / 0.03) 40%,
      transparent 66%),
    /* fixed glaze on the top lip, whatever the pointer is doing */
    linear-gradient(180deg,
      rgb(var(--lg-tint) / 0.07) 0%,
      transparent 14%),
    /* warm bounce off the page's accent — a hint that the panel sits in this
       page's light, not a source of its own */
    radial-gradient(58% 42% at 86% 112%,
      rgba(219, 107, 43, 0.11) 0%,
      transparent 60%);
  -webkit-mask: none;
          mask: none;
  /* Cancels .spotlight-card::after's amber shimmer sweep, which this
     replaces. */
  animation: none;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}


/* ============================================================
   2. Interactive lift
   ============================================================
   Only things you can actually press. Two reasons not to put this on the
   base: a fact list has no business rising to meet the cursor, and
   .results-carousel is a js/nav-dodge.js target — that file writes `transform`
   inline, which would beat any hover transform declared here and leave a
   half-working effect behind. (The carousel's cards are pressable, but they are
   moved by the component's own animations, so they stay off this list too.) */

/* Solo dove c'e' un puntatore vero — vedi la nota estesa in css/layout.css,
   sotto .spotlight-card:hover. */
@media (hover: hover) {
.spotlight-card.liquid-glass:hover {
  transform: translateY(-6px);
  background-color: rgb(var(--lg-tint) / 0.065);
  box-shadow:
    0 46px 90px -32px rgba(0, 0, 0, 0.92),
    0 14px 28px -16px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 0 rgb(var(--lg-tint) / 0.50),
    inset 0 -1px 0 0 rgb(var(--lg-tint) / 0.11),
    inset 0 20px 36px -28px rgb(var(--lg-tint) / 0.42),
    inset 0 -28px 46px -36px rgba(0, 0, 0, 0.55);
}
}


/* ============================================================
   3. Nested pieces
   ============================================================
   A glass panel with a flat bordered box sitting on it reads as a sticker;
   anything inside has to be cut from the same stuff, one step smaller and one
   step brighter.

   None of these carry a backdrop-filter of their own, and that is deliberate:
   their panel is `isolation: isolate`, so a nested backdrop-filter would
   sample the PANEL's own content rather than the page behind it — a blur of
   the wrong thing. Gradients and inset light only. */

.liquid-glass .card-icon {
  border: 0;
  border-radius: 15px;
  corner-shape: squircle;
  background: linear-gradient(180deg,
    rgb(var(--lg-tint) / 0.15) 0%,
    rgb(var(--lg-tint) / 0.03) 100%);
  box-shadow:
    inset 0 1px 0 0 rgb(var(--lg-tint) / 0.36),
    inset 0 -1px 0 0 rgb(var(--lg-tint) / 0.06),
    0 6px 14px -9px rgba(0, 0, 0, 0.8);
  transition:
    transform 0.5s var(--ease),
    background 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
@media (hover: hover) {
.liquid-glass:hover .card-icon {
  background: linear-gradient(180deg,
    rgba(219, 107, 43, 0.34) 0%,
    rgba(219, 107, 43, 0.10) 100%);
  box-shadow:
    inset 0 1px 0 0 rgb(var(--lg-tint) / 0.42),
    inset 0 -1px 0 0 rgb(var(--lg-tint) / 0.08),
    0 8px 18px -9px rgba(0, 0, 0, 0.8);
}
}

/* The project thumbnail well. Recessed rather than raised — the inset shadow
   runs from the top, the opposite of every other piece here, so it reads as a
   hollow cut into the panel instead of another tile laid on it. */
.liquid-glass .project-preview {
  border: 0;
  border-radius: 16px;
  corner-shape: squircle;
  background:
    linear-gradient(150deg,
      rgba(219, 107, 43, 0.13) 0%,
      rgb(var(--lg-tint) / 0.02) 55%,
      rgba(219, 107, 43, 0.05) 100%);
  box-shadow:
    inset 0 2px 6px -2px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 0 rgb(var(--lg-tint) / 0.16),
    inset 0 0 0 1px rgb(var(--lg-tint) / 0.05);
}

/* Tag pills. Small enough that the conic ring would be invisible, so they
   get the cheap version: a vertical gradient and a lit top edge. */
.liquid-glass .tag {
  border: 0;
  background: linear-gradient(180deg,
    rgb(var(--lg-tint) / 0.11) 0%,
    rgb(var(--lg-tint) / 0.025) 100%);
  box-shadow:
    inset 0 1px 0 0 rgb(var(--lg-tint) / 0.22),
    inset 0 -1px 0 0 rgb(var(--lg-tint) / 0.05),
    0 3px 8px -6px rgba(0, 0, 0, 0.9);
}


/* ============================================================
   4. Pills — buttons
   ============================================================
   The panel's 20px blur and 70px shadow spread are sized for a 300px card;
   on a 50px pill they just smear. Everything here is the same material at a
   smaller scale, minus the grain (invisible) and the lens (see section 7).

   The hover glow the buttons already had is preserved, and it is preserved
   the hard way: box-shadow is a single property, so a naive
   `:hover { box-shadow: <glow> }` would wipe the whole glass stack — rim,
   depth and all — every time the pointer arrived. Instead the glow is a slot
   (--lg-glow) at the head of the list, and the stack lives in --lg-btn-shadow
   so the pulse keyframes can carry it through every frame. */

.liquid-glass--btn {
  --lg-radius: 999px;
  /* A capsule is already the shape it wants to be. */
  corner-shape: round;

  --lg-glow: 0 0 0 0 rgba(219, 107, 43, 0);
  --lg-btn-shadow:
    0 12px 26px -14px rgba(0, 0, 0, 0.85),
    0 3px 8px -5px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 0 rgb(var(--lg-tint) / 0.34),
    inset 0 -1px 0 0 rgb(var(--lg-tint) / 0.08),
    inset 0 9px 18px -16px rgb(var(--lg-tint) / 0.45);

  background-image: linear-gradient(180deg,
    rgb(var(--lg-tint) / 0.13) 0%,
    rgb(var(--lg-tint) / 0.02) 55%,
    rgb(var(--lg-tint) / 0.06) 100%);
  background-size: auto;

  -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.1);
          backdrop-filter: blur(14px) saturate(190%) brightness(1.1);

  box-shadow: var(--lg-glow), var(--lg-btn-shadow);

  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    background-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

/* A pill is too small to read a drifting highlight, and too small for the
   full ring to survive the corner radius: one crisp top-lit arc instead. */
.liquid-glass--btn::before {
  padding: 1px;
  background: linear-gradient(170deg,
    rgb(var(--lg-tint) / 0.62) 0%,
    rgb(var(--lg-tint) / 0.16) 42%,
    rgb(var(--lg-tint) / 0.10) 60%,
    rgb(var(--lg-tint) / 0.30) 100%);
}
.liquid-glass--btn::after {
  background: linear-gradient(180deg,
    rgb(var(--lg-tint) / 0.10) 0%,
    transparent 45%);
}

.liquid-glass--btn:hover { transform: translateY(-2px); }

/* --- Primary. Apple's prominent buttons are not transparent: they are glass
       filled nearly to opacity so they stay the loudest thing on the page.
       Dropping this to the panel's 4% tint would have cost the page its only
       high-contrast call to action. --- */
.liquid-glass--btn.btn-solid {
  background-color: rgb(255 255 255 / 0.88);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0) 55%,
    rgba(0, 0, 0, 0.05) 100%);
  color: #050505;
}
/* On a near-white pill the conic ring has nothing to be brighter than, so
   the rim inverts: lit along the top, faintly shaded underneath. */
.liquid-glass--btn.btn-solid::before {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(0, 0, 0, 0.12) 100%);
}
.liquid-glass--btn.btn-solid::after {
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.055) 100%);
  mix-blend-mode: normal;
}
.liquid-glass--btn.btn-solid:hover {
  /* The amber bloom this button always had, now sitting in front of the
     glass stack instead of replacing it. */
  --lg-glow: 0 8px 30px rgba(219, 107, 43, 0.45);
  background-color: rgb(255 255 255 / 0.95);
}

/* --- Secondary. Hover swaps the tint wholesale, so rim, glaze and body all
       go amber together — one declaration instead of chasing border-color,
       colour and background separately. --- */
.liquid-glass--btn.btn-ghost { color: var(--text); }
.liquid-glass--btn.btn-ghost:hover {
  --lg-tint: 219 107 43;
  --lg-glow: 0 8px 26px -6px rgba(219, 107, 43, 0.34);
  background-color: rgba(219, 107, 43, 0.14);
  color: var(--accent);
}

/* --- Navbar CTA: amber glass rather than flat amber. --- */
.liquid-glass--btn.cta-button {
  --lg-tint: 255 236 226;
  background-color: rgba(219, 107, 43, 0.82);
  color: #050505;
  animation: lg-pulse 2.6s var(--ease) infinite;
}
.liquid-glass--btn.cta-button:hover { background-color: rgba(219, 107, 43, 0.94); }

/* The pulsing ring, rebuilt to carry the glass stack through every keyframe.
   Without the var() on each stop the animation would flatten the button for
   its whole cycle, since an animated box-shadow replaces the property
   outright rather than adding to it. */
.liquid-glass--btn.pulse-shadow { animation: lg-pulse 2.4s var(--ease) infinite; }

@keyframes lg-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(219, 107, 43, 0.5), var(--lg-btn-shadow); }
  70%  { box-shadow: 0 0 0 18px rgba(219, 107, 43, 0),   var(--lg-btn-shadow); }
  100% { box-shadow: 0 0 0 0    rgba(219, 107, 43, 0),   var(--lg-btn-shadow); }
}


/* ============================================================
   5. Bars — navbar and footer
   ============================================================
   A strip that runs the full width has no corners to catch light and nothing
   to float above, so the ring and the drop shadow both come off. What is left
   is the backdrop treatment plus a single lit edge on the content side,
   brightest at the middle where the eye is. */

.liquid-glass--bar {
  --lg-radius: 0px;
  corner-shape: round;
  background-color: rgb(var(--lg-tint) / 0.04);
  background-image: linear-gradient(180deg,
    rgb(var(--lg-tint) / 0.06) 0%,
    transparent 60%);
  background-size: auto;
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.06);
          backdrop-filter: blur(24px) saturate(200%) brightness(1.06);
  box-shadow: none;
}

.liquid-glass--bar::before {
  inset: auto 0 0 0;            /* bottom edge, for a bar above content */
  height: 1px;
  padding: 0;
  border-radius: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgb(var(--lg-tint) / 0.20) 20%,
    rgb(var(--lg-tint) / 0.34) 50%,
    rgb(var(--lg-tint) / 0.20) 80%,
    transparent 100%);
  -webkit-mask: none;
          mask: none;
}

/* Footer: same bar, edge on the other side. */
.liquid-glass--bar-top::before { inset: 0 0 auto 0; }

/* No interior sheen on a strip — there is no volume for it to sit on. */
.liquid-glass--bar::after { display: none; }

/* The navbar only materialises once the page has moved; at the top of the
   document it stays invisible, exactly as before. */
.navbar.liquid-glass {
  /* ===== Ripristina il fissaggio in cima =====
     .navbar dichiara position: fixed in css/layout.css. .liquid-glass, in
     testa a QUESTO file, dichiara position: relative — gli serve, perche' i
     suoi due pseudo-elementi (il bordo di luce e il riflesso) sono in
     posizione assoluta e devono ancorarsi al pannello.

     Le due regole hanno la stessa specificita' e questo file si carica dopo,
     quindi vinceva `relative`: la barra smetteva di essere fissata in cima.

     Non se n'era accorto nessuno perche' in modalita' a scene il documento
     non scorre mai — body.scene-pinned mette overflow:hidden — e una barra
     `relative` in cima al documento sembra in tutto e per tutto una barra
     fissata. Il difetto veniva fuori solo dove la pagina scorre davvero: con
     "Riduci movimento" acceso, dove la modalita' a scene non si aggancia. Li'
     la barra se ne andava via scorrendo e il menu spariva dopo mezzo pollice.

     La specificita' qui e' 0,2,0 contro 0,1,0, quindi questa riga vince
     senza bisogno di !important. */
  position: fixed;
  background-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition:
    background-color 0.5s var(--ease),
    backdrop-filter 0.5s var(--ease),
    -webkit-backdrop-filter 0.5s var(--ease);
}
.navbar.liquid-glass::before { opacity: 0; transition: opacity 0.5s var(--ease); }
.navbar.liquid-glass.scrolled {
  background-color: rgb(var(--lg-tint) / 0.05);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.06);
          backdrop-filter: blur(24px) saturate(200%) brightness(1.06);
}
.navbar.liquid-glass.scrolled::before { opacity: 1; }

/* In scene mode the footer is not a strip at the end of a page, it is a
   drawer that rises over a live section — so it keeps a real fill and only
   borrows the material. Fully transparent here would leave the section
   underneath legible straight through the contact details, and would put the
   LaserFlow beam through the panel it is supposed to be landing on.

   The extra class in the selector is what outranks style.css's
   `body.scene-mode-ready .footer { background: var(--bg) }`. */
@media (min-width: 981px) {
  body.scene-mode-ready .footer.liquid-glass {
    background-color: rgba(9, 9, 11, 0.82);
    border-top: 0;
  }
}


/* ============================================================
   6. Fallbacks
   ============================================================ */

/* No backdrop compositing available — keep the panels readable rather than
   letting them vanish into the page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass { background-color: rgba(28, 28, 30, 0.86); }
  .liquid-glass--bar { background-color: rgba(12, 12, 14, 0.94); }
  .liquid-glass--btn.btn-ghost { background-color: rgba(38, 38, 42, 0.9); }
}

/* Readers who ask for less transparency get the panel, not the trick. */
@media (prefers-reduced-transparency: reduce) {
  .liquid-glass {
    background-color: rgba(28, 28, 30, 0.92);
    -webkit-backdrop-filter: saturate(140%);
            backdrop-filter: saturate(140%);
  }
  .liquid-glass--bar { background-color: rgba(12, 12, 14, 0.96); }
  .liquid-glass--btn.btn-solid { background-color: #fff; }
}


/* ============================================================
   7. Refraction (Chromium only)
   ============================================================
   The panel's backdrop is displaced by a gradient map (defined inline in
   index.html) that is neutral through the middle and ramps hard over the
   outer quarter, so what sits behind gets BENT at the rim the way it would
   through a real thickness of glass. It is the one part of the material a
   stack of gradients cannot fake.

   Splitting the blur around the displacement is deliberate: the blur BEFORE
   stops the map tearing individual pixels, the small one after smooths the
   stretched edge. Total blur is unchanged.

   The gate is a Chromium test, not a feature test, because Safari and Firefox
   both parse url() in backdrop-filter and then render nothing — a plain
   @supports would blank the panels on two engines. -apple-system-body rules
   out Safari, -moz-appearance rules out Firefox.

   Pills and bars are excluded: the map is stretched to the element's box, so
   on a 50px pill the ramp swallows the whole thing, and on a 1600px bar it
   smears the backdrop across 400px. It is a panel effect. */
@supports (backdrop-filter: url("#lg-lens"))
      and (not (font: -apple-system-body))
      and (not (-moz-appearance: none)) {
  .liquid-glass:not(.liquid-glass--btn):not(.liquid-glass--bar) {
    -webkit-backdrop-filter: blur(11px) saturate(210%) brightness(1.14) contrast(1.04) url(#lg-lens) blur(2px);
            backdrop-filter: blur(11px) saturate(210%) brightness(1.14) contrast(1.04) url(#lg-lens) blur(2px);
  }
}

/* The filter defs in index.html carry no visual output of their own. */
.glass-filters { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ============================================================
   8. Layout adjustments the panels ask for
   ============================================================ */

/* .about-facts used to be a list sitting under a hairline rule. As a panel it
   needs an inset of its own instead — the rule is gone (the base sets
   `border: 0`) and the rim has taken over the job of separating it. */
.about-facts.liquid-glass {
  padding: 26px 30px;
  margin-top: 34px;
}