/* ---- artworks ----
 *
 * The pieces of one show, a single artwork at a time or the whole set. Ported
 * from the prototype that was approved; the figures are the drawing's.
 */

.l44cs--artworks{
	--l44aw-green:#00a95c;
	--l44aw-pink:#e6b5c9;
	--l44aw-blue:#62a8e5;
	--l44aw-white:#ffffff;
	--l44aw-cell:#efefef;

	--l44aw-edge:5px;        /* the stroke round the artwork, grown inward */

	/* The drawing's own drop shadow: multiply, 30%, 5 across, 5 down, blur 10.
	   
	   Two of those carry straight over and one does not. Multiplying by black
	   over a background that is not transparent comes to the same as black laid
	   on top at the same strength, so 30% is the figure and not an
	   approximation of it, and the offsets are pixels either way. The blur is a
	   different measure: Illustrator's figure is roughly how far the shadow
	   softens outward, where a browser spreads its transition across the radius
	   and puts about half of it outside. Ten there is twenty here. */
	--l44aw-cast:5px 5px 20px rgba(0,0,0,.30);

	/* Which of the two figures is in force.
	   
	   Chosen here rather than handed over ready-made. The section supplies the
	   desktop figure and the phone figure as two plain numbers; this picks one,
	   and the rule below picks the other on a narrow screen. Written straight
	   onto the element instead, the phone rule could never win — an inline
	   style beats a stylesheet however specific, so the setting simply did
	   nothing on a phone. */
	--l44aw-nudge:var(--l44aw-nudge-d,0px);
	--l44aw-travel:180px;    /* how far the side texts move */
	--l44aw-exit:460ms;      /* the card turning away and the button closing */
	--l44aw-exit-ease:cubic-bezier(.33,.33,.3,1);
	--l44aw-text-out:290ms;  /* the texts going in behind the card */
	--l44aw-text-ease:cubic-bezier(.7,0,1,1);
	--l44aw-flip:720ms;      /* one half turn, and the words that ride with it */
	--l44aw-row:200ms;       /* between one row of the grid and the next */

	background:var(--l44aw-cell);
	margin:30px 0;

	/* The rows are held inside the section while its height is being animated,
	   or they spill over the page on the way. */
	overflow:hidden;

	/* The height is set in pixels by the script so the floor can be moved
	   smoothly when the grid opens. A long soft curve, because a large block of
	   a different colour growing is the most visible thing on the page. */
	transition:height 520ms cubic-bezier(.22,.61,.36,1);
}

.l44aw *,.l44aw *::before,.l44aw *::after{box-sizing:border-box}

.l44aw__in{position:relative;width:1000px;max-width:100%;margin:0 auto;padding:0 0 44px}

/* The gutter starts where the thousand stops, not at the phone.

   It used to appear at 768, which left the band between 768 and 1000 running
   edge to edge while every other section on the page had already stepped in.
   The 768 rule below still sets the same fifteen; this only brings the moment
   forward to where the measure actually runs out. */
@media (max-width:1000px){
	.l44aw__in{padding-left:15px;padding-right:15px}
}

/* ---- the switch ---- */

/* It follows the reader down and stops under the site's header, so the way back
   to a single artwork is never scrolled away from.
   
   Pinned by the script rather than with sticky, which would be the right tool
   and cannot be used: the theme wraps every page in a container with its
   overflow hidden, and overflow of any kind on any ancestor stops sticky
   working anywhere inside it. Undoing that on the theme's own container to
   suit one section is not a trade worth making.
   
   The box keeps the space while the button is away from it, so nothing moves
   when it detaches or comes back. */
.l44aw__switchbox{height:56px}

.l44aw__switch{
	display:block;margin:0 auto 26px;width:200px;height:30px;padding:0;border:0;border-radius:0;
	background:var(--l44aw-blue);color:var(--l44aw-white);
	font:inherit;font-size:15px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
}

/* The nudge is added here rather than to the figure the script measures, so
   the measurement stays a measurement — what the browser says the header's
   bottom is — and the adjustment stays an adjustment, visible as its own
   number in the admin. */
.l44aw__switch.is-stuck{
	position:fixed;top:calc(var(--l44aw-stick,0px) + var(--l44aw-nudge,0px));
	left:50%;transform:translateX(-50%);
	margin:0;z-index:50;
}
.l44aw__switch:hover{background:var(--l44aw-green)}

/* ---- the single view ---- */

.l44aw__one{
	position:relative;display:grid;
	grid-template-columns:1fr var(--l44aw-w) 1fr;
	/* The space under the card is the row gap rather than a margin on the
	   button. As a margin it belongs to the second row, and an arrow centred in
	   that row would sit above the button's own middle by half of it. */
	grid-template-rows:auto auto;column-gap:35px;row-gap:34px;align-items:center;
}

.l44aw__side,.l44aw__mid{grid-row:1}
.l44aw__side--l{grid-column:1;text-align:center}
.l44aw__mid{grid-column:2;position:relative;z-index:1}
.l44aw__side--r{grid-column:3;text-align:left}
.l44aw__cartline{grid-row:2;grid-column:2}

.l44aw__side{min-width:0}

/* One block per side, which is the thing that moves. The words arriving sit
   inside it, so the distance between the pair is fixed in the markup rather
   than being whatever two separate animations happen to leave it. */
.l44aw__slot{position:relative}
.l44aw__txt{position:relative}
.l44aw__now{position:relative;opacity:1}
.l44aw__next{position:absolute;left:0;right:0;top:0;opacity:0}

.l44aw__seq{font-size:20px;line-height:1.35;text-transform:uppercase}
/* Room enough for the longest title in the set, kept whatever this one needs.
 *
 * A title of two words that wraps while it is moving and unwraps when it stops
 * lifts the price a line as it lands, which is a jump in something that was
 * not supposed to be moving. The script measures every title in the set at the
 * width they will be shown at and writes the tallest here, so the space is the
 * same for all of them from the first draw.
 *
 * Centred in that space rather than sitting at the top of it, so a short title
 * is not nearer the line above than the one below. */
.l44aw__name{
	font-size:30px;font-weight:700;line-height:1.15;text-transform:uppercase;margin:2px 0 6px;
	min-height:var(--l44aw-name-h,auto);
	display:flex;align-items:center;justify-content:center;
}
.l44aw__price{font-size:20px;line-height:1.35;text-transform:uppercase}
.l44aw__price p{margin:0}
.l44aw__price del{opacity:.55;margin-right:6px}
.l44aw__price ins{text-decoration:none}
.l44aw__desc{font-size:20px;line-height:1.35}
.l44aw__desc p{margin:0}
.l44aw__desc strong,.l44aw__desc b{font-weight:700}

/* The movement, stated once, on the block that is going out. Everything inside
   it comes along — there is no second curve to disagree with this one. */
.l44aw__txt.is-moving{transition:transform var(--l44aw-flip) cubic-bezier(.22,.61,.36,1)}

/* Only the fading is per block, because it has to be: opacity on a parent
   takes its children down with it, so the two cannot be nested. */
.l44aw__now.is-leaving{opacity:0;transition:opacity var(--l44aw-flip) ease}
.l44aw__next.is-entering{opacity:1;transition:opacity var(--l44aw-flip) ease}

/* ---- the card ---- */

/* The page may be scrolled vertically over the artwork; the sideways belongs
   to the script, which takes the vertical too once a drag has proved itself
   sideways. Without this the browser owns both and a swipe scrolls the page
   while it turns the card. */
.l44aw__stage{width:var(--l44aw-w);perspective:1600px;touch-action:pan-y}

/* No transition on the turn.
 *
 * A transition interrupted part way through does not carry on from the angle
 * it had reached — the browser takes the matrix it is currently showing and
 * works out a rotation from that, and a matrix does not remember which way
 * round it got there. It takes the shorter way to the new angle, which for a
 * card already past halfway is backwards. Which is why a press sometimes sent
 * it one way and sometimes the other, depending on when in the last turn it
 * arrived.
 *
 * The script moves it frame by frame instead, from the angle it is actually at
 * to the angle asked for. The difference between the two carries the sign, so
 * the direction is decided by arithmetic rather than by a guess about a
 * matrix. */
.l44aw__card{
	position:relative;width:var(--l44aw-w);height:var(--l44aw-h);
	transform-style:preserve-3d;
	cursor:grab;
}
.l44aw__card:active{cursor:grabbing}

/* The shadow is on the faces, so it turns with the card rather than staying
   behind as a mark on the panel.
   
   It cannot be a filter, which would have followed the card's silhouette as it
   goes round: a filter flattens the 3D space of whatever carries it, and this
   sits inside the perspective the whole turn depends on. A box shadow on each
   face turns with that face and costs nothing. */
.l44aw__face{
	position:absolute;inset:0;backface-visibility:hidden;
	background:var(--l44aw-green);
	box-shadow:var(--l44aw-cast);
}
/* The picture is inset by the stroke rather than covered by it, so the whole
   picture is there and the green is a frame round it and not a crop. */
.l44aw__shot{position:absolute;inset:var(--l44aw-edge);overflow:hidden;display:block}
.l44aw__shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.l44aw__face--b{transform:rotateY(180deg)}

/* The thickness. Slices of green through the card's depth — a box of four side
   panels has to be positioned and rotated four ways and shows a seam at every
   corner; a stack shows none from any angle. */
.l44aw__slab{position:absolute;inset:0;background:var(--l44aw-green)}
.l44aw__card.is-flat .l44aw__slab{opacity:0}

/* ---- the button ---- */

/* The green closes over the words rather than taking them with it. Scaled, the
   letters were squashed flat on the way out, which says the type is rubber.
   The box narrows and clips what it can no longer hold.
   
   Padding and min-width said outright: a button carries a little padding of
   the browser's own, and a flex box will not shrink past its contents unless
   it is told it may — between them they left a dozen pixels of green standing
   with a letter inside. */
/* Thirty tall and white on the green, both said outright.
 *
 * This is an anchor, and the theme colours anchors and gives them a height of
 * their own — a colour or a height set on the element beats one this rule
 * hands down, so neither survives being asked for politely. The height needs
 * the minimum and the padding saying with it, or the theme's own padding holds
 * the bar open past thirty however short it is told to be. */
.l44aw__cart{
	display:flex;align-items:center;justify-content:center;overflow:hidden;
	width:var(--l44aw-w);margin:0 auto;
	height:30px !important;min-height:0 !important;padding:0 !important;
	border:0 !important;border-radius:0 !important;min-width:0;
	background:var(--l44aw-green) !important;
	color:var(--l44aw-white) !important;
	font:inherit;font-size:15px;line-height:1 !important;letter-spacing:.05em;
	text-transform:uppercase;text-decoration:none !important;
	white-space:nowrap;cursor:pointer;
	transition:width var(--l44aw-exit) var(--l44aw-exit-ease),
	           background-color .8s linear, color .8s linear;
}

/* ---- the press, answered on the button itself ----
 *
 * WooCommerce's own answer is a View cart link appended after the button,
 * which arrives from nowhere and pushes the page down to make room for itself.
 * It is hidden, and the button says what happened instead.
 *
 * Pink arrives with a cut and no fade — the suddenness is what reads as a
 * response to the press rather than as something the page was going to do
 * anyway — holds a second, then goes back to green over the same eight tenths
 * the shop's flash takes, so the two feel like one site.
 *
 * The words stay. Green again but still reading ADDED TO CART is the honest
 * state: the thing is in the cart and will be until the reader moves on, which
 * is exactly when setCart() puts the label back.
 *
 * Only the colour is held still on the way in — the width keeps its own
 * transition, since that one belongs to the switch between the two views and
 * the two can overlap. */
.l44aw__cart.is-fresh{
	background:var(--l44aw-pink) !important;
	color:#181617 !important;
	transition:width var(--l44aw-exit) var(--l44aw-exit-ease);
}

/* Whatever WooCommerce appends. */
.l44aw .added_to_cart{display:none !important}
.l44aw__cart span{flex:0 0 var(--l44aw-w);min-width:0;text-align:center;color:inherit}
.l44aw__cart:hover,.l44aw__cart:focus{color:var(--l44aw-white) !important;opacity:.92}

/* Sold. Black rather than green, because green is the colour of a thing you
   can do on this site and this is not one — it still goes to the piece's own
   page, which is where the rest of what is known about it lives. */
.l44aw__cart.is-sold{background:#181617 !important}
.l44aw__cart.is-sold:hover{opacity:1}

/* ---- the arrows ---- */

/* On the button's line, and centred across the column of text beside the card
   — the left one under the middle of the title block, the right one under the
   middle of the description. Placed by the grid rather than pinned to the
   section's edge, so they stay centred on those columns at any width. */
.l44aw__arrow{
	grid-row:2;justify-self:center;align-self:center;
	width:48px;height:48px;border:0;border-radius:50%;padding:0;
	background:var(--l44aw-blue);color:var(--l44aw-white);cursor:pointer;
	/* the font, which a button does not inherit on its own */
	font-family:inherit;font-size:22px;font-weight:700;line-height:48px;
	/* Coming out of the press the curve carries past its resting size and
	   settles, which is the overshoot. */
	transition:transform 320ms cubic-bezier(.34,1.56,.64,1),background-color 160ms ease,opacity 300ms ease;
}
.l44aw__arrow--l{grid-column:1}
.l44aw__arrow--r{grid-column:3}
.l44aw__arrow:hover,.l44aw__arrow.is-hot{background:var(--l44aw-green)}
/* Going into the press is short and flat: a bounce on the way down reads as
   the button resisting the click. */
.l44aw__arrow:active{transform:scale(.82);transition:transform 90ms ease-out,background-color 160ms ease}
.l44aw__arrow:focus-visible{outline:2px solid #181617;outline-offset:3px}

/* ---- leaving, in beats ---- */

/* Two classes rather than one: the first carries only the texts, the second
   everything else, and the script puts the second on when the first has
   finished. Delays inside one class would put the timing in the stylesheet and
   the script both, and they would part company the first time either was
   touched. */
.l44aw.is-hiding .l44aw__side--l .l44aw__txt,
.l44aw.is-all .l44aw__side--l .l44aw__txt{transform:translateX(calc(50% + 120px));opacity:0}
.l44aw.is-hiding .l44aw__side--r .l44aw__txt,
.l44aw.is-all .l44aw__side--r .l44aw__txt{transform:translateX(calc(-50% - 120px));opacity:0}

/* Easing in rather than out: they start slowly and are still gaining when they
   reach the card. They are not arriving anywhere, they are going behind
   something, and a thing that slows as it disappears looks pulled. */
.l44aw.is-hiding .l44aw__txt,.l44aw.is-all .l44aw__txt{
	transition:transform var(--l44aw-text-out) var(--l44aw-text-ease),
	           opacity var(--l44aw-text-out) var(--l44aw-text-ease);
}

/* Behind the card while they travel, so they pass under it rather than across
   it. */
.l44aw.is-hiding .l44aw__side,.l44aw.is-all .l44aw__side{z-index:0}

.l44aw.is-all .l44aw__cart{width:0}
.l44aw.is-all .l44aw__arrow--l{transform:translateX(-140px) scale(.4);opacity:0}
.l44aw.is-all .l44aw__arrow--r{transform:translateX(140px) scale(.4);opacity:0}
.l44aw.is-all .l44aw__one,.l44aw.is-hiding .l44aw__one{pointer-events:none}

/* The arrows come back last, and from nothing. Said only while returning: left
   on all the time, the delay would sit on every transform they make and the
   press would answer a beat late. */
.l44aw.is-returning .l44aw__arrow{
	transition:transform 320ms cubic-bezier(.34,1.56,.64,1) 420ms,opacity 200ms ease 420ms}

/* Once there is nothing left to see, the single view is taken out of the flow
   so the rows begin where the card's top edge was. On its own class: tied to
   the class that turns the card, it took the space above the card out from
   under it at the moment the card was moving, and the card rose as it went. */
.l44aw.is-detached .l44aw__one{position:absolute;top:0;left:0;right:0}
.l44aw.is-detached .l44aw__grid{margin-top:0}

/* ---- the grid ---- */

.l44aw__grid{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	column-gap:38px;row-gap:62px;margin-top:34px;
}
.l44aw__grid[hidden]{display:none}

.l44aw__cell{
	opacity:0;transform:translateY(50px);
	transition:opacity 420ms ease,transform 420ms cubic-bezier(.22,.61,.36,1);
}
.l44aw__cell.is-in{opacity:1;transform:translateY(0)}

/* Leaving, they only fade. The floor is coming up under them at the same time,
   and two movements in the same direction at once read as one of them
   stuttering. */
.l44aw__cell.is-out{opacity:0;transform:translateY(0)}

/* ---- on a phone ----
 *
 * One column, read down: the title block, the artwork, the button, then the
 * description. The order is the drawing's — the piece is named before it is
 * shown and described after, which is how a label beside a work on a wall
 * reads.
 *
 * The arrows keep the artwork's own row rather than taking a row of their own.
 * Put below it they were a pair of buttons with nothing beside them; sharing
 * the row they sit at its edges and read as what they are, a way of turning
 * the thing between them. */
@media (max-width:768px){
	/* Further, because they go across the screen here rather than up and down
	   a column beside the artwork — the same distance that reads as a move on
	   a desktop barely clears the words on a phone. */
	.l44cs--artworks{--l44aw-travel:350px}

	/* The phone's own nudge takes over. The script reads this property through
	   the browser, so it picks up whichever of the two applies at the width it
	   is asked at — there is nothing for the script to know about phones. */
	.l44cs--artworks{--l44aw-nudge:var(--l44aw-nudge-m,0px)}

	.l44aw__in{padding-left:15px;padding-right:15px}

	.l44aw__one{
		grid-template-columns:1fr;
		grid-template-rows:auto auto auto auto;
		row-gap:18px;justify-items:center;
	}

	/* The full width of the section, not the width of the words.
	   
	   Centring the items of a grid shrinks each to its contents, so this column
	   was as wide as whatever title happened to be in it — and the block
	   arriving behind it, which is measured against its parent, was laid out at
	   that width and wrapped differently on the way in. Given the whole width
	   there is one measure and one way for a title to break. */
	.l44aw__side--l{grid-column:1;grid-row:1;text-align:center;width:100%;justify-self:stretch}
	.l44aw__mid{grid-column:1;grid-row:2}
	.l44aw__cartline{grid-column:1;grid-row:3}
	.l44aw__side--r{grid-column:1;grid-row:4;text-align:left}

	/* the artwork's row, at its edges and over it — a quarter smaller than on a
	   desktop, where there is a whole column of margin to sit in */
	.l44aw__arrow{
		grid-column:1;grid-row:2;align-self:center;z-index:2;
		width:36px;height:36px;font-size:17px;line-height:36px;
	}
	.l44aw__arrow--l{justify-self:start}
	.l44aw__arrow--r{justify-self:end}

	/* The artwork, the button and the description are one column and share one
	   width.
	   
	   Each is given it outright. Centring the items of a grid shrinks every one
	   of them to its own contents, so the button asked for the full width of a
	   cell that was already only as wide as the words on it — a hundred and
	   seven pixels against a column of four hundred and fifty-five. */
	.l44aw__mid,
	.l44aw__cartline,
	.l44aw__side--r{width:100%;max-width:var(--l44aw-phone-w, 260px)}

	.l44aw__stage{width:100%}
	.l44aw__cart{width:100%}
	.l44aw__cart span{flex:0 0 100%}

	/* The shape as a bare ratio, not as the two lengths: aspect-ratio will not
	   take a length, and handed one it drops the declaration entirely — which
	   left the card no height at all and the artwork nowhere to be seen. */
	.l44aw__card{width:100%;height:auto;aspect-ratio:var(--l44aw-ar, 354 / 500)}

	.l44aw__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:34px}

	.l44aw__name{font-size:24px}
	.l44aw__seq,.l44aw__price,.l44aw__desc{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
	.l44cs--artworks,.l44aw__txt,.l44aw__card,.l44aw__cart,.l44aw__arrow,
	.l44aw__cell,.l44aw__now,.l44aw__next{transition:none !important}
}