/*
 * Ottografie-inspired global shell for the photography experience.
 * The module is deliberately framework-free; JS supplies the loader and
 * orientation gate when the host page does not provide them.
 */

:root {
  --otto-paper: #f5f0eb;
  --otto-ink: #181716;
  --otto-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --otto-sans: "Instrument Sans", Arial, sans-serif;
  --otto-sheet-ease: cubic-bezier(.77, 0, .175, 1);
}

html.otto-js,
body.otto-shell-ready {
  width: 100%;
  min-height: 100%;
  background: var(--otto-paper);
}

body.otto-shell-ready {
  margin: 0;
  overflow: hidden;
  color: var(--otto-ink);
  font-family: var(--otto-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.otto-skip {
  position: fixed;
  z-index: 2147483647;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  background: #fff;
  color: #050505;
  font: 600 12px/1 var(--otto-sans);
  text-decoration: none;
  transform: translateY(-180%);
}

.otto-skip:focus {
  transform: translateY(0);
}

.otto-app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--otto-paper);
  color: var(--otto-ink);
}

.otto-app.otto-app--intro-pending,
.otto-app.otto-app--orientation-blocked {
  pointer-events: none;
  user-select: none;
}

/* The name intro is the authored entry even on portrait phones. Keep the app's
   loader above the existing rotation gate until the intro releases; the gate
   resumes ownership immediately afterwards. */
.otto-app.otto-app--intro-pending {
  z-index: 2147483647;
}

.otto-bio {
  position: fixed;
  z-index: 40;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  width: min(580px, calc(100vw - 40px));
  margin: 0;
  transform: translateX(-50%);
  color: currentColor;
  font-family: var(--otto-sans);
  font-size: clamp(9px, .78vw, 12px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: .015em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.otto-bio a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.otto-bio a:hover,
.otto-bio a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.otto-loader {
  position: fixed;
  z-index: 9990;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: #0d1117;
  color: #f6f2ea;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  pointer-events: none;
  contain: layout paint;
}

.otto-loader[hidden] {
  display: none;
}

.otto-loader.is-leaving {
  transform: translate3d(0, -101%, 0);
  transition: transform 550ms var(--otto-sheet-ease);
}

.otto-loader__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.8vh, 3.25rem);
  overflow: hidden;
}

.otto-loader__mark {
  display: block;
  width: clamp(3.75rem, 6.5vw, 7rem);
  aspect-ratio: 619.75 / 512;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url('../img/ry-monogram.svg') center / contain no-repeat;
  mask: url('../img/ry-monogram.svg') center / contain no-repeat;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.86);
  transform-origin: center;
  transition: transform .58s cubic-bezier(.16, 1, .3, 1), opacity .42s ease;
  will-change: transform, opacity;
}

/* A serif set at reading scale, not a sans slammed edge to edge: the cold open
   should read as a title card for the photographs rather than as signage. */
.otto-loader__name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(80vw, 1180px);
  margin: 0;
  font-family: var(--otto-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 7.2vw, 7.5rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.012em;
  white-space: nowrap;
  will-change: transform, opacity;
}

.otto-loader__name span {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 118%, 0);
  transition:
    transform .54s cubic-bezier(.16, 1, .3, 1) calc(var(--letter-index) * 24ms),
    opacity .42s ease calc(var(--letter-index) * 24ms),
    filter .48s ease calc(var(--letter-index) * 24ms);
  will-change: transform, opacity, filter;
}

.otto-loader__name i {
  display: block;
  flex: 0 0 .3em;
}

.otto-loader.is-name-in .otto-loader__name span {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.otto-loader.is-name-in .otto-loader__mark {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.otto-loader.is-name-spread .otto-loader__name span {
  transform: translate3d(var(--spread), 0, 0);
  transition-duration: .38s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(.65, 0, .35, 1);
}

.otto-loader.is-name-spread .otto-loader__mark {
  transform: translate3d(0, -.2rem, 0) scale(.94);
}

.otto-loader.is-leaving .otto-loader__name {
  opacity: 0;
  transform: translate3d(0, -14%, 0) scale(.94);
  transition: transform .34s cubic-bezier(.65, 0, .35, 1), opacity .26s ease;
}

.otto-loader.is-leaving .otto-loader__mark {
  opacity: 0;
  transform: translate3d(0, -22%, 0) scale(.86);
  transition: transform .34s cubic-bezier(.65, 0, .35, 1), opacity .24s ease;
}

.otto-orientation-gate {
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  height: 100dvh;
  box-sizing: border-box;
  padding: 24px;
  background: #050505;
  color: #fff;
  font-family: var(--otto-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .015em;
  text-align: center;
  pointer-events: auto;
  cursor: default;
}

.otto-orientation-gate.is-active {
  display: grid;
}

.otto-orientation-gate p {
  margin: 0;
}

.otto-orientation-gate__panel {
  display: grid;
  gap: 18px;
  justify-items: center;
  max-width: 30ch;
}

/* The way past the prompt. Sized and spaced as a real control rather than fine
   print, because on a phone in portrait it is the only thing on the screen. */
.otto-orientation-gate__dismiss {
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.otto-orientation-gate__dismiss:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 10%);
}

.otto-orientation-gate__dismiss:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

body.otto-orientation-blocked > :not(.otto-orientation-gate) {
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .otto-loader__mark,
  .otto-loader__name,
  .otto-loader__name span {
    transition: none !important;
    animation: none !important;
  }

  .otto-loader.is-reduced.is-leaving {
    transition: transform 120ms linear;
  }
}

@media (max-width: 899px) and (orientation: landscape) {
  .otto-bio {
    top: max(10px, env(safe-area-inset-top));
    font-size: 11px;
  }

  .otto-loader {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .otto-loader__name {
    width: min(88vw, 720px);
    font-size: min(8.4vw, 58px);
  }

  .otto-loader__mark {
    width: min(11vw, 5rem);
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  .otto-loader__stage {
    gap: 1.5rem;
  }

  .otto-loader__mark {
    width: clamp(3.25rem, 18vw, 4.5rem);
  }

  .otto-loader__name {
    display: grid;
    grid-template-columns: repeat(4, auto);
    width: auto;
    column-gap: .025em;
    row-gap: .16em;
    font-size: clamp(2.2rem, 10.5vw, 3.8rem);
  }

  .otto-loader__name i {
    display: none;
  }

  .otto-loader__name span:nth-of-type(5) {
    grid-column: 1;
  }

  .otto-loader.is-name-spread .otto-loader__name span {
    transform: none;
  }
}