
/* BLOCK 05 V8 — four small cards geometry corrected.
   Birthday geometry is unchanged because it is already approved. */

:root{--o5-ease:cubic-bezier(.22,.61,.36,1)}

.occasion-exact-art{
  filter:none!important;
  transform:none!important;
  opacity:1!important;
}

.occasion-motion-layer{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  overflow:visible;
}

.occasion-card-visual{
  position:absolute;
  opacity:1;
  transform:scale(1);
  transform-origin:center center;
  border-radius:18px;
  overflow:hidden;
  pointer-events:none;
  transition:
    transform 180ms var(--o5-ease),
    filter 180ms ease,
    box-shadow 180ms ease;
}

.occasion-card-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  transform:none!important;
}

.occasion-card-visual.birthday{left:27.0411%;top:12.9380%;width:31.2883%;height:74.7978%}
.occasion-card-visual.friends{left:59.3204%;top:13.0728%;width:18.9240%;height:36.2534%}
.occasion-card-visual.date{left:78.9995%;top:13.0728%;width:19.2544%;height:36.2534%}
.occasion-card-visual.corporate{left:59.3204%;top:51.4825%;width:18.9240%;height:36.2534%}
.occasion-card-visual.play{left:78.9995%;top:51.4825%;width:19.2544%;height:36.2534%}

.occasion-hotspot{
  z-index:10;
  transform:none!important;
  transition:none!important;
  outline:none;
}

.occasion-exact[data-o5-hover="birthday"] .birthday,
.occasion-exact[data-o5-hover="friends"] .friends,
.occasion-exact[data-o5-hover="date"] .date,
.occasion-exact[data-o5-hover="corporate"] .corporate,
.occasion-exact[data-o5-hover="play"] .play{
  transform:scale(1.012);
  filter:brightness(1.04) saturate(1.02);
  box-shadow:
    0 0 0 2px rgba(111,246,255,.98),
    0 0 12px rgba(61,231,255,.42),
    0 0 28px rgba(44,204,255,.20);
  z-index:8;
}

.occasion-card-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 38%);
  transition:opacity 160ms ease;
}

.occasion-exact[data-o5-hover="birthday"] .birthday::before,
.occasion-exact[data-o5-hover="friends"] .friends::before,
.occasion-exact[data-o5-hover="date"] .date::before,
.occasion-exact[data-o5-hover="corporate"] .corporate::before,
.occasion-exact[data-o5-hover="play"] .play::before{
  opacity:1;
}

.occasion-card-visual::after,
.occasion-exact::after{
  display:none!important;
}

.occasion-hotspot:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 2px rgba(4,16,28,.96),0 0 0 4px rgba(117,245,255,.88);
}

@media(max-width:760px){
  .occasion-motion-layer{display:none!important}
}


/* BLOCK 05 V8.5 — title/description reveal masks */
.occasion-copy-reveal{
  position:absolute;
  left:2.60%;
  top:6.20%;
  width:20.90%;
  height:68.80%;
  z-index:7;
  pointer-events:none;
}

.copy-mask{
  position:absolute;
  left:0;
  width:100%;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(7,16,28,.96) 0%,rgba(5,16,28,.92) 75%,rgba(5,16,28,.72) 100%);
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(110,243,255,.10);
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  will-change:transform, opacity, filter;
}

.copy-mask::after{
  content:"";
  position:absolute;
  inset:-8% -22%;
  background:linear-gradient(100deg,transparent 0%,rgba(111,246,255,.06) 42%,rgba(140,255,255,.30) 50%,rgba(111,246,255,.06) 58%,transparent 100%);
  opacity:.88;
  transform:translateX(-48%);
}

.copy-mask-kicker{
  top:1.40%;
  width:92%;
  height:6.80%;
  border-radius:12px;
}
.copy-mask-title{
  top:10.10%;
  width:94%;
  height:34.80%;
  border-radius:22px;
}
.copy-mask-lead{
  top:49.80%;
  width:86%;
  height:24.20%;
  border-radius:20px;
}

.occasion-exact.is-copy-visible .copy-mask-kicker{
  animation:o5CopyReveal .84s cubic-bezier(.22,.61,.36,1) .04s forwards;
}
.occasion-exact.is-copy-visible .copy-mask-title{
  animation:o5CopyReveal .98s cubic-bezier(.22,.61,.36,1) .16s forwards;
}
.occasion-exact.is-copy-visible .copy-mask-lead{
  animation:o5CopyReveal 1.02s cubic-bezier(.22,.61,.36,1) .30s forwards;
}

.occasion-exact.is-copy-visible .copy-mask::after{
  animation:o5CopySweep .70s ease-out forwards;
}
.occasion-exact.is-copy-visible .copy-mask-title::after{ animation-delay:.20s; }
.occasion-exact.is-copy-visible .copy-mask-lead::after{ animation-delay:.34s; }

@keyframes o5CopyReveal{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
  58%{
    opacity:.78;
    transform:translate3d(0,-10px,0) scale(.992);
    filter:blur(.6px);
  }
  100%{
    opacity:0;
    transform:translate3d(0,-44px,0) scale(.976);
    filter:blur(2px);
  }
}

@keyframes o5CopySweep{
  0%{opacity:0;transform:translateX(-64%)}
  18%{opacity:.95}
  100%{opacity:0;transform:translateX(68%)}
}

@media(max-width:760px){
  .occasion-copy-reveal{display:none!important;}
}
