/* Material finish only: existing geometry, opening clocks and controls own motion. */
.iv-opening[data-letter-opening] {
  --letter-cotton: url('/assets/openings/20261015-materials/cotton-paper.webp');
  --letter-wax: url('/assets/openings/20261015-materials/gold-wax-seal.webp');
  --letter-grain-size: 480px 480px;
}

/* Warm stock, a fine cut edge, and the dark contact line where sheets overlap. */
.iv-opening[data-opening="golden-seal"] .ci-envelope {
  background-color: #b79559;
  background-image: linear-gradient(115deg,#ffffff14,#4f341b1f),var(--letter-cotton);
  background-size: 100% 100%,var(--letter-grain-size);
  background-blend-mode: normal,multiply;
  border-color: #e5cc98;
  box-shadow: 0 2px 0 #8f713c,0 4px 0 -1px #e5c991,0 25px 60px #2817095c,inset 0 3px 8px #56381830;
}
.iv-opening[data-opening="golden-seal"] .ci-envelope-pocket {
  background-color: #dcc18b;
  background-image: linear-gradient(115deg,#fff2d535,transparent 48%,#6e4f2520),var(--letter-cotton);
  background-size: 100% 100%,var(--letter-grain-size);
  background-blend-mode: normal,multiply;
  box-shadow: inset 1px 0 #fff2ce91,inset -1px -2px #8e6d3b55,inset 0 -3px 6px #8b652c16;
}
.iv-opening[data-opening="golden-seal"] .ci-envelope-fold {
  background-color: #cbae76;
  background-image: linear-gradient(152deg,#fff6d72b,transparent 38%,#583c2226),var(--letter-cotton);
  background-size: 100% 100%,var(--letter-grain-size);
  background-blend-mode: normal,multiply;
  box-shadow: inset 1px 0 #fff0cc80;
}
.iv-opening[data-opening="golden-seal"] .ci-envelope-fold-right {
  background-color: #d4b780;
  background-image: linear-gradient(152deg,#fff3d621,#704a2821),var(--letter-cotton);
}

/* Do not filter, clip or lower opacity on these preserve-3d parents: that would
   flatten the reverse face in WebKit. Each face owns its grain and edge detail. */
.iv-opening[data-opening="golden-seal"] .ci-envelope-flap,
.iv-opening[data-opening="ivory-letter"] .il-flap {
  background: transparent;
  clip-path: none;
  filter: none;
  transform-style: preserve-3d;
}
.iv-opening[data-opening="golden-seal"] .ci-flap-face,
.iv-opening[data-opening="ivory-letter"] .il-flap-face {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  clip-path: polygon(0 0,100% 0,50% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: 100% 100%,var(--letter-grain-size);
  background-blend-mode: normal,multiply;
}
.iv-opening[data-opening="golden-seal"] .ci-flap-front {
  background-color: #e6cfa0;
  background-image: linear-gradient(158deg,#fff8df52,transparent 42%,#7c572938),var(--letter-cotton);
  box-shadow: inset 0 1px #fff4d7,inset 0 4px 6px #6a491b12;
}
.iv-opening[data-opening="golden-seal"] .ci-flap-back,
.iv-opening[data-opening="ivory-letter"] .il-flap-back {
  transform: rotateX(180deg);
  clip-path: polygon(0 100%,100% 100%,50% 0);
  background-color: #e5d6b9;
  background-image: linear-gradient(0deg,#78604124,transparent 20%,#fff9ed38 78%),var(--letter-cotton);
  box-shadow: inset 0 -1px #a48b665e,inset 0 -4px 7px #765a3620;
}

/* Short diagonal seams follow the real triangular edges instead of adding a
   decorative outline around the whole envelope. Geometry is inherited. */
.iv-opening[data-opening="golden-seal"] .ci-flap-front::after,
.iv-opening[data-opening="ivory-letter"] .il-flap-front::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0,50% 98.5%,100% 0,50% 100%);
  background: linear-gradient(90deg,#fff6daaa,#85663c85 55%,#fff8e598);
  pointer-events: none;
}
.iv-opening[data-opening="golden-seal"] .ci-envelope-pocket::after,
.iv-opening[data-opening="ivory-letter"] .il-front::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,#684a211a,transparent 42%);
}

/* Burgundy keeps its original dye; multiplying a light paper photograph into
   the stock reveals fibres without turning it into a pale photographic patch. */
.iv-opening[data-opening="velvet-seal"] :is(.vs-envelope-back,.vs-side,.vs-envelope-front,.vs-flap-front) {
  background-color: #673340;
  background-image: linear-gradient(135deg,#b9748921,transparent 40%,#210e1c32),var(--letter-cotton);
  background-size: 100% 100%,var(--letter-grain-size);
  background-blend-mode: normal,multiply;
}
.iv-opening[data-opening="velvet-seal"] .vs-side-right { background-color: #552734; }
.iv-opening[data-opening="velvet-seal"] .vs-flap-front {
  background-color: #75404e;
  box-shadow: inset 0 1px #d8a0aa80,inset 0 4px 8px #2a10191c;
}
.iv-opening[data-opening="velvet-seal"] .vs-envelope-back {
  box-shadow: 0 2px 0 #351820,0 4px 0 -1px #9d6872,0 14px 25px -12px #32192866,0 34px 42px -24px #29142180,inset 0 0 0 2px #93606c38;
}
.iv-opening[data-opening="velvet-seal"] .vs-flap-back {
  background-color: #dfcdae;
  background-image: linear-gradient(0deg,#795c3c28,transparent 22%,#fff7e52b),var(--letter-cotton);
  background-size: 100% 100%,var(--letter-grain-size);
  background-blend-mode: normal,multiply;
  box-shadow: inset 0 -1px #8a6d464d,inset 0 -4px 7px #6d4f3021;
}
.iv-opening[data-opening="velvet-seal"] .vs-ribbon {
  background-image: repeating-linear-gradient(0deg,#e7bcb115 0 .5px,transparent .5px 2px),linear-gradient(90deg,#32141e,#8a4b54 20%,#6b333e 65%,#ad6b715c);
}

/* Ivory folds have different light exposure, but the same fine cotton stock. */
.iv-opening[data-opening="ivory-letter"] .il-envelope {
  background-color: #dfd1bb;
  background-image: var(--letter-cotton);
  background-size: var(--letter-grain-size);
  background-blend-mode: multiply;
  box-shadow: 0 2px 0 #bba98c,0 4px 0 -1px #f5ead7,0 24px 40px #6b4c3424,inset 0 3px 8px #70573726;
}
.iv-opening[data-opening="ivory-letter"] :is(.il-front,.il-fold-left,.il-fold-right,.il-flap-front) {
  background-color: #eee4d0;
  background-image: linear-gradient(135deg,#fffdf340,transparent 48%,#8b704521),var(--letter-cotton);
  background-size: 100% 100%,var(--letter-grain-size);
  background-blend-mode: normal,multiply;
}
.iv-opening[data-opening="ivory-letter"] .il-fold-left { background-color: #e8dcc6; }
.iv-opening[data-opening="ivory-letter"] .il-fold-right { background-color: #e2d5bd; }
.iv-opening[data-opening="ivory-letter"] .il-flap-front {
  background-color: #f3e9d5;
  box-shadow: inset 0 1px #fffdf4,inset 0 4px 7px #8d735015;
}
.iv-opening[data-opening="ivory-letter"] .il-front {
  box-shadow: inset 1px 0 #fffdf3a6,inset -1px -2px #a18a6655;
}
.iv-opening[data-opening="ivory-letter"] .il-band {
  background-image: repeating-linear-gradient(0deg,#fff6e83d 0 .5px,transparent .5px 2px),linear-gradient(90deg,#a58e6c,#eadcc3 24%,#ded0b7 70%,#ac9674);
  box-shadow: inset 1px 0 #fff5dc8a,1px 0 2px #6b513126;
}

/* A slightly thicker writing sheet stays behind the pocket while it rises. */
.iv-opening[data-letter-opening] :is(.ci-letter,.vs-letter,.il-letter) {
  background-color: #fbf5e8;
  background-image: linear-gradient(120deg,#ffffff24,transparent 55%,#9b815517),var(--letter-cotton);
  background-size: 100% 100%,var(--letter-grain-size);
  background-blend-mode: normal,multiply;
  box-shadow: inset 1px 1px #fffdf5,inset -1px -1px #bea98773,0 2px 0 #cbb99a,0 3px 0 #f8f0de,0 6px 15px #49321b26;
}
.iv-opening[data-letter-opening] :is(.ci-letter-rule,.vs-letter-rule,.il-letter-border) {
  box-shadow: 0 1px 0 #ffffff9c,inset 0 1px 0 #88673512;
}
.iv-opening[data-letter-opening] :is(.ci-script,.vs-letter-names,.il-names) {
  text-shadow: 0 1px 0 #fffdf1b3,0 -.4px 0 #51371938;
}

/* One unlettered photographic wax impression; personalization stays live text.
   Image margins are about 7%, so 115% preserves the existing visible seal size. */
.iv-opening[data-letter-opening] :is(.ci-seal,.vs-seal,.il-seal) {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
.iv-opening[data-letter-opening] :is(.ci-seal,.vs-seal,.il-seal)::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--letter-wax) center / 115% 115% no-repeat;
  filter: drop-shadow(1px 3px 2px #4a2a1259);
  pointer-events: none;
}
.iv-opening[data-letter-opening] :is(.ci-seal-ring,.vs-wax,.il-seal>svg) { display: none; }
.iv-opening[data-letter-opening] :is(.ci-seal-monogram,.vs-seal-monogram,.il-seal>span) {
  position: relative;
  z-index: 2;
  color: #715025;
  text-shadow: 0 1px 0 #f9dca69c,0 -.5px .4px #50331259;
}
.iv-opening[data-letter-opening][data-opening="velvet-seal"] .vs-seal-monogram {
  position: absolute;
  inset: 30% 20% 26%;
  font-size: clamp(12px,3.5vw,16px);
  white-space: nowrap;
}
.iv-opening[data-letter-opening] :is(.ci-seal-monogram,.il-seal>span) { max-width: 65%; }

.iv-opening[data-letter-opening][data-opening="golden-seal"] .ci-seal-monogram {
  white-space: nowrap;
  font-size: clamp(13px,3.5vw,20px);
}

/* Keep every name readable without pushing the long-name heading into the flap. */
.iv-opening[data-opening="golden-seal"] .ci-couple.ci-long-names {
  font-size: clamp(18px,4.4vw,30px);
  line-height: 1.1;
  max-width: 27ch;
}
@media(max-height:700px) {
  .iv-opening[data-opening="golden-seal"] .ci-couple.ci-long-names { font-size: 16px; }
}

@media(forced-colors:active) {
  .iv-opening[data-letter-opening] :is(.ci-seal-monogram,.vs-seal-monogram,.il-seal>span,.ci-script,.vs-letter-names,.il-names) {
    color: CanvasText;
    text-shadow: none;
  }
}