/* Tap switch and double-tap zone. Colours as in the approved mockup. */

/* :where() keeps these at zero specificity, so Elementor styles can override them. */
:where(.dt-tap-zone){position:relative;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}

/* The header switch is only shown on the two home pages (and while editing in Elementor). */
body:not(.dt-tap-home):not(.elementor-editor-active) .dt-tap-switch{display:none!important}

/* Active state: Websites & Ads green with white text, Foto & Video pink with black text. */
body.dt-mode-web .dt-tap-web,body.dt-mode-web .dt-tap-web:hover,body.dt-mode-web .dt-tap-web *{background-color:#009F52!important;color:#FFFFFF!important}
body.dt-mode-foto .dt-tap-foto,body.dt-mode-foto .dt-tap-foto:hover,body.dt-mode-foto .dt-tap-foto *{background-color:#E8A5C9!important;color:#111111!important}

/* 01/02 burst shown before switching pages. */
.dt-burst{position:absolute;left:50%;top:50%;z-index:20;width:260px;height:260px;border-radius:50%;background:#111111;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-family:'DT Display','DT Sans',sans-serif;font-size:64px;font-weight:800;font-style:italic;letter-spacing:-0.05em;line-height:1;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.3);animation:dt-burst 700ms ease-out forwards}
.dt-burst--fixed{position:fixed;z-index:9999}
@keyframes dt-burst{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{transform:translate(-50%,-50%) scale(1.1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.dt-burst{display:none}}