/* Casa Vellori — cinematic motion layer
   The resting layout remains identical to the supplied website. */

:root {
  --cv-ease: cubic-bezier(.16, 1, .3, 1);
  --cv-gold-glow: rgba(216, 185, 111, .34);
  --cv-delay: 0ms;
}

html.cv-motion-ready {
  scrollbar-color: var(--gold) #070605;
}

body.cv-booting {
  overflow: hidden;
}

.cv-page-curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(190, 156, 86, .16), transparent 30%),
    linear-gradient(135deg, #050403, #0c0905 52%, #050403);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .65s var(--cv-ease);
}

.cv-page-curtain::before,
.cv-page-curtain::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 30px var(--cv-gold-glow);
}

.cv-page-curtain::before {
  top: 38%;
}

.cv-page-curtain::after {
  bottom: 38%;
}

.cv-page-curtain img {
  width: clamp(70px, 8vw, 118px);
  filter: drop-shadow(0 0 24px rgba(216, 185, 111, .28));
  opacity: 0;
}

body.cv-booting .cv-page-curtain {
  animation: cv-curtain-intro 1.35s var(--cv-ease) both;
}

body.cv-booting .cv-page-curtain img {
  animation: cv-mark-intro 1.05s ease both;
}

body.cv-leaving .cv-page-curtain {
  pointer-events: auto;
  transform: scaleY(1);
  transform-origin: bottom;
}

body.cv-leaving .cv-page-curtain img {
  animation: cv-mark-out .5s .18s ease both;
}

.cv-film-grain {
  position: fixed;
  inset: -40%;
  z-index: 130;
  width: 180%;
  height: 180%;
  pointer-events: none;
  opacity: .025;
  background-image:
    repeating-radial-gradient(circle at 30% 20%, #fff 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 70% 80%, #fff 0 1px, transparent 1px 5px);
  background-size: 7px 7px, 9px 9px;
  mix-blend-mode: soft-light;
  animation: cv-grain .28s steps(2) infinite;
}

.cv-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 140;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), #fff0bf);
  box-shadow: 0 0 18px rgba(216, 185, 111, .54);
}

.cv-cursor-light {
  position: fixed;
  z-index: 129;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(216, 185, 111, .08), rgba(216, 185, 111, .025) 30%, transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .35s ease;
}

body:hover .cv-cursor-light {
  opacity: 1;
}

.topbar {
  overflow: hidden;
}

.topbar p {
  animation: cv-topbar-enter 1s .55s var(--cv-ease) both;
}

.nav {
  animation: cv-nav-enter 1s .42s var(--cv-ease) both;
}

.nav::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -1px;
  left: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 16px var(--cv-gold-glow);
  animation: cv-nav-line 1.25s .72s var(--cv-ease) both;
}

.brand-logo {
  transform-origin: center;
  animation: cv-logo-enter 1.25s .44s var(--cv-ease) both;
}

.brand {
  position: relative;
  overflow: hidden;
}

.brand::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -40%;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 242, 198, .72), transparent);
  filter: blur(5px);
  transform: skewX(-17deg);
  animation: cv-brand-sweep 5.8s 1.4s ease-in-out infinite;
}

.hero {
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(5, 4, 3, .94) 0 26%, rgba(10, 8, 5, .22) 54%, rgba(5, 4, 3, .72) 100%);
  transform-origin: left;
  animation: cv-hero-veil 1.55s .42s var(--cv-ease) both;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -35%;
  bottom: -35%;
  left: -26%;
  width: 16%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(237, 211, 147, .16), rgba(255, 246, 213, .32), transparent);
  filter: blur(8px);
  transform: skewX(-18deg);
  animation: cv-hero-light 4.8s 1.1s var(--cv-ease) infinite;
}

.hero-inner,
.hero-tags {
  z-index: 2;
}

.hero-eyebrow {
  animation: cv-copy-rise .95s .78s var(--cv-ease) both;
}

.hero h1 {
  perspective: 1000px;
}

.hero h1 .l1 {
  transform-origin: 0 100%;
  animation: cv-title-reveal 1.25s .84s var(--cv-ease) both;
}

.hero h1 .l2 {
  transform-origin: 0 100%;
  animation: cv-title-reveal 1.25s .98s var(--cv-ease) both;
}

.hero .divider {
  animation: cv-rule-open 1.1s 1.08s var(--cv-ease) both;
}

.hero-sub {
  animation: cv-copy-rise 1s 1.18s var(--cv-ease) both;
}

.hero-cta {
  animation: cv-copy-rise 1s 1.28s var(--cv-ease) both;
}

.hero-tags span {
  animation: cv-copy-rise .9s var(--cv-ease) both;
}

.hero-tags span:nth-child(1) { animation-delay: 1.35s; }
.hero-tags span:nth-child(2) { animation-delay: 1.45s; }
.hero-tags span:nth-child(3) { animation-delay: 1.55s; }

.page-head {
  position: relative;
  overflow: hidden;
}

.page-head::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 0;
  left: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(190, 156, 86, .12), transparent);
  transform-origin: left;
  animation: cv-head-line 1.3s .7s var(--cv-ease) both;
}

.page-head > * {
  animation: cv-page-copy 1.05s var(--cv-ease) both;
}

.page-head > :nth-child(1) { animation-delay: .5s; }
.page-head > :nth-child(2) { animation-delay: .62s; }
.page-head > :nth-child(3) { animation-delay: .74s; }

.cv-reveal {
  --cv-reveal-y: 58px;
  will-change: transform, opacity, filter, clip-path;
  transition:
    opacity .9s var(--cv-ease) var(--cv-delay),
    transform 1.15s var(--cv-ease) var(--cv-delay),
    filter 1.05s var(--cv-ease) var(--cv-delay),
    clip-path 1.15s var(--cv-ease) var(--cv-delay) !important;
}

.cv-reveal:not(.cv-visible) {
  opacity: 0 !important;
  filter: blur(10px) saturate(.7) !important;
  clip-path: inset(0 0 16% 0) !important;
  transform: translate3d(0, var(--cv-reveal-y), 0) scale(.975) !important;
}

.cv-reveal.cv-visible {
  opacity: 1 !important;
  filter: blur(0) saturate(1) !important;
  clip-path: inset(0 0 0 0) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.pcard.cv-reveal:not(.cv-visible),
.card.cv-reveal:not(.cv-visible),
.store.cv-reveal:not(.cv-visible),
.value.cv-reveal:not(.cv-visible) {
  transform: perspective(1100px) translate3d(0, 76px, 0) rotateX(7deg) scale(.96) !important;
}

.card.cv-visible:hover,
.store.cv-visible:hover,
.value.cv-visible:hover {
  transform: translateY(-8px) !important;
}

.ed-spread.cv-reveal:not(.cv-visible) {
  clip-path: inset(0 12% 0 12%) !important;
  transform: translateY(35px) scale(.97) !important;
}

.ed-spread.rev.cv-reveal:not(.cv-visible) {
  transform: translateY(35px) translateX(-32px) scale(.97) !important;
}

.pd-media.cv-reveal:not(.cv-visible) {
  clip-path: inset(0 0 100% 0) !important;
  transform: scale(1.035) !important;
}

.pd-info.cv-reveal:not(.cv-visible) {
  clip-path: inset(0 0 0 100%) !important;
  transform: translateX(54px) !important;
}

.card,
.pcard,
.store,
.value,
.ed-fig,
.pd-media {
  backface-visibility: hidden;
}

.card .thumb,
.pcard .pic,
.pd-media,
.ed-fig,
.code-img {
  isolation: isolate;
}

.card .thumb::after,
.pcard .pic::after,
.pd-media::after,
.ed-fig::after,
.code-img::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -25%;
  bottom: -25%;
  left: -48%;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 193, .28), transparent);
  filter: blur(5px);
  transform: skewX(-18deg);
  transition: left 1s var(--cv-ease);
}

.card:hover .thumb::after,
.pcard:hover .pic::after,
.pd-media:hover::after,
.ed-fig:hover::after,
.code-img:hover::after {
  left: 128%;
}

.card .thumb img,
.pcard .pic img,
.pd-media img,
.ed-fig img,
.code-img img {
  transition: transform 1.05s var(--cv-ease), filter .8s ease !important;
}

.card:hover .thumb img,
.pcard:hover .pic img,
.ed-fig:hover img,
.code-img:hover img {
  transform: scale(1.085) !important;
  filter: contrast(1.04) brightness(1.04);
}

.pcard .pic {
  transform:
    perspective(1100px)
    rotateX(var(--cv-rx, 0deg))
    rotateY(var(--cv-ry, 0deg))
    translateZ(0);
  transition: transform .42s var(--cv-ease), border-color .4s ease, box-shadow .45s ease;
}

.pcard:hover .pic {
  border-color: rgba(216, 185, 111, .38);
  box-shadow: 0 24px 70px -34px rgba(216, 185, 111, .42);
}

.pcard .tag {
  overflow: hidden;
  animation: cv-tag-enter .75s .35s var(--cv-ease) both;
}

.pcard .add {
  overflow: hidden;
  transition: opacity .38s ease, transform .5s var(--cv-ease), background .3s ease, box-shadow .35s ease !important;
}

.pcard .add::before,
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, .34) 46%, transparent 68%);
  transform: translateX(-125%);
  transition: transform .75s var(--cv-ease);
}

.pcard:hover .add {
  box-shadow: 0 12px 34px -14px rgba(216, 185, 111, .52);
}

.pcard:hover .add::before,
.btn:hover::before {
  transform: translateX(125%);
}

.btn {
  position: relative;
  overflow: hidden;
}

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

.menu > li > a,
.foot-col a,
.view-all {
  transition-duration: .48s !important;
  transition-timing-function: var(--cv-ease) !important;
}

.drop {
  transform-origin: top center;
}

.menu > li:hover .drop {
  animation: cv-drop-open .45s var(--cv-ease) both;
}

.bag.open,
.mdrawer.open {
  box-shadow: 0 0 90px rgba(0, 0, 0, .8), -18px 0 65px rgba(190, 156, 86, .05);
}

.search.open .box {
  animation: cv-search-open .7s var(--cv-ease) both;
}

.bag.open .bag-head,
.bag.open .bag-items,
.bag.open .bag-foot,
.mdrawer.open > * {
  animation: cv-drawer-copy .65s var(--cv-ease) both;
}

.bag.open .bag-items { animation-delay: .08s; }
.bag.open .bag-foot { animation-delay: .16s; }

.toast.show {
  animation: cv-toast-in .45s var(--cv-ease) both;
}

.ed-cover .bg,
.ed-full img {
  animation: cv-editorial-breathe 16s ease-in-out infinite alternate;
}

.ed-cover .veil {
  animation: cv-veil-breathe 7s ease-in-out infinite alternate;
}

.ed-cover .inner > * {
  animation: cv-title-reveal 1.2s var(--cv-ease) both;
}

.ed-cover .inner > :nth-child(1) { animation-delay: .62s; }
.ed-cover .inner > :nth-child(2) { animation-delay: .78s; }
.ed-cover .inner > :nth-child(3) { animation-delay: .94s; }

.pd-gallery {
  perspective: 1200px;
}

.pd-gallery .pd-media img {
  animation: cv-product-settle 1.25s .45s var(--cv-ease) both;
}

.pd-thumbs button {
  transition: transform .4s var(--cv-ease), border-color .35s ease, opacity .35s ease !important;
}

.pd-thumbs button:hover,
.pd-thumbs button.on {
  transform: translateY(-4px);
}

.sizes button,
.qtybox button,
.filter-group button,
.tabs button {
  transition-duration: .42s !important;
  transition-timing-function: var(--cv-ease) !important;
}

.sizes button:hover,
.filter-group button:hover,
.tabs button:hover {
  transform: translateY(-2px);
}

.code-rule {
  transform-origin: left;
}

.code-grid.cv-visible .code-rule {
  animation: cv-rule-open 1s .35s var(--cv-ease) both;
}

.code-img,
.ed-fig,
.pd-media {
  overflow: hidden;
}

.foot .brand-logo {
  animation: none;
}

@keyframes cv-curtain-intro {
  0% { transform: scaleY(1); transform-origin: top; }
  58% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

@keyframes cv-mark-intro {
  0%, 15% { opacity: 0; transform: scale(.78); filter: blur(8px) drop-shadow(0 0 0 transparent); }
  45%, 70% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 28px rgba(216, 185, 111, .32)); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes cv-mark-out {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cv-grain {
  0% { transform: translate3d(-2%, 1%, 0); }
  25% { transform: translate3d(1%, -2%, 0); }
  50% { transform: translate3d(2%, 2%, 0); }
  75% { transform: translate3d(-1%, -1%, 0); }
  100% { transform: translate3d(0, 2%, 0); }
}

@keyframes cv-topbar-enter {
  from { opacity: 0; transform: translateY(-100%); letter-spacing: .5em; }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cv-nav-enter {
  from { opacity: 0; transform: translateY(-28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cv-nav-line {
  from { right: 50%; left: 50%; opacity: 0; }
  72% { right: 0; left: 0; opacity: 1; }
  to { right: 0; left: 0; opacity: 0; }
}

@keyframes cv-logo-enter {
  from { opacity: 0; transform: scale(.84); filter: blur(8px) brightness(2); }
  to { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}

@keyframes cv-brand-sweep {
  0%, 74% { left: -40%; opacity: 0; }
  78% { opacity: .72; }
  94% { left: 128%; opacity: .72; }
  100% { left: 128%; opacity: 0; }
}

@keyframes cv-hero-veil {
  0% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 100%); opacity: 0; }
}

@keyframes cv-hero-light {
  0%, 50% { left: -26%; opacity: 0; }
  56% { opacity: .9; }
  78% { left: 126%; opacity: .8; }
  83%, 100% { left: 126%; opacity: 0; }
}

@keyframes cv-copy-rise {
  from { opacity: 0; filter: blur(7px); transform: translateY(28px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes cv-title-reveal {
  from {
    opacity: 0;
    filter: blur(10px);
    clip-path: inset(0 0 100% 0);
    transform: translateY(50px) rotateX(-12deg);
  }
  to {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    transform: translateY(0) rotateX(0);
  }
}

@keyframes cv-rule-open {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes cv-page-copy {
  from { opacity: 0; filter: blur(6px); transform: translateY(24px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes cv-head-line {
  from { opacity: 0; transform: scaleX(0); }
  72% { opacity: 1; transform: scaleX(1); }
  to { opacity: 0; transform: scaleX(1); }
}

@keyframes cv-tag-enter {
  from { opacity: 0; transform: translate(-9px, -9px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes cv-drop-open {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) rotateX(-8deg); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) rotateX(0); }
}

@keyframes cv-search-open {
  from { opacity: 0; filter: blur(8px); transform: translateY(25px) scale(.97); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes cv-drawer-copy {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cv-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(28px) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes cv-editorial-breathe {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}

@keyframes cv-veil-breathe {
  from { opacity: .82; }
  to { opacity: .54; }
}

@keyframes cv-product-settle {
  from { opacity: 0; filter: blur(10px) brightness(.55); transform: scale(1.08); }
  to { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
}

@media (max-width: 900px) {
  .cv-cursor-light {
    display: none;
  }

  .cv-reveal:not(.cv-visible),
  .pcard.cv-reveal:not(.cv-visible),
  .card.cv-reveal:not(.cv-visible),
  .store.cv-reveal:not(.cv-visible),
  .value.cv-reveal:not(.cv-visible) {
    transform: translate3d(0, 42px, 0) scale(.98) !important;
  }
}

@media (hover: none) {
  .pcard .pic {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv-page-curtain,
  .cv-film-grain,
  .cv-progress,
  .cv-cursor-light {
    display: none !important;
  }

  .cv-reveal,
  .cv-reveal:not(.cv-visible),
  .cv-reveal.cv-visible,
  .hero *,
  .nav,
  .topbar p,
  .brand-logo,
  .ed-cover .bg,
  .ed-full img {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}