/* ==========================================================================
   3D Texio Archive Design — Front-end styles
   All variables below are re-declared with sensible fallbacks; the real
   values are injected dynamically from the admin settings (see includes/archive.php).
   ========================================================================== */

:root{
  --spad-accent: #8a7bff;
  --spad-columns: 3;
  --spad-gap: 32px;
  --spad-card-radius: 20px;
  --spad-photo-radius: 14px;
  --spad-photo-height: 300px;
  --spad-photo-scale: 88%;
  --spad-button-bg: #8a7bff;
  --spad-button-text: #ffffff;
  --spad-bg-color: #f6f3ec;
  --spad-bg-image: none;
  --spad-bg-overlay: .4;
  --spad-banner-image: none;

  --spad-card-bg: rgba(255,255,255,.72);
  --spad-card-border: rgba(20,20,20,.08);
  --spad-text: #201f1c;
  --spad-text-dim: rgba(32,31,28,.6);
}

/* ---------- Base reset ---------- */
.spad-archive-page{
  margin:0;
  min-height:100vh;
  color:var(--spad-text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  position:relative;
  background-color:var(--spad-bg-color);
  background-image:var(--spad-bg-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.spad-archive-page *{ box-sizing:border-box; }

/* Soft accent-colored glow overlay (toggle: "Soft accent-color glow"). */
.spad-bg-glow::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--spad-accent) 12%, transparent), transparent 55%),
    radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--spad-accent) 8%, transparent), transparent 50%);
  pointer-events:none;
  z-index:0;
}

/* White wash over a background image so cards stay readable. */
.spad-bg-has-image::after{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,255,255,var(--spad-bg-overlay));
  pointer-events:none;
  z-index:0;
}

.spad-wrap{
  position:relative;
  z-index:1;
  max-width:1400px;
  margin:0 auto;
  padding:70px 40px 100px;
}

/* ---------- Banner ---------- */
.spad-banner{
  margin:0 auto 44px;
  border-radius:var(--spad-card-radius);
  overflow:hidden;
  position:relative;
}

.spad-banner-image{
  height:220px;
  background-image:var(--spad-banner-image);
  background-size:cover;
  background-position:center;
  box-shadow:0 1px 2px rgba(20,20,20,.04);
}

.spad-banner-text{
  text-align:center;
  font-size:clamp(24px,4vw,40px);
  font-weight:700;
  letter-spacing:-.02em;
  padding:36px 20px 10px;
  color:var(--spad-text);
}

.spad-banner-text > span{
  display:inline-block;
  max-width:100%;
}

/* -- Banner text animations -- */
.spad-anim-pulse{ animation:spad-banner-pulse 2.2s ease-in-out infinite; }
@keyframes spad-banner-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.035); opacity:.85; }
}

.spad-anim-typewriter{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  border-right:3px solid var(--spad-accent);
  width:0;
  max-width:100%;
  animation:
    spad-typewriter 2.4s steps(var(--spad-char-count), end) forwards,
    spad-caret-blink .8s step-end infinite;
}
@keyframes spad-typewriter{ from{ width:0; } to{ width:100%; } }
@keyframes spad-caret-blink{ 50%{ border-color:transparent; } }

.spad-anim-gradient-shine{
  display:inline-block;
  background-image:linear-gradient(90deg, var(--spad-text), var(--spad-accent), var(--spad-text));
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:spad-gradient-shine 3s linear infinite;
}
@keyframes spad-gradient-shine{ to{ background-position:200% center; } }

.spad-anim-fade-slide{
  opacity:0;
  transform:translateY(20px);
  animation:spad-fade-slide .8s ease .1s forwards;
}
@keyframes spad-fade-slide{ to{ opacity:1; transform:translateY(0); } }

.spad-anim-bounce{
  display:inline-block;
  opacity:0;
  animation:spad-banner-bounce .7s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes spad-banner-bounce{
  0%{ opacity:0; transform:scale(.7); }
  60%{ opacity:1; transform:scale(1.05); }
  100%{ opacity:1; transform:scale(1); }
}

/* ---------- Header ---------- */
.spad-header{
  text-align:center;
  margin-bottom:56px;
}

.spad-title{
  font-size:clamp(28px,4vw,44px);
  font-weight:700;
  letter-spacing:-.03em;
  margin:0;
  color:var(--spad-text);
}

/* ---------- Grid ---------- */
.spad-grid{
  display:grid;
  grid-template-columns:repeat(var(--spad-columns), minmax(0,1fr));
  gap:var(--spad-gap);
}

/* ---------- Card ---------- */
.spad-card{
  position:relative;
  border-radius:var(--spad-card-radius);
  padding:24px 24px 28px;
  text-align:center;
  overflow:hidden;
  opacity:0;
  transform:translateY(26px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .4s ease, border-color .4s ease;
  will-change: transform;
}

.spad-card.spad-in-view{
  opacity:1;
  transform:translateY(0);
}

/* ---- Card style variants (8 total) ---- */
.spad-style-glass .spad-card{
  background:var(--spad-card-bg);
  border:1px solid var(--spad-card-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 2px rgba(20,20,20,.04);
}
.spad-style-glass .spad-card:hover{
  border-color: color-mix(in srgb, var(--spad-accent) 45%, var(--spad-card-border));
  box-shadow: 0 30px 60px -24px rgba(20,20,20,.22), 0 0 0 1px color-mix(in srgb, var(--spad-accent) 20%, transparent) inset;
}

.spad-style-solid .spad-card{
  background:#fbf9f4;
  border:1px solid var(--spad-card-border);
}
.spad-style-solid .spad-card:hover{
  border-color: color-mix(in srgb, var(--spad-accent) 45%, var(--spad-card-border));
  box-shadow: 0 24px 48px -22px rgba(20,20,20,.18);
}

.spad-style-minimal .spad-card{
  background:transparent;
  border:1px solid rgba(20,20,20,.1);
}
.spad-style-minimal .spad-card:hover{
  border-color:var(--spad-accent);
}

.spad-style-outlined .spad-card{
  background:transparent;
  border:2px solid var(--spad-accent);
}
.spad-style-outlined .spad-card:hover{
  background:color-mix(in srgb, var(--spad-accent) 6%, transparent);
}

.spad-style-neumorphic .spad-card{
  background:#f3f1ec;
  border:none;
  box-shadow: 8px 8px 18px rgba(20,20,20,.08), -8px -8px 18px rgba(255,255,255,.9);
}
.spad-style-neumorphic .spad-card:hover{
  box-shadow: 10px 10px 22px rgba(20,20,20,.1), -10px -10px 22px rgba(255,255,255,.95);
}

.spad-style-shadow-float .spad-card{
  background:#ffffff;
  border:none;
  box-shadow:0 24px 48px -22px rgba(20,20,20,.18);
}
.spad-style-shadow-float .spad-card:hover{
  box-shadow:0 32px 60px -18px rgba(20,20,20,.24);
}

.spad-style-gradient-border .spad-card{
  background:#ffffff;
  border:2px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, var(--spad-accent), transparent 60%, var(--spad-accent));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.spad-style-gradient-border .spad-card:hover{
  box-shadow:0 24px 48px -24px color-mix(in srgb, var(--spad-accent) 45%, transparent);
}

.spad-style-flat .spad-card{
  background:#f8f6f1;
  border:none;
  box-shadow:none;
}

/* ---------- 3D badge ---------- */
.spad-badge{
  position:absolute;
  top:16px;
  inset-inline-start:16px;
  z-index:4;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  padding:5px 11px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(120deg, var(--spad-accent), color-mix(in srgb, var(--spad-accent) 60%, #4b3fcf));
  box-shadow:0 6px 16px -4px color-mix(in srgb, var(--spad-accent) 65%, transparent);
}

/* ---------- Photo / rotation stage ---------- */
.spad-photo{
  position:relative;
  height:var(--spad-photo-height);
  border-radius:var(--spad-photo-radius);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 68%, rgba(20,20,20,.05), transparent 70%);
  overflow:hidden;
  perspective:1000px;
  cursor:grab;
  touch-action: pan-y;
}

.spad-photo:active{ cursor:grabbing; }

.spad-photo::after{
  /* Soft ground shadow to suggest the product is sitting on a platform. */
  content:"";
  position:absolute;
  bottom:14px;
  left:50%;
  width:58%;
  height:20px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(20,20,20,.16), transparent 72%);
  filter:blur(2px);
  pointer-events:none;
  z-index:0;
}

.spad-frame-img,
.spad-static-img{
  position:relative;
  z-index:2;
  max-width:var(--spad-photo-scale);
  max-height:var(--spad-photo-scale);
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease;
  filter:drop-shadow(0 16px 18px rgba(20,20,20,.16));
}

/* Baseline hover lift: always on regardless of the chosen special effect,
   so every card feels interactive even with "None" selected. Effects that
   animate their own transform (zoom-blur, flip-shine...) simply override this. */
.spad-card:hover .spad-frame-img{
  transform: translateY(-6px) scale(1.035) rotateZ(.3deg);
  filter:drop-shadow(0 22px 22px rgba(20,20,20,.2));
}

/* No transition while actively dragging, so the frame swap feels instant. */
.spad-card[data-dragging="1"] .spad-frame-img{
  transition:none;
}

/* Tilt effect for products without rotation frames. */
.spad-card[data-mode="tilt"] .spad-photo{
  transform: perspective(900px) rotateX(var(--spad-ry,0deg)) rotateY(var(--spad-rx,0deg));
  transition: transform .35s ease;
}

.spad-card[data-mode="tilt"][data-tilting="1"] .spad-photo{
  transition: transform .05s linear;
}

.spad-no-image{
  color:var(--spad-text-dim);
  font-size:14px;
  letter-spacing:.03em;
}

/* ==========================================================================
   Hover effects (11 options: "None" + 10 modern effects)
   Every effect is scoped by a body class (spad-effect-*) set from the admin
   panel, so exactly one is active at a time.
   ========================================================================== */

/* Shared decorative elements, hidden until an effect activates them. */
.spad-glitch-layer{
  position:absolute;
  inset:0;
  margin:auto;
  max-width:var(--spad-photo-scale);
  max-height:var(--spad-photo-scale);
  object-fit:contain;
  z-index:1;
  opacity:0;
  pointer-events:none;
}

.spad-fx-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}

.spad-fx-ring{
  position:absolute;
  inset:8px;
  border-radius:calc(var(--spad-photo-radius) - 4px);
  pointer-events:none;
  opacity:0;
}

/* ---- 1) Glitch: jumpy chromatic split ---- */
.spad-effect-glitch .spad-glitch-r{ mix-blend-mode:multiply; filter: sepia(1) saturate(9) hue-rotate(-58deg) brightness(1.05); }
.spad-effect-glitch .spad-glitch-b{ mix-blend-mode:multiply; filter: sepia(1) saturate(9) hue-rotate(160deg) brightness(1.05); }
.spad-effect-glitch .spad-card:hover .spad-glitch-layer{
  opacity:.4;
  animation: spad-glitch-shift .55s steps(2,end) infinite;
}
.spad-effect-glitch .spad-card:hover .spad-glitch-b{ animation-delay:.07s; }
@keyframes spad-glitch-shift{
  0%   { transform:translate(0,0);       clip-path:inset(0 0 0 0); }
  20%  { transform:translate(-3px,2px);  clip-path:inset(8% 0 55% 0); }
  40%  { transform:translate(3px,-2px);  clip-path:inset(48% 0 8% 0); }
  60%  { transform:translate(-2px,1px);  clip-path:inset(28% 0 38% 0); }
  80%  { transform:translate(2px,-1px);  clip-path:inset(65% 0 4% 0); }
  100% { transform:translate(0,0);       clip-path:inset(0 0 0 0); }
}

/* ---- 2) RGB Pulse: smooth breathing chromatic aberration ---- */
.spad-effect-rgb-pulse .spad-glitch-r{ mix-blend-mode:multiply; filter: sepia(1) saturate(8) hue-rotate(-58deg); }
.spad-effect-rgb-pulse .spad-glitch-b{ mix-blend-mode:multiply; filter: sepia(1) saturate(8) hue-rotate(160deg); }
.spad-effect-rgb-pulse .spad-card:hover .spad-glitch-layer{
  opacity:.4;
  animation: spad-rgb-pulse 1.6s ease-in-out infinite;
}
.spad-effect-rgb-pulse .spad-card:hover .spad-glitch-b{ animation-delay:.3s; }
@keyframes spad-rgb-pulse{
  0%,100%{ transform:translate(0,0); opacity:.22; }
  50%{ transform:translate(3px,-2px); opacity:.5; }
}

/* ---- 3) Shine Sweep: diagonal light beam ---- */
.spad-effect-shine-sweep .spad-fx-overlay{
  z-index:3;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.85) 50%, transparent 58%);
  background-size:250% 250%;
  background-position:-60% -60%;
  mix-blend-mode:overlay;
}
.spad-effect-shine-sweep .spad-card:hover .spad-fx-overlay{
  opacity:1;
  animation:spad-shine-sweep 1.1s ease forwards;
}
@keyframes spad-shine-sweep{ from{ background-position:-60% -60%; } to{ background-position:160% 160%; } }

/* ---- 4) Scan Lines: holographic CRT lines ---- */
.spad-effect-scan-lines .spad-fx-overlay{
  z-index:3;
  background:repeating-linear-gradient(0deg, rgba(20,20,20,.09) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply;
}
.spad-effect-scan-lines .spad-card:hover .spad-fx-overlay{
  opacity:.55;
  animation:spad-scan-move 1.2s linear infinite;
}
.spad-effect-scan-lines .spad-card:hover .spad-frame-img{
  filter:hue-rotate(8deg) saturate(1.15) drop-shadow(0 16px 18px rgba(20,20,20,.16));
}
@keyframes spad-scan-move{ from{ background-position:0 0; } to{ background-position:0 40px; } }

/* ---- 5) Outline Pulse: glowing pulsing ring ---- */
.spad-effect-outline-pulse .spad-card:hover .spad-fx-ring{
  opacity:1;
  animation:spad-outline-pulse 1.3s ease-out infinite;
}
@keyframes spad-outline-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--spad-accent) 55%, transparent); }
  100%{ box-shadow:0 0 0 18px color-mix(in srgb, var(--spad-accent) 0%, transparent); }
}

/* ---- 6) Neon Edge: glowing neon border ---- */
.spad-effect-neon-edge .spad-card:hover .spad-photo{
  box-shadow:0 0 0 2px var(--spad-accent), 0 0 26px 4px color-mix(in srgb, var(--spad-accent) 65%, transparent);
}
.spad-effect-neon-edge .spad-card:hover .spad-frame-img{
  filter:brightness(1.05) contrast(1.08) drop-shadow(0 0 10px color-mix(in srgb, var(--spad-accent) 55%, transparent));
}

/* ---- 7) Zoom Blur: cinematic focus pull ---- */
.spad-effect-zoom-blur .spad-card:hover .spad-frame-img{
  animation:spad-zoom-blur .5s ease-out;
}
@keyframes spad-zoom-blur{
  0%{ filter:blur(0) drop-shadow(0 16px 18px rgba(20,20,20,.16)); transform:scale(1); }
  35%{ filter:blur(6px) drop-shadow(0 16px 18px rgba(20,20,20,.16)); transform:scale(1.12); }
  100%{ filter:blur(0) drop-shadow(0 22px 22px rgba(20,20,20,.2)); transform:translateY(-6px) scale(1.035); }
}

/* ---- 8) Flip Shine: 3D tilt with a light sweep ---- */
.spad-effect-flip-shine .spad-card:hover .spad-frame-img{
  transform:translateY(-4px) rotateY(14deg) scale(1.04);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.spad-effect-flip-shine .spad-fx-overlay{
  z-index:3;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.8) 50%, transparent 62%);
  background-size:250% 250%;
  background-position:-60% -60%;
  mix-blend-mode:overlay;
}
.spad-effect-flip-shine .spad-card:hover .spad-fx-overlay{
  opacity:1;
  animation:spad-shine-sweep .8s ease forwards;
}

/* ---- 9) Particle Glow: floating light orbs behind the product ---- */
.spad-effect-particle-glow .spad-fx-overlay{
  z-index:0;
  filter:blur(6px);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--spad-accent) 60%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 72% 68%, color-mix(in srgb, var(--spad-accent) 50%, transparent) 0%, transparent 38%);
}
.spad-effect-particle-glow .spad-card:hover .spad-fx-overlay{
  opacity:.85;
  animation:spad-particle-float 3s ease-in-out infinite;
}
@keyframes spad-particle-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6px,-8px) scale(1.08); }
}

/* ---- 10) Holo Shift: animated holographic colors ---- */
.spad-effect-holo-shift .spad-card:hover .spad-frame-img{
  animation:spad-holo-shift 2.2s linear infinite;
}
@keyframes spad-holo-shift{
  0%{ filter:hue-rotate(0deg) saturate(1.3) drop-shadow(0 16px 18px rgba(20,20,20,.16)); }
  100%{ filter:hue-rotate(360deg) saturate(1.3) drop-shadow(0 16px 18px rgba(20,20,20,.16)); }
}

/* ---------- Hint pills ---------- */
.spad-drag-hint,
.spad-explore-hint{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translate(-50%,0);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:500;
  color:#fff;
  background:rgba(20,20,20,.55);
  padding:5px 10px;
  border-radius:999px;
  z-index:5;
  pointer-events:none;
}

.spad-drag-hint{
  opacity:.9;
  transition:opacity .3s ease;
}

.spad-card[data-interacted="1"] .spad-drag-hint{
  opacity:0;
}

/* The "Explore in 3D" hint only appears while hovering, to tempt a click. */
.spad-explore-hint{
  opacity:0;
  transform:translate(-50%,8px);
  transition:opacity .3s ease, transform .3s ease;
}

.spad-card:hover .spad-explore-hint{
  opacity:1;
  transform:translate(-50%,0);
}

/* ---------- Name & CTA ---------- */
.spad-name{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:6px 0 18px;
  color:var(--spad-text);
}

.spad-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  padding:12px 30px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:999px;
  border:2px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

/* ---- Button style variants (4 total) ---- */
.spad-btn-filled .spad-cta{
  background:linear-gradient(120deg, var(--spad-button-bg), color-mix(in srgb, var(--spad-button-bg) 55%, #4b3fcf));
  color:var(--spad-button-text);
  box-shadow:0 10px 24px -8px color-mix(in srgb, var(--spad-button-bg) 65%, transparent);
}
.spad-btn-filled .spad-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px -8px color-mix(in srgb, var(--spad-button-bg) 75%, transparent);
  color:var(--spad-button-text);
}

.spad-btn-outline .spad-cta{
  background:transparent;
  color:var(--spad-button-bg);
  border-color:var(--spad-button-bg);
}
.spad-btn-outline .spad-cta:hover{
  background:var(--spad-button-bg);
  color:var(--spad-button-text);
  transform:translateY(-3px);
}

.spad-btn-ghost .spad-cta{
  background:color-mix(in srgb, var(--spad-button-bg) 14%, transparent);
  color:var(--spad-button-bg);
}
.spad-btn-ghost .spad-cta:hover{
  background:color-mix(in srgb, var(--spad-button-bg) 26%, transparent);
  transform:translateY(-3px);
  color:var(--spad-button-bg);
}

.spad-btn-gradient .spad-cta{
  background:linear-gradient(120deg, var(--spad-button-bg), color-mix(in srgb, var(--spad-button-bg) 30%, #fff));
  color:var(--spad-button-text);
  box-shadow:0 10px 24px -8px color-mix(in srgb, var(--spad-button-bg) 55%, transparent);
}
.spad-btn-gradient .spad-cta:hover{
  transform:translateY(-3px);
  color:var(--spad-button-text);
}

/* ---------- Pagination ---------- */
.spad-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:56px;
  flex-wrap:wrap;
}

.spad-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 10px;
  border-radius:10px;
  color:var(--spad-text);
  background:var(--spad-card-bg);
  border:1px solid var(--spad-card-border);
  text-decoration:none;
  font-size:14px;
  transition:background .25s ease, border-color .25s ease;
}

.spad-pagination .page-numbers.current,
.spad-pagination .page-numbers:hover{
  border-color:var(--spad-accent);
  background:color-mix(in srgb, var(--spad-accent) 14%, transparent);
}

.spad-empty{
  text-align:center;
  color:var(--spad-text-dim);
  padding:80px 0;
  font-size:16px;
  position:relative;
  z-index:1;
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .spad-grid{ grid-template-columns:repeat(min(2, var(--spad-columns)),1fr); }
}

@media(max-width:640px){
  .spad-wrap{ padding:48px 22px 70px; }
  .spad-grid{ grid-template-columns:1fr; gap:22px; }
  .spad-photo{ height:min(var(--spad-photo-height), 270px); }
  .spad-banner-image{ height:160px; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .spad-card, .spad-frame-img, .spad-photo, .spad-cta, .spad-glitch-layer,
  .spad-fx-overlay, .spad-fx-ring, .spad-anim-pulse, .spad-anim-typewriter,
  .spad-anim-gradient-shine, .spad-anim-fade-slide, .spad-anim-bounce{
    transition:none !important;
    animation:none !important;
  }
}


/* v1.9.1 premium 3D / UIverse-inspired motion layer */
.spad-banner-video{height:260px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.spad-banner-video video{width:100%;height:100%;object-fit:cover}
.spad-photo{transform-style:preserve-3d;perspective:1200px}
.spad-card:hover .spad-photo{animation:spadFloat3d 2.5s ease-in-out infinite}
@keyframes spadFloat3d{50%{transform:translateY(-8px) rotateX(2deg)}}
.spad-card .spad-photo:after{content:"";position:absolute;inset:-30%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.55),transparent 65%);transform:translateX(-120%) rotate(12deg);transition:.8s;pointer-events:none}
.spad-card:hover .spad-photo:after{transform:translateX(120%) rotate(12deg)}
.spad-effect-holo-shift .spad-frame-img{animation:spadHolo 5s linear infinite}
@keyframes spadHolo{50%{filter:hue-rotate(60deg) saturate(1.3)}}
.spad-cta{position:relative;overflow:hidden;isolation:isolate}
.spad-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%);transition:.6s;z-index:-1}
.spad-cta:hover:before{transform:translateX(120%)}
.spad-title-style-modern span{font-family:var(--spad-title-font);font-weight:800;letter-spacing:-.03em}
.spad-title-style-luxury span{font-family:Georgia,serif;letter-spacing:.04em;text-transform:uppercase}
.spad-title-style-neon span{text-shadow:0 0 15px var(--spad-accent),0 0 35px var(--spad-accent)}
.spad-title-style-minimal span{font-weight:500;letter-spacing:.02em}