/* The approved red/pink artwork is split into a gatefold and a real full-width
   paper-band button. The entire printed band responds as one touch target. */
html { scrollbar-gutter: auto; }
#home-opening.editorial-opening {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 560px;
  height: 100svh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  color: #fffaf2;
  background: #f42c26;
  touch-action: none;
}
#home-opening.editorial-opening:before,
#home-opening.editorial-opening:after { display: none; }
#home-opening.editorial-opening[hidden] { display: none !important; }
#home-opening .editorial-opening-copy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  perspective: 1600px;
  pointer-events: none;
}
.editorial-folio {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.editorial-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  background-color: #f42c26;
  background-image: url('assets/opening/editorial-motion-base.webp');
  background-size: 200% 100%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.editorial-door-left { left: 0; background-position: left top; transform-origin: left center; }
.editorial-door-right { right: 0; background-position: right top; transform-origin: right center; }
.editorial-glasses,.editorial-star { position: absolute; display: block; pointer-events: none; object-fit: fill; }
.editorial-glasses { left: 58.3984375%; top: 7.763671875%; width: 25.5859375%; height: 6.103515625%; transform-origin: 50% 80%; }
.editorial-star { left: 16.2109375%; top: 66.552734375%; width: 11.9140625%; height: 3.076171875%; transform-origin: center; }
.editorial-inside {
  position: absolute;
  top: 15%;
  bottom: 19%;
  left: 13%;
  right: 13%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 16px 17px;
  background: #fffcf4;
  color: #252a2d;
  box-shadow: 0 18px 45px #75100b33;
}
.editorial-inside-heading,
.editorial-inside-signature { text-align: center; font: 600 16px/1.5 var(--sans); }
.editorial-inside-signature i { font-style: normal; color: #c6322c; padding: 0 6px; }
.editorial-inside-photo { flex: 1; min-height: 0; overflow: hidden; }
#home-opening #opening-inner-photo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 0; }
.editorial-door:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg,transparent 28%,#fff7e817 45%,transparent 62%);
  background-size: 260% 100%;
  opacity: 0;
  pointer-events: none;
}
.editorial-sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.editorial-sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8px;
  height: 8px;
  background: #fff4de;
  clip-path: polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
  opacity: 0;
}
.editorial-sparks i:nth-child(even) { width: 5px; height: 5px; background: #ffc4d2; }

#home-opening .editorial-band {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 69.140625%;
  width: 100%;
  height: 17.1875%;
  min-height: 80px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #292b2b;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.editorial-band-visual {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: auto;
  transition: transform .18s ease, filter .18s ease;
}
.editorial-hosts {
  --host-height: min(18cqw,9.2svh);
  position: absolute;
  z-index: 0;
  left: 18%;
  top: calc(33% - var(--host-height));
  height: var(--host-height);
  display: flex;
  align-items: flex-end;
  pointer-events: auto;
}
.editorial-host { display: block; height: 100%; transform-origin: 50% 100%; pointer-events: none; }
.editorial-host img { display: block; height: 100%; width: auto; max-width: none; transform-origin: 50% 90%; }
.editorial-host-groom { rotate: -7deg; }
.editorial-host-bride { margin-left: -12px; translate: 0 -4px; rotate: 6deg; }
.editorial-band-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: filter .18s ease, transform .18s ease;
}
.editorial-band-fallback {
  position: absolute;
  z-index: 1;
  inset: 17% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  background: #ffc4d2;
  font: 700 clamp(21px,6.4cqw,34px)/1.4 var(--sans);
  transform: skewY(-7deg);
  pointer-events: none;
}
#opening-auto-label[hidden] { display: none; }
#opening-auto-count { display: inline-block; min-width: .75em; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.editorial-hint-dot { margin: 0 8px; opacity: .65; }
#home-opening .editorial-touch-hint:after {
  content: '';
  display: block;
  width: 100px;
  height: 1px;
  margin: 8px auto 0;
  background: #fffaf299;
  transform-origin: left;
}
.editorial-band-fallback b { font-size: 1.25em; }
.editorial-band.has-art .editorial-band-fallback { visibility: hidden; }
.editorial-band-art[hidden] { display: none; }
#home-opening .editorial-band:disabled { opacity: 1; cursor: default; }
#home-opening .editorial-band:focus-visible { outline: none; }
#home-opening .editorial-band:focus-visible .editorial-band-art {
  filter: drop-shadow(0 -2px 0 #fffaf2) drop-shadow(0 2px 0 #fffaf2);
}
#home-opening .editorial-band:focus-visible .editorial-band-fallback { outline: 2px solid #fffaf2; outline-offset: 3px; }
#home-opening .editorial-touch-hint {
  position: absolute;
  z-index: 5;
  top: 89.6%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  color: #fffaf2;
  font: 500 13px/1.8 var(--sans);
  letter-spacing: .04em;
  pointer-events: none;
}
#home-opening .editorial-skip {
  position: absolute;
  z-index: 12;
  top: max(5px,env(safe-area-inset-top));
  right: max(16px,env(safe-area-inset-right));
  min-height: 44px;
  padding: 0 3px;
  font: 12px/1.5 var(--sans);
  color: #fffaf2;
  letter-spacing: 0;
}
.editorial-skip>span { margin-left: 6px; font-size: 16px; }
#home-opening .editorial-skip:focus-visible { outline: 2px solid #fffaf2; outline-offset: 2px; }
#home-opening .opening-photo-bridge {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  transform-origin: top left;
  box-sizing: border-box;
  background: #fffcf4;
}
.opening-bridge-photo { position: relative; width: 100%; height: 100%; overflow: hidden; }
#home-opening .opening-bridge-photo>img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.opening-photo-shade { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg,#37151324,transparent 24%,transparent 70%,#241a1a24 84%,#241a1a78); }
#home-opening .opening-photo-bridge[hidden] { display: none; }

#invite[data-home-motion=waiting] .editorial-band-visual { animation: editorial-band-breathe 2.8s .6s ease-in-out infinite; }
#invite[data-home-motion=waiting] .editorial-band:active .editorial-band-visual { animation: none; transform: translateY(4px); filter: brightness(.95); }
#invite[data-home-motion=waiting] .editorial-host { animation: editorial-host-arrive .8s .45s cubic-bezier(.2,.7,.2,1) backwards; }
#invite[data-home-motion=waiting] .editorial-host-bride { animation-delay: .6s; }
#invite[data-home-motion=waiting] .editorial-host-groom img { animation: editorial-host-nod 1.25s 1.3s ease-in-out; }
#invite[data-home-motion=waiting] .editorial-host-bride img { animation: editorial-host-nod 1.25s 2.7s ease-in-out; }
#invite[data-home-motion=waiting] .editorial-glasses { animation: editorial-cheers 3.2s .6s ease-in-out infinite; }
#invite[data-home-motion=waiting] .editorial-star { animation: editorial-twinkle 3s .8s ease-in-out infinite; }
#invite[data-home-motion=waiting] .editorial-door:after { animation: editorial-paper-light 4.6s .2s ease-in-out both; }
#invite[data-home-motion=waiting] .editorial-sparks i { animation: editorial-spark-float 2.8s var(--delay) ease-in-out infinite; }
#invite[data-home-motion=waiting] #opening-auto-count { animation: editorial-count-beat 1s ease-out 5; }
#invite[data-home-motion=waiting] .editorial-touch-hint:after { animation: editorial-count-line 5s linear both; }
#invite[data-home-motion=revealing] .editorial-band { animation: editorial-band-away .58s cubic-bezier(.4,0,.75,.4) both; }
#invite[data-home-motion=revealing] .editorial-door-left { animation: editorial-open-left 1.1s .14s cubic-bezier(.22,.7,.16,1) both; }
#invite[data-home-motion=revealing] .editorial-door-right { animation: editorial-open-right 1.1s .22s cubic-bezier(.22,.7,.16,1) both; }
#invite[data-home-motion=revealing] .editorial-inside { animation: editorial-card-arrive .58s .18s cubic-bezier(.2,.7,.2,1) both; }
#invite[data-home-motion=revealing] :is(.editorial-inside-heading,.editorial-inside-signature) { animation: editorial-hint-away .2s 2.8s ease both; }
#invite[data-home-motion=revealing] .editorial-sparks i { animation: editorial-spark-release .7s ease-out both; }
#invite[data-home-motion=revealing] .editorial-touch-hint { animation: editorial-hint-away .24s ease both; }
#invite.active[data-home-motion=entered] .hero-motion-plane,
#invite.active[data-home-motion=entered] .hero-photo { animation: none; }
body:has(#invite:is([data-home-motion=waiting],[data-home-motion=revealing])) .preview-tools { visibility: hidden; pointer-events: none; }
@keyframes editorial-band-breathe { 0%,55%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-4px) rotate(-.6deg); } 40% { transform: translateY(1px) rotate(.3deg); } }
@keyframes editorial-host-arrive { from { transform: translateY(65%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes editorial-host-nod { 0%,100% { transform: rotate(0); } 25%,65% { transform: rotate(-9deg) translateY(-5px); } 45%,80% { transform: rotate(5deg) translateY(-1px); } }
@keyframes editorial-cheers { 0%,35%,100% { transform: rotate(0); } 12% { transform: rotate(-9deg); } 23% { transform: rotate(6deg); } }
@keyframes editorial-twinkle { 0%,40%,100% { transform: scale(1); opacity: 1; } 18% { transform: scale(.72) rotate(-12deg); opacity: .55; } 28% { transform: scale(1.12) rotate(7deg); opacity: 1; } }
@keyframes editorial-band-away { 0% { transform: translateX(0); opacity: 1; } 18% { transform: translateX(-3%); opacity: 1; } 100% { transform: translateX(112%) rotate(3deg); opacity: 0; } }
@keyframes editorial-open-left { from { transform: rotateY(0); } to { transform: rotateY(-104deg); } }
@keyframes editorial-open-right { from { transform: rotateY(0); } to { transform: rotateY(104deg); } }
@keyframes editorial-card-arrive { from { transform: translateY(28px) scale(.92); opacity: .65; } to { transform: none; opacity: 1; } }
@keyframes editorial-hint-away { to { opacity: 0; } }
@keyframes editorial-paper-light { 0%,100% { opacity: 0; background-position: 100% 0; } 25% { opacity: 1; } 75% { opacity: .5; background-position: 0 0; } }
@keyframes editorial-spark-float { 0%,100% { opacity: 0; transform: translateY(5px) scale(.45) rotate(-20deg); } 35%,65% { opacity: .8; transform: translateY(-5px) scale(1) rotate(15deg); } }
@keyframes editorial-spark-release { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(90deg) scale(.3); } }
@keyframes editorial-count-beat { from { opacity: .55; transform: translateY(2px); } 35%,100% { opacity: 1; transform: translateY(0); } }
@keyframes editorial-count-line { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (hover:hover) and (pointer:fine) {
  #invite[data-home-motion=waiting] .editorial-band:hover .editorial-band-visual { animation: none; transform: translateY(-3px); filter: drop-shadow(0 6px 5px #8d101d30) brightness(1.025); }
}
@media (min-width:650px) {
  html { scrollbar-gutter: stable; }
  #home-opening.editorial-opening { max-width: 520px; }
}
@media (max-height:650px) {
  #home-opening .editorial-touch-hint { font-size: 12px; }
  .editorial-inside { gap: 8px; padding: 13px 12px 12px; }
  .editorial-inside-heading,.editorial-inside-signature { font-size: 14px; }
}
@media (max-height:430px) {
  .editorial-hosts { display: none; }
  #home-opening .editorial-skip { top: 0; font-size: 11px; }
  #home-opening .editorial-band { min-height: 58px; }
  #home-opening .editorial-touch-hint { top: 91%; font-size: 11px; }
  .editorial-inside { top: 11%; bottom: 15%; }
}
@media (prefers-reduced-motion:reduce) {
  .home-booting body[data-mode=before] #invite.active #home-opening,
  #invite:is([data-home-motion=waiting],[data-home-motion=revealing]) #home-opening { display: grid !important; }
  #home-opening.editorial-opening[hidden] { display: none !important; }
  #home-opening *,#home-opening *:before,#home-opening *:after { animation: none !important; transition: none !important; }
}