/**
 * Smooth Promo Cards — frontend styles.
 * Shob timing CSS variable theke ashe, tai Elementor-er control gulo sorasori kaj kore.
 */

.spc{
	--spc-k:1;                 /* speed multiplier */
	--spc-card-step:160ms;     /* ek card theke arek card-er fak */
	--spc-word-step:80ms;      /* ek shobdo theke arek shobdo */
	--spc-r-start:60px;
	--spc-r-end:22px;
	--spc-e:cubic-bezier(.19,1,.22,1);
	--d:0ms;
	--i:0;
}

.spc *{box-sizing:border-box}

/* ---------------------------------------------- heading */

.spc-head{margin-bottom:clamp(26px,4vw,52px)}
.spc-head__row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.spc-head__title{margin:.7rem 0 0;line-height:1.02;letter-spacing:-.03em;font-weight:300}
.spc-head__kicker{margin:0}
.spc-head__aside{margin:0}
.spc-head__rule{height:1px;background:rgba(242,239,233,.22);margin-top:clamp(20px,3vw,36px);
	transform:scaleX(0);transform-origin:left}

/* ---------------------------------------------- grid */

.spc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* ---------------------------------------------- card shell */

.spc-card{
	position:relative;display:block;overflow:hidden;isolation:isolate;text-decoration:none;
	aspect-ratio:16/11;border-radius:var(--spc-r-end);
}
.spc-card:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.spc-card__frame{position:absolute;inset:0;z-index:0;overflow:hidden}
.spc-card__img{position:absolute;inset:0;background-size:cover;background-position:center;
	transform:scale(1.06);transition:transform 1.15s var(--spc-e)}
.spc-card:hover .spc-card__img{transform:scale(1.13)}

.spc-card__veil{position:absolute;inset:0;z-index:1;transition:opacity .7s var(--spc-e);
	background:linear-gradient(to top,rgba(6,8,7,.9),rgba(6,8,7,.15) 62%)}
.spc-card:hover .spc-card__veil{opacity:.82}

.spc-card__inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
	justify-content:flex-end;padding:clamp(20px,3vw,40px)}

/* ---------------------------------------------- content bits */

.spc-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.24em;margin:0 0 .9rem}
.spc-card__title{line-height:1;letter-spacing:-.03em;font-size:clamp(1.8rem,3.4vw,3rem);font-weight:400}
.spc-it{font-style:italic;font-family:Georgia,"Times New Roman",serif}

.spc-w{display:inline-block;overflow:hidden;vertical-align:bottom}
.spc-w>i{display:inline-block;font-style:inherit;font-family:inherit}

.spc-rule{height:1px;background:rgba(242,239,233,.3);margin-top:1.3rem;
	transform:scaleX(0);transform-origin:left}

.spc-drop{margin-top:1rem;display:flex;justify-content:space-between;align-items:center;
	gap:16px;flex-wrap:wrap}
.spc-drop__text{margin:0;font-size:14px}

.spc-go{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.5em;border-radius:99px;
	background:#f2efe9;color:#0d0f0e;font-size:13px;white-space:nowrap;line-height:1;
	transition:background .4s var(--spc-e),color .4s var(--spc-e)}
.spc-go__arrow{font-style:normal;transition:transform .4s var(--spc-e)}
.spc-card:hover .spc-go__arrow{transform:translateX(4px)}

/* ---------------------------------------------- centred layouts */

.spc-card__inner[style*="center"] .spc-rule{transform-origin:center}

/* ==============================================================
   ANIMATION — shudhu .spc-anim thakle chole (JS lagay)
   ============================================================== */

/* age theke lukiye rakha, jate scroll-in-er age flash na kore */
.spc:not(.spc--noanim) .spc-card{clip-path:inset(0 0 100% 0);transform:translateY(26px);
	border-radius:var(--spc-r-start)}
.spc:not(.spc--noanim) .spc-w>i{transform:translateY(105%);opacity:0;filter:blur(8px)}
.spc:not(.spc--noanim) .spc-eyebrow{opacity:0;transform:translateY(12px);filter:blur(6px)}
.spc:not(.spc--noanim) .spc-drop{opacity:0;transform:translateY(16px)}
.spc--focus .spc-card__frame{transform:scale(1.24);filter:blur(16px)}

/* --- card khule ashe --- */
.spc-anim .spc-card{
	animation-name:spc-reveal;
	animation-duration:calc(1.35s * var(--spc-k));
	animation-timing-function:var(--spc-e);
	animation-fill-mode:forwards;
	animation-delay:var(--d);
}
@keyframes spc-reveal{
	to{clip-path:inset(0 0 0 0);transform:none;border-radius:var(--spc-r-end)}
}

/* --- image focus pull --- */
.spc-anim.spc--focus .spc-card__frame{
	animation-name:spc-focus;
	animation-duration:calc(1.9s * var(--spc-k));
	animation-timing-function:var(--spc-e);
	animation-fill-mode:forwards;
	animation-delay:calc(var(--d) + 120ms);
}
@keyframes spc-focus{to{transform:scale(1);filter:blur(0)}}

/* --- ekbar alo bulie jay --- */
.spc--sheen .spc-card::after{content:"";position:absolute;inset:-20% -60%;z-index:2;
	pointer-events:none;opacity:0;transform:translateX(-115%);
	background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%)}
.spc-anim.spc--sheen .spc-card::after{
	animation-name:spc-sheen;
	animation-duration:calc(1.6s * var(--spc-k));
	animation-timing-function:var(--spc-e);
	animation-fill-mode:forwards;
	animation-delay:calc(var(--d) + 780ms);
}
@keyframes spc-sheen{
	0%{transform:translateX(-115%);opacity:0}
	18%{opacity:1}
	100%{transform:translateX(115%);opacity:0}
}

/* --- shobdo dhore dhore --- */
.spc-anim .spc-w>i{
	animation-name:spc-word;
	animation-duration:calc(1.15s * var(--spc-k));
	animation-timing-function:var(--spc-e);
	animation-fill-mode:forwards;
	animation-delay:calc(var(--d) + 220ms + var(--i) * var(--spc-word-step));
}
@keyframes spc-word{to{transform:none;opacity:1;filter:blur(0)}}

/* --- eyebrow --- */
.spc-anim .spc-eyebrow{
	animation-name:spc-eyebrow;
	animation-duration:calc(1.15s * var(--spc-k));
	animation-timing-function:var(--spc-e);
	animation-fill-mode:forwards;
	animation-delay:calc(var(--d) + 520ms);
}
@keyframes spc-eyebrow{to{opacity:1;transform:none;filter:blur(0)}}

/* --- line gulo tene jay --- */
.spc-anim .spc-rule{
	animation-name:spc-draw;
	animation-duration:calc(1.2s * var(--spc-k));
	animation-timing-function:var(--spc-e);
	animation-fill-mode:forwards;
	animation-delay:calc(var(--d) + 950ms);
}
.spc-anim .spc-head__rule{
	animation-name:spc-draw;
	animation-duration:calc(1.5s * var(--spc-k));
	animation-timing-function:var(--spc-e);
	animation-fill-mode:forwards;
	animation-delay:120ms;
}
@keyframes spc-draw{to{transform:scaleX(1)}}

/* --- detail + button --- */
.spc-anim .spc-drop{
	animation-name:spc-up;
	animation-duration:calc(1s * var(--spc-k));
	animation-timing-function:var(--spc-e);
	animation-fill-mode:forwards;
	animation-delay:calc(var(--d) + 1050ms);
}
@keyframes spc-up{to{opacity:1;transform:none}}

/* intro sesh hole detail gulo hover-er hate chole jay */
@media (hover:hover){
	.spc--hoverreveal.spc-settled .spc-drop{
		animation:none;opacity:0;transform:translateY(14px);
		transition:opacity .6s var(--spc-e),transform .6s var(--spc-e);
	}
	.spc--hoverreveal.spc-settled .spc-card:hover .spc-drop{opacity:1;transform:none}
}

/* animation off — shob kichu sthir */
.spc--noanim .spc-card,
.spc--noanim .spc-card__frame,
.spc--noanim .spc-w>i,
.spc--noanim .spc-drop{animation:none}
.spc--noanim .spc-rule,
.spc--noanim .spc-head__rule{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
	.spc *,.spc *::before,.spc *::after{animation:none!important;transition:none!important}
	.spc .spc-card{clip-path:none!important;transform:none!important;border-radius:var(--spc-r-end)!important}
	.spc .spc-card__frame{transform:none!important;filter:none!important}
	.spc .spc-w>i{transform:none!important;opacity:1!important;filter:none!important}
	.spc .spc-eyebrow{opacity:1!important;transform:none!important;filter:none!important}
	.spc .spc-drop{opacity:1!important;transform:none!important}
	.spc .spc-rule,.spc .spc-head__rule{transform:scaleX(1)!important}
}