/* Site backdrop, lifecycle visibility and content entrance only.
   Liquid-glass optics remain the unmodified source library. */
:root { --portfolio-base: var(--paper, #f5f7f5); }
.home-section {
  background: linear-gradient(180deg, #03051d 0%, #071a58 31%, #0752c9 61%, #69c9f5 79%, #d7effa 90%, var(--portfolio-base) 100%);
}
.halftone-hero { position: relative; }
.hero-halftone-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
  -webkit-mask-image: linear-gradient(#000 0%, #000 72%, transparent 94%);
  mask-image: linear-gradient(#000 0%, #000 72%, transparent 94%);
}
.halftone-hero .home-copy,
.halftone-hero .home-visual,
.halftone-hero .section-baseline { position: relative; }
.halftone-hero .section-baseline { position: absolute; }
.halftone-hero .home-copy { color: #f4f9ff; }
.halftone-hero .home-copy .eyebrow,
.halftone-hero .hero-intro,
.halftone-hero .hero-tags { color: #e3edff; }
.halftone-hero .blue-word { color: #a9e7ff; }
.halftone-hero .hero-tags span { border-color: #d7ecff70; }
.halftone-hero .home-note { color: #243c55; }
.halftone-hero .home-note p,
.halftone-hero .home-note .tiny-label { color: inherit; }
.halftone-hero .vertical-label { color: #b6d8f5; }
.halftone-hero .section-baseline { border-color: #8cb6cb66; }
.halftone-hero .hero-orbit { display: none; }
body.halftone-opening .site-header,
body.halftone-opening .home-copy,
body.halftone-opening .home-visual,
body.halftone-opening .section-baseline,
body.halftone-opening .utility-dock,
body.halftone-opening .liquid-portal-stage {
  visibility: hidden;
  opacity: 0;
  pointer-events: none !important;
}
body.halftone-content-ready .halftone-hero .home-copy,
body.halftone-content-ready .halftone-hero .home-visual,
body.halftone-content-ready .halftone-hero .section-baseline {
  animation: halftone-content-enter 900ms cubic-bezier(.16,.8,.25,1) both;
}
body.halftone-content-ready .halftone-hero .home-visual { animation-delay: 110ms; }
body.halftone-content-ready .halftone-hero .section-baseline { animation-delay: 180ms; }
body.halftone-content-ready .site-header .brand {
  animation: halftone-content-enter 800ms cubic-bezier(.16,.8,.25,1) both;
}
/* Fade the original optical stage, never add a filter/transform to its
   backdrop ancestors. Blur only the foreground labels/icons as they arrive. */
body.halftone-content-ready .liquid-portal-stage {
  animation: halftone-ui-enter 800ms ease backwards;
}
body.halftone-content-ready .liquid-portal-stage .liquid-item,
body.halftone-content-ready .liquid-portal-stage .relief-icon {
  animation: halftone-label-enter 800ms ease both;
}
@keyframes halftone-content-enter {
  from { opacity: 0; filter: blur(14px); transform: translateY(16px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes halftone-ui-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes halftone-label-enter { from { filter: blur(9px); } to { filter: blur(0); } }
@media (max-width:720px), (max-width:950px) and (orientation:portrait) {
  .home-section { background: linear-gradient(180deg,#03051d 0%,#071a58 25%,#0752c9 52%,#69c9f5 75%,#e9f7fe 91%,var(--portfolio-base) 100%); }
  .halftone-hero .home-note { color: #e3edff; }
  .hero-halftone-canvas { opacity: .78; }
}
@media (prefers-reduced-motion:reduce) {
  body.halftone-content-ready .halftone-hero .home-copy,
  body.halftone-content-ready .halftone-hero .home-visual,
  body.halftone-content-ready .halftone-hero .section-baseline,
  body.halftone-content-ready .site-header .brand,
  body.halftone-content-ready .liquid-portal-stage,
  body.halftone-content-ready .liquid-portal-stage .liquid-item,
  body.halftone-content-ready .liquid-portal-stage .relief-icon { animation: none; }
}
.reduce-motion .halftone-hero .home-copy,
.reduce-motion .halftone-hero .home-visual,
.reduce-motion .halftone-hero .section-baseline,
.reduce-motion body.halftone-content-ready .site-header .brand,
.reduce-motion body.halftone-content-ready .liquid-portal-stage,
.reduce-motion body.halftone-content-ready .liquid-portal-stage .liquid-item,
.reduce-motion body.halftone-content-ready .liquid-portal-stage .relief-icon { animation: none !important; }