/* ===== Ohana Valenti · motion pack v1 =====
   Plug-in layer: everything here is added by motion.js. Safe to remove both files to roll back. */

/* --- hero gold dust --- */
.hero{position:relative;overflow:hidden}
.mx-dust{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}

/* --- cursor glow (desktop) --- */
.mx-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(207,174,114,.10),rgba(207,174,114,.04) 45%,transparent 70%);
  transform:translate3d(-999px,-999px,0);transition:opacity .4s;mix-blend-mode:screen}
main,header,footer{position:relative;z-index:1}

/* --- rewrite-the-text phone in the hero --- */
.mx-draft-sec .sh{margin-bottom:clamp(24px,3vw,36px)}
.mx-draft{max-width:420px;margin:0 auto;text-align:left;position:relative;z-index:2}
.mx-draft .ph{border:1px solid #3a3228;border-radius:28px;background:linear-gradient(180deg,#1d1a15,#110f0c);overflow:hidden;
  box-shadow:0 40px 80px -40px #000,0 0 0 6px rgba(255,255,255,.02),0 0 70px -20px rgba(207,174,114,.35)}
.mx-draft .hd{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid #2a251e;background:#181510}
.mx-draft .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 1.15rem/1 var(--display,serif);color:#17120a;background:radial-gradient(circle at 30% 28%,#f3deb0,#b88f4a)}
.mx-draft .nm{display:flex;flex-direction:column;line-height:1.2;font-size:.95rem}
.mx-draft .nm b{font-weight:600}
.mx-draft .nm small{color:#6fb3a8;font-size:.75rem;display:flex;align-items:center;gap:5px}
.mx-draft .nm small::before{content:"";width:6px;height:6px;border-radius:50%;background:#6fb3a8}
.mx-draft .cnt{margin-left:auto;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#a79f8e);transition:color .3s}
.mx-draft .cnt.sent{color:#6fb3a8}
.mx-draft .bd{padding:16px 14px 6px;display:flex;flex-direction:column;gap:8px;min-height:150px;justify-content:flex-end}
.mx-draft .b{max-width:84%;padding:9px 14px;border-radius:17px;font-size:.95rem;line-height:1.42;animation:mxpop .35s cubic-bezier(.2,.8,.2,1) both}
.mx-draft .b.h{align-self:flex-start;background:#2a251e;color:var(--text,#f0eadb);border-bottom-left-radius:4px}
.mx-draft .b.m{align-self:flex-end;background:var(--gold,#cfae72);color:#17120a;border-bottom-right-radius:4px}
.mx-draft .b.t{display:inline-flex;gap:5px;padding:13px 15px}
.mx-draft .b.t i{width:6px;height:6px;border-radius:50%;background:#a79f8e;animation:mxblink 1s infinite}
.mx-draft .b.t i:nth-child(2){animation-delay:.18s}.mx-draft .b.t i:nth-child(3){animation-delay:.36s}
.mx-draft .cp{display:flex;align-items:flex-end;gap:10px;margin:8px 10px 10px;padding:9px 9px 9px 15px;border:1px solid #332d24;border-radius:20px;background:#0f0d0a;min-height:44px}
.mx-draft .tx{flex:1;font-size:.95rem;line-height:1.4;color:var(--text,#f0eadb);min-height:1.4em;word-break:break-word}
.mx-draft .tx::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--gold,#cfae72);animation:mxcaret 1s steps(1) infinite}
.mx-draft .tx.ph0{color:#6d665a}
.mx-draft .snd{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#2a251e;transition:background .25s,transform .25s}
.mx-draft .snd svg{width:15px;height:15px;stroke:#0d0c0a;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mx-draft .snd.on{background:var(--gold,#cfae72)}
.mx-draft .snd.go{transform:scale(1.18)}
.mx-draft .cap{margin:14px 0 0;text-align:center;font-size:.9rem;color:var(--muted,#a79f8e);min-height:1.4em;transition:opacity .4s}
.mx-draft .cap b{color:var(--gold-hi,#e6cb94);font-weight:600}
.mx-strike{animation:mxshake .35s ease}
@keyframes mxpop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mxblink{0%,60%,100%{opacity:.25}30%{opacity:1;transform:translateY(-3px)}}
@keyframes mxcaret{50%{opacity:0}}
@keyframes mxshake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (min-width:1100px){
  .hero .mx-draft.side{position:absolute;right:max(16px,calc(50% - 600px));top:clamp(40px,6vw,90px);margin:0;width:340px;transform:rotate(2.5deg)}
}

/* --- marquee of topics --- */
.mx-marquee{position:relative;overflow:hidden;border-top:1px solid var(--line,#2b2721);border-bottom:1px solid var(--line,#2b2721);background:#100e0b;padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mx-marquee .rail{display:flex;width:max-content;animation:mxmarq 48s linear infinite}
.mx-marquee:hover .rail{animation-play-state:paused}
.mx-marquee span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;font:500 clamp(1.15rem,2vw,1.5rem)/1 var(--display,serif);font-style:italic;color:var(--soft,#d6cfbf)}
.mx-marquee span::after{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--gold,#cfae72);opacity:.8}
@keyframes mxmarq{to{transform:translateX(-50%)}}

/* --- look inside --- */
.mx-inside{overflow:hidden}
.mx-inside .sh{margin-bottom:clamp(28px,4vw,44px)}
.mx-track{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:10px max(16px,calc(50% - 560px)) 34px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.mx-track::-webkit-scrollbar{display:none}
.mx-track.drag{cursor:grabbing;scroll-snap-type:none}
.mx-page{flex:none;width:clamp(190px,24vw,270px);scroll-snap-align:center;margin:0;text-align:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mx-page button{all:unset;display:block;cursor:zoom-in;border-radius:4px;position:relative;width:100%}
.mx-page img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:4px;box-shadow:0 30px 50px -24px #000,0 0 0 1px rgba(255,255,255,.07);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;pointer-events:none;-webkit-user-drag:none}
.mx-page button:hover img,.mx-page button:focus-visible img{transform:translateY(-8px) rotate(-1deg);box-shadow:0 44px 60px -26px #000,0 0 0 1px rgba(207,174,114,.6),0 0 50px -12px rgba(207,174,114,.45)}
.mx-page figcaption{margin-top:14px;font-size:.86rem;color:var(--muted,#a79f8e);line-height:1.35}
.mx-page figcaption b{display:block;color:var(--soft,#d6cfbf);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.mx-nav{display:flex;justify-content:center;gap:12px;margin-top:4px}
.mx-nav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(207,174,114,.55);background:transparent;color:var(--gold,#cfae72);cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.mx-nav button:hover{background:rgba(207,174,114,.12);transform:translateY(-1px)}
.mx-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mx-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 15px;border-radius:999px;border:1px solid rgba(207,174,114,.55);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold,#cfae72);background:rgba(207,174,114,.06)}
.mx-lb{position:fixed;inset:0;z-index:90;background:rgba(8,7,6,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;gap:12px;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.mx-lb.on{opacity:1;pointer-events:auto}
.mx-lb figure{margin:0;max-height:92vh;display:flex;flex-direction:column;align-items:center}
.mx-lb img{max-height:84vh;max-width:min(92vw,620px);width:auto;height:auto;border-radius:4px;box-shadow:0 40px 90px -30px #000;transform:scale(.96);transition:transform .35s}
.mx-lb.on img{transform:none}
.mx-lb figcaption{margin-top:12px;color:var(--soft,#d6cfbf);font-size:.95rem;text-align:center}
.mx-lb .x,.mx-lb .pv,.mx-lb .nx{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.4);color:#fff;cursor:pointer;display:grid;place-items:center}
.mx-lb .x{position:absolute;top:16px;right:16px}
.mx-lb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media (max-width:640px){.mx-lb .pv,.mx-lb .nx{display:none}}

/* --- spotlight on cards --- */
.pcard,.offer-panel,.fit>div{position:relative;overflow:hidden}
.mx-spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--kg,207,174,114),.16),transparent 60%)}
.mx-spot-on:hover>.mx-spot{opacity:1}
.pcard>*:not(.mx-spot),.offer-panel>*:not(.mx-spot),.fit>div>*:not(.mx-spot){position:relative;z-index:1}

/* --- headline word reveal --- */
.mx-words .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}
.mx-words.in .w{opacity:1;transform:none;filter:none}

/* --- bundle covers fan in --- */
.mx-fan .set>img,.mx-fan .set>.bn,.mx-fan .set>.plus{opacity:0;transform:translateY(30px) rotate(-6deg) scale(.92);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.mx-fan.in .set>*{opacity:1;transform:none}

/* --- price shimmer --- */
.bigprice{background:linear-gradient(100deg,#e6cb94 0%,#e6cb94 40%,#fff4d8 50%,#e6cb94 60%,#e6cb94 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:mxshine 4.5s ease-in-out infinite}
@keyframes mxshine{0%,35%{background-position:100% 0}65%,100%{background-position:0 0}}

/* --- magnetic buttons --- */
.mx-mag{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s,color .2s!important}

@media (prefers-reduced-motion:reduce){
  .mx-marquee .rail,.bigprice{animation:none}
  .mx-words .w{opacity:1;transform:none;filter:none;transition:none}
  .mx-fan .set>*{opacity:1;transform:none;transition:none}
  .mx-draft .b,.mx-draft .tx::after{animation:none}
  .mx-glow{display:none}
}
