/* Component styles: sliders, cards, modal, ticket, motion and responsive UI */
/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal-stagger.in>*{opacity:1;transform:translateY(0)}
.reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.15s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.25s}

.parallax{will-change:transform}

/* Before/After — original comparison card and movable handle */
.img-comp-container{position:relative;height:320px;aspect-ratio:1.45/1;border-radius:1.25rem;overflow:hidden;box-shadow:0 20px 40px -10px rgba(0,0,0,.15);user-select:none;touch-action:pan-y;background:#eaf1f4}
@media(min-width:640px){.img-comp-container{height:420px}}
@media(min-width:768px){.img-comp-container{height:460px}}
.img-comp-img{position:absolute;inset:0;overflow:hidden}
.img-comp-img img{position:absolute;top:0;width:200%;height:100%;max-width:none;object-fit:fill;pointer-events:none;user-select:none}
.comparison-before img{left:0}
.comparison-after{width:100%;left:0;right:auto;clip-path:inset(0 50% 0 0)}
.comparison-after img{left:-100%}
.img-comp-slider{position:absolute;z-index:9;cursor:ew-resize;width:48px;height:48px;background:var(--teal);border:3px solid #fff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 20px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;transition:box-shadow .15s ease,scale .15s ease;touch-action:none}
.img-comp-slider:active{scale:1.12}
.img-comp-slider:focus-visible{outline:3px solid #D4AF37;outline-offset:4px}
.img-comp-slider::before{content:'';position:absolute;top:-500px;bottom:-500px;left:50%;width:3px;background:var(--teal);transform:translateX(-50%);z-index:-1;pointer-events:none}
.comp-label{position:absolute;bottom:16px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;color:#fff;z-index:5;pointer-events:none;white-space:nowrap}

/* ===== Why Us Slider (Compact & Fixed) ===== */
.whyus-section{background:radial-gradient(circle at 10% 20%,rgba(26,122,140,.08),transparent 40%),radial-gradient(circle at 90% 80%,rgba(11,43,74,.08),transparent 45%),linear-gradient(180deg,#F4F9FB 0%,#E6F7F9 100%)}
.whyus-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:10px 0 30px;-webkit-overflow-scrolling:touch}
.whyus-viewport::-webkit-scrollbar{display:none}
.whyus-track{display:flex;gap:1.5rem;padding-inline:max(1rem, calc((100% - 950px) / 2));align-items:stretch}
.whyus-slide{flex:0 0 90%;scroll-snap-align:center;scroll-snap-stop:always;opacity:.35;transform:scale(.94);transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1);pointer-events:none}
@media(min-width:768px){.whyus-slide{flex:0 0 75%}}
@media(min-width:1024px){.whyus-slide{flex:0 0 65%}}
.whyus-slide.is-active{opacity:1;transform:scale(1);pointer-events:auto}
.whyus-card{background:#fff;border-radius:1.5rem;overflow:hidden;box-shadow:0 15px 35px -10px rgba(11,43,74,.15);border:1px solid rgba(11,43,74,.08);display:grid;grid-template-columns:1fr;transition:box-shadow .4s ease,transform .4s ease;height:100%}
@media(min-width:768px){.whyus-card{grid-template-columns:280px 1fr; min-height: 320px;}}
.whyus-slide.is-active .whyus-card{box-shadow:0 25px 50px -12px rgba(11,43,74,.25),0 0 0 3px rgba(26,122,140,.35)}
.whyus-card:hover{transform:translateY(-4px)}

.whyus-media{position:relative;min-height:200px;overflow:hidden;background:linear-gradient(135deg,#0B2B4A,#1A7A8C)}
.whyus-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .9s cubic-bezier(.4,0,.2,1)}
.whyus-slide.is-active:hover .whyus-media img{transform:scale(1.06)}
.whyus-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,43,74,.8) 0%,rgba(11,43,74,.2) 50%,transparent 100%);pointer-events:none}

.whyus-badge{position:absolute;top:1rem;right:1rem;background:rgba(26,122,140,.95);color:#fff;font-size:.7rem;font-weight:900;padding:.45rem .8rem;border-radius:9999px;display:inline-flex;align-items:center;gap:.35rem;box-shadow:0 8px 20px rgba(0,0,0,.2);z-index:2;backdrop-filter:blur(4px);animation:whyBadgePulse 2.5s ease-in-out infinite}
@keyframes whyBadgePulse{0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.2),0 0 0 0 rgba(26,122,140,.6)}50%{box-shadow:0 8px 20px rgba(0,0,0,.2),0 0 0 12px rgba(26,122,140,0)}}

.whyus-icon-wrap{position:absolute;bottom:1rem;right:1rem;width:50px;height:50px;border-radius:1rem;background:linear-gradient(135deg,#D4AF37,#F3E5AB);color:#0B2B4A;display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:0 8px 20px rgba(212,175,55,.4);z-index:3;transition:transform .4s ease}
.whyus-slide.is-active .whyus-icon-wrap{transform:rotate(-6deg) scale(1.05)}

.whyus-content{padding:1.75rem;display:flex;flex-direction:column;justify-content:center}
.whyus-slide .whyus-title{color:#0B2B4A}
.whyus-slide .whyus-desc{color:#475569; font-size: 0.9rem; line-height: 1.6;}

.whyus-dot{width:10px;height:10px;border-radius:9999px;background:rgba(11,43,74,.25);transition:all .35s ease;border:none;cursor:pointer}
.whyus-dot.is-active{width:32px;background:linear-gradient(90deg,#1A7A8C,#116572)}
.whyus-arrow{width:44px;height:44px;border-radius:50%;background:#fff;color:#1A7A8C;box-shadow:0 8px 20px rgba(11,43,74,.15);display:flex;align-items:center;justify-content:center;transition:all .25s ease;border:1px solid rgba(11,43,74,.08);cursor:pointer}
.whyus-arrow:hover{background:#1A7A8C;color:#fff;transform:scale(1.08);box-shadow:0 10px 25px rgba(26,122,140,.3)}
.whyus-arrow:active{transform:scale(.95)}

/* Ripple */
.ripple{position:relative;overflow:hidden}
.ripple .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.6);transform:scale(0);animation:rippleAnim .6s linear;pointer-events:none}
.ripple.dark .rip{background:rgba(26,122,140,.25)}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* Tooltip */
.tip{position:relative}
.tip .tip-box{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);background:#0B2B4A;color:#fff;padding:.5rem .75rem;border-radius:.5rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:60}
.tip .tip-box::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#0B2B4A}
.tip:hover .tip-box,.tip:focus-within .tip-box{opacity:1;transform:translateX(-50%) translateY(0)}

/* Popup info card */
.popup-card{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s ease}
.popup-card.show{opacity:1;pointer-events:auto}
.popup-card .inner{background:#fff;border-radius:1.5rem;max-width:480px;width:100%;padding:2rem;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:scale(.9) translateY(20px);transition:transform .4s cubic-bezier(.4,0,.2,1);border-top:4px solid #1A7A8C}
.popup-card.show .inner{transform:scale(1) translateY(0)}

/* Count-up shimmer */
.shimmer-text{background:linear-gradient(90deg,#1A7A8C 0%,#116572 50%,#1A7A8C 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite}

/* Card hover tilt */
.tilt{transition:transform .35s ease,box-shadow .35s ease}
.tilt:hover{transform:perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-6px);box-shadow:0 25px 45px -15px rgba(11,43,74,.25)}

/* Mobile CTA */
.mobile-cta{display:none}
@media(max-width:640px){.mobile-cta{display:flex;position:fixed;bottom:16px;inset-inline:16px;z-index:45}}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal,.reveal-stagger>*{opacity:1!important;transform:none!important}.whyus-track,.whyus-slide,.whyus-media img{transition:none!important}}

:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}

#toast{transform:translateY(120%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
#toast.show{transform:translateY(0)}

/* ===== Ticket Design ===== */
.ticket-wrapper {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px -10px rgba(11,43,74,.2);
  position: relative;
  overflow: hidden;
  border: 1px solid #E6F7F9;
}
.ticket-header {
  background: linear-gradient(135deg, #0B2B4A, #1A7A8C);
  padding: 2rem 1.5rem;
  text-align: center;
  color: #fff;
  position: relative;
}
.ticket-notch {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.ticket-notch.right { right: -15px; }
.ticket-notch.left { left: -15px; }

.ticket-dashed-line {
  border-top: 2px dashed #CBD5E1;
  margin: 1rem 2rem;
  position: relative;
}
.ticket-dashed-line::before, .ticket-dashed-line::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #F1F5F9;
  border-radius: 50%;
  top: -10px;
}
.ticket-dashed-line::before { left: -30px; }
.ticket-dashed-line::after { right: -30px; }


/* Gallery case image: preserve source proportions and avoid false side-by-side comparisons */
.gallery-feature-card{position:relative;overflow:hidden}
.gallery-image-button{position:relative;display:block;width:100%;border:0;padding:0;background:#eef5f7;border-radius:1rem;overflow:hidden;cursor:zoom-in;isolation:isolate}
.gallery-image-button img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;margin-inline:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease;will-change:transform}
.gallery-image-button:hover img,.gallery-image-button:focus-visible img{transform:scale(1.025);filter:saturate(1.04)}
.gallery-image-zoom{position:absolute;inset-inline-end:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;background:rgba(11,43,74,.88);color:white;padding:.65rem 1rem;border-radius:.8rem;font-size:.8rem;font-weight:700;opacity:.94;backdrop-filter:blur(8px);transition:transform .3s ease,background .3s ease}
.gallery-image-button:hover .gallery-image-zoom{transform:translateY(-3px);background:rgba(26,122,140,.96)}
.gallery-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:999px;background:#e6f7f9;color:#1a7a8c;font-size:.75rem;font-weight:800}
.gallery-tag-muted{background:#f1f5f9;color:#475569}
.gallery-source-link{display:flex;width:fit-content;max-width:100%;margin:1rem auto 0;align-items:center;gap:.5rem;color:#1a7a8c;font-size:.8rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.gallery-image-enter{animation:galleryImageEnter .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes galleryImageEnter{from{opacity:.45;transform:scale(.985) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.gallery-lightbox{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:4rem 1rem 1.5rem;background:rgba(3,17,30,.92);backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
.gallery-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.gallery-lightbox img{max-width:min(92vw,1000px);max-height:78vh;object-fit:contain;border-radius:1rem;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateY(16px) scale(.97);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.gallery-lightbox.is-open img{transform:translateY(0) scale(1)}
.gallery-lightbox p{color:#e2e8f0;text-align:center;font-size:.8rem;line-height:1.7;margin:0}
.gallery-lightbox-close{position:absolute;top:1rem;left:1rem;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.12);color:white;font-size:1.1rem;cursor:pointer;transition:transform .2s ease,background .2s ease}
.gallery-lightbox-close:hover{transform:rotate(90deg);background:rgba(26,122,140,.85)}
body.lightbox-open{overflow:hidden}
.motion-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.motion-card:hover{transform:translateY(-5px);box-shadow:0 22px 42px -18px rgba(11,43,74,.24)}
@media(prefers-reduced-motion:reduce){.gallery-image-enter{animation:none!important}.gallery-image-button img,.gallery-lightbox,.gallery-lightbox img,.motion-card{transition:none!important}.motion-card:hover{transform:none}}

/* SmileWay brand polish + restored before/after tabs */
.gallery-tabs{max-width:780px;margin-inline:auto}
.gallery-tab{position:relative;isolation:isolate;border:1px solid rgba(11,43,74,.1);border-radius:999px;padding:.8rem 1.2rem;background:#fff;color:#334155;font-size:.875rem;font-weight:800;box-shadow:0 4px 14px rgba(11,43,74,.05);transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;overflow:hidden}
.gallery-tab::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-120%);transition:transform .6s ease;z-index:-1}
.gallery-tab:hover::after{transform:translateX(120%)}
.gallery-tab:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,43,74,.1)}
.gallery-tab.is-active{background:linear-gradient(135deg,#1A7A8C,#116572);color:#fff;border-color:transparent;box-shadow:0 9px 22px rgba(26,122,140,.24)}
.gallery-tab:focus-visible{outline:3px solid #D4AF37;outline-offset:3px}
.gallery-pending-panel{min-height:320px;padding:3rem 1.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(26,122,140,.3);border-radius:1rem;background:radial-gradient(circle at top,rgba(230,247,249,.9),#fff 68%);animation:galleryPanelIn .42s cubic-bezier(.2,.7,.2,1) both}
.gallery-pending-panel.hidden{display:none}
.gallery-pending-icon{width:68px;height:68px;display:grid;place-items:center;border-radius:1.4rem;background:#E6F7F9;color:#1A7A8C;font-size:1.7rem;margin-bottom:1.25rem;box-shadow:0 10px 24px rgba(26,122,140,.12);animation:galleryIconFloat 4s ease-in-out infinite}
#galleryComparisonPanel.hidden{display:none}
#comparisonContainer.gallery-image-enter{animation:galleryPanelIn .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes galleryPanelIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes galleryIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:480px){.gallery-tab{padding:.7rem .9rem;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.gallery-tab,.gallery-tab::after,.gallery-pending-panel,.gallery-pending-icon{animation:none!important;transition:none!important}.gallery-tab:hover{transform:none}}