.marquee {
	animation: scrolling var(--marquee-time) linear infinite;
}

@keyframes scrolling {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-1 * var(--marquee-width))); }
}

/* ------------------------------------------------------------------
   Scroll timelines
------------------------------------------------------------------ */
#hero {
  view-timeline-name: --hero;
  view-timeline-axis: block;
}

#content {
  view-timeline-name: --content;
  view-timeline-axis: block;
}

#app {
  timeline-scope: --hero, --content;
}

/* ------------------------------------------------------------------
   Animatable custom properties
   - separiamo tinta (glass) e blur (backdrop-filter)
------------------------------------------------------------------ */
@property --glass {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --blur {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --sat {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --bri {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* ------------------------------------------------------------------
   Header base
------------------------------------------------------------------ */
header.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;

  color: rgb(255 255 255 / 0.95);

  /* stacking context */
  isolation: isolate;

  /* valori di default = glass OFF */
  --glass: 0;
  --blur: 0px;
  --sat: 1;
  --bri: 1;
}

/* contenuto sopra il vetro */
header.site-header > * {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------
   Glass layer (tinta + blur nello stesso layer, ma senza opacity)
   - niente opacity: è la chiave per Chrome
------------------------------------------------------------------ */
header.site-header::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  /* tinta + gradienti (pilotati da --glass) */
  background:
    linear-gradient(to bottom,
      rgb(255 255 255 / calc(0.55 * var(--glass))),
      rgb(255 255 255 / calc(0.18 * var(--glass))) 35%,
      rgb(255 255 255 / calc(0.10 * var(--glass)))
    ),
    linear-gradient(135deg,
      rgb(255 255 255 / calc(0.18 * var(--glass))),
      rgb(255 255 255 / 0) 55%
    );

  border-bottom: 1px solid rgb(255 255 255 / calc(0.35 * var(--glass)));

  box-shadow:
    0 18px 40px rgb(0 0 0 / calc(0.18 * var(--glass))),
    inset 0 1px 0 rgb(233 226 208 / calc(0.35 * var(--glass)));

  transform: translateZ(0);
}

/* highlight superiore sottile */
header.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: 1px;
  pointer-events: none;

  background: linear-gradient(to right,
    rgb(255 255 255 / 0),
    rgb(223 226 208 / calc(1 * var(--glass))),
    rgb(255 255 255 / 0)
  );

  transform: translateZ(0);
}

/* ------------------------------------------------------------------
   Backdrop filter (Chrome + Safari)
   - sempre dichiarato, ma con --blur: 0px è visivamente OFF
------------------------------------------------------------------ */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.site-header::before {
    -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) brightness(var(--bri));
    backdrop-filter: blur(var(--blur)) saturate(var(--sat)) brightness(var(--bri));
  }
}

/* ------------------------------------------------------------------
   Scroll-driven animation
------------------------------------------------------------------ */
@keyframes headerGlassVars {
  from {
    --glass: 0;
    --blur: 0px;
    --sat: 1;
    --bri: 1;
  }
  to {
    --glass: 1;
    --blur: 8px;
    --sat: 1;
    --bri: 1;
  }
}

@keyframes headerTone {
  from { color: rgb(255 254 247); }
  to   { color: rgb(49 46 43); }
}

@supports (animation-timeline: --content) {
  header.site-header::before,
  header.site-header::after {
    animation-name: headerGlassVars;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;

    animation-timeline: --content;
    animation-range: entry 20% entry 100%;
  }

  header.site-header {
    animation-name: headerTone;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;

    animation-timeline: --content;
    animation-range: entry 20% entry 100%;
  }
}

/* ------------------------------------------------------------------
   Reveal animation
------------------------------------------------------------------ */
[data-hidden]:not(article) {
	opacity: 0;
	transform: translateY(200px);
	will-change: opacity, transform;
	transition: none;
}

article[data-hidden="true"] {
	opacity: 0;
	transform: scale(0.98);
	pointer-events: none;
	height: 0;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-width: 0;
	overflow: hidden;
}

article[data-hidden="false"] {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.fson-video__play {
  transition: opacity .2s ease, transform .2s ease;
}
  
[data-fadeIn-up] {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}