/* ==========================================================================
   rubi sewako — reset and full-viewport application shell
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  transition: background-color .6s var(--ease);
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--line-strong);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 14px; }

/* --------------------------------------------------------------------------
   Ambient backdrop — retained as a theme-aware page underlay
   -------------------------------------------------------------------------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--sky-4) 22%, transparent) 0%, transparent 60%),
    var(--bg-deep);
}
.ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .35;
  mix-blend-mode: overlay;
}
.ambient__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .3;
  animation: drift 26s var(--ease) infinite alternate;
}
.ambient__glow--a { width: 46vw; height: 46vw; left: -8vw;  top: 8vh;  background: var(--sky-3); }
.ambient__glow--b { width: 40vw; height: 40vw; right: -6vw; top: 42vh; background: var(--sky-5); animation-delay: -9s; }
.ambient__glow--c { width: 34vw; height: 34vw; left: 34vw;  bottom: -14vh; background: var(--sky-7); opacity: .18; animation-delay: -17s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vw, -4vh, 0) scale(1.14); }
}

/* --------------------------------------------------------------------------
   Full-viewport application shell
   -------------------------------------------------------------------------- */
.app-screen {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color .6s var(--ease);
}

.app-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .28;
  mix-blend-mode: soft-light;
}

.ambient { display: none; }

/* --------------------------------------------------------------------------
   Scroll viewport
   -------------------------------------------------------------------------- */
.viewport {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 104px;
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}
.viewport::-webkit-scrollbar { display: none; }
.viewport:focus { outline: none; }

/* Keep reading and form surfaces comfortable on a wide canvas. Home owns a
   separate, editorial desktop composition in screens.css. */
.screen:not(.screen--home) {
  width: min(100%, 960px);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Screen transitions
   -------------------------------------------------------------------------- */
.screen { animation: screen-in .42s var(--ease-out) both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.viewport.is-leaving .screen { animation: screen-out .16s var(--ease) both; }
@keyframes screen-out {
  to { opacity: 0; transform: translateY(-8px); }
}

/* stagger children of a screen for a soft cascade */
.stagger > * { animation: rise .5s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .17s; }
.stagger > *:nth-child(5) { animation-delay: .22s; }
.stagger > *:nth-child(6) { animation-delay: .27s; }
.stagger > *:nth-child(n+7) { animation-delay: .3s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */
.script { font-family: var(--font-script); }
.serif  { font-family: var(--font-serif); }
.muted  { color: var(--ink-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}