/* LUCIDA enhancement layer. Additive: loads after styles.css, never edits it.
   Motion rules apply only under .js-motion, which is not set when the visitor prefers reduced motion. */
@keyframes lu-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes lu-fade{from{opacity:0}to{opacity:1}}
@keyframes lu-sheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes lu-show{to{visibility:visible}}

/* Hero: headline line masks, staged entrance, pointer-aware particle field */
.hero{isolation:isolate}
.hero-fx{position:absolute;z-index:-1;inset:0;width:100%;height:100%;pointer-events:none}
.hero h1 .ln{display:block;overflow:hidden;padding:.06em .05em .16em;margin:-.06em -.05em -.16em}
.hero h1 .ln,.hero h1 .ln-in{color:inherit}
.js-motion .hero h1:not(.is-split){visibility:hidden;animation:lu-show 0s 2.5s forwards}
.js-motion .hero h1 .ln-in{display:block;translate:0 108%}
.js-motion .hero h1.is-in .ln-in{translate:0 0;transition:translate 1.05s var(--ease) calc(var(--i,0)*.12s + .1s)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .js-motion .hero h1.is-in .ln-in span{color:transparent;background:linear-gradient(100deg,var(--blue) 38%,#8fb0ff 50%,var(--blue) 62%) 100% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:lu-sheen 1.7s 1.25s var(--ease) both}
}
.js-motion .hero-meta{animation:lu-fade 1s .1s both}
.js-motion .hero-kicker{animation:lu-rise .9s var(--ease) .05s both}
.js-motion .hero-lede{animation:lu-rise .9s var(--ease) .55s both}
.js-motion .hero-actions{animation:lu-rise .9s var(--ease) .7s both}
.js-motion .hero-footnote{animation:lu-rise .9s var(--ease) .85s both}
.js-motion .implant-visual{animation:lu-fade 1.4s var(--ease) .25s both}

/* Scroll reveals (translate/opacity only, so existing transforms and hovers are untouched) */
.js-motion .rv{opacity:0;translate:0 22px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.js-motion .rv.in{opacity:1;translate:0 0}

/* Technical hairlines that draw themselves in at the top of each editorial section */
.content-section{position:relative}
.draw-line{position:absolute;z-index:0;top:0;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,var(--blue) 0 56px,var(--line) 56px);transform-origin:left center}
html[dir="rtl"] .draw-line{background:linear-gradient(270deg,var(--blue) 0 56px,var(--line) 56px);transform-origin:right center}
.js-motion .draw-line{transform:scaleX(0);transition:transform 1.5s var(--ease)}
.js-motion .in>.draw-line{transform:scaleX(1)}

/* Patient journey: progress line travels step to step, indicators light up in sequence */
.journey-steps li:nth-child(2){--j:1}
.journey-steps li:nth-child(3){--j:2}
.journey-steps li::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,#6e8eff,var(--blue));transform-origin:left center}
html[dir="rtl"] .journey-steps li::before{background:linear-gradient(270deg,#6e8eff,var(--blue));transform-origin:right center}
.journey-number{display:inline-flex;align-items:center;gap:10px}
.journey-number::before{content:"";width:6px;height:6px;border-radius:50%;background:#41454e}
.js-motion .journey-steps li::before{transform:scaleX(0);transition:transform 1s var(--ease) calc(var(--j,0)*.55s + .2s)}
.js-motion .journey-steps.in li::before{transform:scaleX(1)}
.js-motion .journey-number::before{transition:background-color .4s ease calc(var(--j,0)*.55s + .5s),box-shadow .4s ease calc(var(--j,0)*.55s + .5s)}
.js-motion .journey-steps.in .journey-number::before{background:#6e8eff;box-shadow:0 0 0 4px rgba(110,142,255,.16)}

/* Navigation: hover and active-section indicator */
.primary-nav a[aria-current]{color:var(--ink)}
@media(min-width:761px){
  .primary-nav a{position:relative}
  .primary-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  html[dir="rtl"] .primary-nav a::after{transform-origin:right}
  .primary-nav a:hover::after,.primary-nav a[aria-current]::after{transform:scaleX(1)}
}

/* FAQ: open/close is animated in enhance.js; this adds hover and a soft text fade */
.faq-item summary{transition:color .2s ease}
.faq-item summary:hover{color:var(--blue)}
.js-motion .faq-item[open]>p{animation:lu-fade .5s .08s both}

/* Arrows nudge on hover (individual `translate` property composes with existing transforms) */
.button-arrow,.text-link>span:last-child,.row-arrow,.method-icon{display:inline-block;transition:translate .35s var(--ease)}
.button:hover .button-arrow,.text-link:hover>span:last-child,.care-row:hover .row-arrow,.contact-method:hover .method-icon{translate:3px -3px}

/* Devices and trust watermark: layered pointer/scroll depth, desktop only */
.trust-watermark{translate:calc(var(--wm,0)*1px) 0}
@media(min-width:761px) and (hover:hover){
  .phone,.device-backdrop{transition:translate .7s var(--ease)}
  .phone-left{translate:calc(var(--px,0)*-14px) calc(var(--py,0)*-8px)}
  .phone-center{translate:calc(var(--px,0)*-26px) calc(var(--py,0)*-14px)}
  .phone-right{translate:calc(var(--px,0)*-10px) calc(var(--py,0)*-6px)}
  .device-backdrop{translate:calc(var(--px,0)*10px) calc(var(--py,0)*6px)}
}
@media(max-width:760px){.js-motion .rv{translate:0 14px}.hero-fx{display:none}}

/* Small screens: keep the right-hand model labels fully inside the stage (they were clipped at 390px and below) */
@media(max-width:560px){
  .annotation-connection,.annotation-fixture{right:3%}
}

/* ===== Round 2 ===== */
@keyframes lu-draw{to{stroke-dashoffset:0}}
@keyframes lu-swap{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}

/* Technical annotations follow the selected component (data-focus is set by app.js) */
.model-annotation{transition:opacity .45s var(--ease),color .3s ease}
.model-annotation i{transition:width .5s var(--ease),background-color .3s ease}
.model-annotation i::after{transition:box-shadow .4s ease}
.implant-visual[data-focus] .model-annotation{opacity:.6}
.implant-visual[data-focus="crown"] .annotation-crown,
.implant-visual[data-focus="abutment"] .annotation-connection,
.implant-visual[data-focus="fixture"] .annotation-fixture,
.implant-visual[data-focus="bone"] .annotation-bone{opacity:1;color:var(--ink)}
.implant-visual[data-focus="crown"] .annotation-crown i,
.implant-visual[data-focus="abutment"] .annotation-connection i,
.implant-visual[data-focus="fixture"] .annotation-fixture i,
.implant-visual[data-focus="bone"] .annotation-bone i{background:var(--blue)}
.implant-visual[data-focus="crown"] .annotation-crown i::after,
.implant-visual[data-focus="abutment"] .annotation-connection i::after,
.implant-visual[data-focus="fixture"] .annotation-fixture i::after,
.implant-visual[data-focus="bone"] .annotation-bone i::after{box-shadow:0 0 0 4px rgba(40,91,255,.16)}
@media(min-width:761px){
  .implant-visual[data-focus="crown"] .annotation-crown i,
  .implant-visual[data-focus="abutment"] .annotation-connection i,
  .implant-visual[data-focus="fixture"] .annotation-fixture i,
  .implant-visual[data-focus="bone"] .annotation-bone i{width:clamp(44px,5.4vw,84px)}
}
.component-description.swap{animation:lu-swap .45s var(--ease) both}

/* Orbit: fine technical rings around the implant, drawn in once, with three connection points */
.orbit{position:absolute;inset:0;z-index:2;pointer-events:none}
.orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit ellipse{fill:none;stroke:var(--blue);stroke-width:1;vector-effect:non-scaling-stroke}
.orbit .o1{opacity:.5}
.orbit .o2{opacity:.26;stroke-dasharray:2 4}
.orbit i{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(40,91,255,.14)}
.js-motion .orbit .o1{stroke-dasharray:100;stroke-dashoffset:100;animation:lu-draw 2.2s var(--ease) 1.1s forwards}
.js-motion .orbit .o2{animation:lu-fade 1.2s ease 2s both}
.js-motion .orbit i{opacity:0;animation:lu-fade .6s ease forwards;animation-delay:calc(1.7s + var(--k)*.45s)}

/* Contact rows and buttons: blue line sweeps along the row, buttons lift slightly */
.contact-method::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
html[dir="rtl"] .contact-method::after{transform-origin:right}
.contact-method:hover::after,.contact-method:focus-visible::after{transform:scaleX(1)}
.button{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .3s ease,translate .25s var(--ease)}
.button:hover{translate:0 -1px}
.button-blue:hover{box-shadow:0 12px 26px rgba(40,91,255,.24)}
.button:active{translate:0 0}

/* Phones enter one after another while the stage is revealing */
.js-motion .device-stage.rv .phone{opacity:0;scale:.95;transition:opacity .9s var(--ease),scale .9s var(--ease)}
.js-motion .device-stage.rv.in .phone{opacity:1;scale:1}
.js-motion .device-stage.rv .phone-left{transition-delay:.15s}
.js-motion .device-stage.rv .phone-right{transition-delay:.3s}