/* BELLAMY DENTAL: THE DOORS
   Two doors, one practice: adults on the left (navy drench), children on the right (cream and pastels).
   Hover a side and that door swings open, the room lights up, the side widens and the character inside
   wakes up and follows the cursor. Touch screens have no hover, so the doors rest ajar, take turns to
   swing open on their own, and a tap swings the chosen door open before going through. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#172A4F;font-family:'Nunito','Trebuchet MS',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}a:hover{color:inherit}
.fred{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

#dd-root{position:relative;width:100%;overflow:hidden}

/* the badge that straddles both doors */
.dd-badge{position:absolute;z-index:6;left:50%;top:22px;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:10px 20px 10px 12px;border-radius:999px;background:#FFF7EE;color:#172A4F;box-shadow:0 14px 34px -16px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap}
.dd-badge svg{width:34px;height:34px;flex:none}
.dd-badge span{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:20px}

.dd-doors{display:flex;height:100vh;min-height:640px}
.dd-side{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-decoration:none;transition:flex-grow .85s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
/* doubled class: must outrank a:hover{color:inherit} (the design set these inline) */
.dd-side.dd-left{background:#172A4F;color:#FFF7EE}
.dd-side.dd-right{background:#FFF7EE;color:#172A4F}
.dd-side:focus-visible{outline:none}
.dd-side:focus-visible .dd-enter{outline:3px solid currentColor;outline-offset:4px}
.dd-dim{transition:opacity .6s ease}
.dd-frame{position:relative;width:min(300px,62%);aspect-ratio:300/460;perspective:1400px;transition:transform .85s cubic-bezier(.2,.8,.2,1);container-type:inline-size}
.dd-leaf{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.dd-left .dd-leaf{transform-origin:0 50%}
.dd-right .dd-leaf{transform-origin:100% 50%}
.dd-glow{position:absolute;pointer-events:none;opacity:0;transition:opacity .8s ease;left:50%;top:58%;width:120%;height:70%;translate:-50% 0}
.dd-left .dd-glow{background:radial-gradient(closest-side,rgba(189,235,220,.24),rgba(189,235,220,0))}
.dd-right .dd-glow{background:radial-gradient(closest-side,rgba(255,211,221,.7),rgba(255,211,221,0))}
.dd-inside{position:absolute;inset:0;border-radius:150px 150px 10px 10px;overflow:hidden;transition:filter .8s ease}
.dd-side .dd-inside{filter:brightness(.35) saturate(.6)}
.dd-chip{position:absolute;opacity:0;translate:0 14px;transition:opacity .5s ease,translate .7s cubic-bezier(.2,.8,.2,1);white-space:nowrap;padding:10px 16px;border-radius:999px;font-size:15px}
.dd-left .dd-chip{background:rgba(255,247,238,.1);border:1px solid rgba(255,247,238,.25);font-weight:700}
.dd-right .dd-chip{font-weight:800}
.dd-enter{display:inline-flex;align-items:center;min-height:48px;margin-top:18px;padding:0 24px;border-radius:999px;font-weight:800;font-size:16px;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.dd-left .dd-enter{background:#BDEBDC;color:#172A4F}
.dd-right .dd-enter{background:#2F5BEA;color:#FFF7EE}
.dd-copy{position:relative;z-index:2;text-align:center;padding:0 24px}
.dd-copy h2{margin:0;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:clamp(30px,3.4vw,48px);line-height:1.05;letter-spacing:-.02em}
.dd-copy p{margin:10px 0 0;font-size:16px;line-height:1.5}
.dd-left .dd-copy p{color:rgba(255,247,238,.8)}
.dd-right .dd-copy p{font-weight:600;color:#4A5873}
.dd-chatter{transform-origin:64px 212px;transform-box:view-box}
.dd-twinkle{animation:dd-twinkle 3.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.dd-bob{display:inline-block;animation:dd-bob 4.8s ease-in-out infinite}
.dd-hello{position:absolute;left:0;right:0;top:14%;text-align:center;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:34px;color:#2F5BEA}
.dd-knob{position:absolute;top:50%;border-radius:50%}
.dd-left .dd-knob{right:9%;width:18px;height:18px;background:#F2B33D;box-shadow:0 0 0 4px rgba(242,179,61,.25)}
.dd-right .dd-knob{left:9%;width:22px;height:22px;background:#E8577A;box-shadow:0 0 0 5px rgba(232,87,122,.25)}
@supports (width:1cqi){
  .dd-hello{font-size:11.33cqi}
  .dd-left .dd-knob{width:6cqi;height:6cqi}
  .dd-right .dd-knob{width:7.33cqi;height:7.33cqi}
}
.dd-trail-layer{position:absolute;inset:0;z-index:7;pointer-events:none}
.dd-trail{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}

@keyframes dd-chat{from{transform:rotate(0deg)}to{transform:rotate(-30deg)}}
@keyframes dd-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes dd-twinkle{0%,100%{transform:scale(.7) rotate(0deg);opacity:.6}50%{transform:scale(1.06) rotate(24deg);opacity:1}}
@keyframes dd-bob{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-5px) rotate(-1.5deg)}70%{transform:translateY(3px) rotate(1.2deg)}}

/* ---- the open door: hover on a pointer device, keyboard focus, or a tap on its way through ---- */
.dd-doors:has(.dd-side:focus-visible) .dd-side:not(:focus-visible){flex-grow:.62}
.dd-doors .dd-side:focus-visible{flex-grow:1.6}
.dd-side:focus-visible .dd-frame,.dd-side.is-open .dd-frame{transform:scale(1.06)}
.dd-left:focus-visible .dd-leaf,.dd-left.is-open .dd-leaf{transform:rotateY(-104deg)}
.dd-right:focus-visible .dd-leaf,.dd-right.is-open .dd-leaf{transform:rotateY(104deg)}
.dd-side:focus-visible .dd-glow,.dd-side.is-open .dd-glow{opacity:1}
.dd-side:focus-visible .dd-inside,.dd-side.is-open .dd-inside{filter:none}
.dd-side:focus-visible .dd-chip{opacity:1;translate:0 0}
@media (hover:hover){
  .dd-doors:hover .dd-side{flex-grow:.62}
  .dd-doors .dd-side:hover{flex-grow:1.6}
  .dd-doors:hover .dd-side:not(:hover) .dd-dim{opacity:.5}
  .dd-side:hover .dd-frame{transform:scale(1.06)}
  .dd-left:hover .dd-leaf{transform:rotateY(-104deg)}
  .dd-right:hover .dd-leaf{transform:rotateY(104deg)}
  .dd-side:hover .dd-glow{opacity:1}
  .dd-side:hover .dd-inside{filter:none}
  .dd-side:hover .dd-chip{opacity:1;translate:0 0}
  .dd-side:hover .dd-chip:nth-of-type(2){transition-delay:.08s}
  .dd-side:hover .dd-chip:nth-of-type(3){transition-delay:.16s}
  .dd-side:hover .dd-enter{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(0,0,0,.45)}
  .dd-right:hover .dd-chatter{animation:dd-chat .32s ease-in-out infinite alternate}
  .dd-right:hover .dd-hop{animation:dd-hop .64s ease-in-out infinite}
}

/* ---- touch: no hover, so the doors rest ajar and take turns to swing open on their own ---- */
@media (hover:none){
  .dd-left .dd-leaf{transform:rotateY(-32deg)}
  .dd-right .dd-leaf{transform:rotateY(32deg)}
  .dd-side .dd-inside{filter:none}
  .dd-glow{opacity:.6}
  .dd-chip{display:none}
  .dd-left .dd-leaf{animation:dd-peek-l 8s cubic-bezier(.45,0,.2,1) 1.2s infinite}
  .dd-right .dd-leaf{animation:dd-peek-r 8s cubic-bezier(.45,0,.2,1) 1.2s infinite}
  .dd-right .dd-chatter{animation:dd-chat .32s ease-in-out infinite alternate}
  .dd-right .dd-hop{animation:dd-hop .64s ease-in-out infinite}
  .dd-side.is-open .dd-leaf{animation:none}
}
@keyframes dd-peek-l{0%,4%{transform:rotateY(-32deg)}14%,34%{transform:rotateY(-86deg)}46%,100%{transform:rotateY(-32deg)}}
@keyframes dd-peek-r{0%,50%{transform:rotateY(32deg)}60%,80%{transform:rotateY(86deg)}92%,100%{transform:rotateY(32deg)}}

/* ---- phones: the doors stack, both fit the first screen, and the badge sits on the seam ---- */
@media (max-width:760px){
  .dd-doors{flex-direction:column;height:100vh;height:100svh;min-height:660px}
  .dd-side{flex:1 1 0;min-height:0;gap:14px;padding:22px 16px 40px;transition:none}
  .dd-right{padding:40px 16px 22px}
  .dd-doors .dd-side,.dd-doors .dd-side:focus-visible,.dd-doors:has(.dd-side:focus-visible) .dd-side:not(:focus-visible){flex-grow:1}
  .dd-frame{width:clamp(86px,calc((50svh - 212px) * .652),170px)}
  .dd-copy{padding:0}
  .dd-copy h2{font-size:clamp(28px,8vw,32px)}
  .dd-copy p{margin-top:6px}
  .dd-enter{margin-top:14px}
  .dd-chip{display:none}
  .dd-badge{top:50%;translate:-50% -50%;padding:8px 18px 8px 10px;gap:8px}
  .dd-badge svg{width:30px;height:30px}
  .dd-badge span{font-size:19px}
  .dd-deco-ring{width:260px !important;height:260px !important;left:-110px !important;top:-110px !important}
  .dd-deco-mint{width:190px !important;height:176px !important;right:-80px !important;top:-70px !important}
  .dd-deco-pink{width:120px !important;height:112px !important;left:-44px !important;bottom:-44px !important}
  .dd-deco-butter{width:44px !important;height:44px !important;left:12% !important;top:22% !important}
}

@media (prefers-reduced-motion:reduce){
  .dd-side,.dd-leaf,.dd-frame,.dd-chip{transition-duration:.01s !important}
  .dd-chatter,.dd-hop,.dd-twinkle,.dd-bob,.dd-leaf{animation:none !important}
}