/* Shared visual area */
.card-visual {
    width:100%; height:168px;
    position:relative; overflow:hidden;
    border-radius:8px 8px 0 0;
    border-bottom: 1px solid var(--gold-border);
}

/* ══════════════════════════════════════════
   TRAVEL visual — Elephant journey at night
══════════════════════════════════════════ */
.vis-travel {
    background: linear-gradient(180deg,
        #1a1830 0%,       /* deep indigo night */
        #2a1e30 40%,
        #3a2820 75%,
        #2a1808 100%);
}

/* Moon */
.tr-moon {
    position:absolute; top:18px; right:22px;
    width:26px; height:26px; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #fff4d0 0%, #e8c860 70%, #c8a040 100%);
    box-shadow: 0 0 20px rgba(232,200,96,0.55), 0 0 40px rgba(232,200,96,0.25);
    animation: moonPulse 5s ease-in-out infinite;
}
@keyframes moonPulse {
    0%,100% { box-shadow: 0 0 20px rgba(232,200,96,0.55), 0 0 40px rgba(232,200,96,0.25); }
    50%      { box-shadow: 0 0 28px rgba(232,200,96,0.75), 0 0 60px rgba(232,200,96,0.4); }
}

/* Stars */
.tr-stars { position:absolute; inset:0; }
.tr-star {
    position:absolute; color: #fff4d0;
    font-size: 12px; line-height:1;
    animation: starBlink 2.8s ease-in-out infinite;
    animation-delay: var(--bd, 0s);
    opacity:0;
}
@keyframes starBlink {
    0%,100% { opacity:.2; transform:scale(.6); }
    50%      { opacity:1;  transform:scale(1.1); }
}

/* Jungle trees — silhouettes */
.tr-tree {
    position:absolute; bottom:32px;
    width:0; height:0;
    border-left:  14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 42px solid #0a0a14;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
}
.tr-tree::before {
    content:''; position:absolute;
    top:28px; left:-18px;
    width:0; height:0;
    border-left:  18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 34px solid #0a0a14;
}
.tr-tree.t1 { left:4%;  }
.tr-tree.t2 { left:32%; bottom:36px; }
.tr-tree.t3 { right:4%; bottom:34px; }

/* Ground */
.tr-ground {
    position:absolute; bottom:0; width:100%;
    height:34px;
    background: linear-gradient(180deg, #2e1e0e 0%, #1a0e04 100%);
    border-top: 1px solid rgba(200,160,48,0.12);
}

/* Elephant walking */
.tr-elephant {
    position:absolute; bottom:28px;
    font-size:32px;
    animation: elephantWalk 7s ease-in-out infinite;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5));
    z-index:4;
}
@keyframes elephantWalk {
    0%   { left:-14%; transform: translateY(0) scaleX(1); }
    8%   { transform: translateY(-2px) scaleX(1); }
    16%  { transform: translateY(0) scaleX(1); }
    48%  { left:70%; transform: translateY(-1px) scaleX(1); }
    50%  { left:70%; transform: scaleX(-1); }
    98%  { left:-14%; transform: scaleX(-1); }
    100% { left:-14%; transform: scaleX(1); }
}

/* Small lantern glow over elephant's back */
.tr-lantern {
    position:absolute; bottom:68px;
    width:6px; height:6px; border-radius:50%;
    background: #ffcc55;
    box-shadow: 0 0 10px rgba(255,204,85,0.9), 0 0 18px rgba(255,204,85,0.6);
    animation: lanternFollow 7s ease-in-out infinite, lanternFlicker 2s ease-in-out infinite;
    z-index:5;
}
@keyframes lanternFollow {
    0%   { left:-9%; }
    48%  { left:76%; }
    50%  { left:76%; }
    98%  { left:-9%; }
    100% { left:-9%; }
}
@keyframes lanternFlicker {
    0%,100% { opacity:1; }
    50%      { opacity:.75; }
}

/* ══════════════════════════════════════════
   CAFÉ visual — Thai teahouse (sala)
══════════════════════════════════════════ */
.vis-cafe {
    background: linear-gradient(180deg,
        #1a0f08 0%,
        #2a1a0a 50%,
        #3a2410 100%);
    display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:12px;
}

/* Multi-tiered Thai roof */
.cf-roof {
    position:absolute; top:0; left:0; right:0;
    height:70px;
    pointer-events:none;
}
.cf-roof-tier {
    position:absolute; left:50%;
    background: #0e0804;
    border-bottom: 2px solid var(--gold);
    transform: translateX(-50%);
}
/* Upper tier */
.cf-roof-tier.t1 {
    top:0; width:140px; height:36px;
    clip-path: polygon(0% 100%, 8% 40%, 28% 12%, 50% 0%, 72% 12%, 92% 40%, 100% 100%);
}
/* Lower tier */
.cf-roof-tier.t2 {
    top:30px; width:200px; height:44px;
    clip-path: polygon(0% 100%, 6% 30%, 24% 10%, 50% 0%, 76% 10%, 94% 30%, 100% 100%);
}
/* Chofa (finial — upturned eave decoration) */
.cf-finial {
    position:absolute; top:-6px; left:50%;
    transform: translateX(-50%);
    width:3px; height:18px;
    background: var(--gold);
    border-radius: 2px 2px 0 0;
}
.cf-finial::before, .cf-finial::after {
    content:''; position:absolute;
    width:4px; height:4px;
    background: var(--gold);
    border-radius:50%;
}
.cf-finial::before { top:-3px; left:-0.5px; }
.cf-finial::after  { top:5px; left:-0.5px; }

/* Hanging lanterns */
.cf-lantern {
    position:absolute;
    width:12px; height:16px;
    background: radial-gradient(ellipse at 50% 60%, #ffcc55 0%, #c87820 70%, #8a4a10 100%);
    border-radius: 45% 45% 55% 55%;
    box-shadow: 0 0 12px rgba(255,180,80,0.65);
    animation: lanternSwing 3s ease-in-out infinite;
    transform-origin: top center;
    top: 72px;
}
.cf-lantern::before {
    content:''; position:absolute;
    top:-10px; left:50%; transform:translateX(-50%);
    width:1px; height:10px;
    background: var(--gold-dark);
}
.cf-lantern.cl1 { left:18%; animation-delay: 0s; }
.cf-lantern.cl2 { left:50%; transform: translateX(-50%); animation-delay: -1s; top:74px; }
.cf-lantern.cl3 { right:18%; animation-delay: -2s; }

@keyframes lanternSwing {
    0%,100% { transform: translateX(var(--off,0px)) rotate(-4deg); }
    50%      { transform: translateX(var(--off,0px)) rotate(4deg); }
}
.cf-lantern.cl2 {
    --off: -6px;
    animation-name: lanternSwingCenter;
}
@keyframes lanternSwingCenter {
    0%,100% { transform: translateX(-50%) rotate(-4deg); }
    50%      { transform: translateX(-50%) rotate(4deg); }
}

/* Thai tea cup (orange Thai tea) */
.cafe-scene { position:relative; width:88px; height:112px; flex-shrink:0; margin-bottom:-4px; }

.cafe-saucer {
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:72px; height:12px;
    background: linear-gradient(180deg, #d4a060 0%, #a06830 100%);
    border-radius:50%;
    box-shadow: 0 5px 10px rgba(0,0,0,.4);
}
.cafe-cup {
    position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
    width:52px; height:44px;
    background: linear-gradient(140deg, #e8d8b0 0%, #b89a60 100%);
    border: 1px solid var(--gold-dark);
    border-radius:4px 4px 10px 10px;
}
.cafe-liquid {
    position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:42px; height:12px;
    background: radial-gradient(ellipse, #e8691a 0%, #a84a08 100%);
    border-radius:50%;
    animation: liquidShimmer 3s ease-in-out infinite;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}
@keyframes liquidShimmer {
    0%,100% { opacity:.88; }
    50%      { opacity:1; }
}
.cafe-handle {
    position:absolute; bottom:19px; right:12px;
    width:16px; height:22px;
    border: 4px solid #b89a60;
    border-left:none;
    border-radius: 0 10px 10px 0;
}

.steam {
    position:absolute;
    width:3px; border-radius:3px;
    background: rgba(255,232,180,0.7);
    bottom:53px;
    animation: steamRise 2.6s ease-in-out infinite;
}
.st1 { left:24px; animation-delay:0s;    --sw:5px; }
.st2 { left:36px; animation-delay:.85s;  --sw:-5px; }
.st3 { left:48px; animation-delay:1.7s;  --sw:4px; }

@keyframes steamRise {
    0%   { height:0;    opacity:0; transform:translateY(0) scaleX(1); }
    15%  { opacity:.75; }
    100% { height:30px; opacity:0; transform:translateY(-30px) translateX(var(--sw,4px)) scaleX(1.6); }
}

/* ══════════════════════════════════════════
   GARDEN visual — Lotus pond at dusk
══════════════════════════════════════════ */
.vis-garden {
    background: linear-gradient(180deg,
        #3a1a3a 0%,       /* violet dusk */
        #6a2838 35%,      /* amber-red sunset */
        #8a4830 55%,
        #2a1a1a 75%);
    overflow:hidden;
}

/* Distant prangs on horizon */
.gd-prang {
    position:absolute;
    background: #1a0808;
    opacity: .9;
    clip-path: polygon(
        50% 0%, 56% 20%, 60% 40%, 64% 60%, 70% 80%, 100% 100%, 0% 100%, 30% 80%, 36% 60%, 40% 40%, 44% 20%
    );
}
.gpr1 { width:20px; height:36px; bottom:68px; left:18%; }
.gpr2 { width:26px; height:44px; bottom:68px; left:72%; }

/* Pond water */
.gd-pond {
    position:absolute; bottom:0; width:100%;
    height:78px;
    background:
        linear-gradient(180deg,
            #2a3a5a 0%,
            #1a2a4a 50%,
            #0a1830 100%);
    border-top: 1px solid rgba(200,160,48,0.25);
}

/* Water ripples */
.gd-ripple {
    position:absolute;
    border: 1px solid rgba(232,192,80,0.3);
    border-radius:50%;
    animation: ripple 4s ease-out infinite;
}
.gd-ripple.r1 { bottom:40px; left:20%; width:0; height:0; animation-delay:0s; }
.gd-ripple.r2 { bottom:30px; left:65%; width:0; height:0; animation-delay:2s; }
@keyframes ripple {
    0%   { width:0; height:0; opacity:.8; }
    100% { width:60px; height:16px; opacity:0; transform:translate(-30px,-8px); }
}

/* Lotus pads (CSS ellipses) */
.gd-pad {
    position:absolute;
    width:18px; height:5px;
    background: #2a5a3a;
    border-radius:50%;
    opacity:.75;
}
.gd-pad.gp1 { bottom:40px; left:12%; }
.gd-pad.gp2 { bottom:34px; left:58%; width:22px; }

/* Lotus flowers */
.gd-lotus {
    position:absolute;
    font-size:20px;
    animation: lotusBob 3.5s ease-in-out infinite;
    animation-delay: var(--sd, 0s);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.gd-lotus.gl1 { bottom:42px; left:11%; }
.gd-lotus.gl2 { bottom:36px; left:57%; }
.gd-lotus.gl3 { bottom:48px; left:80%; font-size:16px; }

@keyframes lotusBob {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-4px) rotate(3deg); }
}

/* Fireflies */
.gd-firefly {
    position:absolute;
    width:3px; height:3px;
    background: #ffeaa0;
    border-radius:50%;
    box-shadow: 0 0 6px rgba(255,234,160,0.9), 0 0 12px rgba(255,234,160,0.6);
    animation: firefly 5s ease-in-out infinite;
}
.ff1 { top:20%; left:18%; animation-delay:0s; }
.ff2 { top:35%; left:50%; animation-delay:1.5s; }
.ff3 { top:28%; left:78%; animation-delay:3s; }
.ff4 { top:45%; left:34%; animation-delay:2.2s; }
@keyframes firefly {
    0%,100% { opacity:0; transform: translate(0,0); }
    25%      { opacity:1; transform: translate(10px,-10px); }
    50%      { opacity:.7; transform: translate(20px,0); }
    75%      { opacity:1; transform: translate(14px,-6px); }
}

/* Grass bank / ground for dog */
.gd-ground {
    position:absolute; bottom:72px; left:0; right:0;
    height:8px;
    background: linear-gradient(180deg, #4a6a3a 0%, #2a4020 100%);
    border-radius: 50% 50% 0 0 / 6px 6px 0 0;
}
.gd-dog {
    position:absolute; bottom:72px; font-size:22px;
    animation: dogRun 7s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
    z-index:3;
}
@keyframes dogRun {
    0%  { left:8%;  transform:scaleX(1); }
    42% { left:62%; transform:scaleX(1); }
    50% { left:62%; transform:scaleX(-1); }
    92% { left:8%;  transform:scaleX(-1); }
    100%{ left:8%;  transform:scaleX(1); }
}