/* ==========================================================================
   THE SCROLL INVITATION - the phone's page-wide copy.

   The main page used to carry TWO invitations, one owned by each pinned
   scene: `.ct3d__hint` appeared for two windows of the 3D section's progress
   and `.ctf__hint` for three windows of the closing scene's. Between those
   windows - and over THE CAMTALKER, the cards, the counter, the legacy
   blocks and the download block, none of which is a pinned scene - there was
   nothing on screen at all.

   On the phone that is now one element instead. `[data-ct-scrollhint]` is
   fixed to the window, is up from the first screen, and goes down only at the
   real end of the page. It reuses the shared `.ct-hint` component in
   camtalk-scroll3d.css for everything about how it LOOKS - the same words,
   the same compact size, the same pink chevron, the same bottom-left corner -
   and this file only says where it sits and when.

   Loaded last of the main page's stylesheets, so the two rules that switch
   the scene-owned copies off below override the ones that switched them on.

   THE WIDE WINDOW IS NOT TOUCHED by anything in this file: every rule is
   inside the 1000px query, which is the same breakpoint both scenes use to
   choose their phone profile. The desktop keeps `.ctf__hint` and its SCROLL.
   ========================================================================== */

/* The wide window never lays this one out at all: it keeps `.ctf__hint`
   and the SCROLL its composition was signed off with. */
.ct-scrollhint {
	display: none;
}

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

	/* --- the two scene-owned copies, off ---------------------------------
	   Hidden rather than deleted: both elements stay in the markup and both
	   scenes carry on writing `--a` and `.is-live` into them, untouched, for
	   the wide window. `display: none` is what keeps the phone from ever
	   showing a second invitation during a scene transition, when the page
	   copy and a scene copy would otherwise both be fading.

	   Selector weight matches the rules being overridden (0,2,0 and 0,1,0);
	   this file's place in the cascade is what decides it. */
	.ct3d--mobile .ct3d__hint {
		display: none;
	}

	.ctf__hint {
		display: none;
	}

	/* --- the page copy -----------------------------------------------------
	   Fixed, not absolute: it belongs to the window rather than to any one
	   section, which is the whole point of it.

	   z-index 90 puts it over every section on the page and under the two
	   things it must never cover: the mobile menu (.momenu, z-index 100,
	   which the script also fades it out for) and the assistant's launcher,
	   which sits in its own layer near the top of the stack.

	   The bottom offset carries `env(safe-area-inset-bottom)` so the words
	   clear the home indicator, and the script re-reads the window whenever
	   the browser's own chrome collapses or expands.

	   The measure stops short of the assistant, and by more than the shared
	   component does. `.ct-hint` caps itself at `calc(100% - 168px)`, which
	   was fitted to a 59px round launcher; the one this page actually ships
	   is the wide pill, measured at 148px, and it starts 159px in from the
	   right edge at all three widths. 168 left a 7px gap at 360. 196 leaves
	   15px at 360, 390 and 430 alike - the block is left-anchored, so the
	   clearance is the same number at every width rather than a proportion
	   of one. */
	.ct-scrollhint {
		position: fixed;
		left: 22px;
		bottom: calc(14px + env(safe-area-inset-bottom));
		z-index: 90;
		display: flex;
		max-width: calc(100% - 196px);
		/* Two different disappearances share one property here.
		   At the end of the page the script drives `--a` down a ramp of its
		   own, frame by frame, and this short transition only smooths it;
		   when the mobile menu opens, `--a` goes to 0 in one step and this
		   is the whole of the fade. 140ms is short enough not to lag a
		   flick and long enough to be a fade rather than a cut.

		   Visibility is in the transition on purpose: it holds `visible`
		   for the whole of the fade out and only then goes, so the words do
		   not vanish on its first frame. */
		transition: opacity 140ms linear, visibility 140ms linear;
	}

	/* Two lines is the cap, not the target: whatever the width and whatever
	   the language, the sentence never becomes a paragraph in the corner. */
	.ct-scrollhint .ct-hint__label {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	/* --- 360, the narrowest width supported ---------------------------------
	   The only width where the sentence does not fit on one line in the room
	   the assistant leaves. Measured at 11.16px (what the component's
	   `clamp(11px, 3.1vw, 13px)` gives at 360): Korean wants 175px and
	   English 182px, and there are 164px between the left margin and the
	   launcher's 15px of clearance.

	   It matters because of the FIRST screen rather than this corner: the
	   hero's third store button, One Store, ends 50px above the bottom of
	   the window at every supported width. A one-line block is 39px tall
	   and passes under it with 3px crossing - which is the chevron's own top
	   bearing and carries no ink; the two-line block was 56px and landed
	   across the button. So the type gives up a little over a point here,
	   and nothing else moves - not the hero, not the button, not the margin,
	   not the clearance, which measures 24px at 360 once the sentence is on
	   one line.

	   390 and 430 are untouched: they keep 12.09px and 13px on one line, 42
	   and 44px tall, with 16px and 42px of clearance in the wider of the two
	   languages. */
	@media (max-width: 380px) {
		.ct-scrollhint .ct-hint__label {
			font-size: 9.9px;
			letter-spacing: -0.02em;
		}
	}

	/* Reduced motion: the chevron's drift is already off in the component,
	   and the invitation now simply is or is not there. */
	@media (prefers-reduced-motion: reduce) {
		.ct-scrollhint {
			transition: none;
		}
	}
}