/*
 * Login screen, matching the design file (4000 × 2250 px).
 * Everything sits on a 16:9 "stage" using the design's pixel coordinates:
 * --u = one design pixel on the stage. On other aspect ratios the stage is
 * centered and the background color fills the rest.
 */
:root {
  --stage-width: min(100vw, 177.7778vh);
  --u: calc(var(--stage-width) / 4000);
}

* {
  box-sizing: border-box;
}

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

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--lime);
  font-family: "Dosis", system-ui, sans-serif;
}

.stage {
  position: relative;
  width: var(--stage-width);
  aspect-ratio: 16 / 9;
}

/* --- Images (positions from the design) --- */
.stage img {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.flower-1 { left: calc(3563 * var(--u)); top: calc(202 * var(--u));  width: calc(187 * var(--u)); }
.flower-2 { left: calc(3115 * var(--u)); top: calc(1928 * var(--u)); width: calc(94 * var(--u)); }
/* Logo is scaled down while keeping its bottom-right corner from the design */
.slogan   { left: calc(3491 * var(--u)); top: calc(1774 * var(--u)); width: calc(380 * var(--u)); }

/* --- Left frame: student image + animated icons --- */
.frame {
  position: absolute;
  left: calc(73 * var(--u));
  top: calc(9 * var(--u));
  width: calc(2355 * var(--u));
  aspect-ratio: 2355 / 2186;
}

.frame .frame-base {
  inset: 0;
  width: 100%;
}

/* Icon positions as a percentage of the frame image */
.sun           { left: 29.384%; top: 6.542%;  width: 17.622%; }
.plus-blue     { left: 65.096%; top: 6.359%;  width: 4.246%; }
.plus-orange-1 { left: 9.384%;  top: 7.777%;  width: 3.737%; }
.butterfly     { left: 82.038%; top: 13.266%; width: 11.295%; }
.plus-red      { left: 88.790%; top: 25.892%; width: 4.246%; }
.moon          { left: 83.567%; top: 32.342%; width: 8.493%; }
.star          { left: 0.425%;  top: 34.858%; width: 15.287%; }
.chick         { left: 7.346%;  top: 57.548%; width: 13.631%; }
.plus-orange-2 { left: 77.622%; top: 90.668%; width: 3.737%; }
.plus-orange-3 { left: 9.766%;  top: 90.988%; width: 2.972%; }

.sun {
  transform-origin: 50% 100%;
  animation: sun 5s ease-in-out infinite;
}

.butterfly {
  animation: butterfly-fly 7s ease-in-out infinite, butterfly-flap 0.45s ease-in-out infinite alternate;
}

.moon {
  transform-origin: 70% 50%;
  animation: moon 6s ease-in-out infinite;
}

.star {
  animation: star 9s ease-in-out infinite;
}

.chick {
  transform-origin: 50% 100%;
  animation: chick 2.4s ease-in-out infinite;
}

.plus {
  animation: twinkle 2.6s ease-in-out infinite;
}

.plus-blue     { animation-delay: -0.4s; }
.plus-red      { animation-delay: -1.1s; }
.plus-orange-2 { animation-delay: -1.7s; }
.plus-orange-3 { animation-delay: -2.2s; }

@keyframes sun {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.06); }
}

@keyframes butterfly-fly {
  0%, 100% { translate: 0 0;                                       rotate: 0deg; }
  25%      { translate: calc(-30 * var(--u)) calc(-40 * var(--u)); rotate: -8deg; }
  50%      { translate: calc(10 * var(--u)) calc(-70 * var(--u));  rotate: 4deg; }
  75%      { translate: calc(30 * var(--u)) calc(-25 * var(--u));  rotate: 8deg; }
}

@keyframes butterfly-flap {
  from { scale: 1 1; }
  to   { scale: 0.82 1; }
}

@keyframes moon {
  0%, 100% { transform: rotate(-10deg); }
  50%      { transform: rotate(10deg); }
}

@keyframes star {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes chick {
  0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
  20%           { transform: translateY(calc(-60 * var(--u))) rotate(-6deg); }
  40%           { transform: translateY(0) rotate(4deg); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(0.6) rotate(90deg); opacity: 0.6; }
}

/* --- Right panel text --- */
/* Name, class and form are only wrappers; their children are placed on the stage */
.student-name,
.class-info,
.login-form {
  margin: 0;
  font-weight: normal;
}

.school-name,
.student-name span,
.class-info span,
.field-label {
  position: absolute;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

/* School name, student name and class are centered in the 2638–3452 column */
.school-name,
.student-name span,
.class-info span {
  left: calc(2638 * var(--u));
  width: calc(814 * var(--u));
  text-align: center;
}

.school-name {
  top: calc(316 * var(--u));
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: calc(73 * var(--u));
  color: #fff;
}

.student-name span {
  font-family: "Lilita One", sans-serif;
  color: var(--green);
}

.first-name {
  top: calc(612 * var(--u));
  font-size: calc(156 * var(--u));
}

.last-name {
  top: calc(731 * var(--u));
  font-size: calc(180 * var(--u));
  transform: scaleX(0.845);
}

.class-info span {
  font-weight: 300;
  color: var(--mint);
}

.class-label {
  top: calc(918 * var(--u));
  font-size: calc(110 * var(--u));
}

.class-name {
  top: calc(1030 * var(--u));
  font-size: calc(142 * var(--u));
}

/* --- Form --- */
.field-label {
  left: calc(2649 * var(--u));
  font-weight: 500;
  font-size: calc(47 * var(--u));
  color: var(--ink);
}

.birth-date-label { top: calc(1244 * var(--u)); }
.id-digits-label  { top: calc(1485 * var(--u)); }

.field,
.login-button {
  position: absolute;
  height: calc(156 * var(--u));
  border-radius: calc(20 * var(--u));
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: calc(76 * var(--u));
}

/* Inputs stay at 16px or larger so mobile browsers do not zoom in on focus */
.field {
  left: calc(2638 * var(--u));
  font-size: max(calc(76 * var(--u)), 16px);
  padding: 0 calc(40 * var(--u));
  border: calc(6 * var(--u)) solid transparent;
  background: #fff;
  color: var(--green);
  outline: none;
  transition: border-color 0.15s;
}

.field:focus {
  border-color: var(--green);
}

.birth-date-field {
  top: calc(1320 * var(--u));
  width: calc(814 * var(--u));
}

.id-digits-field {
  top: calc(1546 * var(--u));
  width: calc(315 * var(--u));
  padding: 0;
  text-align: center;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.login-button {
  display: grid;
  place-items: center;
  left: calc(3013 * var(--u));
  top: calc(1546 * var(--u));
  width: calc(439 * var(--u));
  background: var(--green);
  color: #fff;
  font-size: calc(68 * var(--u));
  text-decoration: none;
  box-shadow: 0 calc(10 * var(--u)) 0 var(--green-dark);
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.15s;
}

.login-button:hover {
  background: #008c49;
}

.login-button:active {
  transform: translateY(calc(8 * var(--u)));
  box-shadow: 0 calc(2 * var(--u)) 0 var(--green-dark);
}

.login-button:focus-visible {
  outline: calc(6 * var(--u)) solid #fff;
  outline-offset: calc(4 * var(--u));
}

/* --- Privacy note under the form --- */
.privacy-note {
  position: absolute;
  left: calc(2638 * var(--u));
  top: calc(1760 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(18 * var(--u));
  width: calc(814 * var(--u));
  margin: 0;
  font-weight: 500;
  font-size: max(calc(38 * var(--u)), 11px);
  line-height: 1.3;
  color: var(--green-dark);
}

.privacy-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

/* --- Footer --- */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 calc(28 * var(--u));
  padding: calc(16 * var(--u)) 16px;
  font-weight: 500;
  font-size: max(calc(32 * var(--u)), 12px);
  color: var(--green-dark);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 calc(28 * var(--u));
}

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

.site-footer button:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .frame img {
    animation: none;
  }
}

/* --- Portrait screens (phones, portrait tablets): image on top, form below --- */
@media (max-aspect-ratio: 1 / 1) {
  :root {
    --u: calc(100vw / 1110);
  }

  body {
    display: block;
    overflow: auto;
  }

  .stage {
    width: 100%;
    aspect-ratio: auto;
    height: calc(2950 * var(--u));
    overflow-x: clip;
  }

  .frame {
    left: 0;
    top: 0;
    width: calc(1110 * var(--u));
  }

  /* Move the right panel from its design position to below the image */
  .panel,
  .flower-2 {
    translate: calc(-2490 * var(--u)) calc(700 * var(--u));
  }

  .flower-1 {
    display: none;
  }

  .slogan {
    left: calc(850 * var(--u));
    top: calc(2680 * var(--u));
    width: calc(230 * var(--u));
  }

  .site-footer {
    position: static;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px 24px;
  }

  .privacy-note {
    font-size: max(calc(42 * var(--u)), 12px);
  }

}