/* Loading screen (loader.js): the home OG banner come alive — blue light columns that drift, the
   "creatoroly" wordmark with a wave running through its letter weights, leaving the blue trail the
   project texts have on hover. When the site is ready the word sinks away and the columns drop out
   one by one, left to right. */

@font-face {
  font-family: "Life Changer";
  src: url("/assets/fonts/lifechanger.ttf") format("truetype");
  font-display: block;
}

/* while it's up, the page waits: its entrance animations are held on their first frame */
html.oly-loading { overflow: hidden; }
html.oly-loading body > :not(#olyLoader),
html.oly-loading body > :not(#olyLoader) * { animation-play-state: paused !important; }

#olyLoader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background: #f7f8fa;
  transition: background-color 0.6s ease;
  pointer-events: auto;
}
#olyLoader.is-out { background-color: rgba(247, 248, 250, 0); pointer-events: none; transition-delay: 0.55s; }

/* ---------- light columns ---------- */
.ol-cols { position: absolute; inset: 0; display: flex; }
.ol-col {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-left: 1px solid rgba(160, 196, 238, 0.22);
  background: #f7f8fa;
  transition: transform 0.9s cubic-bezier(.55, 0, .25, 1), opacity 0.7s ease;
  transition-delay: calc(var(--i) * 75ms);
}
.ol-col:first-child { border-left: 0; }
/* the blue glow rising from the bottom of each column; it breathes up and down on its own rhythm */
.ol-col::before {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  top: 0;
  height: 130%;
  background: linear-gradient(to bottom,
    rgba(247, 248, 250, 0) 0%,
    rgba(247, 248, 250, 0) 34%,
    rgba(226, 237, 252, 0.7) 52%,
    rgba(206, 226, 251, 0.95) 68%,
    rgba(196, 220, 250, 1) 80%,
    rgba(206, 226, 251, 0.9) 100%);
  filter: blur(22px);
  transform: translateY(var(--y0));
  animation: ol-breathe var(--d) ease-in-out var(--dl) infinite alternate;
}
@keyframes ol-breathe { to { transform: translateY(var(--y1)); } }
.is-out .ol-col { transform: translateY(70%); opacity: 0; }

/* film grain like the banner */
.ol-grain {
  position: absolute;
  inset: -50%;
  opacity: 0.33;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transition: opacity 0.6s ease 0.4s;
}
.is-out .ol-grain { opacity: 0; }

/* ---------- wordmark ---------- */
.ol-word {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(44px, 6.4vw, 104px);
  letter-spacing: -0.055em;
  line-height: 1;
  color: #141414;
  animation: ol-word-in 0.9s cubic-bezier(.22, .8, .25, 1) backwards;
  transition: transform 0.8s cubic-bezier(.5, 0, .3, 1), opacity 0.6s ease 0.1s, filter 0.6s ease 0.1s;
}
@keyframes ol-word-in { from { opacity: 0; filter: blur(10px); transform: translateY(-14px); } }
.is-out .ol-word { transform: translateY(46px); opacity: 0; filter: blur(8px); }
.ol-word span { display: inline-block; }
.ol-hand {                                   /* "oLy" in Life Changer */
  font-family: "Life Changer", cursive;
  font-size: 1.12em;
  letter-spacing: 0;
  margin-left: 0.03em;
}
.ol-hand span { transform-origin: 50% 70%; }

@media (prefers-reduced-motion: reduce) {
  .ol-col::before, .ol-word { animation: none; }
  .ol-col { transition-delay: 0s; }
}