/* ============================================================
   Shpper Card Slider — Elementor Widget Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&display=swap');

.scs-scene {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  padding-top: 75px;
  background: #1b2a3e;
  font-family: 'Sora', sans-serif;
}

.scs-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 18% 28%, rgba(74,144,217,.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 82% 72%, rgba(74,144,217,.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Titles ── */
.scs-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.022em;
  user-select: none;
  pointer-events: none;
  color: #ffffff;
  text-align: center;
  width: 100%;
  position: absolute;
}

.scs-title-initial {
  font-size: clamp(2.2rem, 9vw, 7rem);
  top: 35%;
  transform: translateY(-35%);
  opacity: 1;
  z-index: 25;
  transition: opacity 1.4s cubic-bezier(0.4,0,1,1),
              transform 1.4s cubic-bezier(0.55,0,1,0.8);
  animation: scs-fadeUp .7s .1s both;
}

.scs-title-initial.hidden {
  opacity: 0;
  transform: translateY(300px) rotate(5deg) scale(0.85);
  pointer-events: none;
}

.scs-title-expanded {
  font-size: clamp(1.6rem, 6vw, 8rem);
  top: clamp(28px, 25vh, 250px);
  opacity: 0;
  transform: translateY(-80px);
  transition: none;
  z-index: 9;
}

.scs-title-expanded.slide-in {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.2s cubic-bezier(0.34,1.1,0.64,1),
              opacity 1s ease;
  font-size: clamp(1.6rem, 6vw, 6rem);
}

/* ── Card Stage ── */
.scs-card-stage {
  position: relative;
  width: clamp(160px, 42vw, 300px);
  height: clamp(320px, 80vw, 535px);
  z-index: 2;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Individual Card ── */
.scs-card {
  position: absolute;
  width: clamp(160px, 42vw, 300px);
  height: clamp(320px, 80vw, 535px);
  border-radius: clamp(14px, 3vw, 24px);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  top: -60px;
  left: 50%;
  transform: translateX(-50%) scale(.82);
  transform-origin: bottom center;
  opacity: 0;
  will-change: transform, opacity;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.scs-card.fan-visible {
  border: 1px solid rgba(255,255,255,0.85);
  width: clamp(170px, 44vw, 325px);
  height: clamp(310px, 75vw, 535px);
  top: clamp(20px, 5vw, 50px);
  transition: width 1.8s cubic-bezier(0.25,0.46,0.45,0.94),
              height 1.8s cubic-bezier(0.25,0.46,0.45,0.94),
              top 1.8s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 1.8s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 1s ease;
}

.scs-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.4s ease;
}

.scs-card:hover img {
  transform: scale(1.06);
  filter: brightness(1.08);
}

/* ── Arrow Hints ── */
.scs-arrow-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease .5s;
}

.scs-arrow-hint--left  { left: 33%; transform: translateY(-60%); top: 50%; }
.scs-arrow-hint--right { right: 33%; transform: translateY(-60%); top: 50%; }

.scs-arrow-hint svg { width: clamp(22px, 5vw, 42px); opacity: .75; }
.scs-arrow-hint--left svg { transform: rotate(15deg); }

.scs-arrow-hint--right {
  animation: scs-arrowBounceR 1.8s 1s ease-in-out infinite;
}

/* ── Button ── */
.scs-btn {
  position: absolute;
  bottom: calc(clamp(28px, 5vh, 80px) - 0px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(240px, 84vw, 320px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #1b2a3e;
  font-family: 'Sora', sans-serif;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 700;
  padding: clamp(16px, 4vw, 22px) clamp(32px, 8vw, 60px);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(0,0,0,.28);
  z-index: 30;
  white-space: nowrap;
  text-decoration: none;
  outline: 0px solid rgba(255,255,255,0);
  transition: box-shadow 0.5s ease,
              transform 0.5s ease,
              background 0.5s ease,
              letter-spacing 0.5s ease,
              opacity 0.5s ease;
  animation: scs-fadeUpBtn .7s .3s both;
}

/* ── Scroll Zones ── */
.scs-scroll-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 5%;
  z-index: 5;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.scs-scroll-zone--left  { left: 0;  background: linear-gradient(to right,  rgba(27,42,62,0.18), transparent); }
.scs-scroll-zone--right { right: 0; background: linear-gradient(to left, rgba(27,42,62,0.18), transparent); }

.scs-scroll-zone .scs-zone-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.scs-scroll-zone:hover .scs-zone-label { opacity: 1; }
.scs-scroll-zone--left  .scs-zone-label { left: -20px; }
.scs-scroll-zone--right .scs-zone-label { right: -20px; transform: translateY(-40%) rotate(90deg); }
.scs-scroll-zone.visible { opacity: 1; }

/* ── Keyframes ── */
@keyframes scs-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scs-fadeUpBtn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes scs-spin { to { transform: rotate(360deg); } }

@keyframes scs-breeze-0  { 0%,100%{ translate:0 0px;  rotate:0.0deg; } 50%{ translate:0 -7px; rotate: 0.4deg; } }
@keyframes scs-breeze-l1 { 0%,100%{ translate:0 0px;  rotate:0.0deg; } 50%{ translate:0 -5px; rotate:-0.3deg; } }
@keyframes scs-breeze-r1 { 0%,100%{ translate:0 0px;  rotate:0.0deg; } 50%{ translate:0 -6px; rotate: 0.5deg; } }
@keyframes scs-breeze-l2 { 0%,100%{ translate:0 0px;  rotate:0.0deg; } 50%{ translate:0 -4px; rotate:-0.5deg; } }
@keyframes scs-breeze-r2 { 0%,100%{ translate:0 0px;  rotate:0.0deg; } 50%{ translate:0 -5px; rotate: 0.3deg; } }
@keyframes scs-breeze-l3 { 0%,100%{ translate:0 0px;  rotate:0.0deg; } 50%{ translate:0 -3px; rotate:-0.4deg; } }
@keyframes scs-breeze-r3 { 0%,100%{ translate:0 0px;  rotate:0.0deg; } 50%{ translate:0 -4px; rotate: 0.6deg; } }
@keyframes scs-breeze-fan-l { 0%,100%{ translate:0 0px; } 50%{ translate:0 -8px; } }
@keyframes scs-breeze-fan-r { 0%,100%{ translate:0 0px; } 50%{ translate:0 -8px; } }
@keyframes scs-breeze-fan-c { 0%,100%{ translate:0 0px; } 50%{ translate:0 -10px; } }

@keyframes scs-arrowBounceR {
  0%,100%{ transform: translateY(-60%) translateX(0); }
  50%    { transform: translateY(-60%) translateX(5px); }
}

/* ── Responsive ── */
@media only screen and (max-width: 1600px) {
  .scs-arrow-hint--left  { left: 26%; }
  .scs-arrow-hint--right { right: 26%; }
  .scs-card, .scs-card-stage { width: 260px; height: 433px; }
  .scs-card.fan-visible       { width: 260px; height: 433px; }
}

@media only screen and (max-width: 1366px) {
  .scs-arrow-hint--left  { left: 20%; }
  .scs-arrow-hint--right { right: 20%; }
}

@media only screen and (max-width: 1024px) {
  .scs-card, .scs-card-stage { width: clamp(140px,34vw,220px); height: clamp(260px,64vw,420px); }
  .scs-card.fan-visible       { width: clamp(145px,36vw,230px); height: clamp(255px,62vw,410px); top: clamp(40px,8vw,80px); }
}

@media only screen and (max-width: 768px) {
  .scs-arrow-hint--left  { left: 15%; }
  .scs-arrow-hint--right { right: 15%; }
}

@media only screen and (max-width: 480px) {
  .scs-arrow-hint--left  { left: 10%; top: 42%; }
  .scs-arrow-hint--right { right: 10%; top: 42%; }
  .scs-title-expanded    { top: clamp(14px,3vh,28px); }
  .scs-scene             { padding-top: 0; }
}

@media only screen and (max-width: 500px) {
  .scs-btn { bottom: calc(clamp(40px,6vh,80px) + 50px) !important; }
}