/* ==========================================================================
   AZA — azaeverywhere.com
   Standalone rebuild of the original Readymag project.

   Layout model (mirrors the source project exactly):
   - The whole design lives on a fixed 1024px-wide canvas.
   - That canvas is uniformly scaled by  scale = min(viewportWidth, 3600) / 1024.
   - Every widget is absolutely positioned in design pixels on that canvas.
   - The navigation is pinned to the viewport centre using design-pixel offsets.
   ========================================================================== */

/* ----------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Noto Sans Thaana';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/NotoSansThaana-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Thaana';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/NotoSansThaana-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- reset */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;              /* pages own their own scrolling */
  background: #fff;
}

body {
  font-family: 'Noto Sans Thaana', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { border: 0; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* --scale is set by the inline head script before first paint, and kept in
   sync on resize. 1.40625 (= 1440/1024) is only a pre-JS fallback. */
:root { --scale: 1.40625; --nav-scale: 1.40625; }

/* ------------------------------------------------------------ page stack */
.aza-track {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.aza-page {
  position: absolute;
  inset: 0;
  /* Below 769px the canvas is wider than the viewport and pans, exactly as
     the source project behaves — it floors its scale rather than shrinking. */
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  will-change: transform;
}

/* Scrollbars stay out of the way, as in the original viewer. */
.aza-page { scrollbar-width: none; }
.aza-page::-webkit-scrollbar { width: 0; height: 0; }

.aza-page.is-active {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  z-index: 2;
}

/* Horizontal slide between pages. */
.aza-track.is-animating .aza-page { transition: transform .62s cubic-bezier(.66,0,.2,1), opacity .62s ease; }
.aza-page.is-leaving  { visibility: visible; opacity: 1; z-index: 1; }
.aza-page.from-left   { transform: translate3d(-100%, 0, 0); }
.aza-page.from-right  { transform: translate3d(100%, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  .aza-track.is-animating .aza-page { transition: none; }
}

/* --------------------------------------------------------- design canvas */
/* Wrapper reserves the scaled height so the page scrolls the right amount. */
.aza-canvas-wrap {
  position: relative;
  width: calc(1024px * var(--scale));   /* == viewport width at >= 769px */
  height: calc(var(--ph) * 1px * var(--scale));
  overflow: hidden;
}

.aza-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: calc(var(--ph) * 1px);
  transform: scale(var(--scale));
  transform-origin: 0 0;
}

/* ------------------------------------------------------------- widgets */
.w {
  position: absolute;
  margin: 0;
}

.w-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.w-picture.is-svg img { object-fit: contain; }

/* Inline vector marks fill their widget box. */
.w-picture .svg-scale-wrapper,
.w-picture > svg { width: 100%; height: 100%; display: block; }
.w-picture .svg-scale-wrapper > svg { width: 100%; height: 100%; display: block; }

/* Text widgets keep the original inline typography (size / line-height /
   variable-font weight), so they scale with the canvas like everything else. */
.w-text { font-family: 'Noto Sans Thaana', sans-serif; }
.w-text p { margin: 0; }

.txtlink { text-decoration: none; color: inherit; }
.txtlink:hover { opacity: .55; }

/* Anything that navigates gets the same hover feel as the source project. */
.aza-link { display: block; cursor: pointer; }
.aza-link,
.aza-nav-item { transition: opacity .28s ease; }
.aza-link:hover,
.aza-nav-item:hover { opacity: .62; }

/* --------------------------------------------------------- slideshows */
.w-slideshow {
  overflow: hidden;
  background: #000;
}

.w-slideshow .slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
  transition: opacity .5s ease;
}

.w-slideshow .slide.is-current { opacity: 1; }

/* ------------------------------------------------------------- video */
.w-video {
  overflow: hidden;
  background: #000;
}

.w-video video,
.w-video .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-video .poster {
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  z-index: 2;
  transition: opacity .35s ease;
}

.w-video.is-playing .poster { opacity: 0; pointer-events: none; }

/* Play affordance, matching the source player's centred triangle. */
.w-video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(rgba(0,0,0,.3), rgba(0,0,0,0) 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.w-video .play::after {
  content: '';
  margin-left: 7px;
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #fff;
}

/* ------------------------------------------------------- fixed navigation */
/* A compact editorial bar rather than a banner: translucent, lightly blurred,
   no border or shadow, and it slides away as soon as you scroll down. Widths
   track the canvas scale so it matches the page typography. */
.aza-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(1024px * var(--scale));
  height: calc(var(--banner-h) * 1px * var(--scale));
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  pointer-events: none;
  z-index: 500;
  transform: translate3d(0, 0, 0);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Hidden while scrolling down; the -101% avoids a hairline of the blur layer
   staying visible at the top edge. */
.aza-nav.is-hidden { transform: translate3d(0, -101%, 0); }

@media (prefers-reduced-motion: reduce) {
  .aza-nav { transition: none; }
}

.aza-nav-item {
  position: absolute;
  top:    calc(var(--ty) * 1px * var(--scale));
  width:  calc(var(--w)  * 1px * var(--scale));
  height: calc(var(--h)  * 1px * var(--scale));
  pointer-events: auto;
  cursor: pointer;
}

.aza-nav-item.is-left   { left:  calc(var(--nav-pad) * 1px * var(--scale)); }
.aza-nav-item.is-right  { right: calc(var(--nav-pad) * 1px * var(--scale)); }

/* Mathematically centred, independent of the two side items' widths. */
.aza-nav-item.is-center { left: 50%; transform: translateX(-50%); }

.aza-nav-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* Below the canvas floor the page pans sideways but the header cannot, so it
   switches to the viewport's own scale and keeps to the viewport edges.
   Same three elements, same artwork, same order — just kept reachable. */
@media (max-width: 768px) {
  .aza-nav {
    width: 100vw;
    height: calc(var(--banner-h) * 1px * var(--nav-scale));
  }

  .aza-nav-item {
    top:    calc(var(--ty) * 1px * var(--nav-scale));
    width:  calc(var(--w)  * 1px * var(--nav-scale));
    height: calc(var(--h)  * 1px * var(--nav-scale));
  }

  .aza-nav-item.is-left   { left:  calc(var(--nav-pad) * 1px * var(--nav-scale)); }
  .aza-nav-item.is-right  { right: calc(var(--nav-pad) * 1px * var(--nav-scale)); }
  .aza-nav-item.is-center { left: 50%; transform: translateX(-50%); }
}

/* --------------------------------------------------------------- a11y */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid #000; outline-offset: 2px; }