/* ==========================================================================
   Marker Text - visual settings
   ==========================================================================
   Every setting is a CSS custom property, the same convention draw-in uses.
   marker-text.js reads them with getComputedStyle, so they can be overridden
   per element, per section, or globally.

   Modifier classes below are shorthand for the common cases, so an editor
   can configure the effect from Gutenberg's "Additional CSS classes" field
   without writing custom CSS.
   ========================================================================== */

.marker-text {
    /* Pen thickness. Higher reads as a marker, lower as a pen. */
    --marker-text-stroke-width: 2.4;

    /* Size relative to the element's own font. 1 matches its x-height. */
    --marker-text-size-scale: 1;

    /* Multiplier on the duration, which otherwise follows text length. */
    --marker-text-speed: 0.6;

    /* Slight rotation, for a note-scribbled-in-the-margin feel. */
    --marker-text-tilt: -3deg;
}

.js .marker-text.is-ready .marker-text__stage {
    rotate: var(--marker-text-tilt);
    transform-origin: left center;
}

/* Pen thickness */
.marker-text--thin { --marker-text-stroke-width: 1; }
.marker-text--bold { --marker-text-stroke-width: 2.4; }

/* Writing speed */
.marker-text--fast { --marker-text-speed: 0.6; }
.marker-text--slow { --marker-text-speed: 1.6; }

/* Size */
.marker-text--small { --marker-text-size-scale: 0.8; }
.marker-text--large { --marker-text-size-scale: 1.3; }

/* Tilt */
.marker-text--tilt { --marker-text-tilt: -3deg; }
.marker-text--no-tilt { --marker-text-tilt: 0deg; }

figcaption.marker-text{
    font-size:52px;
}

/* ==========================================================================
   Marker Arrow
   ==========================================================================
   Add `marker-arrow` next to `marker-text` and an arrow draws itself once
   the writing finishes. Everything about it is a modifier class here:

     placement   --after (default) --before --above --below
     shape       --straight (default) --curve-left --curve-right
     size        --small --large
     direction   --point-right --point-down --point-left --point-up

   Placement lives in this file rather than in -core.css because it is a
   design decision, and because splitting a single modifier's rules across
   two files makes both harder to read.
   ========================================================================== */

.marker-arrow {
    /* Width of the arrow. `em` so it tracks the heading it belongs to. */
    --marker-arrow-size: 1.4em;

    /* Distance from the text's ink, not from the element's box. */
    --marker-arrow-gap: 0.35em;

    --marker-arrow-stroke-width: 1px;

    /* Time to draw the whole arrow, pen lifts not counted. Shared out
       between the strokes by marker-text-arrow.js. */
    --marker-arrow-duration: 0.7s;

    /* The pen being lifted between one stroke and the next. */
    --marker-arrow-lift: 0.08s;

    /* A stroke starts from rest and brakes into its end. `ease-out` would
       front-load the motion instead, which on a short barb means the whole
       thing appears in the first few frames. */
    --marker-arrow-easing: ease-in-out;

    /* A beat after the last letter, so the arrow reads as a second gesture
       rather than as part of the writing. */
    --marker-arrow-delay: 0.15s;

    /* Read by marker-text-arrow.js: straight | curve-left | curve-right */
    --marker-arrow-shape: straight;

    /* Every shape is drawn pointing right; this turns it. */
    --marker-arrow-rotate: 0deg;

    /* Free nudge, for when the automatic placement is a few pixels off. */
    --marker-arrow-shift-x: 0px;
    --marker-arrow-shift-y: 0px;
}

/* Placement. The --marker-text-ink-* values are written onto the stage by
   marker-text-arrow.js and describe where the drawn text really is: the
   element's own box is always full width, so it would put "after the text"
   at the far edge of the heading. The fallbacks are the element's box, used
   only if the ink could not be measured. */

/* After the text, and the default: an arrow with no placement class at all
   has to land somewhere sensible, not at the absolute box's static corner. */
.marker-arrow .marker-arrow__stage,
.marker-arrow--after .marker-arrow__stage {
    left: calc(var(--marker-text-ink-right, 100%) + var(--marker-arrow-gap));
    top: var(--marker-text-ink-last-middle, 50%);
    translate: var(--marker-arrow-shift-x) calc(-50% + var(--marker-arrow-shift-y));
}

.marker-arrow--before .marker-arrow__stage {
    left: var(--marker-text-ink-left, 0px);
    top: var(--marker-text-ink-first-middle, 50%);
    translate: calc(-100% - var(--marker-arrow-gap) + var(--marker-arrow-shift-x))
               calc(-50% + var(--marker-arrow-shift-y));
}

.marker-arrow--above .marker-arrow__stage {
    left: var(--marker-text-ink-center, 50%);
    top: var(--marker-text-ink-top, 0px);
    translate: calc(-50% + var(--marker-arrow-shift-x))
               calc(-100% - var(--marker-arrow-gap) + var(--marker-arrow-shift-y));
}

.marker-arrow--below .marker-arrow__stage {
    left: var(--marker-text-ink-center, 50%);
    top: calc(var(--marker-text-ink-bottom, 100%) + var(--marker-arrow-gap));
    translate: calc(-50% + var(--marker-arrow-shift-x)) var(--marker-arrow-shift-y);
}

/* Placement also sets a sensible default direction: an arrow above the text
   points down at it, one below points up. (--after keeps the 0deg already
   declared on .marker-arrow.) */
.marker-arrow--before { --marker-arrow-rotate: 180deg; }
.marker-arrow--above  { --marker-arrow-rotate: 90deg; }
.marker-arrow--below  { --marker-arrow-rotate: -90deg; }

/* Direction. Declared after placement so it wins on source order. */
.marker-arrow--point-right { --marker-arrow-rotate: 0deg; }
.marker-arrow--point-down  { --marker-arrow-rotate: 90deg; }
.marker-arrow--point-left  { --marker-arrow-rotate: 180deg; }
.marker-arrow--point-up    { --marker-arrow-rotate: -90deg; }

/* Shape */
.marker-arrow--straight    { --marker-arrow-shape: straight; }
.marker-arrow--curve-left  { --marker-arrow-shape: curve-left; }
.marker-arrow--curve-right { --marker-arrow-shape: curve-right; }

/* Size. Thickness moves with it, or a large arrow would look spindly. */
.marker-arrow--small {
    --marker-arrow-size: 0.9em;
    --marker-arrow-stroke-width: 1.6px;
}

.marker-arrow--large {
    --marker-arrow-size: 2.2em;
    --marker-arrow-stroke-width: 2.6px;
}

.marker-arrow__stage {
    /* The individual `rotate` property, not `transform`, so it composes with
       the `translate` used for placement instead of rotating it. */
    rotate: var(--marker-arrow-rotate);
}

.marker-arrow__path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--marker-arrow-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Keeps the stroke the width it says it is, whatever the viewBox is
       scaled to. */
    vector-effect: non-scaling-stroke;
}

/* Each stroke is its own path with its own turn: marker-text-arrow.js works
   out how long it takes and when it starts, and writes both onto the element.
   The fallbacks only matter if that never ran. */
.marker-arrow__path.is-drawing {
    animation: marker-arrow-draw
               var(--marker-arrow-stroke-duration, var(--marker-arrow-duration))
               var(--marker-arrow-stroke-delay, var(--marker-arrow-delay))
               var(--marker-arrow-easing) forwards;
}

@keyframes marker-arrow-draw {
    to { stroke-dashoffset: 0; }
}

/*Front page hero section*/
.front-page-hero-marker, .companion-marker{
    --marker-text-tilt: 10deg;
    font-size:22px;
    position: relative;
}
.js .front-page-hero-marker.is-ready:not(.is-static) span.marker-text__stage{
    position: absolute;
    right:-40%;
    top:0px;
    
}
.js .companion-marker.is-ready:not(.is-static) span.marker-text__stage{
    position: absolute;
    left:18px;
    top:5px;
}
.psst-partner{
    position: absolute;
    left:0px;
    bottom:-80px;
    
}
@media (min-width: 480px) {
    .js .front-page-hero-marker.is-ready:not(.is-static) span.marker-text__stage{
        right:-30%;
    }
}
@media (min-width: 768px) {
    .front-page-hero-marker, .companion-marker{
        font-size:34px;
    }
    .js .front-page-hero-marker.is-ready:not(.is-static) span.marker-text__stage{
        right:-40%;
    }
}
@media (min-width: 990px) {
    .front-page-hero-marker{
    
    }
    .js .front-page-hero-marker.is-ready:not(.is-static) span.marker-text__stage{
        right: -33%;
        top: -25px;
    }
    .psst-partner{
        bottom:-80px;
        left:100px;
    }
}