/*
 * Home page, matching the design file (4000 px wide).
 * --u = one design pixel on the page. The page grows to at most 1920 px.
 * calc() values are design pixels.
 */
:root {
  --page-width: min(100vw, 1920px);
  --u: calc(var(--page-width) / 4000);
  --peach: #ffe2c0;
  --star: #f1c458;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: hidden;
}

body {
  background: #fff;
  font-family: "Rubik", system-ui, sans-serif;
  color: var(--ink);
}

.page {
  width: var(--page-width);
  margin: 0 auto;
  overflow-x: clip;
}

/* =========================================================
   Hero: dotted peach band with cloud edge, photo and title
   ========================================================= */
.hero {
  position: relative;
  height: calc(2440 * var(--u));
}

.hero-band {
  position: relative;
  height: calc(1900 * var(--u));
  background: url("../images/home/dots.svg") 0 0 / calc(292 * var(--u)) calc(167 * var(--u)) var(--peach);
}

/* White cloud edge traced from the design */
.hero-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1500 * var(--u));
  height: calc(400 * var(--u));
  background: url("../images/home/cloud-edge.svg") 0 0 / 100% 100% no-repeat;
}

.school-logo {
  position: absolute;
  left: calc(1939 * var(--u));
  top: calc(159 * var(--u));
  width: calc(315 * var(--u));
}

.school-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.school-logo:focus-visible {
  outline: calc(10 * var(--u)) solid var(--green);
  outline-offset: calc(16 * var(--u));
  border-radius: calc(20 * var(--u));
}

.profile {
  position: absolute;
  left: calc(3047 * var(--u));
  top: calc(236 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(39 * var(--u));
}

.profile-label {
  font-family: "Chilanka", "Mynerve", cursive;
  font-size: calc(78 * var(--u));
  color: var(--green-light);
}

.profile-avatar {
  width: calc(164 * var(--u));
  height: calc(164 * var(--u));
  border-radius: 50%;
  background: var(--green-light);
}

/* Photo sits above the cloud edge */
.hero-visual {
  position: absolute;
  z-index: 1;
  left: calc(645 * var(--u));
  top: calc(701 * var(--u));
  width: calc(1407 * var(--u));
}

.hero-photo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.hero-title {
  position: absolute;
  left: calc(2391 * var(--u));
  top: 0;
  width: calc(800 * var(--u));
  text-align: center;
}

.hero-title > * {
  margin: 0;
  line-height: 1;
}

.month {
  font-weight: normal;
}

.month-name,
.month-year,
.class-name {
  position: absolute;
  left: 0;
  right: 0;
}

.month-name {
  top: calc(856 * var(--u));
  font-family: "Lilita One", sans-serif;
  font-size: calc(314 * var(--u));
  color: var(--green);
  transform: scaleX(0.873);
}

.month-year {
  top: calc(1124 * var(--u));
  font-family: "Dosis", sans-serif;
  font-weight: 400;
  font-size: calc(149 * var(--u));
  color: var(--lime);
  transform: translateX(calc(34 * var(--u)));
}

.class-name {
  top: calc(1352 * var(--u));
  font-family: "Chilanka", "Mynerve", cursive;
  font-size: calc(140 * var(--u));
  color: var(--green-light);
  white-space: nowrap;
  transform: translateX(calc(55 * var(--u)));
}

.greeting {
  position: absolute;
  left: calc(2328 * var(--u));
  top: calc(2000 * var(--u));
  width: calc(1000 * var(--u));
  margin: 0;
  font-family: "Chilanka", "Mynerve", cursive;
  color: var(--green-light);
  text-align: center;
  line-height: 1;
}

.greeting-hello {
  display: block;
  font-size: calc(90 * var(--u));
}

.greeting-name {
  display: block;
  margin-top: calc(-10 * var(--u));
  font-size: calc(330 * var(--u));
}

/* =========================================================
   Teacher's note: intro text + speech bubble
   ========================================================= */
.teacher-note {
  position: relative;
  height: calc(1200 * var(--u));
}

.note-bell  { position: absolute; left: calc(1429 * var(--u)); top: calc(17 * var(--u));  width: calc(284 * var(--u)); }
.note-arrow { position: absolute; left: calc(1524 * var(--u)); top: calc(543 * var(--u)); width: calc(304 * var(--u)); }

.note-bell {
  transform-origin: 50% 10%;
  animation: bell-ring 3s ease-in-out infinite;
}

@keyframes bell-ring {
  0%, 60%, 100% { transform: rotate(0deg); }
  65%           { transform: rotate(14deg); }
  72%           { transform: rotate(-12deg); }
  79%           { transform: rotate(8deg); }
  86%           { transform: rotate(-4deg); }
}

.note-intro-text {
  position: absolute;
  left: calc(951 * var(--u));
  top: calc(196 * var(--u));
  margin: 0;
  font-family: "Chilanka", "Mynerve", cursive;
  font-size: calc(92 * var(--u));
  line-height: 1.22;
  color: var(--green-light);
}

.note-bubble {
  position: absolute;
  left: calc(1939 * var(--u));
  top: calc(92 * var(--u));
  width: calc(1743 * var(--u));
  height: calc(688 * var(--u));
  margin: 0;
  padding: calc(170 * var(--u)) calc(140 * var(--u)) 0;
  border-radius: calc(175 * var(--u));
  background: var(--peach);
}

.note-tail {
  position: absolute;
  left: calc(201 * var(--u));
  top: calc(686 * var(--u));
  width: calc(220 * var(--u));
  fill: var(--peach);
}

.note-text {
  margin: 0;
  font-size: calc(68 * var(--u));
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.note-signature {
  position: absolute;
  right: calc(125 * var(--u));
  top: calc(553 * var(--u));
  font-weight: 600;
  font-size: calc(54 * var(--u));
}

.note-emoji {
  position: absolute;
  left: calc(426 * var(--u));
  top: calc(528 * var(--u));
  width: calc(297 * var(--u));
  animation: sun-spin 12s linear infinite;
}

@keyframes sun-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   Monthly evaluation table
   ========================================================= */
.evaluation {
  padding-left: calc(975 * var(--u));
}

.evaluation-title {
  display: grid;
  grid-template-columns: calc(1336 * var(--u)) auto;
  align-items: end;
  margin: 0;
  font-weight: normal;
}

.evaluation-month {
  font-family: "Lilita One", sans-serif;
  font-size: calc(314 * var(--u));
  line-height: 0.85;
  color: var(--green);
  white-space: nowrap;
}

.evaluation-year {
  margin-left: calc(20 * var(--u));
  font-family: "Dosis", sans-serif;
  font-weight: 400;
  font-size: calc(149 * var(--u));
  color: var(--lime);
}

.evaluation-label {
  padding-bottom: calc(78 * var(--u));
  font-weight: 400;
  font-size: calc(84 * var(--u));
  letter-spacing: 0.01em;
}

.evaluation-table {
  margin-top: calc(110 * var(--u));
  border-collapse: collapse;
  font-size: calc(90 * var(--u));
}

.evaluation-table th {
  padding: 0 0 calc(30 * var(--u));
  font-size: calc(94 * var(--u));
  font-weight: 600;
  text-align: left;
}

.evaluation-table th:first-child,
.evaluation-table td:first-child {
  width: calc(1424 * var(--u));
}

.evaluation-table td {
  height: calc(158 * var(--u));
  padding: 0;
  vertical-align: middle;
}

/* Score: smiley + stars, drawn from data-score */
.score {
  display: flex;
  align-items: center;
  gap: calc(66 * var(--u));
}

.score::before {
  content: "";
  flex: none;
  width: calc(154 * var(--u));
  height: calc(154 * var(--u));
  background: url("../images/home/smiley.svg") center / contain no-repeat;
}

.score[data-score="4"]::before {
  background-image: url("../images/home/smiley-light.svg");
}

.score::after {
  content: "★★★★★";
  font-size: calc(108 * var(--u));
  line-height: 1;
  letter-spacing: calc(-6 * var(--u));
  color: var(--star);
}

.score[data-score="4"]::after {
  content: "★★★★";
}

/* =========================================================
   Activities
   ========================================================= */
.activities {
  margin-top: calc(270 * var(--u));
  text-align: center;
}

.activities-title {
  margin: 0;
  font-family: "Chilanka", "Mynerve", cursive;
  font-weight: normal;
  font-size: calc(140 * var(--u));
  line-height: 1;
  color: var(--green-light);
}

.activity-tiles {
  display: flex;
  justify-content: center;
  gap: calc(133 * var(--u));
  margin-top: calc(80 * var(--u));
  padding-right: calc(28 * var(--u));
}

.activity-tile {
  width: calc(791 * var(--u));
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.activity-tile img {
  display: block;
  width: 100%;
  height: auto;
}

.activity-tile:hover {
  transform: translateY(calc(-20 * var(--u))) rotate(-1.5deg);
}

.activity-tile:focus-visible {
  outline: calc(12 * var(--u)) solid var(--green);
  outline-offset: calc(8 * var(--u));
  border-radius: calc(80 * var(--u));
}

.activities-motto {
  margin: calc(140 * var(--u)) 0 0;
  font-family: "Chilanka", "Mynerve", cursive;
  font-size: calc(110 * var(--u));
  color: var(--green-light);
}

/* =========================================================
   Colorful animated shapes behind the photo
   ========================================================= */
.floaters {
  position: absolute;
  inset: -12% -14% -10% -16%;
  pointer-events: none;
}

.floater {
  position: absolute;
  display: block;
  animation: float 6s ease-in-out infinite;
}

/* Positions and sizes as a percentage of the floaters area */
.circle-lime   { left: 2%;  top: 6%;  width: 15%; aspect-ratio: 1; border-radius: 50%; background: var(--lime); }
.ring-pink     { left: 80%; top: 14%;  width: 13%; aspect-ratio: 1; border-radius: 50%; border: calc(26 * var(--u)) solid #f48fb1; animation-duration: 7s; animation-delay: -2s; }
.star-yellow   { left: 87%; top: 40%; width: 12%; aspect-ratio: 1; background: #ffcf3f; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-name: spin-float; animation-duration: 9s; }
.triangle-blue { left: 0;   top: 52%; width: 12%; aspect-ratio: 1; background: #4fc3f7; clip-path: polygon(50% 5%, 95% 90%, 5% 90%); animation-name: spin-float; animation-duration: 11s; animation-delay: -4s; }
.pill-green    { left: 40%; top: 0;   width: 16%; aspect-ratio: 2.4; border-radius: 999px; background: var(--green-light); animation-name: sway; animation-duration: 5s; }
.plus-red      { left: 72%; top: 88%; width: 8%;  aspect-ratio: 1; background: linear-gradient(#ff7043, #ff7043) center / 100% 30% no-repeat, linear-gradient(#ff7043, #ff7043) center / 30% 100% no-repeat; border-radius: 4px; animation-name: spin-float; animation-duration: 7s; animation-delay: -1s; }
.dot-purple    { left: 20%; top: 90%; width: 6%;  aspect-ratio: 1; border-radius: 50%; background: #9575cd; animation-duration: 4s; animation-delay: -1.5s; }
.dot-orange    { left: 92%; top: 66%; width: 5%;  aspect-ratio: 1; border-radius: 50%; background: #ffa726; animation-duration: 4.5s; animation-delay: -3s; }
.ring-blue     { left: 10%; top: 78%; width: 10%; aspect-ratio: 1; border-radius: 50%; border: calc(22 * var(--u)) solid #4fc3f7; animation-duration: 8s; animation-delay: -5s; }
.star-pink     { left: 22%; top: 1%;  width: 9%;  aspect-ratio: 1; background: #f48fb1; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-name: spin-float; animation-duration: 8s; animation-delay: -3s; }
.circle-yellow { left: 42%; top: 89%; width: 9%;  aspect-ratio: 1; border-radius: 50%; background: #ffcf3f; animation-duration: 5.5s; animation-delay: -2.5s; }
.triangle-lime { left: 92%; top: 22%; width: 8%;  aspect-ratio: 1; background: var(--lime); clip-path: polygon(50% 5%, 95% 90%, 5% 90%); animation-name: spin-float; animation-duration: 10s; animation-delay: -6s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(calc(20 * var(--u)), calc(-60 * var(--u))); }
}

@keyframes spin-float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(calc(-50 * var(--u))) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-18deg) translateX(0); }
  50%      { transform: rotate(18deg) translateX(calc(60 * var(--u))); }
}

/* =========================================================
   Footer band
   ========================================================= */
.footer-band {
  position: relative;
  min-height: calc(524 * var(--u));
  margin-top: calc(490 * var(--u));
  padding: calc(147 * var(--u)) calc(342 * var(--u)) calc(80 * var(--u));
  background: var(--lime);
}

.slogan {
  position: absolute;
  left: calc(3011 * var(--u));
  top: calc(-342 * var(--u));
  width: calc(633 * var(--u));
  height: auto;
  pointer-events: none;
}

.school-name {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: max(calc(85 * var(--u)), 16px);
  color: #fff;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px calc(40 * var(--u));
  max-width: calc(2500 * var(--u));
  margin-top: calc(50 * var(--u));
  font-family: "Dosis", sans-serif;
  font-weight: 500;
  font-size: max(calc(42 * var(--u)), 12px);
  color: var(--green-dark);
}

.footer-links button,
.footer-links a {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.footer-links button:hover,
.footer-links a:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .floater,
  .note-bell,
  .note-emoji {
    animation: none;
  }
}

/* =========================================================
   Narrow screens: single column
   ========================================================= */
@media (max-width: 800px) {
  :root {
    --u: calc(100vw / 1700);
  }

  .hero {
    height: auto;
  }

  .hero-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: calc(80 * var(--u)) 0 calc(260 * var(--u));
  }

  .hero-band::after {
    top: auto;
    bottom: 0;
    height: calc(240 * var(--u));
  }

  .school-logo {
    position: relative;
    left: auto;
    top: auto;
    width: calc(230 * var(--u));
  }

  .profile {
    left: auto;
    right: calc(60 * var(--u));
    top: calc(60 * var(--u));
  }

  .profile {
    gap: calc(22 * var(--u));
  }

  .profile-label {
    font-size: calc(48 * var(--u));
  }

  .profile-avatar {
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
  }

  .hero-title {
    position: relative;
    left: auto;
    height: calc(620 * var(--u));
    margin-top: calc(60 * var(--u));
  }

  .month-name { top: 0; }
  .month-year { top: calc(268 * var(--u)); }
  .class-name { top: calc(470 * var(--u)); transform: none; }

  .hero-visual {
    position: relative;
    left: auto;
    top: auto;
    order: 1;
    width: calc(1150 * var(--u));
    margin: calc(300 * var(--u)) 0 calc(-200 * var(--u));
  }

  .greeting {
    position: static;
    width: auto;
    margin-top: calc(160 * var(--u));
  }

  .teacher-note {
    height: auto;
    padding: calc(120 * var(--u)) calc(100 * var(--u)) 0;
  }

  .note-intro {
    position: relative;
    height: calc(470 * var(--u));
  }

  .note-intro-text { left: calc(80 * var(--u)); top: calc(60 * var(--u)); }
  .note-bell       { left: calc(1080 * var(--u)); top: 0; }
  .note-arrow      { display: none; }

  .note-bubble {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: calc(140 * var(--u)) calc(110 * var(--u)) calc(330 * var(--u));
  }

  .note-text {
    font-size: max(calc(74 * var(--u)), 15px);
  }

  .note-signature {
    top: auto;
    bottom: calc(110 * var(--u));
    right: calc(90 * var(--u));
    font-size: max(calc(54 * var(--u)), 11px);
  }

  .note-emoji {
    left: calc(90 * var(--u));
    top: auto;
    bottom: calc(-70 * var(--u));
    width: calc(260 * var(--u));
  }

  .note-tail {
    top: calc(100% - 2px);
    left: calc(380 * var(--u));
  }

  .evaluation {
    margin-top: calc(320 * var(--u));
    padding: 0 calc(100 * var(--u));
  }

  .evaluation-title {
    grid-template-columns: auto;
    justify-items: start;
    gap: calc(30 * var(--u));
  }

  .evaluation-label {
    padding-bottom: 0;
  }

  .evaluation-table {
    width: 100%;
    font-size: max(calc(70 * var(--u)), 14px);
  }

  .evaluation-table th:first-child,
  .evaluation-table td:first-child {
    width: auto;
    padding-right: calc(40 * var(--u));
  }

  .score {
    gap: calc(30 * var(--u));
  }

  .score::before {
    width: calc(110 * var(--u));
    height: calc(110 * var(--u));
  }

  .score::after {
    font-size: calc(80 * var(--u));
  }

  .activities-title {
    font-size: calc(110 * var(--u));
    line-height: 1.05;
  }

  .activity-tiles {
    flex-wrap: wrap;
    gap: calc(70 * var(--u));
    padding: 0 calc(100 * var(--u));
  }

  .activity-tile {
    width: calc(700 * var(--u));
  }

  .footer-band {
    padding: calc(120 * var(--u)) calc(100 * var(--u)) calc(100 * var(--u));
  }

  .slogan {
    left: auto;
    right: calc(80 * var(--u));
    top: calc(-260 * var(--u));
    width: calc(380 * var(--u));
  }

  .footer-links {
    max-width: calc(1100 * var(--u));
  }
}