/* ============================================================
   UXPLAY custom layer — reimagined from the original Readymag
   custom-code block. Glass is now a single class (.uxp-glass)
   driven by a data-list in uxp.js, not 30+ duplicated selectors.
   ============================================================ */

/* ---- brand font (self-hosted, was yoyophoto.com 503) ---- */
@font-face{
  font-family:"Euclid Flex";
  src:url("/assets/custom/EuclidFlex-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ============================================================
   1) FROSTED GLASS — one rule, applied via JS by data-id group.
   Radius is set per element from the JS group map.
   ============================================================ */
.uxp-glass{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
}

/* ============================================================
   2) HERO typing cursor
   ============================================================ */
.uxp-cursor{ font-style:italic; animation:uxp-blink .8s step-end infinite; color:#fff; }
@keyframes uxp-blink{ 50%{ opacity:0; } }

/* ============================================================
   3) PRELOADER
   ============================================================ */
#uxp-preloader{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  background:#003DFF; overflow:hidden; opacity:1;
  transition:opacity .8s ease;
}
#uxp-preloader.is-done{ opacity:0; pointer-events:none; }

#uxp-preloader__inner{
  display:grid;
  grid-template-areas:"pct" "logo" "phrase";
  row-gap:16px; justify-items:center; align-items:center; text-align:center;
  color:#fff;
  font-family:"Euclid Flex",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  opacity:0; transform:translateY(20px);
  animation:uxp-fade-in 1s ease .15s forwards;
}
@keyframes uxp-fade-in{ to{ opacity:1; transform:translateY(0); } }

#uxp-preloader__pct,
#uxp-preloader__phrase{
  grid-area:pct; font-size:clamp(24px,4vw,36px); font-weight:400;
  line-height:1.1; letter-spacing:.02em; opacity:.9; margin:0;
  animation:uxp-breathe 1.2s ease-in-out infinite alternate;
}
#uxp-preloader__phrase{ grid-area:phrase; }
@keyframes uxp-breathe{ from{ opacity:.6; } to{ opacity:1; } }

#uxp-preloader__logo{ grid-area:logo; position:relative; width:min(300px,70vw); height:min(200px,46vw); display:grid; place-items:center; overflow:hidden; isolation:isolate; }
#uxp-preloader__logo video{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(2.6); transform-origin:center; position:relative; z-index:1; }

/* light-blue grain — sparse bright specks tinted to brand blue (same recipe as the
   Galoodin login brand-pane). Plain alpha compositing, no blend mode, so it reads
   identically over the gradient AND over the video logo, cross-browser. */
#uxp-preloader::after,
#uxp-preloader__logo::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0' intercept='0.62'/%3E%3CfeFuncG type='linear' slope='0' intercept='0.78'/%3E%3CfeFuncB type='linear' slope='0' intercept='1'/%3E%3CfeFuncA type='linear' slope='1.1' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
#uxp-preloader::after{ opacity:.5; }
#uxp-preloader__logo::after{ opacity:.6; }

/* hide video logo on small / touch — text-only preloader */
@media (max-width:480px),(pointer:coarse){
  #uxp-preloader__logo{ display:none; }
}

/* soft background pulse used before the logo frame is ready */
#uxp-preloader-pulse{ position:fixed; inset:0; z-index:999998; background:#003DFF; animation:uxp-bg-pulse 2s ease-in-out infinite; transition:opacity .4s ease; }
@keyframes uxp-bg-pulse{ 0%{ background:#003DFF; } 50%{ background:#174FFF; } 100%{ background:#003DFF; } }