/* intro.css — ported from _intro_reveal_ref/style.css */
@import url("https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&display=swap");

/* ── Preloader overlay ── */
.preloader {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100svh;
  background-color: #000;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  will-change: clip-path;
  overflow: hidden;
  z-index: 200;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 7px;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ── Central image stack ── */
.preloader-images {
  position: absolute;
  top: 45%; left: 50%;
  transform: translate(-50%, -50%);
  width: 25rem; height: 25rem;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  will-change: clip-path;
  overflow: hidden;
}

.preloader-images .img {
  position: absolute;
  width: 100%; height: 100%;
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  will-change: clip-path;
  overflow: hidden;
}

/* Win95 CSS panels — replace reference photos */
.win95-panel {
  position: relative;
  width: 100%; height: 100%;
  transform: scale(2);
  will-change: transform;
  overflow: hidden;
}

/* Panel 1 – navy splash */
.win95-panel.p1 {
  background: #000080;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.4rem;
}
.p1-flag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 5.5rem; height: 5.5rem;
  gap: 0.18rem;
}
.p1-flag span { display: block; }
.p1-flag span:nth-child(1) { background: #FF3333; }
.p1-flag span:nth-child(2) { background: #33CC33; }
.p1-flag span:nth-child(3) { background: #3366FF; }
.p1-flag span:nth-child(4) { background: #FFCC00; }
.p1-wordmark {
  font-family: "MS Sans Serif","Tahoma","Gulim",sans-serif;
  font-size: 1.5rem; font-weight: bold; color: #fff;
  letter-spacing: 0; text-align: center;
}

/* Panel 2 – teal desktop with icons */
.win95-panel.p2 {
  background: #008080;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center; justify-items: center;
  padding: 1.5rem; gap: 0.5rem;
}
.p2-ico {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
.p2-ico img {
  width: 48px; height: 48px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  display: block;
}
.p2-ico span {
  font-family: "MS Sans Serif","Tahoma","Gulim",sans-serif;
  font-size: 10px; color: #fff; text-align: center;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  max-width: 72px;
}

/* Panel 3 – gray Win95 window */
.win95-panel.p3 {
  background: #c0c0c0;
  display: flex; align-items: center; justify-content: center;
}
.p3-window {
  width: 87%; height: 78%;
  display: flex; flex-direction: column;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}
.p3-titlebar {
  background: #000080;
  display: flex; align-items: center; gap: 4px;
  padding: 2px 4px; height: 22px; flex-shrink: 0;
}
.p3-titlebar img {
  width: 14px; height: 14px; flex-shrink: 0;
  image-rendering: pixelated;
}
.p3-title {
  flex: 1;
  font-family: "MS Sans Serif","Tahoma",sans-serif;
  font-size: 11px; color: #fff; font-weight: bold;
  white-space: nowrap; overflow: hidden;
}
.p3-winbtn {
  width: 16px; height: 14px; flex-shrink: 0;
  background: #c0c0c0;
  border-top: 2px solid #fff; border-left: 2px solid #fff;
  border-right: 2px solid #808080; border-bottom: 2px solid #808080;
  display: flex; align-items: center; justify-content: center;
  font-family: "MS Sans Serif","Tahoma",sans-serif;
  font-size: 9px; color: #000; line-height: 1;
}
.p3-body {
  flex: 1; background: #fff; padding: 8px;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px; color: #000;
  white-space: pre; overflow: hidden; line-height: 1.5;
}

/* Panel 4 – black with logo */
.win95-panel.p4 {
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
}
.p4-logo {
  width: 72%; max-width: 11rem;
  image-rendering: pixelated; display: block;
}
.p4-copy {
  font-family: "MS Sans Serif","Tahoma",sans-serif;
  font-size: 0.65rem; color: #505050;
  letter-spacing: 0; text-align: center;
}

/* ── Copy text ── */
.preloader-copy {
  position: absolute;
  bottom: 5rem; left: 50%;
  transform: translateX(-50%);
  width: 30%; color: #fff; overflow: hidden;
}
.preloader-copy p {
  text-transform: uppercase;
  text-align: center;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0;
  font-family: "MS Sans Serif","Tahoma","Gulim",sans-serif;
  overflow: hidden;
}

/* Skip hint */
.preloader-skip-hint {
  position: absolute; bottom: 1.6rem; right: 2rem;
  font-family: "MS Sans Serif","Tahoma",sans-serif;
  font-size: 9px; color: rgba(255,255,255,0.34);
  user-select: none; letter-spacing: 0;
  pointer-events: none;
}

/* ── Large floating header ── */
.preloader-header {
  position: fixed; width: 100%;
  display: flex; justify-content: center; align-items: center;
  transform: translateY(60svh);
  transform-origin: top;
  will-change: transform;
  z-index: 201;
  pointer-events: none;
}
.preloader-header a {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  font-family: "Agdasima", sans-serif;
  font-size: 7.5rem; font-weight: 700;
  line-height: 0.9; display: block;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(255,255,255,0.16), 2px 2px 0 rgba(0,0,0,0.8);
}

/* SplitText mask spans */
.preloader-header a .char,
.preloader-copy p .line,
.header-row h1 .line {
  position: relative;
  display: inline-block;
  transform: translateY(0);
  will-change: transform;
}

/* ── Hero text (revealed after preloader wipes) ── */
.intro-hero {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100svh;
  padding: 2rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: center; overflow: hidden;
  z-index: 100;
  pointer-events: none;
}
.header-row { position: relative; overflow: hidden; }
.divider {
  position: relative; width: 100%; height: 1.5px;
  transform: scaleX(0);
  background-color: rgba(255,255,255,0.3);
  will-change: transform;
}
.intro-hero h1 {
  text-transform: uppercase;
  font-size: 8rem; line-height: 1; letter-spacing: 0;
  color: #fff;
  font-family: "Agdasima", sans-serif;
  text-shadow: 2px 2px 14px rgba(0,0,0,0.95);
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .intro-hero h1 { font-size: 2rem; letter-spacing: 0; }
  .preloader-images { top: 35%; width: 10rem; height: 10rem; }
  .preloader-copy { width: 80%; }
  .preloader-header { transform: translateY(50svh); }
  .preloader-header a { font-size: 4rem; }
}