/* Design "Terasa" (terasa.js): a sunny rooftop aisle under an arch of blush and ivory roses, blush chiffon and gold
   (photos and video from Higgsfield, dizajn/terasa/ and dizajn/uvodi/prolaz.*). Active when <html data-dizajn="terasa">.
   The first screen is the last frame of the intro video (the couple under the arch), centred and covering like the
   video, so the invitation is simply there when it ends; the names rise onto the empty aisle. */
:root[data-dizajn="terasa"],.te-uvod{
  --te-roza:#b47b78; --te-roza2:#d9a9a5; --te-puder:#f4dcd8; --te-krem:#fdf8f3; --te-tekst:#4a3734; --te-sivo:#8a716c; --te-zlato:#b48a45;
  --te-foil:linear-gradient(100deg,#8a6526 0%,#c9a457 22%,#efd9a0 36%,#b8913f 52%,#8a6526 70%,#d6b46c 88%,#94702f 100%);
  --acc:var(--te-roza); --ink:var(--te-tekst); --muted:var(--te-sivo); --line:rgba(180,123,120,.22); --on-acc:#fff; --gold:var(--te-zlato);
}
:root[data-dizajn="terasa"] body{background:var(--te-krem);color:var(--te-tekst)}
/* Soft blush light behind the page, still while it scrolls */
:root[data-dizajn="terasa"] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 60% at 0% 0%,rgba(244,220,216,.9),transparent 60%),radial-gradient(120% 60% at 100% 100%,rgba(244,220,216,.85),transparent 60%),linear-gradient(#fdf8f3,#fbf1ec)}
:root[data-dizajn="terasa"] .wrap{max-width:none;padding:0;gap:0;position:relative;z-index:1;overflow-x:clip}
:root[data-dizajn="terasa"] .env,:root[data-dizajn="terasa"] .hint{display:none}
:root[data-dizajn="terasa"] .vrh{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:0;right:0;z-index:30}
:root[data-dizajn="terasa"] .oznaka,:root[data-dizajn="terasa"] .jezik{background:rgba(253,248,243,.8);border-color:rgba(180,123,120,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root[data-dizajn="terasa"] main > section:not(.te-hero),:root[data-dizajn="terasa"] main > footer{max-width:460px;margin:0 auto;width:calc(100% - 32px)}
/* Every section is a blush-white card with a hairline gold border */
:root[data-dizajn="terasa"] main > section:not(.te-hero):not(#muzika){background:none;border:0;border-radius:0;box-shadow:none;padding:64px 8px 20px;margin-top:0;text-align:center}
:root[data-dizajn="terasa"] h2{font-family:"Bodoni Moda",var(--f-head);font-weight:400;font-size:clamp(24px,7vw,30px);letter-spacing:.16em;text-transform:uppercase;color:var(--te-roza);margin:0 0 28px;line-height:1.2;padding-left:.16em;
  padding-bottom:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M8 12h34M78 12h34' stroke='%23b48a45' stroke-width='.7'/%3E%3Cellipse cx='48' cy='10' rx='7' ry='3' transform='rotate(-20 48 10)' fill='%239fae8c'/%3E%3Cellipse cx='72' cy='10' rx='7' ry='3' transform='rotate(20 72 10)' fill='%239fae8c'/%3E%3Ccircle cx='60' cy='12' r='7' fill='%23eebfba'/%3E%3Cpath d='M56 13a4 4 0 1 1 7 2' fill='none' stroke='%23c68681' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='51' cy='16' r='3.4' fill='%23fbf3ea'/%3E%3Ccircle cx='69' cy='16' r='3.4' fill='%23fbf3ea'/%3E%3C/svg%3E") center bottom/120px 24px no-repeat}
:root[data-dizajn="terasa"] h2 small{font-family:var(--f-script);font-size:30px;letter-spacing:0;text-transform:none;color:var(--te-zlato);font-weight:400;margin-bottom:2px}
:root[data-pismo="cirilica"][data-dizajn="terasa"] h2{font-family:var(--f-head)}

/* ---------- Intro without the video: the couple at the start of the aisle ---------- */
.te-uvod{position:fixed;inset:0;z-index:50;overflow:hidden;cursor:pointer;background:#f3e6dc url(/dizajn/uvodi/prolaz.jpg) center/cover;transition:opacity 1.1s ease .5s,transform 2s cubic-bezier(.4,.1,.2,1)}
.te-uvod-hint{position:absolute;left:0;right:0;bottom:calc(8% + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(90,40,40,.55);animation:te-puls 2.4s ease-in-out infinite}
@keyframes te-puls{50%{opacity:.4}}
.te-uvod.otvara{transform:scale(1.15);opacity:0;pointer-events:none}
.te-uvod.otvara .te-uvod-hint{opacity:0;animation:none}

/* ---------- First screen: the couple under the arch, the names on the aisle ---------- */
.te-ekrani{position:relative;z-index:1}
:root[data-dizajn="terasa"] .te-hero{position:relative;height:100svh;min-height:560px;max-width:620px;margin:0 auto;padding:0;overflow:hidden;background:#f3e6dc url(/dizajn/terasa/hero-zum.jpg) center/cover no-repeat}
/* A light veil over the aisle so the text reads on the sunlit tiles */
.te-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(rgba(253,248,243,0),rgba(253,248,243,.55) 38%,rgba(253,248,243,.78));pointer-events:none}
.te-tekst{position:absolute;left:18px;right:18px;bottom:calc(7svh + env(safe-area-inset-bottom,0px));z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--te-tekst)}
.te-mali{margin:0;font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#7a5a55;line-height:1.8;padding-left:.26em;text-wrap:balance}
.te-imena{margin:6px 0 4px;display:flex;flex-direction:column;align-items:center;width:100%;font-family:var(--f-script);font-weight:400;font-size:clamp(56px,17vw,86px);line-height:.98;color:var(--te-roza);text-shadow:0 0 18px rgba(255,250,245,.9),0 0 2px rgba(255,250,245,.8)}
.te-imena > span{white-space:nowrap;padding:0 .12em}
.te-imena .te-i{font-family:"Bodoni Moda",var(--f-head);font-style:italic;font-size:.4em;line-height:1.2;background:var(--te-foil);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.te-imena .te-i:empty{display:none}
.te-crta{display:block;width:120px;height:12px;margin:12px 0 10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Cpath d='M0 6h30M50 6h30' stroke='%23b48a45' stroke-width='.8'/%3E%3Ccircle cx='40' cy='6' r='3.2' fill='%23d9a9a5'/%3E%3Ccircle cx='34' cy='6' r='1.6' fill='%23b48a45'/%3E%3Ccircle cx='46' cy='6' r='1.6' fill='%23b48a45'/%3E%3C/svg%3E") center/contain no-repeat}
.te-datum{margin:0;font-family:"Bodoni Moda",var(--f-head);font-size:clamp(22px,6.6vw,30px);letter-spacing:.06em;color:var(--te-tekst);font-variant-numeric:lining-nums}
.te-sat{margin-top:4px}
.te-mjesto{margin-top:6px;color:var(--te-roza)}
.te-dole{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:1;width:1px;height:28px;background:linear-gradient(var(--te-zlato),transparent);animation:te-dole 2.2s ease-in-out infinite}
@keyframes te-dole{50%{transform:translateY(6px);opacity:.4}}
/* The names rise onto the aisle line by line once the video has ended */
:root[data-dizajn="terasa"] .te-tekst > *{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity 1.2s ease,transform 1.3s cubic-bezier(.2,.7,.2,1),filter 1.2s ease}
:root[data-dizajn="terasa"].otvoreno .te-tekst > *{opacity:1;transform:none;filter:none}
.te-tekst > :nth-child(1){transition-delay:.3s!important}.te-tekst > :nth-child(2){transition-delay:.6s!important}.te-tekst > :nth-child(3){transition-delay:1s!important}
.te-tekst > :nth-child(4){transition-delay:1.2s!important}.te-tekst > :nth-child(5){transition-delay:1.35s!important}.te-tekst > :nth-child(6){transition-delay:1.5s!important}

/* ---------- The couple in an arch ---------- */
:root[data-dizajn="terasa"] .te-foto-ekran{padding:70px 24px 10px;max-width:460px;margin:0 auto;text-align:center;background:none;border:0;border-radius:0;box-shadow:none}
.te-foto{position:relative;margin:0 auto;width:min(82vw,350px);aspect-ratio:4/5.4;border-radius:999px 999px 18px 18px}
.te-foto::before{content:"";position:absolute;inset:-12px;border:1px solid rgba(180,138,69,.4);border-radius:999px 999px 24px 24px;pointer-events:none}
/* The photo melts into the page: soft, blurred edges instead of a white frame */
.te-foto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:999px 999px 18px 18px;-webkit-mask:radial-gradient(ellipse 58% 60% at 50% 46%,#000 52%,rgba(0,0,0,.6) 76%,transparent 100%);mask:radial-gradient(ellipse 58% 60% at 50% 46%,#000 52%,rgba(0,0,0,.6) 76%,transparent 100%)}
.te-foto img.cb{filter:grayscale(1)}
/* The countdown across the full width, over a soft blurred piece of the arch, thin numerals between gold lines */
:root[data-dizajn="terasa"] #te-foto-ekran #odbrojavanje{position:relative;width:100vw;margin:54px 0 0 calc(50% - 50vw);padding:40px 12px 34px;overflow:hidden;isolation:isolate}
:root[data-dizajn="terasa"] #te-foto-ekran #odbrojavanje::before{content:"";position:absolute;inset:-24px;z-index:-2;background:url(/dizajn/terasa/hero-zum.jpg) center 22%/cover;filter:blur(7px) saturate(.9)}
:root[data-dizajn="terasa"] #te-foto-ekran #odbrojavanje::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(253,248,243,.62),rgba(253,248,243,.5) 50%,rgba(253,248,243,.68));box-shadow:inset 0 1px 0 rgba(180,138,69,.4),inset 0 -1px 0 rgba(180,138,69,.4)}
:root[data-dizajn="terasa"] #odbrojavanje .count-l{color:var(--te-tekst);letter-spacing:.32em;font-size:11px}
:root[data-dizajn="terasa"] #odbrojavanje .count{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:420px;margin:14px auto 0}
:root[data-dizajn="terasa"] #odbrojavanje .count > div{background:none;border:0;border-left:1px solid rgba(180,138,69,.55);border-radius:0;box-shadow:none;padding:2px 0;display:flex;flex-direction:column;align-items:center}
:root[data-dizajn="terasa"] #odbrojavanje .count > div:first-child{border-left:0}
:root[data-dizajn="terasa"] #odbrojavanje .count b{font-family:"Bodoni Moda",var(--f-head);font-weight:400;font-size:clamp(34px,10.5vw,46px);line-height:1.05;color:var(--te-tekst);font-variant-numeric:lining-nums}
:root[data-dizajn="terasa"] #odbrojavanje .count span{font-family:var(--f-script);font-size:22px;letter-spacing:0;text-transform:none;color:var(--te-roza);margin-top:2px}

/* ---------- The welcome text in an arch window with roses on top ---------- */
.te-girlanda-omot,.te-pauza,.te-raz-vrh,.te-kal,.te-rsvp-luk{display:none}
:root[data-dizajn="terasa"] #s-uvod{position:relative;margin:70px auto 0!important;padding:96px 34px 54px!important;max-width:380px!important}
:root[data-dizajn="terasa"] #s-uvod::before,:root[data-dizajn="terasa"] #s-uvod::after{content:"";position:absolute;inset:0;border:1px solid rgba(180,138,69,.6);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none;
  -webkit-mask:linear-gradient(#000 80%,transparent);mask:linear-gradient(#000 80%,transparent)}
:root[data-dizajn="terasa"] #s-uvod::after{inset:9px 9px 0;border-color:rgba(180,138,69,.3)}
:root[data-dizajn="terasa"] #s-uvod::before{background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%)}
:root[data-dizajn="terasa"] .te-girlanda-omot{display:block;position:absolute;left:0;right:0;margin:0 auto;top:-34px;width:min(78%,290px);filter:drop-shadow(0 6px 8px rgba(150,90,85,.15))}
.te-girlanda{display:block;width:100%;height:auto}
:root[data-dizajn="terasa"] #s-uvod .intro{font-size:19px}

/* ---------- Programme: a gold thread down the middle that draws with the scroll, items left and right ---------- */
:root[data-dizajn="terasa"] .prog{position:relative;max-width:420px;margin:0 auto;padding:6px 0;text-align:center}
:root[data-dizajn="terasa"] .prog::before,:root[data-dizajn="terasa"] .prog::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}
:root[data-dizajn="terasa"] .prog::before{background:rgba(180,138,69,.18)}
:root[data-dizajn="terasa"] .prog::after{background:linear-gradient(var(--te-zlato),#e7c777);transform-origin:top;transform:scaleY(var(--p,0))}
:root[data-dizajn="terasa"] .prog li{display:grid;grid-template-columns:1fr 50px 1fr;grid-template-rows:auto auto auto;column-gap:14px;align-items:center;border:0;padding:20px 0;position:relative}
:root[data-dizajn="terasa"] .prog li .pr-ikona{grid-column:2;grid-row:1/4;align-self:center;width:46px;height:54px;padding:12px 11px 10px;margin:0 auto;background:var(--te-krem);border:1px solid rgba(180,138,69,.55);border-radius:999px 999px 8px 8px;color:var(--te-roza);position:relative;z-index:1;box-shadow:0 0 0 5px var(--te-krem)}
:root[data-dizajn="terasa"] .prog li > div{display:contents}
:root[data-dizajn="terasa"] .prog time{grid-row:1;font-family:var(--f-script);font-size:40px;line-height:1;font-weight:400;color:var(--te-roza)}
:root[data-dizajn="terasa"] .prog li > div > b{grid-row:2;margin-top:6px}
:root[data-dizajn="terasa"] .prog li > div > p{grid-row:3;margin-top:4px}
:root[data-dizajn="terasa"] .prog li > .p-karta{grid-row:4;margin-top:6px}
:root[data-dizajn="terasa"] .prog li:nth-child(odd) :is(time,b,p,.p-karta){grid-column:1;text-align:right;justify-self:end}
:root[data-dizajn="terasa"] .prog li:nth-child(even) .p-karta{grid-column:3;justify-self:start}
:root[data-dizajn="terasa"] .prog li:nth-child(even) :is(time,b,p){grid-column:3;text-align:left}
:root[data-dizajn="terasa"] .prog li:nth-child(odd).te-otkrij{transform:translateX(-28px)}
:root[data-dizajn="terasa"] .prog li:nth-child(even).te-otkrij{transform:translateX(28px)}
:root[data-dizajn="terasa"] .prog li.te-otkrij.vidljiv{transform:none}
@media (max-width:359px){
  :root[data-dizajn="terasa"] .prog::before,:root[data-dizajn="terasa"] .prog::after{left:25px}
  :root[data-dizajn="terasa"] .prog li{grid-template-columns:50px 1fr}
  :root[data-dizajn="terasa"] .prog li .pr-ikona{grid-column:1}
  :root[data-dizajn="terasa"] .prog li:nth-child(n) :is(time,b,p){grid-column:2;text-align:left}
}

/* ---------- A full-width photo break before the location ---------- */
:root[data-dizajn="terasa"] .te-pauza{display:flex;align-items:flex-end;justify-content:center;position:relative;width:100vw;margin:70px 0 0 calc(50% - 50vw);height:min(62svh,560px);overflow:hidden;isolation:isolate}
:root[data-dizajn="terasa"] .te-pauza::before{content:"";position:absolute;inset:-60px 0;z-index:-1;background:url(/dizajn/terasa/hero-zum.jpg) center 4%/cover;transform:translateY(var(--y,0px))}
:root[data-dizajn="terasa"] .te-pauza::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--te-krem),rgba(253,248,243,0) 9%,rgba(253,248,243,0) 55%,rgba(253,248,243,.85) 86%,var(--te-krem))}
:root[data-dizajn="terasa"] .te-pauza p{margin:0 0 9%;padding:0 20px;font-family:var(--f-script);font-size:clamp(40px,12vw,58px);line-height:1;color:var(--te-roza);text-align:center;text-shadow:0 0 22px rgba(255,250,245,.95)}

/* ---------- Location as a postcard ---------- */
:root[data-dizajn="terasa"] #lokacija{position:relative;margin:26px auto 0!important;padding:26px 22px 30px!important;background:#fffdfb!important;border:1px solid rgba(180,138,69,.45)!important;box-shadow:0 0 0 6px #fffdfb,0 0 0 7px rgba(180,138,69,.25),0 26px 50px rgba(150,90,85,.14)!important;transform:rotate(-1deg);max-width:400px!important;width:calc(100% - 44px)!important}
:root[data-dizajn="terasa"] .te-raz-vrh{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.te-raz-slika{display:block;width:118px;height:150px;border-radius:999px 999px 6px 6px;background:url(/dizajn/uvodi/prolaz.jpg) center 34%/cover;box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(180,138,69,.5)}
.te-zig{width:96px;height:96px;color:var(--te-zlato);opacity:.85;transform:rotate(12deg);margin:4px 2px 0 0}
:root[data-dizajn="terasa"] #lokacija h2{font-size:clamp(22px,6.6vw,28px)}
:root[data-dizajn="terasa"] #lokacija .btn-o{display:flex;justify-content:center;width:100%;margin-top:12px}
:root[data-dizajn="terasa"] .te-kal{display:flex}
:root[data-dizajn="terasa"] .te-kal[hidden]{display:none}
:root[data-dizajn="terasa"] #lokacija #mapa{background:var(--te-roza);color:#fff;margin-top:20px}

/* ---------- Reply as a card with a scalloped top edge and a little drawn arch ---------- */
:root[data-dizajn="terasa"] #rsvp{position:relative;margin:70px auto 0!important;padding:56px 22px 34px!important;background:#fffdfb!important;max-width:430px!important;width:calc(100% - 32px)!important;box-shadow:0 26px 50px rgba(150,90,85,.12)!important;
  -webkit-mask:radial-gradient(circle 9px at 11px 0,transparent 96%,#000) 0 0/22px 100% repeat-x;mask:radial-gradient(circle 9px at 11px 0,transparent 96%,#000) 0 0/22px 100% repeat-x;border-radius:0 0 22px 22px!important}
:root[data-dizajn="terasa"] .te-rsvp-luk{display:block;width:46px;margin:0 auto 10px;color:var(--te-zlato)}
.te-rsvp-luk svg{display:block;width:100%;height:auto}

/* ---------- Sections ---------- */
:root[data-dizajn="terasa"] .intro{font-family:"Bodoni Moda",var(--f-head);font-style:italic;font-size:18px;line-height:1.75;color:var(--te-tekst)}
:root[data-dizajn="terasa"] .count-l{color:var(--te-sivo);letter-spacing:.3em;font-family:var(--f-body)}
:root[data-dizajn="terasa"] .count{gap:10px;margin-top:12px}
:root[data-dizajn="terasa"] .count > div{background:rgba(255,255,255,.75);border:1px solid rgba(180,138,69,.3);border-radius:16px;padding:12px 0;font-family:"Bodoni Moda",var(--f-head);font-weight:400;font-size:30px;color:var(--te-roza);box-shadow:0 8px 18px rgba(150,90,85,.07)}
:root[data-dizajn="terasa"] .prog b{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700;color:var(--te-roza)}
:root[data-dizajn="terasa"] .prog p{font-family:var(--f-body);font-size:14px;color:var(--te-sivo)}
:root[data-dizajn="terasa"] .p-karta{color:var(--te-roza)}
:root[data-dizajn="terasa"] #adresa{font-family:"Bodoni Moda",var(--f-head);font-size:16px;color:var(--te-tekst)}
:root[data-dizajn="terasa"] .btn-o{border-radius:99px;border-color:var(--te-roza);color:var(--te-roza);letter-spacing:.2em;text-transform:uppercase;font-size:11.5px;font-weight:700;font-family:var(--f-body);padding:12px 24px;background:transparent}
:root[data-dizajn="terasa"] .btn-o:hover{background:var(--te-roza);color:#fff}
.te-dress{display:none}
:root[data-dizajn="terasa"] .te-dress{display:block}
:root[data-dizajn="terasa"] .te-dress[hidden]{display:none}
.te-boje{display:flex;justify-content:center;gap:14px;margin:0 0 16px}
.te-boje{gap:12px;align-items:flex-end}
.te-boje i{width:42px;height:62px;border-radius:999px 999px 6px 6px;border:3px solid #fff;box-shadow:0 0 0 1px rgba(180,138,69,.55),0 10px 18px rgba(150,90,85,.14)}
.te-boje i:nth-child(even){height:54px}
.te-dress p{margin:0;font-family:var(--f-body);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--te-tekst)}
/* Reply: blush pills, the form on the card */
:root[data-dizajn="terasa"] .deadline{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:var(--te-sivo);margin-top:-12px}
:root[data-dizajn="terasa"] .choice{grid-template-columns:1fr;gap:12px}
:root[data-dizajn="terasa"] #rsvp .choice label{border-radius:99px;border-color:var(--te-roza2);color:var(--te-roza);text-align:center;font-family:var(--f-body);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:12px;background:rgba(255,255,255,.6);min-height:52px}
:root[data-dizajn="terasa"] #rsvp .choice input:checked + label{background:linear-gradient(135deg,#d9a9a5,#b47b78);border-color:var(--te-roza);color:#fff;box-shadow:0 8px 20px rgba(180,123,120,.3)}
:root[data-dizajn="terasa"] #rsvp input[type=text],:root[data-dizajn="terasa"] #rsvp select,:root[data-dizajn="terasa"] #rsvp textarea{background:rgba(255,255,255,.7);border:1px solid rgba(180,123,120,.25);border-radius:12px;padding:11px 12px}
:root[data-dizajn="terasa"] #rsvp label,:root[data-dizajn="terasa"] #rsvp .lbl{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;text-align:left;color:var(--te-sivo)}
:root[data-dizajn="terasa"] .step button{background:#fff;border-color:rgba(180,123,120,.3);color:var(--te-roza)}
:root[data-dizajn="terasa"] .submit{border-radius:99px;background:linear-gradient(135deg,#d2ae64,#b08a4a 50%,#94702f)!important;font-family:var(--f-body);letter-spacing:.24em}
:root[data-dizajn="terasa"] .thanks .big{color:var(--te-roza)}
:root[data-dizajn="terasa"] #muzika{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;padding:0;width:auto;max-width:none;margin:0;background:none;border:0;box-shadow:none}
:root[data-dizajn="terasa"] #muzika > div{display:none}
:root[data-dizajn="terasa"] .play{width:48px;height:48px;background:var(--te-roza);box-shadow:0 0 0 3px rgba(253,248,243,.85),0 8px 20px rgba(150,90,85,.35)}
:root[data-dizajn="terasa"] .gal{display:flex;flex-direction:column;gap:18px}
:root[data-dizajn="terasa"] .gal img{border-radius:18px;box-shadow:0 16px 32px rgba(150,90,85,.15)}
/* The end: the drawn rose arch with the monogram */
:root[data-dizajn="terasa"] footer{position:relative;padding:60px 24px 90px;gap:12px}
.te-kraj{display:none}
:root[data-dizajn="terasa"] .te-kraj{display:flex;flex-direction:column;align-items:center;position:relative;color:var(--te-zlato)}
.te-kraj svg{width:110px;height:auto}
.te-kraj b{position:absolute;top:66px;font-family:var(--f-script);font-weight:400;font-size:30px;color:var(--te-roza);white-space:nowrap}
.te-kraj p{margin:14px 0 0;font-family:var(--f-body);font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--te-sivo)}
:root[data-dizajn="terasa"] footer .potpis{font-size:36px;color:var(--te-roza);background:none;-webkit-text-fill-color:currentColor}

/* Rose petals drifting down the page */
.te-latice{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.te-latice[hidden]{display:none}
.te-latice i{position:absolute;top:-30px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#f8dcd8,#e7aeab);opacity:0;animation:te-pada var(--d,14s) linear var(--k,0s) infinite}
:root:not(.otvoreno) .te-latice i{animation-play-state:paused}
@keyframes te-pada{0%{transform:translate(0,0) rotate(var(--r));opacity:0}8%{opacity:.85}50%{transform:translate(var(--x),52vh) rotate(calc(var(--r) + 180deg))}92%{opacity:.7}100%{transform:translate(calc(var(--x) * -.5),106vh) rotate(calc(var(--r) + 360deg));opacity:0}}

/* Every block rises softly into place */
:root[data-dizajn="terasa"] .te-otkrij{opacity:0;transform:translateY(22px);transition:opacity 1s ease var(--kasni,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--kasni,0s)}
:root[data-dizajn="terasa"] .te-otkrij.vidljiv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  :root[data-dizajn="terasa"] .te-otkrij,:root[data-dizajn="terasa"] .te-tekst > *{opacity:1;transform:none;filter:none;transition:none}
  .te-latice{display:none}
  :root[data-dizajn="terasa"] .prog li.te-otkrij{transform:none}
}