:root { --ink:#372c3d; --muted:#675d6d; --paper:#fff9fc; --card:rgba(255,255,255,.92); --main:#e95088; --accent:#43b6e7; --line:#f3a3c2; --soft:#ffe1ed; --shadow:0 16px 34px rgba(167,45,92,.18); }
body.theme-babibuu { --paper:#f4fbff; --card:rgba(255,255,255,.94); --main:#159bd8; --accent:#ffbd4a; --line:#91d7f5; --soft:#d9f4ff; --ink:#1d405c; --muted:#527187; --shadow:0 16px 34px rgba(24,127,181,.18); }
body.theme-mix { --paper:#fffaff; --card:rgba(255,255,255,.93); --main:#dc4b88; --accent:#1ca8df; --line:#b9dff3; --soft:#e4f7ff; --ink:#34334e; --muted:#606278; --shadow:0 16px 34px rgba(82,92,165,.18); }
body.night { --paper:#202733; --card:rgba(41,51,66,.96); --ink:#f5f4f8; --muted:#c1bfca; --line:#5f7693; --soft:#35475d; --shadow:0 16px 34px rgba(0,0,0,.36); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:Nunito,system-ui,sans-serif; transition:background .2s,color .2s; }
h1,h2,h3,.brand { font-family:'Baloo 2',cursive; font-weight:800; } h1 { font-size:clamp(2.8rem,6vw,5.5rem); line-height:.98; } h2 { font-size:clamp(2rem,4vw,3.2rem); } p { line-height:1.75; } a { color:inherit; text-decoration:none; } label { font-weight:800; margin:.8rem 0 .35rem; } .form-control,.form-select { border-radius:14px; border:1px solid var(--line); padding:.7rem .85rem; background:var(--card); color:var(--ink); } .form-control:focus,.form-select:focus { border-color:var(--main); box-shadow:0 0 0 .2rem color-mix(in srgb,var(--main) 22%,transparent); }
#main-content:focus { outline:none; }
.site-nav { position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--paper) 87%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); } .brand { font-size:1.5rem; color:var(--main); text-shadow:2px 2px 0 var(--soft); } .site-menu { display:flex; align-items:center; gap:1.1rem; font-weight:800; } .site-menu a:hover { color:var(--main); } .theme-toggle { border:0; width:35px; height:35px; border-radius:50%; background:var(--accent); color:#fff; box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000); }
.theme-music-toggle { display:none; align-items:center; gap:.32rem; min-height:35px; padding:.34rem .68rem; border:1px solid color-mix(in srgb,var(--line) 72%,#fff); border-radius:99px; background:color-mix(in srgb,var(--card) 90%,transparent); color:var(--main); box-shadow:0 4px 12px color-mix(in srgb,var(--main) 13%,transparent); font:800 .76rem/1 Nunito,system-ui,sans-serif; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease; }
body.theme-mix.public-home-page .theme-music-toggle { display:inline-flex; }
.theme-music-toggle:hover { border-color:var(--main); transform:translateY(-1px); box-shadow:0 7px 16px color-mix(in srgb,var(--main) 20%,transparent); }
.theme-music-toggle:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 75%,#fff); outline-offset:3px; }
.theme-music-toggle.is-playing { background:linear-gradient(135deg,color-mix(in srgb,var(--main) 88%,#fff),color-mix(in srgb,var(--accent) 78%,#fff)); color:#fff; }
.theme-music-icon { font-size:1rem; line-height:1; }
.section-shell { width:min(1120px,calc(100% - 2rem)); margin-inline:auto; } .hero-section { min-height:calc(100vh - 69px); display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; padding:4rem 0; position:relative; } .eyebrow { display:inline-block; color:var(--main); letter-spacing:.13em; font-size:.78rem; font-weight:900; background:var(--soft); padding:.35rem .75rem; border-radius:99px; } .hero-copy h1 { margin:.75rem 0; text-shadow:3px 3px 0 #fff,6px 6px 0 color-mix(in srgb,var(--soft) 70%,transparent); } .location { font-weight:800; color:var(--main); } .lead { font-size:1.12rem; max-width:54ch; color:var(--muted); } .hero-visual { position:relative; width:100%; max-width:470px; margin-inline:auto; padding:1.1rem; } .hero-media,.ceremony-media { overflow:hidden; border:9px solid #fff; border-radius:44% 56% 49% 51% / 41% 44% 56% 59%; box-shadow:var(--shadow),inset 0 0 0 2px var(--line); aspect-ratio:1/1; background:var(--accent); position:relative; z-index:1; } .cover-image { width:100%; height:100%; object-fit:cover; display:block; } .hero-media .cover-image { transform:scale(1.03); } .hero-media::after { content:""; position:absolute; inset:12px; border:2px dashed rgba(255,255,255,.85); border-radius:inherit; pointer-events:none; } .cloud { position:absolute; z-index:2; font-size:3.5rem; line-height:1; color:#fff; text-shadow:0 7px 12px color-mix(in srgb,var(--accent) 35%,transparent); } .cloud-one { top:-.25rem; left:-.8rem; } .cloud-two { bottom:1rem; right:-.7rem; font-size:2.6rem; } .hero-bow { position:absolute; z-index:3; right:6%; top:-.6rem; font-size:2.6rem; filter:drop-shadow(0 5px 3px rgba(80,60,80,.18)); } .mini-note { position:absolute; z-index:4; bottom:1.1rem; left:-1.1rem; transform:rotate(-8deg); padding:.55rem .8rem; background:#fffdf6; color:var(--ink); border:2px solid var(--line); border-radius:4px 13px 5px 12px; box-shadow:var(--shadow); text-align:center; font-family:'Baloo 2',cursive; font-size:.88rem; line-height:1.15; } .hero-sparkles i { position:absolute; font-style:normal; color:var(--main); font-size:1.5rem; animation:float 4s ease-in-out infinite; } .hero-sparkles i:nth-child(1){top:17%;left:-1%;}.hero-sparkles i:nth-child(2){top:11%;right:47%;color:var(--accent);animation-delay:-1s}.hero-sparkles i:nth-child(3){bottom:9%;left:40%;color:var(--accent);animation-delay:-2s}.hero-sparkles i:nth-child(4){bottom:20%;right:1%;animation-delay:-3s}@keyframes float{50%{transform:translate(0,-9px) rotate(8deg)}}
.btn-theme { background:linear-gradient(135deg,color-mix(in srgb,var(--main) 88%,#fff),var(--main)); border:2px solid color-mix(in srgb,var(--main) 74%,#000); border-radius:99px; color:#fff; font-weight:900; padding:.7rem 1.25rem; box-shadow:0 7px 0 color-mix(in srgb,var(--main) 68%,#000),0 10px 18px color-mix(in srgb,var(--main) 24%,transparent); transition:transform .15s,box-shadow .15s; } .btn-theme:hover { background:var(--main); color:#fff; transform:translateY(3px); box-shadow:0 4px 0 color-mix(in srgb,var(--main) 68%,#000); }
.section-title { text-align:center; margin-bottom:2.5rem; } .section-title span { background:var(--accent); color:#fff; padding:.15rem .65rem; border-radius:99px; font-weight:900; box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000); } .section-title h2 { margin:.7rem 0 0; } .section-title p { color:var(--muted); margin:0; } .title-doodle { color:var(--main); letter-spacing:.25rem; margin-top:.4rem; font-weight:900; }
.timeline { padding:1rem 0 3rem; } .timeline::before { display:none; } .timeline-item,.timeline-item.left,.timeline-item.right { width:100%; left:0; position:relative; padding:0 0 2rem; text-align:left; } .timeline-dot { display:none; } .timeline-card,.card-soft { border:2px solid color-mix(in srgb,var(--line) 80%,#fff); background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:1.45rem; } .timeline-card { position:relative; overflow:hidden; display:flex; align-items:center; gap:2.25rem; min-height:260px; } .timeline-item.left .timeline-card { flex-direction:row-reverse; } .timeline-item.left .timeline-copy { text-align:right; } .timeline-item.right .media-strip { justify-content:flex-end; } .timeline-card::before { content:"✦"; position:absolute; right:1rem; top:.35rem; color:var(--soft); font-size:2.3rem; } .timeline-copy { flex:0 1 46%; } .timeline-card h3 { font-size:1.6rem; color:var(--main); position:relative; text-shadow:1px 1px 0 #fff; } .timeline-card p { color:var(--muted); margin-bottom:0; } .media-strip { flex:1 1 54%; display:flex; align-items:center; overflow-x:auto; gap:.6rem; scroll-snap-type:x mandatory; } .photo-trigger { padding:0; border:3px solid #fff; flex:1 0 220px; max-width:310px; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:none; scroll-snap-align:start; box-shadow:0 5px 12px rgba(60,60,80,.18); } .photo-trigger img { width:100%; height:100%; object-fit:cover; transition:transform .25s; } .photo-trigger:hover img { transform:scale(1.08); } .video-wrap { min-width:260px; aspect-ratio:16/9; } .video-wrap iframe,.video-wrap video,video { width:100%; height:100%; border:0; display:block; object-fit:cover; }
.wishes-section { padding:4rem 0; } .wish-form { display:flex; flex-direction:column; } .wish-form small { color:var(--muted); margin-top:.6rem; } .wish-list { display:grid; gap:1rem; max-height:520px; overflow:auto; padding-right:.25rem; } .wish { border-left:6px solid var(--accent); } .wish p { margin:0 0 .5rem; } .wish strong { color:var(--main); }
.ceremony-section { padding:4rem 0 6rem; } .ceremony-copy { text-align:center; max-width:1500px; margin:0 auto 2.3rem; } .ceremony-copy .lead { margin-inline:auto; } .ceremony-gallery { display:flex; justify-content:center; gap:1rem; overflow-x:auto; padding:1rem .2rem 1.3rem; scroll-snap-type:x mandatory; } .ceremony-photo,.ceremony-video { padding:0; flex:0 0 min(82vw,560px); max-width:none; aspect-ratio:16/10; border-radius:23px; overflow:hidden; scroll-snap-align:center; background:var(--accent); } .ceremony-photo { border:6px solid #fff; box-shadow:0 0 0 3px var(--line),var(--shadow); } .ceremony-photo img { width:100%; height:100%; object-fit:cover; transition:transform .3s; } .ceremony-photo:hover img { transform:scale(1.06); } .ceremony-video .video-wrap,.ceremony-video .video-wrap iframe,.ceremony-video video { width:100%; height:100%; } .gallery-hint { text-align:center; color:var(--muted); font-size:.9rem; margin:0; } .memory-stamp { display:inline-block; margin-top:1.3rem; padding:.6rem 1.1rem; border:2px dashed var(--main); color:var(--main); border-radius:50%; transform:rotate(-4deg); text-align:center; font-family:'Baloo 2',cursive; line-height:1.1; } footer { margin-top:3rem; background:color-mix(in srgb,var(--accent) 18%,var(--paper)); border-top:0; padding:2rem 0; text-align:center; color:var(--muted); font-weight:700; box-shadow:0 -8px 22px color-mix(in srgb,var(--accent) 10%,transparent); }
.lightbox-content { position:relative; background:transparent; border:0; } #lightbox-image { max-width:100%; max-height:82vh; display:block; margin:auto; border-radius:18px; transition:opacity .12s ease; } #lightbox-image.is-changing { opacity:.18; } .lightbox-nav { position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:47px; height:56px; border:0; border-radius:16px; background:rgba(30,37,52,.66); color:#fff; font-size:3rem; line-height:.7; } .lightbox-nav:hover { background:var(--main); } .lightbox-nav.prev { left:-3.5rem; } .lightbox-nav.next { right:-3.5rem; } .login-wrap { min-height:70vh; display:grid; place-items:center; padding:2rem; } .login-card { width:min(440px,100%); } .login-card h1 { font-size:3rem; }
.admin-shell { padding:3rem 0 5rem; } .admin-shell h1 { font-size:2.7rem; } .admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; } .admin-section { margin-top:3rem; } .admin-section > h2 { font-size:2rem; } .editor { display:flex; flex-direction:column; } .upload-form { display:flex; gap:.7rem; align-items:center; margin-top:.8rem; padding:.7rem; border:1px dashed var(--line); border-radius:15px; } .table { --bs-table-bg:transparent; --bs-table-color:var(--ink); } .actions { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; } .actions form { margin:0; } .actions input[type=file] { max-width:135px; font-size:.75rem; } code { color:var(--main); }
@media (max-width:767px) { .site-menu { gap:.6rem; } .site-menu a:not(:last-of-type) { display:none; } .hero-section,.ceremony-section { grid-template-columns:1fr; gap:2rem; min-height:auto; padding:3rem 0; } .hero-copy { text-align:center; } .hero-copy .lead { margin-inline:auto; } .hero-media { max-width:430px; margin:auto; width:100%; } .hero-sparkles i:nth-child(2),.hero-sparkles i:nth-child(3) { display:none; } .mini-note { left:0; bottom:.5rem; } .ceremony-media { order:2; } .timeline-card,.timeline-item.left .timeline-card { flex-direction:column; align-items:stretch; gap:1rem; min-height:0; } .timeline-item.left .timeline-copy { text-align:left; } .timeline-copy,.media-strip { flex-basis:auto; } .admin-grid { grid-template-columns:1fr; } .upload-form { align-items:flex-start; flex-direction:column; } }

/* Postcard stationery skins: original motifs inspired by cute pastel letter paper. */
body.theme-kitty { --main:#ee4f8a; --accent:#55bce9; --line:#ff9ec2; --soft:#ffe3ee; background:#fff4f8; }
body.theme-babibuu { --main:#209fe3; --accent:#ffb84b; --line:#79cef4; --soft:#d9f4ff; background:#effaff; }
body.theme-mix { --main:#e94d8c; --accent:#27aee2; --line:#9edcf4; --soft:#e8f7ff; background:linear-gradient(110deg,#fff4fa 0 49%,#effaff 51% 100%); }
body.theme-kitty main,body.theme-babibuu main,body.theme-mix main { position:relative; overflow:hidden; }
body.theme-kitty .site-nav { border-bottom:3px solid #ffc0d6; } body.theme-babibuu .site-nav { border-bottom:3px solid #a9e2fa; } body.theme-mix .site-nav { border-bottom:3px solid transparent; border-image:linear-gradient(90deg,#f89abb,#79d5f1) 1; }
body.theme-kitty .hero-section,body.theme-babibuu .hero-section,body.theme-mix .hero-section { border:2px solid var(--line); border-radius:36px; margin-top:1.3rem; padding-inline:clamp(1rem,3vw,3rem); overflow:hidden; box-shadow:0 16px 35px color-mix(in srgb,var(--accent) 12%,transparent); }
body.theme-kitty .hero-section,body.theme-babibuu .hero-section,body.theme-mix .hero-section { background:#fff; grid-template-columns:1fr; justify-items:center; gap:2rem; }
body.theme-kitty .hero-copy,body.theme-babibuu .hero-copy,body.theme-mix .hero-copy { max-width:720px; text-align:center; }
body.theme-kitty .hero-copy .lead,body.theme-babibuu .hero-copy .lead,body.theme-mix .hero-copy .lead { margin-inline:auto; }
body.theme-kitty .hero-copy,body.theme-babibuu .hero-copy,body.theme-mix .hero-copy,body.theme-kitty .hero-visual,body.theme-babibuu .hero-visual,body.theme-mix .hero-visual { position:relative; z-index:1; }
body.theme-kitty .ceremony-section,body.theme-babibuu .ceremony-section,body.theme-mix .ceremony-section { position:relative; margin-top:2rem; padding:4rem clamp(1rem,3vw,3rem) 5rem; overflow:hidden; background:#fff; border:2px solid var(--line); border-radius:36px; box-shadow:0 16px 35px color-mix(in srgb,var(--accent) 12%,transparent); }
body.theme-kitty .ceremony-copy,body.theme-babibuu .ceremony-copy,body.theme-mix .ceremony-copy,body.theme-kitty .ceremony-gallery,body.theme-babibuu .ceremony-gallery,body.theme-mix .ceremony-gallery,body.theme-kitty .gallery-hint,body.theme-babibuu .gallery-hint,body.theme-mix .gallery-hint,body.theme-kitty .ceremony-carousel-dots,body.theme-babibuu .ceremony-carousel-dots,body.theme-mix .ceremony-carousel-dots { position:relative; z-index:1; }
body.theme-kitty #timeline,body.theme-babibuu #timeline,body.theme-mix #timeline,body.theme-kitty .wishes-section,body.theme-babibuu .wishes-section,body.theme-mix .wishes-section { position:relative; margin-top:2rem; padding:4rem clamp(1rem,3vw,3rem) 5rem; overflow:hidden; background:#fff; border:2px solid var(--line); border-radius:36px; box-shadow:0 16px 35px color-mix(in srgb,var(--accent) 12%,transparent); }
body.theme-kitty #timeline > *,body.theme-babibuu #timeline > *,body.theme-mix #timeline > *,body.theme-kitty .wishes-section > *,body.theme-babibuu .wishes-section > *,body.theme-mix .wishes-section > * { position:relative; z-index:1; }
body.theme-kitty .hero-media::after,body.theme-babibuu .hero-media::after,body.theme-mix .hero-media::after { display:none; }
body.theme-kitty .memory-stamp,body.theme-babibuu .memory-stamp,body.theme-mix .memory-stamp { border-style:solid; }
@media (max-width:767px) { body.theme-kitty .hero-section,body.theme-babibuu .hero-section,body.theme-mix .hero-section,body.theme-kitty #timeline,body.theme-babibuu #timeline,body.theme-mix #timeline,body.theme-kitty .wishes-section,body.theme-babibuu .wishes-section,body.theme-mix .wishes-section,body.theme-kitty .ceremony-section,body.theme-babibuu .ceremony-section,body.theme-mix .ceremony-section { border-radius:25px; padding:3rem 1rem 3.5rem; } }

/* Babibuu: richer sky outside, crisp white stationery panels inside. */
body.theme-babibuu:not(.night) { --paper:#d9f3ff; --card:rgba(255,255,255,.97); --main:#087fbe; --accent:#f6b43e; --line:#55c9f5; --soft:#bfeaff; --ink:#133d5b; --muted:#3d647c; --shadow:0 18px 38px rgba(7,91,145,.25); }
body.theme-babibuu:not(.night) .theme-video-background { background:radial-gradient(ellipse 72% 52% at 50% 0,#9fe4ff 0,#3eabd8 42%,#12628f 72%,#0b385c 100%); }
body.theme-babibuu:not(.night) .theme-video-babibuu { opacity:.3; filter:saturate(1.14) contrast(1.08) brightness(.94); }
body.theme-babibuu:not(.night) .site-nav { background:color-mix(in srgb,#f8fdff 90%,transparent); border-bottom-color:#73d3f6; box-shadow:0 4px 18px rgba(8,97,148,.12); }
body.theme-babibuu:not(.night) .hero-section,body.theme-babibuu:not(.night) #timeline,body.theme-babibuu:not(.night) .wishes-section,body.theme-babibuu:not(.night) .ceremony-section { border-color:#55c9f5; box-shadow:0 18px 42px rgba(5,83,134,.25),inset 0 1px 0 rgba(255,255,255,.92); }
body.theme-babibuu:not(.night) .timeline-card { border-color:#72d4f6; background:linear-gradient(112deg,#fff 0,rgba(229,248,255,.97) 100%); box-shadow:0 11px 25px rgba(7,102,159,.15); }
body.theme-babibuu:not(.night) .card-soft,body.theme-babibuu:not(.night) .wish-form { box-shadow:0 0 0 3px #c4efff,0 14px 28px rgba(7,102,159,.16); }
body.theme-babibuu:not(.night) .section-title span,body.theme-babibuu:not(.night) .countdown-calendar .calendar-month { background:#0788ca; box-shadow:0 4px 0 #075f91; }
body.theme-babibuu:not(.night) .btn-theme { background:linear-gradient(135deg,#24a9e8,#087fbe); border-color:#056496; box-shadow:0 7px 0 #075b88,0 12px 22px rgba(4,92,142,.28); }
body.theme-babibuu:not(.night) .btn-theme:hover { background:#087fbe; box-shadow:0 4px 0 #075b88,0 9px 18px rgba(4,92,142,.24); }
body.theme-babibuu:not(.night) .photo-trigger { box-shadow:0 0 0 3px #78d8f8,0 9px 19px rgba(5,94,145,.25); }

@media (prefers-reduced-motion:no-preference) {
  .section-reveal { opacity:0; filter:blur(3px); transition:opacity .65s ease,transform .72s cubic-bezier(.22,.75,.25,1),filter .55s ease; }
  .section-reveal.reveal-rise { transform:translateY(38px) scale(.985); }
  .section-reveal.reveal-from-left { transform:translateX(-56px) rotate(-.7deg); }
  .section-reveal.reveal-from-right { transform:translateX(56px) rotate(.7deg); }
  .section-reveal.reveal-pop { transform:scale(.9) translateY(25px); }
  .section-reveal.is-visible { opacity:1; transform:translateY(0) scale(1); filter:none; }
}

/* Material-style media slider for timeline events. */
.event-slider { position:relative; flex:1 1 54%; width:min(100%,350px); min-width:270px; height:205px; margin-left:auto; }
.timeline-item.left .event-slider { margin-right:auto; margin-left:0; }
.event-slider::before,.event-slider::after { content:""; position:absolute; border-radius:19px; background:var(--soft); border:2px solid color-mix(in srgb,var(--line) 55%,#fff); }
.event-slider::before { inset:12px -12px -12px 12px; opacity:.46; }
.event-slider::after { inset:6px -6px -6px 6px; opacity:.72; }
.event-slider-stage { position:relative; z-index:2; width:100%; height:100%; }
.event-slide { position:absolute; inset:0; opacity:0; transform:translateX(22px) scale(.94); pointer-events:none; transition:opacity .38s ease,transform .48s cubic-bezier(.22,.75,.25,1); }
.event-slider:not(.is-ready) .event-slide:first-child,.event-slide.is-active { opacity:1; transform:translateX(0) scale(1); pointer-events:auto; }
.event-slide .event-photo,.event-slide .video-wrap { display:block; width:100%; max-width:none; min-width:0; height:100%; aspect-ratio:auto; border-radius:17px; overflow:hidden; }
.event-slide .event-photo { border:5px solid #fff; box-shadow:0 0 0 3px var(--line),0 10px 20px color-mix(in srgb,var(--accent) 23%,transparent); }
.event-slide .event-photo img { width:100%; height:100%; object-fit:cover; }
.event-slider-control { position:absolute; z-index:4; bottom:-.55rem; width:35px; height:35px; border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--main); font-size:2rem; line-height:.7; box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 25%,transparent); }
.event-slider-control:hover { background:var(--soft); transform:scale(1.07); }
.event-slider-control.previous { right:2.7rem; } .event-slider-control.next { right:.1rem; }
@media (max-width:767px) {
  .event-slider {
    flex:none;
    align-self:center;
    width:min(100%,350px);
    min-width:0;
    height:clamp(180px,62vw,220px);
    margin:0 auto;
  }
  .timeline-item.left .event-slider { margin:0 auto; }
  .event-slide.is-active { transform:none !important; }
  .event-slide .video-wrap iframe,.event-slide .video-wrap video {
    position:relative;
    z-index:1;
    pointer-events:auto;
    touch-action:manipulation;
  }
}

/* Animated theme backgrounds supplied for Kitty and Babibuu. */
body.theme-kitty,body.theme-babibuu,body.theme-mix { background:transparent; }
.theme-video-background { position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none; background:var(--paper); }
.theme-video { position:absolute; inset:0; display:none; width:100%; height:100%; object-fit:cover; opacity:.24; filter:saturate(.9) brightness(1.08); }
body.theme-kitty .theme-video-kitty { display:block; }
body.theme-babibuu .theme-video-babibuu { display:block; }
body.theme-mix .theme-video-mix { display:block; opacity:1; filter:none; mix-blend-mode:normal; }
body.night .theme-video { filter:saturate(.65) brightness(.45); opacity:.18; }
body.night.theme-mix .theme-video-mix { opacity:1; filter:none; }
@media (max-width:767px) { .theme-video { opacity:.18; } body.theme-mix .theme-video-mix { opacity:1; } }

/* Wide framed media for the graduation hero. */
.hero-visual { max-width:min(100%,930px); padding:.8rem; }
.hero-visual .hero-media { aspect-ratio:16/9; border:0; border-radius:26px; box-shadow:0 14px 28px color-mix(in srgb,var(--accent) 24%,transparent); }
.hero-photo-trigger { display:block; width:100%; max-width:none; height:100%; padding:0; border:0; border-radius:inherit; aspect-ratio:auto; background:transparent; box-shadow:none !important; cursor:zoom-in; }
.hero-photo-trigger .cover-image { width:100%; height:100%; object-fit:contain; transform:none; transition:filter .28s ease; }
.hero-photo-trigger:hover .cover-image { transform:none; filter:brightness(1.04); }
@media (max-width:767px) { .hero-visual { padding:.45rem; } .hero-visual .hero-media { border-radius:18px; } }

.wish-counter { display:inline-flex; align-items:center; gap:.35rem; margin-top:.3rem; padding:.35rem .75rem; border-radius:99px; background:var(--soft); color:var(--main); font-weight:800; font-size:.9rem; }
.wish-counter strong { font-family:'Baloo 2',cursive; font-size:1.2rem; line-height:1; }
.wish { position:relative; padding-top:2.25rem; }
.wish-order { position:absolute; top:.7rem; right:.8rem; color:var(--main); font-family:'Baloo 2',cursive; font-weight:900; font-size:1rem; }

footer { background:color-mix(in srgb,var(--paper) 87%,transparent); border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); padding:1rem 0; box-shadow:none; backdrop-filter:blur(10px); }

/* ── Dark mode: full-dark (Option B) ──────────────────────────────────────── */
/* Sections inherit body.night palette → dark background + light text */
body.night :is(.hero-section,#timeline,.wishes-section,.ceremony-section) { background:var(--card) !important; border-color:var(--line); color:var(--ink); box-shadow:0 16px 35px rgba(0,0,0,.3); }
body.night .hero-copy h1 { text-shadow:3px 3px 0 rgba(0,0,0,.25),6px 6px 0 rgba(0,0,0,.12); }
body.night .timeline-card { border-color:var(--line) !important; background:var(--card) !important; }
body.night .timeline-card h3 { text-shadow:1px 1px 0 rgba(0,0,0,.2); }
body.night .hero-media,body.night .ceremony-media,body.night .ceremony-photo { border-color:rgba(255,255,255,.18); }
body.night .photo-trigger { border-color:rgba(255,255,255,.18); }
body.night .event-slide .event-photo { border-color:rgba(255,255,255,.18); box-shadow:0 0 0 3px var(--line),0 10px 20px rgba(0,0,0,.3); }
body.night .event-slider-control { background:var(--card); border-color:var(--line); }
body.night .ceremony-carousel-control { background:var(--card); border-color:var(--line); }
body.night .mini-note { background:var(--soft); }
body.night .event-slider::before,body.night .event-slider::after { border-color:var(--line); }
body.night .hero-countdown { background:var(--card); border-color:var(--line); }
body.night .countdown-calendar { background:var(--soft); }
body.night .countdown-calendar::after { background:linear-gradient(135deg,var(--soft) 0 49%,color-mix(in srgb,var(--main) 28%,var(--card)) 51% 100%); }
body.night .ceremony-copy .lead { background:rgba(41,51,66,.68); box-shadow:none; }
body.night .ceremony-copy .memory-stamp { background:var(--soft); }
body.night .ceremony-gallery { background:linear-gradient(145deg,rgba(41,51,66,.68),color-mix(in srgb,var(--soft) 22%,rgba(41,51,66,.88))); border-color:var(--line); box-shadow:0 20px 42px rgba(0,0,0,.25); }
body.night .hero-visual::before { background:linear-gradient(135deg,color-mix(in srgb,var(--main) 55%,var(--card)),var(--card) 46%,color-mix(in srgb,var(--accent) 50%,var(--card))); }
body.night .hero-visual::after { border-color:rgba(255,255,255,.12); }
body.night .hero-visual .hero-media { border-color:rgba(255,255,255,.15) !important; }
body.night .skip-link { background:var(--main); color:#fff; }
body.night .gallery-hint { background:var(--soft); }
body.night.theme-kitty .hero-media,body.night.theme-kitty .ceremony-media { box-shadow:0 0 0 4px rgba(255,154,192,.3),0 0 0 8px rgba(255,228,238,.1),var(--shadow) !important; }
body.night.theme-babibuu .hero-media,body.night.theme-babibuu .ceremony-media { box-shadow:0 0 0 4px rgba(95,197,239,.3),0 0 0 8px rgba(217,245,255,.1),var(--shadow) !important; }
body.night.theme-mix .hero-media,body.night.theme-mix .ceremony-media { box-shadow:0 0 0 4px rgba(103,203,237,.3),0 0 0 8px rgba(247,156,193,.1),var(--shadow) !important; }
body.theme-kitty .hero-media,body.theme-kitty .ceremony-media { border-color:#fff; box-shadow:0 0 0 4px #ff9ac0,0 0 0 8px #ffe4ee,var(--shadow); }
body.theme-babibuu .hero-media,body.theme-babibuu .ceremony-media { border-color:#fff; box-shadow:0 0 0 4px #5fc5ef,0 0 0 8px #d9f5ff,var(--shadow); }
body.theme-mix .hero-media,body.theme-mix .ceremony-media { border-color:#fff; box-shadow:0 0 0 4px #67cbed,0 0 0 8px #f79cc1,var(--shadow); }
body.theme-kitty .hero-media::after { border-color:#ff9cc2; } body.theme-babibuu .hero-media::after { border-color:#65c8ef; } body.theme-mix .hero-media::after { border-color:#79ceed; }
body.theme-kitty .timeline-card { border-color:#ffb0cb; background:linear-gradient(112deg,rgba(255,255,255,.97),rgba(255,239,246,.92)); }
body.theme-babibuu .timeline-card { border-color:#9cdef7; background:linear-gradient(112deg,rgba(255,255,255,.98),rgba(233,249,255,.94)); }
body.theme-mix .timeline-card { border-color:#a8def3; background:linear-gradient(112deg,rgba(255,245,250,.96),rgba(239,250,255,.96)); }
body.theme-kitty .timeline-card::after,body.theme-babibuu .timeline-card::after,body.theme-mix .timeline-card::after { content:"♡  ✦  ☁"; position:absolute; bottom:.65rem; color:var(--accent); opacity:.42; font-size:1.25rem; letter-spacing:.45rem; }
body.theme-kitty .timeline-item.left .timeline-card::after,body.theme-babibuu .timeline-item.left .timeline-card::after,body.theme-mix .timeline-item.left .timeline-card::after { left:1.2rem; } .timeline-item.right .timeline-card::after { right:1.2rem; }
body.theme-kitty .card-soft,.theme-kitty .wish-form { box-shadow:0 0 0 3px #ffe0ea,var(--shadow); } body.theme-babibuu .card-soft,.theme-babibuu .wish-form { box-shadow:0 0 0 3px #d8f3ff,var(--shadow); } body.theme-mix .card-soft,.theme-mix .wish-form { box-shadow:0 0 0 3px #e5f6ff,var(--shadow); }
body.theme-kitty .section-title span { background:#f35991; } body.theme-babibuu .section-title span { background:#1d9cdb; } body.theme-mix .section-title span { background:linear-gradient(90deg,#ed5d97,#38b9e8); }
body.theme-kitty .photo-trigger { box-shadow:0 0 0 3px #ffc0d5,0 7px 15px rgba(186,55,107,.18); } body.theme-babibuu .photo-trigger { box-shadow:0 0 0 3px #a8e1f7,0 7px 15px rgba(35,137,183,.18); } body.theme-mix .photo-trigger { box-shadow:0 0 0 3px #a4dff4,0 7px 15px rgba(120,83,155,.18); }
@media (max-width:767px) { body.theme-kitty .hero-section,body.theme-babibuu .hero-section,body.theme-mix .hero-section { border-radius:25px; padding-inline:1rem; } }

/* Individual PNG decor supplied for each theme. */
.theme-stickers { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.theme-sticker { display:none; position:absolute; width:118px; height:132px; background-repeat:no-repeat; background-size:contain !important; background-position:center !important; filter:drop-shadow(0 6px 5px rgba(64,91,122,.18)); animation:backgroundStickerFloat 5.8s ease-in-out infinite; will-change:transform,top,bottom; transition:top 0.4s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1), width 0.4s ease, height 0.4s ease; }
.sticker-one { left:12px; top:84px; } .sticker-two { right:12px; top:84px; } .sticker-three { left:12px; bottom:18px; } .sticker-four { right:12px; bottom:18px; } .sticker-five { left:12px; top:48%; } .sticker-six { right:12px; top:48%; }
.sticker-two,.sticker-five,.sticker-eight { animation-name:backgroundStickerFloatReverse; }
.sticker-two { animation-duration:6.6s; animation-delay:-1.8s; }
.sticker-three { animation-duration:7.2s; animation-delay:-3.7s; }
.sticker-four { animation-duration:6.2s; animation-delay:-.9s; }
.sticker-five { animation-duration:7.6s; animation-delay:-4.8s; }
.sticker-six { animation-duration:6.9s; animation-delay:-2.6s; }
.site-nav,main,footer { position:relative; }
body.theme-kitty .theme-sticker { display:block; } body.theme-kitty .sticker-one { background-image:url('/images/decor/kitty/hello_kitty_01.png'); } body.theme-kitty .sticker-two { background-image:url('/images/decor/kitty/hello_kitty_04.png'); } body.theme-kitty .sticker-three { background-image:url('/images/decor/kitty/hello_kitty_08.png'); } body.theme-kitty .sticker-four { background-image:url('/images/decor/kitty/nhan_01.png'); } body.theme-kitty .sticker-five { background-image:url('/images/decor/kitty/nhan_05.png'); } body.theme-kitty .sticker-six { background-image:url('/images/decor/kitty/nhan_09.png'); }
body.theme-babibuu .theme-sticker { display:block; } body.theme-babibuu .sticker-one { background-image:url('/images/decor/babibuu/babibuu_01.png'); } body.theme-babibuu .sticker-two { background-image:url('/images/decor/babibuu/babibuu_03.png'); } body.theme-babibuu .sticker-three { background-image:url('/images/decor/babibuu/babibuu_05.png'); } body.theme-babibuu .sticker-four { background-image:url('/images/decor/babibuu/babibuu_09.png'); } body.theme-babibuu .sticker-five { background-image:url('/images/decor/babibuu/babibuu_18.png'); } body.theme-babibuu .sticker-six { background-image:url('/images/decor/babibuu/25_babibuu_heart_bow.png'); }
body.theme-mix .theme-sticker { display:block; }
body.theme-mix .sticker-one { background-image:url('/images/decor/hero/mix-memories/h1.png'); --memory-ratio:944/1112; --memory-width:clamp(88px,7.9vw,125px); }
body.theme-mix .sticker-two { background-image:url('/images/decor/hero/mix-memories/h2.jpg'); --memory-ratio:1260/1396; --memory-width:clamp(90px,8.1vw,130px); }
body.theme-mix .sticker-three { top:48%; bottom:auto; background-image:url('/images/decor/hero/mix-memories/h3.jpg'); --memory-ratio:1260/1404; --memory-width:clamp(90px,8vw,128px); }
body.theme-mix .sticker-four { top:48%; bottom:auto; background-image:url('/images/decor/hero/mix-memories/h4.jpg'); --memory-ratio:1260/1332; --memory-width:clamp(92px,8.2vw,132px); }
body.theme-mix .sticker-five { top:auto; bottom:18px; background-image:url('/images/decor/hero/mix-memories/h5.png'); --memory-ratio:1024/1030; --memory-width:clamp(94px,8.4vw,134px); }
body.theme-mix .sticker-six { top:auto; bottom:18px; background-image:url('/images/decor/hero/mix-memories/h6.jpg'); --memory-ratio:1260/1616; --memory-width:clamp(84px,7.5vw,119px); }
body.theme-mix .theme-sticker:is(.sticker-one,.sticker-three,.sticker-five) { left:26px; }
body.theme-mix .theme-sticker:is(.sticker-two,.sticker-four,.sticker-six) { right:26px; }
body.theme-mix .theme-sticker:is(.sticker-one,.sticker-two,.sticker-three,.sticker-four,.sticker-five,.sticker-six) {
  width:var(--memory-width);
  height:auto;
  aspect-ratio:var(--memory-ratio);
  box-sizing:content-box;
  padding:5px 5px 16px;
  border:1px solid rgba(104,92,122,.16);
  border-radius:4px;
  background-color:#fff;
  background-origin:content-box;
  background-position:center;
  background-size:contain !important;
  box-shadow:0 10px 22px rgba(53,45,72,.2),0 2px 5px rgba(53,45,72,.12);
}

@media (max-width:1050px) {
  .theme-sticker { width:90px; height:100px; opacity:.78; }
  body.theme-mix .theme-sticker:is(.sticker-one,.sticker-two,.sticker-three,.sticker-four) { width:min(var(--memory-width),86px); height:auto; }
  .sticker-five,.sticker-six { display:none !important; }
}
@media (max-width:767px) { .theme-stickers { display:none; } }

.sticker-seven { left:145px; top:30%; width:78px; height:86px; animation-duration:6.4s; animation-delay:-1.3s; } .sticker-eight { right:145px; top:30%; width:78px; height:86px; animation-duration:7.1s; animation-delay:-4.1s; }
body.theme-kitty .sticker-seven { display:block; background-image:url('/images/decor/kitty/hello_kitty_11.png'); } body.theme-kitty .sticker-eight { display:block; background-image:url('/images/decor/kitty/nhan_12.png'); }
body.theme-babibuu .sticker-seven { display:block; background-image:url('/images/decor/babibuu/babibuu_12.png'); } body.theme-babibuu .sticker-eight { display:block; background-image:url('/images/decor/babibuu/babibuu_14.png'); }
body.theme-mix .sticker-seven { display:block; background-image:url('/images/decor/kitty/hello_kitty_11.png'); } body.theme-mix .sticker-eight { display:block; background-image:url('/images/decor/babibuu/babibuu_14.png'); }
.cute-sparkle { position:fixed; z-index:0; pointer-events:none; font-size:2rem; font-weight:900; animation:cute-bob 3.4s ease-in-out infinite; } .sparkle-one { left:12%; top:24%; } .sparkle-two { right:12%; top:66%; animation-delay:-1.1s; } .sparkle-three { left:8%; bottom:26%; font-size:2.6rem; animation-delay:-2.2s; }
body.theme-kitty .cute-sparkle { color:#f46d9c; } body.theme-babibuu .cute-sparkle { color:#38b4e9; } body.theme-mix .cute-sparkle { color:#e95d97; }
@keyframes cute-bob { 50% { transform:translate(0,-10px) rotate(8deg); } }
@keyframes backgroundStickerFloat {
  0%,100% { transform:translate(0,0) rotate(-1deg); }
  50% { transform:translate(4px,-13px) rotate(2.5deg); }
}
@keyframes backgroundStickerFloatReverse {
  0%,100% { transform:translate(0,0) rotate(1deg); }
  50% { transform:translate(-4px,-11px) rotate(-2.5deg); }
}
@media (prefers-reduced-motion:reduce) { .theme-sticker { animation:none; } }
@media (max-width:1599px) { .sticker-seven,.sticker-eight { display:none !important; } } @media (max-width:767px) { .cute-sparkle { display:none; } }

/* Ceremony focus carousel */
.ceremony-gallery { position:relative; width:min(100%,1120px); height:410px; margin:0 auto; padding:0 4.5rem; overflow:hidden; display:block; scroll-snap-type:none; }
.ceremony-carousel-stage { position:relative; width:100%; height:100%; }
.ceremony-slide { position:absolute; top:0; bottom:0; left:50%; right:auto; margin:0; width:min(58vw,560px); height:100%; transform-origin:center; transition:left .58s cubic-bezier(.22,.75,.25,1),transform .58s cubic-bezier(.22,.75,.25,1),opacity .42s ease,filter .42s ease; }
.ceremony-slide .ceremony-photo,.ceremony-slide .ceremony-video { width:100%; height:100%; max-width:none; aspect-ratio:auto; }
.ceremony-slide .ceremony-photo { display:block; }
.ceremony-slide .ceremony-photo,.ceremony-slide .ceremony-video { scroll-snap-align:none; }
.ceremony-slide.is-focused { z-index:3; left:50% !important; transform:translateX(-50%) scale(1) perspective(950px) rotateY(0) !important; opacity:1; filter:none; }
.ceremony-slide.is-side { cursor:pointer; }
.ceremony-slide.is-near { z-index:2; opacity:.64; filter:saturate(.82) brightness(.95); }
.ceremony-slide.is-far { z-index:1; opacity:.46; filter:saturate(.72) brightness(.92); }
.ceremony-slide.is-hidden { z-index:1; opacity:0; pointer-events:none; }
.ceremony-carousel-control { position:absolute; z-index:6; top:50%; transform:translateY(-50%); width:46px; height:54px; border:2px solid var(--line); border-radius:16px; color:var(--main); background:#fff; box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 28%,transparent); font-size:2.5rem; line-height:.7; font-family:Arial,sans-serif; transition:transform .2s,background .2s; }
.ceremony-carousel-control:hover { background:var(--soft); transform:translateY(-50%) scale(1.08); }
.ceremony-carousel-control:disabled { opacity:.3; cursor:default; transform:translateY(-50%); }
.ceremony-carousel-control.previous { left:.7rem; } .ceremony-carousel-control.next { right:.7rem; }
.ceremony-carousel-dots { display:flex; justify-content:center; gap:.45rem; margin-top:.65rem; }
.ceremony-carousel-dot { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:color-mix(in srgb,var(--line) 62%,#fff); transition:transform .2s,background .2s; }
.ceremony-carousel-dot.is-active { background:var(--main); transform:scale(1.35); }
@media (max-width:767px) { .ceremony-gallery { height:300px; padding:0 2.8rem; } .ceremony-slide { width:min(74vw,420px); } .ceremony-carousel-control { width:38px; height:46px; border-radius:13px; font-size:2rem; } .ceremony-carousel-control.previous { left:.1rem; } .ceremony-carousel-control.next { right:.1rem; } }

/* Keep the lightbox controls visible and the large image within the viewport. */
#lightbox .modal-dialog { width:calc(100% - 2rem); max-width:1180px; margin:1rem auto; }
.lightbox-content { min-height:0; display:block; padding:.7rem; background:#fff; border:5px solid var(--line); border-radius:28px; box-shadow:0 0 0 6px color-mix(in srgb,var(--soft) 72%,#fff),0 20px 48px rgba(19,24,37,.38); }
#lightbox-image { width:auto; max-width:100%; max-height:82vh; object-fit:contain; border-radius:18px; }
.lightbox-video-host { width:min(100%,1120px); max-height:82vh; margin:auto; overflow:hidden; aspect-ratio:16/9; border-radius:18px; background:#000; }
.lightbox-video-host[hidden] { display:none; }
.lightbox-video-host iframe,.lightbox-video-host video { width:100%; height:100%; border:0; object-fit:contain; }
.lightbox-close { position:absolute; z-index:50; top:-.75rem; right:-.6rem; display:grid; place-items:center; width:36px; height:36px; padding:0; border:2px solid #fff; border-radius:50%; background:var(--main); color:#fff; font-weight:900; font-size:2rem; line-height:.65; box-shadow:0 4px 0 color-mix(in srgb,var(--main) 65%,#4c2946),0 6px 12px rgba(24,28,45,.2); pointer-events:auto !important; cursor:pointer; }
.lightbox-close span { display:none; }
.lightbox-close:hover { background:var(--accent); transform:scale(1.08); }
.video-wrap { position:relative; }
.video-wrap video { object-fit:contain; background:#000; }
.video-expand-trigger { position:absolute; z-index:8; top:.65rem; right:.65rem; display:grid; width:42px; height:42px; padding:0; place-items:center; border:2px solid rgba(255,255,255,.92); border-radius:12px; background:rgba(23,28,40,.78); color:#fff; box-shadow:0 5px 14px rgba(0,0,0,.28); font-size:1.35rem; line-height:1; cursor:pointer; backdrop-filter:blur(5px); transition:transform .18s ease,background .18s ease; }
.video-expand-trigger:hover { background:var(--main); transform:scale(1.08); }
.video-lightbox-content { position:relative; padding:.7rem; border:4px solid var(--line); border-radius:24px; background:#080a0f; box-shadow:0 24px 65px rgba(0,0,0,.52); }
.video-lightbox-body { width:100%; max-height:86vh; aspect-ratio:16/9; overflow:hidden; border-radius:16px; background:#000; }
.video-lightbox-body iframe,.video-lightbox-body video { width:100%; height:100%; border:0; object-fit:contain; }
.video-lightbox-close { position:absolute; z-index:12; top:-.8rem; right:-.7rem; display:grid; width:38px; height:38px; padding:0; place-items:center; border:2px solid #fff; border-radius:50%; background:var(--main); color:#fff; box-shadow:0 5px 14px rgba(0,0,0,.3); font-size:1.8rem; line-height:1; cursor:pointer; }
.video-lightbox-close:hover { background:var(--accent); transform:scale(1.06); }
.lightbox-nav { position:fixed; top:50%; z-index:6; }
.lightbox-nav.prev { left:max(1rem,calc((100vw - 1260px)/2 - 3.5rem)); }
.lightbox-nav.next { right:max(1rem,calc((100vw - 1260px)/2 - 3.5rem)); }
@media (max-width:767px) { .lightbox-content { padding:.45rem; border-width:4px; border-radius:18px; } #lightbox .modal-dialog { width:calc(100% - 1rem); margin:.5rem auto; } #lightbox-image { max-height:78vh; } .lightbox-close { top:-.7rem; right:-.3rem; width:34px; height:34px; font-size:1.8rem; } .lightbox-nav { width:40px; height:48px; border-radius:13px; font-size:2.5rem; } .lightbox-nav.prev { left:.65rem; } .lightbox-nav.next { right:.65rem; } }

/* Hero 1: sticker decor is selected by the active theme. */
.hero-theme-decor { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-sticker { position:absolute; display:none; width:clamp(74px,9vw,136px); height:auto; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(73,52,77,.16)); animation:heroStickerFloat 5s ease-in-out infinite; }
.kitty-one,.babibuu-one { top:6%; left:4%; }
.kitty-two,.babibuu-two { top:18%; right:5%; width:clamp(64px,7.5vw,112px); animation-delay:-1.6s; }
.kitty-three,.babibuu-three { bottom:5%; left:7%; width:clamp(68px,8vw,122px); animation-delay:-3.2s; }
body.theme-kitty .hero-sticker.kitty,body.theme-babibuu .hero-sticker.babibuu { display:block; }
body.theme-mix .hero-sticker { display:block; }
body.theme-mix .kitty-one { top:7%; left:5%; width:clamp(66px,7.8vw,118px); }
body.theme-mix .babibuu-one { top:6%; right:5%; left:auto; width:clamp(68px,8vw,122px); animation-delay:-.7s; }
body.theme-mix .kitty-two { display:none; }
body.theme-mix .babibuu-two { top:2%; right:14%; left:auto; width:clamp(58px,6.9vw,102px); animation-delay:-3.4s; }
body.theme-mix .kitty-three { top:2%; bottom:auto; left:14%; width:clamp(55px,6.5vw,94px); animation-delay:-1.1s; }
body.theme-mix .babibuu-three { display:none; }
@keyframes heroStickerFloat { 50% { transform:translateY(-10px) rotate(3deg); } }
@media (max-width:767px) { .hero-sticker { width:72px; opacity:.82; } .kitty-two,.babibuu-two,.kitty-three,.babibuu-three { display:none !important; } body.theme-mix .kitty-one { left:2%; } body.theme-mix .babibuu-one { right:2%; } }

/* Calendar and live countdown in Hero 1. */
.hero-countdown { display:flex; align-items:stretch; width:min(100%,620px); margin:1.15rem auto .5rem; overflow:hidden; border:2px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 9px 22px color-mix(in srgb,var(--accent) 15%,transparent); text-align:left; }
.countdown-calendar { position:relative; display:grid; align-self:center; align-content:center; justify-items:center; min-width:118px; margin:.65rem; padding:1.55rem .7rem .65rem; overflow:visible; border:2px solid var(--main); border-radius:13px 13px 16px 16px; background:#fffdf9; color:var(--ink); box-shadow:0 7px 0 color-mix(in srgb,var(--main) 24%,transparent),0 11px 18px rgba(54,50,79,.12); text-align:center; line-height:1; }
.countdown-calendar::after { content:''; position:absolute; right:0; bottom:0; width:18px; height:18px; border-radius:0 0 13px 0; background:linear-gradient(135deg,color-mix(in srgb,var(--soft) 80%,#fff) 0 49%,color-mix(in srgb,var(--main) 28%,#fff) 51% 100%); clip-path:polygon(100% 0,100% 100%,0 100%); }
.countdown-calendar .calendar-month { position:absolute; inset:0 0 auto; padding:.48rem .35rem .38rem; border-radius:10px 10px 0 0; background:var(--main); color:#fff; font-size:.64rem; font-weight:900; letter-spacing:.08em; }
.calendar-rings { position:absolute; z-index:2; top:-10px; left:19px; right:19px; display:flex; justify-content:space-between; pointer-events:none; }
.calendar-rings i { display:block; width:10px; height:22px; border:3px solid color-mix(in srgb,var(--main) 74%,#433a5a); border-bottom-color:transparent; border-radius:8px 8px 4px 4px; background:transparent; }
.countdown-calendar strong { margin:.18rem 0 .14rem; color:var(--main); font-family:'Baloo 2',cursive; font-size:2.65rem; line-height:.9; }
.countdown-calendar small { color:var(--muted); font-size:.64rem; font-weight:900; }
.countdown-timer { flex:1; min-width:0; padding:.55rem .8rem .45rem; }
.countdown-label { margin:0 0 .35rem; color:var(--main); font-size:.67rem; font-weight:900; letter-spacing:.08em; text-align:center; }
.countdown-units { display:grid; grid-template-columns:repeat(4,1fr); gap:.32rem; }
.countdown-units span { display:grid; justify-items:center; min-width:0; padding:.28rem .1rem; border-radius:10px; background:var(--soft); }
.countdown-units b { color:var(--ink); font-family:'Baloo 2',cursive; font-size:1.5rem; line-height:1; }
.countdown-units small { margin-top:.12rem; color:var(--muted); font-size:.62rem; font-weight:800; }
.countdown-status { min-height:.75rem; margin:.28rem 0 0; color:var(--main); font-size:.72rem; font-weight:800; text-align:center; }
body.theme-babibuu .countdown-calendar .calendar-month { background:#39afe5; } body.theme-mix .countdown-calendar .calendar-month { background:linear-gradient(90deg,#ef5d99,#42b7e7); }
@media (max-width:560px) { .hero-countdown { border-radius:16px; } .countdown-calendar { min-width:88px; margin:.55rem .35rem; padding-inline:.45rem; } .calendar-rings { left:13px; right:13px; } .countdown-calendar strong { font-size:2.1rem; } .countdown-calendar small { font-size:.55rem; } .countdown-timer { padding:.5rem; } .countdown-units { gap:.2rem; } .countdown-units b { font-size:1.18rem; } .countdown-units small { font-size:.56rem; } }

/* Parchment letter board for the public wishes. */
.wish-list { padding:1.15rem 1rem 4rem; border:2px solid #c59b6c; border-radius:24px; background-color:#f3e2c9; background-image:linear-gradient(rgba(255,252,244,.62),rgba(246,223,192,.54)),url('/images/backgrounds/wish-parchment.png'); background-size:cover; background-position:center 82%; box-shadow:inset 0 0 26px rgba(105,66,32,.1),0 14px 28px rgba(96,63,37,.12); scrollbar-color:#b58a61 rgba(255,248,232,.72); }
.wish-list .wish,.wish-list > .card-soft { border:1px solid rgba(124,80,43,.55); border-left:5px solid #8d5c35; border-radius:10px 18px 12px 17px; background:rgba(255,248,229,.83); box-shadow:0 5px 12px rgba(88,53,27,.16),inset 0 0 16px rgba(160,112,63,.08); color:#533b2b; backdrop-filter:blur(2px); }
.wish-list .wish:nth-child(even) { transform:rotate(.25deg); }
.wish-list .wish:nth-child(odd) { transform:rotate(-.18deg); }
.wish-list .wish p { color:#513829; font-family:Georgia,'Times New Roman',serif; font-size:1.05rem; font-style:italic; line-height:1.6; }
.wish-list .wish strong { color:#82502d; font-family:Georgia,'Times New Roman',serif; font-size:.95rem; }
.wish-list .wish-order { color:#8d5c35; font-family:Georgia,'Times New Roman',serif; font-size:.9rem; }
body.theme-kitty .wish-list .card-soft,body.theme-babibuu .wish-list .card-soft,body.theme-mix .wish-list .card-soft { box-shadow:0 5px 12px rgba(88,53,27,.16),inset 0 0 16px rgba(160,112,63,.08); }
@media (max-width:767px) { .wish-list { max-height:560px; padding:.85rem .75rem 3rem; border-radius:18px; } .wish-list .wish p { font-size:1rem; } }

/* Keep the Admin login footer at the bottom without covering the form. */
body.admin-login-page { min-height:100vh; display:flex; flex-direction:column; }
body.admin-login-page .site-nav { flex:0 0 auto; }
body.admin-login-page main { flex:1 0 auto; display:grid; align-items:center; overflow:visible; }
body.admin-login-page .login-wrap { width:100%; min-height:0; padding:2rem 1rem; }
body.admin-login-page footer { flex:0 0 auto; margin-top:0; border-top:3px solid color-mix(in srgb,var(--line) 72%,transparent); background:color-mix(in srgb,var(--paper) 91%,transparent); }
@media (max-width:560px) { body.admin-login-page .login-wrap { padding:1.25rem .75rem; } body.admin-login-page footer { padding:.8rem .5rem; font-size:.82rem; } }

/* Final layout normalization after the themed component layers. */
html { scroll-padding-top:88px; }
body { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1 0 auto; min-width:0; }
body.theme-kitty main,body.theme-babibuu main,body.theme-mix main { overflow:visible; }
.site-nav-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.75rem; }
.brand { white-space:nowrap; font-size:clamp(1.15rem,2vw,1.5rem); }
.site-menu a,.theme-toggle,.btn { transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.site-menu a { padding:.35rem .15rem; }
.site-menu a:focus-visible,.brand:focus-visible,.theme-toggle:focus-visible,.btn:focus-visible,.photo-trigger:focus-visible,.ceremony-carousel-control:focus-visible,.event-slider-control:focus-visible,.lightbox-close:focus-visible,.lightbox-nav:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 75%,#fff); outline-offset:3px; }
.skip-link { position:fixed; z-index:1000; top:.5rem; left:.5rem; transform:translateY(-150%); padding:.55rem .85rem; border-radius:10px; background:var(--ink); color:#fff; font-weight:800; transition:transform .18s ease; }
.skip-link:focus { transform:translateY(0); }
.section-shell { max-width:1120px; }
.hero-copy { width:min(100%,760px); }
.public-home-page .hero-section { grid-template-columns:minmax(0,1fr); }
.hero-copy,.hero-visual,.hero-copy h1 { min-width:0; max-width:100%; }
.hero-copy h1 { margin-inline:auto; }
.hero-copy h1,.section-title h2,.admin-shell h1,.utility-shell h1 { overflow-wrap:anywhere; text-wrap:balance; }
.section-title p,.hero-copy .lead,.ceremony-copy .lead { text-wrap:pretty; }
.hero-media img,.event-photo img,.ceremony-photo img { user-select:none; }
.site-footer { flex:0 0 auto; }

/* Public page consistency. */
.public-home-page .hero-section,.public-home-page #timeline,.public-home-page .wishes-section,.public-home-page .ceremony-section { isolation:isolate; }
.public-home-page #timeline,.public-home-page .wishes-section,.public-home-page .ceremony-section { scroll-margin-top:90px; }
@media (min-width:768px) {
  .public-home-page .section-shell {
    width:min(1120px,calc(100% - clamp(16rem,32vw,22rem)));
  }
}
@media (min-width:768px) and (max-width:1050px) {
  .timeline-card,.timeline-item.left .timeline-card {
    flex-direction:column;
    align-items:stretch;
    gap:1rem;
    min-height:0;
  }
  .timeline-item.left .timeline-copy { text-align:left; }
  .timeline-card .event-slider,.timeline-item.left .event-slider {
    flex:none;
    align-self:center;
    width:min(100%,350px);
    min-width:0;
    height:220px;
    margin-inline:auto;
  }
}
.wish-form { height:100%; }
.wish-form textarea { min-height:145px; resize:vertical; }
.wish-list { min-height:360px; align-content:start; overscroll-behavior:contain; }
.timeline-card { width:100%; }
.timeline-copy { min-width:0; }
.timeline-copy h3 { overflow-wrap:anywhere; }

/* Admin page: clearer hierarchy and faster navigation. */
.admin-page main { overflow:visible !important; }
.admin-shell { width:min(1240px,calc(100% - 2rem)); }
.admin-heading { gap:1rem; flex-wrap:wrap; }
.admin-heading h1 { margin:.45rem 0 0; }
.admin-quick-nav { position:sticky; top:78px; z-index:8; display:flex; gap:.55rem; margin:0 0 1.5rem; padding:.7rem; overflow-x:auto; border:1px solid color-mix(in srgb,var(--line) 75%,#fff); border-radius:18px; background:color-mix(in srgb,var(--paper) 92%,transparent); box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 10%,transparent); backdrop-filter:blur(12px); scrollbar-width:thin; }
.admin-quick-nav a { flex:0 0 auto; padding:.45rem .75rem; border-radius:99px; background:var(--soft); color:var(--ink); font-size:.88rem; font-weight:800; }
.admin-quick-nav a:hover { background:var(--main); color:#fff; }
.admin-grid .card-soft { height:100%; }
.admin-section { scroll-margin-top:155px; padding:1.4rem; border:1px solid color-mix(in srgb,var(--line) 70%,#fff); border-radius:26px; background:color-mix(in srgb,var(--card) 92%,transparent); box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 10%,transparent); }
.admin-section > h2 { margin:0 0 1rem; color:var(--main); }
.admin-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.admin-section-heading h2 { margin:0; color:var(--main); font-size:2rem; }
.admin-section-heading p { margin:.25rem 0 0; color:var(--muted); }
.admin-section .editor { box-shadow:none; }
.admin-section > .table-responsive { margin-top:1.1rem; border:1px solid color-mix(in srgb,var(--line) 62%,#fff); border-radius:18px; background:color-mix(in srgb,var(--paper) 86%,#fff); }
.admin-section .table { margin:0; min-width:720px; }
.admin-section .table th { white-space:nowrap; color:var(--main); }
.admin-section .table td,.admin-section .table th { padding:.85rem; vertical-align:middle; }
.admin-section .actions { min-width:270px; justify-content:flex-end; }
.admin-section input[type=file] { max-width:100%; }
.upload-form { background:color-mix(in srgb,var(--soft) 45%,transparent); }
.timeline-media-help { display:flex; flex-direction:column; gap:.2rem; padding:.85rem 1rem; border:1px solid color-mix(in srgb,var(--line) 70%,#fff); border-radius:15px; background:color-mix(in srgb,var(--soft) 45%,#fff); }
.timeline-media-help strong { color:var(--main); }
.timeline-media-help span { color:var(--muted); font-size:.9rem; }
.selected-file-list { display:grid; gap:.5rem; width:100%; margin-top:.65rem; }
.selected-file-list > strong { color:var(--main); font-size:.86rem; }
.selected-file-item { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-width:0; padding:.55rem .65rem; border:1px solid color-mix(in srgb,var(--line) 68%,#fff); border-radius:12px; background:#fff; }
.selected-file-details { display:flex; align-items:center; gap:.6rem; min-width:0; }
.selected-file-details > span:last-child { display:grid; min-width:0; }
.selected-file-details b { overflow:hidden; color:var(--ink); font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.selected-file-details small { color:var(--muted); font-size:.72rem; }
.selected-file-icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:9px; background:var(--soft); color:var(--main); font-weight:900; }
.selected-file-remove { flex:0 0 auto; }
.upload-form .selected-file-list { order:3; flex-basis:100%; }
.hero-current-media { display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:.75rem 1rem; align-items:center; padding:1rem; border:1px solid color-mix(in srgb,var(--line) 70%,#fff); border-radius:16px; background:color-mix(in srgb,var(--soft) 35%,#fff); }
.hero-current-media > strong { grid-column:1/-1; color:var(--main); }
.hero-current-media > img,.hero-current-media > .timeline-video-placeholder { grid-row:2/5; width:100%; aspect-ratio:16/9; border-radius:12px; object-fit:contain; background:#fff; }
.hero-current-media > label { display:flex; align-items:center; gap:.45rem; margin:0; color:var(--ink); }
.hero-current-media > small { color:var(--muted); }
.hero-upload-form { display:grid; gap:.8rem; margin-top:1rem; padding:1rem; border:1px solid color-mix(in srgb,var(--line) 70%,#fff); border-radius:18px; background:color-mix(in srgb,var(--soft) 42%,#fff); }
.hero-upload-heading { display:flex; flex-direction:column; gap:.15rem; }
.hero-upload-heading strong { color:var(--main); }
.hero-upload-heading span { color:var(--muted); font-size:.88rem; }
.hero-upload-form > .btn { justify-self:start; }
.hero-crop-editor { display:grid; gap:.75rem; padding:.8rem; border:1px solid color-mix(in srgb,var(--line) 65%,#fff); border-radius:16px; background:#fff; }
.hero-crop-editor[hidden] { display:none; }
.hero-crop-viewport { position:relative; width:min(100%,760px); aspect-ratio:16/9; margin-inline:auto; overflow:hidden; border:3px solid var(--line); border-radius:16px; background:repeating-conic-gradient(#edf3f7 0 25%,#fff 0 50%) 50%/20px 20px; cursor:grab; touch-action:none; user-select:none; }
.hero-crop-viewport.is-dragging { cursor:grabbing; }
.hero-crop-viewport::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 0 45px rgba(24,31,50,.12); }
.hero-crop-viewport img { position:absolute; top:50%; left:50%; max-width:none; transform-origin:center; pointer-events:none; }
.hero-crop-controls { display:flex; align-items:center; justify-content:center; gap:.65rem; }
.hero-crop-controls > label { display:flex; flex:1 1 300px; max-width:460px; align-items:center; gap:.7rem; margin:0; font-size:.82rem; }
.hero-crop-controls input[type=range] { flex:1; accent-color:var(--main); }
.hero-crop-editor > small { color:var(--muted); text-align:center; }
.timeline-existing-media { padding:1rem; border:1px solid color-mix(in srgb,var(--line) 70%,#fff); border-radius:16px; background:color-mix(in srgb,var(--paper) 82%,#fff); }
.timeline-existing-media > strong { display:block; margin-bottom:.7rem; color:var(--main); }
.timeline-existing-media > small { display:block; margin-top:.65rem; color:var(--muted); }
.timeline-existing-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:.7rem; }
.timeline-media-item { display:flex; flex-direction:column; min-width:0; margin:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--line) 70%,#fff); border-radius:13px; background:#fff; cursor:pointer; }
.timeline-media-item img,.timeline-video-placeholder { width:100%; aspect-ratio:16/10; object-fit:cover; }
.timeline-video-placeholder { display:grid; place-items:center; background:linear-gradient(135deg,var(--soft),color-mix(in srgb,var(--accent) 35%,#fff)); color:var(--main); font-size:2rem; }
.timeline-media-item > span:last-child { display:flex; align-items:center; gap:.35rem; padding:.55rem; color:var(--ink); font-size:.78rem; }
.timeline-media-item input { accent-color:var(--main); }
.media-count { display:inline-flex; padding:.3rem .65rem; border-radius:99px; background:var(--soft); color:var(--main); font-size:.82rem; font-weight:800; white-space:nowrap; }
.timeline-admin-actions { min-width:350px; }
.timeline-admin-actions .actions { min-width:0; justify-content:flex-start; }
.timeline-upload-form { margin-top:.7rem; padding:.7rem; border:1px solid color-mix(in srgb,var(--line) 65%,#fff); border-radius:14px; background:color-mix(in srgb,var(--soft) 42%,#fff); }
.timeline-upload-form > label { display:block; margin:0 0 .4rem; color:var(--main); font-size:.82rem; }
.timeline-upload-form > div { display:flex; align-items:center; gap:.55rem; }
.timeline-upload-form input[type=file] { flex:1; max-width:220px; font-size:.78rem; }

/* Login and utility pages. */
.login-card { padding:clamp(1.35rem,3vw,2rem); }
.login-remember { display:flex; align-items:center; gap:.55rem; margin-top:1rem; }
.login-remember .form-check-input { flex:0 0 auto; margin:0; }
.login-remember .form-check-label { margin:0; color:var(--muted); font-weight:700; cursor:pointer; }
.login-back-link { color:var(--muted); font-weight:700; }
.login-back-link:hover { color:var(--main); }
.utility-page main { display:grid; place-items:center; padding:3rem 0; }
.utility-shell { width:min(720px,calc(100% - 2rem)); padding:clamp(1.5rem,4vw,3rem); }
.utility-shell h1 { margin:.75rem 0 1rem; font-size:clamp(2.4rem,6vw,4rem); }
.utility-icon { display:block; color:var(--accent); font-size:4rem; line-height:1; }

@media (max-width:767px) {
  html { scroll-padding-top:72px; }
  .site-nav-inner { min-height:58px; padding-block:.55rem; }
  .site-menu { gap:.5rem; }
  .site-menu a:last-of-type { padding:.35rem .5rem; border-radius:99px; background:var(--soft); font-size:.82rem; }
  .theme-music-toggle { width:34px; min-height:34px; justify-content:center; padding:0; }
  .theme-music-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .theme-toggle { width:34px; height:34px; }
  .section-shell { width:min(100% - 1rem,1120px); }
  .public-home-page .hero-section,.public-home-page #timeline,.public-home-page .wishes-section,.public-home-page .ceremony-section { margin-top:.75rem; padding:2.4rem .85rem 2.8rem; border-radius:22px; }
  .hero-copy h1 { font-size:clamp(2.2rem,12vw,3.4rem); line-height:1.02; }
  /* Keep all visible sections at their real size. Without :not(.is-visible),
     this later mobile rule overrode the reveal's final transform and made the
     Timeline/Wishes appear shifted, so the vertical gaps looked uneven. */
  .section-reveal.reveal-from-left:not(.is-visible),.section-reveal.reveal-from-right:not(.is-visible) { transform:translateY(28px) scale(.985); }
  .hero-sticker { opacity:.65; }
  .hero-countdown { margin-top:.85rem; }
  .timeline { padding-bottom:0; }
  .timeline-item { padding-bottom:1.1rem; }
  .timeline-card { padding:1rem; }
  .section-title { margin-bottom:1.6rem; }
  .section-title h2 { font-size:clamp(1.8rem,9vw,2.7rem); }
  .wishes-section .row { --bs-gutter-y:1rem; }
  .wish-list { min-height:0; }
  .ceremony-gallery { height:280px; padding-inline:2.4rem; }
  .ceremony-slide { width:min(78vw,420px); }
  .site-footer { margin-top:1.5rem; font-size:.86rem; }
  .admin-shell { width:min(100% - 1rem,1240px); padding:1.5rem 0 3rem; }
  .admin-shell h1 { font-size:2.15rem; }
  .admin-heading { align-items:flex-start !important; }
  .admin-quick-nav { top:65px; margin-inline:-.1rem; border-radius:14px; }
  .admin-section { margin-top:1.25rem; padding:1rem; border-radius:20px; }
  .admin-section > h2 { font-size:1.65rem; }
  .admin-section-heading { align-items:flex-start; }
  .admin-section-heading h2 { font-size:1.65rem; }
  .admin-section-heading .btn { width:100%; }
  .admin-section .actions { justify-content:flex-start; }
  .upload-form .btn { width:100%; }
  .timeline-admin-actions { min-width:280px; }
  .timeline-upload-form > div { align-items:stretch; flex-direction:column; }
  .timeline-upload-form input[type=file],.timeline-upload-form .btn { width:100%; max-width:none; }
  .hero-current-media { grid-template-columns:1fr; }
  .hero-current-media > img,.hero-current-media > .timeline-video-placeholder { grid-row:auto; }
  .hero-crop-controls { flex-wrap:wrap; }
  .hero-crop-controls > label { order:-1; flex-basis:100%; max-width:none; }
  .hero-upload-form > .btn { width:100%; }
}

@media (max-width:420px) {
  .brand { font-size:1.05rem; }
  .countdown-calendar { min-width:74px; }
  .countdown-timer { padding-inline:.35rem; }
  .countdown-label { letter-spacing:.03em; }
  .countdown-units b { font-size:1.05rem; }
}

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

/* Wishes flow: composer first, messages underneath. */
.wishes-stack { display:grid; gap:1.5rem; }
.wishes-title { margin-bottom:1.8rem; }
.wishes-stack .wish-form { position:relative; width:100%; height:auto; overflow:hidden; border-color:#caa474; background-color:#f5e8ce; background-image:linear-gradient(rgba(255,252,243,.82),rgba(250,238,215,.78)),url('/images/backgrounds/wish-form-envelope.jpg'); background-repeat:no-repeat,no-repeat; background-position:center,right 1.25rem center; background-size:cover,auto 84%; background-blend-mode:normal,screen; box-shadow:inset 0 0 26px rgba(111,76,40,.1),0 14px 30px rgba(99,67,38,.14); }
.wishes-stack .wish-form .form-control { border-color:color-mix(in srgb,var(--main) 42%,#b98c5a); background:rgba(255,253,247,.88); backdrop-filter:blur(2px); }
.wishes-stack .wish-form .form-control:focus { background:rgba(255,255,252,.96); }
.hero-copy .location { display:flex; align-items:flex-start; justify-content:center; gap:.35rem; }
.hero-copy .location-text { white-space:pre-line; text-align:center; }
.hero-copy .lead,.ceremony-copy .lead { white-space:pre-line; }
.hero-copy h1,.timeline-copy h3,.ceremony-copy h2,.timeline-copy p,.wish p,.multiline-text { white-space:pre-line; }
.hero-copy .hero-title { display:block; width:100%; margin:.75rem auto; text-align:center; line-height:1.04; white-space:pre-line; word-break:normal; overflow-wrap:break-word; text-wrap:wrap; }
.hero-copy .hero-title-multiline { font-size:clamp(2.8rem,6.2vw,5.25rem); }
.hero-copy .hero-title-many-lines { font-size:clamp(1.8rem,3.8vw,3.2rem); line-height:1.12; }
.wishes-stack .wish-form::after { content:'♡'; position:absolute; right:1.2rem; top:.55rem; color:var(--line); font-size:4rem; line-height:1; opacity:.22; transform:rotate(12deg); pointer-events:none; }
.wish-form-heading { position:relative; z-index:1; display:flex; align-items:center; gap:.85rem; margin-bottom:.35rem; }
.wish-form-heading h3,.wish-list-heading h3 { margin:0; color:var(--ink); font-size:clamp(1.35rem,2.4vw,1.8rem); }
.wish-form-heading p,.wish-list-heading p { margin:.1rem 0 0; color:var(--muted); line-height:1.5; }
.wish-form-icon { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:16px; background:var(--soft); color:var(--main); font-size:1.45rem; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--line) 65%,#fff); }
.wish-form-grid { display:grid; grid-template-columns:1fr; gap:.25rem; align-items:start; }
.wish-form-grid > div { display:flex; min-width:0; flex-direction:column; }
.wish-name-field { width:min(100%,430px); }
.wish-name-field .form-control { min-height:50px; }
.wish-content-field { width:100%; }
.wish-content-field textarea { min-height:165px; resize:vertical; }
.wish-form-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }
.wish-form-actions small { margin:0; }
.wish-form-actions .btn { flex:0 0 auto; min-width:220px; }
.wish-list-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1.25rem; padding:1.15rem 1.3rem; border:1px solid color-mix(in srgb,var(--line) 70%,#fff); border-radius:22px; background:color-mix(in srgb,var(--soft) 45%,#fff); }
.wish-list-heading .wish-counter { display:grid; flex:0 0 112px; place-items:center; min-height:112px; margin:0; padding:.65rem; border:2px solid var(--line); border-radius:24px; background:#fff; color:var(--main); box-shadow:0 7px 16px color-mix(in srgb,var(--accent) 14%,transparent); line-height:1.05; }
.wish-list-heading .wish-counter small { color:var(--muted); font-size:.67rem; font-weight:800; }
.wish-list-heading .wish-counter strong { font-size:2.2rem; line-height:.92; }
.wish-list-heading .wish-counter span { font-size:.78rem; font-weight:900; }
.wishes-stack .wish-list { width:100%; max-height:620px; min-height:360px; }
@media (max-width:767px) { .wish-form-heading { align-items:flex-start; } .wish-form-icon { flex-basis:42px; width:42px; height:42px; border-radius:13px; } .wish-content-field textarea { min-height:175px; } .wish-form-actions { align-items:stretch; flex-direction:column; } .wish-form-actions .btn { width:100%; min-width:0; } .wish-list-heading { align-items:center; padding:1rem; } .wish-list-heading .wish-counter { flex-basis:92px; min-height:92px; border-radius:20px; } .wish-list-heading .wish-counter strong { font-size:1.85rem; } .wishes-stack .wish-list { min-height:0; max-height:560px; } }
@media (max-width:767px) { .wishes-stack .wish-form { background-position:center,center bottom 1rem; background-size:cover,88% auto; } }
@media (max-width:480px) { .wish-list-heading { align-items:stretch; flex-direction:column; text-align:center; } .wish-list-heading .wish-counter { width:100%; min-height:0; grid-template-columns:auto auto auto; gap:.45rem; border-radius:16px; } .wish-list-heading .wish-counter strong { font-size:1.55rem; } }

/* Hero 2 / Timeline: modern heading and milestone cards without scenery decor. */
.timeline-section-title { position:relative; width:min(100%,720px); margin-inline:auto; padding:1.2rem 1rem 1.5rem; border-radius:28px; background:rgba(255,255,255,.68); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 34%,transparent),0 12px 28px color-mix(in srgb,var(--accent) 9%,transparent); backdrop-filter:blur(8px); }
.timeline-section-title::before,.timeline-section-title::after { content:''; position:absolute; top:50%; width:clamp(34px,8vw,92px); height:2px; background:linear-gradient(90deg,transparent,var(--main)); opacity:.5; }
.timeline-section-title::before { right:calc(100% + .7rem); }
.timeline-section-title::after { left:calc(100% + .7rem); transform:rotate(180deg); }
.timeline-section-title h2 { color:var(--ink); text-shadow:2px 3px 0 color-mix(in srgb,var(--soft) 78%,#fff); }
.timeline-card { border-width:1px; background:linear-gradient(125deg,rgba(255,255,255,.96),color-mix(in srgb,var(--soft) 26%,#fff)); box-shadow:0 18px 40px color-mix(in srgb,var(--accent) 13%,transparent),inset 0 1px 0 #fff; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.timeline-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--main) 58%,#fff); box-shadow:0 22px 46px color-mix(in srgb,var(--accent) 18%,transparent),inset 0 1px 0 #fff; }
.timeline-event-number { position:absolute; z-index:3; top:.9rem; left:1rem; display:grid; place-items:center; min-width:42px; height:29px; padding:0 .6rem; border-radius:99px; background:linear-gradient(135deg,var(--main),var(--accent)); color:#fff; font-family:'Baloo 2',cursive; font-size:.82rem; font-weight:900; letter-spacing:.06em; box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 22%,transparent); }
.timeline-item.left .timeline-event-number { right:1rem; left:auto; }
.timeline-card .timeline-copy { padding-top:1.25rem; }
.timeline-card h3 { font-size:clamp(1.45rem,2.4vw,1.85rem); }
.timeline-card .event-slider { margin-top:.45rem; }
@media (max-width:767px) {
  .timeline-section-title { padding:1rem .75rem 1.25rem; border-radius:22px; }
  .timeline-section-title::before,.timeline-section-title::after { display:none; }
  .timeline-card,.timeline-item.left .timeline-card { border-left:4px solid color-mix(in srgb,var(--main) 65%,#fff); }
  .timeline-item.left .timeline-event-number { right:auto; left:1rem; }
  .timeline-card .timeline-copy { padding-top:1.6rem; }
}

/* Hero 1 polish: clear hierarchy, balanced decor and a premium photo frame. */
body.theme-kitty .hero-section,body.theme-babibuu .hero-section,body.theme-mix .hero-section { isolation:isolate; gap:clamp(2.1rem,4vw,3.5rem); padding-block:clamp(3.2rem,6vw,5.4rem); background:
  radial-gradient(ellipse 58% 42% at 5% 8%,color-mix(in srgb,var(--main) 19%,transparent),transparent 72%),
  radial-gradient(ellipse 52% 40% at 94% 13%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),
  radial-gradient(ellipse 48% 36% at 82% 78%,color-mix(in srgb,var(--main) 10%,transparent),transparent 74%),
  radial-gradient(ellipse 48% 34% at 12% 88%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%),
  linear-gradient(145deg,#fff 8%,color-mix(in srgb,var(--soft) 18%,#fff) 48%,#fff 92%); }
body.theme-kitty .hero-section::before,body.theme-babibuu .hero-section::before,body.theme-mix .hero-section::before { content:''; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.38; background-image:linear-gradient(color-mix(in srgb,var(--line) 20%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 20%,transparent) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 76% 64% at center,#000 5%,transparent 88%); mask-image:radial-gradient(ellipse 76% 64% at center,#000 5%,transparent 88%); }
.hero-copy { display:grid; justify-items:center; width:min(100%,790px); }
.hero-top-tier,.hero-info-tier,.hero-action-tier { position:relative; width:100%; text-align:center; }
.hero-top-tier { padding-bottom:.35rem; }
.hero-info-tier { display:grid; justify-items:center; margin-top:.65rem; padding-top:1rem; border-top:1px solid color-mix(in srgb,var(--line) 42%,transparent); }
.hero-info-tier .location { margin:.1rem 0 .35rem; }
.hero-action-tier { display:grid; justify-items:center; margin-top:.65rem; padding-top:.35rem; }
.hero-action-tier .lead { margin:.45rem auto .65rem; }
.hero-cta { display:inline-flex; align-items:center; justify-content:center; gap:.38rem; min-width:205px; margin-top:.45rem; padding:.75rem 1.4rem; }
.hero-cta span:first-child { transition:transform .2s; }
.hero-cta:hover span:first-child { transform:rotate(25deg) scale(1.18); }
.graduate-profile-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem 1.4rem; width:min(100%,690px); margin:1.45rem auto 0; padding:1rem 1.15rem; overflow:hidden; border:1px solid color-mix(in srgb,var(--line) 72%,#fff); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--soft) 46%,#fff),rgba(255,255,255,.96) 52%,color-mix(in srgb,var(--accent) 14%,#fff)); box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 1px 0 rgba(255,255,255,.9); text-align:left; }
.graduate-profile-card::before { content:'✦'; position:absolute; top:.4rem; right:.65rem; color:color-mix(in srgb,var(--accent) 70%,#fff); font-size:1.05rem; pointer-events:none; }
.graduate-profile-copy { display:grid; min-width:0; gap:.05rem; }
.graduate-profile-kicker { margin-bottom:.12rem; color:var(--main); font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.graduate-profile-name { color:var(--ink); font-family:'Baloo 2',cursive; font-size:clamp(1.2rem,2.4vw,1.55rem); line-height:1.15; overflow-wrap:anywhere; }
.graduate-profile-detail { color:var(--muted); font-size:.86rem; line-height:1.35; overflow-wrap:anywhere; }
.graduate-profile-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; max-width:310px; }
.graduate-profile-links a { display:inline-flex; align-items:center; gap:.32rem; min-height:34px; padding:.38rem .62rem; border:1px solid color-mix(in srgb,var(--line) 75%,#fff); border-radius:99px; background:rgba(255,255,255,.9); color:var(--ink); font-size:.76rem; font-weight:800; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.graduate-profile-links a span { display:grid; width:20px; height:20px; place-items:center; border-radius:50%; background:var(--soft); color:var(--main); font-size:.8rem; font-weight:900; line-height:1; }
.graduate-profile-links a:hover { border-color:var(--main); background:#fff; color:var(--main); transform:translateY(-2px); }
body.night .graduate-profile-card { border-color:var(--line); background:linear-gradient(135deg,color-mix(in srgb,var(--soft) 45%,var(--card)),var(--card)); box-shadow:0 12px 26px rgba(0,0,0,.2); }
body.night .graduate-profile-links a { border-color:var(--line); background:color-mix(in srgb,var(--card) 86%,#fff); color:var(--ink); }
.graduate-profile-editor { gap:.75rem; }
.graduate-profile-master-toggle { padding:1rem 1rem 1rem 3.25rem; border:1px solid color-mix(in srgb,var(--line) 70%,#fff); border-radius:15px; background:color-mix(in srgb,var(--soft) 42%,#fff); }
.graduate-profile-master-toggle .form-check-input { margin-left:-2.25rem; }
.graduate-profile-master-toggle .form-check-label { color:var(--ink); font-weight:800; }
.graduate-profile-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.graduate-profile-fields > div,.graduate-profile-social-row > div:first-child { display:grid; gap:.3rem; min-width:0; }
.graduate-profile-social-title { margin:.65rem 0 0; color:var(--main); font-size:1.25rem; }
.graduate-profile-social-admin { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.graduate-profile-social-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.75rem; padding:.8rem; border:1px solid color-mix(in srgb,var(--line) 62%,#fff); border-radius:14px; background:color-mix(in srgb,var(--soft) 25%,#fff); }
.graduate-profile-social-row .form-check { min-width:82px; margin-bottom:.55rem; }
.hero-countdown { align-items:center; margin:1rem auto .25rem; padding:.3rem; overflow:visible; background:rgba(255,255,255,.86); backdrop-filter:blur(7px); }
.countdown-calendar { transform:rotate(-2.5deg); transition:transform .22s ease; }
.hero-countdown:hover .countdown-calendar { transform:rotate(-1deg) translateY(-2px); }
.hero-visual { position:relative; width:min(100%,950px); margin-top:.25rem; padding:6px; }
.hero-visual::before { content:''; position:absolute; z-index:0; inset:0; border-radius:28px; background:linear-gradient(135deg,color-mix(in srgb,var(--main) 88%,#fff),rgba(255,255,255,.94) 46%,color-mix(in srgb,var(--accent) 82%,#fff)); box-shadow:0 20px 45px color-mix(in srgb,var(--accent) 17%,transparent),0 5px 16px rgba(50,54,83,.12); transition:filter .25s ease,transform .25s ease; }
.hero-visual::after { content:''; position:absolute; z-index:2; inset:11px; border:1px solid rgba(255,255,255,.72); border-radius:19px; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); pointer-events:none; }
body.theme-kitty .hero-visual .hero-media,body.theme-babibuu .hero-visual .hero-media,body.theme-mix .hero-visual .hero-media { position:relative; z-index:1; overflow:hidden; aspect-ratio:16/9; border:2px solid rgba(255,255,255,.9); border-radius:23px; background:var(--soft); box-shadow:0 10px 28px rgba(48,54,82,.16); transition:transform .28s ease,box-shadow .28s ease; }
.hero-visual:hover::before { filter:saturate(1.08) brightness(1.03); transform:scale(1.004); }
.hero-visual:hover .hero-media { transform:translateY(-2px); box-shadow:0 16px 34px rgba(48,54,82,.2); }
.hero-visual .mini-note { z-index:3; bottom:-.2rem; left:-.3rem; }
body.theme-mix .hero-sticker,body.theme-kitty .hero-sticker,body.theme-babibuu .hero-sticker { z-index:1; }
@media (max-width:767px) {
  body.theme-kitty .hero-section,body.theme-babibuu .hero-section,body.theme-mix .hero-section { gap:2rem; padding-block:2.7rem 3.2rem; }
  .hero-info-tier { margin-top:.35rem; padding-top:.75rem; }
  .hero-action-tier .lead { margin-top:.3rem; }
  .graduate-profile-card { grid-template-columns:1fr; justify-items:center; gap:.8rem; margin-top:1.25rem; padding:.9rem; text-align:center; }
  .graduate-profile-links { justify-content:center; max-width:100%; }
  .graduate-profile-fields,.graduate-profile-social-admin { grid-template-columns:1fr; }
  .graduate-profile-social-row { align-items:center; }
  .hero-countdown { width:min(100%,560px); }
  .hero-visual { padding:4px; }
  .hero-visual::before { border-radius:21px; }
  .hero-visual::after { inset:8px; border-radius:15px; }
  body.theme-kitty .hero-visual .hero-media,body.theme-babibuu .hero-visual .hero-media,body.theme-mix .hero-visual .hero-media { border-width:1px; border-radius:18px; }
  .hero-visual .mini-note { left:.1rem; bottom:-.35rem; }
}

/* Public sub-sections: one modern visual system for Timeline, Wishes and Ceremony. */
.public-home-page :is(#timeline,.wishes-section,.ceremony-section) {
  isolation:isolate;
  background:
    radial-gradient(circle at 9% 10%,color-mix(in srgb,var(--main) 13%,transparent),transparent 28%),
    radial-gradient(circle at 92% 16%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 30%),
    radial-gradient(circle at 78% 91%,color-mix(in srgb,var(--main) 7%,transparent),transparent 28%),
    linear-gradient(145deg,#fff 7%,color-mix(in srgb,var(--soft) 16%,#fff) 52%,#fff 94%);
  box-shadow:0 22px 54px color-mix(in srgb,var(--accent) 13%,transparent),inset 0 1px 0 #fff;
}
.public-home-page :is(#timeline,.wishes-section,.ceremony-section)::after {
  content:'';
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(color-mix(in srgb,var(--line) 17%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--line) 17%,transparent) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at center,#000,transparent 92%);
  mask-image:radial-gradient(ellipse 78% 72% at center,#000,transparent 92%);
}
.public-home-page :is(#timeline,.wishes-section,.ceremony-section) > * { position:relative; z-index:1; }

/* Consistent glass titles while each section keeps its own accent. */
.timeline-section-title,.wishes-title,.ceremony-copy .section-title {
  position:relative;
  width:min(100%,760px);
  margin-inline:auto;
  padding:1.25rem clamp(.85rem,3vw,1.75rem) 1.5rem;
  border:1px solid color-mix(in srgb,var(--line) 38%,transparent);
  border-radius:28px;
  background:rgba(255,255,255,.72);
  box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 1px 0 #fff;
  backdrop-filter:blur(10px);
}
.timeline-section-title::before,.wishes-title::before,.ceremony-copy .section-title::before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  width:min(180px,42%);
  height:4px;
  border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,var(--main),var(--accent));
  transform:translateX(-50%);
}
.wishes-title h2,.ceremony-copy .section-title h2 { color:var(--ink); text-shadow:2px 3px 0 color-mix(in srgb,var(--soft) 78%,#fff); }
.timeline-section-title::after {
  content:'';
  position:absolute;
  top:50%;
  right:-112px;
  left:-112px;
  width:auto;
  height:2px;
  transform:rotate(0deg);
  opacity:.5;
  background:
    linear-gradient(90deg,transparent,var(--main)) left center / 100px 2px no-repeat,
    linear-gradient(90deg,var(--main),transparent) right center / 100px 2px no-repeat;
  pointer-events:none;
}

/* Timeline: clearer rhythm and a gentle connecting guide. */
.timeline { position:relative; width:min(100%,1020px); margin-inline:auto; padding-top:1.5rem; }
.timeline::after { content:''; position:absolute; z-index:0; top:1.5rem; bottom:3rem; left:50%; width:2px; border-radius:99px; background:linear-gradient(transparent,color-mix(in srgb,var(--main) 45%,#fff) 8%,color-mix(in srgb,var(--accent) 48%,#fff) 92%,transparent); opacity:.55; transform:translateX(-50%); }
.timeline-item { z-index:1; }
.timeline-card { backdrop-filter:blur(5px); }
.timeline-item:nth-child(even) .timeline-card { background:linear-gradient(235deg,rgba(255,255,255,.97),color-mix(in srgb,var(--soft) 30%,#fff)); }

/* Wishes: composer and messages read as two deliberate content panels. */
.wishes-stack { width:min(100%,1020px); margin-inline:auto; gap:1.75rem; }
.wishes-stack .wish-form { padding:clamp(1.2rem,3vw,2rem); border-width:1px; border-radius:28px; }
.wish-form-heading { margin-bottom:.8rem; }
.wish-form-icon { background:linear-gradient(145deg,#fff,var(--soft)); box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 13%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,#fff); }
.wish-list-heading { padding:1.25rem 1.5rem; border-width:1px; border-radius:26px; background:rgba(255,255,255,.78); box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 9%,transparent),inset 0 1px 0 #fff; backdrop-filter:blur(8px); }
.wish-list-heading .eyebrow { display:inline-flex; padding:.25rem .6rem; border-radius:99px; background:var(--soft); color:var(--main); font-size:.72rem; font-weight:900; letter-spacing:.12em; }
.wishes-stack .wish-list { padding:.85rem; border:1px solid color-mix(in srgb,#a8743f 42%,#fff); border-radius:28px; box-shadow:0 16px 34px rgba(96,62,31,.13),inset 0 0 30px rgba(119,79,37,.08); }
.wishes-stack .wish { position:relative; min-height:118px; border:1px solid rgba(145,105,63,.38); border-left:5px solid color-mix(in srgb,var(--main) 76%,#9d7249); border-radius:19px; background:rgba(255,251,238,.88); box-shadow:0 7px 16px rgba(92,62,32,.1); transition:transform .22s ease,box-shadow .22s ease; }
.wishes-stack .wish:hover { transform:translateY(-2px); box-shadow:0 11px 22px rgba(92,62,32,.14); }

/* Ceremony: editorial intro followed by a focused gallery stage. */
.ceremony-copy { width:min(100%,940px); margin-bottom:2rem; padding:0; }
.ceremony-copy .section-title { margin-bottom:1.25rem; }
.ceremony-copy .lead { width:min(100%,760px); margin:.2rem auto 0; padding:1rem 1.35rem; border:1px solid color-mix(in srgb,var(--line) 34%,transparent); border-radius:20px; background:rgba(255,255,255,.68); color:var(--muted); box-shadow:inset 0 1px 0 #fff; backdrop-filter:blur(8px); }
.ceremony-copy .memory-stamp { margin-top:1rem; border-style:solid; background:rgba(255,255,255,.8); box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 11%,transparent); }
.ceremony-gallery { width:min(100%,1160px); height:440px; padding:1rem 5rem; border:1px solid color-mix(in srgb,var(--line) 36%,transparent); border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.68),color-mix(in srgb,var(--soft) 22%,rgba(255,255,255,.88))); box-shadow:0 20px 42px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 1px 0 #fff; backdrop-filter:blur(8px); }
.ceremony-carousel-stage { height:100%; }
.ceremony-slide { top:1rem; bottom:1rem; height:auto; }
.ceremony-slide .ceremony-photo,.ceremony-slide .ceremony-video { border-width:3px; border-radius:24px; box-shadow:0 18px 36px rgba(42,47,70,.2); }
.ceremony-slide.is-focused .ceremony-photo,.ceremony-slide.is-focused .ceremony-video { box-shadow:0 22px 44px rgba(42,47,70,.24),0 0 0 3px color-mix(in srgb,var(--line) 46%,#fff); }
.ceremony-carousel-control { border-width:1px; border-radius:50%; width:50px; height:50px; background:rgba(255,255,255,.92); backdrop-filter:blur(7px); }
.gallery-hint { width:max-content; max-width:100%; margin:.85rem auto 0; padding:.45rem .9rem; border-radius:99px; background:color-mix(in srgb,var(--soft) 58%,#fff); }

@media (max-width:767px) {
  .public-home-page :is(#timeline,.wishes-section,.ceremony-section) { padding-inline:.8rem; }
  .timeline-section-title,.wishes-title,.ceremony-copy .section-title { padding:1rem .8rem 1.2rem; border-radius:22px; }
  .timeline-section-title::after { display:none; }
  .timeline::after { left:1.15rem; transform:translateX(0); }
  .timeline-card { margin-left:.35rem; }
  .wishes-stack .wish-form { padding:1rem; border-radius:22px; }
  .wish-list-heading { padding:1rem; border-radius:22px; }
  .wishes-stack .wish-list { padding:.55rem; border-radius:22px; }
  .wishes-stack .wish { min-height:0; border-radius:16px; }
  .ceremony-copy .lead { padding:.85rem 1rem; border-radius:17px; }
  .ceremony-gallery { height:310px; padding:1rem 2.8rem; border-radius:22px; }
  .ceremony-slide { top:.7rem; bottom:.7rem; }
  .ceremony-slide .ceremony-photo,.ceremony-slide .ceremony-video { border-radius:18px; }
}

/* Phone portrait: every public section starts with the same visual gap. */
@media (max-width:767px) and (orientation:portrait) {
  body.public-home-page :is(.hero-section,#timeline,.wishes-section,.ceremony-section) {
    margin-top:.85rem;
    margin-bottom:0;
  }
}

/* Footer signature, contact links and landscape decoration. */
.site-footer { position:relative; display:grid; min-height:108px; align-items:center; overflow:hidden; padding:0; text-align:center; }
.site-footer-content.container { position:static; z-index:1; display:block; width:100%; max-width:none; padding:0; }
.footer-signature-card { position:absolute; z-index:2; top:9px; right:10px; display:flex; align-items:center; justify-content:flex-end; gap:.48rem; width:auto; max-width:430px; padding:.35rem .5rem; border:1px solid color-mix(in srgb,var(--line) 62%,transparent); border-radius:14px; background:color-mix(in srgb,var(--card) 82%,transparent); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 9%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 68%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.footer-avatar-admin-link { flex:0 0 auto; display:block; border-radius:50%; line-height:0; }
.footer-avatar-admin-link:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 75%,#fff); outline-offset:3px; }
.footer-avatar,.footer-avatar-initial { width:40px; height:40px; border:2px solid #fff; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--line),0 5px 12px color-mix(in srgb,var(--main) 16%,transparent); }
.footer-avatar { display:none; object-fit:cover; object-position:center center; }
.footer-avatar-initial { display:grid; place-items:center; color:var(--main); font-family:'Baloo 2',cursive; font-size:1.35rem; font-weight:900; line-height:1; }
body.theme-mix .footer-avatar { display:block; }
body.theme-mix .footer-avatar-initial { display:none; }
.footer-credits { min-width:0; text-align:left; }
.footer-credits p { margin:0; line-height:1.3; }
.footer-designed { color:var(--ink); font-size:.66rem; letter-spacing:.015em; }
.footer-designed strong { color:inherit; font-family:'Baloo 2',cursive; font-size:1.08em; }
.footer-handcrafted { margin-top:.12rem !important; color:var(--muted); font-size:.59rem; }
.footer-handcrafted strong { color:inherit; }
.footer-contact-links { position:absolute; z-index:2; right:10px; bottom:8px; display:flex; align-items:stretch; justify-content:flex-end; flex-wrap:nowrap; gap:.32rem; }
.footer-contact-item { display:flex; align-items:center; gap:.32rem; min-width:0; padding:.28rem .42rem; border:1px solid color-mix(in srgb,var(--line) 65%,transparent); border-radius:10px; background:color-mix(in srgb,var(--card) 76%,transparent); color:var(--ink); box-shadow:0 4px 11px color-mix(in srgb,var(--accent) 8%,transparent); text-align:left; line-height:1.05; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.footer-contact-item span { display:grid; gap:.12rem; }
.footer-contact-item small { color:var(--muted); font-size:.5rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.footer-contact-item strong { color:var(--ink); font-size:.58rem; }
.footer-contact-icon { flex:0 0 auto; width:14px; height:14px; fill:currentColor; color:var(--main); }
.footer-tiktok { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.footer-email-link { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.footer-tiktok:hover,.footer-email-link:hover { border-color:var(--main); color:var(--main); box-shadow:0 9px 22px color-mix(in srgb,var(--main) 17%,transparent); transform:translateY(-2px); }
.footer-tiktok:focus-visible,.footer-email-link:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 75%,#fff); outline-offset:3px; }
.footer-email-pending { cursor:default; }
.footer-email-pending .footer-contact-icon,.footer-email-link .footer-contact-icon { color:var(--accent); }
.footer-copyright { position:relative; z-index:1; margin:0; padding-inline:300px 440px; color:var(--muted); font-size:.76rem; font-weight:700; letter-spacing:.025em; line-height:1.35; }
.footer-night-decor { position:absolute; z-index:0; bottom:0; left:0; width:clamp(175px,20vw,285px); height:100%; object-fit:cover; object-position:center 68%; opacity:.88; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,#000 0 68%,transparent 100%); mask-image:linear-gradient(90deg,#000 0 68%,transparent 100%); }
body.night .footer-signature-card,body.night .footer-contact-item { box-shadow:0 12px 28px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06); }
@media (max-width:560px) {
  .site-footer { min-height:148px; }
  .footer-signature-card { top:8px; right:6px; max-width:calc(100% - 92px); gap:.38rem; padding:.32rem .4rem; }
  .footer-avatar,.footer-avatar-initial { width:36px; height:36px; }
  .footer-designed { font-size:.59rem; }
  .footer-handcrafted { font-size:.53rem; }
  .footer-contact-links { right:6px; bottom:8px; max-width:calc(100% - 72px); flex-wrap:wrap; gap:.28rem; }
  .footer-contact-item { padding:.26rem .36rem; }
  .footer-contact-item strong { font-size:.53rem; }
  .footer-email-pending small,.footer-email-link small { display:none; }
  .footer-copyright { padding:0 7px; font-size:.65rem; transform:translateY(18px); }
  .footer-night-decor { width:105px; opacity:.66; }
}

/* Drive section password lock overlay. */
[data-drive-lock] { position:relative; overflow:hidden; }
.drive-lock-overlay { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; border-radius:inherit; background:color-mix(in srgb,var(--paper) 82%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:opacity .3s; }
.drive-lock-prompt { display:flex; flex-direction:column; align-items:center; gap:.65rem; padding:1.4rem 1.2rem; text-align:center; }
.drive-lock-icon { font-size:2.4rem; line-height:1; animation:cute-bob 3s ease-in-out infinite; }
.drive-lock-prompt > p { margin:0; color:var(--muted); font-size:.88rem; }
.drive-lock-form { display:flex; flex-direction:column; align-items:stretch; gap:.5rem; width:210px; }
.drive-lock-form input { text-align:center; letter-spacing:.08em; }
.drive-lock-form input.shake { animation:drive-shake .4s ease; }
.drive-lock-error { margin:0; }
@keyframes drive-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 60%{transform:translateX(7px)} 80%{transform:translateX(-4px)} }

/* Lightweight public visit counter and matching admin summary. */
.footer-center-stack { position:relative; z-index:1; display:grid; justify-items:center; gap:.24rem; width:100%; margin:0 auto; text-align:center; }
.footer-center-stack .footer-copyright { padding:0; transform:none; }
.footer-view-counter { display:inline-flex; align-items:center; justify-content:center; gap:.3rem; min-height:24px; padding:.22rem .6rem; border:1px solid color-mix(in srgb,var(--line) 72%,#fff); border-radius:999px; background:color-mix(in srgb,var(--card) 88%,transparent); color:var(--muted); box-shadow:0 4px 11px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 72%,transparent); font-size:.64rem; font-weight:700; line-height:1; white-space:nowrap; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.footer-view-counter strong { color:var(--main); font-size:.82rem; font-variant-numeric:tabular-nums; }
.footer-view-icon { color:var(--accent); font-size:.9rem; }
body.night .footer-view-counter { background:color-mix(in srgb,var(--card) 88%,transparent); box-shadow:0 8px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06); }

.admin-view-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:0 0 1.15rem; }
.admin-view-stat { display:flex; align-items:center; gap:.72rem; min-width:0; padding:.8rem 1rem; border:1px solid color-mix(in srgb,var(--line) 68%,#fff); border-radius:18px; background:color-mix(in srgb,var(--card) 92%,transparent); box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 8%,transparent); }
.admin-view-stat > span { display:grid; flex:0 0 auto; width:38px; height:38px; place-items:center; border-radius:13px; background:var(--soft); color:var(--main); font-size:1.05rem; }
.admin-view-stat div { display:grid; min-width:0; gap:.08rem; }
.admin-view-stat small { overflow:hidden; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.04em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.admin-view-stat strong { color:var(--ink); font-size:1.35rem; font-variant-numeric:tabular-nums; line-height:1; }

@media (max-width:767px) {
  .admin-view-stats { grid-template-columns:1fr; gap:.55rem; }
  .admin-view-stat { padding:.7rem .8rem; }
}
@media (max-width:560px) {
  .footer-center-stack { width:calc(100% - 14px); transform:translateY(10px); }
  .footer-center-stack .footer-copyright { font-size:.65rem; }
  .footer-view-counter { min-height:22px; padding:.18rem .52rem; font-size:.6rem; }
}

/* Opening graduation letter: CSS-only envelope with a short, lightweight celebration. */
body.intro-active { overflow:hidden; }
.graduation-intro[hidden] { display:none; }
.graduation-intro { position:fixed; z-index:1200; inset:0; display:grid; place-items:center; overflow:hidden; padding:clamp(1rem,3vw,2rem); background:linear-gradient(145deg,color-mix(in srgb,var(--paper) 88%,#fff),color-mix(in srgb,var(--soft) 72%,#fff)); opacity:0; transition:opacity .45s ease; isolation:isolate; }
.graduation-intro.is-ready { opacity:1; }
.graduation-intro.is-leaving { opacity:0; pointer-events:none; }
.graduation-intro::before { content:''; position:absolute; z-index:-2; inset:0; opacity:.54; background-image:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--main) 24%,transparent) 0 2px,transparent 3px),radial-gradient(circle at 82% 28%,color-mix(in srgb,var(--accent) 30%,transparent) 0 2px,transparent 3px),linear-gradient(color-mix(in srgb,var(--line) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 12%,transparent) 1px,transparent 1px); background-size:90px 90px,120px 120px,44px 44px,44px 44px; }
.graduation-intro-glow { position:absolute; z-index:-1; top:50%; left:50%; width:min(780px,92vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,#fff 84%,var(--soft)) 0 31%,color-mix(in srgb,var(--accent) 18%,transparent) 56%,transparent 72%); filter:blur(2px); transform:translate(-50%,-50%); }
.graduation-intro-stage { position:relative; display:grid; justify-items:center; width:min(620px,100%); transform:translateY(18px) scale(.96); opacity:0; transition:transform .65s cubic-bezier(.22,.75,.25,1),opacity .5s ease; }
.graduation-intro.is-ready .graduation-intro-stage { transform:translateY(0) scale(1); opacity:1; }
.graduation-intro-kicker { margin:0 0 clamp(1rem,3vh,1.7rem); color:var(--main); font-family:'Baloo 2',cursive; font-size:clamp(1rem,2.8vw,1.35rem); font-weight:800; letter-spacing:.035em; text-align:center; text-shadow:0 2px 0 #fff; }
.graduation-letter { position:relative; display:grid; justify-items:center; gap:1.25rem; width:min(480px,88vw); padding:0; border:0; background:none; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.graduation-letter:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 76%,#fff); outline-offset:12px; border-radius:28px; }
.graduation-envelope { position:relative; display:block; width:min(430px,86vw); aspect-ratio:1.48/1; filter:drop-shadow(0 22px 20px color-mix(in srgb,var(--main) 19%,transparent)); perspective:1100px; transform:translateY(0) rotate(-.4deg); transform-style:preserve-3d; will-change:transform,filter; }
.graduation-envelope::after { content:''; position:absolute; z-index:-2; right:8%; bottom:-25px; left:8%; height:35px; border-radius:50%; background:rgba(54,50,75,.22); filter:blur(15px); opacity:.45; transform:scaleX(.88); transition:opacity .8s ease,transform .9s ease; }
.graduation-envelope-back { position:absolute; inset:0; border:2px solid color-mix(in srgb,var(--main) 50%,#fff); border-radius:18px; background:linear-gradient(155deg,color-mix(in srgb,var(--soft) 82%,#fff),#fff 72%),repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 2px,transparent 2px 5px); box-shadow:inset 0 1px 0 #fff,inset 0 -14px 25px color-mix(in srgb,var(--main) 7%,transparent); }
.graduation-card { position:absolute; z-index:2; right:7%; bottom:7%; left:7%; display:grid; align-content:center; justify-items:center; height:88%; padding:1rem; overflow:hidden; border:2px solid color-mix(in srgb,var(--line) 78%,#fff); border-radius:17px; background:linear-gradient(150deg,rgba(255,255,255,.98) 0 64%,color-mix(in srgb,var(--soft) 58%,#fff)),repeating-linear-gradient(0deg,rgba(84,72,93,.025) 0 1px,transparent 1px 4px); box-shadow:0 7px 15px rgba(54,50,75,.12),inset 0 0 0 5px rgba(255,255,255,.72); clip-path:inset(0 0 82% 0 round 17px); opacity:0; transform:translateY(50%) scale(.93) rotate(-.35deg); transition:box-shadow 1.45s .72s ease; will-change:transform,clip-path,opacity; }
.graduation-card::before,.graduation-card::after { content:'✦'; position:absolute; color:var(--accent); font-size:1.25rem; opacity:.72; }
.graduation-card::before { top:1rem; left:1.1rem; }
.graduation-card::after { right:1.1rem; bottom:1rem; }
.graduation-card-cap { font-size:clamp(1.8rem,5vw,2.7rem); filter:drop-shadow(0 5px 6px color-mix(in srgb,var(--main) 20%,transparent)); transform:translateY(8px) scale(.76); opacity:0; transition:transform .55s 1.72s cubic-bezier(.18,1.2,.3,1),opacity .42s 1.72s ease; }
.graduation-card strong { color:var(--main); font-family:'Baloo 2',cursive; font-size:clamp(1.75rem,6.2vw,3.15rem); font-weight:900; line-height:.9; letter-spacing:.025em; text-align:center; text-transform:uppercase; text-shadow:2px 2px 0 #fff,4px 4px 0 color-mix(in srgb,var(--soft) 75%,transparent); transform:translateY(8px); opacity:0; transition:transform .58s 1.84s cubic-bezier(.18,1.15,.3,1),opacity .45s 1.84s ease; }
.graduation-card-name { display:block; margin-top:.28em; font-size:.58em; line-height:1.05; letter-spacing:.035em; text-transform:none; }
.graduation-card small { margin-top:.6rem; color:var(--muted); font-family:'Baloo 2',cursive; font-size:clamp(.73rem,2.7vw,1rem); font-weight:700; letter-spacing:.08em; opacity:0; transition:opacity .45s 2.05s ease; }
.graduation-card-doodle { margin-top:.45rem; color:var(--accent); font-size:.88rem; font-weight:900; opacity:0; transition:opacity .45s 2.16s ease; }
.graduation-envelope-flap { position:absolute; z-index:4; top:0; right:0; left:0; height:57%; border:2px solid color-mix(in srgb,var(--main) 52%,#fff); border-bottom:0; border-radius:18px 18px 7px 7px; background:linear-gradient(165deg,#fff 0 18%,color-mix(in srgb,var(--soft) 88%,#fff) 80%),repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 3px,transparent 3px 7px); clip-path:polygon(0 0,100% 0,50% 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.9); transform:rotateX(0deg) translateZ(2px); transform-origin:top center; transform-style:preserve-3d; transition:transform .9s .18s cubic-bezier(.42,.02,.2,1),z-index 0s .68s,box-shadow .6s ease; backface-visibility:visible; will-change:transform; }
.graduation-envelope-pocket { position:absolute; z-index:3; inset:0; overflow:hidden; border:2px solid color-mix(in srgb,var(--main) 48%,#fff); border-radius:18px; background:linear-gradient(150deg,color-mix(in srgb,var(--soft) 92%,#fff),#fff); clip-path:polygon(0 33%,50% 72%,100% 33%,100% 100%,0 100%); transform:translateY(0); transition:transform .55s .52s cubic-bezier(.2,.8,.3,1),filter .55s .52s ease; }
.graduation-envelope-pocket::after { content:''; position:absolute; inset:33% 0 0; background:linear-gradient(35deg,color-mix(in srgb,var(--main) 12%,transparent) 0 49%,transparent 50%),linear-gradient(-35deg,color-mix(in srgb,var(--accent) 12%,transparent) 0 49%,transparent 50%); }
.graduation-envelope-seal { position:absolute; z-index:5; top:42%; left:50%; display:grid; width:54px; height:54px; place-items:center; border:3px solid #fff; border-radius:50%; background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--main) 70%,#fff),var(--main) 46%,color-mix(in srgb,var(--main) 68%,#7f244a)); color:#fff; box-shadow:0 7px 14px color-mix(in srgb,var(--main) 28%,transparent),inset 0 2px 3px rgba(255,255,255,.4),inset 0 -4px 7px rgba(74,23,50,.2); font-size:1.45rem; transform:translate(-50%,-50%) rotate(-7deg); transform-origin:center; will-change:transform,opacity; }
.graduation-intro-hint { display:inline-flex; align-items:center; gap:.45rem; min-height:40px; padding:.48rem .9rem; border:1px solid color-mix(in srgb,var(--line) 72%,#fff); border-radius:999px; background:rgba(255,255,255,.82); box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 12%,transparent); color:var(--main); font-size:.84rem; font-weight:900; animation:introHintPulse 1.8s ease-in-out infinite; backdrop-filter:blur(8px); }
.graduation-intro-skip { position:absolute; z-index:8; top:clamp(.75rem,2vw,1.3rem); right:clamp(.75rem,2vw,1.3rem); min-height:38px; padding:.42rem .82rem; border:1px solid color-mix(in srgb,var(--line) 65%,#fff); border-radius:999px; background:color-mix(in srgb,#fff 85%,transparent); color:var(--muted); font-size:.78rem; font-weight:900; box-shadow:0 7px 17px color-mix(in srgb,var(--accent) 10%,transparent); }
.graduation-intro-skip:hover { border-color:var(--main); color:var(--main); transform:translateY(-1px); }
.graduation-intro-skip:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 76%,#fff); outline-offset:3px; }
.graduation-intro-mascot { position:absolute; z-index:-1; bottom:2.4rem; display:none; width:clamp(70px,14vw,105px); filter:drop-shadow(0 9px 8px rgba(49,56,78,.18)); opacity:.88; }
.graduation-intro-mascot.mascot-kitty { left:-2rem; transform:rotate(-8deg); }
.graduation-intro-mascot.mascot-babibuu { right:-2rem; transform:rotate(8deg); }
body.theme-kitty .graduation-intro-mascot.mascot-kitty,body.theme-babibuu .graduation-intro-mascot.mascot-babibuu,body.theme-mix .graduation-intro-mascot { display:block; }
.graduation-intro.is-open .graduation-envelope { animation:introEnvelopeLift 1.45s cubic-bezier(.2,.75,.2,1) both; }
.graduation-intro.is-open .graduation-envelope::after { opacity:.25; transform:scaleX(1.08); }
.graduation-intro.is-open .graduation-envelope-flap { z-index:1; box-shadow:inset 0 -10px 25px color-mix(in srgb,var(--main) 9%,transparent); transform:rotateX(178deg) translateZ(2px); }
.graduation-intro.is-open .graduation-envelope-pocket { filter:brightness(.99); transform:translateY(3px) scaleY(.985); }
.graduation-intro.is-open .graduation-envelope-seal { animation:introSealRelease .58s .08s cubic-bezier(.18,.82,.28,1) forwards; }
.graduation-intro.is-open .graduation-card { z-index:4; box-shadow:0 30px 48px rgba(54,50,75,.22),inset 0 0 0 5px rgba(255,255,255,.72); animation:introCardExtract 2.15s .68s cubic-bezier(.2,.72,.18,1) both; }
.graduation-intro.is-open .graduation-card-cap,.graduation-intro.is-open .graduation-card strong { opacity:1; transform:translateY(0) scale(1); }
.graduation-intro.is-open .graduation-card small,.graduation-intro.is-open .graduation-card-doodle { opacity:1; }
.graduation-intro.is-open .graduation-intro-hint { opacity:0; transform:translateY(7px); animation:none; }
.graduation-fireworks,.graduation-confetti { position:absolute; inset:0; pointer-events:none; }
.graduation-firework { position:absolute; display:block; width:8px; height:8px; opacity:0; }
.firework-one { top:23%; left:18%; }
.firework-two { top:18%; right:18%; }
.firework-three { right:11%; bottom:22%; }
.graduation-firework i { position:absolute; top:50%; left:50%; display:block; width:4px; height:clamp(34px,6vw,62px); border-radius:99px; background:linear-gradient(var(--accent),transparent); transform-origin:50% 0; transform:rotate(calc(var(--ray) * 45deg)) translateY(8px) scaleY(.12); }
.graduation-firework i:nth-child(1) { --ray:0; }.graduation-firework i:nth-child(2) { --ray:1; }.graduation-firework i:nth-child(3) { --ray:2; }.graduation-firework i:nth-child(4) { --ray:3; }.graduation-firework i:nth-child(5) { --ray:4; }.graduation-firework i:nth-child(6) { --ray:5; }.graduation-firework i:nth-child(7) { --ray:6; }.graduation-firework i:nth-child(8) { --ray:7; }
.graduation-intro.is-open .graduation-firework { animation:introFireworkFlash 1.25s 2.45s ease-out both; }
.graduation-intro.is-open .firework-two { animation-delay:2.85s; }
.graduation-intro.is-open .firework-three { animation-delay:3.25s; }
.graduation-intro.is-open .graduation-firework i { animation:introFireworkRay 1.25s 2.45s ease-out both; }
.graduation-intro.is-open .firework-two i { animation-delay:2.85s; background:linear-gradient(var(--main),transparent); }
.graduation-intro.is-open .firework-three i { animation-delay:3.25s; background:linear-gradient(#ffd45c,transparent); }
.graduation-confetti i { position:absolute; top:-8%; left:var(--confetti-x); width:8px; height:15px; border-radius:3px; background:var(--confetti-color); opacity:0; animation:introConfettiFall var(--confetti-duration) calc(2.1s + var(--confetti-delay)) cubic-bezier(.18,.74,.3,1) both; }
@keyframes introHintPulse { 50% { transform:translateY(-4px); box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 17%,transparent); } }
@keyframes introEnvelopeLift { 0% { transform:translateY(0) rotate(-.4deg) scale(1); } 24% { transform:translateY(-9px) rotate(.7deg) scale(1.012); } 52% { transform:translateY(-13px) rotate(-.35deg) scale(1.012); } 100% { transform:translateY(-7px) rotate(0deg) scale(1); } }
@keyframes introSealRelease { 0% { opacity:1; transform:translate(-50%,-50%) rotate(-7deg) scale(1); } 30% { opacity:1; transform:translate(-50%,-56%) rotate(4deg) scale(1.12); } 100% { opacity:0; transform:translate(-50%,-95%) rotate(30deg) scale(.42); } }
@keyframes introCardExtract { 0% { clip-path:inset(0 0 82% 0 round 17px); opacity:0; transform:translateY(50%) scale(.93) rotate(-.35deg); } 9% { clip-path:inset(0 0 80% 0 round 17px); opacity:1; transform:translateY(45%) scale(.94) rotate(-.25deg); } 38% { clip-path:inset(0 0 52% 0 round 17px); opacity:1; transform:translateY(14%) scale(.965) rotate(-.1deg); } 68% { clip-path:inset(0 0 14% 0 round 17px); opacity:1; transform:translateY(-23%) scale(.99) rotate(.05deg); } 88% { clip-path:inset(0 0 0 0 round 17px); opacity:1; transform:translateY(-35%) scale(1.006) rotate(.22deg); } 100% { clip-path:inset(0 0 0 0 round 17px); opacity:1; transform:translateY(-33%) scale(1) rotate(.18deg); } }
@keyframes introFireworkFlash { 0% { opacity:0; transform:scale(.2); } 22% { opacity:1; } 100% { opacity:0; transform:scale(1.25); } }
@keyframes introFireworkRay { 0% { opacity:0; transform:rotate(calc(var(--ray) * 45deg)) translateY(5px) scaleY(.08); } 28% { opacity:1; } 100% { opacity:0; transform:rotate(calc(var(--ray) * 45deg)) translateY(16px) scaleY(1); } }
@keyframes introConfettiFall { 0% { opacity:0; transform:translate3d(0,-4vh,0) rotate(0deg); } 12% { opacity:1; } 100% { opacity:0; transform:translate3d(0,112vh,0) rotate(var(--confetti-turn)); } }
@media (max-width:560px) {
  .graduation-intro { padding-top:3.5rem; }
  .graduation-intro-kicker { margin-bottom:.8rem; }
  .graduation-letter { gap:1rem; }
  .graduation-envelope { width:min(350px,86vw); }
  .graduation-card { right:6%; left:6%; }
  .graduation-intro-mascot { bottom:1.7rem; width:67px; opacity:.72; }
  .graduation-intro-mascot.mascot-kitty { left:-.7rem; }
  .graduation-intro-mascot.mascot-babibuu { right:-.7rem; }
  .firework-one { left:7%; }
  .firework-two { right:7%; }
  .firework-three { right:4%; bottom:17%; }
}
@media (prefers-reduced-motion:reduce) {
  .graduation-intro-stage { opacity:1; transform:none; }
  .graduation-intro-hint { animation:none; }
  .graduation-intro.is-open .graduation-envelope { animation:none; transform:none; }
  .graduation-intro.is-open .graduation-envelope-flap { display:none; }
  .graduation-intro.is-open .graduation-card { animation:none; clip-path:none; opacity:1; transform:translateY(-22%) scale(1); }
  .graduation-fireworks,.graduation-confetti { display:none; }
}