@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Great+Vibes&family=Montserrat:wght@400;500&display=swap');

:root{--fundo:#071e18;--papel:#f0eadd;--tinta:#3c3c35;--prata:#d5d5c8;color-scheme:dark;font-family:'Montserrat',sans-serif}
*{box-sizing:border-box}body{margin:0;min-width:280px;background:var(--fundo);color:var(--prata);background-image:radial-gradient(ellipse at 15% 12%,#8ca58a24,transparent 55%),radial-gradient(ellipse at 85% 85%,#0007,transparent 65%)}
body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}button{cursor:pointer}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.experience{min-height:100svh;display:flex;align-items:center;flex-direction:column;padding:35px 20px 22px;overflow:hidden}.intro{text-align:center;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:.32em;color:#d5d5c8a8}.intro p{font-family:'EB Garamond',Georgia,serif;font-size:19px;font-style:italic;margin:10px 0 0;color:#e5e2d8c9}
.scene{position:relative;width:min(100%,420px);aspect-ratio: .665;perspective:1700px;isolation:isolate;box-shadow:0 24px 75px #0006;flex-shrink:0}.invitation{position:absolute;inset:0;background:var(--papel);color:var(--tinta);overflow:hidden;box-shadow:inset 0 0 30px #877b5e22;transition:filter 1.4s;filter:brightness(.5)}.paper-grain{position:absolute;inset:0;opacity:.1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23605235' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}.corner{position:absolute;width:30%;height:20%;color:#55574c;filter:drop-shadow(1px 1px 0 #fff);z-index:1}.tl{top:6px;left:6px}.tr{top:6px;right:6px;transform:scaleX(-1)}.bl{bottom:6px;left:6px;transform:scaleY(-1)}.br{bottom:6px;right:6px;transform:scale(-1)}
.invitation-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8% 8% 7%;font-family:'EB Garamond',Georgia,serif}.crown{font-size:45px;line-height:.9;margin-bottom:8px}.occasion{display:flex;align-items:center;gap:15px;width:75%;justify-content:center}.occasion p{font-size:clamp(23px,6vw,34px);margin:0;white-space:nowrap}.occasion>span{height:1px;flex:1;background:var(--tinta);opacity:.65}h1{font-family:'Great Vibes','Brush Script MT',cursive;font-weight:400;font-size:clamp(43px,10.8vw,68px);line-height:1.18;text-align:center;margin:17px -3% 10px;overflow-wrap:anywhere;max-width:106%}.divider{display:flex;width:78%;gap:12px;align-items:center;justify-content:center;margin:2px 0 20px}.divider>span{height:1px;background:var(--tinta);flex:1;position:relative}.divider>span:after{content:'✦';position:absolute;right:-3px;top:-9px;font-size:16px}.divider>span:last-child:after{right:auto;left:-3px}.divider svg{width:21px;height:28px;flex-shrink:0}.details{width:100%;display:flex;flex-direction:column;gap:9px}.detail{display:flex;align-items:center;gap:12px;min-height:42px;text-decoration:none;color:inherit;font-size:clamp(20px,5.6vw,29px);line-height:1.15;justify-content:center}.detail>svg,.rsvp>svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.date{font-size:clamp(24px,6.3vw,35px)}.time{font-size:32px;margin-bottom:3px}.detail-link{border-radius:3px;transition:background .2s;min-height:44px;padding:4px 5px}.detail-link:hover{background:#47473812}.detail-link>span{text-decoration:underline;text-decoration-color:#77775b66;text-underline-offset:5px}.detail .external{width:13px;height:13px;opacity:.6;margin-left:-4px}.attire{font-size:clamp(19px,5.2vw,27px)}.gifts{font-size:clamp(18px,5.1vw,26px)}.small{width:65%;margin:15px 0 14px}.small svg{width:17px;height:24px}.rsvp{display:flex;align-items:center;gap:10px;text-align:center;color:inherit;text-decoration:none;font-size:clamp(18px,5vw,25px);line-height:1.15;padding:4px;border-radius:3px;min-height:44px}.rsvp>svg{width:33px;height:33px}.rsvp strong{display:block;font-weight:500;margin-top:5px;font-size:1.15em}.rsvp[href]:hover{background:#47473812}.rsvp[aria-disabled=true]{cursor:default}.card-hint{font:8px/1.6 'Montserrat',sans-serif;text-align:center;letter-spacing:.03em;opacity:.65;margin:16px 5px 0}
.doors{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}.door{position:absolute;top:0;width:50%;height:100%;overflow:visible;transform-style:preserve-3d;backface-visibility:hidden;transition:transform 1.65s cubic-bezier(.22,.65,.25,1);background:#0d2b20;box-shadow:0 0 2px #000;will-change:transform}.left{left:0;transform-origin:left center}.right{right:0;transform-origin:right center}.cover-art{position:absolute;top:0;width:200%;height:100%}.cover-art svg{width:100%;height:100%;display:block}.left .cover-art{left:0}.right .cover-art{right:0}.seal{position:absolute;z-index:5;left:50%;top:45%;transform:translate(-50%,-50%);width:91px;height:94px;color:#d9d8cf;border:3px double #a5a79c;border-radius:47% 53% 45% 48% / 48% 46% 55% 52%;background:radial-gradient(ellipse at 35% 25%,#92958a,#494e45 35%,#242c25 65%,#858a7a 83%,#313c31);box-shadow:0 3px 6px #000b,inset 0 0 0 4px #72766a,inset 0 0 0 6px #30392f,inset 1px 2px 8px #f8f8df7a;transition:none;display:grid;place-items:center}.seal:before{content:'';position:absolute;inset:9px;border:1px solid #c8cabc88;border-radius:50%;box-shadow:0 1px 2px #000}.seal span{font-family:'Great Vibes','Brush Script MT',cursive;font-size:52px;line-height:1;transform:translateY(5px);text-shadow:1px 2px 2px #000}.scene.is-open .left{transform:rotateY(-112deg)}.scene.is-open .right{transform:rotateY(112deg)}.scene.is-open .seal{pointer-events:none}.scene.is-open .invitation{filter:brightness(1)}.controls{height:57px;display:grid;place-items:center}.open-hint{font-size:9px;letter-spacing:.17em;opacity:.75}.close-button{border:0;background:none;color:var(--prata);font-size:10px;letter-spacing:.08em;min-height:44px;padding:8px 18px}.close-button>span:first-child{font-size:20px;vertical-align:-2px;margin-right:5px}footer{font-family:'EB Garamond',Georgia,serif;font-size:14px;font-style:italic;opacity:.4;text-align:center} [hidden]{display:none!important}

/* O cartão ocupa o viewport. No desktop, mantém a proporção da referência. */
.experience{height:100svh;min-height:0;padding:0;justify-content:center;overflow:hidden}
.scene{width:min(100vw,66.5625svh);height:100svh;aspect-ratio:auto;container-type:size}
.invitation{background-color:var(--papel)}
.paper-grain{opacity:.07}
.corner{width:30%;height:23%;filter:none;mix-blend-mode:multiply;pointer-events:none}
.tl{top:0;left:0}.tr{top:0;right:0}
.bl{bottom:0;left:0;transform:none;width:25%;height:25%}
.br{bottom:0;right:0;transform:scaleX(-1);width:25%;height:25%}
.invitation-content{padding:7.2cqh 6cqw 8cqh;justify-content:space-evenly}
.crown{width:48cqw;height:9cqh;flex-shrink:0;margin:0;mix-blend-mode:multiply}
.occasion{width:75%;gap:3cqw}.occasion p{font-size:9cqw}
h1{font-size:17cqw;margin:1cqh -3cqw 0;line-height:1.12;width:100%;max-width:106%;flex-shrink:0}
.divider{margin:1.3cqh 0;width:76%;gap:3cqw;flex-shrink:0}
.divider svg{width:6cqw;height:5cqh}
.details{gap:1.1cqh}
.detail{font-size:7cqw;min-height:5.6cqh;gap:3cqw;padding:0}
.detail>svg{width:8cqw;height:8cqw;stroke-width:1.6}
.date{font-size:8cqw}.time{font-size:8cqw;margin:0}
.attire{font-size:6.4cqw}.gifts{font-size:6.2cqw}
.detail-link>span{text-decoration:none}.detail-link:hover>span{text-decoration:underline;text-underline-offset:5px}
.detail .external{display:none}
.small{width:61%;margin:1.2cqh 0}.small svg{width:5cqw;height:4cqh}
.rsvp{font-size:6cqw;gap:2cqw;line-height:1.15;padding:0}
.rsvp>svg{width:9cqw;height:9cqw}.rsvp strong{margin-top:1cqh;font-size:1.08em}
.seal{width:26cqw;height:26cqw;top:45%;padding:0;border:0;border-radius:46%;background:none;box-shadow:0 4px 8px #0007;isolation:isolate}
.seal:before{display:none}.seal-art{position:absolute;inset:0;width:100%;height:100%;border-radius:46%;overflow:hidden}
.seal span{position:relative;display:grid;place-items:center;width:65%;height:65%;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,#62665e,#333b32 75%);font-size:15cqw;transform:none}
.close-button{position:absolute;z-index:6;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:var(--tinta);width:44px;height:44px;min-height:44px;padding:0;opacity:.65}
.close-button>span:first-child{font-size:26px;margin:0;vertical-align:0}
@media(max-width:600px){.scene{width:100vw}}
@media(max-height:500px) and (min-width:601px){.invitation-content{padding-top:5cqh;padding-bottom:6cqh}.detail{min-height:4.5cqh}.details{gap:.5cqh}.close-button{bottom:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.scene.is-open .door{visibility:hidden}}

/* Todos os recortes usam a mesma escala da imagem original (851 px).
   Assim, um grão do papel ocupa o mesmo tamanho no fundo e nos ornamentos. */
.scene{--art-pixel:calc(100cqw / 851)}
.invitation{
  background-image:url('assets/components/paper.png');
  background-size:calc(640 * var(--art-pixel)) calc(340 * var(--art-pixel));
  background-repeat:repeat;
}
.corner{
  width:calc(260 * var(--art-pixel));
  height:auto;
  mix-blend-mode:normal;
  object-fit:contain;
  transform:none;
  --fade-x:to right;
  --fade-y:to bottom;
  mask-image:linear-gradient(var(--fade-x),#000 85%,transparent),linear-gradient(var(--fade-y),#000 85%,transparent);
  mask-composite:add;
}
.tr,.br{--fade-x:to left}.bl,.br{--fade-y:to top}
.tl,.tr{top:0}.bl,.br{bottom:0;width:calc(260 * var(--art-pixel));height:auto}
.crown,.divider{
  height:auto;
  max-height:none;
  object-fit:contain;
  mix-blend-mode:normal;
  mask-image:radial-gradient(ellipse closest-side,#000 75%,transparent 100%);
  flex-shrink:0;
}
.crown{width:calc(370 * var(--art-pixel))}
.divider{display:block;width:calc(485 * var(--art-pixel))}
.divider.small{width:calc(410 * var(--art-pixel))}

/* As linhas originais terminam nos arabescos, sem retângulo por trás deles. */
.frame-lines{position:absolute;inset:0;pointer-events:none}
.frame-line{position:absolute;background-repeat:repeat}
.frame-top,.frame-bottom{
  left:calc(259 * var(--art-pixel));right:calc(259 * var(--art-pixel));
  height:calc(16 * var(--art-pixel));
  background-size:calc(334 * var(--art-pixel)) calc(16 * var(--art-pixel));
}
.frame-top{top:calc(27 * var(--art-pixel));background-image:url('assets/transparent/interior/border-top.png')}
.frame-bottom{bottom:calc(37 * var(--art-pixel));background-image:url('assets/transparent/interior/border-bottom.png')}
.frame-left,.frame-right{
  top:calc(279 * var(--art-pixel));bottom:calc(299 * var(--art-pixel));
  width:calc(16 * var(--art-pixel));
  background-size:calc(16 * var(--art-pixel)) calc(700 * var(--art-pixel));
}
.frame-left{left:calc(20 * var(--art-pixel));background-image:url('assets/transparent/interior/border-left.png')}
.frame-right{right:calc(20 * var(--art-pixel));background-image:url('assets/transparent/interior/border-right.png')}

/* Geometria e traços oficiais da coleção Tabler, sem redesenho por CSS. */
.detail>svg,.rsvp>svg{fill:none;stroke:none}
.close-button>svg{width:24px;height:24px;display:block;margin:auto;fill:none;stroke:none}

/* O selo pertence à folha esquerda e recebe a mesma rotação e perspectiva. */
.door-surface{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden}
.door.left{z-index:2}.door.right{z-index:1}
.seal{left:100%;transform:translate(-50%,-50%) translateZ(1px);backface-visibility:hidden;pointer-events:auto}

/* Capa em componentes: o espaço livre cresce, os arabescos não se alongam. */
.scene{--cover-pixel:calc(100cqw / 708)}
.door{background:#0b241a}
.door-surface{
  background-image:url('assets/cover-components/surface.png');
  background-size:calc(400 * var(--cover-pixel)) calc(480 * var(--cover-pixel));
  background-repeat:repeat;
  box-shadow:inset 0 0 0 1px #c5c8ab1c;
}
.right .door-surface{background-position:right top}
.door-surface:after{content:'';position:absolute;top:0;bottom:0;width:1px;background:#020e09;pointer-events:none}
.left .door-surface:after{right:0}.right .door-surface:after{left:0;background:#76907c50}
.cover-ornament{position:absolute;left:0;width:100%;height:auto;display:block;pointer-events:none}
.cover-top{top:0;mask-image:linear-gradient(to bottom,#000 90%,transparent)}
.cover-bottom{bottom:0;mask-image:linear-gradient(to top,#000 94%,transparent)}
.seal{width:calc(180 * var(--cover-pixel));height:calc(180 * var(--cover-pixel))}
.seal-art{object-fit:contain}

/* Recortes alpha reais: nenhum fragmento de papel ou verde nos ornamentos. */
.corner,.crown,.divider,.cover-top,.cover-bottom{mask-image:none}
.scene{--cover-pixel:calc(100cqw / 760)}
.seal{box-shadow:none;filter:drop-shadow(0 3px 3px #0007);border-radius:0}
.seal-art{border-radius:0}