/**
 * NTM Framed Image — everything scoped under .ntm-fi.
 *
 * Layout: .ntm-fi reserves room for the part of the frame that sticks out; .ntm-fi__stage
 * is exactly the image; .ntm-fi__frame is placed from the chosen corner (--ntm-fi-ox / -oy)
 * with a size in % of the image. The SVG path is redrawn by the script at the frame's real
 * pixel size (even line, pathLength = 1 for the draw animation).
 *
 * States set by the script: .is-ready (script running), .is-armed (start state),
 * .is-in / .is-drawn (end state), .is-settled (entrance finished → hover timing),
 * .is-redraw (hover redraw playing).
 */
.ntm-fi {
	--ntm-fi-color: #DC0134;
	--ntm-fi-stroke: 5px;
	--ntm-fi-w: 88.2%;
	--ntm-fi-h: 86.9%;
	--ntm-fi-ox: 37px;
	--ntm-fi-oy: 32px;
	--ntm-fi-radius: 0;
	--ntm-fi-bracket: 30;
	--ntm-fi-draw-dur: 1.4s;
	--ntm-fi-draw-delay: .3s;
	--ntm-fi-img-dur: 1.1s;
	--ntm-fi-hover-dur: .5s;
	--ntm-fi-hover-d: 10px;
	--ntm-fi-ease: cubic-bezier(.65, 0, .35, 1);
	--ntm-fi-lift-shadow: rgba(0, 0, 0, .18);
	--ntm-fi-sx: 1;  /* Direction of the frame corner: +1 right / -1 left … */
	--ntm-fi-sy: -1; /* … -1 up / +1 down. */
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: var(--ntm-fi-oy) var(--ntm-fi-ox) 0 0;
}
.ntm-fi *, .ntm-fi *::before, .ntm-fi *::after { box-sizing: border-box; }
.ntm-fi--tl { --ntm-fi-sx: -1; --ntm-fi-sy: -1; padding: var(--ntm-fi-oy) 0 0 var(--ntm-fi-ox); }
.ntm-fi--br { --ntm-fi-sx: 1; --ntm-fi-sy: 1; padding: 0 var(--ntm-fi-ox) var(--ntm-fi-oy) 0; }
.ntm-fi--bl { --ntm-fi-sx: -1; --ntm-fi-sy: 1; padding: 0 0 var(--ntm-fi-oy) var(--ntm-fi-ox); }

.ntm-fi .ntm-fi__stage { position: relative; }

/* ---------- Frame ---------- */
.ntm-fi .ntm-fi__frame {
	position: absolute;
	z-index: 0;
	width: var(--ntm-fi-w);
	height: var(--ntm-fi-h);
	pointer-events: none;
}
.ntm-fi--tr .ntm-fi__frame { top: calc(var(--ntm-fi-oy) * -1); right: calc(var(--ntm-fi-ox) * -1); }
.ntm-fi--tl .ntm-fi__frame { top: calc(var(--ntm-fi-oy) * -1); left: calc(var(--ntm-fi-ox) * -1); }
.ntm-fi--br .ntm-fi__frame { bottom: calc(var(--ntm-fi-oy) * -1); right: calc(var(--ntm-fi-ox) * -1); }
.ntm-fi--bl .ntm-fi__frame { bottom: calc(var(--ntm-fi-oy) * -1); left: calc(var(--ntm-fi-ox) * -1); }
.ntm-fi--front .ntm-fi__frame { z-index: 2; }
.ntm-fi .ntm-fi__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ntm-fi .ntm-fi__path {
	fill: none;
	stroke: var(--ntm-fi-color);
	stroke-width: var(--ntm-fi-stroke);
	stroke-linecap: butt;
	stroke-linejoin: miter;
	stroke-miterlimit: 10;
}

/* ---------- Image ---------- */
.ntm-fi .ntm-fi__figure { position: relative; z-index: 1; display: block; margin: 0; padding: 0; }
.ntm-fi .ntm-fi__link { display: block; }
.ntm-fi .ntm-fi__img-wrap { display: block; overflow: hidden; }
.ntm-fi .ntm-fi__img { display: block; width: 100%; height: auto; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }

/* ---------- Animation ---------- */
/* The dash is a little longer than the outline (1.01, gap 2) so rounding can never leave the
   end short of the start; fully hidden = offset 1.02. */
@keyframes ntm-fi-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes ntm-fi-show { to { opacity: 1; } }

/* Until the script runs, hide what is about to animate (no flash). If the script never
   runs, show it anyway after 2.5 s. */
.ntm-fi--anim.ntm-fi--draw:not(.ntm-fi--t-hover):not(.is-ready) .ntm-fi__frame,
.ntm-fi--anim.ntm-fi--draw.ntm-fi--t-hover:not(.is-ready) .ntm-fi__frame,
.ntm-fi--anim.ntm-fi--in-detach:not(.is-ready) .ntm-fi__figure,
.ntm-fi--anim.ntm-fi--in-wipe:not(.is-ready) .ntm-fi__figure,
.ntm-fi--anim.ntm-fi--in-fade-up:not(.is-ready) .ntm-fi__figure,
.ntm-fi--anim.ntm-fi--in-zoom:not(.is-ready) .ntm-fi__figure { opacity: 0; animation: ntm-fi-show 0s 2.5s forwards; }

/* One frame with no transitions while the script switches to the start state. */
.ntm-fi.is-no-anim .ntm-fi__frame,
.ntm-fi.is-no-anim .ntm-fi__path,
.ntm-fi.is-no-anim .ntm-fi__figure,
.ntm-fi.is-no-anim .ntm-fi__img-wrap,
.ntm-fi.is-no-anim .ntm-fi__img { transition: none !important; }

/* Frame drawing. */
.ntm-fi.is-ready .ntm-fi__path {
	stroke-dasharray: 1.01 2;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset var(--ntm-fi-draw-dur) var(--ntm-fi-ease) var(--ntm-fi-draw-delay);
}
.ntm-fi--t-hover.is-ready .ntm-fi__path { transition-delay: 0s; }
.ntm-fi--draw.is-armed:not(.is-drawn) .ntm-fi__path { stroke-dashoffset: 1.02; }
.ntm-fi.is-redraw .ntm-fi__path { animation: ntm-fi-draw var(--ntm-fi-draw-dur) var(--ntm-fi-ease); }

/* Image entrance: start state while armed; the transition runs when .is-in is added. */
.ntm-fi.is-armed .ntm-fi__figure,
.ntm-fi.is-armed .ntm-fi__img-wrap,
.ntm-fi.is-armed .ntm-fi__img {
	transition: transform var(--ntm-fi-img-dur) var(--ntm-fi-ease), opacity var(--ntm-fi-img-dur) var(--ntm-fi-ease), clip-path var(--ntm-fi-img-dur) var(--ntm-fi-ease), box-shadow var(--ntm-fi-hover-dur) ease;
}
.ntm-fi--in-detach.is-armed:not(.is-in) .ntm-fi__figure { transform: translate(calc(var(--ntm-fi-sx) * var(--ntm-fi-ox)), calc(var(--ntm-fi-sy) * var(--ntm-fi-oy))); }
.ntm-fi--in-wipe.is-armed:not(.is-in) .ntm-fi__img-wrap { clip-path: inset(0 100% 0 0); }
.ntm-fi--in-wipe.ntm-fi--tl.is-armed:not(.is-in) .ntm-fi__img-wrap,
.ntm-fi--in-wipe.ntm-fi--bl.is-armed:not(.is-in) .ntm-fi__img-wrap { clip-path: inset(0 0 0 100%); }
.ntm-fi--in-wipe.is-armed .ntm-fi__img-wrap { clip-path: inset(0 0 0 0); }
.ntm-fi--in-fade-up.is-armed:not(.is-in) .ntm-fi__figure { opacity: 0; transform: translateY(40px); }
.ntm-fi--in-zoom.is-armed:not(.is-in) .ntm-fi__figure { opacity: 0; }
.ntm-fi--in-zoom.is-armed:not(.is-in) .ntm-fi__img { transform: scale(1.18); }

/* Hover (after the entrance has finished). */
.ntm-fi.is-settled .ntm-fi__figure,
.ntm-fi.is-settled .ntm-fi__img,
.ntm-fi.is-settled .ntm-fi__frame { transition: transform var(--ntm-fi-hover-dur) var(--ntm-fi-ease), box-shadow var(--ntm-fi-hover-dur) ease, opacity var(--ntm-fi-hover-dur) ease; }
.ntm-fi--hi-lift.is-settled:hover .ntm-fi__figure,
.ntm-fi--hi-lift-zoom.is-settled:hover .ntm-fi__figure {
	transform: translate(calc(var(--ntm-fi-sx) * -1 * var(--ntm-fi-hover-d)), calc(var(--ntm-fi-sy) * -1 * var(--ntm-fi-hover-d)));
	box-shadow: 0 22px 44px -18px var(--ntm-fi-lift-shadow);
}
.ntm-fi--hi-zoom.is-settled:hover .ntm-fi__img,
.ntm-fi--hi-lift-zoom.is-settled:hover .ntm-fi__img { transform: scale(1.06); }
.ntm-fi--hf-shift.is-settled:hover .ntm-fi__frame { transform: translate(calc(var(--ntm-fi-sx) * var(--ntm-fi-hover-d)), calc(var(--ntm-fi-sy) * var(--ntm-fi-hover-d))); }

@media (prefers-reduced-motion: reduce) {
	.ntm-fi--motion-safe .ntm-fi__frame,
	.ntm-fi--motion-safe .ntm-fi__figure,
	.ntm-fi--motion-safe .ntm-fi__img-wrap,
	.ntm-fi--motion-safe .ntm-fi__img,
	.ntm-fi--motion-safe .ntm-fi__path { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; }
}