/* =========================================================
   VISIT FINISTERRE / BUY THE END OF THE WORLD
   CLEAN MASTER CSS
========================================================= */


/* =========================================================
   01. VARIABLES
========================================================= */

:root {
  --vf-cream: #F8F5F2;
  --vf-cream-soft: #F3F2EE;
  --vf-mist: #EAF4F4;

  --vf-blue: #12324A;
  --vf-blue-text: #16354A;
  --vf-blue-dark: #0F2A3A;

  --vf-yellow: #F4B63F;
  --vf-yellow-hover: #F7C45A;

  --ease-premium:
    cubic-bezier(.22,1,.36,1);

  --shadow-soft:
    0 12px 30px rgba(23,58,86,.14);

  --shadow-stamp:
    0 22px 32px rgba(0,0,0,.22);
}


/* =========================================================
   02. BASE
========================================================= */

body {
  background:
    linear-gradient(
      180deg,
      var(--vf-cream) 0%,
      var(--vf-cream-soft) 20%,
      var(--vf-mist) 60%,
      var(--vf-mist) 100%
    ) !important;
}


/* Buy the End of the World */

body.page-end {
  background:
    var(--vf-blue) !important;

  overflow-x:
    hidden;
}


/* Whole campaign canvas */

body.page-end #allrecords,
body.page-end #tilda-page,
body.page-end .t-records {
  background:
    var(--vf-blue) !important;

  background-color:
    var(--vf-blue) !important;
}


.t-record,
.t-record:not(.t-cover) {
  background-color:
    transparent !important;
}


/* =========================================================
   03. HEADER
========================================================= */

.t228,
.tmenu-mobile,
.tmenu {
  background:
    var(--vf-cream) !important;
}


.t228 {
  box-shadow:
    0 2px 10px rgba(0,0,0,.05);
}


.t-menu__link-item {
  color:
    var(--vf-blue-text) !important;

  transition:
    color .2s ease,
    opacity .2s ease;
}


.t-menu__link-item:hover {
  color:
    var(--vf-blue-dark) !important;

  opacity:
    1 !important;
}


.t-menu__link-item.t-active {
  color:
    var(--vf-blue-text) !important;

  font-weight:
    800;
}


/* =========================================================
   04. SHARE FLOW BLOCKS
========================================================= */

body.page-end
.uc-share-intro-block,

body.page-end
.uc-share-choice,

body.page-end
.uc-share-stamps {
  position:
    relative;

  z-index:
    2;

  background:
    var(--vf-blue) !important;

  background-color:
    var(--vf-blue) !important;
}


/* Zero Block internals */

body.page-end
.uc-share-intro-block
.t396__artboard,

body.page-end
.uc-share-intro-block
.t396__carrier,

body.page-end
.uc-share-intro-block
.t396__filter,

body.page-end
.uc-share-choice
.t396__artboard,

body.page-end
.uc-share-choice
.t396__carrier,

body.page-end
.uc-share-choice
.t396__filter,

body.page-end
.uc-share-stamps
.t396__artboard,

body.page-end
.uc-share-stamps
.t396__carrier,

body.page-end
.uc-share-stamps
.t396__filter {
  background:
    var(--vf-blue) !important;

  background-color:
    var(--vf-blue) !important;
}


/* Keep narrative blocks connected */

body.page-end
.uc-share-choice {
  margin-bottom:
    -3px !important;
}


body.page-end
.uc-share-stamps {
  margin-top:
    -3px !important;
}


/* =========================================================
   05. PASS IT ON BUTTON / ENVELOPE
========================================================= */

body.page-end
.pass-it-btn {
  cursor:
    pointer !important;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform .3s var(--ease-premium),
    filter .3s ease;
}


/* Make both visible button layers feel clickable */

body.page-end
.pass-it-btn,
body.page-end
.pass-it-btn .tn-atom,
body.page-end
.pass-it-text,
body.page-end
.pass-it-text .tn-atom {
  cursor:
    pointer !important;
}


@media (hover: hover) and (pointer: fine) {

  body.page-end
  .pass-it-btn:hover {
    transform:
      translateY(-3px);

    filter:
      drop-shadow(
        0 10px 14px
        rgba(0,0,0,.14)
      );
  }

}


body.page-end
.pass-it-btn:active {
  transform:
    scale(.985);
}


/* =========================================================
   06. THINKING DOTS
========================================================= */

.thinking-dot {
  opacity:
    0;

  display:
    inline-block;

  animation-duration:
    3.6s;

  animation-iteration-count:
    2;

  animation-fill-mode:
    forwards;

  animation-timing-function:
    ease-in-out;

  animation-play-state:
    paused;
}


.uc-share-choice.dots-start
.thinking-dot {
  animation-play-state:
    running;
}


.dot1 {
  animation-name:
    dotOne;
}


.dot2 {
  animation-name:
    dotTwo;
}


.dot3 {
  animation-name:
    dotThree;
}


@keyframes dotOne {

  0%,
  8% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  34% {
    opacity: .75;
  }

  52% {
    opacity: .35;
  }

  68%,
  100% {
    opacity: 0;
  }

}


@keyframes dotTwo {

  0%,
  22% {
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

  50% {
    opacity: .7;
  }

  66% {
    opacity: .25;
  }

  82%,
  100% {
    opacity: 0;
  }

}


@keyframes dotThree {

  0%,
  38% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  68% {
    opacity: .7;
  }

  84% {
    opacity: .25;
  }

  100% {
    opacity: 0;
  }

}


/* =========================================================
   07. STAMP SCENE — STORY TEXT
========================================================= */

.uc-share-stamps
.share-title,

.uc-share-stamps
.share-wave-line,

.uc-share-stamps
.share-the-one,

.uc-share-stamps
.share-best-stories {
  opacity:
    0;

  transform:
    translateY(18px);

  will-change:
    opacity,
    transform;
}


/* Old unused element */

.uc-share-stamps
.share-good {
  display:
    none !important;
}


/* THEY WEREN'T RANDOM */

.uc-share-stamps.stamps-start
.share-title {
  animation:
    shareTextIn
    1.15s
    var(--ease-premium)
    forwards
    .35s;
}


/* Yellow line */

.uc-share-stamps.stamps-start
.share-wave-line {
  animation:
    shareTextIn
    .8s
    ease
    forwards
    1.35s;
}


/* NEITHER WAS THIS */

.uc-share-stamps.stamps-start
.share-the-one {
  animation:
    shareTextIn
    1.15s
    var(--ease-premium)
    forwards
    2.55s;
}


/* Some stories already know... */

.uc-share-stamps.stamps-start
.share-best-stories {
  animation:
    shareTextIn
    1.25s
    var(--ease-premium)
    forwards
    4.15s;
}


@keyframes shareTextIn {

  from {
    opacity:
      0;

    transform:
      translateY(18px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   08. STAMPS
========================================================= */

.uc-share-stamps
.stamp-whatsapp,

.uc-share-stamps
.stamp-email,

.uc-share-stamps
.stamp-link {
  opacity:
    0;

  cursor:
    pointer;

  scale:
    1;

  translate:
    0 0;

  will-change:
    opacity,
    transform,
    filter;

  transition:
    scale .22s ease,
    translate .22s ease,
    filter .22s ease;
}


.uc-share-stamps
.stamp-whatsapp {
  transform:
    translateX(-45px)
    translateY(12px)
    rotate(-12deg);
}


.uc-share-stamps
.stamp-email {
  transform:
    translateY(45px)
    rotate(3deg);
}


.uc-share-stamps
.stamp-link {
  transform:
    translateX(45px)
    translateY(12px)
    rotate(12deg);
}


/* Stamp 1 */

.uc-share-stamps.stamps-start
.stamp-whatsapp {
  animation:
    stampCardIn
    1.45s
    var(--ease-premium)
    forwards
    5.90s;
}


/* Stamp 2 */

.uc-share-stamps.stamps-start
.stamp-email {
  animation:
    stampCardIn
    1.45s
    var(--ease-premium)
    forwards
    6.65s;
}


/* Stamp 3 */

.uc-share-stamps.stamps-start
.stamp-link {
  animation:
    stampCardIn
    1.45s
    var(--ease-premium)
    forwards
    7.40s;
}


@keyframes stampCardIn {

  0% {
    opacity:
      0;
  }

  55% {
    opacity:
      .85;
  }

  100% {
    opacity:
      1;

    transform:
      translate(0,0)
      rotate(0deg);
  }

}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

  .uc-share-stamps.stamps-start
  .stamp-whatsapp:hover,

  .uc-share-stamps.stamps-start
  .stamp-email:hover,

  .uc-share-stamps.stamps-start
  .stamp-link:hover {
    scale:
      1.025;

    translate:
      0 -5px;

    filter:
      drop-shadow(
        0 12px 18px
        rgba(0,0,0,.16)
      );
  }

}


/* =========================================================
   09. STAMP HANDWRITTEN NOTE
========================================================= */

.uc-share-stamps
.stamp-note {
  opacity:
    0;

  clip-path:
    inset(0 100% 0 0);

  will-change:
    opacity,
    clip-path;
}


.uc-share-stamps.stamps-start
.stamp-note {
  animation:
    noteWriteIn
    1.55s
    steps(32,end)
    forwards
    9.25s;
}


@keyframes noteWriteIn {

  0% {
    opacity:
      0;

    clip-path:
      inset(0 100% 0 0);
  }

  8% {
    opacity:
      1;
  }

  100% {
    opacity:
      1;

    clip-path:
      inset(0 0 0 0);
  }

}


/* Underline */

.uc-share-stamps
.stamp-note-line {
  opacity:
    0;

  clip-path:
    inset(0 100% 0 0);
}


.uc-share-stamps.stamps-start
.stamp-note-line {
  animation:
    underlineReveal
    1.3s
    var(--ease-premium)
    forwards
    10.65s;
}


@keyframes underlineReveal {

  from {
    opacity:
      1;

    clip-path:
      inset(0 100% 0 0);
  }

  to {
    opacity:
      1;

    clip-path:
      inset(0 0 0 0);
  }

}


/* =========================================================
   10. GENERIC HANDWRITTEN ELEMENT
========================================================= */

body.page-end
.handwritten-note {
  overflow:
    visible !important;

  transform-origin:
    center;
}


/* =========================================================
   11. WORLD WALKS — FACT REVEAL

   EN: #rec2456211613
   ES: #rec3850508903
   ET: #rec3850511103
========================================================= */

/* ---------------------------------------------------------
   11A. BASE STATE
--------------------------------------------------------- */

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-location,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-booking,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-google,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-tripadvisor,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-still,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-every,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-day,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-dot {
  opacity: 0;
  visibility: visible;
  filter: none !important;
}

/* ---------------------------------------------------------
   11B. LOCATION
--------------------------------------------------------- */

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-location {
  clip-path:
    inset(
      -12px
      100%
      -12px
      -12px
    );
}

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
).fact-start
.share-location {

  animation:
    vfLocationReveal
    6.2s
    steps(90,end)
    .6s
    both;
}

/* ---------------------------------------------------------
   11C. RATINGS
--------------------------------------------------------- */

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-booking,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-google,

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-tripadvisor {
  transform:
    translateY(8px);
}

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
).fact-start
.share-booking {

  animation:
    vfFactFadeIn
    1.15s
    var(--ease-premium)
    7.35s
    both;
}

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
).fact-start
.share-google {

  animation:
    vfFactFadeIn
    1.15s
    var(--ease-premium)
    8.45s
    both;
}

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
).fact-start
.share-tripadvisor {

  animation:
    vfFactFadeIn
    1.15s
    var(--ease-premium)
    9.55s
    both;
}

/* ---------------------------------------------------------
   11D. STILL WELCOMING
--------------------------------------------------------- */

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
)
.share-still {
  clip-path:
    inset(
      -12px
      100%
      -12px
      -12px
    );
}

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
).fact-start
.share-still {

  animation:
    vfLocationReveal
    4.6s
    steps(64,end)
    9.57s
    both;
}

/* ---------------------------------------------------------
   11E. EVERY DAY
--------------------------------------------------------- */

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
).fact-start
.share-every {

  animation:
    vfEmphasisWordIn
    .85s
    var(--ease-premium)
    14.80s
    both;
}

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
).fact-start
.share-day {

  animation:
    vfEmphasisWordIn
    .85s
    var(--ease-premium)
    15.90s
    both;
}

body.page-end
:is(
  #rec2456211613,
  #rec3850508903,
  #rec3850511103
).fact-start
.share-dot {

  animation:
    vfFactDotIn
    .9s
    var(--ease-premium)
    16.60s
    both;
}

/* =========================================================
   11F. KEYFRAMES
========================================================= */

@keyframes vfLocationReveal {
  from {
    opacity: 0;
    clip-path:
      inset(
        -12px
        100%
        -12px
        -12px
      );
  }

  to {
    opacity: 1;
    clip-path:
      inset(
        -12px
        -12px
        -12px
        -12px
      );
  }

}

@keyframes vfFactFadeIn {
  from {
    opacity: 0;
    transform:
      translateY(8px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }

}

@keyframes vfEmphasisWordIn {
  from {
    opacity: 0;
    transform:
      translateY(10px)
      scale(.97);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }

}

@keyframes vfFactDotIn {
  0% {
    opacity: 0;
    transform:
      scale(.25);
  }

  65% {
    opacity: 1;
    transform:
      scale(1.18);
  }

  100% {
    opacity: 1;
    transform:
      scale(1);
  }

}


/* =========================================================
   12. COPY LINK NOTICE
========================================================= */

body.page-end
.copy-link-notice {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 999999;

  padding: 13px 20px;

  border-radius: 999px;

  background: var(--vf-cream);
  color: var(--vf-blue-text);

  font-family: Inter, Arial, sans-serif !important;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .01em;

  box-shadow: var(--shadow-soft);

  opacity: 0;
  pointer-events: none;

  transform: translate(-50%, 18px);

  transition:
    opacity .35s ease,
    transform .35s var(--ease-premium);
}

body.page-end
.copy-link-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* =========================================================
   13. POST-IT WALL
========================================================= */

body.page-end
.identity-flip-wall
.flip-inner {
  position:
    relative;

  display:
    block;

  width:
    100%;

  height:
    100%;

  transform-style:
    preserve-3d;

  transform:
    rotateY(0deg);

  transition:
  transform 1.8s
  cubic-bezier(.16,1,.3,1);
}


body.page-end
.identity-flip-wall
.flip-card {
  position:
    absolute;

  width:
    270px;

  height:
    305px;

  padding:
    0;

  border:
    0;

  appearance:
    none;

  -webkit-appearance:
    none;

  background:
    transparent;

  cursor:
    pointer;

  perspective:
    1400px;

  transform-origin:
    center;

  filter:
    drop-shadow(
      0 13px 18px
      rgba(0,0,0,.16)
    );

  transition:
    filter .45s ease;

  touch-action:
    pan-y;

  -webkit-tap-highlight-color:
    transparent;
}


body.page-end
.identity-flip-wall
.flip-card:focus {
  outline:
    none;
}


body.page-end
.identity-flip-wall
.flip-card:focus-visible {
  outline:
    2px solid
    rgba(244,182,63,.8);

  outline-offset:
    5px;
}


body.page-end
.identity-flip-wall
.flip-inner {
  position:
    relative;

  width:
    100%;

  height:
    100%;

  transform-style:
    preserve-3d;

  transform:
    rotateY(0deg);

  transition:
    transform 1.25s
    cubic-bezier(.16,1,.3,1);
}


body.page-end
.identity-flip-wall
.flip-card.is-flipped
.flip-inner {
  transform:
    rotateY(180deg);
}


body.page-end
.identity-flip-wall
.flip-card.is-returning
.flip-inner {
 transition:
    transform 1.9s
    cubic-bezier(.16,1,.3,1);
}


body.page-end
.identity-flip-wall
.flip-face {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  pointer-events:
    none;

  user-select:
    none;
}


body.page-end
.identity-flip-wall
.flip-front {
  transform:
    rotateY(0deg);
}


body.page-end
.identity-flip-wall
.flip-back {
  transform:
    rotateY(180deg);
}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

  body.page-end
  .identity-flip-wall
  .flip-card:hover
  .flip-inner {
    transform:
      rotateY(180deg);
  }


  body.page-end
  .identity-flip-wall
  .flip-card:hover {
    filter:
      drop-shadow(
        0 22px 28px
        rgba(0,0,0,.22)
      );
  }

}


/* Desktop */

@media screen and (min-width: 1200px) {

  body.page-end
  .identity-flip-wall {
    width:
      760px;

    height:
      560px;
  }


  body.page-end
  .identity-flip-wall
  .card-hospitality {
    left:
      35px;

    top:
      25px;

    transform:
      rotate(-4deg);
  }


  body.page-end
  .identity-flip-wall
  .card-creative {
    left:
      390px;

    top:
      10px;

    transform:
      rotate(5deg);
  }


  body.page-end
  .identity-flip-wall
  .card-atlantic {
    left:
      55px;

    top:
      280px;

    transform:
      rotate(6deg);
  }


  body.page-end
  .identity-flip-wall
  .card-legacy {
    left:
      345px;

    top:
      255px;

    transform:
      rotate(1deg);
  }

}


/* Tablet */

@media screen
and (min-width: 768px)
and (max-width: 1199px) {

  body.page-end
  .identity-flip-wall {
    width:
      min(680px,92vw);

    height:
      clamp(490px,70vw,570px);

    margin:
      0 auto;
  }


  body.page-end
  .identity-flip-wall
  .flip-card {
    width:
      clamp(210px,30vw,250px);

    height:
      clamp(237px,34vw,282px);
  }


  body.page-end
  .identity-flip-wall
  .card-hospitality {
    left:
      5%;

    top:
      20px;

    transform:
      rotate(-4deg);
  }


  body.page-end
  .identity-flip-wall
  .card-creative {
    right:
      5%;

    left:
      auto;

    top:
      6px;

    transform:
      rotate(4deg);
  }


  body.page-end
  .identity-flip-wall
  .card-atlantic {
    left:
      7%;

    top:
      clamp(235px,34vw,275px);

    transform:
      rotate(5deg);
  }


  body.page-end
  .identity-flip-wall
  .card-legacy {
    right:
      7%;

    left:
      auto;

    top:
      clamp(225px,33vw,260px);

    transform:
      rotate(-2deg);
  }

}


/* Mobile */

@media screen and (max-width: 767px) {

  body.page-end
  .identity-flip-wall {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    gap:
      8px;

    width:
      100%;

    height:
      auto;
  }


  body.page-end
  .identity-flip-wall
  .flip-card {
    position:
      relative;

    width:
      clamp(220px,70vw,270px);

    height:
      clamp(249px,79vw,305px);

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;
  }


  body.page-end
  .identity-flip-wall
  .card-hospitality {
    transform:
      translateX(-6%)
      rotate(-3deg);
  }


  body.page-end
  .identity-flip-wall
  .card-creative {
    transform:
      translateX(6%)
      rotate(3deg);
  }


  body.page-end
  .identity-flip-wall
  .card-atlantic {
    transform:
      translateX(-5%)
      rotate(-2deg);
  }


  body.page-end
  .identity-flip-wall
  .card-legacy {
    transform:
      translateX(5%)
      rotate(2deg);
  }

}


/* =========================================================
   14. FINAL QUESTION
========================================================= */

body.page-end
.uc-final-question
.final-question-part-1,

body.page-end
.uc-final-question
.final-question-part-2 {
  opacity:
    0;

  transform:
    translateY(20px);

  will-change:
    opacity,
    transform;
}


/* =========================================================
   15. LANGUAGE POPUP
   Choose your edition
========================================================= */

body.page-end
.uc-language {
  display:
    none !important;
}


body.page-end
.uc-language.is-open {
  display:
    block !important;

  position:
    fixed !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100vh !important;

  height:
    100dvh !important;

  z-index:
    999999 !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  background:
    var(--vf-blue) !important;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  animation:
    vfLanguagePopupIn
    .45s
    ease
    both;
}


body.page-end
.uc-language.is-open
.t396__artboard,

body.page-end
.uc-language.is-open
.t396__carrier,

body.page-end
.uc-language.is-open
.t396__filter {
  background-color:
    transparent !important;
}


body.page-end.language-popup-open {
  overflow:
    hidden !important;
}


@keyframes vfLanguagePopupIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }

}


body.page-end
.uc-language
.language-close,

body.page-end
.uc-language
.language-continue {
  cursor:
    pointer !important;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    opacity .25s ease,
    transform .25s ease;
}


@media (hover: hover) and (pointer: fine) {

  body.page-end
  .uc-language
  .language-close:hover {
    opacity:
      .6;

    transform:
      scale(1.08);
  }


  body.page-end
  .uc-language
  .language-continue:hover {
    opacity:
      .72;

    transform:
      translateX(4px);
  }

}


/* =========================================================
   16. FOOTER
========================================================= */

body.page-end
#rec2464358683
a[href^="mailto:"] {
  color:
    var(--vf-yellow) !important;

  transition:
    opacity .25s ease,
    color .25s ease;

  text-decoration:
    underline;
}


@media (hover: hover) and (pointer: fine) {

  body.page-end
  #rec2464358683
  a[href^="mailto:"]:hover {
    color:
      #FFD06A !important;

    opacity:
      .8;
  }

}


/* =========================================================
   17. MOBILE
========================================================= */

@media screen and (max-width: 767px) {

  body.page-end
  .uc-share-choice,

  body.page-end
  .uc-share-stamps {
    overflow:
      hidden;
  }


  body.page-end
  .copy-link-notice {
    bottom:
      20px;

    max-width:
      calc(100vw - 32px);

    width:
      max-content;

    padding:
      12px 16px;

    text-align:
      center;

    font-size:
      13px;
  }

}


/* Touch stamp feedback */

@media
(hover: none)
and (pointer: coarse) {

  body.page-end
  .uc-share-stamps.stamps-start
  .stamp-whatsapp:active,

  body.page-end
  .uc-share-stamps.stamps-start
  .stamp-email:active,

  body.page-end
  .uc-share-stamps.stamps-start
  .stamp-link:active {
    scale:
      .975;

    translate:
      0 2px;
  }

}


/* =========================================================
   18. ACCESSIBILITY
========================================================= */

body.page-end
a:focus-visible,

body.page-end
button:focus-visible,

body.page-end
[role="button"]:focus-visible {
  outline:
    2px solid
    var(--vf-yellow);

  outline-offset:
    4px;
}


@media (prefers-reduced-motion: reduce) {

  body.page-end *,
  body.page-end *::before,
  body.page-end *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-delay:
      0ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .thinking-dot {
    opacity:
      1 !important;
  }

}