/* ==========================================================================
   Hanna & Kenny — 10 April 2027
   Invitation: envelope cover + passport flipbook
   Ported from design_handoff_wedding_invitation / Envelope Invitation.dc.html
   All timings, colours and easings are the handoff values.
   ========================================================================== */

:root {
  /* palette */
  --navy: #1F3352;
  --navy-hover: #2c476f;
  --gold: #C0A062;
  --gold-light: #d8c39c;
  --gold-hair: #cbb182;
  --cream: #F5F0E6;
  --page-bg: #EDE3D4;
  --paper: #F6EEDF;
  --paper-2: #EFE5D2;
  --paper-3: #E4D7BF;
  --ink-body: #7d6352;
  --ink-soft: #8a6b56;
  --ink-eyebrow: #9b7d5c;
  --ink-label: #9c7b5a;
  --ink-nav: #6d5942;
  --rose: #9c5a50;
  --rose-soft: #8a6a5c;
  --link: #722F37;
  --link-hover: #9c4550;

  /* type */
  --font-head: 'Cinzel', serif;
  --font-display: 'Cinzel Decorative', serif;
  --font-body: 'Playfair Display', serif;

  /* easing */
  --ease-flap: cubic-bezier(.42, .02, .2, 1);
  --ease-flip: cubic-bezier(.42, .02, .24, 1);
  --ease-card: cubic-bezier(.24, .86, .28, 1);
  --ease-settle: cubic-bezier(.22, .9, .24, 1);

  --grain:
    repeating-linear-gradient(27deg, rgba(90, 70, 45, .06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-63deg, rgba(90, 70, 45, .05) 0 1px, transparent 1px 4px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* height: auto neutralises the HTML height attribute (which is a presentational
   hint and would otherwise beat aspect-ratio and lock images to pixel heights).
   Rules below that set an explicit height still win on specificity. */
img { display: block; height: auto; }

.wi-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wi-grain {
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: var(--grain);
}

.wi-root {
  position: relative;
  width: 100%;
  min-height: 100svh;
  background: var(--page-bg);
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   Site content — hidden until the envelope dissolves
   -------------------------------------------------------------------------- */

.wi-content {
  opacity: .001;
  pointer-events: none;
  transition: opacity 700ms ease-in;
}

body.is-revealed .wi-content {
  opacity: 1;
  pointer-events: auto;
}

/* Scroll reveals — gated on the cover being gone, then driven by
   IntersectionObserver so sections animate as the guest scrolls to them. */
[data-reveal] { opacity: 0; transform: translateY(20px); }

body.wi-revealed [data-reveal].is-in { animation: wiFadeIn .7s ease-out both; }
body.wi-revealed [data-reveal].is-in:nth-child(2) { animation-delay: .1s; }
body.wi-revealed [data-reveal].is-in:nth-child(3) { animation-delay: .2s; }
body.wi-revealed [data-reveal].is-in:nth-child(4) { animation-delay: .3s; }
body.wi-revealed [data-reveal].is-in:nth-child(5) { animation-delay: .4s; }
body.wi-revealed [data-reveal].is-in:nth-child(6) { animation-delay: .5s; }
body.wi-revealed [data-reveal].is-in:nth-child(7) { animation-delay: .6s; }

@keyframes wiFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wiRays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes wiHint {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.wi-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vh, 14px);
  padding: clamp(48px, 9vh, 96px) 20px;
  background: linear-gradient(150deg, #F5F0E6 0%, #EFE6D6 28%, #E9DFCC 52%, #F2EADB 76%, #F5F0E6 100%);
}

.wi-eyebrow {
  font-family: var(--font-head);
  font-size: clamp(10px, 1.3vmin, 14px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .42em;
  color: var(--ink-eyebrow);
  text-align: center;
}

.wi-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 5.2vw + 12px, 74px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--navy);
  text-align: center;
}

.wi-name--first { margin: clamp(10px, 2vh, 22px) 0 0; }
.wi-name--second { margin: 0 0 clamp(14px, 3vh, 32px); }

.wi-amp {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw + 9px, 24px);
  color: var(--gold);
}

.wi-rule {
  width: clamp(90px, 14vw, 190px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hair), transparent);
}

.wi-hero-date {
  margin-top: clamp(14px, 3vh, 30px);
  font-family: var(--font-head);
  font-size: clamp(16px, 1.4vw + 11px, 26px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--navy);
  text-align: center;
}

.wi-hero-place {
  font-family: var(--font-body);
  font-size: clamp(14px, .8vw + 11px, 19px);
  font-weight: 300;
  color: var(--ink-soft);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.wi-col {
  width: 100%;
  max-width: clamp(390px, 74vw, 880px);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

.wi-section {
  padding: clamp(48px, 8vh, 96px) 0;
  text-align: center;
}

.wi-section--rule { border-top: 1px solid rgba(31, 51, 82, .1); }

.wi-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 16px;
  color: var(--gold);
}

.wi-ornament span {
  width: 42px;
  height: 1px;
  background: var(--gold-light);
}

.wi-ornament i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .2em;
}

.wi-h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: clamp(26px, 2.2vw + 16px, 42px);
  font-weight: 400;
  color: var(--navy);
}

.wi-sub {
  margin: 0 0 clamp(26px, 4vh, 44px);
  font-family: var(--font-body);
  font-size: clamp(14px, .5vw + 12px, 17px);
  font-weight: 300;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Countdown
   -------------------------------------------------------------------------- */

.wi-tiles {
  display: flex;
  gap: clamp(10px, 2vw, 22px);
  justify-content: center;
  flex-wrap: wrap;
}

.wi-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wi-tile-value {
  width: clamp(66px, 8vw + 42px, 108px);
  height: clamp(66px, 8vw + 42px, 108px);
  border-radius: 8px;
  background: rgba(31, 51, 82, .05);
  border: 1px solid rgba(31, 51, 82, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: clamp(22px, 1.8vw + 13px, 34px);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.wi-tile-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-label);
}

/* --------------------------------------------------------------------------
   Passport flipbook
   -------------------------------------------------------------------------- */

.wi-passport .wi-sub { margin-bottom: clamp(70px, 11vh, 140px); }

.wi-stage {
  display: flex;
  justify-content: center;
  perspective: 2800px;
  width: 100%;
}

.wi-book {
  position: relative;
  width: min(128%, 104svh, 92vw);
  aspect-ratio: 2108 / 1492;
  flex: none;
  transform-style: preserve-3d;
  /* scale first, then translate — the shift has to scale with the cover */
  transform: scale(var(--book-scale, 1.28)) translateX(var(--book-shift, -25%));
  transition: transform 950ms var(--ease-flip);
}

.wi-passport[data-page="0"] { --book-scale: 1.28; --book-shift: -25%; --spread-opacity: 0; }
.wi-passport[data-page="1"],
.wi-passport[data-page="2"] { --book-scale: 1; --book-shift: 0%; --spread-opacity: 1; }

.wi-base {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--paper-2);
  box-shadow: 0 2vmin 5vmin rgba(70, 52, 30, .2);
  opacity: var(--spread-opacity, 0);
  transition: opacity 500ms ease;
}

.wi-base--left { left: 0; border-radius: 10px 0 0 10px; }
.wi-base--right { left: 50%; border-radius: 0 10px 10px 0; }

.wi-sheet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 950ms var(--ease-flip);
}

.wi-sheet.is-flipped { transform: rotateY(-180deg); }

/* A turned page must drop behind the stack, not hover on top of it. */
.wi-sheet[data-sheet="0"] { z-index: 10; }
.wi-sheet[data-sheet="1"] { z-index: 9; }
.wi-sheet[data-sheet="2"] { z-index: 8; }
.wi-sheet[data-sheet="0"].is-flipped { z-index: 1; }
.wi-sheet[data-sheet="1"].is-flipped { z-index: 2; }
.wi-sheet[data-sheet="2"].is-flipped { z-index: 3; }

.wi-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 0 10px 10px 0;
  background: var(--paper);
  box-shadow: 0 2vmin 5vmin rgba(70, 52, 30, .26);
}

.wi-face--back {
  transform: rotateY(180deg);
  border-radius: 10px 0 0 10px;
  box-shadow: none;
}

.wi-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wi-face--blank {
  background: linear-gradient(270deg, #F7F0E2 0%, #EFE5D2 88%, #E4D7BF 100%);
}

.wi-spine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(60, 42, 20, .26) 0%, rgba(60, 42, 20, .08) 4%, rgba(255, 255, 255, 0) 14%);
}

.wi-face--back .wi-spine {
  background: linear-gradient(270deg, rgba(60, 42, 20, .26) 0%, rgba(60, 42, 20, .08) 4%, rgba(255, 255, 255, 0) 14%);
}

.wi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 28px);
  margin-top: clamp(66px, 10.5vh, 130px);
}

.wi-nav {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(31, 51, 82, .25);
  border-radius: 9999px;
  background: rgba(255, 252, 246, .8);
  color: var(--navy);
  font-size: 19px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: inherit;
  transition: background 200ms ease;
}

.wi-nav:hover { background: #fff; }
.wi-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wi-page-label {
  font-family: var(--font-head);
  font-size: clamp(10px, 1.3vmin, 13px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-nav);
  min-width: 12ch;
}

/* --------------------------------------------------------------------------
   The Day
   -------------------------------------------------------------------------- */

.wi-section--day { padding: clamp(40px, 7vh, 88px) 0; }

.wi-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  text-align: left;
}

.wi-card {
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(31, 51, 82, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .42);
}

.wi-card-time {
  font-family: var(--font-head);
  font-size: clamp(19px, 1.3vw + 13px, 28px);
  color: var(--gold);
}

.wi-card-title {
  margin-top: 10px;
  font-family: var(--font-head);
  font-size: clamp(14px, .5vw + 12px, 18px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
}

.wi-card-detail {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: clamp(14px, .5vw + 12px, 17px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Venue & dress code
   -------------------------------------------------------------------------- */

.wi-section--venue {
  padding: clamp(40px, 7vh, 88px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  text-align: left;
}

.wi-h3 {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(15px, .5vw + 13px, 19px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
}

.wi-body {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: clamp(15px, .6vw + 12px, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.wi-maplink {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}

.wi-swatches { display: flex; gap: 10px; flex-wrap: wrap; }

.wi-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(31, 51, 82, .15);
}

/* The RSVP call to action is gone — the form itself now sits at the foot of
   this page (see form.css). */

/* ==========================================================================
   Envelope cover
   ========================================================================== */

.wi-cover {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 46px);
  background: linear-gradient(150deg, #F7F1E9 0%, #EFE5D9 40%, #E9DCCD 70%, #F4EDE4 100%);
  cursor: pointer;
  opacity: 1;
  transition: opacity 300ms ease;
  /* the envelope is deliberately wider than a phone viewport; this crops it */
  overflow: hidden;
}

body.is-opened .wi-cover { cursor: default; pointer-events: none; }

body.is-revealed .wi-cover {
  opacity: 0;
  transition: opacity 1400ms ease-in 1100ms;
}

.wi-cover:focus-visible { outline: 2px solid var(--rose); outline-offset: -6px; }

/* the animated stage */
.wi-env {
  position: relative;
  width: min(112vw, 82svh);
  aspect-ratio: 930 / 1039;
  perspective: 900px;
  perspective-origin: 50% 30%;
  transform: translateY(-20.7%);
  transition: transform 1200ms var(--ease-settle);
}

body.is-lifted .wi-env { transform: translateY(0%); }

.wi-flap-open {
  position: absolute;
  left: 1%;
  top: 0;
  width: 98%;
  height: 41.4%;
  object-fit: fill;
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms ease 800ms;
}

body.is-lifted .wi-flap-open { opacity: 1; }

/* card clip: bottom pinned to the envelope, only the top opens up */
.wi-cardclip {
  position: absolute;
  left: 0;
  top: 41.6%;
  bottom: 6%;
  width: 100%;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  /* no transition — the mask opens instantly; the pocket layer (z-index 4)
     is what keeps the card reading as "inside" while it travels */
}

body.is-cardout .wi-cardclip { top: -60%; }

.wi-invite {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60%;
  aspect-ratio: 1043 / 1500;
  object-fit: fill;
  transform: translate(-50%, 34%);
  transition: transform 1400ms var(--ease-card);
  box-shadow: 0 2vmin 5vmin rgba(120, 90, 70, .26);
}

body.is-cardout .wi-invite { transform: translate(-50%, -22%); }

.wi-env-body,
.wi-env-pocket {
  position: absolute;
  left: 1.6%;
  top: 41.6%;
  width: 96.8%;
  height: 56.7%;
  object-fit: fill;
}

.wi-env-body {
  z-index: 2;
  filter: drop-shadow(0 2vmin 6vmin rgba(120, 90, 70, .28));
}

.wi-env-pocket {
  z-index: 4;
  pointer-events: none;
}

.wi-glow {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity 900ms ease-out;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 62% 30% at 50% 58%,
    rgba(255, 247, 242, .95) 0%,
    rgba(240, 197, 182, .7) 32%,
    rgba(206, 140, 120, .24) 58%,
    rgba(240, 197, 182, 0) 78%);
}

body.is-opened .wi-glow { opacity: .4; }
body.is-lifted .wi-glow { opacity: 1; }

.wi-rays {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 190vmax;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 11;
  opacity: 0;
  transition: opacity 900ms ease-out;
  pointer-events: none;
  mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(248, 218, 206, 0) 0deg, rgba(248, 218, 206, .55) 5deg, rgba(248, 218, 206, 0) 12deg,
    rgba(248, 218, 206, 0) 26deg, rgba(250, 228, 218, .4) 32deg, rgba(248, 218, 206, 0) 40deg,
    rgba(248, 218, 206, 0) 58deg, rgba(248, 218, 206, .5) 64deg, rgba(248, 218, 206, 0) 72deg,
    rgba(248, 218, 206, 0) 96deg, rgba(250, 228, 218, .38) 102deg, rgba(248, 218, 206, 0) 110deg,
    rgba(248, 218, 206, 0) 140deg, rgba(248, 218, 206, .5) 146deg, rgba(248, 218, 206, 0) 154deg,
    rgba(248, 218, 206, 0) 190deg, rgba(250, 228, 218, .36) 196deg, rgba(248, 218, 206, 0) 204deg,
    rgba(248, 218, 206, 0) 240deg, rgba(248, 218, 206, .5) 246deg, rgba(248, 218, 206, 0) 254deg,
    rgba(248, 218, 206, 0) 292deg, rgba(250, 228, 218, .4) 298deg, rgba(248, 218, 206, 0) 306deg,
    rgba(248, 218, 206, 0) 340deg, rgba(248, 218, 206, .5) 346deg, rgba(248, 218, 206, 0) 354deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 62%);
  animation: wiRays 42s linear infinite;
}

body.is-opened .wi-rays { opacity: .25; }
body.is-lifted .wi-rays { opacity: .9; }

/* the flap that folds up and back */
.wi-flap {
  position: absolute;
  left: 0;
  top: 41.4%;
  width: 100%;
  height: 58.6%;
  z-index: 12;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateX(0deg);
  transition: transform 2600ms var(--ease-flap);
}

body.is-lifted .wi-flap { transform: rotateX(-180deg); }
body.is-flapbehind .wi-flap { z-index: -1; }

.wi-flap-img {
  position: absolute;
  top: 0;
  left: 1%;
  width: 98%;
  height: 65%;
  object-fit: fill;
  filter: drop-shadow(0 1.2vmin 2.6vmin rgba(120, 90, 70, .3));
}

.wi-seal-wrap {
  position: absolute;
  left: 50%;
  top: 65%;
  width: clamp(88px, 14%, 190px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.wi-seal {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  filter:
    drop-shadow(0 1vmin 2.4vmin rgba(120, 74, 64, .42))
    drop-shadow(0 0 0vmin rgba(233, 168, 152, 0));
  transition: opacity 350ms ease, filter 1600ms var(--ease-flap);
}

body.is-opened .wi-seal {
  filter:
    drop-shadow(0 1vmin 2.4vmin rgba(120, 74, 64, .42))
    drop-shadow(0 0 7vmin rgba(233, 168, 152, .85));
}

/* snap out of sight once the flap has passed behind the envelope */
body.is-flapbehind .wi-seal { opacity: 0; }

/* bottom chrome */
.wi-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 5vh, 64px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vmin, 20px);
  padding: 0 8vw;
  text-align: center;
  opacity: 1;
  transition: opacity 500ms ease;
  pointer-events: none;
}

body.is-opened .wi-chrome { opacity: 0; }

.wi-chrome-lead {
  font-family: var(--font-head);
  font-size: clamp(17px, 2.6vmin, 30px);
  font-style: italic;
  letter-spacing: .04em;
  color: var(--rose);
}

.wi-chrome-hint {
  font-family: var(--font-head);
  font-size: clamp(11px, 1.7vmin, 17px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--rose-soft);
  animation: wiHint 2.6s ease-in-out infinite;
}

/* full-screen light */
.wi-screen-glow {
  position: absolute;
  inset: -20%;
  z-index: 19;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms ease-out;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 70% 55% at 50% 46%,
    rgba(255, 252, 246, .9) 0%,
    rgba(250, 226, 212, .6) 34%,
    rgba(236, 190, 170, .24) 62%,
    rgba(236, 190, 170, 0) 82%);
}

body.is-cardout .wi-screen-glow { opacity: .5; }

.wi-screen-rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 210vmax;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 19;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms ease-out;
  mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 244, 232, 0) 0deg,
    rgba(255, 244, 232, .28) 3deg,
    rgba(255, 244, 232, 0) 8deg,
    rgba(255, 244, 232, 0) 17deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .45) 30%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .45) 30%, transparent 58%);
  animation: wiRays 60s linear infinite;
}

body.is-cardout .wi-screen-rays { opacity: .35; }

/* white flash / dissolve */
.wi-flash {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%, #FFFDFA 0%, #FFF8F2 42%, #FDF2EB 100%);
  opacity: 0;
  transition: opacity 1200ms ease-in;
}

body.is-lifted .wi-flash { opacity: .12; }
body.is-cardout .wi-flash { opacity: .42; }
body.is-revealed .wi-flash { opacity: 1; transition: opacity 500ms ease-in; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

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