/* ==========================================================================
   Aegeon Solutions — Company Profile 2026 — Presentation Viewer
   --------------------------------------------------------------------------
   Premium minimal UI. The slide images ARE the presentation; the interface
   stays almost invisible and never competes with the slides.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --bg:        #1D1D20;   /* Aegeon dark background */
  --accent:    #F1C70E;   /* Aegeon gold accent     */
  --fade-ms:   260ms;     /* slide fade duration    */
  --ui-font:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html,
body {
  height: 100%;
  background: var(--bg);
  color: #fff;
  font-family: var(--ui-font);
  overflow: hidden;                       /* no scrolling, no horizontal page movement */
  overscroll-behavior: none;              /* block pull-to-refresh interference          */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ==========================================================================
   LANDING SCREEN
   ========================================================================== */
#landing {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  text-align: center;
  height: 100vh;
  height: 100dvh;
  padding:
    calc(env(safe-area-inset-top, 0px) + 28px)
    calc(env(safe-area-inset-right, 0px) + 28px)
    calc(env(safe-area-inset-bottom, 0px) + 28px)
    calc(env(safe-area-inset-left, 0px) + 28px);
  background: radial-gradient(120% 90% at 50% 38%, #27272c 0%, var(--bg) 62%);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#landing.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }

.landing-inner { width: 100%; max-width: 760px; }

/* Reserved area for the Aegeon logo */
.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  height: 96px;
  margin: 0 auto 30px;
}
.logo-slot .logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.landing-title {
  font-size: clamp(32px, 7vw, 62px);
  font-weight: 800;
  letter-spacing: 0.10em;
  line-height: 1.12;
  text-transform: uppercase;
  color: #fff;
}
.landing-title span { color: var(--accent); }

.landing-rule {
  width: 58px;
  height: 2px;
  margin: 24px auto 0;
  background: var(--accent);
}

.landing-subtitle {
  margin-top: 18px;
  font-size: clamp(13px, 2.4vw, 16px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.btn-start {
  margin-top: 48px;
  display: inline-block;
  padding: 18px 48px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #191a1d;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(241, 199, 14, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn-start:hover,
.btn-start:focus-visible {
  background: #ffd62f;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(241, 199, 14, 0.30);
}
.btn-start:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.btn-start:active { transform: translateY(0) scale(0.985); }

/* ==========================================================================
   PRESENTATION
   ========================================================================== */
#presentation {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  touch-action: none;               /* kill double-tap zoom + scroll gestures */
  user-select: none;                /* kill image/UI selection               */
  -webkit-user-select: none;
  -webkit-touch-callout: none;      /* kill iOS long-press callout           */
  -webkit-tap-highlight-color: transparent;
}

/* --- Slide stage --------------------------------------------------------- */
#stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Each layer holds one slide image. Two layers cross-fade (opacity) so that
   there is never a blank frame between slides. */
.layer {
  position: absolute;
  inset: 0;
  background: var(--bg);            /* dark bars when the device isn't 16:9 */
  opacity: 0;
  transition: opacity var(--fade-ms) ease;
  pointer-events: none;
}
.layer.layer-visible { opacity: 1; }

.layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* never stretch, crop or distort       */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;          /* kill image dragging                  */
}

/* --- Navigation zones ---------------------------------------------------- */
.nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(52px, 7vw, 84px);    /* generous transparent tap/click zone  */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  opacity: 0.22;                    /* unobtrusive until interaction        */
  transition: opacity 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 6vw, 64px);
  font-weight: 300;
  line-height: 1;
}
#prev-btn { left: 0; padding-left: max(6px, env(safe-area-inset-left, 0px)); }
#next-btn { right: 0; padding-right: max(6px, env(safe-area-inset-right, 0px)); }

.nav:hover,
.nav:focus-visible { opacity: 1; }
.nav:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Slide counter ------------------------------------------------------- */
#counter {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--mono-font);
  font-size: 13px;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* --- Optional fullscreen toggle ------------------------------------------ */
#fs-btn {
  position: absolute;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.30);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: opacity 0.35s ease, background-color 0.35s ease, transform 0.18s ease;
}
#fs-btn svg { display: block; width: 18px; height: 18px; }
#fs-btn:hover,
#fs-btn:focus-visible {
  background: rgba(0, 0, 0, 0.55);
  transform: translateY(-1px);
}
#fs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Active interaction: make controls clearly visible ------------------- */
#presentation.ui-active .nav,      /* brighter arrows after any interaction */
#presentation.ui-active #fs-btn { opacity: 1; }

/* --- Idle: hide cursor + vanish controls --------------------------------- */
#presentation.idle { cursor: none; }
#presentation.idle .nav,
#presentation.idle #fs-btn { opacity: 0; }
#presentation.idle #counter { opacity: 0.65; }

/* ==========================================================================
   ACCESSIBILITY — reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .layer { transition: none; }
  #landing { transition: opacity 0.15s ease, visibility 0.15s ease; }
}