/* REEL-SAMPLE: object flicker band at the head of "Momentos, no monumentos."
   Monuments = faint line art behind; moments = Vijay's own photos, cut out, in front.
   Colours are the live theme's own: noche / añil over cal, lámpara for the line work. */
:root{
  --mo-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mo-band{
  --mo-top:clamp(170px,17vw,236px);
  --mo-obj:clamp(200px,24vw,330px);
  --mo-strip:14px;
  position:relative;isolation:isolate;overflow:hidden;margin-bottom:64px;scroll-margin-top:96px;
}
.mo-top{
  position:relative;height:var(--mo-top);
  background:linear-gradient(180deg,var(--cine-noche,#0F1430) 0%,#172052 58%,var(--cine-anil-2,#223070) 100%);
}
.mo-top::before{content:"";position:absolute;inset:0;background:var(--mo-noise);opacity:.3;mix-blend-mode:soft-light}
.mo-top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  background:url(skyline.svg) repeat-x 50% 100%/1600px 150px;opacity:.62;
}
.mo-strip{height:var(--mo-strip);background:var(--cine-noche,#0F1430) url(strip.svg) repeat-x 50% 50%/28px 14px}
.mo-ground{position:relative;height:calc(var(--mo-obj)/2 + 84px);background:var(--cine-cal,#E7EBEC)}
.mo-ground::before{content:"";position:absolute;inset:0;background:var(--mo-noise);opacity:.16;mix-blend-mode:multiply}

.mo-stage{
  position:absolute;left:50%;top:calc(var(--mo-top) + var(--mo-strip)/2);
  width:var(--mo-obj);height:var(--mo-obj);transform:translate(-50%,-50%);
  filter:drop-shadow(20px 24px 14px rgba(10,14,34,.42));cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mo-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity 70ms linear;user-select:none;-webkit-user-drag:none;
}
.mo-stage img.on{opacity:1}

.mo-cap{
  position:absolute;left:0;right:0;top:calc(var(--mo-top) + var(--mo-strip) + var(--mo-obj)/2 + 30px);
  margin:0;text-align:center;font-family:var(--cine-sans,var(--font-ui,system-ui,sans-serif));
  font-size:13px;line-height:1.3;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cine-kajal,#15182B);
}
.mo-cap span{display:inline-block;opacity:0;transform:translateY(4px);transition:opacity .28s ease,transform .28s ease}
.mo-band.mo-hold .mo-cap span{opacity:1;transform:none}

@media (max-width:767px){
  .mo-band{--mo-top:clamp(150px,42vw,200px);--mo-obj:clamp(170px,52vw,230px);margin-bottom:44px}
  .mo-top::after{background-size:800px 75px;height:75px}
  .mo-cap{font-size:11.5px;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){
  .mo-stage img,.mo-cap span{transition:none}
}

/* ===== objects elsewhere on the page: same paper-cutout family, one per spot ===== */
.whyus,.home-inquiry,.how-we-work,.home-faq,.home-blog,.lead-magnet,.founder{position:relative}
/* objects that travel in from off-screen must never widen the page */
.home-inquiry,.lead-magnet{overflow-x:clip}
.mo-sh{display:block;filter:drop-shadow(14px 18px 11px rgba(10,14,34,.38))}
.mo-sh img,.mo-corner img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}

/* laid across a seam (dark section above, light below), like the reel */
.mo-seam{position:absolute;top:0;z-index:3;width:clamp(116px,14vw,200px);transform:translateY(-50%);pointer-events:none}
.mo-seam--l{left:clamp(14px,3.2vw,56px)}
.mo-seam--r{right:clamp(14px,3.2vw,56px)}

/* parked on the ledge of the navy "Solicitar una conversación" block */
.mo-ledge{position:absolute;bottom:calc(100% - 4px);z-index:3;pointer-events:none}
.mo-ledge--l{left:clamp(14px,4.2vw,68px);width:clamp(66px,7.8vw,114px)}
.mo-ledge--r{right:clamp(14px,4.2vw,68px);width:clamp(92px,9vw,132px);bottom:calc(100% - 5px)}
.mo-ledge .mo-sh{filter:drop-shadow(9px 5px 6px rgba(10,14,34,.34))}

/* standing in the FAQ margin */
.mo-side{position:absolute;right:max(24px,calc(50% - 650px));top:50%;transform:translateY(-50%);width:clamp(150px,13vw,188px);margin:0;text-align:center;pointer-events:none;display:none}
.mo-side figcaption{margin-top:20px;font-family:var(--cine-sans,system-ui,sans-serif);font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cine-kajal,#15182B)}
@media (min-width:1280px){.mo-side{display:block}}

/* a hand offering a lit diya from the corner of the free-guide block; the flame warms the corner */
.mo-corner{position:absolute;left:0;bottom:0;width:clamp(200px,20.5vw,296px);height:100%;overflow:hidden;pointer-events:none;display:none}
/* the glow lives OUTSIDE the clipped corner box and reaches zero well inside its own box, so it never shows an edge */
.mo-glow{position:absolute;left:0;bottom:0;width:min(64vw,820px);height:100%;pointer-events:none;display:none;
  background:radial-gradient(ellipse 50% 58% at 20% 46%,rgba(243,180,95,.2) 0%,rgba(243,180,95,.09) 42%,rgba(243,180,95,.025) 74%,rgba(243,180,95,0) 100%)}
.mo-corner img{position:absolute;left:0;bottom:0}
@media (min-width:1100px){.mo-corner,.mo-glow{display:block}}

/* closing block (Vijay's pick, options 1 + 4): light through a marble jali behind the message,
   a strip of hand-block-printed cotton along the bottom. No monuments here. */
.footer-area{overflow-x:clip}
.fclose{position:relative;isolation:isolate;text-align:left !important;border-bottom:0 !important;
  padding-top:clamp(84px,9vw,120px) !important;padding-bottom:calc(clamp(84px,9vw,120px) + 248px) !important;min-height:calc(460px + 248px)}
.fclose > :not(.mo-jali):not(.mo-jali-label):not(.mo-cloth){position:relative;max-width:520px;margin-left:0 !important;margin-right:auto !important;text-align:left}
.fclose > p:not(:first-child):not(.fclose-h){max-width:40ch}
.mo-jali{position:absolute;z-index:-1;top:0;bottom:248px;right:calc(50% - 50vw);width:min(62vw,940px);
  background:url(obj/celosias.webp) 58% 50%/cover no-repeat}
.mo-jali::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cine-noche,#0F1430) 0%,rgba(15,20,48,.74) 24%,rgba(15,20,48,.14) 56%,rgba(15,20,48,.04) 100%),
             linear-gradient(0deg,rgba(15,20,48,.55) 0%,rgba(15,20,48,0) 22%)}
.mo-jali-label,.mo-cloth span{font-family:var(--cine-sans,system-ui,sans-serif);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mo-jali-label{position:absolute;right:max(20px,calc(50% - 50vw + 24px));bottom:calc(248px + 16px);color:var(--cine-lampara,#F3B45F);text-shadow:0 1px 10px rgba(10,14,34,.9),0 0 3px rgba(10,14,34,.8)}
.mo-jali-label i,.mo-cloth span i{font-style:normal;font-weight:600;opacity:.8}
.mo-cloth{position:absolute;left:calc(50% - 50vw);bottom:0;width:100vw;height:248px;--cloth-h:220px;
  background:url(obj/border-vijay.webp) center/auto var(--cloth-h) no-repeat,
             url(obj/border-vijay-tile.webp) center/auto var(--cloth-h) repeat-x,
             #F6F0E0}
.mo-cloth::after{content:"";position:absolute;inset:0;background:var(--mo-noise);opacity:.06;mix-blend-mode:multiply;pointer-events:none}
.mo-cloth span{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;background:#F6F0E0;color:#2B3A86}
@media (max-width:767px){
  .fclose{padding-top:calc(330px + 44px) !important;padding-bottom:calc(52px + 168px) !important;min-height:0}
  .mo-jali{top:0;bottom:auto;height:360px;right:auto;left:calc(50% - 50vw);width:100vw;background-image:url(obj/celosia-centro.webp);background-position:50% 40%}
  .mo-jali::after{background:linear-gradient(180deg,rgba(15,20,48,0) 40%,var(--cine-noche,#0F1430) 100%)}
  .mo-jali-label{top:318px;bottom:auto;right:auto;left:20px}
  .mo-cloth{height:168px;--cloth-h:min(31vw,140px)}
  .mo-cloth span{white-space:normal;width:max-content;max-width:calc(100vw - 40px);text-align:center;letter-spacing:.12em;bottom:14px}
}

/* standing at the left of "Del blog" */
.mo-stand{position:absolute;left:max(24px,calc(50% - 620px));bottom:0;width:clamp(84px,7.6vw,110px);pointer-events:none;display:none}
@media (min-width:1180px){.mo-stand{display:block}}

/* wish-threads hanging into the free-guide block from the right */
.mo-corner--r{left:auto;right:0;width:clamp(230px,25vw,360px)}
.mo-corner--r img{left:auto;right:-6%;bottom:auto;top:-3%;width:84%;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 97%);mask-image:linear-gradient(to bottom,#000 62%,transparent 97%)}

/* motion is tied to the reader's scroll, never to a clock; browsers without it get the resting state */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mo-spin{animation:mo-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .mo-drive{animation:mo-drive cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 38%}
    .mo-drive-r{animation:mo-drive-r cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 38%}
    .mo-hang{animation:mo-hang cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 45%;transform-origin:100% 0}
    .mo-offer{animation:mo-offer cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 42%}
  }
}
@keyframes mo-spin{from{transform:rotate(-18deg)}to{transform:rotate(14deg)}}
@keyframes mo-drive{from{transform:translateX(-34vw)}to{transform:none}}
@keyframes mo-drive-r{from{transform:translateX(34vw)}to{transform:none}}
@keyframes mo-hang{from{transform:rotate(7deg)}to{transform:none}}
@keyframes mo-offer{from{transform:translate(-26%,30%)}to{transform:none}}