/* =====================================================================
   home.css – the front page (index.html)
   ---------------------------------------------------------------------
   Sections, in the same order as on the page:
     1. Intro (title, text, pineapple)
     2. Text effects (highlight sweep, typewriter cursor)
     3. Section headings
     4. Flip cards ("tiles") for projects and links
     5. "Worth a visit" (other people's projects)
     6. Footer
     7. Entrance animations (things sliding / fading in)
     8. Phones
   Colours and fonts come from common.css.
   ===================================================================== */


/* ---------- 1. Intro ---------- */

/* Two columns: text on the left (7 parts), pineapple on the right (5 parts) */
.intro {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 32px;
	align-items: center;
	padding: 72px 0 24px;
}

/* .mask hides anything outside its box. The title starts below the box
   and slides up into view, so it looks like it rises out of a slot.   */
.mask { overflow: hidden; }

h1 {
	color: var(--dark);
	font-size: clamp(3rem, 7vw, 4.6rem);   /* grows with the screen, between 3rem and 4.6rem */
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 6px;
}

/* "FAMILY PROJECT" under the title */
.kicker {
	color: var(--primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0 0 18px;
}

/* The larger, light intro paragraphs */
.lead {
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.75;
	margin: 0 0 18px;
}

.pineapple { text-align: center; }
.pineapple img { width: 100%; max-width: 330px; height: auto; }


/* ---------- 2. Text effects ---------- */

/* Highlight sweep on "All the programs have an educational purpose in mind."
   The background is half see-through, half red. It starts showing the
   see-through half; home.js adds the class "on", which slides it over
   to the red half.                                                     */
.highlight {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, var(--highlight) 0);
	background-size: 200%;
	background-position: 0;
	padding: 0 .5rem;
	transition: background-position .8s;
}
.highlight.on { background-position: -100%; }

/* Blinking cursor shown while the typewriter is typing (home.js adds "typing") */
.typing::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.1em;
	margin-left: 3px;
	vertical-align: -0.15em;
	background: var(--dark);
	animation: blink .6s infinite alternate;
}
@keyframes blink { from { opacity: 0; } to { opacity: 1; } }


/* ---------- 3. Section headings ---------- */

section { padding: 32px 0; }
#projects-title { scroll-margin-top: 24px; }   /* a little space above the heading when the page glides to it */

h2 {
	color: var(--dark);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 4px;
}

/* The small sentence under each heading */
.section-note { margin: 0 0 28px; }


/* ---------- 4. Flip cards ("tiles") ----------
   Used for both "My projects" and "Worth a visit".
   A tile has two sides stacked on top of each other:
     .tile-front – the thumbnail with the name on a band
     .tile-back  – the information (turned away at first)
   Turning .tile-inner 180° shows the back. That happens:
     • on hover (only on devices with a mouse)
     • when the tile is reached with the Tab key
     • on phones, when js/home.js adds the class "flipped" after a tap  */

/* The grid fits as many 190px-wide tiles per row as there is room for */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tile {
	display: block;
	aspect-ratio: 5 / 6;          /* every tile has the same shape */
	perspective: 1000px;          /* gives the flip a 3D look */
	color: inherit;
	text-decoration: none;
	border-radius: 8px;
	cursor: pointer;
}
.tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

.tile-inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .6s;
	transform-style: preserve-3d;
}
@media (hover: hover) {
	.tile:hover .tile-inner { transform: rotateY(180deg); }
}
.tile:focus-visible .tile-inner,
.tile.flipped .tile-inner { transform: rotateY(180deg); }

/* Both sides fill the whole tile; each is hidden when it faces away */
.tile-front,
.tile-back {
	position: absolute;
	inset: 0;
	border-radius: 8px;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

/* --- Front: picture + name band --- */
.tile-front { background: var(--soft); }
.tile-front img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;            /* fill the tile, any picture shape works */
}
.tile-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 14px 12px;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));   /* dark fade so the white text is readable */
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1.3;
}

/* --- Back: the information --- */
.tile-back { transform: rotateY(180deg); background: #fff; }

/* Project back side */
.box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px 16px;
}

/* The icon, with a big faint copy of the same icon behind it */
.icon {
	position: relative;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	color: var(--primary);
}
.icon svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.icon .shadow {
	position: absolute;
	width: 110px;
	height: 110px;
	left: 50%;
	top: 50%;
	transform: translate(-30%, -35%);
	color: #000;
	opacity: .04;
	z-index: 0;
}

.box-title {
	display: block;
	color: var(--dark);
	font-weight: 700;
	text-transform: uppercase;
	font-size: .85rem;
	letter-spacing: .03em;
	margin: 0 0 4px;
}
.box-text { display: block; font-size: .85rem; line-height: 1.5; }

/* The little label at the bottom: "Open" (blue) or "Coming soon" (grey) */
.tag {
	margin-top: 14px;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 3px 10px;
	border-radius: 99px;
	background: var(--soft);
	color: #999;
}
.tag.go { background: rgba(0, 136, 204, .1); color: var(--primary); }

/* --- "Coming soon" tiles: grey picture, a stamp, and a quieter back --- */
.tile.soon { cursor: default; }
.tile.soon .tile-front img { filter: grayscale(1); opacity: .55; }
.stamp {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 3px 10px;
	border-radius: 99px;
	background: var(--dark);
	color: #fff;
	font-size: .65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.box.soon { background: #fcfcfc; }
.box.soon .icon { color: #b5b5b5; }
.box.soon .box-title { color: #888; }


/* ---------- 5. "Worth a visit" (other people's projects) ----------
   Grey background, and the back of each tile has a grey left edge and
   the website's name, so it is clearly separate from "My projects".   */
.others {
	margin-top: 24px;
	padding: 36px 0 56px;
	background: var(--soft);
	border-top: 1px solid var(--line);
}

.link-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 18px 20px;
	border-left: 4px solid #c9c9c9;
	transition: border-color .2s;
}
.tile:hover .link-card,
.tile:focus-visible .link-card { border-left-color: var(--primary); }   /* the edge turns blue */

.link-card strong { color: var(--dark); display: block; line-height: 1.35; margin-bottom: 6px; }
.link-card span { font-size: .85rem; line-height: 1.5; }
.link-card .host { display: block; font-size: .75rem; color: #aaa; margin-top: 10px; }


/* ---------- 6. Footer ---------- */
footer { text-align: center; font-size: .8rem; color: #aaa; padding: 24px 0 32px; }


/* ---------- 7. Entrance animations ----------
   In the HTML, an element with data-anim="..." animates when it scrolls
   into view. home.js adds the class "in" at that moment.
     data-anim="mask"  – slides up out of a .mask box (the title)
     data-anim="up"    – fades in while moving up
     data-anim="right" – fades in from the right (the pineapple)
   style="--d:300ms" in the HTML sets a delay, so things appear one after another.
   The ".js" part means: only hide things if JavaScript is running,
   so the page is still readable if it isn't.                           */
.js [data-anim] { opacity: 0; }
.js [data-anim].in {
	opacity: 1;
	animation: var(--a) .8s ease both;
	animation-delay: var(--d, 0ms);
}

[data-anim="mask"]  { --a: maskUp; }
[data-anim="up"]    { --a: fadeUp; }
[data-anim="right"] { --a: fadeRight; }

@keyframes maskUp    { from { transform: translateY(100%); }              to { transform: none; } }
@keyframes fadeUp    { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(40px); }  to { opacity: 1; transform: none; } }


/* ---------- 8. Phones (screens up to 760px wide) ---------- */
@media (max-width: 760px) {
	/* One column; the pineapple moves to the top and gets small */
	.intro { grid-template-columns: 1fr; padding-top: 40px; gap: 8px; }
	.pineapple { order: -1; }
	.pineapple img { max-width: 130px; }
	.lead { font-size: 1.05rem; }

	/* Two tiles per row, with a bit less space inside */
	.grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.box { padding: 12px 8px; }
	.icon { width: 34px; height: 34px; margin-bottom: 8px; }
	.box-text, .link-card span { font-size: .78rem; }
	.tag { margin-top: 10px; }
	.link-card { padding: 12px 12px; }
}