Philipe & Camila — 10.2026
/* DESIGN TOKENS */
:root {
--ink: #0a0e1a;
--ink-soft: #131829;
--ivory: #f5efe6;
--ivory-dim: #e8ddc9;
--champagne: #d4b896;
--champagne-bright: #e8cfa6;
--rose-gold: #b08968;
--neon: #fffef4;
--glass: rgba(255, 255, 255, 0.07);
--glass-border: rgba(255, 255, 255, 0.14);
--f-display: 'Cormorant Garamond', 'Times New Roman', serif;
--f-script: 'Italianno', cursive;
--f-body: 'Outfit', sans-serif;
--ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%; height: 100%;
overflow: hidden;
background: var(--ink);
color: var(--ivory);
font-family: var(--f-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior: none;
}
body { position: fixed; inset: 0; }
::selection { background: var(--champagne); color: var(--ink); }
/* GRAIN TEXTURE */
body::after {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.08;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* PAGES CONTAINER */
.app {
position: relative;
width: 100vw;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.pages {
display: flex;
width: 300vw;
height: 100%;
transform: translateX(-100vw);
transition: transform 0.75s var(--ease-lux);
will-change: transform;
}
.pages.dragging { transition: none; }
.page {
position: relative;
width: 100vw;
height: 100%;
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
}
.page::-webkit-scrollbar { width: 4px; }
.page::-webkit-scrollbar-track { background: transparent; }
.page::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: 2px; }
/* EDGE NAVIGATION (desktop) */
.edge-nav {
position: fixed;
top: 0;
width: 110px;
height: 100%;
z-index: 100;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
transition: width 0.4s var(--ease-lux);
}
@media (min-width: 900px) { .edge-nav { display: flex; } }
.edge-nav.left { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 40%, transparent 100%); }
.edge-nav.right { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 40%, transparent 100%); }
.edge-nav:hover { width: 150px; }
.edge-nav.disabled { opacity: 0; pointer-events: none; }
.edge-label {
color: var(--neon);
font-family: var(--f-display);
font-size: 13px;
letter-spacing: 0.35em;
text-transform: uppercase;
font-weight: 300;
opacity: 0.7;
transition: opacity 0.3s;
text-shadow: 0 0 20px rgba(255,255,255,0.4);
display: flex;
align-items: center;
gap: 14px;
white-space: nowrap;
}
.edge-nav:hover .edge-label { opacity: 1; }
.edge-arrow {
font-family: var(--f-display);
font-size: 28px;
font-weight: 300;
animation: pulse-arrow 2.4s ease-in-out infinite;
}
@keyframes pulse-arrow {
0%, 100% { transform: translateX(0); opacity: 0.6; }
50% { transform: translateX(-4px); opacity: 1; }
}
.edge-nav.right .edge-arrow { animation-name: pulse-arrow-right; }
@keyframes pulse-arrow-right {
0%, 100% { transform: translateX(0); opacity: 0.6; }
50% { transform: translateX(4px); opacity: 1; }
}
/* INDICATOR */
.indicator {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 200;
padding: 10px 18px;
background: rgba(10, 14, 26, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 100px;
}
.indicator-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.25);
transition: all 0.5s var(--ease-lux);
cursor: pointer;
}
.indicator-dot.active {
width: 28px;
border-radius: 4px;
background: var(--champagne);
box-shadow: 0 0 14px rgba(212, 184, 150, 0.6);
}
/* SWIPE HINT */
.swipe-hint {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 300;
background: rgba(10,14,26,0.85);
backdrop-filter: blur(20px);
padding: 20px 28px;
border-radius: 20px;
border: 1px solid var(--glass-border);
color: var(--ivory);
font-family: var(--f-display);
font-size: 15px;
letter-spacing: 0.15em;
text-align: center;
animation: hint-fade 4s ease-out forwards;
pointer-events: none;
display: none;
}
@media (max-width: 899px) { .swipe-hint { display: block; } }
@keyframes hint-fade {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
75% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); pointer-events: none; }
}
.swipe-hint-icon {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 8px;
font-size: 22px;
color: var(--champagne);
}
/* GLASS BUBBLE (Gmail-style) */
.bubble {
background: var(--glass);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border: 1px solid var(--glass-border);
border-radius: 28px;
padding: 28px 32px;
box-shadow:
0 1px 0 rgba(255,255,255,0.1) inset,
0 0 0 1px rgba(255,255,255,0.02),
0 20px 60px rgba(0,0,0,0.35),
0 0 40px rgba(255, 254, 244, 0.05);
position: relative;
overflow: hidden;
}
.bubble::before {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
background: linear-gradient(135deg,
rgba(255,254,244,0.25) 0%,
transparent 30%,
transparent 70%,
rgba(212,184,150,0.18) 100%);
border-radius: 28px;
z-index: -1;
opacity: 0.6;
}
.bubble-sm { padding: 14px 22px; border-radius: 100px; }
/* CENTER PAGE — ONBOARDING */
.page-center { position: relative; background: var(--ink); }
.video-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.video-bg video {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.55) saturate(1.1);
}
.video-bg .mesh {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(176, 137, 104, 0.55) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(212, 184, 150, 0.45) 0%, transparent 55%),
radial-gradient(ellipse at 60% 20%, rgba(10, 14, 26, 1) 0%, rgba(19, 24, 41, 1) 100%);
animation: mesh-drift 18s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
0% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.12) translate(-2%, 2%); }
100% { transform: scale(1.05) translate(2%, -1%); }
}
.video-bg::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at center, transparent 0%, rgba(10,14,26,0.55) 70%, rgba(10,14,26,0.85) 100%),
linear-gradient(to bottom, rgba(10,14,26,0.4) 0%, transparent 30%, transparent 70%, rgba(10,14,26,0.6) 100%);
pointer-events: none;
}
.center-content {
position: relative;
z-index: 2;
min-height: 100%;
padding: 60px 24px 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
max-width: 880px;
margin: 0 auto;
}
@media (min-width: 900px) { .center-content { padding: 80px 160px 100px; } }
.monogram {
font-family: var(--f-display);
font-weight: 300;
font-size: 14px;
letter-spacing: 0.55em;
color: var(--champagne);
text-transform: uppercase;
opacity: 0;
animation: fade-in-up 1.2s var(--ease-lux) 0.2s forwards;
}
.couple-names {
font-family: var(--f-script);
font-size: clamp(72px, 14vw, 180px);
line-height: 0.85;
text-align: center;
color: var(--neon);
font-weight: 400;
text-shadow:
0 0 40px rgba(255, 254, 244, 0.25),
0 0 80px rgba(212, 184, 150, 0.15);
opacity: 0;
animation: fade-in-up 1.4s var(--ease-lux) 0.5s forwards;
}
.couple-names .amp {
font-size: 0.7em;
color: var(--champagne);
display: inline-block;
transform: translateY(-0.1em);
margin: 0 0.1em;
}
.tagline {
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
font-size: clamp(16px, 2.2vw, 22px);
color: var(--ivory-dim);
text-align: center;
max-width: 580px;
line-height: 1.5;
opacity: 0;
animation: fade-in-up 1.2s var(--ease-lux) 1s forwards;
}
.divider-ornament {
display: flex;
align-items: center;
gap: 18px;
color: var(--champagne);
opacity: 0;
animation: fade-in-up 1s var(--ease-lux) 1.3s forwards;
}
.divider-ornament::before,
.divider-ornament::after {
content: "";
width: 60px;
height: 1px;
background: linear-gradient(to right, transparent, var(--champagne), transparent);
}
.divider-ornament span { font-size: 14px; letter-spacing: 0.3em; }
.date-block {
display: flex;
align-items: center;
gap: 22px;
opacity: 0;
animation: fade-in-up 1.2s var(--ease-lux) 1.6s forwards;
}
@media (max-width: 600px) { .date-block { gap: 14px; } }
.date-pill { text-align: center; padding: 14px 22px; }
.date-pill .num {
font-family: var(--f-display);
font-size: clamp(28px, 4vw, 38px);
font-weight: 400;
color: var(--neon);
line-height: 1;
letter-spacing: 0.04em;
}
.date-pill .lbl {
font-family: var(--f-body);
font-size: 10px;
letter-spacing: 0.35em;
color: var(--champagne);
text-transform: uppercase;
margin-top: 4px;
font-weight: 300;
}
.date-sep {
font-family: var(--f-display);
font-size: 28px;
color: var(--champagne);
font-weight: 300;
}
.countdown {
margin-top: 14px;
opacity: 0;
animation: fade-in-up 1s var(--ease-lux) 2s forwards;
}
.countdown-row { display: flex; gap: 14px; justify-content: center; }
.cd-box { min-width: 68px; padding: 12px 14px; text-align: center; }
.cd-box .v {
font-family: var(--f-display);
font-size: 26px;
font-weight: 500;
color: var(--neon);
line-height: 1;
}
.cd-box .u {
font-size: 9px;
letter-spacing: 0.25em;
color: var(--champagne);
text-transform: uppercase;
margin-top: 4px;
}
.scripture {
margin-top: 20px;
max-width: 520px;
text-align: center;
padding: 22px 28px;
opacity: 0;
animation: fade-in-up 1s var(--ease-lux) 2.3s forwards;
}
.scripture-verse {
font-family: var(--f-display);
font-style: italic;
font-weight: 300;
font-size: 17px;
line-height: 1.6;
color: var(--ivory);
}
.scripture-ref {
font-family: var(--f-body);
font-size: 10px;
letter-spacing: 0.4em;
color: var(--champagne);
text-transform: uppercase;
margin-top: 12px;
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* RIGHT PAGE — DETAILS */
.page-details {
position: relative;
background:
radial-gradient(ellipse at top right, rgba(176, 137, 104, 0.15) 0%, transparent 55%),
radial-gradient(ellipse at bottom left, rgba(212, 184, 150, 0.08) 0%, transparent 55%),
var(--ink);
}
.word-search-bg {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
opacity: 0.55;
}
.word-grid {
position: absolute;
inset: 0;
display: grid;
padding: 20px;
font-family: var(--f-display);
color: rgba(212, 184, 150, 0.32);
font-weight: 400;
user-select: none;
letter-spacing: 0.1em;
line-height: 1;
}
.word-grid span {
display: flex;
align-items: center;
justify-content: center;
transition: color 0.6s;
}
.word-grid span.highlight {
color: var(--neon);
text-shadow: 0 0 12px rgba(255, 254, 244, 0.6);
}
.marker-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.marker-stroke {
fill: none;
stroke: var(--champagne);
stroke-width: 14;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.55;
stroke-dasharray: 1400;
stroke-dashoffset: 1400;
filter: drop-shadow(0 0 8px rgba(212, 184, 150, 0.5));
}
.marker-stroke.animate { animation: marker-draw 2.5s var(--ease-lux) forwards; }
@keyframes marker-draw { to { stroke-dashoffset: 0; } }
.details-content {
position: relative;
z-index: 3;
min-height: 100%;
padding: 70px 20px 100px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
max-width: 700px;
margin: 0 auto;
}
@media (min-width: 900px) { .details-content { padding: 70px 140px 100px; } }
.section-title {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(28px, 4vw, 42px);
color: var(--neon);
text-align: center;
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.section-sub {
font-family: var(--f-display);
font-style: italic;
font-size: 14px;
color: var(--champagne);
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
margin-bottom: 14px;
}
.venue-card { width: 100%; padding: 28px 26px; }
.venue-name {
font-family: var(--f-display);
font-size: 26px;
color: var(--neon);
text-align: center;
font-weight: 500;
margin-bottom: 8px;
}
.venue-addr {
font-size: 13px;
text-align: center;
color: var(--ivory-dim);
letter-spacing: 0.05em;
line-height: 1.6;
margin-bottom: 18px;
}
.venue-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 500px) { .venue-actions { grid-template-columns: 1fr; } }
.action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 18px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--glass-border);
border-radius: 14px;
color: var(--ivory);
font-family: var(--f-body);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 400;
text-decoration: none;
cursor: pointer;
transition: all 0.3s var(--ease-lux);
}
.action-btn:hover {
background: rgba(212, 184, 150, 0.15);
border-color: var(--champagne);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(212, 184, 150, 0.15);
}
.action-btn svg { width: 18px; height: 18px; }
.action-btn.primary {
background: linear-gradient(135deg, var(--champagne) 0%, var(--rose-gold) 100%);
color: var(--ink);
border-color: transparent;
font-weight: 500;
}
.action-btn.primary:hover {
background: linear-gradient(135deg, var(--champagne-bright) 0%, var(--champagne) 100%);
}
.map-wrap {
width: 100%;
height: 240px;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--glass-border);
background: var(--ink-soft);
}
.map-wrap iframe {
width: 100%; height: 100%;
border: 0;
filter: invert(0.88) hue-rotate(180deg) saturate(0.5);
}
.guest-card { width: 100%; padding: 24px; }
.guest-search {
width: 100%;
padding: 12px 18px;
background: rgba(0,0,0,0.25);
border: 1px solid var(--glass-border);
border-radius: 100px;
color: var(--ivory);
font-family: var(--f-body);
font-size: 14px;
margin-bottom: 16px;
outline: none;
transition: border-color 0.3s;
}
.guest-search:focus {
border-color: var(--champagne);
box-shadow: 0 0 0 3px rgba(212, 184, 150, 0.12);
}
.guest-list {
max-height: 260px;
overflow-y: auto;
padding-right: 6px;
}
.guest-list::-webkit-scrollbar { width: 4px; }
.guest-list::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: 2px; }
.guest-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 14px;
}
.guest-item:last-child { border-bottom: none; }
.guest-name { color: var(--ivory); font-weight: 300; }
.guest-status {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
}
.guest-status.confirmed {
background: rgba(212, 184, 150, 0.18);
color: var(--champagne-bright);
}
.guest-status.pending {
background: rgba(255,255,255,0.06);
color: var(--ivory-dim);
}
/* LEFT PAGE — GIFT REGISTRY */
.page-gifts {
background:
radial-gradient(ellipse at top left, rgba(176, 137, 104, 0.12) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, rgba(212, 184, 150, 0.06) 0%, transparent 55%),
var(--ink);
}
.gifts-content {
min-height: 100%;
padding: 70px 20px 100px;
max-width: 1400px;
margin: 0 auto;
}
@media (min-width: 900px) { .gifts-content { padding: 70px 140px 100px; } }
.gifts-header { text-align: center; margin-bottom: 36px; }
.gifts-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 28px;
}
.chip {
padding: 8px 18px;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 100px;
color: var(--ivory-dim);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s;
backdrop-filter: blur(10px);
}
.chip:hover { border-color: var(--champagne); color: var(--ivory); }
.chip.active {
background: linear-gradient(135deg, var(--champagne), var(--rose-gold));
color: var(--ink);
border-color: transparent;
font-weight: 500;
}
.gift-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (min-width: 700px) { .gift-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 900px) { .gift-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
@media (min-width: 1200px) { .gift-grid { grid-template-columns: repeat(8, 1fr); } }
.gift-card {
position: relative;
aspect-ratio: 1;
background: var(--glass);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 12px;
cursor: pointer;
transition: all 0.4s var(--ease-lux);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
perspective: 600px;
}
.gift-card::before {
content: "";
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: conic-gradient(from 0deg, transparent 0deg, rgba(212, 184, 150, 0.12) 30deg, transparent 60deg);
animation: card-shine 8s linear infinite;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
.gift-card:hover::before { opacity: 1; }
@keyframes card-shine { to { transform: rotate(360deg); } }
.gift-card:hover {
transform: translateY(-4px);
border-color: var(--champagne);
box-shadow:
0 20px 40px rgba(0,0,0,0.4),
0 0 30px rgba(212, 184, 150, 0.15);
}
.gift-card.taken { opacity: 0.4; pointer-events: none; }
.gift-card.taken::after {
content: "PRESENTEADO";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-12deg);
font-family: var(--f-display);
font-size: 12px;
letter-spacing: 0.25em;
color: var(--champagne);
border: 2px solid var(--champagne);
padding: 4px 12px;
border-radius: 6px;
background: rgba(10, 14, 26, 0.75);
}
.gift-icon {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transform-style: preserve-3d;
}
.gift-icon-inner {
font-size: clamp(32px, 5vw, 44px);
animation: rotate-3d 3s linear infinite;
transform-style: preserve-3d;
display: inline-block;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
@keyframes rotate-3d {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.gift-icon-platform {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 6px;
background: radial-gradient(ellipse, rgba(212, 184, 150, 0.35) 0%, transparent 70%);
filter: blur(2px);
animation: platform-pulse 3s ease-in-out infinite;
}
@keyframes platform-pulse {
0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.5; }
50% { transform: translateX(-50%) scaleX(0.6); opacity: 0.8; }
}
.gift-info {
text-align: center;
padding-top: 4px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.gift-name {
font-family: var(--f-body);
font-size: 10px;
color: var(--ivory-dim);
font-weight: 300;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.gift-price {
font-family: var(--f-display);
font-size: 14px;
color: var(--champagne-bright);
font-weight: 500;
letter-spacing: 0.03em;
}
/* MODAL */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(10, 14, 26, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease-lux);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal {
max-width: 520px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.9);
transition: transform 0.5s var(--ease-spring);
padding: 36px 32px;
}
.modal-overlay.active .modal { transform: scale(1); }
.modal-close {
position: absolute;
top: 16px;
right: 18px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid var(--glass-border);
color: var(--ivory);
cursor: pointer;
font-family: var(--f-display);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.modal-close:hover {
background: var(--champagne);
color: var(--ink);
transform: rotate(90deg);
}
.modal-icon {
font-size: 88px;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
animation: rotate-3d 3s linear infinite;
display: inline-block;
}
.modal-icon-wrap {
text-align: center;
padding: 20px 0;
position: relative;
}
.modal-icon-wrap::after {
content: "";
position: absolute;
bottom: 10px; left: 50%;
transform: translateX(-50%);
width: 120px; height: 10px;
background: radial-gradient(ellipse, rgba(212, 184, 150, 0.45) 0%, transparent 70%);
filter: blur(4px);
animation: platform-pulse 3s ease-in-out infinite;
}
.modal-title {
font-family: var(--f-display);
font-size: 30px;
font-weight: 500;
color: var(--neon);
text-align: center;
margin-bottom: 4px;
letter-spacing: 0.01em;
}
.modal-cat {
font-family: var(--f-body);
font-size: 10px;
letter-spacing: 0.35em;
color: var(--champagne);
text-align: center;
text-transform: uppercase;
margin-bottom: 22px;
}
.modal-message {
font-family: var(--f-display);
font-style: italic;
font-size: 15px;
line-height: 1.65;
color: var(--ivory-dim);
text-align: center;
margin-bottom: 20px;
padding: 0 10px;
}
.modal-price { text-align: center; margin-bottom: 24px; }
.modal-price .label {
font-family: var(--f-body);
font-size: 10px;
letter-spacing: 0.35em;
color: var(--champagne);
text-transform: uppercase;
margin-bottom: 4px;
}
.modal-price .value {
font-family: var(--f-display);
font-size: 46px;
font-weight: 400;
color: var(--neon);
line-height: 1;
}
.modal-price .value .cents {
font-size: 22px;
color: var(--champagne);
vertical-align: top;
margin-left: 2px;
}
.pay-methods {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.pay-btn {
padding: 16px 14px;
border-radius: 14px;
font-family: var(--f-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s var(--ease-lux);
}
.pay-btn.pix {
background: linear-gradient(135deg, #32BCAD 0%, #259c90 100%);
color: white;
}
.pay-btn.card {
background: linear-gradient(135deg, var(--champagne) 0%, var(--rose-gold) 100%);
color: var(--ink);
}
.pay-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.3); }
.pay-btn svg { width: 18px; height: 18px; }
.modal-safety {
text-align: center;
font-size: 11px;
color: var(--ivory-dim);
letter-spacing: 0.15em;
margin-top: 8px;
opacity: 0.7;
}
/* THANK YOU MODAL */
.thanks-modal { text-align: center; padding: 40px 32px; }
.thanks-heart {
font-size: 60px;
color: var(--champagne);
animation: heartbeat 1.5s ease-in-out infinite;
margin-bottom: 12px;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.thanks-title {
font-family: var(--f-script);
font-size: 64px;
color: var(--neon);
line-height: 0.9;
margin-bottom: 18px;
text-shadow: 0 0 30px rgba(212, 184, 150, 0.4);
}
.thanks-body {
font-family: var(--f-display);
font-style: italic;
font-size: 16px;
line-height: 1.7;
color: var(--ivory);
margin-bottom: 24px;
}
.video-thanks {
width: 100%;
aspect-ratio: 9/16;
max-height: 400px;
background: var(--ink-soft);
border-radius: 18px;
border: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
color: var(--ivory-dim);
position: relative;
overflow: hidden;
margin: 0 auto 20px;
max-width: 240px;
}
.video-thanks::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(176, 137, 104, 0.4), transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(212, 184, 150, 0.3), transparent 60%);
animation: mesh-drift 10s ease-in-out infinite alternate;
}
.play-btn {
width: 60px; height: 60px;
border-radius: 50%;
background: rgba(255, 254, 244, 0.95);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
transition: transform 0.3s;
}
.play-btn:hover { transform: scale(1.1); }
.play-btn::after {
content: "";
width: 0; height: 0;
border-left: 18px solid var(--ink);
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
margin-left: 4px;
}
.thanks-sign {
font-family: var(--f-script);
font-size: 38px;
color: var(--champagne-bright);
margin-top: 12px;
}
.fade-in { animation: fade-in-up 0.8s var(--ease-lux) forwards; }
@media (max-width: 600px) {
.couple-names { font-size: 80px; }
.bubble { padding: 22px 20px; border-radius: 22px; }
.modal { padding: 28px 22px; }
.modal-title { font-size: 24px; }
.modal-price .value { font-size: 38px; }
.pay-methods { grid-template-columns: 1fr; }
.thanks-title { font-size: 48px; }
}
ARRASTE PARA EXPLORAR
← →
Todos
Cozinha
Eletrodomésticos
Mesa & Copos
Banheiro
Quarto
Casa
P · C
Philipe&
✦
Dois corações, uma só aliança. Um convite para celebrar o começo do nosso para sempre.
"Portanto, deixará o homem a seu pai e a sua mãe, e unir-se-á à sua mulher, e serão ambos uma só carne."
Gênesis 2:24
Celebração
Detalhes da Noite
Villa Bella Fortaleza
Av. Beira Mar, 1234 — Meireles
Confirme Sua Presença
Lista de Convidados
Dress Code
Traje Passeio Completo
Tons neutros e elegantes
×
🎁
Cozinha
Liquidificador
Este presente tem um valor simbólico — é um tijolo na construção do nosso lar e um abraço que ficará com a gente para sempre. Que Deus multiplique sua generosidade.
Pix
Cartão
Pagamento 100% seguro via InfinityPay
×
♡
Obrigado!
Seu carinho acaba de chegar no nosso coração.
Em breve você receberá nossa carta pessoal de agradecimento.
— Philipe & Camila
let currentPage = 1;
const pagesEl = document.getElementById('pages');
const dots = document.querySelectorAll('.indicator-dot');
const edgeL = document.getElementById('edgeLeft');
const edgeR = document.getElementById('edgeRight');
function goToPage(i) {
i = Math.max(0, Math.min(2, i));
currentPage = i;
pagesEl.style.transform = `translateX(${-i * 100}vw)`;
dots.forEach((d, idx) => d.classList.toggle('active', idx === i));
edgeL.classList.toggle('disabled', i === 0);
edgeR.classList.toggle('disabled', i === 2);
if (i === 2) triggerWordSearchAnimations();
}
let touchStartX = 0, touchStartY = 0, touchDeltaX = 0, isDragging = false;
pagesEl.addEventListener('touchstart', e => {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
isDragging = false;
}, { passive: true });
pagesEl.addEventListener('touchmove', e => {
touchDeltaX = e.touches[0].clientX - touchStartX;
const deltaY = e.touches[0].clientY - touchStartY;
if (!isDragging && Math.abs(touchDeltaX) > 10 && Math.abs(touchDeltaX) > Math.abs(deltaY)) {
isDragging = true;
pagesEl.classList.add('dragging');
}
if (isDragging) {
const vw = window.innerWidth;
const offset = -currentPage * vw + touchDeltaX * 0.7;
pagesEl.style.transform = `translateX(${offset}px)`;
}
}, { passive: true });
pagesEl.addEventListener('touchend', () => {
pagesEl.classList.remove('dragging');
if (isDragging) {
const threshold = window.innerWidth * 0.18;
if (touchDeltaX threshold) goToPage(currentPage - 1);
else goToPage(currentPage);
}
touchDeltaX = 0;
isDragging = false;
});
document.addEventListener('keydown', e => {
if (e.key === 'ArrowLeft') goToPage(currentPage - 1);
if (e.key === 'ArrowRight') goToPage(currentPage + 1);
if (e.key === 'Escape') { closeModal(); closeThanks(); }
});
goToPage(1);
/* COUNTDOWN */
const target = new Date('2026-10-25T18:00:00-03:00').getTime();
function updateCountdown() {
const now = Date.now();
const diff = Math.max(0, target - now);
const d = Math.floor(diff / 86400000);
const h = Math.floor(diff % 86400000 / 3600000);
const m = Math.floor(diff % 3600000 / 60000);
const s = Math.floor(diff % 60000 / 1000);
document.getElementById('cd-d').textContent = String(d).padStart(3, '0');
document.getElementById('cd-h').textContent = String(h).padStart(2, '0');
document.getElementById('cd-m').textContent = String(m).padStart(2, '0');
document.getElementById('cd-s').textContent = String(s).padStart(2, '0');
}
updateCountdown();
setInterval(updateCountdown, 1000);
/* GIFT REGISTRY — 80 PRODUTOS */
const GIFTS = [
{ n: 'Jogo de Panelas', p: 480, icon: '🍳', cat: 'cozinha' },
{ n: 'Panela de Pressão', p: 180, icon: '🫕', cat: 'cozinha' },
{ n: 'Frigideira Antiaderente', p: 140, icon: '🍳', cat: 'cozinha' },
{ n: 'Wok Oriental', p: 220, icon: '🥘', cat: 'cozinha' },
{ n: 'Assadeira Retangular', p: 120, icon: '🥧', cat: 'cozinha' },
{ n: 'Forma de Bolo', p: 110, icon: '🎂', cat: 'cozinha' },
{ n: 'Tábua de Corte Bambu', p: 130, icon: '🪵', cat: 'cozinha' },
{ n: 'Kit Facas Profissional', p: 380, icon: '🔪', cat: 'cozinha' },
{ n: 'Ralador 4 Lados', p: 100, icon: '🧀', cat: 'cozinha' },
{ n: 'Peneira Inox', p: 110, icon: '🕸️', cat: 'cozinha' },
{ n: 'Escorredor de Massa', p: 120, icon: '🍝', cat: 'cozinha' },
{ n: 'Porta-Mantimentos 6un', p: 160, icon: '🫙', cat: 'cozinha' },
{ n: 'Conjunto Temperos', p: 140, icon: '🧂', cat: 'cozinha' },
{ n: 'Tigelas de Vidro', p: 130, icon: '🥣', cat: 'cozinha' },
{ n: 'Açucareiro Farinheira', p: 120, icon: '☕', cat: 'cozinha' },
{ n: 'Porta-Temperos Giratório', p: 150, icon: '🌀', cat: 'cozinha' },
{ n: 'Descascador Zester', p: 100, icon: '🥕', cat: 'cozinha' },
{ n: 'Batedor de Ovos', p: 100, icon: '🥚', cat: 'cozinha' },
{ n: 'Liquidificador', p: 320, icon: '🧃', cat: 'eletro' },
{ n: 'Batedeira Planetária', p: 750, icon: '🍰', cat: 'eletro' },
{ n: 'Mixer 3 em 1', p: 260, icon: '🥤', cat: 'eletro' },
{ n: 'Microondas 30L', p: 780, icon: '📟', cat: 'eletro' },
{ n: 'Forno Elétrico', p: 650, icon: '🔥', cat: 'eletro' },
{ n: 'Air Fryer 7L', p: 620, icon: '🍟', cat: 'eletro' },
{ n: 'Cafeteira Italiana', p: 220, icon: '☕', cat: 'eletro' },
{ n: 'Cafeteira Expresso', p: 980, icon: '☕', cat: 'eletro' },
{ n: 'Sanduicheira Grill', p: 180, icon: '🥪', cat: 'eletro' },
{ n: 'Torradeira 4 Fatias', p: 240, icon: '🍞', cat: 'eletro' },
{ n: 'Chaleira Elétrica', p: 180, icon: '🫖', cat: 'eletro' },
{ n: 'Espremedor Elétrico', p: 200, icon: '🍊', cat: 'eletro' },
{ n: 'Processador Alimentos', p: 460, icon: '🥗', cat: 'eletro' },
{ n: 'Panela Elétrica Arroz', p: 280, icon: '🍚', cat: 'eletro' },
{ n: 'Iogurteira', p: 140, icon: '🥛', cat: 'eletro' },
{ n: 'Panificadora', p: 780, icon: '🥖', cat: 'eletro' },
{ n: 'Grill Elétrico', p: 340, icon: '🥩', cat: 'eletro' },
{ n: 'Aspirador Vertical', p: 680, icon: '🧹', cat: 'eletro' },
{ n: 'Robô Aspirador', p: 1650, icon: '🤖', cat: 'eletro' },
{ n: 'Ferro de Passar Vapor', p: 290, icon: '👕', cat: 'eletro' },
{ n: 'Ventilador de Torre', p: 460, icon: '💨', cat: 'eletro' },
{ n: 'Umidificador de Ar', p: 260, icon: '🌫️', cat: 'eletro' },
{ n: 'Purificador de Água', p: 820, icon: '💧', cat: 'eletro' },
{ n: 'Máquina Lavar Louça', p: 1980, icon: '🍽️', cat: 'eletro' },
{ n: 'Aparelho Jantar 30pç', p: 520, icon: '🍽️', cat: 'mesa' },
{ n: 'Jogo Taças Cristal', p: 320, icon: '🥂', cat: 'mesa' },
{ n: 'Jogo Copos Long Drink', p: 160, icon: '🥃', cat: 'mesa' },
{ n: 'Jogo Xícaras Porcelana', p: 220, icon: '🍵', cat: 'mesa' },
{ n: 'Faqueiro Inox 42pç', p: 580, icon: '🍴', cat: 'mesa' },
{ n: 'Jogo Americano 6un', p: 120, icon: '🪑', cat: 'mesa' },
{ n: 'Toalha de Mesa Linho', p: 240, icon: '📐', cat: 'mesa' },
{ n: 'Guardanapos Tecido', p: 100, icon: '🧻', cat: 'mesa' },
{ n: 'Saladeira Madeira', p: 180, icon: '🥗', cat: 'mesa' },
{ n: 'Travessas Porcelana', p: 260, icon: '🍲', cat: 'mesa' },
{ n: 'Jogo Toalhas Banho', p: 340, icon: '🧖', cat: 'banheiro' },
{ n: 'Roupões do Casal', p: 480, icon: '🥋', cat: 'banheiro' },
{ n: 'Tapete de Banheiro', p: 120, icon: '🪟', cat: 'banheiro' },
{ n: 'Kit Cerâmica Banheiro', p: 160, icon: '🧴', cat: 'banheiro' },
{ n: 'Lixeira Inox', p: 140, icon: '🗑️', cat: 'banheiro' },
{ n: 'Balança Digital', p: 180, icon: '⚖️', cat: 'banheiro' },
{ n: 'Espelho com LED', p: 290, icon: '🪞', cat: 'banheiro' },
{ n: 'Organizador de Pia', p: 110, icon: '🧼', cat: 'banheiro' },
{ n: 'Cortina de Box', p: 120, icon: '🚿', cat: 'banheiro' },
{ n: 'Saboneteira Dispenser', p: 110, icon: '🫧', cat: 'banheiro' },
{ n: 'Jogo de Cama Queen', p: 420, icon: '🛏️', cat: 'quarto' },
{ n: 'Edredom Queen 300 Fios', p: 580, icon: '🛌', cat: 'quarto' },
{ n: 'Travesseiros do Casal', p: 260, icon: '💤', cat: 'quarto' },
{ n: 'Manta Peseira', p: 180, icon: '🪄', cat: 'quarto' },
{ n: 'Kit Almofadas Decor', p: 240, icon: '🎀', cat: 'quarto' },
{ n: 'Cortinas Blackout', p: 380, icon: '🪟', cat: 'quarto' },
{ n: 'Abajur Cabeceira', p: 220, icon: '💡', cat: 'quarto' },
{ n: 'Kit Churrasco Completo', p: 340, icon: '🥩', cat: 'casa' },
{ n: 'Kit Ferramentas Básico', p: 260, icon: '🔧', cat: 'casa' },
{ n: 'Cesto de Roupas', p: 150, icon: '🧺', cat: 'casa' },
{ n: 'Tábua de Passar', p: 180, icon: '👔', cat: 'casa' },
{ n: 'Varal de Chão', p: 140, icon: '🪢', cat: 'casa' },
{ n: 'Organizadores Acrílico', p: 130, icon: '📦', cat: 'casa' },
{ n: 'Kit Limpeza Premium', p: 220, icon: '🧽', cat: 'casa' },
{ n: 'Difusor de Aromas', p: 160, icon: '🌸', cat: 'casa' },
{ n: 'Vaso Decorativo', p: 180, icon: '🏺', cat: 'casa' },
{ n: 'Quadro Decorativo', p: 240, icon: '🖼️', cat: 'casa' },
{ n: 'Luminária de Piso', p: 480, icon: '🕯️', cat: 'casa' },
{ n: 'Tapete Sala 2x3m', p: 620, icon: '🟫', cat: 'casa' },
{ n: 'Relógio de Parede', p: 180, icon: '🕰️', cat: 'casa' },
{ n: 'Plantas + Vasos Kit 3', p: 200, icon: '🪴', cat: 'casa' },
];
const takenIndexes = new Set([3, 19, 45]);
function renderGifts(filter) {
filter = filter || 'todos';
const grid = document.getElementById('giftGrid');
grid.innerHTML = '';
GIFTS.forEach((g, i) => {
if (filter !== 'todos' && g.cat !== filter) return;
const card = document.createElement('div');
card.className = 'gift-card' + (takenIndexes.has(i) ? ' taken' : '');
card.style.animationDelay = (i * 15) + 'ms';
card.classList.add('fade-in');
card.innerHTML =
'
' +
'
' + g.icon + ' ' +
'
' +
'
' +
'
' +
'
' + g.n + '
' +
'
R$ ' + g.p + '
' +
'
';
card.addEventListener('click', () => openModal(g));
grid.appendChild(card);
});
}
renderGifts();
document.getElementById('giftsFilter').addEventListener('click', e => {
const chip = e.target.closest('.chip');
if (!chip) return;
document.querySelectorAll('.gifts-filter .chip').forEach(c => c.classList.remove('active'));
chip.classList.add('active');
renderGifts(chip.dataset.cat);
});
/* MODAL */
let currentGift = null;
function openModal(g) {
currentGift = g;
document.getElementById('modalIcon').textContent = g.icon;
document.getElementById('modalTitle').textContent = g.n;
document.getElementById('modalCat').textContent = g.cat;
document.getElementById('modalPriceInt').textContent = g.p;
document.getElementById('productModal').classList.add('active');
}
function closeModal() { document.getElementById('productModal').classList.remove('active'); }
document.getElementById('productModal').addEventListener('click', e => {
if (e.target.id === 'productModal') closeModal();
});
/* PAYMENT (InfinityPay) */
function openPayment(method) {
// Em produção, troque pela URL real do seu InfinityPay:
// const url = 'https://loja.infinitepay.io/SEU_USUARIO/' + encodeURIComponent(currentGift.n) + '?amount=' + (currentGift.p * 100);
// window.open(url, '_blank');
closeModal();
setTimeout(() => {
document.getElementById('thanksModal').classList.add('active');
}, 300);
}
function closeThanks() { document.getElementById('thanksModal').classList.remove('active'); }
document.getElementById('thanksModal').addEventListener('click', e => {
if (e.target.id === 'thanksModal') closeThanks();
});
/* GUEST LIST */
const GUESTS = [
'Alexandre Lima', 'Amanda Ribeiro', 'Ana Beatriz Souza', 'André Correia', 'Beatriz Martins',
'Bruno Alencar', 'Carlos Eduardo', 'Caroline Torres', 'Daniel Barbosa', 'Diego Alves',
'Eduarda Nogueira', 'Família Oliveira', 'Família Pereira', 'Família Santos', 'Fernanda Castro',
'Fernando Matos', 'Gabriel Rocha', 'Gabriela Lins', 'Gustavo Henrique', 'Helena Gomes',
'Igor Mendes', 'Isabela Mota', 'Isabela Viana', 'João Pedro', 'Juliana Costa',
'Júlia Campos', 'Larissa Andrade', 'Leonardo Siqueira', 'Letícia Pinto', 'Lucas Cavalcante',
'Luana Freitas', 'Luiz Felipe', 'Marcela Duarte', 'Mariana Brito', 'Matheus Vieira',
'Natália Xavier', 'Nicolas Teixeira', 'Otávio Moraes', 'Paloma Rezende', 'Paulo Henrique',
'Pedro Augusto', 'Priscila Nunes', 'Rafael Monteiro', 'Rafaela Coelho', 'Raquel Farias',
'Renato Aguiar', 'Ricardo Tavares', 'Roberta Guimarães', 'Rodrigo Prado', 'Samuel Neves',
'Sarah Medeiros', 'Sofia Arruda', 'Tatiana Vilela', 'Thaís Rangel', 'Thiago Bastos',
'Vanessa Paiva', 'Victor Assis', 'Vinicius Peixoto', 'Vitória Macedo'
];
const confirmed = new Set([0, 2, 5, 8, 12, 13, 15, 17, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56]);
function renderGuests(filter) {
filter = filter || '';
const list = document.getElementById('guestList');
list.innerHTML = '';
const term = filter.toLowerCase();
GUESTS.forEach((g, i) => {
if (term && !g.toLowerCase().includes(term)) return;
const isConfirmed = confirmed.has(i);
const item = document.createElement('div');
item.className = 'guest-item';
item.innerHTML =
'
' + g + ' ' +
'
' +
(isConfirmed ? 'Confirmado' : 'Aguardando') +
' ';
list.appendChild(item);
});
}
renderGuests();
document.getElementById('guestSearch').addEventListener('input', e => renderGuests(e.target.value));
/* WORD SEARCH BACKGROUND */
const PHRASES = [
{ text: 'PHILIPE E CAMILA CASADOS PARA SEMPRE', color: 'champagne' },
{ text: 'SERAO UMA SO CARNE', color: 'rose' },
{ text: 'O AMOR TUDO SUPORTA', color: 'champagne' },
{ text: 'ATE QUE A MORTE NOS SEPARE', color: 'rose' },
{ text: 'DEUS UNIU NINGUEM SEPARE', color: 'champagne' },
];
const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function buildWordSearch() {
const grid = document.getElementById('wordGrid');
const isMobile = window.innerWidth < 900;
const COLS = isMobile ? 14 : 28;
const ROWS = isMobile ? 28 : 22;
const cells = COLS * ROWS;
grid.style.gridTemplateColumns = 'repeat(' + COLS + ', 1fr)';
grid.style.gridTemplateRows = 'repeat(' + ROWS + ', 1fr)';
grid.style.fontSize = isMobile ? '16px' : '18px';
const map = Array(cells).fill(null);
const placements = [];
function placePhrase(text, row, col) {
const clean = text.replace(/[^A-Z]/g, '');
const cellsPath = [];
for (let i = 0; i < clean.length; i++) {
const r = row, c = col + i;
if (r = ROWS || c = COLS) return null;
const idx = r * COLS + c;
if (map[idx] !== null) return null;
cellsPath.push(idx);
}
cellsPath.forEach((idx, i) => { map[idx] = clean[i]; });
return cellsPath;
}
const attempts = isMobile ? [
{ text: PHRASES[0].text, r: 2, c: 0 },
{ text: PHRASES[1].text, r: 7, c: 0 },
{ text: PHRASES[2].text, r: 12, c: 0 },
{ text: PHRASES[3].text, r: 17, c: 0 },
{ text: PHRASES[4].text, r: 22, c: 0 },
] : [
{ text: PHRASES[0].text, r: 3, c: 1 },
{ text: PHRASES[1].text, r: 7, c: 2 },
{ text: PHRASES[2].text, r: 11, c: 3 },
{ text: PHRASES[3].text, r: 15, c: 0 },
{ text: PHRASES[4].text, r: 19, c: 2 },
];
attempts.forEach((a, i) => {
const path = placePhrase(a.text, a.r, a.c);
if (path) placements.push({ path: path, color: PHRASES[i].color, delay: i * 1.8 });
});
for (let i = 0; i < cells; i++) {
if (map[i] === null) map[i] = ALPHABET[Math.floor(Math.random() * 26)];
}
grid.innerHTML = '';
for (let i = 0; i s.classList.remove('highlight'));
const gridRect = grid.getBoundingClientRect();
svg.setAttribute('viewBox', '0 0 ' + gridRect.width + ' ' + gridRect.height);
data.placements.forEach((pl) => {
const spans = pl.path.map(i => grid.querySelector('span[data-idx="' + i + '"]'));
if (!spans[0]) return;
setTimeout(() => {
spans.forEach((s, i) => setTimeout(() => s.classList.add('highlight'), i * 35));
}, pl.delay * 1000);
const first = spans[0].getBoundingClientRect();
const last = spans[spans.length - 1].getBoundingClientRect();
const x1 = first.left - gridRect.left - 6;
const y1 = first.top - gridRect.top - 2;
const x2 = last.right - gridRect.left + 6;
const y2 = last.bottom - gridRect.top + 2;
const midY = (y1 + y2) / 2;
const h = y2 - y1;
const r = h / 2;
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const d = 'M ' + (x1 + r) + ' ' + y1 +
' L ' + (x2 - r) + ' ' + y1 +
' Q ' + x2 + ' ' + y1 + ' ' + x2 + ' ' + midY +
' Q ' + x2 + ' ' + y2 + ' ' + (x2 - r) + ' ' + y2 +
' L ' + (x1 + r) + ' ' + y2 +
' Q ' + x1 + ' ' + y2 + ' ' + x1 + ' ' + midY +
' Q ' + x1 + ' ' + y1 + ' ' + (x1 + r) + ' ' + y1 + ' Z';
path.setAttribute('d', d);
path.classList.add('marker-stroke');
if (pl.color === 'rose') path.style.stroke = 'var(--rose-gold)';
svg.appendChild(path);
setTimeout(() => path.classList.add('animate'), pl.delay * 1000 + 400);
});
}
buildWordSearch();
let resizeT;
window.addEventListener('resize', () => {
clearTimeout(resizeT);
resizeT = setTimeout(() => {
buildWordSearch();
if (currentPage === 2) triggerWordSearchAnimations();
}, 250);
});
setTimeout(() => { if (currentPage === 2) triggerWordSearchAnimations(); }, 1200);
const hint = document.getElementById('swipeHint');
['touchstart', 'click'].forEach(ev => {
document.addEventListener(ev, () => { if (hint) hint.style.display = 'none'; }, { once: true });
});