/* 90s Inspired Landing Page */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure Arial everywhere */
html { font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font-family: inherit; }

:root {
    --bg-dark: #fff;
    --fg-dark: #fff;
    --bg-light: #fff;
    --fg-light: #fff;
    --overlay-dim-dark: #040404;
    --overlay-dim-light: #666;
    --hint-dark: rgba(255,255,255,0.28);
    --hint-light: rgba(0,0,0,0.28);
    --max-media: 1200px;
    --content-max: 920px;
    --measure: 46ch;
    --logo-h: 28px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--bg-dark);
    color: var(--fg-dark);
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    /* Pixel-ish text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
    font-smooth: optimizeLegibility;
    text-rendering: optimizeLegibility;
}

.container {
    text-align: center;
}

/* Online landing (hero stamp + copy + CTA) */
.online-landing { position: relative; width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; text-align: left; padding: 0; background: #040404; overflow: hidden; }
.online-landing .hero { font-size: clamp(64px, 20vw, 220px); font-weight: 700; line-height: 0.9; color: #fff; }
.online-landing .hero-logo { width: clamp(260px, 66vw, 1200px); height: auto; display: block; }
.online-landing .hero-stamp { position: absolute; bottom: 2vh; left: 50%; transform: translateX(-50%); width: min(120vw, 1460px); max-width: 100vw; height: auto; opacity: 0.9; filter: grayscale(0) brightness(1.1); }
.online-landing .subtle { display: none; }

/* Header (shared) */
.site-header { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; z-index: 20; }
.logo-small { height: var(--logo-h); display: block; }
/* Unified wifi button (asset contains circle) */
.wifi-btn { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; border: none; background: transparent; padding: 0; cursor: pointer; transition: opacity 0.2s ease; }
.wifi-btn:hover { opacity: 0.7; }
/* Show logo + wifi on desktop to match mobile */
.site-header.online .logo-small,
.site-header.online .wifi-btn { display: block; }
.site-header .logo-small { height: 32px; }
.wifi-btn .wifi-icon { width: 40px; height: 40px; display: block; margin: 0; }

/* Online copy + CTA */
.online-landing .copy { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 640px; color: #575757; font-size: 34px; line-height: 1.1; }
.online-landing .copy p + p { margin-top: 24px; }
.online-landing .cta { position: absolute; top: 24px; right: 24px; background: none; color: #EEEEEE; border: 0px solid #2e2e2e; border-radius: 24px; padding: 12px 18px; font-size: 14px; letter-spacing: -0.25px; font-family: Arial, Helvetica, sans-serif; font-weight: 700; }
/* Learn more line (desktop) */
.online-landing .learn-more { color: #EEEEEE; font-size: 34px; }

@media (max-width: 600px) {
  :root { --logo-h: 32px; }
  .site-header { top: 0; left: 0; right: 0; }
  .logo-small { height: 32px; }
  /* Bottom-align the copy just above the CTA */
  .online-landing .copy { top: auto; bottom: calc(12px + 56px + 16px); left: 16px; right: 16px; max-width: none; font-size: 34px; color: #575757; }
  .online-landing .cta { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; text-align: center; padding: 14px 16px; min-height: 56px; display: grid; place-items: center; }
  /* Show logo + wifi on mobile (reinforced) */
  .site-header.online .logo-small,
  .site-header.online .wifi-btn { display: block; }
  /* Hide giant hero stamp on mobile */
  .online-landing .hero-stamp { display: none; }
  /* Online header: icon asset includes its own circle */
  .site-header.online .wifi-btn { background: transparent; border: none; }
  .online-landing .copy { transform: none; }
}

.main-text {
    font-size: 48px;
    color: #575757;
    font-weight: normal;
    letter-spacing: -0.5px; /* Tighter kerning */
    position: relative;
}

.hint { margin-top: 12px; color: #aaa; }

/* Preloader UI */
.preloader { width: 80vw; max-width: 560px; margin: 18px auto 0; }
.preloader__row { height: 6px; background: #222; border: 1px solid #444; position: relative; overflow: hidden; }
.preloader__bar { height: 100%; background: #fff; width: 0; transition: width 180ms ease; }
.preloader__text { margin-top: 8px; color: #888; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

.real-world,
.offline {
    position: relative;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

/* Specific styling for "offline" text */
.offline {
    font-weight: bold;
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0; /* avoid width skew on underline */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.12em;
    text-decoration-skip-ink: auto;
}

.real-world:hover,
.offline:hover { opacity: 0.98; }

/* Popup containers */
.popup {
    position: fixed;
    display: none;
    z-index: 1000;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Online gate banner */
.online-gate {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #ffe8e8;
    border-top: 1px solid #040404;
    color: #040404;
    z-index: 1500;
}
.online-gate .gate-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 16px;
    font-size: 14px;
}
.online-gate .emoji { margin-right: 6px; }

.noscript {
    position: fixed; top: 0; left: 0; right: 0;
    background: #fff3cd; color: #040404; border-bottom: 1px solid #040404;
    padding: 8px 12px; text-align: center; z-index: 1600;
}

/* Semi-transparent overlay behind popup */
.popup::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: -1;
    transform: translate(50%, 50%); /* Compensate for parent transform */
    width: 100vw;
    height: 100vh;
}

/* Show popups on hover */
.real-world:hover .gif-popup,
.offline:hover .qr-popup {
    display: block;
}

/* Video styling for real world hover */
.gif-popup video {
    width: 300px;
    height: auto;
    border: 2px solid #FFFFFF;
}

/* QR code image styling */
.qr-popup img {
    width: 200px;
    height: 200px;
    border: 2px solid #FFFFFF;
    background-color: #040404000;
    padding: 10px;
}

/* 90s style link animation */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Remove old blinking cursor styling for simpler landing */

/* Offline slideshow view */
.offline-view { position: relative; width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; background: var(--bg-light); color: var(--fg-light); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.offline-view .overlay__inner { color: var(--overlay-dim-light); }
.offline-view .nav-zone--prev::before,
.offline-view .nav-zone--next::before { color: #040404; }
.offline-view .nav-hint .hint-line { background: var(--hint-light); }
.offline-view.fade-in { opacity: 0; }
.offline-view.fade-in.visible { opacity: 1; transition: opacity 300ms ease; }
.slideshow { position: absolute; top: var(--chrome-h, 0px); left: 0; right: 0; bottom: 0; width: 100%; z-index: 10; }
.slide { position: absolute; inset: 0; display: none; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; }
.slide.active { display: grid; place-items: center; }
.slide--text.active { place-items: start; padding: 24px 16px; }
.slide--color { background: var(--slide-bg, #040404); }
.display { font-size: clamp(28px, 8vw, 72px); letter-spacing: -0.02em; text-align: center; line-height: 1.1; max-width: var(--content-max); margin: 0 auto; }
.reading { max-width: var(--content-max); line-height: 1.6; color: #e8e8e8; margin: 0 auto; }
.slide--text.align-center .reading { text-align: center; margin: 0 auto; }
.kicker { font-size: 14px; letter-spacing: 0.16em; color: #aaa; margin-bottom: 8px; }
.caption { font-size: 12px; color: #aaa; margin-top: 8px; text-align: center; }

.media-frame { width: 100%; height: 100%; display: grid; place-items: center; }
.media-frame.contain img, .media-frame.contain video { width: 100%; max-width: clamp(0px, 92vw, var(--content-max)); max-height: 70vh; object-fit: contain; margin: 0 auto; }
.media-frame.cover img, .media-frame.cover video { width: 100%; height: 100%; object-fit: cover; }

/* Split layout (mobile-first, single column) */
.split { display: grid; grid-template-columns: 1fr; gap: 3vh; align-items: center; width: 100%; max-width: var(--content-max); margin: 0 auto; }
.split .col.text { align-self: center; }
.split .col.media img { width: 100%; height: auto; }

/* Grid layout (mobile-native width) */
.grid { display: grid; gap: 16px; width: 100%; max-width: var(--content-max); margin: 0 auto; }
.grid-3 { grid-template-columns: 1fr; }
.grid-3 img { width: 100%; height: auto; max-height: 50vh; object-fit: contain; }

/* Two columns reading (single column for mobile-native feel) */
.two-col .columns { display: grid; grid-template-columns: 1fr; gap: 3vh; max-width: var(--content-max); margin: 0 auto; }
.two-col .columns .col { line-height: 1.6; color: #e8e8e8; }
.offline-view .reading, .offline-view .two-col .columns .col { color: #222; }

/* Full interview rendering (verbatim from markdown) */
.interview-pre { white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.6; color: #040404; }

/* Title slide - add padding for content */
.slide--title { background: white !important; }
.slide--title > * { padding: 0 6vw; }
.slide--title .display { color: #040404; }
.slide--title .msg-label { color: #999; font-size: 12px; }

/* Quote */
.slide--quote { /* inherits display from .slide / .slide.active */ }
.slide--quote blockquote { max-width: 1000px; text-align: center; }
.slide--quote .quote { font-size: clamp(22px, 5.5vw, 56px); letter-spacing: -0.015em; line-height: 1.2; }
.slide--quote .attribution { margin-top: 10px; color: #bbb; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.slide--quote.invert { background: #fff; color: #040404; }
.slide--quote.invert .attribution { color: #444; }

/* Image slides */
.slide--image { background: white !important; }
/* Top-align media like interview text */
.slide--image.active { place-items: start center; padding: 39px 16px; }
/* Figure wrapper sized to media; centers via slide grid */
.slide--image .media-figure { display: inline-block; margin: 0; }
.slide--image .media-figure img,
.slide--image .media-figure video {
  display: block;
  height: auto;
  width: auto;
  max-width: min(92vw, var(--content-max));
  max-height: 70vh;
}
.slide--image .media-figure .caption { margin-top: 8px; color: #040404; text-align: left; font-size: 12px; }

/* Overlay */
.overlay { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; opacity: 0; transition: opacity 200ms ease; z-index: 30; }
.overlay.visible { opacity: 1; }
.overlay__inner { display: flex; justify-content: center; gap: 10px; padding: 14px 10px; color: var(--overlay-dim-dark); font-size: 12px; letter-spacing: 0.12em; }
.overlay .overlay__sep { opacity: 0.5; }
.overlay .overlay__keys { margin-left: 10px; opacity: 0.7; }
.uppercase { text-transform: uppercase; }

/* Overlay adjustments for interview slides */
.slide--interview.active ~ #overlay .overlay__inner { color: #999; }

/* Online view: simple tooltip for "offline" */
#view-online .offline { position: relative; }
#view-online .offline .tip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  background: #111;
  color: #fff;
  border: 1px solid #444;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  display: none;
  z-index: 50;
}
#view-online .offline .tip .dim { color: #aaa; }
#view-online .offline:hover .tip,
#view-online .offline.tip-open .tip { display: block; }

/* Interview — ultra-minimal chat thread */
.slide--interview { background: white !important; }
.slide--interview.active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.chat-thread {
  width: 100%;
  max-width: clamp(380px, 50vw, 600px);
  margin: 0 auto;
  padding: 39px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.msg {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Interviewer messages - right aligned */
.msg.interviewer .msg-label {
  text-align: right;
}
.msg.interviewer p {
  text-align: right;
}

/* Response messages - left aligned */
.msg.response .msg-label {
  text-align: left;
}
.msg.response p {
  text-align: left;
}

.msg-label {
  font-size: 10px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #040404;
  line-height: 12px;
}
.msg p {
  margin: 0;
  font-size: 18px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 21px;
  /* letter-spacing: 0.21px; */
  color: #040404;
}

/* Navigation edge zones */
.nav-zone { position: absolute; top: 0; bottom: 0; width: 33%; background: transparent; border: 0; cursor: pointer; appearance: none; z-index: 20; user-select: none; }
.nav-zone--prev { left: 0; cursor: w-resize; }
.nav-zone--next { right: 0; cursor: e-resize; }
.nav-zone:focus { outline: none; }

/* Remove chevrons entirely */
.nav-zone--prev::before,
.nav-zone--next::before { content: none !important; display: none !important; }

/* Subtle nav hint lines */
.nav-hint { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.nav-hint .hint-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hint-dark); opacity: 0; transition: opacity 220ms ease; }
.nav-hint .hint-line--left { left: 2px; }
.nav-hint .hint-line--right { right: 2px; }
.offline-view.show-lines .nav-hint .hint-line { opacity: .55; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .preloader__bar { transition: none; }
  .overlay { transition: none; }
}

/* Offline top chrome */
.chrome { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff; border-bottom: 0px solid #eee; z-index: 40; }
.chrome__left { display: flex; align-items: center; gap: 12px; }
.chrome .logo-small { height: var(--logo-h); }
.chrome__count { color: #040404; font-size: 12px; letter-spacing: 0.12em; }
.chrome .wifi-btn { background: transparent; border: none; }

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    body {
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    .container {
        width: 100%;
        max-width: 100vw;
    }

    .main-text {
        font-size: 28px;
        line-height: 1.5;
        word-wrap: break-word;
    }

    /* Popups already centered via main CSS, just ensure proper z-index */
    .popup {
        z-index: 2000;
    }

    /* Smaller media on mobile */
    .gif-popup video {
        width: 250px;
        max-width: 80vw;
    }

    .qr-popup img {
        width: 180px;
        height: 180px;
        max-width: 80vw;
    }
}

@media (max-width: 480px) {
    .main-text {
        font-size: 22px;
        letter-spacing: -0.3px;
        padding: 0 10px;
    }

    /* Ensure text fits on small screens */
    .real-world,
    .offline {
        display: inline;
    }

    /* Even smaller popups on very small screens */
    .gif-popup video {
        width: 200px;
        max-width: 85vw;
    }

    .qr-popup img {
        width: 150px;
        height: 150px;
        max-width: 85vw;
        padding: 5px;
    }
}

/* Ensure touch devices work properly */
@media (hover: none) and (pointer: coarse) {
    /* Make interactive elements more touch-friendly */
    .real-world,
    .offline {
        padding: 5px 2px;
        -webkit-tap-highlight-color: rgba(255, 0, 0, 0.2);
        cursor: pointer;
    }

    /* Disable hover effects on touch devices - JavaScript will handle it */
    .real-world:hover .gif-popup,
    .offline:hover .qr-popup {
        display: none;
    }
}

/* Hide hero stamp on desktop too for simplified look */
.online-landing .hero-stamp { display: none; }