/*
 * pages-luxury.css
 * Shared styles for Luxury Technology pages:
 *   template-luxury-technology.php, template-lux-superyacht.php,
 *   template-lux-estates.php, template-lux-private-sanctuaries.php
 *
 * @package Prysmedge
 */

/* ── Gold gradient text ── */
.text-gradient-gold {
    background: linear-gradient(135deg, #d4af37 0%, #eac155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Override card-pe hover to gold on luxury pages ── */
.card-pe:hover { border-color: rgba(212,175,55,0.45) !important; }

/* ── Gold card ── */
.card-gold {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.card-gold:hover {
    border-color: rgba(212,175,55,0.45);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
    transform: translateY(-4px);
}

/* ── Hero ambient glow ── */
.luxury-hero-bg {
    background: radial-gradient(ellipse at 65% 50%, rgba(212,175,55,0.05) 0%, transparent 65%);
}

/* ── SVG / Gem Animations (all variants across luxury pages) ── */
@keyframes gemPulse      { 0%,100%{opacity:.3;} 50%{opacity:1;} }
@keyframes luxuryGlow    { 0%,100%{opacity:.15;} 50%{opacity:.45;} }
@keyframes diamondRotate { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
@keyframes facetShimmer  { 0%{opacity:.05;} 25%{opacity:.3;} 50%{opacity:.05;} 75%{opacity:.2;} 100%{opacity:.05;} }
@keyframes ringReveal    { 0%{stroke-dashoffset:750;opacity:0;} 20%{opacity:1;} 100%{stroke-dashoffset:0;opacity:1;} }
@keyframes orbitalPath   { 0%{stroke-dashoffset:500;} 100%{stroke-dashoffset:0;} }
@keyframes floorGlow     { 0%,100%{opacity:.3;} 50%{opacity:.7;} }
@keyframes dataPulse     { 0%{stroke-dashoffset:20;} 100%{stroke-dashoffset:0;} }
@keyframes wineTemp      { 0%,100%{opacity:.5;} 50%{opacity:1;} }

.gem-pulse      { animation: gemPulse      3s   ease-in-out infinite; }
.luxury-glow    { animation: luxuryGlow    4s   ease-in-out infinite; }
.diamond-rotate { animation: diamondRotate 30s  linear     infinite; transform-origin: center; }
.facet-shimmer  { animation: facetShimmer  6s   ease-in-out infinite; }
.ring-reveal    { animation: ringReveal    3s   ease-out   forwards; }
.orbital-path   { animation: orbitalPath   4s   linear     infinite; }
.floor-glow     { animation: floorGlow     3s   ease-in-out infinite; }
.data-pulse     { animation: dataPulse     2s   linear     infinite; }
.wine-temp      { animation: wineTemp      2.5s ease-in-out infinite; }

/* === From: template-contact-luxury.php === */
/* Note: .text-gradient-gold, .luxury-hero-bg already defined above.
   The gem keyframes below are the contact-luxury variants (slightly different timings). */

/* ── FORM FIELDS (gold theme) ── */
/* Note: .form-field, .field-label, .step-dot, .form-slides-* base styles in page-theme.css.
   These luxury overrides apply gold colours on top. */
.template-contact-luxury .form-field {
    background: #fafaf8;
    border-color: #e8e4d9;
}
.template-contact-luxury .form-field:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}
.template-contact-luxury .field-label {
    color: #a08c50;
}
.template-contact-luxury .step-dot {
    background: #e8e4d9;
}
.template-contact-luxury .step-dot.active {
    background: #d4af37;
}
.template-contact-luxury .sel-chip {
    border-color: #e8e4d9;
}
.template-contact-luxury .sel-chip:hover { border-color: #d4af37; color: #a08c50; }
.template-contact-luxury .sel-chip.active { background: #fdf8ec; border-color: #d4af37; color: #a08c50; }
.template-contact-luxury .sel-chip.active .chip-dot { background: #d4af37; }
.template-contact-luxury .sel-chip.radio.active { background: #fdf8ec; border-color: #d4af37; color: #a08c50; }

/* ── GOLD SUBMIT BUTTON ── */
.btn-gold {
    background: linear-gradient(135deg, #d4af37 0%, #eac155 100%);
    color: #1a1408;
    font-weight: 700;
    border: none;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.btn-gold:hover {
    background: #171717;
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.4);
    transform: translateY(-1px);
    color: #d4af37;
}

/* ── DELIVERABLE ITEMS (luxury variant) ── */
.luxury-deliverable-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 14px;
    background: rgba(212,175,55,0.03);
    transition: border-color 0.2s;
}
.luxury-deliverable-item:hover { border-color: rgba(212,175,55,0.35); }

/* ── GEM ANIMATION (contact-luxury variants) ── */
.gem-outer-ring {
    transform-origin: 200px 200px;
    animation: diamondRotate 30s linear infinite;
}
.gem-body {
    animation: gemPulse 4s ease-in-out infinite, luxuryGlow 4s ease-in-out infinite;
    transform-origin: 200px 200px;
}
.facet-1 { animation: facetShimmer 3.2s ease-in-out infinite; }
.facet-2 { animation: facetShimmer 3.2s ease-in-out infinite 0.6s; }
.facet-3 { animation: facetShimmer 3.2s ease-in-out infinite 1.2s; }
.facet-4 { animation: facetShimmer 3.2s ease-in-out infinite 1.8s; }
.facet-5 { animation: facetShimmer 3.2s ease-in-out infinite 2.4s; }
.facet-6 { animation: facetShimmer 3.2s ease-in-out infinite 3.0s; }
.reveal-ring {
    stroke-dasharray: 628;
    animation: ringReveal 2.4s cubic-bezier(0.4,0,0.2,1) 0.4s both;
}