/* Strategia '27 loader: opening sequence and page-to-page transition */
html.stg-loading, html.stg-loading body { overflow: hidden; }
#stg-loader { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; color: #fff;
  --ease: cubic-bezier(.76, 0, .24, 1); --open: .95s; --close: .6s; }
#stg-loader.stg-gone { display: none; }

/* two halves that meet on the horizon line */
#stg-loader .p { position: absolute; left: 0; right: 0; height: 50.2%; overflow: hidden; background: #06173a;
  transition: transform var(--open) var(--ease); will-change: transform; }
#stg-loader .p-top { top: 0; }
#stg-loader .p-bot { bottom: 0; }
#stg-loader .scene { position: absolute; left: 0; width: 100%; height: 100vh;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(227,30,36,.20), transparent 68%),
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(2,8,24,.72) 100%),
    radial-gradient(circle, rgba(255,255,255,.17) 1px, transparent 1.6px) 0 0 / 58px 58px,
    linear-gradient(#0a2552, #050f26);
  animation: stg-drift 14s linear infinite; }
#stg-loader .p-top .scene { top: 0; }
#stg-loader .p-bot .scene { bottom: 0; }
@keyframes stg-drift { to { background-position: 0 0, 0 0, 58px 58px, 0 0; } }
#stg-loader.stg-open .p-top { transform: translateY(-101%); }
#stg-loader.stg-open .p-bot { transform: translateY(101%); }

/* centre layer: logo resting on the horizon, counter below */
#stg-loader .c { position: absolute; inset: 0; transition: opacity .45s ease, transform .6s ease, filter .6s ease; }
#stg-loader.stg-out .c { opacity: 0; transform: scale(1.035); filter: blur(5px); }
#stg-loader .mid { position: absolute; left: 0; right: 0; top: 50%; height: 0; }
#stg-loader .logo { position: absolute; left: 50%; bottom: clamp(22px, 4vh, 40px); width: min(78vw, 660px); aspect-ratio: 2794 / 708;
  transform: translateX(-50%); background: url(../assets/strategia-logo.png) center / contain no-repeat;
  clip-path: inset(0 100% 0 0); animation: stg-wipe 1.15s .15s var(--ease) forwards; }
#stg-loader .logo::after { content: ""; position: absolute; inset: 0;
  -webkit-mask: url(../assets/strategia-logo.png) center / contain no-repeat; mask: url(../assets/strategia-logo.png) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
  mix-blend-mode: screen; animation: stg-sheen 1.5s 1.1s ease-in-out infinite; }
@keyframes stg-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes stg-sheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }

#stg-loader .line { position: absolute; left: 6vw; right: 6vw; top: 0; height: 2px; background: rgba(255,255,255,.14); }
#stg-loader .bar { position: absolute; inset: 0; background: #E31E24; transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 14px 1px rgba(227,30,36,.85), 0 0 40px 4px rgba(227,30,36,.35); }
#stg-loader .meta { position: absolute; left: 6vw; right: 6vw; top: clamp(14px, 2.4vh, 26px); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
#stg-loader .cap { margin: 0; padding-top: 8px; font-family: Newsreader, Georgia, serif; font-style: italic; font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.4; color: rgba(255,255,255,.66); opacity: 0; animation: stg-fade .8s 1.1s ease forwards; }
#stg-loader .num { font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: clamp(54px, 10vw, 132px); line-height: .9;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #fff; opacity: 0; animation: stg-fade .6s .5s ease forwards; }
@keyframes stg-fade { to { opacity: 1; } }

/* film grain over everything */
#stg-loader .grain { position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: stg-grain .9s steps(6) infinite; }
@keyframes stg-grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }

/* quick mode: used after the first page and when moving between pages */
html.stg-quick #stg-loader { --open: .7s; }
html.stg-quick #stg-loader .logo { clip-path: none; animation: stg-fade .35s ease both; opacity: 0; }
html.stg-quick #stg-loader .logo::after { animation-delay: .3s; }
html.stg-quick #stg-loader .meta { display: none; }

/* leaving the page: panels close over the content */
#stg-loader.stg-nav { --open: var(--close); }
#stg-loader.stg-nav .bar { transition: transform var(--close) var(--ease); transform: scaleX(1); }

@media (max-width: 560px) {
  #stg-loader .meta { flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
  #stg-loader .cap { text-align: right; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #stg-loader, #stg-loader * { animation: none !important; transition: none !important; }
  #stg-loader .logo { clip-path: none; } #stg-loader .cap, #stg-loader .num { opacity: 1; }
}