/*
 * فایل: styles.css
 * پروژه: دعوت‌نامهٔ تعاملی عروسی سوگل و مسعود
 * کاربرد: تمام ظاهر صفحه، چیدمان موبایل، درِ ورودی، باغ، پنجرهٔ دعوت و انیمیشن‌ها
 * نکته: تصاویر و موسیقی در پوشهٔ assets قرار دارند.
 * حقوق اثر: © 2026 Soroush Soltani — All rights reserved.
 */

:root {
  --hall-image:url('../assets/garden-welcome-v2.webp');
  --door-image:url('../assets/door-entrance.webp');
  --incense-image:url('../assets/incense-attendant.webp');
  --gold:#e5c77f;
  --ivory:#fff7e7;
  --night:#081513;
  --wine:#551f2d;
  --rose:#e59aae;
  --muted:#d8d0bd;
  font-family:Vazirmatn,"IRANSans",Tahoma,system-ui,sans-serif
}

* {
  box-sizing:border-box
}

html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#060c0b;
  color:var(--ivory);
  font-size:16px
}

button,input {
  font:inherit
}

button {
  cursor:pointer;
  color:inherit
}

button:focus-visible,input:focus-visible {
  outline:2px solid #fff0ad;
  outline-offset:3px
}

.experience {
  height:100svh;
  min-height:520px;
  width:100%;
  position:relative;
  overflow:hidden;
  background:#07100f;
  isolation:isolate
}

.hall {
  position:absolute;
  inset:-3%;
  background-image:linear-gradient(180deg,rgba(3,13,11,.15),rgba(3,13,11,.1) 45%,rgba(3,13,11,.52)),var(--hall-image);
  background-size:cover;
  background-position:center 52%;
  transform:scale(1.02);
  filter:brightness(.82);
  transition:transform 2.7s cubic-bezier(.18,.74,.17,1),filter 2s,background-position 2s
}

.experience.entering .hall {
  transform:scale(1.15) translateY(-1.5%);
  filter:brightness(.98)
}

.experience.arrived .hall {
  transform:scale(1.07);
  filter:brightness(.9)
}

.shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,14,11,.42),transparent 35%,rgba(4,13,11,.26) 62%,rgba(4,12,10,.74));
  pointer-events:none
}

.stage-copy {
  position:absolute;
  z-index:4;
  top:max(22px,env(safe-area-inset-top));
  left:0;
  right:0;
  text-align:center;
  padding:12px 18px;
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .9s .7s,transform .9s .7s
}

.arrived .stage-copy {
  opacity:1;
  transform:none
}

.mini-label {
  color:#f3dfaa;
  font-size:.78rem;
  letter-spacing:.12em
}

.stage-copy h1 {
  font-weight:500;
  font-size:clamp(1.55rem,5vw,2.5rem);
  line-height:1.35;
  margin:5px 0;
  text-shadow:0 3px 14px #000
}

.stage-copy p {
  margin:0;
  font-size:.98rem;
  text-shadow:0 2px 9px #000
}

.couple-glow {
  position:absolute;
  left:50%;
  top:46%;
  width:min(45vw,300px);
  height:38vh;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(255,223,148,.12),transparent 72%);
  pointer-events:none;
  opacity:0;
  transition:opacity 2s
}

.arrived .couple-glow {
  opacity:1
}

.lights {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.4s
}

.arrived .lights {
  opacity:1
}

.light {
  position:absolute;
  top:42%;
  width:19px;
  height:42vh;
  filter:blur(22px);
  opacity:.2;
  animation:beam 4s ease-in-out infinite alternate
}

.light.l1 {
  left:25%;
  background:#ff6dca;
  transform:rotate(16deg)
}

.light.l2 {
  left:70%;
  background:#59e0ff;
  transform:rotate(-13deg);
  animation-delay:1s
}

@keyframes beam {
  to {
    transform:translateY(24px) rotate(22deg);
    opacity:.38
  }

}

.door-frame {
  position:absolute;
  inset:0;
  z-index:8;
  perspective:1250px;
  perspective-origin:50% 48%;
  transition:opacity 1.1s 1.4s
}

.door-leaf {
  position:absolute;
  top:0;
  bottom:0;
  width:50.3%;
  background-image:var(--door-image);
  background-repeat:no-repeat;
  background-size:200% 100%;
  backface-visibility:hidden;
  will-change:transform;
  transition:transform 2.1s cubic-bezier(.68,.03,.2,1)
}

.door-leaf.left {
  right:50%;
  transform-origin:0% 50%;
  background-position:left center
}

.door-leaf.right {
  left:50%;
  transform-origin:100% 50%;
  background-position:right center
}

.entering .door-leaf.left {
  transform:rotateY(-104deg)
}

.entering .door-leaf.right {
  transform:rotateY(104deg)
}

.arrived .door-frame {
  opacity:0;
  pointer-events:none
}

.door-greeting {
  position:absolute;
  z-index:9;
  inset:0;
  display:grid;
  align-content:end;
  justify-items:center;
  text-align:center;
  padding:24px 20px max(42px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.17) 64%,rgba(0,0,0,.78));
  transition:opacity .5s
}

.door-greeting h1 {
  font-size:clamp(1.8rem,7vw,3.2rem);
  font-weight:500;
  margin:0 0 4px;
  text-shadow:0 3px 24px #000
}

.door-greeting .names {
  color:#f1d694;
  font-family:Georgia,serif;
  font-size:1.4rem
}

.door-greeting p {
  margin:8px 0 18px;
  color:#fbf5e6
}

.enter-btn {
  border:1px solid #f0d694;
  color:#261d10;
  background:linear-gradient(130deg,#a67a33,#f2da9b 52%,#bc8d3e);
  box-shadow:0 8px 35px #0009;
  padding:12px 29px;
  min-width:218px;
  border-radius:3px;
  font-weight:700;
  transition:transform .2s
}

.enter-btn:hover {
  transform:translateY(-3px)
}

.arrived .door-greeting {
  opacity:0;
  pointer-events:none
}

.brand-stamp {
  position:absolute;
  z-index:10;
  top:max(18px,env(safe-area-inset-top));
  left:18px;
  padding:7px 12px;
  border:1px solid #ecd18b8a;
  background:#07100f65;
  color:#f4dfab;
  border-radius:24px;
  font-size:.8rem;
  opacity:0;
  transition:opacity .5s
}

.arrived .brand-stamp {
  opacity:1
}

.actions {
  position:absolute;
  z-index:6;
  bottom:max(24px,env(safe-area-inset-bottom));
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:clamp(8px,2vw,16px);
  padding:0 12px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s 1.2s,transform .8s 1.2s
}

.arrived .actions {
  opacity:1;
  transform:none
}

.action {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:48px;
  padding:8px 13px;
  border:1px solid #e9cf9580;
  border-radius:3px;
  background:linear-gradient(180deg,#122620dd,#07130fdf);
  box-shadow:0 6px 25px #0006;
  color:#fff6e0;
  font-size:.91rem;
  backdrop-filter:blur(8px);
  transition:background .2s,transform .2s
}

.action:hover {
  background:#59452ccc;
  transform:translateY(-3px)
}

.action .icon {
  font-size:1.15rem
}

.music-toggle {
  position:absolute;
  z-index:11;
  top:max(18px,env(safe-area-inset-top));
  right:18px;
  background:#0b171399;
  border:1px solid #ecd18b7c;
  border-radius:30px;
  padding:8px 13px;
  font-size:.81rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s
}

.arrived .music-toggle {
  opacity:1;
  pointer-events:auto
}

.music-toggle.on {
  background:#74502fcc
}

.modal {
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:20px;
  background:#050908d8;
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s
}

.modal.open {
  opacity:1;
  pointer-events:auto
}

.modal-card {
  width:min(100%,480px);
  max-height:min(88svh,820px);
  overflow:auto;
  position:relative;
  border:1px solid #dfc57d;
  background:linear-gradient(145deg,#10211b,#091510);
  box-shadow:0 18px 65px #000b;
  color:#fff4dc
}

.close {
  position:absolute;
  left:11px;
  top:9px;
  z-index:2;
  width:39px;
  height:39px;
  border:1px solid #d9bf7d90;
  border-radius:50%;
  background:#091410d9;
  color:#f5e4ba;
  font-size:1.2rem
}

.incense-card {
  padding:0 20px 20px;
  text-align:center
}

.incense-image {
  height:min(49svh,430px);
  background-image:linear-gradient(180deg,transparent 60%,#0c1713),var(--incense-image);
  background-size:cover;
  background-position:center 58%;
  position:relative
}

.incense-image:after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 28%,transparent 15%,#07110a44 100%);
  pointer-events:none
}

.smoke {
  position:absolute;
  z-index:1;
  left:45%;
  top:30%;
  font-size:26px;
  color:#fff9;
  filter:blur(2px);
  animation:smokeRise 2.9s ease-in-out infinite
}

@keyframes smokeRise {
  0% {
    transform:translateY(20px) scale(.7);
    opacity:0
  }

  35% {
    opacity:.8
  }

  100% {
    transform:translateY(-70px) translateX(20px) scale(1.55);
    opacity:0
  }

}

.incense-card h2,.scroll-head {
  font-weight:500;
  color:#f0d892
}

.incense-card h2 {
  margin:12px 0 4px
}

.incense-card p {
  margin:4px 10px 14px;
  color:#e1dac7
}

.gold-btn,.submit-btn {
  border:1px solid #eed48f;
  background:linear-gradient(130deg,#a67a33,#f0d995,#b58a3e);
  color:#1d2017;
  padding:10px 19px;
  font-weight:700;
  border-radius:2px
}

.shot-card {
  padding:42px 25px;
  text-align:center;
  overflow:hidden
}

.shot-backdrop {
  position:absolute;
  inset:0;
  background-image:linear-gradient(180deg,#07100d9c,#07100da8),var(--hall-image);
  background-size:cover;
  background-position:center;
  filter:blur(3px);
  transform:scale(1.1)
}

.shot-content {
  position:relative;
  z-index:1
}

.glass {
  font-size:5rem;
  display:block;
  animation:toast 1s ease-in-out infinite alternate;
  filter:drop-shadow(0 9px 16px #0008)
}

@keyframes toast {
  to {
    transform:translateY(-12px) rotate(9deg)
  }

}

.shot-card h2 {
  color:#f1d792;
  font-weight:500
}

.shot-card p {
  color:#fff5de
}

.sip-fade {
  animation:sip 1.1s ease-in-out
}

@keyframes sip {
  50% {
    filter:blur(6px);
    transform:scale(1.04)
  }

}

.scroll-card {
  padding:27px 23px 23px;
  background:linear-gradient(135deg,#f5e7bf,#dac18a 45%,#f2e4bc);
  color:#342815;
  border:7px double #94713a;
  outline:1px solid #f2d68d;
  outline-offset:-12px;
  box-shadow:inset 0 0 35px #805d2b38,0 20px 70px #000a;
  text-align:center
}

.scroll-card .close {
  background:#523f23;
  color:#ffe6ad;
  border-color:#c4a463
}

.scroll-mark {
  font-size:1.6rem;
  color:#876531
}

.scroll-card h2 {
  margin:0;
  font-family:Georgia,serif;
  font-weight:500;
  color:#6a4924
}

.scroll-card>p {
  margin:5px 0 17px;
  color:#644f30;
  font-size:.94rem
}

.code-row {
  display:flex;
  gap:8px
}

.code-row input {
  flex:1;
  min-width:0;
  border:1px solid #8f754b;
  background:#fff9e9;
  padding:11px;
  color:#3b2d1a;
  text-align:center;
  direction:ltr;
  border-radius:2px
}

.code-row .gold-btn {
  padding:9px 15px
}

.error {
  min-height:1.6em;
  color:#912d37;
  font-size:.9rem
}

.guest-panel {
  display:none;
  margin-top:8px;
  padding:15px 13px;
  border-top:1px solid #9a8157;
  border-bottom:1px solid #9a8157;
  text-align:right
}

.guest-panel.show {
  display:block
}

.guest-title {
  text-align:center;
  color:#61491f;
  margin:0 0 2px;
  font-size:1.1rem
}

.allowed-note {
  text-align:center;
  color:#6f572d;
  font-size:.83rem;
  margin:0 0 12px
}

.guest-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 2px;
  border-bottom:1px solid #9a81574d
}

.guest-row:last-of-type {
  border-bottom:0
}

.guest-row label {
  display:flex;
  gap:10px;
  align-items:center
}

.guest-row input {
  accent-color:#85662b;
  width:20px;
  height:20px
}

.child-note {
  margin:13px 0;
  color:#733d42;
  text-align:center;
  font-size:.88rem
}

.submit-btn {
  display:block;
  margin:14px auto 0;
  min-width:180px
}

.demo-code {
  font-size:.78rem;
  color:#796443;
  margin:8px 0 0
}

.result-modal {
  padding:32px 24px;
  text-align:center
}

.petals {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden
}

.petal {
  position:absolute;
  top:-28px;
  color:#f6a9c2;
  font-size:24px;
  animation:petalFall 2.4s ease-in forwards
}

.petal:nth-child(3n) {
  color:#fff0c5;
  font-size:18px
}

.petal:nth-child(odd) {
  animation-duration:2.9s
}

@keyframes petalFall {
  to {
    transform:translateY(110vh) rotate(540deg);
    opacity:0
  }

}

.result-modal h2 {
  color:#f0d892;
  font-weight:500
}

.result-modal p {
  color:#e7ddc9
}

.final {
  position:absolute;
  z-index:15;
  inset:0;
  display:grid;
  align-content:center;
  justify-items:center;
  padding:28px 22px max(30px,env(safe-area-inset-bottom));
  text-align:center;
  background:linear-gradient(180deg,#040a09a8,#07100dbd),var(--hall-image) center/cover;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.1s
}

.final.show {
  opacity:1;
  pointer-events:auto
}

.final h2 {
  font-size:clamp(1.7rem,6vw,2.65rem);
  font-weight:500;
  color:#f3dc9b;
  margin:4px 0
}

.final p {
  color:#fff4dc;
  margin:5px auto 18px;
  max-width:350px
}

.final-detail {
  border-top:1px solid #ecd68f7c;
  border-bottom:1px solid #ecd68f7c;
  padding:11px 14px;
  color:#f5e5bd;
  line-height:2
}

.route-actions {
  display:grid;
  gap:9px;
  width:min(100%,330px);
  margin-top:20px
}

.route-actions button {
  width:100%;
  padding:11px;
  border:1px solid #e6ca8a;
  background:#15251fdd;
  color:#fff2d0;
  border-radius:2px
}

.route-actions button:disabled {
  opacity:.72;
  cursor:default
}

.restart {
  margin-top:16px;
  border:0;
  background:transparent;
  color:#ead7a6;
  text-decoration:underline;
  font-size:.9rem
}

.toast {
  position:absolute;
  z-index:30;
  bottom:max(85px,calc(env(safe-area-inset-bottom) + 75px));
  left:50%;
  transform:translate(-50%,18px);
  opacity:0;
  pointer-events:none;
  padding:10px 15px;
  background:#f1d996;
  color:#222015;
  border-radius:3px;
  white-space:nowrap;
  transition:.3s;
  box-shadow:0 8px 28px #0008;
  font-size:.9rem
}

.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}

.sound-indicator {
  position:absolute;
  z-index:7;
  top:70px;
  left:18px;
  color:#fff4d1;
  font-size:.78rem;
  opacity:0;
  transition:opacity .7s
}

.arrived .sound-indicator {
  opacity:.8
}

@media(min-width:700px) {
  .experience {
    max-width:620px;
    margin:auto;
    border-inline:1px solid #c8a96144;
    box-shadow:0 0 120px #000
  }

  .hall {
    background-position:center 52%
  }

  .actions {
    bottom:30px
  }

  .door-greeting {
    padding-bottom:52px
  }

}

@media(max-width:390px) {
  .action {
    font-size:.8rem;
    padding:8px 9px;
    gap:5px
  }

  .actions {
    gap:6px
  }

  .stage-copy p {
    font-size:.88rem
  }

  .music-toggle {
    top:max(65px,calc(env(safe-area-inset-top) + 55px));
    right:12px
  }

}

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

}

.door-copy {
  position:absolute;
  z-index:11;
  left:50%;
  bottom:max(46px,calc(env(safe-area-inset-bottom) + 26px));
  width:min(88%,520px);
  transform:translateX(-50%);
  text-align:center;
  pointer-events:none;
  text-shadow:0 3px 18px #000,0 1px 5px #000
}

.door-poem {
  margin:0 auto 8px;
  color:#fff8e8;
  font-family:"Noto Nastaliq Urdu","IranNastaliq","Urdu Typesetting",serif;
  font-size:clamp(1.25rem,5vw,2rem);
  font-weight:500;
  line-height:2
}

.door-names {
  margin:0;
  color:#f2d68e;
  font-family:"Noto Nastaliq Urdu","IranNastaliq","Urdu Typesetting",serif;
  font-size:clamp(1.15rem,4.5vw,1.65rem);
  line-height:1.9
}

.entering .door-copy {
  opacity:0;
  transform:translate(-50%,14px);
  transition:opacity .35s,transform .35s
}

.stage-copy h1 {
  max-width:560px;
  margin:5px auto;
  font-family:"Noto Nastaliq Urdu","IranNastaliq","Urdu Typesetting",serif;
  font-size:clamp(1.35rem,4.6vw,2.25rem);
  line-height:1.8
}

.invitation-lead {
  font-family:"Noto Nastaliq Urdu","IranNastaliq","Urdu Typesetting",serif;
  font-size:1.1rem!important;
  line-height:2!important
}

.event-details {
  margin:12px 0 15px;
  padding:12px 10px;
  border-top:1px solid #967847;
  border-bottom:1px solid #967847;
  line-height:2;
  color:#4b351b;
  text-align:center
}

.event-details strong {
  color:#65471f
}

.scroll-actions {
  display:grid;
  gap:8px;
  margin:11px 0
}

.scroll-link {
  display:block;
  width:100%;
  border:1px solid #8f7040;
  background:#fff8e3;
  color:#4d371e;
  padding:10px 12px;
  border-radius:2px;
  text-decoration:none;
  font-weight:700
}

.guest-list {
  display:grid;
  gap:12px;
  margin-top:14px
}

.guest-choice {
  padding:11px;
  border:1px solid #9a815765;
  background:#fff9e7a8;
  text-align:right
}

.guest-choice h4 {
  margin:0 0 8px;
  color:#523919;
  font-size:1rem
}

.choice-options {
  display:grid;
  gap:7px
}

.choice-options label {
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.55;
  color:#4f3b22
}

.choice-options input {
  width:19px;
  height:19px;
  margin-top:2px;
  accent-color:#806129;
  flex:0 0 auto
}

.save-message {
  min-height:1.8em;
  margin:10px 0 0;
  color:#426441;
  font-weight:700;
  line-height:1.7
}

.guest-panel .submit-btn {
  margin-top:12px
}

.scroll-card code {
  direction:ltr
}

.handle-hotspot {
  position:absolute;
  z-index:12;
  left:50%;
  top:55.2%;
  transform:translate(-50%,-50%);
  width:clamp(96px,18vw,150px);
  height:clamp(96px,18vw,150px);
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:#fff2c9;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}

.handle-hotspot:before {
  content:"";
  position:absolute;
  inset:31%;
  border-radius:50%;
  border:2px solid #ffe7a6;
  background:#d7a94e24;
  box-shadow:0 0 18px 7px #e8b95399,inset 0 0 15px #e8b95366;
  animation:handleGlow 3.8s ease-in-out infinite
}

.handle-pulse {
  position:absolute;
  inset:15%;
  border:1px solid #ffe7a6a8;
  border-radius:50%;
  box-shadow:0 0 12px #f0c86255;
  animation:handleRing 3.8s ease-in-out infinite
}

.handle-icon {
  position:relative;
  z-index:1;
  width:27px;
  height:27px;
  color:#ffe7a6;
  filter:drop-shadow(0 0 7px #ffdf8a);
  animation:handleTurn 3.8s ease-in-out infinite;
  transition:width .2s ease,height .2s ease
}

.handle-tip {
  position:absolute;
  top:96%;
  white-space:nowrap;
  padding:7px 14px;
  background:#0d1611e6;
  border:1px solid #e8ca8790;
  border-radius:99px;
  box-shadow:0 6px 20px #0007;
  font-size:13px;
  line-height:1.6;
  color:#fff3d3
}

.handle-hotspot:hover:before,.handle-hotspot:focus-visible:before {
  background:#e9c66a3d;
  box-shadow:0 0 25px 10px #f0c862bb,inset 0 0 18px #f6d77a88
}

.handle-hotspot:focus-visible {
  outline:3px solid #fff2c9;
  outline-offset:5px
}

.handle-hotspot.pressed:before,.handle-hotspot.pressed .handle-pulse,.handle-hotspot.pressed .handle-icon {
  animation-play-state:paused
}

.handle-hotspot.pressed .handle-icon {
  width:28.5px;
  height:28.5px
}

.entering .handle-hotspot {
  opacity:0;
  pointer-events:none;
  transition:opacity .25s
}

@keyframes handleGlow {
  0%,100% {
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 18px 7px #e8b95399,inset 0 0 15px #e8b95366
  }

  50% {
    opacity:.18;
    transform:scale(.94);
    box-shadow:0 0 8px 3px #f0c86233,inset 0 0 8px #e8b95322
  }

}

@keyframes handleTurn {
  0%,100% {
    transform:rotate(0)
  }

  50% {
    transform:rotate(16deg)
  }

}

@keyframes handleRing {
  0%,100% {
    transform:scale(.84);
    opacity:.85
  }

  50% {
    transform:scale(1.12);
    opacity:.12
  }

}

.arrived .door-frame {
  opacity:0;
  pointer-events:none;
  transition:opacity .65s 1.65s
}

.couple-glow {
  animation:softPulse 4s ease-in-out infinite alternate
}

.lights .light {
  animation:twinkle 2.8s ease-in-out infinite alternate
}

.lights .l2 {
  animation-delay:1.2s
}

@keyframes softPulse {
  to {
    opacity:.95;
    filter:brightness(1.18)
  }

}

@keyframes twinkle {
  to {
    opacity:.35;
    transform:scale(.84)
  }

}

.ambient-petals {
  position:absolute;
  z-index:4;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.8s
}

.arrived .ambient-petals {
  opacity:.9
}

.ambient-petals i {
  position:absolute;
  top:-8vh;
  left:var(--x);
  font-style:normal;
  font-size:var(--size);
  color:var(--petal,#ffd8df);
  text-shadow:0 0 10px #fff9;
  animation:petalDrift var(--duration) linear infinite;
  animation-delay:var(--delay)
}

.ambient-petals i:nth-child(1) {
  --x:8%;
  --size:20px;
  --duration:12s;
  --delay:-7s
}

.ambient-petals i:nth-child(2) {
  --x:19%;
  --size:13px;
  --duration:15s;
  --delay:-2s;
  --petal:#ffe7b4
}

.ambient-petals i:nth-child(3) {
  --x:32%;
  --size:17px;
  --duration:13s;
  --delay:-9s
}

.ambient-petals i:nth-child(4) {
  --x:47%;
  --size:14px;
  --duration:16s;
  --delay:-4s;
  --petal:#ffe7b4
}

.ambient-petals i:nth-child(5) {
  --x:58%;
  --size:18px;
  --duration:14s;
  --delay:-11s
}

.ambient-petals i:nth-child(6) {
  --x:68%;
  --size:15px;
  --duration:12s;
  --delay:-5s;
  --petal:#ffe7b4
}

.ambient-petals i:nth-child(7) {
  --x:79%;
  --size:20px;
  --duration:17s;
  --delay:-8s
}

.ambient-petals i:nth-child(8) {
  --x:91%;
  --size:14px;
  --duration:13s;
  --delay:-3s;
  --petal:#ffe7b4
}

.ambient-petals i:nth-child(9) {
  --x:39%;
  --size:12px;
  --duration:18s;
  --delay:-12s
}

.ambient-petals i:nth-child(10) {
  --x:73%;
  --size:16px;
  --duration:15s;
  --delay:-6s
}

@keyframes petalDrift {
  0% {
    transform:translate3d(0,-12vh,0) rotate(0);
    opacity:0
  }

  12% {
    opacity:.8
  }

  50% {
    transform:translate3d(28px,55vh,0) rotate(180deg)
  }

  88% {
    opacity:.5
  }

  100% {
    transform:translate3d(-20px,115vh,0) rotate(360deg);
    opacity:0
  }

}

@media(prefers-reduced-motion:reduce) {
  .ambient-petals i,.handle-hotspot:before,.handle-pulse,.handle-tip {
    animation-duration:3s
  }

  .entering .door-leaf {
    transition-duration:1s
  }

}

/* Immersive garden and interactive welcome */
.experience.entering .hall {
  transform:scale(1.48) translateY(-4%);
  filter:brightness(1.15);
  transition:transform 2.4s cubic-bezier(.2,.74,.12,1),filter 1.2s
}

.arrived .hall {
  animation:gardenBreath 19s ease-in-out infinite alternate
}

@keyframes gardenBreath {
  0% {
    transform:scale(1.065) translateY(0);
    background-position:center 50%;
    filter:brightness(.9)
  }

  100% {
    transform:scale(1.105) translateY(-.4%);
    background-position:center 53%;
    filter:brightness(.98)
  }

}

.live-smoke {
  position:absolute;
  z-index:5;
  left:15%;
  top:55%;
  width:84px;
  height:118px;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s
}

.arrived .live-smoke {
  opacity:.82
}

.live-smoke i {
  position:absolute;
  bottom:0;
  left:var(--sx);
  width:22px;
  height:48px;
  border-radius:50%;
  background:radial-gradient(ellipse at bottom,#fffbdc99 0, #fff7e455 30%,transparent 72%);
  filter:blur(6px);
  animation:spandSmoke var(--sd) ease-in-out infinite;
  animation-delay:var(--delay)
}

.live-smoke i:nth-child(1) {
  --sx:15px;
  --sd:3.2s;
  --delay:-1s
}

.live-smoke i:nth-child(2) {
  --sx:38px;
  --sd:4.1s;
  --delay:-2.7s
}

.live-smoke i:nth-child(3) {
  --sx:5px;
  --sd:3.7s;
  --delay:-.5s
}

.live-smoke i:nth-child(4) {
  --sx:50px;
  --sd:4.7s;
  --delay:-3.2s
}

.live-smoke i:nth-child(5) {
  --sx:28px;
  --sd:3.4s;
  --delay:-1.9s
}

@keyframes spandSmoke {
  0% {
    transform:translate3d(0,20px,0) scale(.45);
    opacity:0
  }

  22% {
    opacity:.8
  }

  65% {
    transform:translate3d(12px,-50px,0) scale(1.25);
    opacity:.4
  }

  100% {
    transform:translate3d(-10px,-100px,0) scale(1.6);
    opacity:0
  }

}

.incense-live .live-smoke {
  opacity:1
}

.incense-live .live-smoke i {
  animation-duration:1.7s!important
}

.fountain-ripple {
  position:absolute;
  z-index:3;
  left:50%;
  top:42%;
  width:110px;
  height:60px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity 1s
}

.arrived .fountain-ripple {
  opacity:.7
}

.fountain-ripple i {
  position:absolute;
  inset:20% 15%;
  border:1px solid #e6dcff77;
  border-radius:50%;
  animation:ripple 3.4s ease-out infinite
}

.fountain-ripple i:nth-child(2) {
  animation-delay:1.1s
}

.fountain-ripple i:nth-child(3) {
  animation-delay:2.2s
}

@keyframes ripple {
  0% {
    transform:scale(.35);
    opacity:0
  }

  20% {
    opacity:.7
  }

  100% {
    transform:scale(1.7);
    opacity:0
  }

}

.welcome-bubble {
  position:absolute;
  z-index:6;
  left:50%;
  top:27%;
  transform:translate(-50%,10px);
  max-width:86%;
  padding:9px 16px;
  border:1px solid #f5dfaa9c;
  border-radius:24px;
  background:#0b1713b8;
  box-shadow:0 8px 26px #0005;
  color:#fff3d4;
  text-align:center;
  font-size:clamp(.8rem,3vw,.98rem);
  opacity:0;
  pointer-events:none;
  transition:opacity .7s,transform .7s
}

.arrived .welcome-bubble {
  opacity:1;
  transform:translate(-50%,0)
}

.welcome-bubble.change {
  animation:bubbleChange .5s ease
}

@keyframes bubbleChange {
  50% {
    opacity:.15;
    transform:translate(-50%,6px)
  }

}

.scene-hotspot {
  position:absolute;
  z-index:7;
  display:grid;
  place-items:center;
  gap:1px;
  width:60px;
  height:60px;
  padding:5px;
  border:1px solid #f7e5ba;
  border-radius:50%;
  background:#07140dc4;
  color:#fff3d4;
  box-shadow:0 0 0 5px #f8dfab2b,0 0 22px #f3cf7d99;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:scale(.75);
  transition:opacity .8s 1s,transform .65s 1s;
  animation:hotspotPulse 2.3s ease-in-out infinite
}

.scene-hotspot span {
  font-size:22px;
  line-height:1
}

.scene-hotspot small {
  font-size:9px;
  white-space:nowrap
}

.arrived .scene-hotspot {
  opacity:.94;
  pointer-events:auto;
  transform:scale(1)
}

.scene-hotspot:hover,.scene-hotspot:focus-visible {
  outline:2px solid #fff2c9;
  outline-offset:4px;
  transform:scale(1.09)
}

.incense-spot {
  left:8%;
  top:62%
}

.drink-spot {
  right:8%;
  top:51%
}

.guest-spot {
  right:19%;
  top:64%
}

@keyframes hotspotPulse {
  50% {
    box-shadow:0 0 0 10px #f8dfab0a,0 0 27px #f3cf7ddd
  }

}

.walking-in .hall {
  transform:scale(1.28) translateY(-2%)!important;
  filter:brightness(.62)!important;
  transition:transform 1.5s cubic-bezier(.18,.75,.18,1),filter 1s
}

.walking-in .actions,.walking-in .stage-copy,.walking-in .scene-hotspot {
  opacity:0;
  transition:opacity .5s
}

.walking-in .ambient-petals {
  opacity:1
}

.result-modal {
  position:relative
}

.result-modal .petal {
  filter:drop-shadow(0 2px 3px #ad5276)
}

@media(max-width:430px) {
  .incense-spot {
    left:5%;
    top:59%
  }

  .drink-spot {
    right:5%;
    top:49%
  }

  .guest-spot {
    right:17%;
    top:65%
  }

  .live-smoke {
    left:10%;
    top:53%;
    transform:scale(.82);
    transform-origin:bottom left
  }

  .welcome-bubble {
    top:25%;
    max-width:90%
  }

}

.experience.entering.arrived .hall {
  animation:gardenBreath 19s ease-in-out infinite alternate
}

.experience.entering.arrived .door-frame {
  pointer-events:none
}

@media(prefers-reduced-motion:reduce) {
  .experience.entering .hall,.arrived .hall {
    animation:none!important;
    transition:none!important
  }

  .ambient-petals i,.live-smoke i,.fountain-ripple i,.scene-hotspot,.welcome-bubble {
    animation:none!important
  }

}

/* Clean second screen: full composition with only two interactive markers */
.arrived .hall {
  inset:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  filter:brightness(.96);
  animation:gardenFullFrame 16s ease-in-out infinite alternate!important
}

.experience.entering.arrived .hall {
  animation:gardenFullFrame 16s ease-in-out infinite alternate!important
}

@keyframes gardenFullFrame {
  0% {
    transform:scale(1);
    filter:brightness(.94)
  }

  100% {
    transform:scale(1.012);
    filter:brightness(1)
  }

}

.arrived .shade {
  background:linear-gradient(180deg,rgba(0,0,0,.04),transparent 72%,rgba(0,0,0,.16))
}

.arrived .ambient-petals,.arrived .couple-glow,.arrived .lights,.arrived .fountain-ripple {
  display:none
}

.music-toggle {
  width:38px;
  height:38px;
  top:max(14px,env(safe-area-inset-top));
  right:14px;
  padding:7px;
  border:0!important;
  background:transparent!important;
  color:#fff;
  border-radius:50%;
  box-shadow:none;
  display:grid;
  place-items:center
}

.music-toggle svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.music-toggle .mute-slash {
  opacity:1;
  transition:opacity .25s
}

.music-toggle.on .mute-slash {
  opacity:0
}

.arrived .music-toggle {
  opacity:.2
}

.music-toggle:hover,.music-toggle:focus-visible {
  opacity:.85!important;
  outline:1px solid #ffffff99;
  outline-offset:2px
}

.scene-hotspot {
  width:76px;
  height:76px;
  padding:7px;
  border:1.5px solid #ffe4a9;
  border-radius:50%;
  background:rgba(5,14,11,.38);
  color:#fff4d5;
  box-shadow:0 0 0 5px rgba(255,226,163,.09),0 0 22px rgba(255,211,118,.72),inset 0 0 18px rgba(255,224,153,.12);
  backdrop-filter:blur(2px);
  animation:markerGlow 3.2s ease-in-out infinite
}

.scene-hotspot span {
  font-size:27px
}

.scene-hotspot small {
  position:absolute;
  top:calc(100% + 8px);
  font-size:12px;
  line-height:1.6;
  color:#fff9e9;
  text-shadow:0 2px 7px #000,0 0 12px #000;
  white-space:nowrap
}

.incense-spot {
  left:12%;
  top:52%
}

.guest-spot {
  right:10%;
  top:48%
}

@keyframes markerGlow {
  0%,100% {
    opacity:.82;
    box-shadow:0 0 0 4px rgba(255,226,163,.07),0 0 14px rgba(255,211,118,.48),inset 0 0 13px rgba(255,224,153,.09)
  }

  50% {
    opacity:1;
    transform:scale(1.055);
    box-shadow:0 0 0 9px rgba(255,226,163,.12),0 0 32px rgba(255,211,118,.95),inset 0 0 22px rgba(255,224,153,.18)
  }

}

.live-smoke {
  left:11%;
  top:43%;
  transform:scale(.58);
  transform-origin:bottom center
}

.arrived .live-smoke {
  opacity:.36
}

.incense-live .live-smoke {
  opacity:.95;
  transform:scale(.88);
  transition:opacity .35s,transform .55s
}

.incense-message {
  position:absolute;
  z-index:8;
  left:50%;
  top:30%;
  transform:translate(-135%,0);
  opacity:0;
  pointer-events:none;
  padding:8px 18px;
  color:#fff7df;
  font-family:"Noto Nastaliq Urdu","IranNastaliq","Urdu Typesetting",serif;
  font-size:clamp(1.15rem,4.5vw,1.7rem);
  line-height:1.8;
  text-shadow:0 2px 12px #000;
  background:rgba(7,17,13,.48);
  border:1px solid rgba(246,216,147,.5);
  border-radius:30px;
  white-space:nowrap
}

.incense-message.show {
  animation:incenseLine 2.5s ease both
}

@keyframes incenseLine {
  0% {
    opacity:0;
    transform:translate(-135%,0)
  }

  22%,70% {
    opacity:1;
    transform:translate(-50%,0)
  }

  100% {
    opacity:0;
    transform:translate(45%,0)
  }

}

@media(max-width:430px) {
  .incense-spot {
    left:11%;
    top:53%
  }

  .guest-spot {
    right:9%;
    top:49%
  }

  .live-smoke {
    left:8%;
    top:45%
  }

}

:root {
  --hall-image:url('../assets/garden-welcome-v5.webp')
}

.hall-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:opacity .45s ease;
  background:#07100f
}

.arrived .hall-art {
  opacity:1
}

.arrived .hall {
  opacity:0
}

.hall-art {
  display:none
}

.hall-art-v4 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:0;
  pointer-events:none;
  z-index:0;
  background:#07100f
}

.arrived .hall-art-v4 {
  opacity:1
}

/* Stable second scene: one image only, with no zoomed fallback frame */
.hall {
  display:none!important
}

.hall-art-v4 {
  opacity:1!important;
  transition:none!important
}

/* Refined invitation card */
.modal {
  background:rgba(2,10,8,.72);
  backdrop-filter:blur(10px)
}

.scroll-card {
  position:relative;
  padding:34px 24px 26px!important;
  background:linear-gradient(145deg,#fffdf7 0%,#f8efd9 54%,#efe0bd 100%)!important;
  color:#27352f!important;
  border:1px solid #d5b86d!important;
  border-radius:22px!important;
  outline:1px solid rgba(255,247,220,.9)!important;
  outline-offset:-7px!important;
  box-shadow:inset 0 0 0 7px rgba(124,91,34,.06),inset 0 0 55px rgba(118,84,27,.1),0 26px 80px rgba(0,0,0,.66)!important;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif!important
}

.scroll-card:before,.scroll-card:after {
  content:"✦  ❦  ✦";
  display:block;
  color:#9e7730;
  font-size:.85rem;
  letter-spacing:.32rem;
  opacity:.75
}

.scroll-card:before {
  margin-bottom:7px
}

.scroll-card:after {
  margin-top:18px
}

.scroll-card .close {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(125,91,38,.35)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.64)!important;
  color:#5c4527!important;
  font-family:Tahoma,sans-serif!important
}

.scroll-mark {
  margin:0 0 5px;
  color:#9a7330!important;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif!important;
  font-size:1rem!important;
  letter-spacing:0!important
}

.scroll-card h2 {
  margin:0 0 12px!important;
  color:#23443a!important;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif!important;
  font-size:clamp(1.7rem,6vw,2.25rem)!important;
  font-weight:700!important;
  line-height:1.55!important
}

.scroll-card>p {
  margin:7px auto 16px!important;
  max-width:390px;
  color:#5e513d!important;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif!important;
  font-size:1rem!important;
  line-height:1.95!important
}

.invitation-lead {
  color:#2e493f!important;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif!important;
  font-size:1.15rem!important;
  font-weight:700!important;
  line-height:2!important
}

.code-row {
  gap:10px!important;
  margin-top:19px
}

.code-row input {
  border:1px solid #c8aa65!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.78)!important;
  padding:13px 12px!important;
  color:#263c34!important;
  box-shadow:inset 0 2px 8px rgba(80,55,18,.07)
}

.code-row .gold-btn,.guest-panel .submit-btn {
  border:1px solid #b9974d!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#31594d,#193c33)!important;
  color:#fff8e8!important;
  box-shadow:0 8px 20px rgba(25,60,51,.2)!important
}

.guest-panel {
  border-color:rgba(158,119,48,.38)!important;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif!important
}

.guest-title {
  color:#23443a!important;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif!important;
  font-size:1.25rem!important
}

.event-details,.guest-choice {
  border-radius:12px!important;
  background:rgba(255,255,255,.48)!important;
  border-color:rgba(158,119,48,.35)!important
}

.demo-code {
  color:#7b694c!important;
  font-family:Tahoma,sans-serif!important
}

/* Strong, unmistakable incense reaction */
.live-smoke {
  z-index:9!important;
  left:5%!important;
  top:29%!important;
  width:170px!important;
  height:270px!important;
  opacity:0;
  transform:scale(.65);
  transform-origin:bottom center!important;
  transition:none!important
}

.live-smoke:after {
  content:"";
  position:absolute;
  left:48px;
  bottom:8px;
  width:58px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(ellipse,#ffcf5f 0%,#c26424 28%,transparent 72%);
  opacity:0;
  filter:blur(4px)
}

.live-smoke i {
  width:44px!important;
  height:105px!important;
  background:radial-gradient(ellipse at bottom,rgba(255,255,244,.95) 0%,rgba(240,235,210,.72) 34%,rgba(220,220,210,.22) 60%,transparent 76%)!important;
  filter:blur(9px)!important
}

.incense-live .live-smoke {
  opacity:1!important;
  transform:scale(1)!important
}

.incense-live .live-smoke:after {
  opacity:.9
}

.incense-live .live-smoke i {
  animation-duration:1.45s!important
}

.incense-message {
  z-index:12!important;
  top:22%!important;
  padding:10px 22px!important;
  border-radius:28px!important;
  background:rgba(8,25,20,.78)!important;
  border:1px solid rgba(242,208,128,.72)!important;
  color:#fff8df!important;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif!important;
  font-size:clamp(1.35rem,5.2vw,2rem)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.4)!important
}

.incense-message.show {
  animation:incenseLineStrong 4.6s ease both!important
}

@keyframes incenseLineStrong {
  0% {
    opacity:0;
    transform:translate(-120%,-6px)
  }

  12%,78% {
    opacity:1;
    transform:translate(-50%,0)
  }

  100% {
    opacity:0;
    transform:translate(35%,-6px)
  }

}

@media(max-width:430px) {
  .live-smoke {
    left:2%!important;
    top:30%!important;
    transform:scale(.58)
  }

  .incense-live .live-smoke {
    transform:scale(.88)!important
  }

}

/* Invisible, generous tap target over the real incense burner */
.incense-spot {
  left:7%!important;
  top:45%!important;
  width:120px!important;
  height:160px!important;
  border:0!important;
  background:rgba(0,0,0,.06)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  animation:none!important;
  color:transparent!important
}

.incense-spot span,.incense-spot small {
  opacity:0!important
}

.incense-spot:hover,.incense-spot:focus-visible {
  background:rgba(0,0,0,.09)!important;
  box-shadow:none!important;
  outline:1px dashed rgba(255,255,255,.14)!important;
  outline-offset:-5px
}

/* A light invitation-list icon instead of the old round button */
.guest-spot {
  right:2%!important;
  top:47%!important;
  width:130px!important;
  height:150px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  animation:none!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px
}

.guest-scroll-icon {
  width:56px;
  height:56px;
  fill:rgba(246,215,151,.92);
  stroke:#4a3112;
  stroke-width:1.2;
  filter:drop-shadow(0 0 10px rgba(255,218,137,.95));
  animation:guestInviteGlow 2.8s ease-in-out infinite
}

.guest-spot small {
  position:static!important;
  font-size:15px!important;
  font-weight:700!important;
  color:#fff8df!important;
  text-shadow:0 2px 8px #000,0 0 14px #000!important
}

.guest-spot:hover,.guest-spot:focus-visible {
  outline:1px dashed rgba(255,239,199,.3)!important;
  outline-offset:-4px
}

@keyframes guestInviteGlow {
  0%,100% {
    opacity:.65;
    transform:scale(.94)
  }

  50% {
    opacity:1;
    transform:scale(1.08);
    filter:drop-shadow(0 0 15px rgba(255,222,151,1))
  }

}

/* Smoke begins exactly above the burner: subtle 3s presence + 2s fade loop */
.live-smoke {
  left:8%!important;
  top:34%!important;
  width:120px!important;
  height:19%!important;
  opacity:0;
  transform:scale(.25);
  transform-origin:bottom center!important;
  transition:none!important
}

.arrived .live-smoke {
  animation:ambientIncense 5s ease-in-out infinite!important
}

@keyframes ambientIncense {
  0% {
    opacity:0;
    transform:scale(.2)
  }

  12%,60% {
    opacity:.25;
    transform:scale(.25)
  }

  100% {
    opacity:0;
    transform:scale(.2)
  }

}

.incense-live .live-smoke {
  animation:none!important;
  opacity:1!important;
  transform:scale(1)!important
}

@media(max-width:430px) {
  .incense-spot {
    left:5%!important;
    top:45%!important
  }

  .guest-spot {
    right:0!important;
    top:47%!important
  }

  .live-smoke {
    left:7%!important;
    top:34%!important;
    height:19%!important;
    transform:scale(.25)
  }

  .incense-live .live-smoke {
    transform:scale(1)!important
  }

}

/* Creator signature and light deterrence against casual copying */
body {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none
}

input,textarea {
  -webkit-user-select:text;
  user-select:text
}

img {
  -webkit-user-drag:none;
  user-drag:none
}

.creator-credit {
  position:absolute;
  z-index:20;
  left:12px;
  bottom:max(10px,env(safe-area-inset-bottom));
  direction:rtl;
  display:grid;
  gap:1px;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(3,12,9,.18);
  color:#fff7df;
  text-align:right;
  text-shadow:0 1px 6px #000;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif;
  opacity:.46;
  pointer-events:none;
  transition:opacity .35s,background .35s
}

.creator-credit span {
  font-size:10px;
  line-height:1.4
}

.creator-credit strong {
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  color:#f4d994
}

.creator-credit small {
  font-size:8px;
  line-height:1.35;
  color:#fff
}

.arrived .creator-credit {
  opacity:.58;
  background:rgba(3,12,9,.28)
}

@media(min-width:700px) {
  .creator-credit {
    left:18px;
    bottom:14px
  }

}

/* Hotspots aligned to the attendants in garden-welcome-v5. */
.incense-spot {
  left:3%!important;
  top:43%!important;
  width:21%!important;
  height:25%!important
}

.guest-spot {
  right:2%!important;
  top:44%!important;
  width:25%!important;
  height:22%!important
}

.live-smoke {
  left:4.5%!important;
  top:39%!important;
  width:18%!important;
  height:22%!important
}

@media(max-width:430px) {
  .incense-spot {
    left:2%!important;
    top:43%!important;
    width:24%!important;
    height:26%!important
  }

  .guest-spot {
    right:0!important;
    top:44%!important;
    width:28%!important;
    height:23%!important
  }

  .live-smoke {
    left:4%!important;
    top:39%!important;
    width:20%!important;
    height:22%!important
  }
}

/* Final mobile polish for the new welcome scene. */
.incense-message {
  top:14%!important
}

.guest-spot {
  right:4%!important;
  top:39%!important;
  width:25%!important;
  height:20%!important;
  box-sizing:border-box!important;
  padding:8px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.14)!important;
  backdrop-filter:blur(3px)
}

.guest-scroll-icon {
  width:42px!important;
  height:42px!important;
  fill:rgba(255,255,255,.14)!important;
  stroke:rgba(255,255,255,.92)!important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))!important
}

.guest-spot small {
  max-width:100%!important;
  font-size:clamp(11px,2.9vw,13px)!important;
  line-height:1.45!important;
  white-space:normal!important;
  text-align:center!important
}

@media(max-width:430px) {
  .incense-message {
    top:12.5%!important;
    font-size:clamp(1.05rem,4.7vw,1.35rem)!important
  }

  .guest-spot {
    right:4%!important;
    top:38.5%!important;
    width:25%!important;
    height:19%!important
  }
}