/* Magic Moment band.

   Geometry from design-preview-v2.pdf p1, design px at 1440:

     band            x30 -> x1410, 681 tall, rounded
     copy left       108  (the page grid — 78 in from the band's own edge)
     monogram        90 x 89, 77 down from the band top
     eyebrow         ink 210 x 13, white, title case
     heading         two lines, ink 357 / 481, 62 baseline pitch
     CTA             pill 167 x 46
     media           512 x 402, right edge 69 in from the band

   The band runs wider than the page column while its copy stays on the page
   grid. That is the point of the section, so the inner padding is written as
   "page gutter minus band inset" rather than as a number — it then holds the
   alignment at every width instead of only at 1440.

   CONTRAST. The scrim is Deep Green, opaque to 8% of the band and gone by
   57%, solved off the comp by comparing the scrimmed pixels against the
   photograph beside them. Over the copy it is 0.75 opaque or more, so the
   type is effectively on Deep Green at 14.94:1. Further right it thins, and
   there the guarantee is the type size rather than the scrim: the heading is
   64px, which WCAG counts as large text, so it needs 3:1 rather than 4.5:1.
   An image whose left third is bright will still break this — hence the
   field's help text. */

/* Top level on purpose: CSS nesting only admits conditional at-rules inside
   a style rule, so a @keyframes written in there is dropped with no error and
   the animation simply never runs. */
section.magic-moment {

	/* --bandInset is the theme's, shared with cta-band. The inner pad is
	   this module's, and the two compose to put the copy on the page grid at
	   every width:

	     band inset   2.0833% of the page   = 30 of 1440
	     inner pad    5.6522% of the band   = 78 of 1380

	   and 0.020833 + 0.056522 x (1 - 2 x 0.020833) = 0.075, the gutter.
	   They compose only because each measures the box it sits in. A single
	   calc() off --pageGutter could not: inside the band a percentage
	   measures the band's 1380, not the page's 1440.

	   Both are capped for the same reason --pageGutter is — past 1440 the
	   percentages keep growing while the band stops. */
	--bandPad: clamp(8px, 5.6522%, 78px);
	/* One dot pitch per cycle — 1.7px a second, which reads as drift rather
	   than as movement. Raise it to slow the rise down. */

	.container {
		padding-inline: var(--bandInset);
	}

	.band {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		border-radius: var(--rad);
		/* Stands in before an image is chosen, and backs the scrim after. */
		background-color: var(--surface-declaring);
		color: var(--ink-inverse);
	}

	.band-bg {
		position: absolute;
		inset: 0;
		z-index: -3;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Same layer as the image and later in the DOM, so it paints over it —
	   and stays UNDER the scrim, which is what keeps the copy's contrast
	   guarantee the scrim's whatever the footage does. Invisible until it
	   has frames to show: module.js adds .is-playing on the first painted
	   frame, so a video that never decodes leaves the image in place rather
	   than a black rectangle. The same contract as hero's film band. */
	.band-video {
		position: absolute;
		inset: 0;
		z-index: -3;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity .4s var(--easeOut);
	}

	.band-video.is-playing {
		opacity: 1;
	}

	/* The dot grid runs the full height of the band down its left edge, and
	   sits OVER the scrim rather than under it — in the comp the dots read
	   against the Deep Green, not through it. The fade is inside the SVG's
	   own gradient, so nothing here has to fade them.

	   Drawn at NATIVE size, not scaled to the band. The file's dots sit on a
	   9px pitch and the comp's measure 8.5 at 4x, so the artwork is already
	   at page scale — fitting its 811.555 height into the band's 681 would
	   shrink the pitch by a sixth for no reason. It is taller than the band
	   and simply clips, which is what the comp shows.

	   Capped at 40% so it cannot take over the band on a phone, where the
	   band is narrower than the artwork. */
	/* The dot field is drawn by module.js. Everything that made this hard —
	   a seamless loop, and dot SIZE tracking brightness — is explained at the
	   top of that file.

	   The background-image is the supplied SVG standing in until the first
	   frame lands, so the band is never empty with JS off. The script clears
	   it rather than leaving the two to double up. */
	.band-dots {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: -1;
		width: 338.247px;
		max-width: 40%;
		height: 100%;
		display: block;
		pointer-events: none;
		background-position: left top;
		background-repeat: no-repeat;
		background-size: auto;

		/* The two greens the canvas interpolates between, read from here by
		   the script so the palette stays in CSS. */
		--dot-lit: #00AD6D;
		--dot-dim: #22584E;
	}

	.band-scrim {
		position: absolute;
		inset: 0;
		z-index: -2;
		/* color-mix rather than the transparent keyword: it fades the same
		   colour out rather than interpolating towards transparent black,
		   which greys the middle of the ramp. */
		background: linear-gradient(90deg,
			var(--deep-green) 0%,
			var(--deep-green) 8%,
			color-mix(in srgb, var(--deep-green) 0%, transparent) 57%);
	}

	.band-inner {
		position: relative;
		display: grid;
		gap: clamp(40px, 5vw, 64px);
		/* Asymmetric, as the comp is: the copy sits 78 in from the band's
		   left so it lands on the page grid, while the glass panel sits only
		   53 in from the right. 3.84% is that 53 of the band's 1380, so the
		   two shrink together. */
		padding: 77px clamp(8px, 3.84%, 53px) 97px var(--bandPad);

		@media (min-width: 1000px) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 545px);   /* the glass panel's own width */
			/* The copy column stretches so its mark can sit at the top and
			   its text at the bottom, as the comp has them. The media is
			   centred inside that height on its own. */
			align-items: stretch;
			min-height: 681px;
		}
	}

	/* Mark at the top, copy at the bottom — the comp leaves 163px between
	   them, which is the band's height rather than a gap worth naming. */
	.band-copy {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 48px;
	}

	.band-mark {
		width: 90px;
		height: auto;
		flex: none;
		align-self: start;
	}

	/* Type comes from the theme-wide eyebrow rule (_typography.css). */
	.band-eyebrow {
		color: var(--ink-inverse);
		/* 25 and 47 are what put the ink gaps on the comp's 35 and 42 — the
		   difference is the line box each sits in, so they are not the same
		   number twice. */
		margin: 0 0 25px;
	}

	.band-heading {
		/* The comp sets the two baselines 62 apart at 64px. */
		line-height: .97;
		margin: 0;
		color: var(--ink-inverse);
		text-wrap: balance;
	}

	.rich-heading {
		--emphasis-weight: var(--heavy);
		--emphasis-color: var(--signal);
	}

	.band-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 47px;
	}

	/* Liquid glass. Not in the comp — the comp sets the UI on a plain white
	   card — so this is a direction rather than a measurement.

	   Four things make it read as glass rather than as a tint: the backdrop
	   is blurred AND saturated, so colour from the photograph bleeds through
	   rather than being greyed; the border is a hairline of the same light,
	   not a grey stroke; an inset highlight along the top edge stands in for
	   a specular; and it casts a real shadow so it sits above the band
	   instead of in it.

	   Two fallbacks. Without backdrop-filter the panel would be a washed-out
	   rectangle over a photograph, so it goes more opaque instead. And a
	   reader who has asked for reduced transparency gets a solid panel — the
	   effect is decoration, and not worth their legibility. */
	/* Takes no space and paints nothing; it only carries the filter. */
	.band-glass-filter {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
	}

	.band-media {
		/* 8%, down from 14. The blur and the saturate do most of the work of
		   reading as glass; the tint mostly costs transparency.

		   Pure white rather than Warm White, which these were still on from
		   before the inverse-ink change — on a dark ground the warm cast just
		   muddies the panel.

		   The floor is the heading sitting over it. At 24.89px that clears
		   WCAG's large-text threshold and needs 3:1 rather than 4.5:1, which
		   is what makes a tint this light safe over a photograph. Take it
		   much lower, or drop that heading under 24px, and it stops being
		   true. */
		--glassTint: color-mix(in srgb, var(--pure-white) 8%, transparent);
		--glassEdge: color-mix(in srgb, var(--pure-white) 22%, transparent);

		position: relative;
		margin: 0;
		align-self: center;
		justify-self: end;
		width: 100%;
		/* 545 and 18 are the comp's: the panel spans x812 to x1357 and the
		   card inside it sits at x830, 512 wide. */
		max-width: 545px;
		padding: 18px;
		border-radius: var(--rad);
		background: var(--glassTint);
		border: 1px solid var(--glassEdge);
		backdrop-filter: blur(24px) saturate(150%);
		-webkit-backdrop-filter: blur(24px) saturate(150%);
		box-shadow:
			0 24px 60px rgba(0, 0, 0, .28),
			inset 0 1px 0 color-mix(in srgb, var(--pure-white) 40%, transparent);

		/* The sheen, running off the top-left corner as the light does. */
		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 1;
			border-radius: inherit;
			background: linear-gradient(158deg,
				color-mix(in srgb, var(--pure-white) 24%, transparent) 0%,
				transparent 46%);
			pointer-events: none;
		}

		/* Refraction at the edge.

		   Real refraction displaces what is behind the glass, and no CSS
		   filter does that — backdrop-filter blurs and shifts colour but never
		   moves a pixel sideways. What actually reads as refraction in the
		   comp is not the middle of the panel but its RIM: a band a few px
		   wide where the backdrop goes brighter, softer and more saturated,
		   with a lit hairline at the very edge and a darker one just inside
		   it. That is the part worth reproducing, and it is the part the eye
		   reads as thickness.

		   The ring is the pseudo's border box less its padding box, so its
		   width is one padding value rather than a hand-drawn gradient that
		   would have to be redrawn for every radius. This layer's backdrop is
		   the parent's already-filtered backdrop, so the two compose and the
		   rim lands stronger than the field without a second set of numbers
		   to keep in step. */
		&::after {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 1;
			padding: 11px;
			border-radius: inherit;
			pointer-events: none;

			backdrop-filter: blur(7px) saturate(190%) brightness(1.16);
			-webkit-backdrop-filter: blur(7px) saturate(190%) brightness(1.16);

			mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
			mask-clip: padding-box, border-box;
			mask-composite: exclude;
			-webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
			-webkit-mask-clip: padding-box, border-box;
			-webkit-mask-composite: xor;

			/* The two hairlines — lit outside, a shade darker just within,
			   which is what gives the edge its thickness. */
			box-shadow:
				inset 0 0 0 1px color-mix(in srgb, var(--pure-white) 38%, transparent),
				inset 0 0 0 11px color-mix(in srgb, var(--deep-green) 10%, transparent);
		}

		/* Without backdrop-filter the ring is a flat pale band, which reads as
		   a mistake rather than as glass. */
		@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
			&::after { display: none; }
		}

		/* Inset a further 24 from the card below it — the comp aligns this
		   with the card's CONTENT rather than the card's edge. 24.89 / 1.085
		   is measured: the two lines ink 346 and 404 wide on a 27 pitch. */
		.media-heading {
			position: relative;
			margin: 6px 0 27px;
			padding-inline: 24px;
			font-size: 2.489rem;
			line-height: 1.085;
			font-weight: var(--book);
			letter-spacing: -.01em;
			color: var(--ink-inverse);
			text-wrap: balance;

			--emphasis-weight: var(--bold);
			--emphasis-color: inherit;
		}

		@supports not (backdrop-filter: blur(1px)) {
			background: color-mix(in srgb, var(--pure-white) 26%, transparent);
		}

		@media (prefers-reduced-transparency: reduce) {
			background: var(--surface-raised);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;

			&::before,
			&::after { display: none; }
		}

		/* The interface sits ON the glass as an opaque white card, which is
		   what the comp shows — a second TRANSLUCENT surface in here reads as
		   two panes of glass rather than one. Radius on the media itself, so
		   an asset delivered as a square-cornered export still sits right. */
		img {
			display: block;
			position: relative;
			width: 100%;
			height: auto;
			/* 18 of padding against a 12 radius leaves nothing to stay
			   parallel to, so the card is square. Narrow the panel's padding
			   if it should keep a curve. */
			border-radius: max(0px, calc(var(--rad) - 18px));
		}

		&.is-embed {
			/* THE RATIO BELONGS TO THE CARD, NOT TO THE PANEL.

			   .band-media is the glass — 18px of inset on three or four sides
			   and, whenever the author fills the field in, a heading above the
			   card. Sized by aspect-ratio the panel was all of that squeezed into
			   one ratio box, so the heading took its height OUT of the card
			   instead of adding to the panel, and the card lost exactly as much
			   as the heading wrapped. At 375 that heading wraps to four lines and
			   took 104 of a 199px box, leaving a 77px sliver of a phone under the
			   panel's own overflow:hidden — a cropped demo that reads as a broken
			   render rather than as a crop.

			   On the card itself --ratio means what it says at every width, and
			   the panel grows to hold whatever the author puts above it. With no
			   heading — the comp's arrangement, and both templates' — the panel
			   lands within a few px of where the ratio box had it, so nothing the
			   comp measures moves. */
			iframe {
				display: block;
				width: 100%;
				height: auto;
				aspect-ratio: var(--ratio, 16 / 10);
				border: 0;
			}

			/* A PHONE HAS A FLAT BOTTOM, SO IT MUST REACH THE EDGE.

			   The card is cropped — the device is cut off rather than shown
			   whole — and a cut only reads as one when the thing doing the
			   cutting is an edge. Left with the panel's 18px below it the
			   phone ended on a flat line with a strip of glass beneath, which
			   reads as a broken render rather than a device running out of
			   the card.

			   So the bottom padding goes and the iframe runs into the corner.
			   overflow:hidden lets the panel's own radius round the two bottom
			   corners of the frame, which is what keeps the glass edge intact
			   while the phone inside it stays square. The other three sides
			   keep their inset.

			   AND ONLY FOR A PHONE. None of the above is true of the desktop
			   UI: it is a card in its own right, with its own corners, and
			   nothing about it is cut off. Run to the edge it just loses the
			   inset the other three sides have and sits against the glass on
			   one side only. Written without the attribute this rule took the
			   padding off both, because the panel cannot tell them apart —
			   module.js marks the box from what the card reports. A card that
			   never reports keeps the padding, which is the safe way round. */
			&[data-demo-shape="phone"] {
				padding-bottom: 0;
				overflow: hidden;
			}
		}
	}

	/* Below the two-column break the photograph cannot carry a side scrim —
	   the copy sits over the middle of it. The ramp turns vertical and holds
	   longer, so the type keeps the same ground it has on desktop. */
	@media (max-width: 999px) {

		/* NO SCRIM ON A PHONE. Asked for directly, and it is a real trade — the
		   numbers are here so nobody has to re-derive them before reversing it.

		   Stacked, the copy runs from 12% to 88% of the band's height. There is
		   no clear band for a vertical ramp to open into, so any plateau strong
		   enough for the type covers the whole frame — which is why this went
		   from full Deep Green to 55%, to 0.75 held to 70%, to nothing.

		   WHAT IT COSTS. White type now sits on the footage itself. Measured on
		   the two shipped assets, cropped the way object-fit lands them in a
		   359 x 345 band, 95th percentile luminance under each piece of type:

		                                 eyebrow (needs 4.5)  heading (needs 3.0)
		     cinc-mm-pickleball-poster        2.27:1              2.15:1
		     magic-moment-board-room          2.19:1              1.46:1

		   So this is below WCAG 2.1 AA on both counts, on both clips, and the
		   theme is otherwise held to AA. It is legible on footage this dark and
		   it will not be on a bright frame.

		   TO PUT IT BACK, restore the rule this replaced — 0.75 held to 70%,
		   falling to 5% at 100%, which measured 6.23:1 / 6.01:1 on the
		   pickleball still and 6.09:1 / 4.53:1 on the board room:

		     background: linear-gradient(180deg,
		         color-mix(in srgb, var(--deep-green) 75%, transparent) 0%,
		         color-mix(in srgb, var(--deep-green) 75%, transparent) 70%,
		         color-mix(in srgb, var(--deep-green) 5%, transparent) 100%);

		   display:none rather than a transparent background, so the layer costs
		   nothing to composite. The band's own Deep Green still backs it, so the
		   no-video and reduced-motion states are unchanged at 14.94:1. */
		.band-scrim {
			display: none;
		}

		/* SYMMETRIC ONCE THE COLUMNS STACK. The 3.84% right inset is the glass
		   panel's own offset in the comp, and it only means anything while the
		   panel sits BESIDE the copy. Stacked, the panel is stretched to the
		   copy's own column, so a right inset that differs from --bandPad puts
		   the two edges 6.5px out of line at 375 and takes the band off the page
		   grid on one side only. --bandPad both sides is what keeps the copy AND
		   the panel on the 7.5% gutter every other section is set to. */
		.band-inner {
			padding-block: clamp(40px, 8vw, 77px) clamp(40px, 8vw, 97px);
			padding-inline: var(--bandPad);
		}

		.band-copy {
			gap: clamp(32px, 6vw, 48px);
		}

		/* 90 is 6.5% of the band on desktop and 25% of it at 375, so a mark that
		   introduces the band up there competes with the heading down here. The
		   vw term holds roughly the desktop proportion across the range and
		   reaches 90 again before the two-column break, so nothing changes at
		   the widths the comp measures. */
		.band-mark {
			width: clamp(56px, 16vw, 90px);
		}

		/* The comp's 25 and 47 are ink gaps set against a 64px heading. The
		   heading clamps to 34 on a phone and these did not, so the block kept a
		   desktop's worth of air around type half the size. Both scale with the
		   viewport and land back on the comp's numbers well before the break. */
		.band-eyebrow {
			margin-bottom: clamp(16px, 3.6vw, 25px);
		}

		.band-actions {
			margin-top: clamp(28px, 6.6vw, 47px);
		}

		.band-media {
			justify-self: stretch;
			max-width: none;
		}

		/* Written with .band-media in front deliberately: the rule this
		   overrides is nested inside .band-media, so a bare .media-heading here
		   would be a step LOWER in specificity and lose despite coming later. */
		.band-media .media-heading {
			/* 24.89 is the comp's, chosen against a 64px band heading. Stacked,
			   the band heading is 34 and this one is not scaled at all, so the
			   two close to within 9px and the panel stops reading as the quieter
			   of the two. It scales with the column and returns to 24.89 at the
			   break — and stays above 24px the whole way, which is what keeps the
			   3:1 large-text allowance the glass tint is sized against. */
			font-size: clamp(2.4rem, 5.4vw, 2.489rem);
			/* 24 a side aligns this with the card's CONTENT, which is a thing
			   worth doing while that card is 512 wide. On a stretched panel it is
			   15% of the width spent on an alignment there is nothing left to
			   align to. */
			padding-inline: clamp(6px, 3vw, 24px);
			margin-bottom: clamp(18px, 4vw, 27px);
		}

		/* ONE BACKDROP PASS, NOT TWO. The rim samples the panel's own already
		   filtered backdrop, so on this side of the break a phone is compositing
		   two stacked backdrop-filter layers over a playing video for an effect
		   a few px wide on a panel the reader is holding at arm's length. The
		   two hairlines are what actually draw the edge and they cost nothing,
		   so they stay and only the second sample goes. */
		.band-media::after {
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}
}